/* ==========================================================================
   MEQAD — Luxury Jewellery & Beauty Accessories
   Light Luxury Design System
   ========================================================================== */

:root{
  --paper: #FFFFFF;
  --paper-soft: #F8F8F8;
  --ink: #111111;
  --ink-soft: rgba(17,17,17,.62);
  --ink-faint: rgba(17,17,17,.42);
  --line: #EAEAEA;
  --line-strong: #DCDCDC;

  --gold: #D4AF37;
  --gold-soft: #E8CB6E;
  --gold-deep: #A9822A;
  --white: #FFFFFF;
  --black: #111111;

  /* Single source of truth for the hero photo path. Desktop and the
     mobile override both read this instead of each spelling out their
     own url('...') string, so there is no way for the two to ever drift
     apart (e.g. a future edit updating one copy of the path and missing
     the other). CSS custom properties are fully available inside media
     queries — confirmed working below — so this doesn't need to be
     duplicated per breakpoint. */
  --hero-bg-image: url('../images/hero/hero-flatlay-blush-navy.webp');

  /* Single, consistent typographic system across the whole site:
     one clean sans-serif family, differentiated only by weight
     (headings semi-bold/bold, body regular, buttons/prices medium/semi-bold). */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Poppins', sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-soft: 0 10px 30px -14px rgba(17,17,17,.12);
  --shadow-lift: 0 26px 50px -20px rgba(17,17,17,.18);
  --shadow-gold: 0 20px 44px -18px rgba(212,175,55,.5);
}

*,*::before,*::after{ box-sizing: border-box; }
/* Explicit, belt-and-braces full-width guarantee for the whole page shell.
   Nothing upstream was actually constraining these (no fixed width existed
   on html/body/.container before this), but stating it outright removes
   any doubt and guards against a hosting/embed environment imposing its
   own width on a page that doesn't explicitly claim 100%. max-width:none
   ensures nothing here can ever be capped smaller than the viewport. */
html, body{ width:100%; max-width:none; }
html{ scroll-behavior: smooth; overflow-x: hidden; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Every full-bleed section (header, hero, and any section not opting into
   a narrower layout) spans the full viewport width; .container inside each
   is what creates the readable, centered 1280px content column. This is
   the mechanism that makes desktop "full-width horizontal" while still
   keeping text/content at a comfortable reading width — not a phone-frame
   wrapper anywhere in the page. */
.site-header, .hero, section{ width:100%; max-width:none; }

h1,h2,h3,h4,h5{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
  color: var(--ink);
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width: 100%; display:block; }
button{ font-family: var(--font-body); cursor:pointer; }

.container{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px){ .container{ padding: 0 20px; } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 18px;
}


/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 38px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease), color .3s var(--ease);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::before{ transform: translateX(120%); }

.btn-gold{
  background: linear-gradient(180deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  color: var(--ink);
}
.btn-gold:hover{ transform: translateY(-3px); background: var(--ink); color: var(--white); box-shadow: var(--shadow-lift); }

.btn-outline{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold-deep); transform: translateY(-3px); background: var(--paper-soft); }

.btn-dark{ background: var(--ink); color: var(--white); }
.btn-dark:hover{ background: var(--gold); color: var(--ink); transform: translateY(-3px); }

.btn-block{ width:100%; }
.btn-sm{ padding: 10px 22px; font-size: 11px; }

/* ==========================================================================
   Announcement bar — slim marquee strip pinned above the header.
   Site-wide: included in the markup of every customer-facing page, and
   every rule below is scoped under body.has-announcement-bar so any page
   that doesn't include the bar still renders its .site-header exactly as
   before — nothing here touches those.
   ========================================================================== */
.announcement-bar{
  position: fixed; top:0; left:0; right:0; z-index: 901;
  height: 36px; overflow: hidden;
  background: #071A33;
  display:flex; align-items:center;
}
.announcement-track{
  display:flex; align-items:center; flex-wrap:nowrap; width:max-content;
  animation: announcement-scroll 26s linear infinite;
  will-change: transform;
}
.announcement-bar:hover .announcement-track{ animation-play-state: paused; }
.announcement-set{
  display:flex; align-items:center; flex-shrink:0; white-space:nowrap;
}
.announcement-set span,
.announcement-set a{
  font-family: var(--font-body); font-size: 11.5px; font-weight:500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--white);
  white-space:nowrap;
}
.announcement-set .announcement-item{ padding: 0 18px; }
.announcement-set .announcement-sep{ color: rgba(255,255,255,.4); padding:0; }
.announcement-link{ text-decoration: underline; text-underline-offset:3px; transition: opacity .25s var(--ease); }
.announcement-link:hover{ opacity:.75; }
@keyframes announcement-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .announcement-track{ animation: none; }
}
@media (max-width: 768px){
  .announcement-bar{ height: 32px; }
  .announcement-set span,
  .announcement-set a{ font-size: 10.5px; letter-spacing:.06em; }
  .announcement-set .announcement-item{ padding: 0 12px; }
  .announcement-track{ animation-duration: 20s; }
}
/* Push the fixed header (and, on mobile, the hero's own header-clearance
   padding) down by exactly the bar's height — only when the bar is
   present, so no other page's spacing changes. */
body.has-announcement-bar .site-header{ top: 36px; }
@media (max-width: 768px){
  body.has-announcement-bar .site-header{ top: 32px; }
  body.has-announcement-bar .hero{ padding-top: 154px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 900;
  padding: 26px 0;
  transition: background .5s var(--ease), padding .4s var(--ease), border-color .5s var(--ease), box-shadow .4s var(--ease);
  border-bottom: 1px solid transparent;
  background: transparent;
}
.site-header.scrolled{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  padding: 14px 0;
  border-color: var(--line);
  box-shadow: 0 4px 24px -12px rgba(17,17,17,.08);
}
.site-header .container{ display:flex; align-items:center; justify-content: space-between; gap: 24px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 46px; width:auto; transition: height .4s var(--ease); }
.site-header.scrolled .brand img{ height: 38px; }

.main-nav{ display:flex; align-items:center; gap:48px; position:absolute; left:50%; transform: translateX(-50%); }
.main-nav a{
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); position: relative; padding: 6px 0;
}
.main-nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold); transition: width .35s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color: var(--gold-deep); }

