/* ============================================================
   Magnifiscent – Frontend Stylesheet
   Design: Luxury black & gold, mobile-first
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-pale:   #F5E6B8;
  --gold-dim:    rgba(201,168,76,.35);
  --black:       #000;
  --dark:        #0b0b0b;
  --dark2:       #111;
  --dark3:       #1a1a1a;
  --navy:        #1A2460;
  --off-white:   #F2EDE4;
  --mid-grey:    #c0bbb4;
  --border:      rgba(201,168,76,.18);
  --radius:      3px;
  --transition:  .25s ease;
  --font-head:   'Raleway', 'Segoe UI', sans-serif;
  --font-body:   'Raleway', 'Segoe UI', sans-serif;
  --font-ui:     'Inter', 'Segoe UI', sans-serif;
}

html { scroll-behavior:smooth; }
/* Smooth theme crossfade — transition fires only on manual toggle, not on page load
   (the inline <script> sets the attribute before CSS loads, so no flash occurs) */
body, .site-header, .mobile-drawer, .newsletter-strip, .page-header,
.product-card, .brand-tile, .gender-block, .cart-summary, .checkout-section,
.auth-card, .account-nav, .account-panel, .order-success-box {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
body {
  font-family: var(--font-ui);
  background: var(--dark);
  color: var(--off-white);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.no-scroll { overflow: hidden; }

img { display:block; max-width:100%; height:auto; }
a   { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* ─── Typography ─────────────────────────────────────── */
h1,h2,h3,h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .06em;
}

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: .5rem;
}
.section-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(242,237,228,.88);
  text-align: center;
  margin-bottom: 2.5rem;
}
.gold-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.gold-divider .seg { height:1px; width:60px; background: linear-gradient(to right,transparent,var(--gold)); }
.gold-divider .seg.rev { background: linear-gradient(to left,transparent,var(--gold)); }
.gold-divider .dia { width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }

/* ─── Layout ─────────────────────────────────────────── */
.container   { max-width:1200px; margin:0 auto; padding:0 1.25rem; }
.main-content { flex:1; }
section.pad  { padding:5rem 0; }
section.pad-sm { padding:3rem 0; }

/* ─── HEADER / NAV ───────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(0,0,0,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 1.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.site-logo img {
  height: 44px;
  width: auto;
}
.site-logo-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Desktop nav */
.main-nav {
  display: none;
  align-items: center;
  gap: .1rem;
  list-style: none;
}
.main-nav li a {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off-white);
  padding: .5rem .75rem;
  transition: color var(--transition);
  position: relative;
}
.main-nav li a:hover,
.main-nav li a.active { color: var(--gold); }
.main-nav li a.active::after {
  content:'';
  position:absolute;
  bottom:-2px; left:50%; transform:translateX(-50%);
  width:20px; height:1px;
  background: var(--gold);
}

