/* Taboo Alternative Jewelry — Dark Lux Overrides (Bootstrap 4 + Bootswatch Lux)
   Palette pulled from logo:
   Peach: #F0B080
   Deep ink: #0B0B0D
   Surface: #141418
   Border: #2A2A33
   Muted: #B8B8C2
*/

:root{
  --taboo-bg: #0B0B0D;
  --taboo-surface: #141418;
  --taboo-surface-2: #191922;
  --taboo-border: #2A2A33;

  --taboo-text: #F2F2F5;
  --taboo-muted: #B8B8C2;

  --taboo-accent: #F0B080;      /* peach */
  --taboo-accent-hover: #E59A6B;
  --taboo-accent-soft: rgba(240,176,128,.14);

  --taboo-shadow: 0 14px 44px rgba(0,0,0,.45);
  --taboo-radius: 16px;
}

/* Global */
html, body { height: 100%; }
body{
  background: var(--taboo-bg);
  color: var(--taboo-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img#logo { max-height: 100px; }

a{ color: var(--taboo-accent); }
a:hover{ color: var(--taboo-accent-hover); }

hr{ border-top: 1px solid var(--taboo-border); }

/* Typography tweaks (Lux is crisp; keep that, just adjust tone) */
h1,h2,h3,h4,h5,h6{ color: var(--taboo-text); }
.lead{ color: rgba(242,242,245,.86); }
small, .text-muted{ color: var(--taboo-muted) !important; }

/* Containers/sections can look “washed” in dark themes; tighten contrast */
.container p{ color: rgba(242,242,245,.82); }

/* Bootstrap utility background overrides */
.bg-white{ background-color: var(--taboo-surface) !important; }
.bg-light{ background-color: var(--taboo-surface) !important; }
.bg-dark{ background-color: #070709 !important; }
.text-dark{ color: var(--taboo-text) !important; }

/* Cards */
.card,
.taboo-iconcard{
  background: linear-gradient(180deg, var(--taboo-surface), var(--taboo-surface-2));
  border: 1px solid var(--taboo-border);
  border-radius: var(--taboo-radius);
  box-shadow: var(--taboo-shadow);
  color: var(--taboo-text);
}

.card .card-header{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--taboo-border);
}

/* Forms */
.form-control{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--taboo-border);
  color: var(--taboo-text);
  border-radius: 12px;
}
.form-control:focus{
  background: rgba(255,255,255,.04);
  border-color: rgba(240,176,128,.55);
  box-shadow: 0 0 0 .2rem rgba(240,176,128,.16);
  color: var(--taboo-text);
}
.custom-select{
  background-color: rgba(255,255,255,.03);
  border: 1px solid var(--taboo-border);
  color: var(--taboo-text);
}
::placeholder{ color: rgba(184,184,194,.75) !important; }

/* Buttons — Peach primary like the logo */
.btn{
  border-radius: 999px; /* luxe pill buttons */
  letter-spacing: .03em;
}

.btn-primary{
  background-color: var(--taboo-accent);
  border-color: var(--taboo-accent);
  color: #0B0B0D; /* dark text looks premium on peach */
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--taboo-accent-hover);
  border-color: var(--taboo-accent-hover);
  color: #0B0B0D;
}

.btn-outline-light{
  border-width: 2px;
}
.btn-outline-light:hover{
  color: #0B0B0D;
}

.btn-dark{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: var(--taboo-text);
}
.btn-dark:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

/* Badges */
.badge-primary{
  background: var(--taboo-accent);
  color: #0B0B0D;
}

/* Navbar (if your containers include one) */
.navbar{
  background: rgba(11,11,13,.72) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar .navbar-brand,
.navbar .nav-link{
  color: rgba(242,242,245,.90) !important;
}
.navbar .nav-link:hover{
  color: var(--taboo-accent) !important;
}

/* Dropdowns/Modals */
.dropdown-menu,
.modal-content{
  background: var(--taboo-surface);
  border: 1px solid var(--taboo-border);
  color: var(--taboo-text);
  box-shadow: var(--taboo-shadow);
}
.dropdown-item{
  color: rgba(242,242,245,.88);
}
.dropdown-item:hover{
  background: rgba(240,176,128,.10);
  color: var(--taboo-text);
}

/* HERO */
.taboo-hero{
  position: relative;
  min-height: 76vh;
  overflow: hidden;
  background: var(--taboo-bg);
}

.taboo-hero-img{
  width: 100%;
  height: 76vh;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  filter: saturate(.92) contrast(1.05);
}

.taboo-hero-overlay{
  position: absolute;
  inset: 0;
  /* moody overlay with a subtle peach “glow” */
  background:
    radial-gradient(900px 480px at 50% 35%, rgba(240,176,128,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.72));
  display: flex;
  align-items: center;
}

.taboo-title{
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.taboo-subtitle{
  color: rgba(242,242,245,.86);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Logo responsive + “plate” so it reads on any background */
.taboo-logo-wrap{
  display: inline-block;
  padding: .65rem .9rem;
  border-radius: 999px;
  background: rgba(11,11,13,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
}

.taboo-logo{
  width: 100%;
  height: auto;
  max-width: 260px; /* desktop */
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* CTA layout: stacked on mobile, inline on >= sm */
.taboo-cta{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
}
.btn-sm-inline{
  width: 100%;
  max-width: 420px;
}
@media (min-width: 576px){
  .taboo-cta{
    flex-direction: row;
    justify-content: center;
  }
  .btn-sm-inline{
    width: auto;
    max-width: none;
  }
}

/* Icon cards / small feature blocks */
.taboo-icon{
  font-size: 1.4rem;
  margin-bottom: .5rem;
  color: var(--taboo-accent);
}

/* Images */
.taboo-rounded{
  border-radius: var(--taboo-radius);
  box-shadow: var(--taboo-shadow);
  border: 1px solid rgba(255,255,255,.06);
}

/* Category cards */
.taboo-catcard{ display:block; text-decoration:none !important; }
.taboo-catcard-inner{
  border-radius: var(--taboo-radius);
  padding: 1.25rem;
  min-height: 110px;
  background:
    radial-gradient(600px 220px at 20% 10%, rgba(240,176,128,.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--taboo-border);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.taboo-catcard-title{
  color: var(--taboo-text);
  font-weight: 700;
  letter-spacing: .03em;
}
.taboo-catcard-sub{
  color: rgba(184,184,194,.92);
  margin-top: .15rem;
}
.taboo-catcard:hover .taboo-catcard-inner{
  transform: translateY(-2px);
  border-color: rgba(240,176,128,.35);
  box-shadow: 0 18px 54px rgba(0,0,0,.55);
}

/* Final CTA band */
.taboo-band{
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(240,176,128,.22), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.65));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
}

/* Mobile logo sizing */
@media (max-width: 575.98px){
  .taboo-hero{ min-height: 72vh; }
  .taboo-hero-img{ height: 72vh; }
  .taboo-logo{ max-width: 190px; }
  .taboo-title{ font-size: 1.45rem; }
}

/* Very small devices */
@media (max-width: 360px){
  .taboo-logo{ max-width: 170px; }
  .taboo-title{ font-size: 1.25rem; }
}