*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#0f2d1f;
  --navy2:#163e2b;
  --navy3:#1b4d36;
  --gold:#c5a880;
  --gold2:#d9c2a3;
  --gold3:#e6dfd5;
  --gold4:#FAF9F6;
  --white:#FFFFFF;
  --cream:#FAF9F6;
  --cream2:#e8ece9;
  --cream3:#e6e2da;
  --text:#111111;
  --textmid:#444444;
  --textlight:#8c867a;
  --border:#e6e2da;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',sans-serif;
  --shadow:0 2px 20px rgba(15,45,31,0.06);
  --shadow2:0 8px 40px rgba(15,45,31,0.12);
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:#eff1f4;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--sans);border:none;outline:none}
ul{list-style:none}

/* ════════════════════════════════════
   ANNOUNCE BAR
════════════════════════════════════ */
.announce{
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy3) 50%,var(--navy) 100%);
  padding:.5rem 0;overflow:hidden;position:relative;
}
.announce-track{
  display:flex;gap:4rem;white-space:nowrap;
  animation:ticker 28s linear infinite;
}
.announce-item{
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.75);display:inline-flex;align-items:center;gap:.8rem;
}
.announce-item b{color:var(--gold2)}
.announce-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6;display:inline-block}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ════════════════════════════════════
   STICKY HEADER
════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--white);
  box-shadow:0 1px 0 var(--border);
}

/* Top utility row */
.header-top{
  background:var(--cream2);
  padding:.3rem 5vw;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border);
  font-size:.7rem;color:var(--textmid);letter-spacing:.05em;
}
.header-top-left{display:flex;gap:1.5rem}
.header-top-left a{color:var(--textmid);transition:color .2s}
.header-top-left a:hover{color:var(--gold)}
.header-top-right{display:flex;gap:1.2rem}
.header-top-right a{color:var(--textmid);transition:color .2s}
.header-top-right a:hover{color:var(--gold)}

/* Main nav row */
.header-main{
  padding:.9rem 5vw;
  display:flex;align-items:center;gap:2rem;
}
.header-logo{
  font-family:var(--serif);font-size:1.75rem;font-weight:700;color:var(--navy);
  white-space:nowrap;letter-spacing:.02em;flex-shrink:0;
}
.header-logo em{color:var(--gold);font-style:normal}

/* Search */
.header-search{
  flex:1;max-width:520px;
  display:flex;border:1.5px solid var(--border);border-radius:6px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.header-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,81,.12)}
.header-search select{
  border:none;outline:none;background:var(--cream2);
  padding:.65rem .9rem;font-family:var(--sans);font-size:.78rem;
  color:var(--textmid);border-right:1px solid var(--border);cursor:pointer;
}
.header-search input{
  flex:1;border:none;outline:none;padding:.65rem 1rem;
  font-family:var(--sans);font-size:.85rem;color:var(--text);background:var(--white);
}
.header-search input::placeholder{color:var(--textlight)}
.search-btn{
  background:var(--gold);border:none;padding:.65rem 1.2rem;
  color:var(--navy);font-size:1rem;transition:background .2s;
}
.search-btn:hover{background:var(--gold2)}

/* Nav icons */
.header-icons{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.hicon{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  background:none;border:none;color:var(--textmid);
  font-size:.6rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:.4rem .65rem;border-radius:6px;transition:all .2s;position:relative;
}
.hicon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.hicon:hover{color:var(--gold);background:var(--gold4)}
.hicon-badge{
  position:absolute;top:2px;right:4px;
  background:var(--gold);color:var(--navy);
  font-size:.55rem;font-weight:700;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.hicon-cart{background:var(--navy);color:var(--gold2)}
.hicon-cart:hover{background:var(--navy2);color:var(--gold2)}
.hicon-cart .hicon-badge{background:var(--gold);color:var(--navy)}

/* ════════════════════════════════════
   MEGA MENU NAV
════════════════════════════════════ */
.mega-nav{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
}
.mega-nav-inner{
  display:flex;align-items:center;padding:0 5vw;
}
.mnav-item{position:relative}
.mnav-link{
  display:flex;align-items:center;gap:.35rem;
  padding:.8rem 1.2rem;
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);border-bottom:3px solid transparent;
  transition:all .2s;cursor:pointer;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;
}
.mnav-link:hover,.mnav-item.active .mnav-link{color:var(--gold2);border-bottom-color:var(--gold)}
.mnav-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .2s}
.mnav-item:hover .mnav-link svg{transform:rotate(180deg)}
.mnav-sep{width:1px;height:18px;background:rgba(255,255,255,.1);margin:0 .2rem;flex-shrink:0}
.mnav-highlight{
  margin-left:auto;
  background:var(--gold);color:var(--navy);
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:.5rem 1.4rem;border-radius:2px;transition:background .2s;
}
.mnav-highlight:hover{background:var(--gold2)}

