/* ═══════════════════════════════════════════════
   SHOPHUB — Premium E-commerce
   Palette: Obsidian · Ivory · Amber Gold
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:     #0a0a0a;
  --ink-2:   #1a1a1a;
  --ink-3:   #2d2d2d;
  --muted:   #888;
  --border:  #e5e5e5;
  --surface: #f8f8f8;
  --white:   #ffffff;
  --gold:    #c9a84c;
  --gold-lt: #e8c97a;
  --red:     #e63946;
  --green:   #2d6a4f;
  --nav-h:   70px;
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --r:       4px;
  --r-lg:    12px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);overflow-x:hidden;min-height:100vh;line-height:1.6}
h1,h2,h3,h4{font-family:'Playfair Display',serif;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── Utilities ─────────────────────────────── */
.container{width:100%;max-width:1340px;margin:0 auto;padding:0 2rem}
.section{padding:80px 0}
.section-sm{padding:48px 0}

/* ── Scroll-reveal ─────────────────────────── */
.sr{opacity:0;transform:translateY(48px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.sr.in{opacity:1;transform:none}
.sr-left{transform:translateX(-48px)}
.sr-right{transform:translateX(48px)}
.sr-left.in,.sr-right.in{transform:none}
.sr-scale{transform:scale(.93) translateY(24px)}
.sr-scale.in{transform:none}

/* Stagger grid */
.stagger-grid>.sr{transition-delay:calc(var(--i,0)*.08s)}

/* Generic reveal — used on section-header-row, .reveal-left, .reveal-right, .reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .85s var(--ease),transform .85s var(--ease);will-change:opacity,transform}
.reveal-left{transform:translateX(-48px) translateY(0)}
.reveal-right{transform:translateX(48px) translateY(0)}
.reveal.revealed,.reveal-left.revealed,.reveal-right.revealed{opacity:1;transform:none}

/* Section header slide-in */
.section-header-row{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.section-header-row.revealed{opacity:1;transform:none}

/* Parallax layers (driven from JS by --py) */
.parallax{transform:translate3d(0,var(--py,0),0);will-change:transform;transition:transform .1s linear}

/* Hero text entrance */
@keyframes heroRise{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}
.hero-panel-tag  {animation:heroRise .8s .2s var(--ease) both}
.hero-panel-title{animation:heroRise .9s .35s var(--ease) both}
.hero-panel-sub  {animation:heroRise .9s .5s var(--ease) both}
.hero-panel-cta  {animation:heroRise .9s .65s var(--ease) both}

/* Scroll progress bar at very top of navbar */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;z-index:1001;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  width:var(--sp,0%);transition:width .08s linear;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.1s!important;
  }
  .parallax{transform:none!important}
  .hero-panel-tag,.hero-panel-title,.hero-panel-sub,.hero-panel-cta{animation:none}
}

/* ═══════════════════════════════════════════════
   MEGA NAVBAR
═══════════════════════════════════════════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
.navbar.solid{
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
/* Only the hero page can make the navbar transparent at the top */
body.has-hero .navbar.hero-top{
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
}

/* Main content padding: account for fixed navbar on non-hero pages */
.site-main{padding-top:var(--nav-h)}
body.has-hero .site-main{padding-top:0}

.nav-inner{display:flex;align-items:center;height:100%;gap:0}

/* Logo */
.nav-logo{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:900;
  color:#fff;letter-spacing:-.5px;flex-shrink:0;margin-right:2.5rem;
  display:flex;align-items:center;gap:.35rem;
}
.nav-logo-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);display:inline-block;margin-bottom:2px;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Primary links */
.nav-links{display:flex;align-items:stretch;gap:0;height:100%}
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{
  display:flex;align-items:center;gap:.35rem;
  padding:0 1.1rem;height:100%;
  color:rgba(255,255,255,.8);font-size:.875rem;font-weight:500;
  letter-spacing:.2px;white-space:nowrap;
  transition:color .2s;cursor:pointer;border:none;background:none;font-family:inherit;
}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link i.chevron{font-size:.65rem;transition:transform .25s}
.nav-item:hover .chevron{transform:rotate(180deg)}
.nav-link::after{
  content:'';position:absolute;bottom:0;left:1.1rem;right:1.1rem;
  height:2px;background:var(--gold);
  transform:scaleX(0);transition:transform .25s var(--ease);
  transform-origin:center;
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

/* Right actions */
.nav-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav-search-toggle{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.8);font-size:.95rem;transition:all .2s;
}
.nav-search-toggle:hover{background:rgba(255,255,255,.16);color:#fff}
.nav-cart-btn{
  position:relative;display:flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border-radius:999px;
  background:var(--gold);color:var(--ink);font-size:.82rem;font-weight:700;
  cursor:pointer;transition:all .2s;border:none;font-family:inherit;letter-spacing:.3px;
}
.nav-cart-btn:hover{background:var(--gold-lt);transform:translateY(-1px)}
.nav-cart-count{
  min-width:18px;height:18px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:.65rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.nav-user-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.8);font-size:.95rem;transition:all .2s;
}
.nav-user-btn:hover{background:rgba(255,255,255,.16);color:#fff}

/* ── MEGA DROPDOWN ─────────────────────────── */
.mega-menu{
  position:absolute;top:calc(var(--nav-h) + 0px);left:50%;
  transform:translateX(-50%) translateY(12px);
  width:900px;background:#fff;border-radius:var(--r-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  display:grid;grid-template-columns:200px 1fr 220px;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  border:1px solid var(--border);overflow:hidden;
}
.nav-item:hover .mega-menu{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}

.mega-col{padding:1.5rem}
.mega-col+.mega-col{border-left:1px solid var(--border)}
.mega-col-title{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin-bottom:1rem}

/* Category list in mega */
.mega-cat-list{display:flex;flex-direction:column;gap:.15rem}
.mega-cat-link{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem;border-radius:var(--r);
  font-size:.875rem;color:var(--ink-2);transition:all .15s;
}
.mega-cat-link:hover{background:var(--surface);color:var(--ink);padding-left:1rem}
.mega-cat-link i{width:16px;text-align:center;color:var(--muted);font-size:.85rem}

/* Filters in mega */
.mega-filter-section{margin-bottom:1.25rem}
.mega-filter-label{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--muted);margin-bottom:.6rem}
.mega-price-pills{display:flex;flex-wrap:wrap;gap:.35rem}
.mega-price-pill{
  padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:500;
  border:1px solid var(--border);color:var(--ink-2);cursor:pointer;transition:all .15s;
}
.mega-price-pill:hover,.mega-price-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.mega-color-dots{display:flex;flex-wrap:wrap;gap:.4rem}
.mega-color-dot{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.mega-color-dot:hover{transform:scale(1.2);border-color:var(--ink)}
.mega-rating-list{display:flex;flex-direction:column;gap:.25rem}
.mega-rating-item{
  display:flex;align-items:center;gap:.4rem;font-size:.8rem;
  color:var(--muted);cursor:pointer;padding:.2rem .4rem;border-radius:4px;transition:all .15s;
}
.mega-rating-item:hover{color:var(--ink);background:var(--surface)}
.mega-stars{color:#f59e0b;font-size:.72rem}

/* Featured in mega */
.mega-featured-card{
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  transition:transform .2s;cursor:pointer;
}
.mega-featured-card:hover{transform:translateY(-3px)}
.mega-featured-img{width:100%;height:120px;object-fit:cover}
.mega-featured-info{padding:.75rem}
.mega-featured-name{font-size:.8rem;font-weight:600;color:var(--ink)}
.mega-featured-price{font-size:.875rem;font-weight:700;color:var(--gold)}

/* ── SEARCH OVERLAY ────────────────────────── */
.search-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(10,10,10,.96);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;
  padding:6rem 2rem 3rem;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.search-overlay.open{opacity:1;pointer-events:all}
.search-overlay-inner{width:100%;max-width:680px}
.search-overlay-form{
  display:flex;align-items:center;gap:0;
  border-bottom:2px solid rgba(255,255,255,.3);padding-bottom:1rem;margin-bottom:2rem;
}
.search-overlay-input{
  flex:1;background:none;border:none;outline:none;
  font-size:2rem;color:#fff;font-family:'Playfair Display',serif;
}
.search-overlay-input::placeholder{color:rgba(255,255,255,.25)}
.search-overlay-close{
  background:none;border:none;color:rgba(255,255,255,.5);
  font-size:1.5rem;cursor:pointer;padding:.5rem;transition:color .2s;
}
.search-overlay-close:hover{color:#fff}
.search-overlay-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.35);font-weight:600;margin-bottom:.85rem}
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.85rem}
.search-result-item{
  background:rgba(255,255,255,.05);border-radius:var(--r);overflow:hidden;
  cursor:pointer;transition:background .2s;
}
.search-result-item:hover{background:rgba(255,255,255,.1)}
.search-result-img{width:100%;height:100px;object-fit:cover}
.search-result-info{padding:.6rem}
.search-result-name{font-size:.78rem;color:#fff;font-weight:500;line-height:1.3}
.search-result-price{font-size:.8rem;color:var(--gold);font-weight:700;margin-top:.2rem}

/* Mobile toggle */
.nav-mobile-btn{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;padding:.4rem}

/* ═══════════════════════════════════════════════
   HERO — SPLIT IMAGES
═══════════════════════════════════════════════ */
.hero{
  height:100vh;min-height:600px;
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;
}
.hero-panel{
  position:relative;overflow:hidden;cursor:pointer;
}
.hero-panel-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity 1.2s ease,transform .4s var(--ease);
  opacity:0;transform:scale(1.04);
}
.hero-panel-slide.active{opacity:1;transform:scale(1)}
.hero-panel:hover .hero-panel-slide.active{transform:scale(1.06)}