/* Nav dropdown mega-menu */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.nav-dropdown-trigger svg{ width:11px; height:11px; transition: transform .3s var(--ease); }
.nav-dropdown:hover .nav-dropdown-trigger svg, .nav-dropdown.open .nav-dropdown-trigger svg{ transform: rotate(180deg); }
.mega-menu{
  position:absolute; top:calc(100% + 22px); left:50%; transform: translateX(-50%) translateY(8px);
  width: 560px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift); padding: 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 30px;
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease); z-index:920;
}
.nav-dropdown:hover .mega-menu, .nav-dropdown.open .mega-menu{ opacity:1; pointer-events:all; transform: translateX(-50%) translateY(0); }
.mega-menu-col h5{
  font-family: var(--font-body); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.mega-menu-col a{
  display:block; font-size:13.5px; color: var(--ink-soft); padding:7px 0; text-transform:none; letter-spacing:normal;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.mega-menu-col a:hover{ color: var(--gold-deep); padding-left:4px; }
.mega-menu-col a.view-all{ color: var(--ink); font-weight:500; margin-top:6px; }

@media (max-width: 992px){
  /* Qualified with the .main-nav ancestor (not just .mega-menu) so this
     rule's specificity is strictly higher than the desktop rule above
     (.mega-menu, and .nav-dropdown.open .mega-menu). The previous mobile
     override matched the desktop rule's specificity exactly and only won
     because it happened to be written later in the file — a fragile,
     order-dependent fix that a future stylesheet edit could silently
     break. Raising specificity here means the desktop's absolute
     positioning, 560px fixed width, and left:50%/translateX(-50%)
     centering can never leak through and overflow the phone viewport,
     regardless of source order. left/top are explicitly reset too, even
     though they're inert under position:static, so nothing is left
     ambiguous. */
  .main-nav .mega-menu{
    position:static; left:auto; top:auto; transform:none; width:100%; max-width:100%;
    box-shadow:none; border:none; border-top:1px solid var(--line);
    border-radius:0; opacity:1; pointer-events:none; max-height:0; overflow:hidden; padding:0 0 0 16px;
    display:block; margin-top:0; transition: max-height .35s var(--ease), padding .35s var(--ease);
  }
  /* max-height raised from 600px: at narrow widths (320-414px) the two
     category columns stack full-width and their links can wrap to two
     lines, pushing total content past 600px. Since .mega-menu also has
     overflow:hidden (needed for the collapse animation), anything past
     the cap was getting silently clipped — some categories were present
     in the DOM but not visible/tappable. 2000px comfortably exceeds the
     real content height on any screen size, so nothing is cut off; the
     open .main-nav drawer still scrolls (overflow-y:auto) if the full
     menu is taller than the viewport. */
  .main-nav .nav-dropdown.open .mega-menu{
    pointer-events:all; max-height:2000px; padding:14px 16px 14px 16px;
    position:static; left:auto; transform:none; width:100%; max-width:100%;
  }
  .mega-menu-col{ margin-bottom:16px; max-width:100%; }
  .mega-menu-col a, .mega-menu-col h5{ overflow-wrap:break-word; word-break:break-word; }

  /* Root cause of the Shop submenu overflowing off the right edge of the
     phone screen: .main-nav (the slide-out drawer) is a flex container with
     align-items:center, so its flex-item children shrink-wrap to their own
     content width instead of filling the drawer. Plain links (Home, About…)
     are short so this was invisible, but .nav-dropdown wraps both the
     "Shop" trigger AND the full-width submenu beneath it — so the whole
     dropdown box was sizing itself to the submenu's widest line of text and
     bleeding past the drawer's edge. Forcing just this one flex item to
     stretch to the drawer's actual width (rather than changing
     align-items for every nav item, which would also re-align the plain
     links) fixes the overflow without touching how Home/About/Contact look. */
  .nav-dropdown{ align-self:stretch; width:100%; max-width:100%; }
  .nav-dropdown-trigger{ justify-content:center; width:100%; }
}

.header-icons{ display:flex; align-items:center; gap:4px; }
.icon-btn{
  position: relative; width: 44px; height:44px; display:flex; align-items:center; justify-content:center;
  color: var(--ink); transition: color .3s var(--ease), transform .3s var(--ease);
  background:none; border:none;
}
.icon-btn:hover{ color: var(--gold-deep); transform: translateY(-2px); }
.icon-btn svg{ width:20px; height:20px; }
.icon-badge{
  position:absolute; top:3px; right:2px; background: var(--gold); color: var(--ink); font-size: 10px; font-weight:600;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

.nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:none; width:44px; height:44px; padding:0; }
.nav-toggle span{ width:24px; height:1px; background: var(--ink); display:block; transition: all .3s var(--ease); }

@media (max-width: 992px){
  .main-nav{
    position: fixed; top:0; right:-100%; height:100vh; width: min(320px, 80vw);
    background: var(--paper); border-left: 1px solid var(--line); flex-direction: column;
    /* justify-content:center was the root cause of the missing "Stainless
       Steel Jewellery" heading: when the Shop dropdown opens, the drawer's
       content grows much taller than the drawer itself. A centered flex
       container distributes that overflow symmetrically above AND below
       its own bounds — but a scroll container's scrollTop can never go
       negative, so the portion that overflowed off the TOP (the section
       heading, and even nav items above Shop) became permanently
       unreachable by scrolling, not just visually hidden. Top-aligning
       instead means all overflow grows downward, where the existing
       overflow-y:auto below can actually reach it. Padding-top keeps the
       same visual breathing room under the fixed header that centering
       used to provide when the list was short. */
    justify-content:flex-start; padding: 110px 0 40px;
    transform:none; left:auto; transition: right .45s var(--ease); z-index: 950; box-shadow: -20px 0 50px -20px rgba(17,17,17,.15);
    overflow-x:hidden; overflow-y:auto;
  }
  /* Same dvh reasoning as the hero above: keeps the slide-out drawer's
     height matched to the real visible viewport on Android/iOS instead
     of jumping as the browser's address bar shows/hides mid-scroll. */
  @supports (height: 100dvh){
    .main-nav{ height: 100dvh; }
  }
  .main-nav.open{ right:0; }
  .nav-toggle{ display:flex; }
}
.site-header:not(.scrolled) .nav-toggle span{ background: var(--ink); }

/* Smaller phones: the brand wordmark is a wide banner logo, so give the
   header icons a bit less room to keep everything on one line with no
   overlap or clipping. Tap targets stay well above the 24px accessibility
   minimum. The "Account" icon currently has no destination (no account
   system exists yet) so it's hidden here rather than crowding out the
   icons that do something, and reappears once there's room on larger
   screens. */
@media (max-width: 640px){
  .brand img{ height: 34px; }
  .header-icons{ gap:0; }
  .icon-btn{ width:38px; height:38px; }
  .icon-btn svg{ width:19px; height:19px; }
  .icon-badge{ top:1px; right:0; }
  .header-icons a.icon-btn[aria-label="Account"]{ display:none; }
}
@media (max-width: 380px){
  .brand img{ height: 28px; }
}
@media (max-width: 340px){
  .brand img{ height: 24px; }
  .icon-btn{ width:34px; height:34px; }
  .icon-btn svg{ width:17px; height:17px; }
}

/* Search overlay */
.search-overlay{
  position:fixed; inset:0; background: rgba(255,255,255,.98); z-index: 1000;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
}
.search-overlay.open{ opacity:1; pointer-events:all; }
.search-overlay form{ width: min(680px, 88vw); border-bottom: 1px solid var(--gold); display:flex; align-items:center; gap:16px; padding-bottom: 14px; }
.search-overlay input{ flex:1; background:none; border:none; outline:none; color: var(--ink); font-family: var(--font-heading); font-size: 28px; }
.search-overlay input::placeholder{ color: var(--ink-faint); }
.search-close{ position:absolute; top:34px; right:34px; background:none; border:none; color:var(--ink); font-size: 14px; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.search-close:hover{ color: var(--gold-deep); }
@media (max-width: 480px){
  .search-overlay input{ font-size:20px; }
  .search-close{ top:20px; right:20px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* On Android Chrome and iOS Safari the address bar shows/hides as you
   scroll, which makes 100vh jump between two different pixel heights —
   most visible on the hero since it's a full-height section. 100dvh
   ("dynamic viewport height") tracks the actual visible area instead, so
   the hero settles at a stable height on both platforms. Falls back
   silently to the 100vh above in any browser that doesn't support dvh;
   desktop is unaffected since desktop browser chrome doesn't resize. */
@supports (min-height: 100dvh){
  .hero{ min-height: 100dvh; }
}
/* Mobile: two earlier approaches were tried and both cropped the photo.
   - background-size:cover (centered) filled the tall portrait box by
     cropping the WIDE (1.78:1) source photo's left/right edges — exactly
     where the necklace, bracelet, earrings and ring cluster sit, leaving
     only the plain blush middle visible.
   - A later "cover, positioned 85% from the top" attempt still used
     cover, so it was still cropping horizontally — it just shifted which
     horizontal slice showed.
   Root cause: `cover` scales the image to fill BOTH dimensions of the
   box, so whenever the box's aspect ratio doesn't match the image's it
   crops one axis. A portrait phone box against a landscape photo always
   crops the width.
   FIX, mobile-only:
   1. background-size: 100% auto on the photo layer scales it to the
      box's full WIDTH and lets the height follow the photo's own aspect
      ratio instead of the box's — so nothing is cropped and nothing is
      stretched/distorted; the complete photo renders as one uncropped
      band at its natural proportions.
   2. background-position: top center pins that band to the very top of
      the hero, showing the photo from its correct starting point (its
      own top edge) — including the navy-fabric/necklace corner that
      cover was cutting off entirely.
   3. min-height:auto + padding (unchanged from before) keeps the hero
      sized to its own content rather than a forced 100dvh box, so the
      solid background-color below the photo band (#F8EBE3, sampled from
      the photo's own blush tone) reads as a seamless continuation of the
      image rather than an empty gap.
   4. The gradient layer is kept but inverted and lightened versus the
      old version: transparent at the very top (so the photo's top edge
      shows fully) easing up to a soft cream wash further down (where
      the heading/paragraph/buttons sit), so text stays readable if the
      photo's lower band ever sits behind it, without hiding the photo
      the way the old near-opaque version did. Its stops are in fixed
      px (not %), because the photo band's own height is fixed by the
      viewport width (100% auto), while the hero's total height (and so
      what a % stop would land on) varies with font sizing — px stops
      keep the fade anchored to roughly where the photo band ends across
      the whole mobile width range, from narrow phones up to the 768px
      upper edge of this breakpoint, instead of drifting with content
      height.
   Desktop's rule above (background-size:cover) is completely untouched —
   this entire block only ever applies at 768px and below. */
@media (max-width: 768px){
  .hero{
    min-height: auto;
    padding: 122px 0 112px;
    background-color: #F8EBE3;
    background-image:
      linear-gradient(180deg, rgba(248,235,227,0) 0px, rgba(248,235,227,.06) 190px, rgba(248,235,227,.6) 300px, rgba(248,235,227,.9) 420px, rgba(248,235,227,.97) 600px),
      var(--hero-bg-image);
    background-size: 100% 100%, cover;
    background-position: center, top center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }
  /* Pulled in from 38px so it sits close to the true bottom edge of the
     now content-sized hero, clear of the buttons above it — with the
     100dvh-tall hero this had ~300px of empty space to sit in; that's
     gone now, so its offset needs to shrink to match. */
  .scroll-cue{ bottom: 18px; }
}
.hero-glow{
  position:absolute; width: 900px; height:900px; left:50%; top:38%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 65%); filter: blur(30px);
  animation: pulse-glow 8s ease-in-out infinite; pointer-events:none;
}
@keyframes pulse-glow{ 0%,100%{ opacity:.6; transform: translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform: translate(-50%,-50%) scale(1.08); } }
.hero-facets{ position:absolute; inset:0; pointer-events:none; opacity:.6; }

.hero-content{ position:relative; z-index:2; max-width: 840px; padding: 0 24px; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding: 10px 24px; margin-bottom: 30px;
  border: 1px solid var(--gold); border-radius: 999px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: var(--gold-deep); background: rgba(212,175,55,.08);
  opacity:0; animation: fade-up .9s var(--ease) .1s forwards;
}
.hero-eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.25); }

.hero h1{ font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.08; color: var(--ink); opacity:0; animation: fade-up 1s var(--ease) .3s forwards; }
.hero h1 em{
  font-style: normal; background: linear-gradient(120deg, var(--gold-deep), var(--gold) 45%, var(--gold-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ margin: 26px auto 0; max-width: 560px; color: var(--ink-soft); font-size: 16px; line-height:1.8; font-weight:400; opacity:0; animation: fade-up 1s var(--ease) .5s forwards; }
.hero-actions{ margin-top: 42px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; opacity:0; animation: fade-up 1s var(--ease) .7s forwards; }

@keyframes fade-up{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform: translateY(0); } }

.scroll-cue{ position:absolute; bottom: 38px; left:50%; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color: var(--ink-faint); font-size: 10px; letter-spacing:.3em; text-transform:uppercase; z-index:2; }
.scroll-cue .line{ width:1px; height:40px; background: linear-gradient(var(--gold), transparent); animation: scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 50.1%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }

/* ==========================================================================
   Section basics
   ========================================================================== */
.section{ padding: 120px 0; }
.section-soft, .section-light{ background: var(--paper-soft); }
.section-dark{ background: var(--ink); color: var(--white); }
.section-header{ text-align:center; max-width: 620px; margin: 0 auto 64px; }
.section-header h2{ font-size: clamp(2rem, 4vw, 2.8rem); }
.section-header p{ margin-top:16px; color: var(--ink-soft); font-weight:400; line-height:1.8; }
.section-dark .section-header p{ color: rgba(255,255,255,.65); }
.section-dark .eyebrow{ color: var(--gold); }
@media (max-width: 640px){ .section{ padding: 80px 0; } }


/* ==========================================================================
   Category cards
   ========================================================================== */
.categories-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px){ .categories-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .categories-grid{ grid-template-columns: repeat(2,1fr); gap:16px; } }
@media (max-width: 640px){
  .category-label h3{ font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
  .category-label{ padding: 22px 16px 24px; }
}
/* Stays 2-column at every mobile width. Below ~400px the card gets
   narrow enough that the title needs a smaller size to avoid an
   awkward 4-line wrap — text size only, columns are untouched. */
@media (max-width: 400px){ .category-label h3{ font-size: 1.05rem; } }

.category-card{
  display:block; position:relative; width:100%; border-radius: var(--radius-md); overflow:hidden;
  aspect-ratio: 3/4; border: 1px solid var(--line); isolation:isolate; box-shadow: var(--shadow-soft);
  transition: box-shadow .4s var(--ease);
}
.category-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.category-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.82)); }
.category-card::before{
  content:''; position:absolute; inset:0; border: 1px solid transparent; border-radius: var(--radius-md); z-index:3;
  transition: border-color .4s var(--ease); pointer-events:none;
}
.category-card:hover{ box-shadow: var(--shadow-gold); }
.category-card:hover::before{ border-color: var(--gold); }
.category-card:hover img{ transform: scale(1.08); }
.category-label{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 26px 20px; text-align:center; }
.category-label h3{ font-size: 1.25rem; color: var(--white); }
.category-label span{ display:block; margin-top:6px; font-size: 11px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); opacity:0; transform: translateY(8px); transition: all .4s var(--ease); }
.category-card:hover .category-label span{ opacity:1; transform:none; }