/* Dropdown mega panel */
.mega-drop{
  position:absolute;top:100%;left:0;z-index:300;
  background:var(--white);border:1px solid var(--border);
  box-shadow:var(--shadow2);
  min-width:680px;
  display:none;
  padding:1.8rem;
  gap:1.5rem;
}
.mega-drop.wide{min-width:820px}
.mnav-item:hover .mega-drop{display:grid}
.mega-drop-2col{grid-template-columns:1fr 1fr}
.mega-drop-3col{grid-template-columns:1fr 1fr 1fr}
.mega-drop-col h4{
  font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.mega-drop-col ul{display:flex;flex-direction:column;gap:.4rem}
.mega-drop-col ul a{
  font-size:.82rem;color:var(--textmid);padding:.3rem .5rem;
  border-radius:4px;transition:all .2s;display:flex;align-items:center;gap:.5rem;
}
.mega-drop-col ul a:hover{background:var(--cream2);color:var(--navy);padding-left:.9rem}
.mega-drop-col ul a span{font-size:.65rem;background:var(--gold4);color:var(--gold);padding:.1rem .45rem;border-radius:2px;font-weight:600}
.mega-promo{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
  border-radius:4px;padding:1.5rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.mega-promo-badge{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.mega-promo-title{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--white);line-height:1.25}
.mega-promo-price{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--gold2)}
.mega-promo-price s{font-size:.9rem;color:rgba(255,255,255,.35);font-weight:300}
.mega-promo-btn{
  display:inline-block;background:var(--gold);color:var(--navy);
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem 1.1rem;border-radius:2px;margin-top:.3rem;transition:background .2s;
  align-self:flex-start;
}
.mega-promo-btn:hover{background:var(--gold2)}

/* ════════════════════════════════════
   HERO — FULL VIEWPORT
════════════════════════════════════ */
.hero{
  position:relative;height:92vh;min-height:600px;
  background:var(--navy);
  display:flex;align-items:center;overflow:hidden;
}
/* Geometric background */
.hero-bg{position:absolute;inset:0}
.hero-bg-gradient{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 70% 50%,rgba(15,45,31,.8) 0%,transparent 60%),
    radial-gradient(ellipse 60% 90% at 15% 80%,rgba(197,168,128,.07) 0%,transparent 50%),
    linear-gradient(150deg,#07140e 0%,#0f2d1f 40%,#1b4d36 100%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(200,169,81,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,169,81,.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-circles{position:absolute;inset:0;overflow:hidden}
.hero-circle{
  position:absolute;border-radius:50%;
  border:1px solid rgba(200,169,81,.08);
}
.hc1{width:700px;height:700px;right:-150px;top:50%;transform:translateY(-50%)}
.hc2{width:500px;height:500px;right:-50px;top:50%;transform:translateY(-50%)}
.hc3{width:300px;height:300px;right:50px;top:50%;transform:translateY(-50%)}
.hero-particles{position:absolute;inset:0;overflow:hidden}
.particle{
  position:absolute;width:2px;height:2px;background:var(--gold);border-radius:50%;
  opacity:0;animation:float-up 6s ease-in infinite;
}
@keyframes float-up{
  0%{opacity:0;transform:translateY(0) scale(1)}
  20%{opacity:.6}
  80%{opacity:.2}
  100%{opacity:0;transform:translateY(-120px) scale(0)}
}

/* Hero content */
.hero-inner{
  position:relative;z-index:2;
  width:100%;padding:0 5vw;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:4rem;
}
.hero-left{animation:fadeSlideUp .9s ease both}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  background:rgba(200,169,81,.12);border:1px solid rgba(200,169,81,.25);
  color:var(--gold2);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem 1rem;border-radius:2px;margin-bottom:1.6rem;
}
.hero-eyebrow::before{content:'';width:20px;height:1px;background:var(--gold)}
.hero-h1{
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.5vw,6rem);
  font-weight:700;line-height:1.05;
  color:var(--white);margin-bottom:1.2rem;
}
.hero-h1 em{
  display:block;font-style:italic;
  color:transparent;
  -webkit-text-stroke:1.5px var(--gold2);
}
.hero-desc{
  font-size:1rem;font-weight:300;line-height:1.85;
  color:rgba(255,255,255,.58);max-width:440px;margin-bottom:2rem;
}
.hero-stats{
  display:flex;gap:2rem;margin-bottom:2.4rem;
  padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.hstat-num{
  font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--gold2);line-height:1;
}
.hstat-label{font-size:.72rem;color:rgba(255,255,255,.45);letter-spacing:.08em;margin-top:.2rem;text-transform:uppercase}
.hero-ctas{display:flex;align-items:center;gap:1.2rem}
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--gold);color:var(--navy);
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 2.2rem;border-radius:3px;
  transition:all .3s;box-shadow:0 4px 20px rgba(200,169,81,.3);
}
.btn-hero-primary:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(200,169,81,.4)}
.btn-hero-primary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}
.btn-hero-ghost{
  display:inline-flex;align-items:center;gap:.6rem;
  color:rgba(255,255,255,.7);font-size:.82rem;font-weight:400;
  letter-spacing:.1em;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.25);
  transition:all .3s;
}
.btn-hero-ghost:hover{color:var(--gold2);border-color:var(--gold)}

/* Hero right — product showcase */
.hero-right{
  display:flex;flex-direction:column;gap:1.2rem;
  animation:fadeSlideUp .9s ease .2s both;
}
.hero-prod-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(200,169,81,.15);
  border-radius:8px;padding:1.5rem;
  display:flex;align-items:center;gap:1.5rem;
  transition:all .3s;cursor:pointer;backdrop-filter:blur(4px);
}
.hero-prod-card:hover{
  background:rgba(200,169,81,.08);border-color:rgba(200,169,81,.35);
  transform:translateX(6px);
}
.hero-prod-icon{
  width:70px;height:70px;border-radius:50%;
  background:rgba(200,169,81,.1);border:1px solid rgba(200,169,81,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;flex-shrink:0;
}
.hero-prod-info{flex:1}
.hero-prod-cat{font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.hero-prod-name{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--white);margin-bottom:.25rem}
.hero-prod-desc{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.6}
.hero-prod-right{text-align:right;flex-shrink:0}
.hero-prod-price{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--gold2)}
.hero-prod-old{font-size:.75rem;color:rgba(255,255,255,.3);text-decoration:line-through;margin-bottom:.5rem}
.hero-prod-btn{
  display:inline-block;background:var(--gold);color:var(--navy);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem .9rem;border-radius:2px;transition:background .2s;
}
.hero-prod-btn:hover{background:var(--gold2)}
/* Scroll indicator */
.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.3);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;z-index:2;
}
.scroll-mouse{
  width:22px;height:36px;border:1.5px solid rgba(255,255,255,.2);border-radius:12px;
  display:flex;justify-content:center;padding-top:6px;
}
.scroll-dot{width:3px;height:8px;background:var(--gold);border-radius:2px;animation:scroll-anim 2s ease-in-out infinite}
@keyframes scroll-anim{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(8px);opacity:.3}}