.badge-sale {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Nav icons (wishlist, account) */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-icon-btn {
  background: none;
  border: none;
  color: var(--off-white);
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: color var(--transition);
  padding: 0;
}
.nav-icon-btn .icon {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-icon-btn .nav-label {
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-icon-btn:hover { color: var(--gold); }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;          /* larger tap target */
  margin-left: -10px;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--off-white);
  transition: all var(--transition);
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.mobile-nav-overlay.open { display:block; }

.mobile-drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: min(300px, 85vw);
  height: 100%;
  background: #0b0b0b;
  border-right: 1px solid var(--border);
  z-index: 1000;
  transition: left .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-drawer.open { left: 0; }

.drawer-logo {
  padding: 1.5rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.drawer-logo img { height:36px; }

.drawer-nav {
  list-style: none;
  flex: 1;
}
.drawer-nav li {
  border-bottom: 1px solid var(--border);
}
.drawer-nav li a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(242,237,228,.82);
  transition: all var(--transition);
}
.drawer-nav li a:hover,
.drawer-nav li a.active { color: var(--gold); background: rgba(201,168,76,.05); }
.drawer-nav li a .icon { font-size: 1rem; opacity:.7; }

/* ─── HERO ───────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(400px, 75vh, 780px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5rem;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/magnifiscent-bg-dark.jpg') center/cover no-repeat;
}
.hero-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at center,rgba(0,0,0,.3) 0%,rgba(0,0,0,.75) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  /* opacity:0 set explicitly so element is invisible pre-animation,
     then 'forwards' holds it at opacity:1 after completion */
  opacity: 0;
  animation: fadeUp 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--off-white);
  letter-spacing: .1em;
  margin-bottom: .75rem;
}
.hero-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: rgba(242,237,228,.9);
  margin-bottom: 2rem;
}
.btn-primary {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #000;
  background: var(--gold);
  padding: .85rem 2.5rem;
  border: none;
  transition: background var(--transition);
}
.btn-primary:hover { background: var(--gold-light); }
.btn-outline {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: .85rem 2.5rem;
  transition: all var(--transition);
}
.btn-outline:hover { background: var(--gold); color:#000; }

/* ─── Gender Category Blocks ─────────────────────────── */
.gender-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.gender-block {
  background: var(--dark2);
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background var(--transition);
}
.gender-block:hover { background: #161616; }
.gender-block .label {
  font-family: var(--font-head);
  font-size: clamp(.9rem, 2vw, 1.3rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.gender-block .sub {
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(242,237,228,.82);
  margin-bottom: 1.5rem;
}

/* ─── Product Grid ───────────────────────────────────── */
.products-section { padding: 5rem 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: var(--dark2);
  border: 1px solid var(--border);
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-3px);
}

.product-card .img-wrap {
  aspect-ratio: 1/1;
  background: var(--dark3);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .img-wrap img { transform: scale(1.04); }

.product-card .placeholder-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  opacity: .2;
}

.sale-tag {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: var(--gold);
  color: #000;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
  padding: 3px 8px;
}

.product-card .info {
  padding: 1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}
.product-card .brand {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
}
.product-card .name {
  font-family: var(--font-head);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--off-white);
  flex: 1;
}
.product-card .sizes {
  font-size: 10px;
  color: var(--mid-grey);
  letter-spacing: .08em;
}
.product-card .price-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: .5rem;
}
.product-card .price {
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 400;
  color: var(--gold);
}
.product-card .price-orig {
  font-size: .8rem;
  color: var(--mid-grey);
  text-decoration: line-through;
}
.product-card .btn-card {
  margin-top: .75rem;
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border);
  padding: .6rem;
  transition: all var(--transition);
}
.product-card .btn-card:hover { background: var(--gold); color:#000; border-color:var(--gold); }

/* ─── Empty state ────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--mid-grey);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h3 { font-family: var(--font-head); color: var(--off-white); margin-bottom: .5rem; }

/* ─── Brands Grid ────────────────────────────────────── */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
}
.brand-tile {
  background: var(--dark2);
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: background var(--transition);
}
.brand-tile:hover { background: var(--dark3); }
.brand-tile .brand-name {
  font-family: var(--font-head);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--off-white);
  margin-bottom: .3rem;
}
.brand-tile .brand-count {
  font-size: 10px;
  color: var(--mid-grey);
  letter-spacing: .1em;
}
.brand-tile:hover .brand-name { color: var(--gold); }

/* ─── Page Header ────────────────────────────────────── */
.page-header {
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 0 3rem;
  text-align: center;
}
.page-header h1 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem,4vw,2.5rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--off-white);
  margin-bottom: .5rem;
}
.page-header p {
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(242,237,228,.82);
  font-size: 1.1rem;
}
.breadcrumb {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: .75rem;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { text-decoration: underline; }

/* ─── Filters Bar ────────────────────────────────────── */
.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.filters-bar .count {
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--mid-grey);
}
.filter-pills {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.filter-pill {
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border: 1px solid var(--border);
  color: var(--mid-grey);
  transition: all var(--transition);
  background: none;
}
.filter-pill:hover, .filter-pill.active {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}

/* ─── Product Detail ─────────────────────────────────── */
.product-detail { padding: 3rem 0 5rem; }
.product-detail .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.product-image-wrap {
  background: var(--dark2);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-size: 6rem;
  opacity: .2;
}
.product-detail .brand-label {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.product-detail h1 {
  font-size: clamp(1.4rem,3vw,2rem);
  color: var(--off-white);
  margin-bottom: .75rem;
}
.product-detail .price-big {
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.product-detail .price-big .orig {
  font-size: 1rem;
  text-decoration: line-through;
  color: var(--mid-grey);
  margin-left: .75rem;
}
.product-detail .description {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(242,237,228,.92);
  line-height: 1.8;
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.size-picker { margin-bottom: 1.5rem; }
.size-picker label {
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mid-grey);
  display: block;
  margin-bottom: .6rem;
}
.size-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.size-btn {
  padding: .5rem 1rem;
  border: 1px solid var(--border);
  background: none;
  color: var(--off-white);
  font-size: 11px;
  letter-spacing: .1em;
  transition: all var(--transition);
  cursor: pointer;
}
.size-btn:hover, .size-btn.selected { border-color: var(--gold); color: var(--gold); }

/* ─── Static Content Pages ───────────────────────────── */
.content-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.85;
  color: rgba(242,237,228,.8);
}
.content-prose h2 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 2rem 0 .75rem;
}
.content-prose p { margin-bottom: 1rem; }
.content-prose a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }

/* ─── Contact Form ───────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 1.25rem;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: .5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--dark2);
  border: 1px solid var(--border);
  color: var(--off-white);
  padding: .8rem 1rem;
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--gold-dim); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-success {
  background: rgba(201,168,76,.1);
  border: 1px solid var(--gold-dim);
  padding: 1rem 1.5rem;
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 1.5rem;
}

/* ─── Newsletter Strip ───────────────────────────────── */
.newsletter-strip {
  background: var(--dark2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 1.25rem;
  text-align: center;
}
.newsletter-strip h2 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}
.newsletter-strip p {
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(242,237,228,.82);
  margin-bottom: 1.5rem;
}
.newsletter-form {
  display: flex;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-form input {
  flex: 1;
  background: var(--dark3);
  border: 1px solid var(--border);
  border-right: none;
  padding: .85rem 1.25rem;
  color: var(--off-white);
  font-family: var(--font-ui);
  font-size: 12px;
  outline: none;
}
.newsletter-form button {
  background: var(--gold);
  border: none;
  padding: .85rem 1.5rem;
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  transition: background var(--transition);
}
.newsletter-form button:hover { background: var(--gold-light); }

/* ─── FOOTER ─────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 3rem 1.5rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
}
.footer-brand .logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.footer-brand .logo img { height: 38px; width: auto; }
.footer-logo-name {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.footer-brand p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .95rem;
  color: var(--off-white);
  opacity: .72;
  line-height: 1.7;
}
.footer-col h4 {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul li a {
  font-size: 12px;
  color: var(--off-white);
  opacity: .88;
  transition: color var(--transition), opacity var(--transition);
  letter-spacing: .05em;
}
.footer-col ul li a:hover { opacity: 1; }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(201,168,76,.1);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy {
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--off-white);
  opacity: .75;
  text-transform: uppercase;
}
.footer-mc {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}
.footer-devby {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: .75;
  white-space: nowrap;
}
/* Media Cartel logo – click → media-cartel.com */
.footer-mc a.mc-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.footer-mc a.mc-logo img {
  height: 11px;
  width: auto;
  display: block;
  opacity: .85;
  transition: opacity var(--transition);
}
.footer-mc a.mc-logo:hover img { opacity: 1; }
/* Mafia boss – double-click → admin in new tab (no cursor hint, intentionally hidden) */
#bossImg {
  height: 32px;
  width: auto;
  display: block;
  opacity: .6;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
  filter: brightness(0) invert(1);
  transition: opacity var(--transition), filter var(--transition);
  flex-shrink: 0;
}
#bossImg:hover { opacity: .85; }

/* MC logo — white in dark mode, natural in light mode */
.footer-mc a.mc-logo img {
  filter: brightness(0) invert(1);
  transition: opacity var(--transition), filter var(--transition);
}
[data-theme="light"] #bossImg,
[data-theme="light"] .footer-mc a.mc-logo img {
  filter: none;
}