/* ==========================================================================
   Subcategory picker grid (category.html — Homepage > Main Category >
   Subcategory > Products). Reuses .category-card/.category-label exactly
   as-is for visual consistency; only the grid container differs, since the
   number of subcategories varies per main category (2 to 7+) and is
   computed at runtime from the real product catalog rather than fixed at 4. */
/* Desktop/tablet fix: minmax(190px, 1fr) let each column's flexible 1fr
   track grow to fill whatever space was left in the row. That's invisible
   when a category has enough subcategories to fill the row (stainless,
   premium), but "Nails" has no subcategories at all — render() falls back
   to a single "Shop All Nails" card — so that one card was the only grid
   item and its 1fr track stretched to the full ~1216px content width,
   producing one giant, misshapen square card on desktop while the
   `max-width:767px` override below (a fixed 2-column grid) kept mobile
   looking normal. Capping the track's max size instead of leaving it
   flexible keeps the same ~225px cards multi-item categories already
   render (their columns settle well under this cap, so nothing there
   changes) while giving a lone card a normal, in-proportion size instead
   of stretching to fill the row. justify-content:center then centers
   that lone card (or a short final row) in the leftover space instead of
   leaving it pinned to the left edge with the empty space dangling on
   one side. Mobile (<=767px) already gets its own fixed 2-column rule
   below and is untouched by this. */
.subcategory-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); gap: 22px; width:100%; justify-content: center; }
.subcategory-grid .category-card{ aspect-ratio: 1/1; }
.subcategory-card-count{ display:block; margin-top:4px; font-size:10.5px; letter-spacing:.08em; color: rgba(255,255,255,.72); }
.subcategory-viewall{
  aspect-ratio: 1/1; border-radius: var(--radius-md); border: 1px solid var(--gold);
  background: var(--paper-soft); display:flex; align-items:center; justify-content:center; text-align:center;
  padding: 20px; transition: all .4s var(--ease); box-shadow: var(--shadow-soft); overflow:hidden;
}
.subcategory-viewall:hover{ background: var(--gold); box-shadow: var(--shadow-gold); }
.subcategory-viewall span{ font-family: var(--font-heading); font-size: 1.15rem; color: var(--ink); }
.subcategory-viewall:hover span{ color: var(--white); }
.category-picker-loading{ text-align:center; padding: 60px 0; color: var(--ink-faint); }

/* Mobile fix (screens <768px): the picker grid and its "View All" tile were
   built assuming an even card count, so on a real device the trailing
   "View All" card — an ODD 7th (or 6th/9th…) item after however many real
   subcategories exist — landed alone in the left cell of the final row
   while its full label ("View All Stainless Steel Jewellery (55)") tried
   to wrap inside a fixed square aspect-ratio box with no overflow clip,
   stretching that row unevenly and reading as broken/overlapping. Root
   cause fixed here, mobile-only, without touching desktop:
     1. "View All" always spans both columns (grid-column:1/-1) so it's
        never sharing a row with an empty cell.
     2. It gets a real height instead of aspect-ratio:1/1, since a
        full-width bar doesn't need to be square, and its text always
        fits without stretching the row.
     3. Every card gets explicit box-sizing/overflow/width so nothing can
        expand outside its own grid cell or the viewport. */
@media (max-width: 767px){
  .subcategory-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .subcategory-grid .category-card{ width:100%; box-sizing:border-box; overflow:hidden; }
  .subcategory-viewall{
    grid-column: 1 / -1; width:100%; aspect-ratio:auto; min-height:88px;
    box-sizing:border-box; padding:18px 16px;
  }
  .subcategory-viewall span{ font-size:1.05rem; line-height:1.35; }
  body.chooser-active .category-pills{ display:none; }
  body.chooser-active .category-chooser{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
  body.chooser-active .category-chooser-card{ min-height: 200px; border-radius: 22px; }
  body.chooser-active .category-chooser-card[data-sub="all"]{
    grid-column: 1 / -1; min-height: 120px; padding: 20px 18px;
  }
  body.chooser-active .category-chooser-card[data-sub="all"] .category-chooser-name{ font-size: clamp(1.65rem, 4.8vw, 2.2rem); }
  body.chooser-active .category-chooser-card[data-sub="all"] .category-chooser-meta{ font-size: 1.08rem; }
  body.chooser-active .category-chooser-name{ font-size: clamp(1.3rem, 4vw, 1.8rem); }
}

/* ==========================================================================
   Product cards — image on top, product info in a separate block below.
   Nothing (name, price, rating, buttons) ever sits on top of the photo.
   ========================================================================== */
.products-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items:stretch; }
@media (max-width: 1100px){ .products-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .products-grid{ grid-template-columns: 1fr; gap:22px; max-width:420px; margin:0 auto; } }

.product-card{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius: var(--radius-md);
  overflow:hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  isolation:isolate;
}
.product-card:hover{ transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-gold); }

/* -------- Image area: a fixed square, nothing but the photo + badges -------- */
.product-media-wrap{ position:relative; width:100%; aspect-ratio: 1 / 1; overflow:hidden; background: var(--paper-soft); flex-shrink:0; }
.product-media{ display:block; position:absolute; inset:0; width:100%; height:100%; }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease), opacity .35s var(--ease); display:none; }
.product-media img.active{ display:block; }
.product-card:hover .product-media img.active{ transform: scale(1.09); }

.product-gallery-dots{ position:absolute; left:0; right:0; bottom:12px; z-index:4; display:flex; justify-content:center; gap:6px; }
.gdot{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); padding:0; cursor:pointer; transition: all .25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.gdot.active{ background: var(--gold); border-color: var(--gold); width:16px; border-radius:4px; }

.product-tag{
  position:absolute; top:14px; left:14px; z-index:3;
  background: var(--gold); color: var(--ink); font-size: 10px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; padding: 5px 12px; border-radius: 999px;
}

/* -------- Info area: always below the image, own background, own padding -------- */
.product-body{
  position:relative;
  flex:1;
  display:flex; flex-direction:column;
  padding: 16px 18px 18px;
  gap:6px;
}
.product-cat{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-deep); }
.product-name{
  font-family: var(--font-heading); font-size: 1.02rem; color: var(--ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: calc(1.35em * 2); /* reserves 2 lines so buttons align across a row even when names differ in length */
}
.product-name a{ color:inherit; }
.product-rating{ color: var(--gold-deep); font-size: 12px; letter-spacing: 2px; }
.product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.product-price{ font-family: var(--font-heading); font-weight:600; font-size: 1.06rem; color: var(--ink); }
.product-price del{ color: var(--ink-faint); font-size: .8rem; margin-right: 8px; font-weight:400; }

.product-actions{ margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:10px; }
.add-cart-btn{
  width:38px; height:38px; border-radius:50%; background: var(--gold); border: 1px solid var(--gold);
  color: var(--ink); display:flex; align-items:center; justify-content:center; transition: all .35s var(--ease); flex-shrink:0;
}
.add-cart-btn svg{ width:16px; height:16px; }
.add-cart-btn:hover{ background: var(--gold-deep); border-color: var(--gold-deep); }

.wishlist-toggle{
  width:38px; height:38px; border-radius:50%; background: transparent; border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); transition: all .3s var(--ease); flex-shrink:0;
}
.wishlist-toggle:hover, .wishlist-toggle.active{ background: var(--gold); color: var(--ink); border-color: var(--gold); }
.wishlist-toggle svg{ width:16px; height:16px; }

.section-cta-row{ display:flex; justify-content:center; margin-top: 56px; }

/* ==========================================================================
   New arrivals slider
   ========================================================================== */
.slider-track-wrap{ overflow:hidden; }
.slider-track{ display:flex; gap:28px; transition: transform .6s var(--ease); align-items:stretch; }
.slider-track .product-card{ flex: 0 0 calc(25% - 21px); }
@media (max-width: 1100px){ .slider-track .product-card{ flex: 0 0 calc(50% - 14px); } }
@media (max-width: 640px){ .slider-track .product-card{ flex: 0 0 82%; } }
.slider-controls{ display:flex; justify-content:center; gap:14px; margin-top: 40px; }
.slider-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); background: var(--paper);
  color: var(--ink); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease);
}
.slider-btn:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.slider-btn svg{ width:18px; height:18px; }

/* ==========================================================================
   Why choose us
   5 cards in a single row on desktop; step down to fewer columns as the
   viewport narrows so nothing is ever cropped or left as a lone orphan box.
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 1100px){ .why-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .why-grid{ grid-template-columns: 1fr; } }

/* Homepage's "Why Choose MEQAD" has 4 features (not 5, like the About page's
   longer version) — give it its own column count so it never leaves an
   empty 5th slot on desktop. */