/* ════════════════════════════════════
   TRUST BAR
════════════════════════════════════ */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--lgray);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tc {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 1.5rem;
  border-right: 1px solid var(--lgray);
}
.tc:last-child {
  border-right: none;
}
.tc-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--gold);
}
.tc-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.tc-label {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.tc-sub {
  font-family: var(--sans);
  font-size: .68rem;
  color: var(--gray);
  margin-top: .1rem;
}

/* ════════════════════════════════════
   SECTION UTILITIES
════════════════════════════════════ */
.section{padding:4.5rem 5vw}
.sec-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;
}
.sec-tag::before{content:'';width:24px;height:1.5px;background:var(--gold)}
.sec-title{
  font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:.5rem;
}
.sec-title em{font-style:italic;color:var(--gold)}
.sec-sub{font-size:.9rem;color:var(--textmid);line-height:1.7;max-width:480px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.sec-head-left{}
.view-all{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:500;color:var(--gold);
  border:1.5px solid var(--gold);padding:.5rem 1.3rem;border-radius:3px;
  transition:all .2s;white-space:nowrap;
}
.view-all svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.view-all:hover{background:var(--gold);color:var(--navy)}

/* ════════════════════════════════════
   CATEGORY GRID
════════════════════════════════════ */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.cat-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:8px;padding:1.6rem 1rem;text-align:center;
  cursor:pointer;transition:all .25s;
}
.cat-card:hover{border-color:var(--gold);box-shadow:0 6px 24px rgba(200,169,81,.15);transform:translateY(-4px)}
.cat-card-emoji{font-size:2.4rem;margin-bottom:.9rem;display:block}
.cat-card-name{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:.25rem}
.cat-card-count{font-size:.7rem;color:var(--textlight)}

/* ════════════════════════════════════
   FILTER + PRODUCT GRID
════════════════════════════════════ */
.filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.filter-pills{display:flex;gap:.6rem;flex-wrap:wrap}
.fpill{
  padding:.45rem 1.2rem;border-radius:20px;
  font-size:.75rem;font-weight:500;letter-spacing:.04em;
  border:1.5px solid var(--border);color:var(--textmid);background:var(--white);
  cursor:pointer;transition:all .2s;
}
.fpill.active,.fpill:hover{background:var(--navy);color:var(--gold2);border-color:var(--navy)}
.sort-row{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--textmid)}
.sort-row select{
  border:1px solid var(--border);background:var(--white);
  padding:.4rem .8rem;border-radius:4px;font-family:var(--sans);font-size:.78rem;
  color:var(--text);outline:none;cursor:pointer;
}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.prod-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
  transition:box-shadow .25s,transform .25s;
  position:relative;
}
.prod-card:hover{box-shadow:var(--shadow2);transform:translateY(-5px)}
.prod-img{
  position:relative;background:var(--cream2);
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.prod-emoji{font-size:5.5rem;transition:transform .4s}
.prod-card:hover .prod-emoji{transform:scale(1.12) rotate(-3deg)}
.prod-badge{
  position:absolute;top:.75rem;left:.75rem;
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .7rem;border-radius:2px;
}
.badge-best{background:var(--navy);color:var(--gold2)}
.badge-new{background:#1a4d2e;color:#6ee89a}
.badge-sale{background:#8B2A2A;color:#F5A0A0}
.badge-bundle{background:#3A1A6E;color:#C8A8F8}
.prod-wish{
  position:absolute;top:.75rem;right:.75rem;
  width:32px;height:32px;background:var(--white);border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;transition:all .25s;opacity:0;
  color:var(--textlight);
}
.prod-card:hover .prod-wish{opacity:1}
.prod-wish:hover{background:var(--gold4);border-color:var(--gold);color:var(--gold)}
.prod-body{padding:1.1rem}
.prod-cat{font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.prod-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:.3rem;line-height:1.3}
.prod-desc{font-size:.75rem;color:var(--textmid);line-height:1.6;margin-bottom:.7rem}
.prod-stars{display:flex;align-items:center;gap:.35rem;margin-bottom:.7rem}
.stars-gold{color:var(--gold);font-size:.78rem}
.stars-count{font-size:.7rem;color:var(--textlight)}
.prod-price-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.prod-price{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--navy)}
.prod-old{font-size:.8rem;color:var(--textlight);text-decoration:line-through}
.prod-save{font-size:.68rem;font-weight:600;color:#1a7a40;background:#d4f5e4;padding:.15rem .5rem;border-radius:2px}
.prod-sizes{display:flex;gap:.4rem;margin-bottom:.9rem}
.prod-size{
  font-size:.67rem;font-weight:500;
  padding:.25rem .6rem;border-radius:3px;
  border:1px solid var(--border);color:var(--textmid);cursor:pointer;transition:all .2s;
}
.prod-size:hover,.prod-size.active{border-color:var(--navy);background:var(--navy);color:var(--gold2)}
.btn-addcart{
  width:100%;background:var(--navy);color:var(--gold2);
  border:none;padding:.8rem;border-radius:5px;
  font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:all .25s;
}
.btn-addcart:hover{background:var(--gold);color:var(--navy)}
.btn-addcart svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ════════════════════════════════════
   FLASH DEAL BANNER
════════════════════════════════════ */
.flash-deal{
  background:var(--navy);
  margin:0 5vw;border-radius:12px;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:2.5rem;padding:2.5rem 3rem;
  position:relative;overflow:hidden;
}
.flash-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 90% at 80% 50%,rgba(200,169,81,.12),transparent 60%),
  radial-gradient(ellipse 40% 60% at 10% 80%,rgba(26,49,96,.5),transparent 50%);
}
.flash-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(200,169,81,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,169,81,.03) 1px,transparent 1px);
  background-size:25px 25px;
}
.flash-icon{font-size:3.5rem;position:relative;z-index:1;animation:flicker 2.5s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.7}}
.flash-content{position:relative;z-index:1}
.flash-tag{font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.flash-title{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:700;color:var(--white);line-height:1.2;margin-bottom:.4rem}
.flash-title em{color:var(--gold2);font-style:italic}
.flash-sub{font-size:.85rem;color:rgba(255,255,255,.5)}
.flash-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.2rem;position:relative;z-index:1}
.countdown{display:flex;align-items:center;gap:.4rem}
.cd-box{background:rgba(255,255,255,.06);border:1px solid rgba(200,169,81,.2);border-radius:4px;padding:.6rem .9rem;text-align:center;min-width:56px}
.cd-num{font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--gold2);line-height:1}
.cd-lbl{font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:.2rem}
.cd-sep{font-family:var(--serif);font-size:1.5rem;color:var(--gold);opacity:.6;padding-bottom:.3rem}
.btn-flash{
  background:var(--gold);color:var(--navy);border:none;
  padding:.85rem 2.2rem;border-radius:4px;
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:all .25s;white-space:nowrap;
}
.btn-flash:hover{background:var(--gold2);transform:translateY(-2px)}