/* ─── Maintenance Mode ───────────────────────────────── */
.maintenance-page {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.maintenance-page .bg-logo {
  position: fixed;
  inset: 0;
  background: url('../images/magnifiscent-logo.png') center/cover no-repeat;
  opacity: .12;
}
.maintenance-page .content { position:relative; z-index:2; }
.maintenance-page h1 {
  font-family: var(--font-head);
  font-size: clamp(1.2rem,4vw,2.2rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}
.maintenance-page p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(242,237,228,.88);
  margin-bottom: 2rem;
  max-width: 480px;
}

/* ─── Alerts / Flash ─────────────────────────────────── */
.flash {
  padding: .85rem 1.25rem;
  font-size: 13px;
  margin-bottom: 1.25rem;
  border-left: 3px solid;
}
.flash.success { background:rgba(76,175,80,.1); border-color:#4caf50; color:#a5d6a7; }
.flash.error   { background:rgba(244,67,54,.1);  border-color:#f44336; color:#ef9a9a; }

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Particles ──────────────────────────────────────── */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
  animation: floatP linear infinite;
}
@keyframes floatP {
  0%   { transform:translateY(100vh); opacity:0; }
  10%  { opacity:.5; }
  90%  { opacity:.15; }
  100% { transform:translateY(-10vh); opacity:0; }
}

/* ─── Light Mode ────────────────────────────────────── */
/* Core variable swap — all var()-based rules inherit automatically */
[data-theme="light"] {
  --dark:      #F7F4EF;
  --dark2:     #EDE8DF;
  --dark3:     #E3DDD5;
  --off-white: #1C1916;
  --mid-grey:  #7A746D;
  --border:    rgba(201,168,76,.22);
  --gold-dim:  rgba(201,168,76,.4);
}

/* Header */
[data-theme="light"] .site-header {
  background: rgba(247,244,239,.97);
  border-bottom-color: rgba(201,168,76,.2);
}
[data-theme="light"] .hamburger span { background: #1C1916; }

/* Mobile nav overlay */
[data-theme="light"] .mobile-nav-overlay { background: rgba(28,25,22,.5); }

/* Mobile drawer — light mode */
[data-theme="light"] .mobile-drawer {
  background: #F7F4EF;
  border-right-color: rgba(28,25,22,.12);
}
[data-theme="light"] .drawer-logo {
  border-bottom-color: rgba(28,25,22,.12);
}
[data-theme="light"] .drawer-nav li {
  border-bottom-color: rgba(28,25,22,.10);
}
[data-theme="light"] .drawer-nav li a {
  color: rgba(28,25,22,.82);
}
[data-theme="light"] .drawer-nav li a:hover,
[data-theme="light"] .drawer-nav li a.active {
  color: var(--gold);
  background: rgba(201,168,76,.08);
}

/* Hero — light mode uses the light background image, no overlay */
[data-theme="light"] .hero-bg {
  background-image: url('../images/magnifiscent-bg-light.jpg');
}
[data-theme="light"] .hero-bg::after {
  display: none;
}

/* Gender-block hover (hardcoded #161616) */
[data-theme="light"] .gender-block:hover { background: #E3DDD5; }

/* Hardcoded rgba(242,237,228,x) text — swap to dark equivalent */
[data-theme="light"] .section-sub,
[data-theme="light"] .hero-sub                   { color: rgba(28,25,22,.80); }
[data-theme="light"] .gender-block .sub          { color: rgba(28,25,22,.72); }
[data-theme="light"] .content-prose              { color: rgba(28,25,22,.80); }
[data-theme="light"] .page-header p              { color: rgba(28,25,22,.72); }
[data-theme="light"] .product-detail .description{ color: rgba(28,25,22,.85); }
[data-theme="light"] .newsletter-strip p         { color: rgba(28,25,22,.72); }
[data-theme="light"] .newsletter-form input      { color: #1C1916; }
[data-theme="light"] .summary-row                { color: rgba(28,25,22,.82); }

/* Footer — fully var()-based above, no overrides needed */

/* Specials banner — theme-aware */
.specials-banner {
  background: linear-gradient(135deg,#0f0c00 0%,#1a1400 100%);
  padding: 4rem 1.25rem;
  text-align: center;
  border-top: 1px solid rgba(201,168,76,.15);
}
[data-theme="light"] .specials-banner {
  background: linear-gradient(135deg,#F0EAE0 0%,#E8DDD0 100%);
  border-top-color: rgba(201,168,76,.25);
}
[data-theme="light"] .specials-banner .specials-sub {
  color: rgba(28,25,22,.78);
}

/* Theme toggle icon flip */
[data-theme="light"] .theme-moon { display: none; }
[data-theme="light"] .theme-sun  { display: inline; }
.theme-moon { display: inline; }
.theme-sun  { display: none; }

/* ─── Cart ───────────────────────────────────────────── */
.cart-wrap { padding: 3rem 0 5rem; }
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.cart-table th {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mid-grey);
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 400;
}
.cart-table td {
  padding: 1.1rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cart-item-info { display:flex; align-items:center; gap:1rem; }
.cart-item-img {
  width: 64px; height: 64px;
  background: var(--dark3);
  border: 1px solid var(--border);
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0; font-size:1.5rem; opacity:.4;
  overflow:hidden;
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; opacity:1; }
.cart-item-name {
  font-family: var(--font-head);
  font-size: .9rem;
  color: var(--off-white);
  display: block;
  margin-bottom: .2rem;
}
.cart-item-name:hover { color: var(--gold); }
.cart-item-brand { font-size:10px; color:var(--mid-grey); letter-spacing:.1em; }
.td-size   { font-size:12px; color:var(--mid-grey); }
.td-price  { font-size:13px; color:var(--off-white); white-space:nowrap; }
.td-subtotal { font-size:13px; color:var(--gold); white-space:nowrap; font-weight:500; }
.qty-stepper {
  display: flex; align-items:center; gap:.25rem;
  border: 1px solid var(--border);
  width: fit-content;
}
.qty-btn {
  width:30px; height:34px;
  background: none; border:none;
  color:var(--off-white); font-size:1rem;
  transition: color var(--transition);
}
.qty-btn:hover { color:var(--gold); }
.qty-input {
  width:38px; height:34px;
  background:none; border:none;
  color:var(--off-white); font-size:13px;
  text-align:center; outline:none;
  -moz-appearance:textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.cart-remove {
  background:none; border:none;
  color:var(--mid-grey); font-size:.85rem;
  transition:color var(--transition);
  padding:.25rem .5rem;
}
.cart-remove:hover { color:#ef5350; }
.cart-actions {
  display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
}
.btn-ghost-sm {
  font-family:var(--font-ui);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  background:none; border:1px solid var(--border);
  color:var(--mid-grey); padding:.55rem 1.25rem;
  transition:all var(--transition);
}
.btn-ghost-sm:hover { border-color:var(--gold); color:var(--gold); }

/* ─── Cart Summary ───────────────────────────────────── */
.cart-summary {
  background: var(--dark2);
  border: 1px solid var(--border);
  padding: 1.75rem;
  position: sticky; top: 90px;
}
.summary-title {
  font-family: var(--font-head);
  font-size: 1rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--off-white);
  margin-bottom:1.25rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--border);
}
.summary-row {
  display:flex; justify-content:space-between;
  font-size:13px; color:rgba(242,237,228,.88);
  margin-bottom:.6rem;
}
.summary-row.summary-total {
  border-top:1px solid var(--border);
  padding-top:.75rem; margin-top:.75rem;
  font-size:1rem; color:var(--gold);
  font-weight:500;
}
.free-shipping-hint {
  font-size:11px; color:var(--mid-grey);
  text-align:center; margin:.5rem 0;
  font-style:italic;
}
.summary-login-note {
  font-size:11px; color:var(--mid-grey);
  text-align:center; margin-top:.75rem;
}
.summary-login-note a { color:var(--gold); }

/* ─── Checkout ───────────────────────────────────────── */
.checkout-wrap { padding: 3rem 0 5rem; }
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
}
.checkout-form-col { display:flex; flex-direction:column; gap:1.75rem; }
.checkout-section {
  background: var(--dark2);
  border: 1px solid var(--border);
  padding: 1.75rem;
}
.checkout-section-title {
  font-family: var(--font-head);
  font-size: .95rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--off-white); margin-bottom:1.25rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--border);
}
.form-row-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.form-row-3 {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem;
}
.opt { color:var(--mid-grey); font-size:.8em; font-weight:400; }
.checkbox-label {
  display:flex; align-items:center; gap:.6rem;
  font-size:13px; color:rgba(242,237,228,.88);
  cursor:pointer;
}
.checkbox-label input[type=checkbox] { accent-color:var(--gold); width:15px; height:15px; }

/* Order items in checkout summary */
.order-item-row {
  display:flex; align-items:baseline;
  gap:.5rem; font-size:12px;
  padding:.45rem 0;
  border-bottom:1px solid rgba(201,168,76,.07);
}
.oi-name { flex:1; color:rgba(242,237,228,.88); }
.oi-name em { color:var(--mid-grey); font-style:italic; }
.oi-qty  { color:var(--mid-grey); white-space:nowrap; }
.oi-price{ color:var(--gold); white-space:nowrap; }

/* ─── Auth Pages (login / register) ─────────────────── */
.auth-wrap {
  min-height: 60vh;
  display:flex; align-items:center; justify-content:center;
  padding: 3rem 1.25rem;
}
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--dark2);
  border: 1px solid var(--border);
  padding: 2.5rem 2rem;
}
.auth-card h2 {
  font-family:var(--font-head);
  font-size:1.4rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--off-white); margin-bottom:.4rem; text-align:center;
}
.auth-card .auth-sub {
  font-style:italic; color:var(--mid-grey);
  font-size:.95rem; text-align:center;
  margin-bottom:1.75rem;
}
.auth-card .btn-primary { width:100%; text-align:center; padding:.9rem; }
.auth-switch {
  text-align:center; font-size:12px;
  color:var(--mid-grey); margin-top:1.25rem;
}
.auth-switch a { color:var(--gold); }

/* ─── Account Dashboard ──────────────────────────────── */
.account-wrap { padding:3rem 0 5rem; }
.account-layout {
  display:grid; grid-template-columns:220px 1fr;
  gap:2rem; align-items:start;
}
.account-nav {
  background:var(--dark2);
  border:1px solid var(--border);
  overflow:hidden;
}
.account-nav a {
  display:block; padding:.85rem 1.25rem;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,237,228,.78);
  border-bottom:1px solid var(--border);
  transition:all var(--transition);
}
.account-nav a:hover, .account-nav a.active {
  color:var(--gold); background:rgba(201,168,76,.06);
}
.account-nav a:last-child { border-bottom:none; }
.account-panel {
  background:var(--dark2);
  border:1px solid var(--border);
  padding:1.75rem;
}
.account-panel h3 {
  font-family:var(--font-head);
  font-size:1rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--off-white); margin-bottom:1.25rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--border);
}