/* Elegant floating category label — cycles with slides */
.hero-panel-label{
  position:absolute;top:2.5rem;right:2.5rem;z-index:2;
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  font-weight:400;font-style:italic;
  color:rgba(255,255,255,.92);
  letter-spacing:.5px;line-height:1.1;
  text-align:right;max-width:55%;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.hero-panel-label::before{
  content:'';display:block;
  width:42px;height:1px;background:var(--gold);
  margin-left:auto;margin-bottom:.6rem;
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease) .15s;
}
.hero-panel-label.is-visible::before{transform:scaleX(1)}
.hero-panel-label.is-hiding{opacity:0;transform:translateY(-10px)}

/* Hover video — layered above slides, below overlay */
.hero-panel-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .6s var(--ease);
  z-index:1;pointer-events:none;
}
.hero-panel.video-on .hero-panel-video{opacity:1}
/* When video is playing, dim the slide slightly so contrast is stable */
.hero-panel.video-on .hero-panel-slide.active{opacity:0}

/* Dark gradient overlay */
.hero-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 60%,transparent 100%);
  z-index:1;transition:background .4s;
}
.hero-panel:hover::after{
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.08) 60%,transparent 100%);
}

/* Hover overlay with CTA */
.hero-panel-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:3rem 3rem 4rem;
}
.hero-panel-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--gold);color:var(--ink);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  padding:.3rem .9rem;border-radius:999px;margin-bottom:1rem;
  width:fit-content;
}
.hero-panel-title{
  font-size:clamp(1.8rem,3.5vw,3rem);color:#fff;font-weight:900;
  line-height:1.1;margin-bottom:.85rem;
}
.hero-panel-sub{font-size:.95rem;color:rgba(255,255,255,.7);margin-bottom:1.5rem;max-width:320px}
.hero-panel-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--ink);
  font-size:.85rem;font-weight:700;padding:.65rem 1.5rem;border-radius:999px;
  width:fit-content;transition:all .25s var(--spring);
  transform:translateY(12px);opacity:0;
}
.hero-panel:hover .hero-panel-cta{transform:translateY(0);opacity:1}
.hero-panel-cta:hover{background:var(--gold);color:var(--ink)}

/* Hero divider line */
.hero-divider{
  position:absolute;left:50%;top:10%;bottom:10%;width:1px;
  background:rgba(255,255,255,.2);transform:translateX(-50%);z-index:3;
}