.why-grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .why-grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .why-grid-4{ grid-template-columns: 1fr; } }
.why-card{ background: var(--paper); padding: 44px 26px; text-align:center; transition: background .4s var(--ease); display:flex; flex-direction:column; align-items:center; }
.why-card:hover{ background: var(--paper-soft); }
.why-icon{ width: 56px; height:56px; margin: 0 auto 20px; border-radius:50%; border: 1px solid var(--gold); display:flex; align-items:center; justify-content:center; color: var(--gold-deep); transition: all .4s var(--ease); }
.why-card:hover .why-icon{ background: var(--gold); color: var(--ink); transform: scale(1.08); }
.why-icon svg{ width:22px; height:22px; }
.why-card h3{ font-size: 1.02rem; color:var(--ink); margin-bottom:10px; }
.why-card p{ font-size: 13px; color: var(--ink-soft); line-height:1.8; font-weight:400; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials-track{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px){ .testimonials-track{ grid-template-columns: 1fr; } }
.testimonial-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 40px 34px; position:relative; box-shadow: var(--shadow-soft); }
.testimonial-quote{ font-family: var(--font-heading); font-size: 2.4rem; color: var(--gold); line-height:0; display:block; margin-bottom: 10px; }
.testimonial-card p{ color: var(--ink-soft); font-size:14.5px; line-height:1.9; font-weight:400; }
.testimonial-stars{ color: var(--gold); letter-spacing:2px; margin-bottom: 16px; display:block; }
.testimonial-person{ display:flex; align-items:center; gap:14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.testimonial-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.testimonial-person strong{ display:block; font-size:14px; color:var(--ink); }
.testimonial-person span{ font-size:12px; color: var(--gold-deep); }

/* ==========================================================================
   Instagram gallery ("Follow Us") — real product photos, editorial grid
   ========================================================================== */
/* Horizontal-scrolling single row — swipe/scroll left-right, never wraps to
   a second row, and only this strip scrolls (not the page). */
.insta-grid{
  display:flex; flex-wrap:nowrap; gap: 6px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-padding-left: 32px;
  padding: 0 32px 14px;
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.insta-grid::-webkit-scrollbar{ height:6px; }
.insta-grid::-webkit-scrollbar-track{ background:transparent; }
.insta-grid::-webkit-scrollbar-thumb{ background: var(--gold); border-radius:999px; }
@media (max-width: 900px){ .insta-grid{ padding: 0 20px 14px; } }
@media (max-width: 640px){ .insta-grid{ padding: 0 20px 12px; gap:4px; scroll-padding-left:20px; } }
.insta-item{
  position:relative; overflow:hidden; display:block; background: var(--paper-soft);
  flex: 0 0 auto; width: 240px; aspect-ratio: 1/1; scroll-snap-align:start;
}
@media (max-width: 900px){ .insta-item{ width: 210px; } }
/* Sized as a viewport fraction on phones so the next image visibly peeks
   in from the edge, hinting there's more to swipe to. */
@media (max-width: 640px){ .insta-item{ width: 46vw; } }
@media (max-width: 420px){ .insta-item{ width: 58vw; } }
.insta-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.insta-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,.55) 100%);
  opacity:0; transition: opacity .4s var(--ease);
}
.insta-item-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
  opacity:0; transition: opacity .4s var(--ease), transform .4s var(--ease); transform: scale(.8);
}
.insta-item-icon svg{ width:30px; height:30px; color: var(--white); filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.insta-item:hover::after{ opacity:1; }
.insta-item:hover .insta-item-icon{ opacity:1; transform: scale(1); }
.insta-item:hover img{ transform: scale(1.08); }

.insta-follow-row{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:34px; }
.insta-follow-row .insta-handle{ font-family: var(--font-heading); font-size:1.05rem; color: var(--ink); }
.insta-follow-row .insta-handle a{ color: var(--gold-deep); }
.insta-follow-row .btn{ margin-top:14px; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{ background: var(--paper-soft); padding: 100px 0; text-align:center; position:relative; overflow:hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.newsletter::before{ content:''; position:absolute; width:600px; height:600px; border-radius:50%; background: radial-gradient(circle, rgba(212,175,55,.14), transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); }
.newsletter h2{ font-size: clamp(1.8rem,3.5vw,2.6rem); position:relative; }
.newsletter p{ color: var(--ink-soft); margin-top:14px; position:relative; }
.newsletter-form{ margin: 38px auto 0; display:flex; max-width: 480px; gap:12px; position:relative; flex-wrap: wrap; justify-content:center; }
.newsletter-form input{
  flex:1; min-width: 220px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 15px 24px; color: var(--ink); outline:none; font-size:14px; transition: border-color .3s var(--ease);
}
.newsletter-form input:focus{ border-color: var(--gold); }
.newsletter-form input::placeholder{ color: var(--ink-faint); }

/* ==========================================================================
   Footer (kept dark for grounding contrast)
   ========================================================================== */
.site-footer{ background: var(--ink); padding: 90px 0 30px; color: var(--white); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand img{ height:42px; margin-bottom:20px; }
.footer-brand p{ color: rgba(255,255,255,.55); font-size:13.5px; line-height:1.9; max-width:280px; }
.footer-social{ display:flex; gap:14px; margin-top:24px; }
.footer-social a{ width:38px; height:38px; border: 1px solid rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); color:var(--white); }
.footer-social a:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }

.footer-col h4{ color: var(--white); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 24px; font-family: var(--font-body); }
.footer-col ul li{ margin-bottom:14px; }
.footer-col ul li a{ color: rgba(255,255,255,.62); font-size: 13.5px; transition: color .3s var(--ease), padding-left .3s var(--ease); }
.footer-col ul li a:hover{ color: var(--gold); padding-left:4px; }
.footer-col address{ font-style:normal; color: rgba(255,255,255,.62); font-size:13.5px; line-height:2; }

.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: rgba(255,255,255,.4); }
.footer-legal-links{ line-height:1.8; }
.footer-bottom a{ color: rgba(255,255,255,.4); }
.footer-bottom a:hover{ color: var(--gold); }

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.cart-overlay{ position:fixed; inset:0; background: rgba(17,17,17,.45); z-index: 1100; opacity:0; pointer-events:none; transition: opacity .4s var(--ease); }
.cart-overlay.open{ opacity:1; pointer-events:all; }

.cart-drawer{ position:fixed; top:0; right:-440px; width: min(420px, 92vw); height: 100vh; background: var(--paper); border-left: 1px solid var(--line); z-index: 1101; display:flex; flex-direction:column; transition: right .5s var(--ease); box-shadow: -30px 0 60px -30px rgba(17,17,17,.2); }
.cart-drawer.open{ right:0; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding: 26px 28px; border-bottom: 1px solid var(--line); }
.cart-head h3{ font-size:1.2rem; }
.cart-close{ background:none; border:none; color:var(--ink); font-size:22px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cart-close:hover{ color:var(--gold-deep); }
.cart-items{ flex:1; overflow-y:auto; padding: 10px 28px; }
.cart-item{ display:flex; gap:16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-item img{ width:74px; height:74px; object-fit:cover; border-radius: var(--radius-sm); border:1px solid var(--line); }
.cart-item-info{ flex:1; }
.cart-item-info h5{ font-family: var(--font-heading); font-size:.95rem; color:var(--ink); }
.cart-item-info .cart-item-cat{ font-size:11px; color: var(--gold-deep); text-transform:uppercase; letter-spacing:.1em; margin-top:4px; display:block;}
.cart-item-info .cart-item-size, .cart-page-item .cart-item-size{ font-size:11.5px; color: var(--ink-soft); margin-top:3px; display:block; }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; }
.qty-control button{ background:none; border:none; color:var(--ink); width:32px; height:32px; cursor:pointer; }
.qty-control button:hover{ color: var(--gold-deep); }
.qty-control span{ font-size:13px; width:20px; text-align:center; display:inline-block; }
.cart-item-remove{ background:none; border:none; color: var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.cart-item-remove:hover{ color:#c23b3b; }
.cart-item-price{ font-family: var(--font-heading); font-weight:600; color: var(--gold-deep); font-size:.9rem; }

.cart-empty{ text-align:center; padding: 60px 20px; color: var(--ink-faint); font-size:14px; }

.cart-footer{ padding: 24px 28px 30px; border-top: 1px solid var(--line); }
.cart-subtotal{ display:flex; justify-content:space-between; margin-bottom:20px; font-size:15px; }
.cart-subtotal strong{ font-family: var(--font-heading); font-weight:700; color: var(--gold-deep); font-size:1.2rem; }
.cart-payment-note{ font-size: 11.5px; letter-spacing: .04em; color: var(--gold-deep); text-align: center; margin: 0 0 16px; padding: 10px; border: 1px dashed rgba(212,175,55,.5); border-radius: var(--radius-sm); background: rgba(212,175,55,.07); }
/* Text-link style Continue Shopping button — reuses the existing
   .cart-close click handler (document.querySelectorAll('.cart-drawer
   .cart-close')) so no new close/cart logic is introduced anywhere. */
.cart-continue{ display:block; width:100%; text-align:center; background:none; border:none; padding:10px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); cursor:pointer; }
.cart-continue:hover{ color: var(--gold-deep); }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero{ padding: 200px 0 90px; text-align:center; position:relative; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,175,55,.12), transparent 60%), var(--paper-soft); border-bottom: 1px solid var(--line); }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
.breadcrumb{ margin-top: 18px; font-size:12.5px; letter-spacing:.1em; text-transform: uppercase; color: var(--ink-faint); }
.breadcrumb a:hover{ color: var(--gold-deep); }
.breadcrumb span{ color: var(--gold-deep); }

/* ==========================================================================
   Checkout trust strip — small, single row, reinforces confidence right
   at the point of payment without adding a heavy new section.
   ========================================================================== */
.checkout-trust-strip{
  display:flex; flex-wrap:wrap; gap: 18px 26px; justify-content:center;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.checkout-trust-strip span{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.02em;
  color: var(--ink-faint); font-weight:400; white-space:nowrap;
}
.checkout-trust-strip svg{ width:16px; height:16px; color: var(--gold); flex-shrink:0; }

/* ==========================================================================
   Policy pages (Shipping / Returns / Privacy / Terms)
   ========================================================================== */
.policy-content{ max-width: 820px; margin: 0 auto; }
.policy-content .updated-note{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 44px; }
.policy-content h2{ font-size: 1.3rem; margin-top: 46px; margin-bottom: 16px; }
.policy-content h2:first-of-type{ margin-top:0; }
.policy-content p{ color: var(--ink-soft); line-height:1.9; font-size:15px; font-weight:400; margin: 0 0 14px; }
.policy-content ul{ margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.policy-content ul li{ color: var(--ink-soft); line-height:1.9; font-size:15px; font-weight:400; margin-bottom:6px; }
.policy-content .placeholder-note{
  margin-top: 56px; padding: 18px 22px; border: 1px dashed rgba(212,175,55,.5); border-radius: var(--radius-sm);
  background: rgba(212,175,55,.07); color: var(--gold-deep); font-size: 13px; line-height:1.8;
}

/* ==========================================================================
   Shop toolbar (Products page)
   ========================================================================== */
.shop-toolbar{ display:flex; align-items:center; justify-content: space-between; gap:20px; flex-wrap: wrap; margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.shop-search{ position:relative; flex:1; min-width: 220px; }
.shop-search input{ width:100%; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 13px 20px 13px 44px; color: var(--ink); font-size:13.5px; outline:none; transition: border-color .3s var(--ease); }
.shop-search input:focus{ border-color: var(--gold); }
.shop-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--ink-faint); }
.shop-sort select{ background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px; padding: 13px 20px; font-size: 13px; outline:none; }
.results-count{ font-size:13px; color: var(--ink-faint); white-space:nowrap; }

.category-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.pill{ padding: 9px 20px; border-radius:999px; border: 1px solid var(--line-strong); font-size: 12.5px; letter-spacing:.05em; color: var(--ink-soft); transition: all .3s var(--ease); background:var(--paper); }
.pill:hover{ border-color: var(--gold); color: var(--gold-deep); }
.pill.active{ background: var(--gold); color: var(--ink); border-color:var(--gold); font-weight:600; }

.category-chooser{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-bottom: 34px; }
.category-chooser-grid{ display:contents; }
.category-chooser-card{
  position:relative; min-height: 280px; border: 1px solid rgba(189,160,90,.58); border-radius: 20px; overflow:hidden;
  background-color: #d9d2c9; background-size: cover; background-position: center; box-shadow: 0 10px 26px rgba(18,12,8,.06);
  display:flex; align-items:flex-end; justify-content:flex-start; padding: 22px 20px; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.category-chooser-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 32px rgba(18,12,8,.10); border-color: rgba(173,140,63,.85); }
.category-chooser-card::before{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,15,15,.06), rgba(15,15,15,.5));
}
.category-chooser-card > *{ position:relative; z-index:1; }
.category-chooser-name{ display:block; font-family: var(--font-heading); font-size: clamp(1.2rem, 1.3vw, 1.85rem); color: #fff; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.category-chooser-card[data-type="stainless"][data-sub="rings"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/ring-wave-open.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="stainless"][data-sub="bracelets"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/bracelet-open-heart-gold.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="stainless"][data-sub="bangles"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/bangle-nail-cuff-gold.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="stainless"][data-sub="necklaces"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/necklace-open-heart-gold.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="stainless"][data-sub="earrings"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/earrings-heart-stud.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="stainless"][data-sub="sets"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/set-heart-linen.webp'); background-position:center; background-size:cover; }

.category-chooser-card[data-type="premium"][data-sub="rings"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/ring-diamond-heart-halo.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="premium"][data-sub="necklaces"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/necklace-pink-heart-halo.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="premium"][data-sub="earrings"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/earrings-pink-heart-halo.webp'); background-position:center; background-size:cover; }
.category-chooser-card[data-type="premium"][data-sub="sets"]{ background-image: linear-gradient(135deg, rgba(205,164,93,.12), rgba(92,68,35,.28)), url('/images/products/set-pink-heart-halo.webp'); background-position:center; background-size:cover; }

.category-chooser-card[data-type="premium"][data-sub="all"]{ background: rgba(255,255,255,.46); border: 1px solid rgba(200,174,104,.72); display:flex; align-items:center; justify-content:center; text-align:center; min-height: 280px; }
body.chooser-active .filters-toggle-row,
body.chooser-active .shop-toolbar,
body.chooser-active .filters-panel,
body.chooser-active .results-count,
body.chooser-active #results-count{ display:none !important; }
.category-chooser-card[data-sub="all"]{
  background: rgba(255,255,255,.46); border: 1px solid rgba(200,174,104,.72);
  display:flex; align-items:center; justify-content:center; text-align:center; min-height: 280px;
}
.category-chooser-card[data-sub="all"]::before{ display:none; }
.category-chooser-card[data-sub="all"] .category-chooser-name{ color: var(--ink); text-shadow:none; font-size: clamp(1.5rem, 1.6vw, 2rem); }
.category-chooser-card[data-sub="all"] .category-chooser-meta{ display:block; color: var(--ink-soft); font-size: 1.02rem; font-family: var(--font-body); }

.pagination{ display:flex; justify-content:center; gap:10px; margin-top: 56px; }
.pagination button{ width:40px; height:40px; border-radius:50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size:13px; transition: all .3s var(--ease); }
.pagination button:hover, .pagination button.active{ background: var(--gold); color:var(--ink); border-color:var(--gold); }

.empty-state{ text-align:center; padding: 80px 20px; color: var(--ink-faint); }

/* ==========================================================================
   Filters panel (toggle, Products page)
   ========================================================================== */
.filters-toggle-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.filters-toggle-btn{
  display:inline-flex; align-items:center; gap:10px; padding: 11px 22px; border-radius:999px; border:1px solid var(--line-strong);
  background: var(--paper); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink); transition: all .3s var(--ease);
}
.filters-toggle-btn:hover, .filters-toggle-btn.active{ border-color: var(--gold); color: var(--gold-deep); }
.filters-toggle-btn svg{ width:15px; height:15px; }
.active-filter-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  background: var(--gold); color: var(--ink); font-size:10.5px; font-weight:700; border-radius:999px;
}
.filters-panel{
  border:1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-soft);
  padding: 0; max-height:0; overflow:hidden; transition: max-height .4s var(--ease), padding .4s var(--ease), margin .4s var(--ease);
  margin-bottom:0;
}
.filters-panel.open{ max-height:900px; padding: 30px; margin-bottom:34px; }
.filters-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:30px; }
@media (max-width: 900px){ .filters-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .filters-grid{ grid-template-columns: 1fr; } }
.filter-col h4{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:16px; }
.filter-col label{ display:flex; align-items:center; gap:10px; font-size:13.5px; color: var(--ink-soft); margin-bottom:11px; cursor:pointer; }
.filter-col input[type="checkbox"], .filter-col input[type="radio"]{ accent-color: var(--gold); width:15px; height:15px; flex-shrink:0; }
.filter-col input[type="range"]{ width:100%; accent-color: var(--gold); }
.filter-price-values{ display:flex; justify-content:space-between; font-size:12px; color: var(--ink-faint); margin-top:6px; }
.filters-footer{ grid-column: 1 / -1; display:flex; justify-content:flex-end; gap:12px; padding-top:16px; border-top:1px solid var(--line); }