/* ════════════════════════════════════
   WHY US
════════════════════════════════════ */
.why-section{background:var(--navy);padding:5rem 5vw;position:relative;overflow:hidden}
.why-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(200,169,81,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,81,.03) 1px,transparent 1px);background-size:40px 40px}
.why-inner{position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.why-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(200,169,81,.12);
  border-radius:10px;padding:2rem 1.5rem;
  transition:all .3s;
}
.why-card:hover{background:rgba(200,169,81,.07);border-color:rgba(200,169,81,.3);transform:translateY(-4px)}
.why-icon{font-size:2rem;margin-bottom:1rem}
.why-num{font-family:var(--serif);font-size:.85rem;color:var(--gold);font-weight:600;margin-bottom:.6rem}
.why-title{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--white);margin-bottom:.6rem}
.why-text{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.75}

/* ════════════════════════════════════
   REVIEWS
════════════════════════════════════ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.review-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:1.6rem;transition:box-shadow .25s;
}
.review-card:hover{box-shadow:var(--shadow2)}
.rv-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.rv-stars{color:var(--gold);font-size:.9rem;letter-spacing:-.05em}
.rv-date{font-size:.68rem;color:var(--textlight)}
.rv-text{font-size:.85rem;line-height:1.8;color:var(--textmid);margin-bottom:1.2rem;font-style:italic}
.rv-product{
  font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:var(--gold4);padding:.25rem .7rem;border-radius:2px;
  display:inline-block;margin-bottom:1rem;
}
.rv-author{display:flex;align-items:center;gap:.8rem}
.rv-avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--navy);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:.9rem;font-weight:700;color:var(--gold2);flex-shrink:0;
}
.rv-name{font-size:.82rem;font-weight:600;color:var(--navy)}
.rv-loc{font-size:.7rem;color:var(--textlight)}
.rv-verified{font-size:.65rem;color:#1a7a40;font-weight:500;margin-top:.1rem}

/* ════════════════════════════════════
   NEWSLETTER
════════════════════════════════════ */
.newsletter{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
  padding:5rem 5vw;position:relative;overflow:hidden;
}
.nl-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(200,169,81,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,81,.04) 1px,transparent 1px);background-size:30px 30px}
.nl-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.nl-tag{font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.nl-title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;color:var(--white);line-height:1.2;margin-bottom:.7rem}
.nl-title em{color:var(--gold2);font-style:italic}
.nl-sub{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.7}
.nl-perks{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem}
.nl-perk{font-size:.8rem;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:.5rem}
.nl-perk::before{content:'✓';color:var(--gold);font-weight:700}
.nl-form{display:flex;flex-direction:column;gap:.8rem}
.nl-form-row{display:flex;border-radius:6px;overflow:hidden;border:1.5px solid rgba(200,169,81,.25);transition:border-color .2s}
.nl-form-row:focus-within{border-color:var(--gold)}
.nl-input{
  flex:1;background:rgba(255,255,255,.06);border:none;outline:none;
  padding:.85rem 1.2rem;font-family:var(--sans);font-size:.85rem;
  color:var(--white);
}
.nl-input::placeholder{color:rgba(255,255,255,.3)}
.nl-submit{
  background:var(--gold);color:var(--navy);border:none;
  padding:.85rem 1.6rem;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.nl-submit:hover{background:var(--gold2)}
.nl-note{font-size:.7rem;color:rgba(255,255,255,.3)}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer{background:#060F1E;padding:4rem 5vw 2rem}
.footer-top{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:3rem;margin-bottom:3rem;padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-logo{
  font-family:var(--serif);font-size:1.6rem;font-weight:700;
  color:var(--white);margin-bottom:.9rem;letter-spacing:.02em;
}
.footer-logo em{color:var(--gold);font-style:normal}
.footer-about{font-size:.8rem;color:rgba(255,255,255,.35);line-height:1.75;max-width:220px;margin-bottom:1.2rem}
.footer-social{display:flex;gap:.6rem}
.social-btn{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:rgba(255,255,255,.4);cursor:pointer;transition:all .2s;
}
.social-btn:hover{border-color:var(--gold);color:var(--gold)}
.footer-col h4{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col ul a{font-size:.8rem;color:rgba(255,255,255,.4);transition:color .2s}
.footer-col ul a:hover{color:var(--gold2)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.footer-copy{font-size:.72rem;color:rgba(255,255,255,.2)}
.footer-pay{display:flex;gap:.5rem}
.pay-tag{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:3px;padding:.3rem .7rem;font-size:.65rem;
  color:rgba(255,255,255,.35);letter-spacing:.05em;text-transform:uppercase;
}

/* Dynamic Image Handling */
.prod-img-tag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

/* ── HERO SLIDER (FULL WIDTH) ── */
.hero-slider {
  position: relative;
  height: 85vh;
  min-height: 550px;
  background: var(--navy);
  overflow: hidden;
  z-index: 10;
}
.hero-slide {
  position: relative;
  height: 85vh;
  min-height: 550px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
}
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,14,28,0.5) 0%, rgba(10,22,40,0.75) 100%);
  z-index: 1;
}
.slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  animation: fadeSlideUp 0.9s ease both;
}
.slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: rgba(200,169,81,.12);
  border: 1px solid rgba(200,169,81,.25);
  color: var(--gold2);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .4rem 1.2rem;
  border-radius: 2px;
  margin-bottom: 1.6rem;
}
.slide-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.slide-title em {
  font-style: italic;
  color: var(--gold2);
}
.slide-desc {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,.7);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
.slide-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