/* Scroll hint */
.hero-scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:rgba(255,255,255,.5);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
}
.hero-scroll-line{
  width:1px;height:50px;
  background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
  animation:scrollAnim 1.8s ease-in-out infinite;
}
@keyframes scrollAnim{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ═══════════════════════════════════════════════
   FEATURE BAR
═══════════════════════════════════════════════ */
.feature-bar{
  background:var(--ink);padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.feature-bar-inner{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.feature-bar-item{
  display:flex;align-items:center;gap:.85rem;padding:.75rem 1.5rem;
  border-right:1px solid rgba(255,255,255,.08);
}
.feature-bar-item:last-child{border-right:none}
.feature-bar-icon{
  width:40px;height:40px;border-radius:var(--r);
  background:rgba(201,168,76,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1rem;flex-shrink:0;
}
.feature-bar-title{font-size:.85rem;font-weight:600;color:#fff}
.feature-bar-sub{font-size:.75rem;color:rgba(255,255,255,.4);margin-top:.1rem}

/* ═══════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════ */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--gold);margin-bottom:.65rem;
}
.section-title{font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:900;color:var(--ink)}
.section-title.light{color:#fff}
.section-sub{font-size:.95rem;color:var(--muted);margin-top:.4rem;max-width:460px}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:1rem}

/* ═══════════════════════════════════════════════
   CATEGORY TILES
═══════════════════════════════════════════════ */
/* Bento-style category grid — larger, richer tiles */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:180px;
  gap:1rem;
}
/* Make the first two tiles large (bento look), rest regular */
.cat-grid .cat-tile:nth-child(1){grid-column:span 3;grid-row:span 2}
.cat-grid .cat-tile:nth-child(2){grid-column:span 3;grid-row:span 1}
.cat-grid .cat-tile:nth-child(3){grid-column:span 2;grid-row:span 1}
.cat-grid .cat-tile:nth-child(4){grid-column:span 2;grid-row:span 2}
.cat-grid .cat-tile:nth-child(5){grid-column:span 2;grid-row:span 1}
.cat-grid .cat-tile:nth-child(6){grid-column:span 4;grid-row:span 1}

.cat-tile{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  transition:transform .4s var(--spring),box-shadow .4s;
  min-height:180px;
}
.cat-tile:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(0,0,0,.22)}
.cat-tile-img,.cat-tile-bg{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform .7s var(--ease);
}
.cat-tile:hover .cat-tile-img,.cat-tile:hover .cat-tile-bg{transform:scale(1.08)}
.cat-tile-bg{display:flex;align-items:center;justify-content:center}
.cat-tile-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.15) 55%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;
  transition:background .35s;
}
.cat-tile:hover .cat-tile-overlay{background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 100%)}
.cat-tile-name{
  font-family:'Playfair Display',serif;font-weight:800;color:#fff;
  font-size:1.35rem;line-height:1.1;letter-spacing:-.3px;
  transform:translateY(0);transition:transform .35s var(--spring);
}
.cat-tile:hover .cat-tile-name{transform:translateY(-4px)}
.cat-tile-count{font-size:.78rem;color:rgba(255,255,255,.72);margin-top:.3rem;letter-spacing:.4px}
/* Subtle arrow that reveals on hover */
.cat-tile-overlay::after{
  content:'\2192';
  position:absolute;right:1.25rem;bottom:1.25rem;
  width:38px;height:38px;border-radius:50%;
  background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;
  transform:translate(8px,8px) scale(.6);opacity:0;
  transition:transform .35s var(--spring),opacity .3s;
}
.cat-tile:hover .cat-tile-overlay::after{transform:translate(0,0) scale(1);opacity:1}