/* ==========================================================================
   Product details page
   ========================================================================== */
.pd-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 900px){ .pd-layout{ grid-template-columns:1fr; } }

.pd-gallery-main{ position:relative; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow:hidden; border: 1px solid var(--line); cursor: zoom-in; background: var(--paper-soft); box-shadow: var(--shadow-soft); touch-action: pan-y; }
.pd-gallery-main img{ width:100%; height:100%; object-fit:cover; object-position: center 15%; transition: transform .4s var(--ease); }
.pd-gallery-main.zoomed img{ transform: scale(1.9); }
.pd-thumbs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.pd-thumbs img{ width:76px; height:76px; object-fit:cover; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor:pointer; transition: border-color .3s var(--ease), opacity .3s var(--ease); opacity:.6; }
.pd-thumbs img:hover, .pd-thumbs img.active{ border-color: var(--gold); opacity:1; }

/* Expand-to-fullscreen button, overlaid on the gallery image. Separate
   from the existing click-to-zoom (.pd-gallery-main.zoomed) behavior,
   which stays exactly as it was for a quick in-place magnify. */
.pd-expand-btn{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.88); border:1px solid var(--line); border-radius:999px;
  color: var(--ink); backdrop-filter: blur(4px); transition: background .25s var(--ease), color .25s var(--ease);
}
.pd-expand-btn:hover{ background: var(--paper); color: var(--gold-deep); }
.pd-expand-btn svg{ width:17px; height:17px; }

/* Fullscreen lightbox — hidden by default, shown via .open. Swipe (touch)
   and arrow-key navigation both call the same next/prev logic as the
   nav buttons; see the JS below. */
.pd-lightbox{
  position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  background: rgba(17,17,17,.92); touch-action: pan-y;
}
.pd-lightbox.open{ display:flex; }
.pd-lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; border-radius:6px; user-select:none; -webkit-user-drag:none; }
.pd-lightbox-close{ position:absolute; top:20px; right:20px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; }
.pd-lightbox-close:hover{ background:rgba(255,255,255,.2); }
.pd-lightbox-close svg{ width:18px; height:18px; }
.pd-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; }
.pd-lightbox-nav:hover{ background:rgba(255,255,255,.2); }
.pd-lightbox-nav svg{ width:20px; height:20px; }
.pd-lightbox-nav.prev{ left:20px; }
.pd-lightbox-nav.next{ right:20px; }
@media (max-width: 560px){
  .pd-lightbox-nav{ width:40px; height:40px; }
  .pd-lightbox-close{ top:14px; right:14px; }
  .pd-lightbox-nav.prev{ left:10px; }
  .pd-lightbox-nav.next{ right:10px; }
}