/* Slider custom Owl dots */
.hero-slider .owl-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 30;
}
.hero-slider .owl-dot span {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: block;
  transition: all 0.3s ease;
}
.hero-slider .owl-dot.active span {
  background: var(--gold2);
  border-color: var(--gold);
  transform: scale(1.2);
}

/* Scoped Redesigned Header Styles */
.site-header {
  --navy: #0f2d1f;
  --gold: #c5a880;
  --gold2: #d9c2a3;
  --white: #ffffff;
  --bg: #FAF9F6;
  --border: #e6e2da;
  --gray: #666666;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', sans-serif;
  
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  box-shadow: 0 1px 0 var(--border);
}

.announce {
  background: var(--navy);
  text-align: center;
  padding: .5rem 1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  z-index: 210;
  position: relative;
}
.announce b {
  color: #E8B86D;
}

.header-row1 {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 4vw;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.logo {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.logo em {
  color: var(--gold);
  font-style: italic;
  margin-left: 0.2rem;
}

.search-wrap {
  flex: 1;
  display: flex;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  background: var(--bg);
}
.search-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.13);
  background: var(--white);
}
.search-cat {
  flex-shrink: 0;
  background: var(--bg);
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  padding: 0 .9rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: .65rem 1rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--navy);
}
.search-input::placeholder {
  color: var(--gray);
}
.search-btn {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--white);
  border: none;
  padding: 0 1.4rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  transition: background .2s;
}
.search-btn:hover {
  background: var(--gold2);
}
.search-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.btn-login, .btn-wish, .btn-cart {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem 1.1rem;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  transition: all .2s;
  white-space: nowrap;
}
.btn-login svg, .btn-wish svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.btn-login:hover {
  background: var(--navy);
  color: var(--gold2);
  border-color: var(--navy);
}
.btn-login:hover svg {
  stroke: var(--gold2);
}

.btn-wish {
  position: relative;
}
.btn-wish:hover {
  border-color: #FCA5A5;
  background: #FFF1F2;
  color: #DC2626;
}
.btn-wish:hover svg {
  stroke: #DC2626;
}
.wish-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-size: .5rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}

.btn-cart {
  padding: .55rem 1.3rem;
  background: var(--navy);
  color: var(--white);
  font-size: .8rem;
  font-weight: 600;
  border: 2px solid var(--navy);
  transition: all .2s;
}
.btn-cart svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.btn-cart:hover {
  background: transparent;
  color: var(--navy);
}
.btn-cart:hover .cart-pill {
  background: var(--gold);
  color: var(--white);
}
.cart-pill {
  background: var(--gold);
  color: var(--white);
  font-size: .6rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  transition: all .2s;
}

.header-row2 {
  background: var(--navy);
}
.nav-inner {
  padding: 0 4vw;
  display: flex;
  align-items: center;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .75rem 1.05rem;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--gold2);
  border-bottom-color: var(--gold);
}
.nav-link svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  transition: transform .2s;
}
.nav-item:hover .nav-link svg {
  transform: rotate(180deg);
}

.drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  box-shadow: 0 16px 40px rgba(13,30,58,.13);
  min-width: 210px;
  padding: .6rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .22s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.nav-item:hover .drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}
.dl {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .58rem 1.2rem;
  font-size: .81rem;
  color: var(--gray);
  transition: all .15s;
}
.dl:hover {
  background: var(--bg);
  color: var(--navy);
  padding-left: 1.5rem;
}
.dsep {
  height: 1px;
  background: var(--border);
  margin: .4rem .8rem;
}
.dall {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .58rem 1.2rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255,255,255,.1);
}
.nav-tel {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .05em;
}
.nav-shopall {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: .48rem 1.2rem;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
  text-align: center;
  display: inline-block;
}
.nav-shopall:hover {
  background: var(--gold2);
}




/* ==========================================================================
   AAMA ORIGINS HOME REDESIGN STYLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --ink: #111111;
  --ink2: #0f2d1f;
  --ink3: #1b4d36;
  --gold: #c5a880;
  --gold2: #d9c2a3;
  --gold3: #e6dfd5;
  --gold4: #FAF9F6;
  --white: #FFFFFF;
  --offwhite: #FAF9F6;
  --mist: #e8ece9;
  --stone: #e6e2da;
  --gray: #666666;
  --lgray: #e6e2da;
  --green: #0f2d1f;
  --greenlt: #e8ece9;
  --red: #9e2a2b;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', sans-serif;
}

/* Redesigned Section Headings */
.sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.sh-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}
.sh-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.sh-title em {
  font-style: italic;
}
.see-all {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: .08rem;
  letter-spacing: .04em;
  transition: opacity .2s;
  text-decoration: none;
}
.see-all:hover {
  opacity: .65;
}