/* Category color backgrounds */
.cat-bg-electronics{background:linear-gradient(135deg,#0f3460,#16213e)}
.cat-bg-clothing    {background:linear-gradient(135deg,#4a1942,#8b2fc9)}
.cat-bg-home        {background:linear-gradient(135deg,#1a535c,#4ecdc4)}
.cat-bg-sports      {background:linear-gradient(135deg,#1d3557,#457b9d)}
.cat-bg-books       {background:linear-gradient(135deg,#6b4226,#c9956c)}
.cat-bg-beauty      {background:linear-gradient(135deg,#6d3b47,#e8a598)}
.cat-bg-default     {background:linear-gradient(135deg,#2d2d2d,#555)}

/* ═══════════════════════════════════════════════
   PRODUCT CARDS
═══════════════════════════════════════════════ */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1.5rem;
}
.products-grid-lg{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.product-card{
  background:#fff;border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--border);
  transition:transform .4s var(--spring),box-shadow .4s;
}
.product-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 70px rgba(0,0,0,.12);
}

/* Image wrapper — uniform aspect ratio */
.product-card-img{
  position:relative;overflow:hidden;
  padding-top:115%;background:var(--surface);flex-shrink:0;
}
.product-card-img-link{position:absolute;inset:0;display:block}
/* Primary/hover images fill the frame uniformly */
.product-card-img .pc-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .55s var(--ease),transform .7s var(--ease);
  will-change:opacity,transform;
}
.product-card-img .pc-img-primary{opacity:1}
.product-card-img .pc-img-hover{opacity:0;transform:scale(1.06)}
.product-card:hover .pc-img-primary{opacity:0;transform:scale(1.04)}
.product-card:hover .pc-img-hover{opacity:1;transform:scale(1)}
/* If there's no hover image, still zoom the primary slightly on hover */
.product-card:hover .pc-img-primary:only-of-type{opacity:1;transform:scale(1.05)}

/* Legacy cycling slides (kept for any other usage) */
.card-img-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease,transform .6s var(--ease);
  transform:scale(1.04);
}
.card-img-slide.active{opacity:1;transform:scale(1)}
.product-card:hover .card-img-slide.active{transform:scale(1.07)}
.product-img-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#ccc;font-size:3.5rem;
}

/* Badges */
.card-badges{position:absolute;top:.75rem;left:.75rem;display:flex;flex-direction:column;gap:.3rem;z-index:2}
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.3px;
}
.badge-gold  {background:var(--gold);color:var(--ink)}
.badge-red   {background:var(--red);color:#fff}
.badge-ink   {background:var(--ink);color:#fff}
.badge-green {background:var(--green);color:#fff}
.badge-surface{background:rgba(255,255,255,.9);color:var(--ink-2)}

/* Wishlist */
.card-wishlist{
  position:absolute;top:.75rem;right:.75rem;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:all .2s var(--spring);
}
.card-wishlist:hover{color:var(--red);transform:scale(1.15);background:#fff}

/* Add-to-cart button */
.card-atc{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--ink);color:#fff;
  font-size:.82rem;font-weight:600;padding:.8rem;
  border:none;cursor:pointer;font-family:inherit;letter-spacing:.3px;
  transform:translateY(100%);transition:transform .3s var(--spring);
  z-index:2;
}
.card-atc svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.product-card:hover .card-atc{transform:translateY(0)}
.card-atc:hover{background:var(--gold);color:var(--ink)}
.card-atc:hover svg{stroke:var(--ink)}

/* Card body */
.card-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.card-cat  {font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700;color:var(--gold);margin-bottom:.3rem}
.card-name {font-size:.95rem;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:.5rem}
.card-name a{color:inherit}
.card-name a:hover{color:var(--gold)}
.card-rating{display:flex;align-items:center;gap:.3rem;margin-bottom:.6rem}
.stars{color:#f59e0b;font-size:.75rem}
.rating-val{font-size:.75rem;color:var(--muted);font-weight:500}
.card-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-top:auto}
.price-now{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--ink)}
.price-was{font-size:.83rem;color:#bbb;text-decoration:line-through}
.price-save{font-size:.72rem;font-weight:700;color:var(--red);background:rgba(230,57,70,.08);padding:.1rem .4rem;border-radius:3px}

/* ── Horizontal reel ───────────────────────── */
.product-reel{
  display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:1rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.product-reel .product-card{flex:0 0 265px;scroll-snap-align:start}

/* ═══════════════════════════════════════════════
   PROMO BANNER
═══════════════════════════════════════════════ */
.promo-banner{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:340px;display:flex;align-items:center;
  background:var(--ink);
}
.promo-banner-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.35;
}
.promo-banner-content{
  position:relative;z-index:1;padding:3.5rem;max-width:520px;
}
.promo-banner h2{font-size:clamp(1.6rem,3vw,2.5rem);color:#fff;margin-bottom:.75rem}
.promo-banner p{color:rgba(255,255,255,.65);margin-bottom:2rem;font-size:1rem}

/* ═══════════════════════════════════════════════
   STATS
═══════════════════════════════════════════════ */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}
.stat-cell{
  padding:2.5rem 1.5rem;text-align:center;border-right:1px solid var(--border);
  transition:background .2s;
}
.stat-cell:last-child{border-right:none}
.stat-cell:hover{background:var(--surface)}
.stat-num{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:900;color:var(--ink)}
.stat-label{font-size:.82rem;color:var(--muted);margin-top:.25rem}

/* ═══════════════════════════════════════════════
   SHOP LAYOUT (LIST + SIDEBAR)
═══════════════════════════════════════════════ */
.shop-wrap{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start}
.filters-sidebar{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.5rem;position:sticky;top:calc(var(--nav-h)+1rem);
}
.filter-heading{
  font-size:.82rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;
  color:var(--ink);display:flex;align-items:center;gap:.45rem;margin-bottom:1.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--border);
}
.filter-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.filter-section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.filter-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--muted);margin-bottom:.65rem}
.filter-list{display:flex;flex-direction:column;gap:.15rem}
.filter-list a{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.875rem;color:var(--ink-2);padding:.4rem .6rem;border-radius:var(--r);
  transition:all .15s;
}
.filter-list a:hover,.filter-list a.active{background:rgba(201,168,76,.1);color:var(--gold);font-weight:500}
.price-inputs{display:flex;gap:.4rem;align-items:center}
.price-inputs input{
  flex:1;padding:.42rem .6rem;border:1px solid var(--border);border-radius:var(--r);
  font-size:.85rem;outline:none;min-width:0;transition:border-color .15s;
}
.price-inputs input:focus{border-color:var(--gold)}
.color-swatches{display:flex;flex-wrap:wrap;gap:.45rem}
.color-swatch{
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:all .2s;
}
.color-swatch:hover,.color-swatch.active{border-color:var(--ink);transform:scale(1.2)}

/* ═══════════════════════════════════════════════
   PRODUCT DETAIL
═══════════════════════════════════════════════ */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}

/* ── Product detail grid — THUMBS | MAIN | INFO ── */
.product-detail-wrap{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap:3.5rem;
  align-items:start;
}
.gallery-col{min-width:0}
.gallery-stack{
  display:grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap:1rem;
  align-items:start;
}
.gallery-thumbs-v{
  display:flex;flex-direction:column;gap:.6rem;
  max-height:520px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;
}
.gallery-thumbs-v::-webkit-scrollbar{width:6px}
.gallery-thumbs-v::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.gallery-thumbs-h{display:none;gap:.5rem;margin-top:.75rem;overflow-x:auto;padding-bottom:.25rem}

.gallery-main{
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1;max-height:520px;
  background:var(--surface);position:relative;
  cursor:zoom-in;
}
.gallery-main img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s var(--ease),opacity .2s;
  transform-origin:center;
}
.gallery-main.zooming img{transform:scale(1.9);transition:transform .1s linear}
.gallery-main .gallery-zoom-lens{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 90px at var(--zx,50%) var(--zy,50%), rgba(255,255,255,.15), transparent 70%);
  opacity:0;transition:opacity .2s;
}
.gallery-main.zooming .gallery-zoom-lens{opacity:1}
.gallery-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:4rem;
}
/* Prev/next arrows */
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:.9rem;box-shadow:0 4px 14px rgba(0,0,0,.12);
  opacity:0;transition:opacity .25s,background .15s,transform .25s var(--spring);
  z-index:3;
}
.gallery-main:hover .gallery-nav{opacity:1}
.gallery-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.gallery-prev{left:.75rem}
.gallery-next{right:.75rem}

/* Thumbs (shared) */
.gallery-thumb{
  width:100%;aspect-ratio:1;border-radius:var(--r);overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:border-color .2s,transform .25s;
  flex-shrink:0;background:var(--surface);
}
.gallery-thumbs-h .gallery-thumb{width:72px;aspect-ratio:1}
.gallery-thumb:hover{transform:translateY(-2px)}
.gallery-thumb.active{border-color:var(--gold)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}

/* Legacy .gallery-thumbs (kept for any stale usage) */
.gallery-thumbs{display:flex;gap:.6rem;margin-top:.75rem;flex-wrap:wrap}

@media (max-width: 960px){
  .product-detail-wrap{grid-template-columns:1fr;gap:2rem}
  .gallery-stack{grid-template-columns:1fr}
  .gallery-thumbs-v{display:none}
  .gallery-thumbs-h{display:flex}
  .gallery-main{aspect-ratio:1;max-height:none}
}

.product-info-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:.3rem;margin-bottom:.5rem}
.product-info-panel h1{font-size:2.1rem;font-weight:900;color:var(--ink);line-height:1.15;margin-bottom:1rem}
.big-price{font-family:'Playfair Display',serif;font-size:2.25rem;font-weight:900;color:var(--ink)}
.big-price .was{font-size:1.2rem;color:#bbb;text-decoration:line-through;font-weight:400;margin-left:.5rem}
.stock-chip{font-size:.75rem;font-weight:700;padding:.3rem .85rem;border-radius:999px;letter-spacing:.3px}
.in-stock{background:#d1fae5;color:#065f46}
.low-stock{background:#fef3c7;color:#92400e}
.out-stock{background:#fee2e2;color:#991b1b}
.product-desc{color:var(--muted);line-height:1.85;font-size:.95rem;margin-bottom:1.5rem}

/* Qty */
.qty-row{display:flex;align-items:center;gap:.5rem}
.qty-ctrl{
  width:38px;height:38px;border:1px solid var(--border);background:#fff;
  border-radius:var(--r);cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.qty-ctrl:hover{border-color:var(--gold);color:var(--gold)}
.qty-field{
  width:56px;text-align:center;border:1px solid var(--border);
  border-radius:var(--r);padding:.45rem;font-size:.95rem;outline:none;
}

/* Tabs */
.ptabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:2rem}
.ptab-btn{
  padding:.7rem 1.5rem;background:none;border:none;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--muted);font-family:inherit;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;
}
.ptab-btn.active,.ptab-btn:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* Reviews */
.review-item{padding:1.5rem 0;border-bottom:1px solid var(--border)}
.review-item:last-child{border-bottom:none}
.reviewer-av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink),var(--ink-3));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;flex-shrink:0;
}
.reviewer-name{font-weight:600;font-size:.875rem;color:var(--ink)}
.reviewer-date{font-size:.75rem;color:var(--muted)}
.review-text{font-size:.9rem;color:var(--muted);line-height:1.7}

/* ═══════════════════════════════════════════════
   CART
═══════════════════════════════════════════════ */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
.cart-table{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.cart-thead{
  display:grid;grid-template-columns:3fr 1fr 1fr 1fr 40px;gap:1rem;
  padding:.85rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
}
.cart-row{
  display:grid;grid-template-columns:3fr 1fr 1fr 1fr 40px;
  gap:1rem;padding:1.25rem 1.5rem;align-items:center;
  border-bottom:1px solid var(--border);transition:background .15s;
}
.cart-row:last-child{border-bottom:none}
.cart-row:hover{background:rgba(201,168,76,.03)}
.cart-product{display:flex;align-items:center;gap:.9rem}
.cart-product img{width:68px;height:68px;border-radius:var(--r);object-fit:cover;flex-shrink:0}
.cart-product-name{font-weight:600;font-size:.875rem;color:var(--ink)}
.cart-product-color{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.cart-qty-wrap{display:flex;align-items:center;gap:.3rem}
.cart-qty-wrap input{width:44px;text-align:center;border:1px solid var(--border);border-radius:var(--r);padding:.3rem;font-size:.875rem}
.cart-remove{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.95rem;padding:.35rem;border-radius:var(--r);transition:all .15s}
.cart-remove:hover{color:var(--red);background:rgba(230,57,70,.08)}
.order-summary-box{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem}
.order-summary-box h3{font-size:1.05rem;font-weight:700;margin-bottom:1.5rem;font-family:'Playfair Display',serif}
.order-line{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.6rem;color:var(--muted)}
.order-line.total{font-size:1.1rem;font-weight:700;color:var(--ink);border-top:1px solid var(--border);padding-top:.85rem;margin-top:.5rem}
.empty-cart-wrap{text-align:center;padding:5rem 1rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.empty-cart-icon{font-size:4rem;color:#ddd;margin-bottom:1.25rem}

/* ═══════════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════════ */
.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}
.checkout-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;margin-bottom:1rem}
.checkout-card-title{font-size:.95rem;font-weight:700;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.checkout-card-title i{color:var(--gold)}

/* ═══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.85rem}
.form-group.full{grid-column:1/-1}
.form-label{font-size:.78rem;font-weight:600;color:var(--ink-2);letter-spacing:.2px}
.form-control{
  padding:.65rem .9rem;border:1px solid var(--border);border-radius:var(--r);
  font-size:.9rem;color:var(--ink);outline:none;background:#fff;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.form-control.error{border-color:var(--red)}
.form-error{font-size:.78rem;color:var(--red)}
textarea.form-control{resize:vertical;min-height:110px}

/* ═══════════════════════════════════════════════
   AUTH
═══════════════════════════════════════════════ */
.auth-page{min-height:calc(100vh - var(--nav-h));display:flex;padding-top:var(--nav-h)}
.auth-visual{
  flex:1;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem;position:relative;overflow:hidden;
}

/* Cycling background slides */
.auth-visual-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.4s var(--ease),transform 6s var(--ease);
  z-index:0;
}
.auth-visual-slide.active{opacity:1;transform:scale(1)}
.auth-visual-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(135deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,.75) 100%),
    radial-gradient(ellipse at 30% 30%,rgba(201,168,76,.12),transparent 55%);
}
/* Backwards compat with old single-bg approach */
.auth-visual-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;z-index:0}

.auth-visual-content{position:relative;z-index:2;text-align:center;max-width:400px}
.auth-visual-eyebrow{
  display:inline-block;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2.2px;
  color:var(--gold);background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.35);
  padding:.35rem .95rem;border-radius:999px;margin-bottom:1.25rem;
}
.auth-visual-logo{font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;color:#fff;margin-bottom:.6rem}
.auth-visual-logo span,.auth-visual-logo .dot{color:var(--gold)}
.auth-visual-headline{
  font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.2rem);color:#fff;
  line-height:1.15;margin-bottom:.85rem;letter-spacing:-.3px;
}
.auth-visual-tagline{font-size:.98rem;color:rgba(255,255,255,.78);line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.auth-visual-perks{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem;text-align:left}
.auth-visual-perk{
  display:flex;align-items:center;gap:.85rem;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  border-radius:var(--r-lg);padding:.85rem 1.1rem;
}
.auth-visual-perk i{color:var(--gold);font-size:1.2rem;flex-shrink:0}
.auth-visual-perk-title{font-weight:600;font-size:.875rem;color:#fff}
.auth-visual-perk-sub{font-size:.775rem;color:rgba(255,255,255,.55)}
.auth-form-panel{
  width:480px;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:3rem 3.5rem;background:#fff;overflow-y:auto;
}
.auth-title{font-size:1.8rem;font-weight:900;color:var(--ink);margin-bottom:.4rem}
.auth-subtitle{font-size:.9rem;color:var(--muted);margin-bottom:2rem}
.auth-footer{text-align:center;font-size:.875rem;color:var(--muted);margin-top:1.5rem}
.auth-footer a{font-weight:600;color:var(--gold)}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.65rem 1.5rem;border-radius:999px;font-family:inherit;
  font-size:.875rem;font-weight:600;border:2px solid transparent;cursor:pointer;
  white-space:nowrap;transition:all .22s var(--ease);letter-spacing:.2px;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink-3);color:#fff;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-lt);color:var(--ink);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--surface);color:var(--ink);transform:translateY(-1px)}
.btn-sm{padding:.4rem 1rem;font-size:.8rem}
.btn-lg{padding:.85rem 2rem;font-size:.95rem}
.btn-xl{padding:1rem 2.5rem;font-size:1rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ═══════════════════════════════════════════════
   PROFILE & ORDERS
═══════════════════════════════════════════════ */
.profile-layout{display:grid;grid-template-columns:260px 1fr;gap:2rem}
.profile-sidebar{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.75rem;align-self:start;position:sticky;top:calc(var(--nav-h)+1rem);
}
.profile-av{
  width:80px;height:80px;border-radius:50%;margin:0 auto .75rem;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;
}
.profile-av img{border-radius:50%;object-fit:cover}
.profile-nav a{
  display:flex;align-items:center;gap:.65rem;padding:.65rem .85rem;
  border-radius:var(--r);font-size:.875rem;color:var(--muted);font-weight:500;transition:all .15s;
}
.profile-nav a:hover,.profile-nav a.active{background:rgba(201,168,76,.08);color:var(--ink)}

.order-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:.85rem;transition:box-shadow .25s}
.order-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08)}
.order-card-head{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}
.status-chip{padding:.25rem .75rem;border-radius:999px;font-size:.72rem;font-weight:700}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer{background:var(--ink);color:rgba(255,255,255,.55);padding:4.5rem 0 2rem;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-logo{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:900;color:#fff;margin-bottom:.85rem}
.footer-logo .dot{color:var(--gold)}
.footer-desc{font-size:.875rem;line-height:1.7;max-width:280px}
.footer-h{font-size:.72rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;color:rgba(255,255,255,.4);margin-bottom:1rem}
.footer-links a{display:block;font-size:.875rem;color:rgba(255,255,255,.55);margin-bottom:.5rem;transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;flex-wrap:wrap;gap:.5rem}

/* ═══════════════════════════════════════════════
   BREADCRUMB / PAGINATION
═══════════════════════════════════════════════ */
.breadcrumb{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted);flex-wrap:wrap;padding:1.5rem 0 .75rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb i{font-size:.6rem}
.pagination{display:flex;gap:.35rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 .75rem;border-radius:var(--r);
  font-size:.875rem;font-weight:500;border:1px solid var(--border);
  background:#fff;color:var(--muted);transition:all .2s;
}
.pagination a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ═══════════════════════════════════════════════
   CONFIRMATION
═══════════════════════════════════════════════ */
.success-icon{
  width:88px;height:88px;border-radius:50%;background:#d1fae5;
  margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:#065f46;animation:successPop .5s var(--spring);
}
@keyframes successPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Toast */
.toast-stack{position:fixed;top:calc(var(--nav-h)+12px);right:1rem;z-index:9500;display:flex;flex-direction:column;gap:.5rem;width:320px}
.toast{
  display:flex;align-items:flex-start;gap:.65rem;padding:.9rem 1rem;border-radius:var(--r-lg);
  font-size:.875rem;box-shadow:0 8px 32px rgba(0,0,0,.15);
  animation:toastIn .3s var(--spring);border:1px solid transparent;
}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast-success{background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.toast-error  {background:#fef2f2;color:#991b1b;border-color:#fecaca}
.toast-info   {background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.toast-close  {margin-left:auto;background:none;border:none;cursor:pointer;opacity:.5;font-size:1rem}
.toast-close:hover{opacity:1}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-panel:first-child{display:none}
  .hero-divider{display:none}
  .shop-wrap{grid-template-columns:1fr}
  .filters-sidebar{position:static}
  .detail-grid{grid-template-columns:1fr;gap:2rem}
  .checkout-layout{grid-template-columns:1fr}
  .cart-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .stats-row{grid-template-columns:1fr 1fr}
  .feature-bar-inner{grid-template-columns:1fr 1fr}
  .mega-menu{width:95vw;left:2.5%;transform:none}
  .nav-item:hover .mega-menu{transform:none}
  .auth-visual{display:none}
  .auth-form-panel{width:100%;padding:2.5rem 2rem}
  .profile-layout{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:160px}
  .cat-grid .cat-tile:nth-child(n){grid-column:span 2;grid-row:span 1}
  .cat-grid .cat-tile:nth-child(1){grid-row:span 2}
}
@media(max-width:768px){
  :root{--nav-h:60px}
  .nav-links,.nav-actions .nav-user-btn{display:none}
  .nav-mobile-btn{display:block}
  .nav-actions{gap:.35rem}
  .hero{height:100svh}
  .hero-panel-title{font-size:1.8rem}
  .cart-thead{display:none}
  .cart-row{grid-template-columns:1fr;gap:.65rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .feature-bar-inner{grid-template-columns:1fr}
  .feature-bar-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .form-row{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .cat-grid .cat-tile:nth-child(n){grid-column:span 1;grid-row:span 1}
  .cat-grid .cat-tile:nth-child(1){grid-column:span 2;grid-row:span 1}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .stats-row{grid-template-columns:1fr 1fr}
  .nav-mobile-toggle{display:block}
  .cart-layout{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════
   CSS VARIABLE ALIASES (used in templates)
═══════════════════════════════════════════════ */
:root {
  --primary: #c9a84c;
  --accent:  #e63946;
  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg:  12px;
  --radius-xl:  999px;
}

/* ═══════════════════════════════════════════════
   NAVBAR — template class names
═══════════════════════════════════════════════ */
.navbar-inner {
  display:flex;align-items:center;height:100%;width:100%;
}
.navbar-brand {
  font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:900;
  color:#fff;letter-spacing:-.5px;flex-shrink:0;margin-right:2rem;
  display:flex;align-items:center;gap:.3rem;
}
.navbar-brand span{color:var(--gold)}
.navbar-search {
  flex:1;max-width:480px;position:relative;display:flex;align-items:center;
  margin-right:auto;
}
.navbar-search .s-icon {
  position:absolute;left:.9rem;color:rgba(255,255,255,.4);font-size:.85rem;z-index:1;pointer-events:none;
}
.navbar-search input {
  width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:.55rem 1rem .55rem 2.6rem;
  color:#fff;font-size:.875rem;outline:none;font-family:inherit;
  transition:all .25s;
}
.navbar-search input::placeholder{color:rgba(255,255,255,.3)}
.navbar-search input:focus{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);box-shadow:0 0 0 3px rgba(201,168,76,.15)}
/* Autocomplete dropdown */
#search-suggestions {
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:#fff;border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.2);
  border:1px solid var(--border);
  z-index:2000;display:none;overflow:hidden;max-height:480px;overflow-y:auto;
  scrollbar-width:thin;
}
.sug-header {
  padding:.6rem 1rem .4rem;
  font-size:.67rem;text-transform:uppercase;letter-spacing:1.3px;
  font-weight:700;color:var(--muted);
  border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;
}
.sug-item {
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1rem;cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(0,0,0,.04);
}
.sug-item:last-child{border-bottom:none}
.sug-item:hover,.sug-item.sug-focused{background:rgba(201,168,76,.06)}
.sug-item img{
  width:46px;height:46px;border-radius:var(--r);object-fit:cover;
  flex-shrink:0;background:var(--surface);
}
.sug-item-name{font-size:.855rem;font-weight:500;color:var(--ink);line-height:1.3}
.sug-item-price{font-size:.82rem;font-weight:700;color:var(--gold);margin-top:.15rem}
.sug-item-price .was{font-size:.72rem;text-decoration:line-through;color:#bbb;font-weight:400;margin-left:.3rem}
.sug-footer {
  padding:.8rem 1rem;text-align:center;
  font-size:.83rem;font-weight:600;color:var(--gold);
  border-top:1px solid var(--border);cursor:pointer;transition:background .15s;
}
.sug-footer:hover{background:var(--surface)}
.sug-loading {
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.5rem;font-size:.85rem;color:var(--muted);
}

.navbar-links {
  display:flex;align-items:center;gap:.2rem;margin-left:1.5rem;flex-shrink:0;
}
.navbar-links a {
  color:rgba(255,255,255,.72);font-size:.85rem;font-weight:500;
  padding:.4rem .7rem;border-radius:var(--r);transition:all .2s;
  display:flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.navbar-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.navbar-links .btn-primary{background:var(--gold);color:var(--ink)}
.navbar-links .btn-primary:hover{background:var(--gold-lt)}

/* Cart button */
.cart-btn {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--gold);color:var(--ink);font-size:1rem;
  transition:all .22s;flex-shrink:0;
}
.cart-btn:hover{background:var(--gold-lt);transform:scale(1.08)}
.cart-bubble {
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;border-radius:999px;
  background:var(--red);color:#fff;
  font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* Trolley bump animation when an item is added to cart */
.cart-icon{transition:transform .25s var(--spring)}
.cart-btn.bump .cart-icon{animation:cartBump .55s var(--spring)}
@keyframes cartBump{
  0%   {transform:translateY(0)     rotate(0)}
  20%  {transform:translateY(-4px)  rotate(-8deg)}
  45%  {transform:translateY(2px)   rotate(6deg)}
  70%  {transform:translateY(-2px)  rotate(-3deg)}
  100% {transform:translateY(0)     rotate(0)}
}
.cart-bubble{transition:transform .25s var(--spring)}
.cart-btn.bump .cart-bubble{animation:badgePulse .6s var(--spring)}
@keyframes badgePulse{
  0%,100%{transform:scale(1)}
  35%    {transform:scale(1.45)}
}
.nav-mobile-toggle {
  display:none;background:none;border:none;color:#fff;
  font-size:1.3rem;cursor:pointer;padding:.4rem;margin-left:.5rem;
}
.navbar-links.open {
  display:flex;flex-direction:column;align-items:flex-start;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:rgba(10,10,10,.98);backdrop-filter:blur(20px);
  padding:1rem 1.5rem 2rem;gap:.5rem;z-index:999;
  border-top:1px solid rgba(255,255,255,.08);
}
.navbar-links.open a{width:100%;padding:.7rem 1rem}

/* ═══════════════════════════════════════════════
   HERO — fallback panel colours
═══════════════════════════════════════════════ */
.hero-panel-fallback-left  {background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)}
.hero-panel-fallback-right {background:linear-gradient(135deg,#2d1b4e 0%,#4a1942 50%,#8b2fc9 100%)}

/* ═══════════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════════ */
.marquee-track {
  overflow:hidden;background:var(--surface);padding:.9rem 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.marquee-inner {
  display:flex;white-space:nowrap;
  animation:marqueeAnim 30s linear infinite;
}
@keyframes marqueeAnim{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item {
  display:inline-block;padding:0 1.5rem;
  font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.3px;
}

/* ═══════════════════════════════════════════════
   SECTION HELPERS
═══════════════════════════════════════════════ */
.section-surface{background:var(--surface)}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:1rem;flex-wrap:wrap}

/* ═══════════════════════════════════════════════
   CATEGORY — image slide cycling
═══════════════════════════════════════════════ */
.cat-slide {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;
}
.cat-slide.active{opacity:1}
.cat-bg-default     {background:linear-gradient(135deg,#2d2d2d,#555);display:flex;align-items:center;justify-content:center}
.cat-bg-electronics {background:linear-gradient(135deg,#0f3460,#16213e);display:flex;align-items:center;justify-content:center}
.cat-bg-clothing    {background:linear-gradient(135deg,#4a1942,#8b2fc9);display:flex;align-items:center;justify-content:center}
.cat-bg-home        {background:linear-gradient(135deg,#1a535c,#4ecdc4);display:flex;align-items:center;justify-content:center}
.cat-bg-sports      {background:linear-gradient(135deg,#1d3557,#457b9d);display:flex;align-items:center;justify-content:center}
.cat-bg-books       {background:linear-gradient(135deg,#6b4226,#c9956c);display:flex;align-items:center;justify-content:center}
.cat-bg-beauty      {background:linear-gradient(135deg,#6d3b47,#e8a598);display:flex;align-items:center;justify-content:center}

/* ═══════════════════════════════════════════════
   PRODUCT CARD — scroll reveal
═══════════════════════════════════════════════ */
.product-card{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .6s ease, transform .6s ease, box-shadow .4s, transform .4s var(--spring);
}
.product-card.revealed{opacity:1;transform:translateY(0)}
.product-card.revealed:hover{transform:translateY(-10px);box-shadow:0 30px 70px rgba(0,0,0,.12)}

/* Stagger via nth-child inside reveal-grid */
.reveal-grid .product-card:nth-child(1){transition-delay:.04s}
.reveal-grid .product-card:nth-child(2){transition-delay:.09s}
.reveal-grid .product-card:nth-child(3){transition-delay:.14s}
.reveal-grid .product-card:nth-child(4){transition-delay:.19s}
.reveal-grid .product-card:nth-child(5){transition-delay:.24s}
.reveal-grid .product-card:nth-child(6){transition-delay:.29s}
.reveal-grid .product-card:nth-child(7){transition-delay:.34s}
.reveal-grid .product-card:nth-child(8){transition-delay:.39s}
.reveal-grid .product-card:nth-child(n+9){transition-delay:.44s}

/* Product reel cards — keep visible */
.product-reel .product-card{opacity:0;transform:none}
.product-reel .product-card.revealed{opacity:1}

/* ═══════════════════════════════════════════════
   SHOP LAYOUT — new cart / filter aliases
═══════════════════════════════════════════════ */
.shop-wrap{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start}

/* ═══════════════════════════════════════════════
   CART — redesigned
═══════════════════════════════════════════════ */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}

.cart-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem;display:flex;gap:1.1rem;align-items:flex-start;
  margin-bottom:.85rem;
  transition:box-shadow .25s, opacity .35s, transform .35s var(--ease);
}
.cart-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.07)}
.cart-card.removing{opacity:0;transform:translateX(30px)!important}

.cart-card-img{
  width:96px;height:96px;border-radius:var(--r);object-fit:cover;flex-shrink:0;
  background:var(--surface);
}
.cart-card-img-ph{
  width:96px;height:96px;border-radius:var(--r);flex-shrink:0;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  color:#ddd;font-size:2rem;
}
.cart-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.cart-card-name{
  font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3;
  text-decoration:none;
}
.cart-card-name:hover{color:var(--gold)}
.cart-card-meta{
  font-size:.78rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;
}
.cart-card-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;margin-top:.5rem;
}
.cart-qty-wrap{
  display:flex;align-items:center;gap:.25rem;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.15rem .35rem;
}
.cart-qty-wrap button{
  width:30px;height:30px;border-radius:50%;border:none;background:transparent;
  cursor:pointer;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background .15s;font-weight:600;
}
.cart-qty-wrap button:hover{background:var(--border)}
.cart-qty-input{
  width:36px;text-align:center;border:none;background:transparent;
  font-size:.875rem;font-weight:700;color:var(--ink);outline:none;
  -moz-appearance:textfield;
}
.cart-qty-input::-webkit-inner-spin-button,.cart-qty-input::-webkit-outer-spin-button{-webkit-appearance:none}
.cart-card-price{
  font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:900;color:var(--ink);
}
.cart-remove-btn{
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:.9rem;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cart-remove-btn:hover{color:var(--red);background:rgba(230,57,70,.08)}

/* Order summary */
.order-summary-box{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.75rem;position:sticky;top:calc(var(--nav-h)+1rem);
}
.order-summary-box h3{
  font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;
  color:var(--ink);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);
}
.order-line{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.6rem;color:var(--muted)}
.order-line.total{
  font-size:1.15rem;font-weight:700;color:var(--ink);
  border-top:2px solid var(--border);padding-top:.85rem;margin-top:.5rem;
}
.cart-free-ship{
  font-size:.78rem;color:var(--muted);
  background:var(--surface);border-radius:var(--r);border:1px solid var(--border);
  padding:.5rem .75rem;margin:.5rem 0 .85rem;
  display:flex;align-items:center;gap:.4rem;
}
.cart-trust-row{
  display:flex;gap:.5rem;margin-top:.85rem;
}
.cart-trust-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.65rem;border:1px solid var(--border);border-radius:var(--r);
  font-size:.75rem;font-weight:500;color:var(--muted);
}
.cart-trust-item i{color:var(--gold)}

/* Empty cart */
.cart-empty{
  text-align:center;padding:6rem 2rem;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  max-width:480px;margin:0 auto;
}
.cart-empty-icon{
  width:100px;height:100px;border-radius:50%;
  background:var(--surface);margin:0 auto 1.5rem;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:#ccc;
  animation:successPop .5s var(--spring);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — additions
═══════════════════════════════════════════════ */
@media(max-width:1100px){
  .cart-layout{grid-template-columns:1fr}
  .shop-wrap{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-mobile-toggle{display:block}
  .navbar-search{max-width:none;flex:1;margin:0 .5rem}
  .cart-card{gap:.75rem}
  .cart-card-img,.cart-card-img-ph{width:72px;height:72px}
  .cart-card-price{font-size:.95rem}
  .order-summary-box{position:static}
}

/* ═══════════════════════════════════════════════
   Payment method selector
═══════════════════════════════════════════════ */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.75rem;margin-bottom:1.25rem}
.pay-opt{position:relative;cursor:pointer;display:block}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt-inner{
  border:2px solid var(--border);border-radius:var(--radius);padding:1rem .9rem;
  text-align:center;background:#fff;transition:all .15s;height:100%;
}
.pay-opt-inner i{font-size:1.75rem;color:var(--ink);margin-bottom:.4rem;display:block}
.pay-opt-label{font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.15rem}
.pay-opt-sub{font-size:.72rem;color:var(--muted)}
.pay-opt:hover .pay-opt-inner{border-color:var(--primary)}
.pay-opt input:checked + .pay-opt-inner,
.pay-opt.active .pay-opt-inner{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
  background:color-mix(in srgb, var(--primary) 5%, #fff);
}
.pay-details{margin-top:.25rem}
.pay-panel{background:var(--surface);border-radius:var(--radius);padding:1.25rem}

/* ═══════════════════════════════════════════════
   Demo disclaimer modal
═══════════════════════════════════════════════ */
.demo-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.demo-modal[hidden]{display:none}
.demo-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}
.demo-modal-card{
  position:relative;background:#fff;border-radius:calc(var(--radius) + 4px);
  max-width:540px;width:100%;padding:2.25rem 1.85rem 1.75rem;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.35);
  animation:demoIn .22s ease;
  max-height:calc(100vh - 2rem);overflow-y:auto;
}
@keyframes demoIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.demo-modal-close{
  position:absolute;top:.85rem;right:.85rem;background:var(--surface);border:0;
  width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
.demo-modal-close:hover{background:var(--border);color:var(--ink)}
.demo-modal-icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 1rem;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:#92400e;
}
.demo-modal-title{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:800;text-align:center;color:var(--ink);margin-bottom:.6rem}
.demo-modal-body{text-align:center;color:var(--muted);font-size:.925rem;line-height:1.55;margin-bottom:1.35rem}
.demo-contact{display:flex;flex-direction:column;gap:1rem;background:var(--surface);border-radius:var(--radius);padding:1.15rem}
.demo-contact-group{display:flex;flex-direction:column;gap:.45rem}
.demo-contact-head{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.5rem;font-size:.92rem}
.demo-contact-head i{color:var(--primary)}
.demo-contact-row{display:flex;flex-wrap:wrap;gap:.75rem .95rem;font-size:.875rem}
.demo-contact-row a{color:var(--ink);display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;font-weight:500}
.demo-contact-row a:hover{color:var(--primary)}
.demo-contact-row a i{font-size:.85rem;color:var(--muted)}
.demo-contact-row a:hover i{color:var(--primary)}
.demo-modal-actions{display:flex;gap:.65rem;margin-top:1.35rem;justify-content:center;flex-wrap:wrap}
.demo-modal-actions .btn{flex:1;min-width:140px}

/* ═══════════════════════════════════════════════
   Checkout auth gate
═══════════════════════════════════════════════ */
.gate-card{background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:2.25rem 1.85rem;box-shadow:0 10px 30px -15px rgba(0,0,0,.1)}
.gate-head{text-align:center;margin-bottom:1.75rem}
.gate-icon{
  width:58px;height:58px;border-radius:50%;margin:0 auto .85rem;
  background:linear-gradient(135deg,var(--primary),#b08838);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--primary) 60%, transparent);
}
.gate-title{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:800;color:var(--ink);margin-bottom:.35rem}
.gate-sub{color:var(--muted);font-size:.9rem;line-height:1.55;max-width:420px;margin:0 auto}
.gate-alert{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.gate-step-note{
  background:var(--surface);border-radius:var(--radius);padding:.75rem 1rem;
  font-size:.875rem;color:var(--ink);margin-bottom:1rem;display:flex;align-items:center;gap:.55rem
}
.gate-email-row{display:flex;gap:.5rem}
.gate-email-row .form-control{flex:1}
.gate-footer{text-align:center;font-size:.78rem;color:var(--muted);margin-top:1.5rem;display:flex;align-items:center;justify-content:center;gap:.35rem}

/* ═══════════════════════════════════════════════
   Password input + strength meter
═══════════════════════════════════════════════ */
.pw-wrap{position:relative;display:flex;align-items:stretch;gap:0}
.pw-wrap .form-control{flex:1;padding-right:5.25rem}
.pw-toggle,.pw-copy{
  position:absolute;top:0;bottom:0;background:transparent;border:0;cursor:pointer;
  color:var(--muted);width:2.4rem;display:flex;align-items:center;justify-content:center;
}
.pw-toggle{right:2.4rem}
.pw-copy{right:.1rem}
.pw-toggle:hover,.pw-copy:hover{color:var(--ink)}
.pw-generate{
  background:transparent;border:0;cursor:pointer;color:var(--primary);font-size:.78rem;
  font-weight:600;margin-left:.5rem;display:inline-flex;align-items:center;gap:.3rem
}
.pw-generate:hover{text-decoration:underline}
.pw-meter{margin-top:.6rem}
.pw-meter-bar{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-bottom:.35rem}
.pw-meter-bar span{display:block;height:100%;width:0%;background:#e5e7eb;transition:width .25s,background .25s;border-radius:999px}
.pw-meter-label{font-size:.75rem;color:var(--muted);font-weight:600}
.pw-hints{list-style:none;padding:0;margin:.65rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem .75rem}
.pw-hints li{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.pw-hints li i{font-size:.55rem}
.pw-hints li.ok{color:#166534}
.pw-hints li.ok i{color:#16a34a;font-size:.8rem}
.pw-toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:999px;
  font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:.5rem;
  z-index:1100;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);
  animation:toastIn .2s ease;
}
.pw-toast[hidden]{display:none}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

@media(max-width:520px){
  .pay-grid{grid-template-columns:repeat(2,1fr)}
  .demo-modal-card{padding:1.75rem 1.25rem 1.35rem}
  .demo-contact-row{gap:.5rem .7rem}
}