.pd-info .product-cat{ font-size:12px; color:var(--gold-deep); letter-spacing:.16em; text-transform:uppercase; }
.pd-info h1{ font-size: clamp(1.8rem,3vw,2.4rem); margin-top:10px; }
.pd-info .product-rating{ margin-top:12px; font-size:14px; color:var(--gold); }
.pd-price-row{ display:flex; align-items:center; gap:16px; margin-top:20px; }
.pd-price-row .price{ font-family: var(--font-heading); font-weight:600; font-size:2rem; color: var(--gold-deep); }
.pd-price-row del{ color: var(--ink-faint); font-size:1.1rem; }
.pd-availability{ margin-top:16px; font-size:13px; color:#2c9a56; display:flex; align-items:center; gap:8px; }
.pd-availability::before{ content:''; width:8px; height:8px; border-radius:50%; background:#2c9a56; }

.pd-sold-info {
  margin-top: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: #8a6d1d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-sold-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-1px);
}

.pd-viewer-count{
  margin-top:8px;
  font-size:13px;
  color:#2c9a56;
  display:flex;
  align-items:center;
  gap:8px;
}

.pd-viewer-count::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2c9a56;
  flex-shrink:0;
}

.pd-desc{ margin-top:22px; color: var(--ink-soft); line-height:1.9; font-size:14.5px; font-weight:400; }

/* SEO subline under the H1 — only rendered for genuinely Stainless Steel
   products (see product-details.html's isStainless check), so it never
   makes an inaccurate claim about a Premium or Nails product. */
.pd-seo-subline{ margin-top:6px; font-size:13px; color: var(--gold-deep); font-weight:500; }
/* Small enrichment note appended under the real product description,
   built only from the product's own specs fields — not a rewrite of the
   original desc. */
.pd-seo-note{ margin-top:10px; color: var(--ink-faint); line-height:1.8; font-size:13.5px; font-style:italic; }

/* Lower-page "Affordable Stainless Steel Jewelry" section — small and
   secondary by design (narrower max-width, quiet type scale) so it
   supports SEO/internal linking without competing with the product
   itself for visual attention. */
.pd-seo-section{ padding:52px 0; border-top:1px solid var(--line); }
.pd-seo-section .pd-seo-inner{ max-width:820px; }
.pd-seo-section h2{ font-size:1.35rem; }
.pd-seo-section p{ margin-top:14px; color: var(--ink-soft); line-height:1.85; font-size:14.5px; }
.pd-seo-links{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.pd-seo-links a{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition: color .25s var(--ease), border-color .25s var(--ease); }
.pd-seo-links a:hover{ color: var(--gold-deep); border-color: var(--gold-deep); }
@media (max-width: 560px){
  .pd-seo-section{ padding:38px 0; }
  .pd-seo-section h2{ font-size:1.15rem; }
  .pd-seo-links{ gap:8px 16px; }
}

/* Why MEQAD — small, quiet brand-trust section. Reuses the same minimal
   line-icon language as .pd-trust rather than introducing a new visual
   pattern. */
.pd-why-section{ padding:52px 0; border-top:1px solid var(--line); text-align:center; }
.pd-why-section h2{ font-size:1.35rem; }
.pd-why-grid{ margin-top:28px; display:grid; grid-template-columns: repeat(4,1fr); gap:20px; max-width:900px; margin-left:auto; margin-right:auto; }
.pd-why-item{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.pd-why-item svg{ width:24px; height:24px; color: var(--gold-deep); }
.pd-why-item span{ font-size:12.5px; color: var(--ink-soft); line-height:1.5; }
@media (max-width: 700px){ .pd-why-grid{ grid-template-columns: repeat(2,1fr); } }

/* FAQ — reuses the exact .pd-accordion component/CSS already defined
   above for Product Details, just in its own container so each accordion
   group keeps its own independent single-open state (see the JS). */
.pd-faq-section{ padding:52px 0; border-top:1px solid var(--line); }
.pd-faq-inner{ max-width:820px; margin:0 auto; }
.pd-faq-inner h2{ font-size:1.35rem; text-align:center; margin-bottom:8px; }
.pd-faq-inner .pd-accordion{ margin-top:26px; }

/* Ring size selector — Stainless Steel Rings only (see product-details.html,
   which only renders this block when p.type==='stainless' && p.sub==='rings').
   Deliberately square/rectangular, not the pill shape used elsewhere on this
   page (.pd-qty, .pd-wishlist-btn), per the requested visual style. */
.pd-size-select{ margin-top:26px; }
.pd-size-select .pd-size-label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:600; display:block; margin-bottom:12px; }
.pd-size-options{ display:flex; flex-wrap:wrap; gap:10px; }
.pd-size-btn{
  min-width:52px; height:46px; padding:0 16px;
  background: var(--paper); color: var(--ink);
  border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:13.5px; letter-spacing:.03em;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pd-size-btn:hover{ border-color: var(--ink); }
.pd-size-btn.active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.pd-size-note{ margin-top:10px; font-size:12px; color:var(--ink-faint); }

.pd-actions{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
.pd-qty{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; }
.pd-qty button{ background:none; border:none; color:var(--ink); width:44px; height:48px; font-size:16px; }
.pd-qty button:hover{ color: var(--gold-deep); }
.pd-qty span{ min-width:30px; text-align:center; }
.pd-wishlist-btn{
  display:flex; align-items:center; gap:9px; height:48px; padding:0 22px; border-radius:999px;
  border: 1px solid var(--line-strong); color: var(--ink); background:var(--paper);
  font-size:12.5px; letter-spacing:.04em; white-space:nowrap; transition: all .3s var(--ease);
}
.pd-wishlist-btn .pd-wishlist-icon{ font-size:17px; line-height:1; transition: transform .25s var(--ease); }
.pd-wishlist-btn:hover{ border-color: var(--gold); color: var(--gold-deep); background: rgba(212,175,55,.06); }
.pd-wishlist-btn.active{ border-color: var(--gold); color: var(--gold-deep); background: rgba(212,175,55,.1); }
.pd-wishlist-btn.active .pd-wishlist-icon{ color:#c23b3b; transform: scale(1.1); }

.pd-meta-list{ margin-top: 34px; border-top: 1px solid var(--line); padding-top: 24px; }
.pd-meta-list div{ display:flex; justify-content:space-between; padding:10px 0; font-size:13px; color: var(--ink-soft); border-bottom: 1px dashed var(--line); }
.pd-meta-list span:first-child{ color: var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; }

.pd-tabs{ margin-top: 90px; }
.pd-tab-nav{ display:flex; gap:10px; border-bottom: 1px solid var(--line); flex-wrap:wrap; }
.pd-tab-btn{ background:none; border:none; color: var(--ink-faint); padding: 16px 26px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; position:relative; }
.pd-tab-btn::after{ content:''; position:absolute; left:26px; right:26px; bottom:-1px; height:2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.pd-tab-btn.active{ color: var(--ink); }
.pd-tab-btn.active::after{ transform: scaleX(1); }
.pd-tab-panel{ display:none; padding: 40px 4px; color: var(--ink-soft); line-height:1.9; font-size:14.5px; font-weight:400; }
.pd-tab-panel.active{ display:block; }
.spec-table{
  width:100%;
  border-collapse:collapse;
}

.spec-table tr{
  border-bottom:1px solid var(--line);
}

.spec-table td{
  padding:14px 10px;
  font-size:13.5px;
}

.spec-table td:first-child{
  color:var(--ink-faint);
  width:220px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11.5px;
}

.spec-table td:last-child{
  white-space:nowrap;
}

/* Stock status line — the green "in stock" version of this rule already
   existed and was simply unused; .sold-out is the new state added
   alongside it, reusing the same dot+label layout in the muted tone
   already used for "Sold Out" badges elsewhere on the site (#8a8a8a). */
.pd-availability.sold-out{ color:#8a8a8a; }
.pd-availability.sold-out::before{ background:#8a8a8a; }
/* Genuine low-stock note — only ever rendered when the product's real
   stock count is at/under the threshold in the template above; never a
   fabricated number. */
.pd-lowstock{ color: var(--gold-deep); font-weight:500; }

/* Share button — sits right next to the wishlist heart, same pill-icon
   language as .pd-wishlist-btn but icon-only (no label) so it stays small. */
.pd-share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line-strong); border-radius:999px;
  background: var(--paper); color: var(--ink-soft); transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.pd-share-btn:hover{ border-color: var(--gold); color: var(--gold-deep); background: rgba(212,175,55,.06); }
.pd-share-btn svg{ width:17px; height:17px; }

/* Trust features — four minimal line-icon items, no colorful cards. */
.pd-trust{ margin-top:22px; display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.pd-trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:14px 6px; border:1px solid var(--line); border-radius: var(--radius-sm); }
.pd-trust-item svg{ width:22px; height:22px; color: var(--gold-deep); }
.pd-trust-item span{ font-size:11px; line-height:1.4; color: var(--ink-soft); }
@media (max-width: 560px){ .pd-trust{ grid-template-columns: repeat(2,1fr); } }

/* Accordion — replaces the old two-tab Description/Specifications block.
   Single-open: JS closes every other panel whenever one opens. */
.pd-accordion{ margin-top: 90px; border-top:1px solid var(--line); }
.pd-accordion-item{ border-bottom:1px solid var(--line); }
.pd-accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; padding:22px 4px; text-align:left;
  font-family: var(--font-heading); font-size:15px; font-weight:600; color: var(--ink);
}
.pd-accordion-trigger svg{ width:16px; height:16px; flex-shrink:0; color: var(--gold-deep); transition: transform .35s var(--ease); }
.pd-accordion-item.open .pd-accordion-trigger svg{ transform: rotate(45deg); }
.pd-accordion-panel{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.pd-accordion-panel-inner{ padding:0 4px 26px; color: var(--ink-soft); line-height:1.9; font-size:14.5px; }

/* Sticky Add to Cart bar — hidden until the main purchase area scrolls
   out of view (toggled via IntersectionObserver, not a scroll listener). */
.pd-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:850;
  background: var(--paper); border-top:1px solid var(--line); box-shadow: 0 -10px 30px -14px rgba(17,17,17,.15);
  transform: translateY(100%); transition: transform .35s var(--ease);
}
.pd-sticky-bar.visible{ transform: translateY(0); }
.pd-sticky-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; padding-bottom:12px; }
.pd-sticky-info{ display:flex; align-items:center; gap:14px; min-width:0; }
.pd-sticky-info img{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.pd-sticky-name{ font-family: var(--font-heading); font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.pd-sticky-price{ font-family: var(--font-heading); font-weight:600; color: var(--gold-deep); font-size:14px; }
@media (max-width: 560px){ .pd-sticky-name{ display:none; } .pd-sticky-bar .container{ padding-left:20px; padding-right:20px; } }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.3fr; gap: 60px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info-card{ border: 1px solid var(--line); border-radius: var(--radius-md); padding: 40px; background: var(--paper); box-shadow: var(--shadow-soft); }
.contact-info-item{ display:flex; gap:18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-icon{ width:46px; height:46px; border-radius:50%; border: 1px solid var(--gold); color: var(--gold-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-icon svg{ width:20px; height:20px; }
.contact-info-item h5{ font-size: .95rem; color: var(--ink); margin-bottom:6px; font-family: var(--font-heading); }
.contact-info-item p{ font-size:13.5px; color: var(--ink-soft); line-height:1.8; }

.contact-form-card{ border: 1px solid var(--line); border-radius: var(--radius-md); padding: 44px; background: var(--paper); box-shadow: var(--shadow-soft); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom: 22px; }
.form-group label{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:10px; }
.form-group input, .form-group textarea, .form-group select{
  width:100%; background: var(--paper-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 14px 18px; color: var(--ink); font-family: var(--font-body); font-size:14px; outline:none; transition: border-color .3s var(--ease);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color: var(--gold); }
.form-group textarea{ resize: vertical; min-height:130px; }
@media (max-width: 768px){
  /* Any input/select/textarea under 16px makes iOS Safari auto-zoom the
     whole page in the instant it's tapped, then not zoom back out —
     jarring on every form on the site (contact, checkout, promo code,
     admin login). 16px is the documented threshold; below it, iOS treats
     the tap as "this text is too small to read" and zooms regardless of
     any other setting. Desktop is untouched — this only applies at
     phone/tablet widths, where zoom-on-focus is the actual problem.
     Covers every input on the site that was below 16px: the shared
     .form-group fields (contact/checkout/billing/shipping), plus the
     newsletter signup, products-page search, checkout promo code field,
     and admin search — each previously had its own smaller size. */
  .form-group input, .form-group textarea, .form-group select,
  .newsletter-form input, .shop-search input, .promo-row input, .admin-search input{
    font-size:16px;
  }
}
.form-note{ font-size:12px; color: var(--ink-faint); margin-top:16px; }
.form-success{ display:none; background: rgba(212,175,55,.1); border: 1px solid var(--gold); color: var(--gold-deep); padding: 16px 20px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 24px; }
.form-success.show{ display:block; }

.map-placeholder{
  margin-top: 60px; height: 380px; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.6)), repeating-linear-gradient(45deg, #eee 0 2px, #f6f6f6 2px 40px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color: var(--ink-soft);
}
.map-placeholder svg{ width:34px; height:34px; color: var(--gold-deep); }


/* ==========================================================================
   About page
   ========================================================================== */
.about-hero{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
@media (max-width: 900px){ .about-hero{ grid-template-columns:1fr; gap:40px; } }
.about-hero-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lift); }
.about-hero-media img{ width:100%; height:100%; object-fit:cover; }
.about-hero-text p{ margin-top:22px; color: var(--ink-soft); line-height:1.9; font-size:15px; font-weight:400; }

.mv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; margin-top: 20px; }
@media (max-width: 768px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md); padding: 42px; box-shadow: var(--shadow-soft); }
.mv-card .why-icon{ margin:0 0 22px; }
.mv-card h3{ font-size:1.3rem; margin-bottom:14px; }
.mv-card p{ color: var(--ink-soft); line-height:1.9; font-size:14.5px; font-weight:400; }

/* ==========================================================================
   Cart page (full page) & Checkout
   ========================================================================== */
.cart-page-layout{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 50px; align-items:start; }
@media (max-width: 900px){ .cart-page-layout{ grid-template-columns:1fr; } }

.cart-page-list{ border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; background: var(--paper); }
.cart-page-item{ display:grid; grid-template-columns: 96px 1fr auto auto auto; gap:22px; align-items:center; padding: 24px; border-bottom: 1px solid var(--line); }
.cart-page-item:last-child{ border-bottom:none; }
@media (max-width: 640px){ .cart-page-item{ grid-template-columns: 70px 1fr; grid-template-areas: "img info" "img qty" "img price"; row-gap:10px; } }
.cart-page-item img{ width:96px; height:96px; object-fit:cover; border-radius: var(--radius-sm); border:1px solid var(--line); }
.cart-page-item h5{ font-family: var(--font-heading); font-size:1rem; color:var(--ink); }
.cart-page-item .cart-item-cat{ font-size:11px; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.1em; display:block; margin-top:4px; }
.cart-page-price{ font-family: var(--font-heading); font-weight:600; color: var(--gold-deep); font-size:1rem; white-space:nowrap; }
.cart-page-remove{ background:none; border:none; color: var(--ink-faint); }
.cart-page-remove:hover{ color:#c23b3b; }
.cart-page-remove svg{ width:18px; height:18px; }

.order-summary{ border:1px solid var(--line); border-radius: var(--radius-md); padding: 34px; background: var(--paper-soft); position:sticky; top:110px; }
.order-summary h3{ font-size:1.2rem; margin-bottom: 24px; }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color: var(--ink-soft); padding: 10px 0; border-bottom: 1px dashed var(--line); }
.summary-row.total{ border-bottom:none; margin-top:8px; padding-top:16px; border-top:1px solid var(--line-strong); font-size:16px; color:var(--ink); }
.summary-row.total strong{ font-family: var(--font-heading); font-weight:700; color: var(--gold-deep); font-size:1.3rem; }
.promo-row{ display:flex; gap:10px; margin: 20px 0; }
.promo-row input{ flex:1; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 12px 18px; font-size:13px; outline:none; }
.promo-row input:focus{ border-color: var(--gold); }

.checkout-layout{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 54px; align-items:start; }
@media (max-width: 960px){ .checkout-layout{ grid-template-columns:1fr; } }
/* Grid items default to min-width:auto, meaning they refuse to shrink
   below their content's own intrinsic width. A long, space-free string
   (an IBAN, an account number) inside .payment-detail-value doesn't wrap
   on its own, so without this it forces .checkout-layout's whole column
   — and the page itself — wider than the viewport. Since html/body already
   set overflow-x:hidden, that overflow doesn't scroll, it just gets
   silently clipped off the right edge, which is what reads as the form
   being "shifted right / cut off". min-width:0 lets the column shrink to
   the viewport instead, and the two rules below let long values wrap onto
   a second line rather than pushing the layout wider. Applies at every
   width — harmless on desktop, where there's already room, and is a
   pure overflow fix rather than a visual change. */
.checkout-layout > *{ min-width:0; }
.payment-detail-value{ min-width:0; }
.payment-detail-value span{ overflow-wrap:break-word; word-break:break-word; }
.checkout-section{ border:1px solid var(--line); border-radius: var(--radius-md); padding: 34px; background: var(--paper); margin-bottom: 26px; box-shadow: var(--shadow-soft); }
/* .checkout-section's 34px padding was designed for the desktop card; on
   phones it stacks on top of .container's own 20px edge padding (54px of
   pure padding before any form content starts), squeezing the input row
   far narrower than the rest of the site. Trimmed to sit inside the
   requested ~16-24px comfortable margin — desktop/tablet (>640px) is
   untouched. */
@media (max-width: 640px){
  .checkout-section{ padding: 20px 18px; }
}
.checkout-section h4{ font-size:1.1rem; margin-bottom:22px; display:flex; align-items:center; gap:12px; }
.checkout-step-num{ width:28px; height:28px; border-radius:50%; background: var(--gold); color:var(--ink); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); }

.payment-methods{ display:grid; gap:14px; }
.payment-option{ display:flex; align-items:center; gap:14px; border:1px solid var(--line-strong); border-radius: var(--radius-sm); padding:16px 18px; cursor:pointer; transition: border-color .3s var(--ease), background .3s var(--ease); }
.payment-option:hover{ border-color: var(--gold); }
.payment-option input{ accent-color: var(--gold); width:16px; height:16px; }
.payment-option span{ font-size:13.5px; color: var(--ink); }
.payment-option small{ display:block; color: var(--ink-faint); font-size:11.5px; margin-top:2px; }

/* Payment details box — shown live on checkout as soon as a method is
   selected, BEFORE the order is placed. Never shown on the success page. */
.payment-details-box{ margin-top:18px; }
.payment-detail-card{
  border:1px solid var(--gold); border-radius: var(--radius-sm); padding:22px 24px;
  background: rgba(212,175,55,.05);
}
.payment-detail-card h5{
  font-family: var(--font-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold-deep); margin-bottom:16px;
}
.payment-detail-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.payment-detail-row:last-child{ border-bottom:none; }
.payment-detail-label{ color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; flex-shrink:0; }
.payment-detail-value{ display:flex; align-items:center; gap:10px; color: var(--ink); font-weight:500; text-align:right; }
/* Below 480px, every payment method (JazzCash, Easypaisa, Bank Transfer —
   they all render through this same markup) switches from the desktop
   label-left/value-right row to label-above-value, both flush left.
   Declared AFTER the base rules above on purpose: this and the base rule
   have equal specificity, so whichever comes later in the file wins
   regardless of the media query — placing it later is what makes the
   override actually take effect instead of being silently beaten by the
   base rule further down the file. text-align + display:block are set
   explicitly on both the label and the value so neither can inherit a
   centered/right alignment from anywhere else. */
@media (max-width: 480px){
  .payment-detail-row{ flex-direction:column; align-items:flex-start; text-align:left; gap:6px; }
  .payment-detail-label{ display:block; text-align:left; width:100%; }
  .payment-detail-value{ display:flex; flex-wrap:wrap; justify-content:space-between; text-align:left; width:100%; }
  .payment-detail-value span{ text-align:left; }
}
.copy-btn{
  font-family: var(--font-body); font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  color: var(--gold-deep); background: transparent; border:1px solid var(--gold); border-radius:20px;
  padding:5px 12px; cursor:pointer; transition: background .25s var(--ease), color .25s var(--ease); flex-shrink:0;
}
.copy-btn:hover{ background: var(--gold); color: var(--ink); }
.copy-btn.copied{ background: var(--gold); color: var(--ink); border-color: var(--gold); }

.order-mini-item{ display:flex; gap:14px; align-items:center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.order-mini-item img{ width:56px; height:56px; object-fit:cover; border-radius: var(--radius-sm); border:1px solid var(--line); }
.order-mini-item .name{ font-size:13px; color:var(--ink); }
.order-mini-item .qty{ font-size:11.5px; color: var(--ink-faint); }
.order-mini-item .price{ margin-left:auto; font-family: var(--font-heading); font-weight:600; color: var(--gold-deep); font-size:13.5px; white-space:nowrap; }
.btn-disabled-look{ opacity:.45; pointer-events:none; }

/* ==========================================================================
   Misc utility
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.toast{
  position:fixed; bottom:30px; left:50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--white);
  padding: 15px 30px; border-radius: 999px; font-size:13px; font-weight:600; letter-spacing:.04em; z-index: 1300;
  opacity:0; pointer-events:none; transition: all .4s var(--ease); box-shadow: 0 14px 30px -10px rgba(17,17,17,.4);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

.scroll-top{
  /* bottom raised from the original 30px so this never overlaps the
     WhatsApp button below (both share the same right-edge column). */
  position:fixed; bottom:98px; right:30px; width:48px; height:48px; border-radius:50%; background: var(--gold); color: var(--ink);
  border:none; display:flex; align-items:center; justify-content:center; z-index: 500; opacity:0; pointer-events:none;
  transform: translateY(10px); transition: all .4s var(--ease); box-shadow: var(--shadow-gold);
}
.scroll-top.show{ opacity:1; pointer-events:all; transform:none; }
.scroll-top svg{ width:18px; height:18px; }

/* ==========================================================================
   WhatsApp floating button — fixed bottom-right on every customer-facing
   page. Sits below/behind the product page's sticky Add-to-Cart bar and
   the cart drawer (lower z-index than both — see .pd-sticky-bar/
   .cart-drawer above) and above .scroll-top (raised to bottom:98px above)
   so neither ever covers the other or any purchase control.
   ========================================================================== */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  z-index:490; box-shadow: 0 14px 30px -10px rgba(17,17,17,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{
  transform: translateY(-3px); box-shadow: 0 18px 36px -10px rgba(17,17,17,.45);
}
.whatsapp-float svg{ width:28px; height:28px; }
@media (max-width: 560px){
  .whatsapp-float{ width:50px; height:50px; bottom:18px; right:18px; }
  .whatsapp-float svg{ width:25px; height:25px; }
  .scroll-top{ bottom:82px; right:22px; }
}

.loader{ position:fixed; inset:0; background: var(--paper); z-index: 2000; display:flex; align-items:center; justify-content:center; transition: opacity .6s var(--ease), visibility .6s var(--ease); }
.loader.hidden{ opacity:0; visibility:hidden; }
.loader-mark{ position:relative; width:110px; height:110px; }
.loader-mark img{ width:100%; height:100%; object-fit:contain; animation: loader-pulse 1.4s ease-in-out infinite; }
@keyframes loader-pulse{ 0%,100%{ opacity:.35; transform: scale(.92);} 50%{ opacity:1; transform: scale(1);} }

::selection{ background: var(--gold); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 1px solid var(--gold); outline-offset: 3px; }

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--paper-soft); padding:20px; }
.admin-gate-card{ width:min(380px,100%); background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-md); padding:40px; text-align:center; box-shadow: var(--shadow-lift); }
.admin-gate-card code{ background: var(--paper-soft); border:1px solid var(--line); border-radius:4px; padding:1px 6px; font-size:11.5px; }
.admin-gate-card img{ height:36px; margin:0 auto 22px; }
.admin-shell{ display:none; min-height:100vh; background: var(--paper-soft); }
.admin-shell.show{ display:flex; }

.admin-sidebar{
  width:240px; flex-shrink:0; background: var(--ink); color: var(--white);
  min-height:100vh; display:flex; flex-direction:column; position:sticky; top:0;
}
.admin-sidebar-brand{ padding:26px 24px; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-sidebar-brand img{ height:28px; background:var(--white); padding:5px 9px; border-radius:6px; }
.admin-sidebar-nav{ flex:1; padding:18px 14px; display:flex; flex-direction:column; gap:4px; }
.admin-sidebar-nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:8px;
  font-size:13.5px; color:rgba(255,255,255,.7); transition: all .25s var(--ease);
}
.admin-sidebar-nav a svg{ width:17px; height:17px; flex-shrink:0; }
.admin-sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.admin-sidebar-nav a.active{ background: var(--gold); color: var(--ink); font-weight:600; }
.admin-sidebar-footer{ padding:18px 24px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:12px; }
.admin-sidebar-footer #demo-mode-badge{ font-size:11px; color:var(--gold); }
.admin-sidebar-footer #admin-logout{ background:none; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.75); border-radius:8px; padding:9px; font-size:12.5px; }
.admin-sidebar-footer #admin-logout:hover{ border-color:var(--gold); color:var(--gold); }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{ background: var(--paper); border-bottom:1px solid var(--line); padding:20px 32px; display:flex; align-items:center; justify-content:space-between; }
.admin-topbar h2{ font-size:1.3rem; }
.admin-topbar-actions{ display:flex; align-items:center; gap:14px; font-size:13px; }
.admin-topbar-actions button{ display:flex; align-items:center; gap:8px; color: var(--ink); background:var(--paper-soft); border:1px solid var(--line-strong); border-radius:999px; padding:9px 18px; }
.admin-topbar-actions button:hover{ border-color:var(--gold); color:var(--gold-deep); }
.admin-body{ padding: 30px 32px 60px; max-width:1500px; }

@media (max-width: 900px){
  .admin-shell.show{ flex-direction:column; }
  .admin-sidebar{ width:100%; min-height:auto; position:static; flex-direction:row; align-items:center; }
  .admin-sidebar-brand{ border-bottom:none; padding:16px 20px; }
  .admin-sidebar-nav{ flex-direction:row; padding:10px; }
  .admin-sidebar-footer{ border-top:none; flex-direction:row; padding:10px 20px; margin-left:auto; }
  .admin-body{ padding:24px 18px 50px; }
  .admin-topbar{ padding:16px 18px; }
}

/* ---------- Print invoice ---------- */
.invoice-print{ display:none; }
@media print{
  body *{ visibility:hidden; }
  .invoice-print, .invoice-print *{ visibility:visible; }
  .invoice-print{ display:block; position:absolute; top:0; left:0; width:100%; padding:40px; }
  .invoice-header{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #111; padding-bottom:20px; margin-bottom:24px; }
  .invoice-header img{ height:38px; }
  .invoice-header-meta{ text-align:right; }
  .invoice-header-meta h2{ font-family: var(--font-heading); font-weight:700; margin-bottom:6px; }
  .invoice-billto{ display:flex; justify-content:space-between; margin-bottom:26px; font-size:13px; line-height:1.9; }
  .invoice-billto h5{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#888; margin-bottom:8px; }
  .invoice-table{ width:100%; border-collapse:collapse; margin-bottom:20px; }
  .invoice-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-bottom:2px solid #111; padding:8px 6px; }
  .invoice-table td{ padding:10px 6px; border-bottom:1px solid #ddd; font-size:13px; }
  .invoice-totals{ margin-left:auto; width:280px; font-size:13.5px; }
  .invoice-totals div{ display:flex; justify-content:space-between; padding:6px 0; }
  .invoice-totals .grand{ border-top:2px solid #111; margin-top:6px; padding-top:10px; font-weight:700; font-size:16px; }
  .invoice-footer{ margin-top:40px; text-align:center; font-size:12px; color:#888; }
}

.admin-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-bottom:30px; }
@media (max-width:900px){ .admin-stats{ grid-template-columns: repeat(2,1fr); } }
.admin-stat-card{ background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-md); padding:22px 24px; }
.admin-stat-card .num{ font-family:var(--font-heading); font-weight:700; font-size:1.8rem; color: var(--gold-deep); }
.admin-stat-card .label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-top:6px; }

.admin-toolbar{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:22px; justify-content:space-between; }
.admin-toolbar-left{ display:flex; gap:12px; flex-wrap:wrap; flex:1; }
.admin-search{ position:relative; min-width:220px; flex:1; max-width:320px; }
.admin-search input{ width:100%; padding:11px 16px 11px 40px; border:1px solid var(--line-strong); border-radius:999px; font-size:13px; background:var(--paper); outline:none; }
.admin-search input:focus{ border-color: var(--gold); }
.admin-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint); }
.admin-toolbar select{ padding:11px 16px; border:1px solid var(--line-strong); border-radius:999px; font-size:12.5px; background:var(--paper); outline:none; }

.admin-table-wrap{ background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-md); overflow:auto; }
.admin-table{ width:100%; border-collapse:collapse; min-width:900px; }
.admin-table th{ text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:16px 18px; border-bottom:1px solid var(--line); cursor:pointer; white-space:nowrap; user-select:none; }
.admin-table th:hover{ color: var(--gold-deep); }
.admin-table th .sort-arrow{ font-size:10px; margin-left:4px; opacity:.5; }
.admin-table td{ padding:16px 18px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-table tbody tr{ cursor:pointer; transition: background .2s var(--ease); }
.admin-table tbody tr:hover{ background: var(--paper-soft); }
.admin-table tbody tr:last-child td{ border-bottom:none; }
.admin-order-id{ font-family:var(--font-heading); font-weight:600; color:var(--gold-deep); }

.status-pill{ display:inline-block; padding:5px 13px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.status-pill.pending{ background:#fff3d6; color:#9a6b00; }
.status-pill.paid{ background:#dff5e6; color:#1e7d3f; }
.status-pill.new{ background:#e8ecff; color:#33449e; }
.status-pill.confirmed{ background:#e0f2ff; color:#0d6fa8; }
.status-pill.shipped{ background:#f0e6ff; color:#6a2ec2; }
.status-pill.delivered{ background:#dff5e6; color:#1e7d3f; }
.status-pill.cancelled{ background:#fde4e4; color:#b02a2a; }
.status-pill.rejected{ background:#fde4e4; color:#b02a2a; }

.admin-empty{ text-align:center; padding:70px 20px; color: var(--ink-faint); }

.admin-modal-overlay{ position:fixed; inset:0; background: rgba(17,17,17,.5); z-index:1200; opacity:0; pointer-events:none; transition: opacity .3s var(--ease); }
.admin-modal-overlay.open{ opacity:1; pointer-events:all; }
.admin-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(640px,92vw); max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius: var(--radius-md); z-index:1201; box-shadow: var(--shadow-lift); padding:36px;
}
.admin-modal-close{ float:right; background:none; border:none; font-size:22px; color:var(--ink); }
.admin-modal h3{ font-size:1.3rem; margin-bottom:20px; }
.admin-modal-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.admin-modal-row span:first-child{ color:var(--ink-faint); text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.admin-modal-products{ margin:20px 0; }
.admin-status-row{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.admin-status-row .form-group{ flex:1; min-width:180px; margin-bottom:0; }
.admin-modal-actions{ display:flex; gap:12px; margin-top:26px; }

/* ==========================================================================
   REVIEWS PAGE — product cards, star-select input, review list, admin badges
   Reuses existing tokens (--gold, --ink, --paper, --line, --radius-*) and the
   existing .product-card / .form-group / .admin-modal / .admin-table system
   so this matches the rest of the site rather than introducing a new look.
   ========================================================================== */

.review-product-rating-row{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--ink-faint); }
.review-product-rating-row .stars{ color: var(--gold-deep); letter-spacing:2px; font-size:12px; }
.review-product-rating-row .no-reviews{ color: var(--ink-faint); font-style:italic; }

.write-review-btn{
  width:100%; text-align:center; margin-top:auto; padding-top:14px;
}
.write-review-btn .btn{ width:100%; }

.review-star-input{ display:flex; gap:6px; font-size:0; }
.review-star{
  background:none; border:none; font-size:28px; line-height:1; color: var(--line-strong); cursor:pointer;
  transition: color .2s var(--ease), transform .2s var(--ease); padding:2px;
}
.review-star:hover{ transform: scale(1.12); }
.review-star.filled{ color: var(--gold); }

.review-list{ margin-top:14px; display:flex; flex-direction:column; gap:16px; }
.review-list-item{ border-bottom:1px dashed var(--line); padding-bottom:14px; }
.review-list-item:last-child{ border-bottom:none; padding-bottom:0; }
.review-list-item .stars{ color: var(--gold-deep); letter-spacing:2px; font-size:13px; display:block; margin-bottom:4px; }
.review-list-item .review-author{ font-weight:600; font-size:13.5px; color: var(--ink); }
.review-list-item .review-date{ font-size:11.5px; color: var(--ink-faint); margin-left:8px; }
.review-list-item .review-text{ font-size:13.5px; color: var(--ink-soft); line-height:1.7; margin-top:4px; }

.admin-badge{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.admin-badge.pending{ background: rgba(212,175,55,.12); color: var(--gold-deep); }
.admin-badge.approved{ background: rgba(30,125,63,.1); color:#1e7d3f; }
.admin-badge.rejected{ background: rgba(194,59,59,.1); color:#c23b3b; }

.admin-review-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.admin-review-actions button{
  font-size:11.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink);
}
.admin-review-actions button:hover{ border-color: var(--gold); color: var(--gold-deep); }
.admin-review-actions button.approve:hover{ border-color:#1e7d3f; color:#1e7d3f; }
.admin-review-actions button.reject:hover, .admin-review-actions button.delete:hover{ border-color:#c23b3b; color:#c23b3b; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}


/* Homepage Hero H1 - Elegant Luxury Style */
.hero h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: #24212A;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* =========================================================
   PRODUCT REVIEWS
   ========================================================= */

.product-reviews-section {
  width: 100%;
  margin: 60px 0 40px;
  padding: 40px 0;
  border-top: 1px solid var(--border, #e5e5e5);
}

.product-reviews-container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.product-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.product-reviews-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.reviews-stars,
.review-item-stars {
  color: #c89b3c;
  letter-spacing: 2px;
  font-size: 18px;
}

.reviews-summary-text {
  color: var(--ink, #222);
}

.product-reviews-list {
  display: flex;
  flex-direction: column;
}

.product-review-item {
  padding: 24px 0;
  border-top: 1px solid var(--border, #e5e5e5);
}

.product-review-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.product-review-name {
  font-weight: 600;
  font-size: 15px;
}

.product-review-date {
  color: #888;
  font-size: 13px;
}

.product-review-text {
  margin: 10px 0 0;
  color: #444;
  font-size: 15px;
  line-height: 1.7;
}

.reviews-loading,
.no-product-reviews {
  color: #888;
  font-size: 14px;
  padding: 20px 0;
}

@media (max-width: 600px) {
  .product-reviews-section {
    margin-top: 40px;
    padding: 30px 0;
  }

  .product-reviews-header {
    display: block;
  }

  .product-reviews-header h2 {
    font-size: 23px;
    margin-bottom: 12px;
  }

  .product-review-top {
    flex-wrap: wrap;
  }
}


/* MOBILE PRODUCT ACTIONS */
@media (max-width: 600px) {

  .pd-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Quantity */
  .pd-qty {
    flex: 0 0 120px !important;
    width: 120px !important;
    margin: 0 !important;
  }

  /* Add to Cart */
  .pd-actions #pd-add-cart {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Wishlist — new line */
  .pd-actions .pd-wishlist-btn {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 600px) {
  .pd-actions .pd-wishlist-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
}

.pd-wishlist-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.pd-wishlist-icon,
.pd-wishlist-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.product-viewers {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #555;
}

.product-viewers strong {
  color: #071A33;
}

.viewer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e9b5f;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(46, 155, 95, 0.12);
}