/* Category Horizontal Scroll - Premium Cards */
.cat-scroll {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  padding: .5rem .2rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--lgray);
}
.cat-scroll::-webkit-scrollbar {
  height: 5px;
}
.cat-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 2px;
}
.cat-card-premium {
  flex-shrink: 0;
  width: 165px;
  height: 220px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(10,28,53,.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.cat-card-premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(198,153,58,0.22);
}
.cc-img-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.cc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cat-card-premium:hover .cc-img {
  transform: scale(1.1);
}
.cc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,28,53,0.15) 0%, rgba(10,28,53,0.85) 100%);
}
.cc-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.2rem 1rem;
  z-index: 2;
  text-align: left;
}
.cc-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.15rem;
}
.cc-meta {
  font-size: 0.68rem;
  color: var(--gold2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Filter pills (products section) */
.pf-row {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.pf-btn {
  padding: .45rem 1.1rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 500;
  border: 1.5px solid var(--lgray);
  color: var(--gray);
  background: var(--white);
  cursor: pointer;
  transition: all .2s;
  font-family: var(--sans);
}
.pf-btn.active, .pf-btn:hover {
  background: var(--ink);
  color: var(--gold2);
  border-color: var(--ink);
}

/* Product Cards and Grid */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.pc {
  background: var(--white);
  border: 1px solid var(--lgray);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pc:hover {
  box-shadow: 0 8px 32px rgba(10,28,53,.12);
  transform: translateY(-4px);
}
.pc-img {
  position: relative;
  background: var(--offwhite);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid var(--lgray);
}
.pc-img-tag {
  width: 90%;
  height: 90%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.pc:hover .pc-img-tag {
  transform: scale(1.05);
}
.pc-tags {
  position: absolute;
  top: .65rem;
  left: .65rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  z-index: 10;
}
.pct {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 3px;
  width: fit-content;
}
.t-bs {
  background: var(--gold);
  color: var(--ink);
}
.t-nat {
  background: var(--ink);
  color: var(--gold2);
}
.t-new {
  background: var(--green);
  color: #fff;
}
.t-sale {
  background: var(--red);
  color: #fff;
}
.wl {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 30px;
  height: 30px;
  background: var(--white);
  border: 1px solid var(--lgray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  opacity: 0;
  transition: all .25s;
  cursor: pointer;
  z-index: 10;
  color: var(--gray);
}
.pc:hover .wl {
  opacity: 1;
}
.wl:hover {
  background: var(--gold4);
  border-color: var(--gold);
  color: var(--gold);
}
.wt-row-inline {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.wt-row-inline .wtp {
  background: var(--offwhite);
  border: 1px solid var(--lgray);
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wt-row-inline .wtp:hover, .wt-row-inline .wtp.active {
  background: var(--ink);
  color: var(--gold2);
  border-color: var(--ink);
}
.pc-body {
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pc-cat {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .35rem;
}
.pc-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: .3rem;
  cursor: pointer;
}
.pc-desc {
  font-size: .78rem;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: .65rem;
}
.pc-stars {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .7rem;
}
.pstars {
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.pc-rn {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink);
}
.pc-rc {
  font-size: .7rem;
  color: var(--gray);
}
.pc-pr {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
  margin-top: auto;
}
.pc-price {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.pc-mrp {
  font-size: .82rem;
  color: var(--gray);
  text-decoration: line-through;
}
.pc-save {
  font-size: .68rem;
  font-weight: 600;
  color: var(--green);
  background: var(--greenlt);
  padding: .18rem .48rem;
  border-radius: 3px;
}
.pc-add {
  width: 100%;
  background: var(--ink);
  color: var(--gold2);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: all .25s;
  cursor: pointer;
  border-radius: 0 0 11px 11px;
  border: none;
  font-family: var(--sans);
}
.pc-add:hover {
  background: var(--gold);
  color: var(--ink);
}
.pc-add svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
  stroke: currentColor;
  fill: none;
}
.pc-add.added {
  background: var(--green);
  color: #fff;
}

/* Flash Deal / Deal Wrap */
.deal-wrap {
  background: var(--ink);
  margin: 0 4vw;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  padding: 2.5rem 3.5rem;
  position: relative;
}
.deal-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(198,153,58,.12), transparent 60%);
  pointer-events: none;
}
.deal-badge {
  position: relative;
  z-index: 2;
  text-align: center;
}
.deal-badge-pill {
  background: var(--gold);
  color: var(--ink);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .35rem .95rem;
  border-radius: 20px;
  margin-bottom: .4rem;
  display: inline-block;
}
.deal-pct {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--gold2);
  line-height: 1;
}
.deal-off {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold3);
}
.deal-content {
  position: relative;
  z-index: 2;
}
.deal-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: .4rem;
  line-height: 1.25;
}
.deal-title em {
  font-style: italic;
  color: var(--gold2);
}
.deal-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.deal-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.dchip {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(198,153,58,.25);
  color: var(--gold3);
  font-size: .72rem;
  padding: .3rem .8rem;
  border-radius: 4px;
}
.deal-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
}
.countdown {
  display: flex;
  gap: .45rem;
  align-items: center;
}
.cdb {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(198,153,58,.22);
  border-radius: 6px;
  padding: .55rem .75rem;
  text-align: center;
  min-width: 56px;
}
.cdn {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold2);
  line-height: 1;
  display: block;
}
.cdl {
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
  margin-top: .15rem;
  display: block;
}
.cdsep {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
  align-self: flex-start;
  margin-top: .32rem;
}
.btn-deal {
  background: var(--gold);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .9rem 2rem;
  border-radius: 5px;
  transition: all .25s;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  font-family: var(--sans);
}
.btn-deal:hover {
  background: var(--gold2);
  transform: translateY(-1px);
}

/* Why Choose Us Grid */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--lgray);
  gap: 3px;
}
.why-left {
  background: var(--offwhite);
  padding: 3.5rem 5vw;
}
.why-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.wy {
  background: var(--offwhite);
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.wy.alt {
  background: var(--gold4);
}
.wy-icon {
  font-size: 2rem;
}
.wy-num {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--gold);
  text-transform: uppercase;
}
.wy-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.wy-text {
  font-size: .84rem;
  line-height: 1.8;
  color: var(--gray);
}
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 2.2rem;
}
.stat-item .sn {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.stat-item .sd {
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin: .45rem 0;
}
.stat-item .sl {
  font-size: .78rem;
  color: var(--gray);
  letter-spacing: .04em;
}

/* Reviews / What Customers Say */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.rv {
  background: var(--white);
  border: 1px solid var(--lgray);
  border-radius: 12px;
  padding: 1.6rem;
}
.rv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.rv-stars {
  color: var(--gold);
  font-size: .95rem;
  letter-spacing: -.05em;
}
.rv-verified {
  font-size: .65rem;
  color: var(--green);
  font-weight: 500;
  background: var(--greenlt);
  padding: .2rem .5rem;
  border-radius: 3px;
}
.rv-product {
  font-size: .7rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.rv-product::before {
  content: '';
  width: 16px;
  height: 1.5px;
  background: var(--gold);
}
.rv-text {
  font-size: .88rem;
  line-height: 1.8;
  color: #4A5E72;
  font-style: italic;
  margin-bottom: 1.2rem;
}
.rv-author {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.rv-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold2);
  font-family: var(--serif);
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rv-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}
.rv-city {
  font-size: .72rem;
  color: var(--gray);
}

/* Blog Section */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.bc {
  background: var(--white);
  border: 1px solid var(--lgray);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
}
.bc:hover {
  box-shadow: 0 6px 24px rgba(10,28,53,.09);
  transform: translateY(-2px);
}
.bc-img {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
}
.bc-img-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--ink);
  color: var(--gold2);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 3px;
}
.bc-body {
  padding: 1.2rem;
}
.bc-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: .45rem;
}
.bc-meta {
  font-size: .72rem;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Certifications Bar */
.certs {
  background: var(--gold4);
  padding: 2rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--lgray);
  border-bottom: 1px solid var(--lgray);
}
.cert-lbl {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
}
.cert-pills {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}
.cpill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--white);
  border: 1.5px solid var(--lgray);
  border-radius: 6px;
  padding: .45rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink);
}