/* ─── Order Success ──────────────────────────────────── */
.order-success-wrap {
  max-width:600px; margin:4rem auto; padding:0 1.25rem 5rem;
  text-align:center;
}
.order-success-icon {
  font-size:3.5rem; color:var(--gold); margin-bottom:1rem;
}
.order-success-wrap h1 {
  font-family:var(--font-head);
  font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.1em;
  text-transform:uppercase; color:var(--off-white);
  margin-bottom:.5rem;
}
.order-success-wrap p { color:rgba(242,237,228,.82); margin-bottom:1rem; }
.order-success-box {
  background:var(--dark2); border:1px solid var(--border);
  padding:1.5rem; margin:1.75rem 0; text-align:left;
}
.order-success-box .row {
  display:flex; justify-content:space-between;
  font-size:13px; padding:.4rem 0;
  border-bottom:1px solid rgba(201,168,76,.07);
}
.order-success-box .row:last-child { border-bottom:none; }
.order-success-box .label { color:var(--mid-grey); }
.order-success-box .val { color:var(--off-white); }

/* Cart icon + badge */
.cart-nav-link {
  position:relative;
  font-family:var(--font-ui);
  font-size:9px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--off-white);
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  transition:color var(--transition);
  background:none; border:none;
  padding:0; text-decoration:none;
}
.cart-nav-link:hover { color:var(--gold); }
.cart-nav-link .icon { font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.cart-nav-link .nav-label { font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.cart-badge {
  position:absolute; top:-6px; right:-10px;
  background:var(--gold); color:#000;
  font-size:8px; font-weight:700;
  min-width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
  line-height:1;
}

/* ─── Search overlay ─────────────────────────────────── */
.search-overlay {
  position: fixed;
  top: 72px;
  left: 0; right: 0;
  background: rgba(5,4,2,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 880;
  padding: 2.5rem 1.5rem 2rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.search-overlay.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.search-overlay-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.search-form {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid rgba(201,168,76,.4);
  padding-bottom: .75rem;
}
.search-form input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--off-white);
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 3.5vw, 1.75rem);
  letter-spacing: .06em;
  padding: .25rem 0;
  outline: none;
  min-width: 0;
}
.search-form input::placeholder {
  color: rgba(201,168,76,.35);
  font-style: italic;
  font-weight: 300;
}
.search-submit {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  padding: .35rem;
  display: flex;
  transition: opacity .2s;
  flex-shrink: 0;
}
.search-submit:hover { opacity: .7; }
.search-close {
  display: block;
  margin: 1.25rem auto 0;
  background: none;
  border: none;
  color: rgba(201,168,76,.4);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
}
.search-close:hover { color: var(--gold); }

[data-theme="light"] .search-overlay { background: rgba(247,244,239,.97); }
[data-theme="light"] .search-form input[type="text"] { color: rgba(28,25,22,.9); }
[data-theme="light"] .search-close { color: rgba(28,25,22,.35); }
[data-theme="light"] .search-close:hover { color: rgba(28,25,22,.8); }

/* ─── Search results page ────────────────────────────── */
.search-results-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.search-results-query {
  font-family: var(--font-head);
  font-size: clamp(.9rem, 2vw, 1.1rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.search-results-query strong { color: var(--gold); }
.search-no-results {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--mid-grey);
}
.search-no-results .big { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }

/* ─── Responsive ─────────────────────────────────────── */

/* ── Desktop 768px+ ─────────────────────────────────── */
@media (min-width: 768px) {
  .main-nav  { display:flex; }
  .hamburger { display:none; }
  .nav-icons { display:flex; }
  .product-detail .grid { grid-template-columns:1fr 1fr; }
}

/* ── Mobile header: show ONLY cart badge, hide other icons */
@media (max-width: 767px) {
  .nav-icons  { display:flex; align-items:center; }
  .nav-icon-btn { display:none; }         /* hides theme / wishlist / account on mobile */
  .search-toggle-btn { display:flex; }    /* keep search visible on mobile */
  .cart-nav-link { display:flex; }  /* cart always visible on mobile */
}

/* ── Tablet + mobile shared < 768px ─────────────────── */
@media (max-width: 767px) {
  .footer-grid      { grid-template-columns:1fr 1fr; gap:1.75rem; }
  .footer-brand     { grid-column:1/-1; }
  .gender-grid      { grid-template-columns:1fr; }
  .contact-grid     { grid-template-columns:1fr; gap:2rem; padding:2.5rem 1.25rem; }
  .product-detail .grid { grid-template-columns:1fr; gap:2rem; }
  .cart-layout      { grid-template-columns:1fr; }
  .checkout-layout  { grid-template-columns:1fr; }
  .form-row-2       { grid-template-columns:1fr; }
  .form-row-3       { grid-template-columns:1fr 1fr; }
  .account-layout   { grid-template-columns:1fr; }
  /* account nav — horizontal tabs on mobile */
  .account-nav      { display:flex; flex-wrap:wrap; }
  .account-nav a    { flex:1; min-width:0; text-align:center;
                      padding:.75rem .5rem; border-right:1px solid var(--border);
                      border-bottom:none; font-size:9px; }
  .account-nav a:last-child { border-right:none; }
  /* cart table: hide size col */
  .cart-table th:nth-child(2),
  .cart-table td:nth-child(2) { display:none; }
}

/* ── Tablet only 480px–767px: 2-col product grid ─────── */
@media (min-width: 480px) and (max-width: 767px) {
  .product-grid { grid-template-columns:1fr 1fr; gap:1.25rem; }
  .brands-grid  { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* ── Mobile < 480px ─────────────────────────────────── */
@media (max-width: 479px) {
  /* header */
  .header-inner { padding:0 1rem; }

  /* hero — shorter on small screens */
  .hero { min-height:clamp(240px,52vh,460px); padding-bottom:2.5rem; }

  /* sections */
  section.pad    { padding:2.5rem 0; }
  section.pad-sm { padding:1.75rem 0; }

  /* product grid — 1 column for luxury presentation on phones */
  .product-grid  { grid-template-columns:1fr; gap:1rem; }
  .brands-grid   { grid-template-columns:1fr 1fr; }

  /* footer */
  .footer-grid   { grid-template-columns:1fr; gap:1.5rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .footer-mc     { flex-wrap:wrap; }

  /* forms */
  .form-row-2    { grid-template-columns:1fr; }
  .form-row-3    { grid-template-columns:1fr; }

  /* newsletter — stack vertically */
  .newsletter-form               { flex-direction:column; gap:0; }
  .newsletter-form input         { border-right:1px solid var(--border);
                                   border-bottom:none; width:100%; }
  .newsletter-form button        { width:100%; }

  /* cart table: hide subtotal col too */
  .cart-table th:nth-child(3),
  .cart-table td:nth-child(3)    { display:none; }

  /* auth */
  .auth-card                     { padding:1.75rem 1.25rem; }

  /* page sections */
  .product-detail                { padding:1.5rem 0 3rem; }
  .content-prose                 { padding:2rem 1.25rem; }

  /* filters — horizontal scroll */
  .filters-bar                   { flex-direction:column; align-items:flex-start; }
  .filter-pills                  { overflow-x:auto; flex-wrap:nowrap;
                                   width:100%; padding-bottom:.25rem; -webkit-overflow-scrolling:touch; }

  /* page header */
  .page-header                   { padding:2rem 0 1.75rem; }

  /* order success */
  .order-success-wrap            { margin:1.5rem auto; }
  .order-success-box .row        { flex-direction:column; gap:.15rem; }

  /* cart summary — remove sticky on mobile */
  .cart-summary                  { position:static; }
}

/* ── Very small < 360px (iPhone SE etc.) ────────────── */
@media (max-width: 359px) {
  .product-grid  { grid-template-columns:1fr 1fr; gap:.75rem; }
  .product-card .name     { font-size:.82rem; }
  .product-card .btn-card { font-size:8px; letter-spacing:.12em; padding:.5rem; }
  .auth-card     { padding:1.25rem 1rem; }
}

/* ─── Product page accordion ────────────────────────────── */
.accordion-tab { border-top:1px solid var(--border); }
.accordion-tab:last-child { border-bottom:1px solid var(--border); }
.accordion-head {
  width:100%; background:none; border:none;
  color:var(--off-white);
  font-family:var(--font-head);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:1.25rem 0;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; transition:color var(--transition); text-align:left;
}
.accordion-head:hover { color:var(--gold); }
.accordion-arrow { font-size:12px; transition:transform .25s ease; flex-shrink:0; }
.accordion-tab.open .accordion-arrow { transform:rotate(90deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-inner { padding:0 0 2rem; font-size:.92rem; line-height:1.85; color:var(--off-white); opacity:.88; }

.review-count-pill {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:#000;
  font-size:9px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; padding:0 5px;
  margin-left:.5rem; letter-spacing:0; vertical-align:middle;
}
.review-avg-inline { font-size:11px; color:var(--gold); letter-spacing:.06em; margin-left:.6rem; vertical-align:middle; }

/* ─── Star picker (review form) ──────────────────────────── */
.star-picker { display:flex; flex-direction:row-reverse; gap:2px; width:fit-content; }
.star-picker input[type="radio"] { display:none; }
.star-picker label {
  font-size:1.8rem; color:rgba(201,168,76,.25);
  cursor:pointer; transition:color .15s; padding:0 2px;
}
.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input:checked ~ label { color:var(--gold); }

/* ─── Review cards ───────────────────────────────────────── */
.reviews-list { display:flex; flex-direction:column; gap:1.25rem; }
.review-card {
  background:var(--dark2); border:1px solid var(--border);
  padding:1.25rem 1.5rem; border-radius:var(--radius);
}
.review-header {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:1rem;
  margin-bottom:.75rem; flex-wrap:wrap;
}
.review-stars { color:var(--gold); font-size:1rem; letter-spacing:.05em; }
.review-title { font-family:var(--font-head); font-size:.9rem; letter-spacing:.05em; color:var(--off-white); margin-left:.75rem; }
.review-meta  { font-size:11px; color:var(--mid-grey); letter-spacing:.06em; white-space:nowrap; }
.review-body  { font-size:.88rem; line-height:1.75; color:var(--off-white); opacity:.82; }
.review-form-wrap { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); }
.review-form-title { font-family:var(--font-head); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.review-flash { padding:.85rem 1rem; border-radius:var(--radius); font-size:.88rem; margin-bottom:1.25rem; }
.review-flash--ok  { background:rgba(129,199,132,.12); border:1px solid rgba(129,199,132,.3); color:#81c784; }
.review-flash--err { background:rgba(239,154,154,.12); border:1px solid rgba(239,154,154,.3); color:#ef9a9a; }

/* ─── Reviews summary card (reviews page) ────────────────── */
.reviews-summary-card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem;
  display:flex; align-items:center; gap:3rem; flex-wrap:wrap; margin-bottom:1rem;
}
.reviews-big-score { text-align:center; min-width:100px; }
.reviews-big-num { font-family:var(--font-head); font-size:3.5rem; font-weight:300; color:var(--gold); line-height:1; margin-bottom:.25rem; }
.reviews-big-stars { font-size:1.25rem; color:var(--gold); letter-spacing:.08em; margin-bottom:.35rem; }
.reviews-bar-breakdown { flex:1; min-width:200px; display:flex; flex-direction:column; gap:.4rem; }
.review-bar-row { display:flex; align-items:center; gap:.75rem; font-size:11px; }
.review-bar-label { color:var(--gold); width:20px; text-align:right; flex-shrink:0; }
.review-bar-track { flex:1; height:5px; background:var(--dark3); border-radius:3px; overflow:hidden; }
.review-bar-fill  { height:100%; background:var(--gold); border-radius:3px; transition:width .5s ease; }
.review-bar-count { color:var(--mid-grey); width:20px; flex-shrink:0; }

[data-theme="light"] .review-card          { background:#F0EAE0; border-color:rgba(28,25,22,.1); }
[data-theme="light"] .reviews-summary-card { background:#F0EAE0; border-color:rgba(28,25,22,.1); }
[data-theme="light"] .accordion-head       { color:rgba(28,25,22,.85); }
[data-theme="light"] .accordion-inner      { color:rgba(28,25,22,.82); }
[data-theme="light"] .review-bar-track     { background:rgba(28,25,22,.1); }
[data-theme="light"] .star-picker label    { color:rgba(201,168,76,.2); }