/* As Seen On */
.aso {
  background: var(--white);
  padding: 2rem 5vw;
  text-align: center;
  border-bottom: 1px solid var(--lgray);
}
.aso-lbl {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1.2rem;
}
.aso-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.aso-logo {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lgray);
  text-transform: uppercase;
  padding: .45rem .9rem;
  border: 1.5px solid var(--lgray);
  border-radius: 5px;
  transition: all .25s;
}
.aso-logo:hover {
  border-color: var(--stone);
  color: var(--gray);
}

/* Newsletter Strip */
.nl {
  background: var(--ink2);
  padding: 3.5rem 5vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.nl-pre {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.nl-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: .5rem;
}
.nl-title em {
  font-style: italic;
  color: var(--gold2);
}
.nl-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
}
.nl-form {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid rgba(198,153,58,.32);
  transition: border-color .2s;
  margin-bottom: .8rem;
}
.nl-form:focus-within {
  border-color: var(--gold);
}
.nl-form input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: none;
  outline: none;
  padding: .9rem 1.2rem;
  color: var(--white);
  font-family: var(--sans);
  font-size: .88rem;
}
.nl-form input::placeholder {
  color: rgba(255,255,255,.3);
}
.nl-form button {
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .9rem 1.6rem;
  border: none;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.nl-form button:hover {
  background: var(--gold2);
}
.nl-perks {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.nl-perk {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ==========================================
   RESPONSIVE HEADER & MOBILE DRAWER STYLES
   ========================================== */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: .5rem;
  cursor: pointer;
  color: var(--navy);
  align-items: center;
  justify-content: center;
}
.mobile-nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.drawer-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ink);
}
.drawer-title {
  color: var(--gold2);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
}
.drawer-close {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.drawer-search {
  display: none;
  padding: 1.2rem 1.5rem .5rem;
}
.search-mobile-form {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}
.search-mobile-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: .6rem .8rem;
  font-size: .82rem;
  color: var(--white);
}
.search-mobile-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.search-mobile-btn {
  background: none;
  border: none;
  color: var(--gold2);
  padding: 0 .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-mobile-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 28, 0.6);
  z-index: 490;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.mobile-backdrop.active {
  opacity: 1;
  visibility: visible;
}

body.no-scroll {
  overflow: hidden;
}

/* responsive media queries for header */
@media (max-width: 992px) {
  .mobile-nav-toggle {
    display: flex;
  }
  
  .header-row1 {
    height: 64px;
    padding: 0 4vw;
    gap: 1rem;
    justify-content: space-between;
  }
  
  .logo {
    font-size: 1.35rem;
  }
  .logo img {
    height: 36px !important;
  }
  
  /* Hide search text, show only icon on small buttons */
  .search-text {
    display: none;
  }
  
  /* Hide text labels on header action buttons */
  .actions {
    gap: .35rem;
  }
  .btn-login, .btn-wish, .btn-cart {
    padding: .45rem !important;
    border-radius: 50% !important;
    border-color: var(--border) !important;
    min-width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .btn-cart {
    border: 1.5px solid var(--navy) !important;
  }
  .action-label {
    display: none;
  }
  .wish-dot {
    top: -2px;
    right: -2px;
  }
  .btn-cart .cart-pill {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    font-size: .5rem;
    padding: 0;
    border: 2px solid var(--white);
  }
  .btn-cart {
    position: relative;
  }
  
  .search-wrap {
    display: none !important;
  }
  .site-header {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  }
  
  /* Mobile navigation drawer */
  .header-row2 {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: var(--navy);
    z-index: 500;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 25px rgba(0,0,0,0.3);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .header-row2.open {
    left: 0;
  }
  
  .drawer-header {
    display: flex !important;
  }
  .drawer-search {
    display: block !important;
  }
  .mobile-backdrop {
    display: block !important;
  }
  
  .nav-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    gap: 0;
  }
  
  .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .nav-link {
    padding: .9rem 0;
    font-size: .9rem;
    justify-content: space-between;
    border-bottom: none !important;
  }
  .nav-link.active {
    color: var(--gold2);
  }
  
  .nav-chevron {
    padding: .5rem;
    margin: -.5rem;
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Dropdowns inside mobile nav */
  .drop {
    position: static;
    opacity: 1;
    visibility: visible;
    display: none;
    background: rgba(0,0,0,0.15);
    border: none;
    box-shadow: none;
    padding: .3rem 0 .8rem;
    transform: none;
    pointer-events: auto;
    min-width: 0;
    border-radius: 4px;
    margin-bottom: .5rem;
  }
  .nav-item.expanded .drop {
    display: block;
  }
  .nav-item.expanded .nav-chevron {
    transform: rotate(180deg);
  }
  
  .dl {
    padding: .5rem 1rem;
    color: rgba(255,255,255,0.65) !important;
    font-size: .82rem;
  }
  .dl:hover {
    background: none;
    color: var(--gold2) !important;
    padding-left: 1rem;
  }
  .dsep {
    background: rgba(255,255,255,0.08);
    margin: .4rem 1rem;
  }
  .dall {
    padding: .5rem 1rem;
    font-size: .8rem;
  }
  
  .nav-right {
    margin: 1.5rem 0 0 0;
    padding: 1.5rem 0 0 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nav-tel {
    font-size: .82rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
  }
  .nav-shopall {
    width: 100%;
    padding: .7rem 1.2rem;
    font-size: .78rem;
  }
}

/* ==========================================
   RESPONSIVE LAYOUT GRIDS
   ========================================== */
@media (max-width: 1200px) {
  .rv-grid, .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }
  /* Stack Why Choose Us early to avoid cramped columns */
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .why-right {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 992px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .rv-grid, .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .why-right {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Trust Bar responsive layout */
  .trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tc {
    border-bottom: 1px solid var(--lgray) !important;
  }
  .tc:nth-child(2n) {
    border-right: none !important;
  }
  .tc:nth-child(3), .tc:nth-child(4) {
    border-bottom: none !important;
  }

  /* Flash Deal responsive */
  .deal-wrap {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 2rem 1.5rem !important;
    gap: 1.5rem !important;
    margin: 0 4vw !important;
  }
  .deal-right {
    align-items: center !important;
  }
  .deal-badge-pill {
    margin-bottom: .8rem !important;
  }
  
  /* Newsletter strip responsive */
  .nl {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  .nl-perks {
    justify-content: center !important;
  }
  
  /* Footer responsive */
  .footer-top {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
  .footer-logo {
    grid-column: span 2 !important;
  }
  .footer-about {
    max-width: 100% !important;
    grid-column: span 2 !important;
  }
}

@media (max-width: 768px) {
  .pc-name {
    font-size: 1.05rem !important;
  }
  .pc-price {
    font-size: 1.2rem !important;
  }
  .rv-grid, .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .why-right {
    grid-template-columns: 1fr !important;
  }
  .trust-bar {
    grid-template-columns: 1fr !important;
  }
  .tc {
    border-right: none !important;
    border-bottom: 1px solid var(--lgray) !important;
    padding: 1rem 1.5rem !important;
  }
  .tc:last-child {
    border-bottom: none !important;
  }
}

@media (max-width: 576px) {
  .prod-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-top {
    grid-template-columns: 1fr !important;
  }
  .footer-logo, .footer-about {
    grid-column: span 1 !important;
  }
  
  /* Hero Slider CTAs responsive */
  .slide-ctas {
    flex-direction: column !important;
    gap: .8rem !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  .slide-ctas a {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Certifications pills */
  .certs {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .cert-pills {
    justify-content: center !important;
  }
}

/* ════════════════════════════════════
   B2B & B2C MODE SELECTOR STYLING
   ════════════════════════════════════ */
.mode-switch-container {
  display: flex;
  align-items: center;
  background: #f8f6f0;
  border: 1.5px solid #e5dfd5;
  padding: 3px;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  margin-right: 15px;
}
body.dark-mode .mode-switch-container {
  background: #1e1e1e;
  border-color: #333333;
}
.mode-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 20px;
  transition: all 0.3s ease;
  color: #666666;
}
.mode-pill.active {
  color: #ffffff;
  background: #0f2d1f; /* Forest theme color */
}
body.dark-mode .mode-pill.active {
  background: #c5a880;
  color: #121212;
}

/* Theme toggle in header */
.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e5dfd5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: none;
  margin-right: 15px;
}
body.dark-mode .theme-toggle-btn {
  border-color: #333333;
}
.theme-toggle-btn:hover {
  background: rgba(0,0,0,0.05);
}

/* Custom premium card animations & highlights */
.product-item-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.product-item-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px rgba(15,45,31,0.12) !important;
}
.product-item-card.b2b-active {
  border-color: rgba(197, 168, 128, 0.5) !important;
}

/* B2B Enquiry Modal */
.b2b-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.b2b-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.b2b-modal-card {
  width: 90%;
  max-width: 550px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5dfd5;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.dark-mode .b2b-modal-card {
  background: #1e1e1e;
  border-color: #333333;
  color: #ffffff;
}
.b2b-modal-backdrop.active .b2b-modal-card {
  transform: scale(1);
}
.b2b-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.b2b-modal-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--navy);
}
body.dark-mode .b2b-modal-title {
  color: #ffffff;
}
.b2b-modal-close {
  font-size: 1.5rem;
  cursor: pointer;
  color: #888888;
  background: none;
  border: none;
}
.b2b-form-group {
  margin-bottom: 16px;
}
.b2b-form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: #666666;
}
.b2b-form-input, .b2b-form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e5dfd5;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.88rem;
  background: #fafafa;
}
body.dark-mode .b2b-form-input, body.dark-mode .b2b-form-textarea {
  background: #2b2b2b;
  border-color: #444444;
  color: #ffffff;
}
.b2b-form-input:focus, .b2b-form-textarea:focus {
  border-color: #0f2d1f;
  outline: none;
}
.b2b-submit-btn {
  width: 100%;
  padding: 12px;
  background: #0f2d1f;
  color: #ffffff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.b2b-submit-btn:hover {
  background: #153f2c;
}

/* Dark Mode styling */
body.dark-mode {
  background: #121212 !important;
  color: #f5f5f5 !important;
}
body.dark-mode .site-header, body.dark-mode .trust-bar, body.dark-mode .section, body.dark-mode .cat-card-premium, body.dark-mode .pc {
  background: #1e1e1e !important;
  border-color: #2d2d2d !important;
}
body.dark-mode .sh-title, body.dark-mode .pc-name, body.dark-mode .footer-logo, body.dark-mode .footer-col h4 {
  color: #ffffff !important;
}
body.dark-mode .pc-desc, body.dark-mode .tc-sub, body.dark-mode .footer-about, body.dark-mode .footer-col ul a {
  color: #aaaaaa !important;
}
body.dark-mode .cat-card-premium {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
body.dark-mode .pc {
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
body.dark-mode .pc-price {
  color: #c5a880 !important;
}