/* ============ MUSC — prototype stylesheet ============ */
:root{
  --burg:#660000;
  --sale:#d12d2d;        /* distinct from the brand burgundy so markdowns actually read */
  --sale-d:#a81f1f;
  --burg-d:#430000;
  --burg-l:#8a1a1a;
  --gold:#c49a4a;
  --gold-l:#e3c489;
  --cream:#fcf8f4;
  --cream-d:#f3ebe3;
  --ink:#241b19;
  --muted:#7a6b66;
  --rule:#e8ddd4;
  --wa:#25d366;
  --ease:cubic-bezier(.16,.84,.44,1);
  --shadow:0 18px 44px -24px rgba(70,20,20,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'PT Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
h1,h2,h3,h4,h5{font-family:'Merriweather',Georgia,serif;margin:0;line-height:1.25}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font:inherit}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;transition-duration:.08s!important}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 30px;border-radius:2px;font-weight:700;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s;
}
.btn::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .3s}
.btn:hover::after{opacity:.12}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:#2a1d06;box-shadow:0 10px 26px -12px rgba(196,154,74,.9)}
.btn-gold:hover{box-shadow:0 16px 32px -12px rgba(196,154,74,.95)}
.btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost.dark{border-color:var(--burg);color:var(--burg)}
.btn-ghost.dark:hover::after{opacity:0}
.btn-ghost.dark:hover{background:var(--burg);color:#fff}
.btn.wide{width:100%}

/* ---------- promo bar ---------- */
.promo{background:var(--burg-d);color:#f3dede;height:38px;overflow:hidden;position:relative;z-index:60}
.promo-rail{height:100%;position:relative}
.promo-rail p{
  margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(100%);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.promo-rail p.on{opacity:1;transform:none}
.promo-rail p.out{opacity:0;transform:translateY(-100%)}
.promo-rail b{color:var(--gold-l);font-weight:700;margin:0 .3em}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:55;background:var(--burg);color:#fff;transition:box-shadow .4s,padding .4s var(--ease)}
.nav.stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.nav-in{max-width:1280px;margin:0 auto;padding:16px 26px;display:flex;align-items:center;gap:20px;transition:padding .4s var(--ease)}
.nav.stuck .nav-in{padding:10px 26px}
.logo{display:flex;flex-direction:column;line-height:1;flex:none;margin-right:6px}
.logo-word{font-family:'Merriweather',serif;font-weight:900;font-size:25px;letter-spacing:.22em;transition:font-size .4s var(--ease)}
.logo-word.big{font-size:32px}
.nav.stuck .logo-word{font-size:22px}
.logo-tag{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l);margin-top:5px;white-space:nowrap}
.links{display:flex;align-items:center;gap:4px;margin-left:auto}
.links>a,.drop-t{
  position:relative;padding:9px 11px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:color .3s;
}
.links>a::after,.drop-t::after{
  content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;background:var(--gold-l);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.links>a:hover::after,.drop:hover .drop-t::after,.links>a.active::after{transform:scaleX(1)}
.caret{width:9px;transition:transform .35s var(--ease)}
.drop{position:relative}
.drop:hover .caret{transform:rotate(180deg)}
.drop-menu{
  position:absolute;top:100%;left:0;min-width:205px;background:#fff;color:var(--ink);
  border-radius:2px;padding:8px 0;box-shadow:0 26px 50px -22px rgba(60,10,10,.55);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  border-top:2px solid var(--gold);
}
.drop:hover .drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.drop-menu a{display:block;padding:10px 20px;font-size:13.5px;letter-spacing:.06em;transition:background .25s,padding-left .25s var(--ease),color .25s}
.drop-menu a:hover{background:var(--cream-d);padding-left:26px;color:var(--burg)}
.actions{display:flex;gap:4px;flex:none}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;position:relative;transition:background .3s,transform .3s var(--ease)}
.icon-btn svg{width:21px;height:21px}
.icon-btn:hover{background:rgba(255,255,255,.13)}
.icon-btn:active{transform:scale(.9)}
.cart-btn .count{
  position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--gold);color:#2a1d06;font-size:11px;font-weight:700;display:grid;place-items:center;
  transform:scale(0);transition:transform .45s var(--ease);
}
.cart-btn .count.on{transform:scale(1)}
.cart-btn.bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.22)}60%{transform:scale(.93)}100%{transform:scale(1)}}
.burger{display:none;flex-direction:column;gap:4.5px}
.burger span{width:19px;height:1.8px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .25s}

/* ---------- search overlay ---------- */
.search-wrap{
  position:fixed;inset:0;z-index:90;background:var(--cream);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.search-wrap.on{opacity:1;visibility:visible}
.search-head{background:var(--burg);padding:26px 26px 20px;flex:none;transform:translateY(-16px);transition:transform .5s var(--ease)}
.search-wrap.on .search-head{transform:none}
.search-box{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:4px 10px 4px 18px}
.search-box svg{width:21px;height:21px;color:var(--gold-l);flex:none}
.search-box input{flex:1;background:none;border:0;outline:none;color:#fff;font-size:17px;padding:14px 0}
.search-box input::placeholder{color:rgba(255,255,255,.5)}
.search-box .icon-btn{color:#fff}
.search-sug{max-width:820px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search-sug span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:4px}
.search-sug button{padding:5px 14px;border:1px solid rgba(255,255,255,.3);border-radius:30px;font-size:13px;color:#f0dcdc;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.search-sug button:hover{background:var(--gold);border-color:var(--gold);color:#2a1d06;transform:translateY(-2px)}
.search-body{flex:1;overflow-y:auto;padding:26px}
.search-results{max-width:820px;margin:0 auto}
.sr-head{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.sr{display:flex;align-items:center;gap:16px;padding:13px 10px;border-radius:3px;cursor:pointer;transition:background .25s,transform .3s var(--ease);opacity:0;animation:srIn .45s var(--ease) forwards}
@keyframes srIn{to{opacity:1}}
.sr:hover{background:#fff;transform:translateX(5px)}
.sr-art{width:52px;height:62px;flex:none;border-radius:2px;overflow:hidden;background:var(--cream-d)}
.sr-art{background:#fff}
.sr-art svg,.sr-art img{width:100%;height:100%;object-fit:contain;padding:3px}
.sr-n{flex:1;min-width:0}
.sr-n b{display:block;font-size:15.5px;font-weight:700}
.sr-n span{font-size:12.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sr-p{font-weight:700;color:var(--burg);white-space:nowrap}
.sr-p del{color:var(--muted);font-weight:400;margin-right:7px;font-size:14px}
.sr-none{text-align:center;padding:60px 20px;color:var(--muted)}
.sr-none b{display:block;font-family:'Merriweather',serif;font-size:19px;color:var(--ink);margin-bottom:8px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:clamp(560px,90vh,820px);display:grid;align-items:center;
  overflow:hidden;background:var(--cream);color:var(--ink);text-align:left;
}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  animation:heroZoom 30s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1.13)}}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(252,248,244,.97) 0%, rgba(252,248,244,.93) 30%,
                            rgba(252,248,244,.62) 52%, rgba(252,248,244,.12) 72%, rgba(252,248,244,0) 86%),
    linear-gradient(to top, rgba(252,248,244,.55), transparent 32%);
}
.hero-in{
  position:relative;z-index:3;width:100%;max-width:1280px;margin:0 auto;
  padding:96px 26px 104px;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:0 0 26px;opacity:0;animation:up .9s var(--ease) .15s forwards;
}
.hero-eyebrow .rule{display:block;width:44px;height:1px;background:var(--gold);flex:none}
.hero-h1{
  font-size:clamp(42px,7.4vw,82px);font-weight:900;letter-spacing:-.005em;
  margin:0 0 26px;max-width:14ch;line-height:1.08;
}
.hero-h1 .l{display:block;opacity:0;animation:up 1s var(--ease) forwards;color:var(--burg)}
.hero-h1 .l.light{color:#9d8678;animation-delay:.3s}
.hero-h1 .l:not(.light){animation-delay:.46s}
.hero-sub{
  font-size:17.5px;color:var(--muted);max-width:430px;margin:0 0 36px;line-height:1.72;
  opacity:0;animation:up .9s var(--ease) .64s forwards;
}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;opacity:0;animation:up .9s var(--ease) .8s forwards}
.btn-burg{background:var(--burg);color:#fff;box-shadow:0 12px 28px -14px rgba(102,0,0,.8)}
.btn-burg:hover{box-shadow:0 18px 34px -14px rgba(102,0,0,.9)}
.btn-line{border:1px solid var(--burg);color:var(--burg)}
.btn-line::after{display:none}
.btn-line:hover{background:var(--burg);color:#fff}
.hero-trust{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:46px;padding-top:26px;
  border-top:1px solid rgba(102,0,0,.14);max-width:600px;
  opacity:0;animation:up .9s var(--ease) .96s forwards;
}
.hero-trust span{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.hero-trust svg{width:17px;height:17px;color:var(--gold);flex:none}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:22px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;z-index:3}
.scroll-cue.dark{border-color:rgba(102,0,0,.3)}
.scroll-cue span{position:absolute;left:50%;top:7px;width:3px;height:7px;background:var(--gold);border-radius:2px;transform:translateX(-50%);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:19px}}

/* ---------- trust ---------- */
.trust{background:#fff;border-bottom:1px solid var(--rule)}
.trust-in{max-width:1180px;margin:0 auto;padding:34px 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.trust-i{display:flex;gap:16px;align-items:flex-start}
.trust-i svg{width:30px;height:30px;color:var(--burg);flex:none;margin-top:2px}
.trust-i h4{font-size:15.5px;margin-bottom:3px}
.trust-i p{margin:0;font-size:13.8px;color:var(--muted);line-height:1.5}

/* ---------- sections ---------- */
.sec{max-width:1280px;margin:0 auto;padding:86px 26px}
.sec-head{text-align:center;margin-bottom:48px}
.kicker{display:inline-block;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:700}
.kicker.light{color:var(--gold-l)}
.sec-head h2{font-size:clamp(27px,4.4vw,40px);font-weight:900;color:var(--burg)}
.sec-head h2.on-dark{color:#fff}
.sec-sub{color:var(--muted);margin:14px auto 0;max-width:480px}

/* ---------- categories ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat{position:relative;border-radius:3px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cat:hover{transform:translateY(-9px);box-shadow:0 30px 60px -28px rgba(70,20,20,.6)}
.cat-art{height:330px;position:relative;overflow:hidden}
.cat-art svg,.cat-art img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cat:hover .cat-art svg,.cat:hover .cat-art img{transform:scale(1.09)}
.cat-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(50,0,0,.84) 0%,rgba(50,0,0,.12) 55%,transparent 100%)}
.cat-txt{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2;color:#fff;transition:transform .6s var(--ease)}
.cat:hover .cat-txt{transform:translateY(-6px)}
.cat-txt h3{font-size:25px;font-weight:900;margin-bottom:5px}
.cat-txt span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}

/* ---------- product card ---------- */
.grid,.best-grid{display:grid;gap:22px}
.grid{grid-template-columns:repeat(4,1fr)}
.best-grid{grid-template-columns:repeat(5,1fr)}
.card{
  background:#fff;border:1px solid var(--rule);border-radius:3px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
  opacity:0;transform:translateY(26px);
}
.card.in{opacity:1;transform:none;transition:transform .7s var(--ease) var(--d,0s),opacity .7s var(--ease) var(--d,0s),box-shadow .5s var(--ease),border-color .4s}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 52px -28px rgba(70,20,20,.55);border-color:transparent}
.card-art{position:relative;padding:0;overflow:hidden;border-bottom:1px solid var(--rule)}
.card-art{
  padding:0;
  background:
    radial-gradient(ellipse 62% 54% at 50% 42%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    linear-gradient(168deg, #f8f1e9 0%, #efe3d6 55%, #e7d8c7 100%);
}
.card-art img{
  height:250px;width:100%;object-fit:contain;padding:22px 20px 26px;
  transition:transform .8s var(--ease);
  filter:drop-shadow(0 14px 16px rgba(70,35,20,.22));
}
.card:hover .card-art img{transform:translateY(-6px) scale(1.05)}
.card-art svg{height:218px;width:100%;transition:transform .8s var(--ease)}
.card:hover .card-art svg{transform:translateY(-7px) scale(1.06)}
.card-art::before{content:"";position:absolute;left:-60%;top:0;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:left .85s var(--ease)}
.card:hover .card-art::before{left:120%}
.badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:3}
.bdg{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:2px;color:#fff;background:var(--burg)}
.bdg.sale{background:var(--burg);animation:sheen 3s ease-in-out infinite}
@keyframes sheen{0%,100%{box-shadow:0 0 0 0 rgba(102,0,0,.5)}50%{box-shadow:0 0 0 7px rgba(102,0,0,0)}}
.bdg.new{background:var(--gold);color:#2a1d06}
.bdg.rank{background:#fff;color:var(--burg);border:1px solid var(--burg)}
.bdg.out{background:#6b6b6b}
.quick{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  background:var(--burg);color:#fff;padding:11px;border-radius:2px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;
}
.card:hover .quick{opacity:1;transform:none}
.quick:hover{background:var(--burg-d)}
.card-b{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card-brand{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:7px}
.card-n{font-family:'Merriweather',serif;font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.35}
.card-meta{font-size:12.5px;color:var(--muted);margin-bottom:11px}
.stars{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.stars svg{width:13px;height:13px;color:var(--gold)}
.stars em{font-style:normal;font-size:12px;color:var(--muted)}
.card-p{margin-top:auto;display:flex;align-items:baseline;gap:9px}
.card-p b{font-size:19px;color:var(--burg);font-family:'Merriweather',serif}
.card-p del{color:var(--muted);font-size:14.5px}
.card-p .off{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:var(--burg);padding:2px 7px;border-radius:2px}
.card.sold .card-art svg,.card.sold .card-art img{opacity:.45;filter:grayscale(.75)}

/* ---------- brands ---------- */
.brands{background:var(--burg);color:#fff;padding:76px 0;overflow:hidden}
.brands .sec-head{padding:0 26px}
.brand-rail{display:flex;gap:16px;animation:slide 34s linear infinite;width:max-content}
.brands:hover .brand-rail{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-chip{
  flex:none;width:200px;padding:28px 20px;text-align:center;border:1px solid rgba(255,255,255,.2);
  border-radius:3px;transition:background .4s,border-color .4s,transform .4s var(--ease);
}
.brand-chip:hover{background:rgba(255,255,255,.08);border-color:var(--gold);transform:translateY(-5px)}
.brand-chip b{display:block;font-family:'Merriweather',serif;font-size:19px;letter-spacing:.12em;margin-bottom:6px}
.brand-chip span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}

/* ---------- filters ---------- */
.filters{margin-bottom:34px}
.fil-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.fil-row.sub{margin-top:11px}
.fil{
  padding:9px 20px;border:1px solid var(--rule);background:#fff;border-radius:30px;
  font-size:13px;letter-spacing:.07em;transition:all .35s var(--ease);
}
.fil:hover{border-color:var(--burg);color:var(--burg);transform:translateY(-2px)}
.fil.on{background:var(--burg);border-color:var(--burg);color:#fff}
.fil-row.sub .fil{font-size:12px;padding:7px 16px;text-transform:uppercase;letter-spacing:.1em}
.fil-bar{display:flex;align-items:center;gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);flex-wrap:wrap}
.fil-bar .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.res{font-size:13.5px;color:var(--muted)}
#sortBy{padding:9px 14px;border:1px solid var(--rule);background:#fff;border-radius:2px;font-size:13.5px;color:var(--ink);cursor:pointer;transition:border-color .3s}
#sortBy:hover{border-color:var(--burg)}
.sale-tog{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;user-select:none}
.sale-tog input{display:none}
.sw{width:40px;height:22px;border-radius:12px;background:var(--rule);position:relative;transition:background .35s var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.sale-tog input:checked + .sw{background:var(--burg)}
.sale-tog input:checked + .sw::after{transform:translateX(18px)}
.empty{text-align:center;padding:70px 20px}
.empty p{color:var(--muted);margin-bottom:20px;font-size:17px}

/* ---------- gift ---------- */
.gift{background:linear-gradient(135deg,var(--burg-d),var(--burg) 62%,#7d1111);color:#fff;position:relative;overflow:hidden}
.gift::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-130px;top:-160px;background:radial-gradient(circle,rgba(196,154,74,.2),transparent 70%)}
.gift-in{max-width:1180px;margin:0 auto;padding:82px 26px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:2}
.gift-txt h2{margin-bottom:18px}
.gift-txt > p{color:#f0d6d6;max-width:440px;margin-bottom:30px}
.gift-steps{display:flex;gap:26px;margin-bottom:34px;flex-wrap:wrap}
.gs{display:flex;flex-direction:column;gap:5px}
.gs b{font-family:'Merriweather',serif;font-size:23px;color:var(--gold-l)}
.gs span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#e8c9c9}
.gift-art{display:grid;place-items:center}
.gift-art img{width:100%;max-width:470px;border-radius:3px;box-shadow:0 34px 70px -30px rgba(0,0,0,.65)}
.gift-art svg{max-height:380px;animation:float 7s ease-in-out infinite}

/* ---------- reviews ---------- */
.revs{padding-bottom:70px}
.rev-stage{display:flex;align-items:center;gap:18px;max-width:900px;margin:0 auto}
.rev-view{overflow:hidden;flex:1;border-radius:3px}
.rev-track{display:flex;transition:transform .7s var(--ease)}
.rev-c{flex:none;width:100%;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--gold);padding:38px 40px;text-align:center}
.rev-s{display:flex;justify-content:center;gap:4px;margin-bottom:18px}
.rev-s svg{width:17px;height:17px;color:var(--gold)}
.rev-c blockquote{margin:0 0 24px;font-family:'Merriweather',serif;font-size:19px;line-height:1.6;font-style:italic;color:var(--ink)}
.rev-who{display:flex;align-items:center;justify-content:center;gap:13px}
.av{width:44px;height:44px;border-radius:50%;background:var(--burg);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.rev-who b{display:block;font-size:14.5px}
.rev-who span{font-size:12.5px;color:var(--muted)}
.rev-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:#fff;display:grid;place-items:center;color:var(--burg);flex:none;transition:all .35s var(--ease)}
.rev-nav:hover{background:var(--burg);color:#fff;border-color:var(--burg);transform:scale(1.08)}
.rev-nav svg{width:19px;height:19px}
.rev-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.rev-dots i{width:7px;height:7px;border-radius:50%;background:var(--rule);cursor:pointer;transition:all .4s var(--ease)}
.rev-dots i.on{background:var(--burg);width:24px;border-radius:4px}

/* ---------- stats ---------- */
.stats{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats-in{max-width:1080px;margin:0 auto;padding:58px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.st b{display:block;font-family:'Merriweather',serif;font-size:clamp(28px,4.4vw,42px);font-weight:900;color:var(--burg);line-height:1}
.st span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:11px;display:block}

/* ---------- footer ---------- */
.foot{background:var(--burg-d);color:#e8d4d4;padding-top:66px}
.foot-in{max-width:1280px;margin:0 auto;padding:0 26px 50px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.15fr;gap:40px}
.f-brand .logo-tag{color:var(--gold-l);margin:8px 0 18px}
.f-note{font-size:13.5px;color:#c9aaaa;line-height:1.6;max-width:260px}
.f-note.sm{margin-top:14px;font-size:12.8px}
.f-col h5{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l);margin-bottom:17px;font-family:'PT Sans',sans-serif;font-weight:700}
.f-col a{display:block;font-size:14px;padding:5px 0;color:#e2cccc;transition:color .3s,transform .3s var(--ease)}
.f-col a:hover{color:#fff;transform:translateX(4px)}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;transition:all .35s var(--ease)}
.socials a svg{width:17px;height:17px}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:#2a1d06;transform:translateY(-3px)}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding:22px 26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1280px;margin:0 auto;font-size:12.5px;color:#b79b9b}
.proto{color:var(--gold-l)}

/* ---------- whatsapp ---------- */
.wa{
  /* bottom clears the iPhone home indicator; without the inset the button
     sits under the browser chrome on iOS and looks cut off. */
  position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:70;height:58px;display:flex;align-items:center;gap:0;
  background:var(--wa);color:#fff;border-radius:29px;padding:0 18px;overflow:hidden;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.75);
  transform:translateY(90px) scale(.8);opacity:0;
  transition:transform .55s var(--ease),opacity .55s var(--ease),box-shadow .4s,padding .45s var(--ease),gap .45s var(--ease);
}
.wa.on{transform:none;opacity:1}
.wa svg{width:28px;height:28px;flex:none;animation:wig 3.2s ease-in-out infinite}
@keyframes wig{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-13deg)}95%{transform:rotate(13deg)}}
.wa-label{max-width:0;white-space:nowrap;font-size:14.5px;font-weight:700;opacity:0;transition:max-width .45s var(--ease),opacity .35s .1s}
.wa:hover{box-shadow:0 18px 40px -12px rgba(37,211,102,.9);gap:11px;padding-right:24px}
.wa:hover .wa-label{max-width:150px;opacity:1}
.wa::after{content:"";position:absolute;inset:0;border-radius:29px;border:2px solid var(--wa);animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.42);opacity:0}}

/* ---------- cart ---------- */
.scrim{position:fixed;inset:0;background:rgba(35,10,10,.52);backdrop-filter:blur(3px);opacity:0;visibility:hidden;z-index:80;transition:opacity .45s var(--ease),visibility .45s}
.scrim.on{opacity:1;visibility:visible}
.cart{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--cream);z-index:85;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .55s var(--ease);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.6);
}
.cart.on{transform:none}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;background:var(--burg);color:#fff;flex:none}
.cart-top h3{font-size:18px}
.cart-body{flex:1;overflow-y:auto;padding:16px 24px}
.cart-empty{text-align:center;padding:70px 10px;color:var(--muted)}
.cart-empty svg{width:48px;height:48px;margin:0 auto 18px;color:var(--rule)}
.ci{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule);animation:ciIn .45s var(--ease)}
@keyframes ciIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.ci.go{animation:ciOut .35s var(--ease) forwards}
@keyframes ciOut{to{opacity:0;transform:translateX(26px);height:0;padding:0;margin:0;border:0}}
.ci-art{width:58px;height:70px;flex:none;background:var(--cream-d);border-radius:2px;overflow:hidden}
.ci-art{background:#fff}
.ci-art svg,.ci-art img{width:100%;height:100%;object-fit:contain;padding:3px}
.ci-n{flex:1;min-width:0}
.ci-n b{display:block;font-size:14.5px;font-family:'Merriweather',serif;line-height:1.35}
.ci-n span{font-size:11.5px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ci-p{font-weight:700;color:var(--burg);margin-top:5px;font-size:14.5px}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--rule);border-radius:2px;margin-top:9px;width:max-content;background:#fff}
.qty button{width:28px;height:27px;display:grid;place-items:center;color:var(--burg);font-size:15px;transition:background .25s}
.qty button:hover{background:var(--cream-d)}
.qty i{width:30px;text-align:center;font-style:normal;font-size:13.5px;font-weight:700}
.ci-x{align-self:flex-start;color:var(--muted);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;transition:all .3s}
.ci-x:hover{background:var(--burg);color:#fff}
.ci-x svg{width:13px;height:13px}
.cart-foot{flex:none;padding:20px 24px 24px;border-top:1px solid var(--rule);background:#fff}
.cod{display:flex;align-items:center;gap:9px;font-size:12.8px;color:var(--muted);margin-bottom:16px}
.cod svg{width:19px;height:19px;color:var(--burg);flex:none}
.sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.sum span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sum b{font-family:'Merriweather',serif;font-size:25px;color:var(--burg)}
.cart-foot .btn + .btn{margin-top:10px}

.mv-acts{display:flex;flex-direction:column;gap:10px}
.mv-wa{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--wa);color:#fff;padding:13px;border-radius:2px;font-weight:700;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;transition:transform .35s var(--ease),filter .3s}
.mv-wa:hover{transform:translateY(-2px);filter:brightness(1.07)}
.mv-wa svg{width:19px;height:19px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,24px);z-index:120;
  background:var(--burg-d);color:#fff;padding:14px 26px;border-radius:3px;font-size:14.5px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;border-left:3px solid var(--gold);
}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- mobile menu ---------- */
.mob{
  position:fixed;top:0;left:0;bottom:0;width:min(310px,84%);background:var(--burg);color:#fff;z-index:86;
  transform:translateX(-100%);transition:transform .5s var(--ease);padding:0 0 26px;display:flex;flex-direction:column;
}
.mob.on{transform:none}
.mob-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:12px}
.mob > a{padding:15px 24px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.07);transition:background .3s,padding-left .3s var(--ease)}
.mob > a:hover{background:rgba(255,255,255,.08);padding-left:32px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .best-grid{grid-template-columns:repeat(3,1fr)}
  .foot-in{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .links{display:none}
  .burger{display:flex}
  .logo{margin-right:auto}
  .actions{margin-left:0}
  .hero-veil{background:linear-gradient(100deg,rgba(252,248,244,.97) 0%,rgba(252,248,244,.93) 58%,rgba(252,248,244,.72) 100%),linear-gradient(to top,rgba(252,248,244,.6),transparent 40%)}
  .hero-h1{max-width:none}
  .gift-in{grid-template-columns:1fr;gap:40px}
  .gift-art{order:-1}
  .gift-art svg{max-height:250px}
  .trust-in{grid-template-columns:1fr;gap:20px}
  .cat-grid{grid-template-columns:1fr}
  .cat-art{height:260px}
  .stats-in{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:680px){
  .sec{padding:60px 20px}
  .grid,.best-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .card-art svg{height:150px}
  .card-b{padding:14px}
  .card-n{font-size:14px}
  .card-p b{font-size:16.5px}
  .quick{opacity:1;transform:none;font-size:11px;padding:9px}
  .foot-in{grid-template-columns:1fr 1fr;gap:30px}
  .rev-c{padding:30px 24px}
  .rev-c blockquote{font-size:16.5px}
  .rev-nav{width:38px;height:38px}
  .rev-stage{gap:9px}
  .fil-bar .right{margin-left:0;width:100%;justify-content:space-between}
  .wa{height:52px;right:16px;bottom:16px}
  .wa svg{width:25px;height:25px}
  .foot-bot{flex-direction:column;gap:7px}
  .hero-in{padding:62px 20px 86px}
  .hero-trust{margin-top:34px;padding-top:20px}
}

/* ============ OUR STORY ============ */
.story{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.story-in{max-width:1180px;margin:0 auto;padding:86px 26px;display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.story-art{position:relative}
.story-art img{width:100%;border-radius:3px;box-shadow:0 34px 70px -34px rgba(70,20,20,.6)}
.story-txt h2{font-size:clamp(25px,3.6vw,35px);font-weight:900;color:var(--burg);margin-bottom:22px;line-height:1.3}
.story-txt p{color:var(--muted);margin-bottom:16px;font-size:15.6px;line-height:1.75}
.story-sign{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.story-av{width:46px;height:46px;border-radius:50%;background:var(--burg);color:#fff;display:grid;place-items:center;font-family:'Merriweather',serif;font-weight:900;font-size:19px;flex:none}
.story-sign b{display:block;font-size:15px}
.story-sign span{font-size:13px;color:var(--muted)}

/* ============ WHY ============ */
.why{background:linear-gradient(160deg,var(--burg-d),var(--burg) 55%,#7a0f0f);color:#fff;padding:86px 26px;position:relative;overflow:hidden}
.why::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:-180px;bottom:-220px;background:radial-gradient(circle,rgba(196,154,74,.17),transparent 70%)}
.why > *{position:relative;z-index:2}
.on-dark-sub{color:#f0d6d6}
.why-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-c{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.15);border-radius:3px;padding:28px 26px;transition:background .45s var(--ease),transform .45s var(--ease),border-color .45s}
.why-c:hover{background:rgba(255,255,255,.11);border-color:var(--gold);transform:translateY(-6px)}
.why-i{width:46px;height:46px;border-radius:50%;background:rgba(196,154,74,.17);border:1px solid rgba(196,154,74,.5);display:grid;place-items:center;margin-bottom:18px}
.why-i svg{width:22px;height:22px;color:var(--gold-l)}
.why-c h3{font-size:17px;margin-bottom:10px;font-weight:700}
.why-c p{margin:0;font-size:14.5px;color:#eccfcf;line-height:1.65}
.why-bar{
  max-width:1180px;margin:34px auto 0;display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:24px 32px;
}
.why-bar b{display:block;font-family:'Merriweather',serif;font-size:27px;font-weight:900;color:var(--gold-l);line-height:1}
.why-bar span{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:#e2bdbd;margin-top:6px;display:block}
.why-bar .btn{margin-left:auto}

/* ============ CONTACT ============ */
.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
.contact-side{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--burg);border-radius:3px;padding:12px 24px 24px}
.cline{display:flex;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid var(--rule);transition:transform .35s var(--ease)}
a.cline:hover{transform:translateX(4px)}
.ci-ic{width:42px;height:42px;border-radius:50%;background:var(--cream-d);display:grid;place-items:center;flex:none;color:var(--burg)}
.ci-ic svg{width:20px;height:20px}
.ci-ic.wa-ic{background:var(--wa);color:#fff}
.cline b{display:block;font-size:14.5px}
.cline span{font-size:13.5px;color:var(--muted)}
.hours{padding-top:20px}
.hours h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-family:'PT Sans',sans-serif}
.hrow{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px}
.hrow span{color:var(--muted)}
.hnote{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.55;padding-top:13px;border-top:1px dashed var(--rule)}
.contact-form{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:32px 34px 34px}
.contact-form h3{font-size:21px;color:var(--burg);margin-bottom:22px}
.contact-form label{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.contact-form input,.contact-form select,.contact-form textarea{
  display:block;width:100%;margin-top:8px;padding:13px 15px;border:1px solid var(--rule);border-radius:2px;
  background:var(--cream);font-size:15.5px;color:var(--ink);font-weight:400;letter-spacing:0;text-transform:none;
  transition:border-color .3s,background .3s,box-shadow .3s;font-family:inherit;
}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--burg);background:#fff;box-shadow:0 0 0 3px rgba(102,0,0,.09);
}
.contact-form input.bad,.contact-form textarea.bad{border-color:#b3261e;background:#fdf3f2}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fnote{font-size:13.5px;color:var(--muted);text-align:center;margin:16px 0 0}
.fnote a{color:var(--burg);font-weight:700;border-bottom:1px solid currentColor}

@media (max-width:1100px){
  .why-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .story-in{grid-template-columns:1fr;gap:52px;padding:62px 26px}
  .contact-in{grid-template-columns:1fr}
  .why-bar{gap:26px}
  .why-bar .btn{margin-left:0;width:100%}
  .hero-trust{gap:16px}
}
@media (max-width:680px){
  .why{padding:60px 20px}
  .why-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr;gap:0}
  .contact-form{padding:24px 22px 26px}
  .contact-side{padding:10px 20px 20px}
  .card-art img{height:180px}
}

/* ============ PAGE HEADERS & BREADCRUMBS ============ */
.page-head{background:linear-gradient(150deg,var(--burg-d),var(--burg) 60%,#7a0f0f);color:#fff;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-140px;top:-180px;background:radial-gradient(circle,rgba(196,154,74,.2),transparent 70%)}
.page-head-in{max-width:1280px;margin:0 auto;padding:62px 26px 56px;position:relative;z-index:2;text-align:center}
.page-head .kicker{color:var(--gold-l)}
.page-head h1{font-size:clamp(29px,5vw,46px);font-weight:900;margin:0}
.page-head p{max-width:600px;margin:16px auto 0;color:#f0d6d6;font-size:16.5px}
.crumbs{background:#fff;border-bottom:1px solid var(--rule)}
.crumbs-in{max-width:1280px;margin:0 auto;padding:13px 26px;font-size:13.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--burg)}
.crumbs a:hover{text-decoration:underline}
.crumbs em{font-style:normal;color:var(--ink)}
.crumbs span{opacity:.45}
.sec-cta{text-align:center;margin-top:40px}

/* ============ CARD LINK / ADD BUTTON ============ */
.card{padding-bottom:0}
.card-link{display:flex;flex-direction:column;flex:1;color:inherit}
.card-add{
  margin:0 14px 14px;padding:11px;border:1px solid var(--burg);color:var(--burg);background:#fff;
  border-radius:2px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.card-add:hover:not(:disabled){background:var(--burg);color:#fff}
.card-add:disabled{opacity:.42;cursor:not-allowed;border-color:var(--rule);color:var(--muted)}
.card[hidden]{display:none!important}

/* ============ PRODUCT PAGE ============ */
.pdp{background:#fff;border-bottom:1px solid var(--rule)}
.pdp-in{max-width:1180px;margin:0 auto;padding:54px 26px 62px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pdp-main{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:34px;display:grid;place-items:center;position:relative;overflow:hidden}
.pdp-main svg{max-height:420px}
.pdp-main img.pdp-img{width:100%;max-width:460px;height:auto;object-fit:contain}
.pdp-bdg{position:absolute;top:16px;left:16px}
.pdp-brand{display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.pdp-brand:hover{text-decoration:underline}
.pdp-b h1{font-size:clamp(27px,4vw,38px);font-weight:900;color:var(--burg);margin-bottom:12px;line-height:1.2}
.pdp-meta{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.pdp-price{display:flex;align-items:baseline;gap:13px;margin:22px 0;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.pdp-price b{font-family:'Merriweather',serif;font-size:36px;color:var(--burg)}
.pdp-price del{font-size:20px;color:var(--muted)}
.pdp-price .off{font-size:11.5px;font-weight:700;background:var(--burg);color:#fff;padding:4px 11px;border-radius:2px;letter-spacing:.1em}
.pdp-d{font-size:15.8px;color:var(--muted);line-height:1.72;margin-bottom:24px}
.pdp-notes h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-family:'PT Sans',sans-serif}
.pdp-notes{margin-bottom:22px}
.pdp-stock{font-size:14px;padding:11px 15px;border-radius:2px;margin-bottom:22px;display:inline-block}
.pdp-stock.in{background:#eef6ee;color:#2d6b35;border:1px solid #cfe4d1}
.pdp-stock.out{background:#f4efed;color:var(--muted);border:1px solid var(--rule)}
.pdp-trust{list-style:none;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--rule);display:grid;gap:13px}
.pdp-trust li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--muted)}
.pdp-trust svg{width:19px;height:19px;color:var(--burg);flex:none}

/* ============ BRANDS INDEX ============ */
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.brand-card{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--gold);border-radius:3px;padding:32px 28px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.brand-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(70,20,20,.5)}
.brand-card h3{font-size:23px;color:var(--burg);font-weight:900;margin-bottom:7px}
.bc-city{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.bc-n{font-size:14px;color:var(--muted)}

/* ============ GIFT BOX PAGE ============ */
.gb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gb-step{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:30px 28px}
.gb-step b{font-family:'Merriweather',serif;font-size:30px;color:var(--gold);display:block;margin-bottom:12px}
.gb-step h3{font-size:18px;color:var(--burg);margin-bottom:9px}
.gb-step p{margin:0;font-size:14.5px;color:var(--muted)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tier{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:34px 30px;text-align:center;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tier:hover{transform:translateY(-6px);box-shadow:0 26px 52px -28px rgba(70,20,20,.5)}
.tier.feat{border:2px solid var(--burg);padding-top:42px}
.tier-flag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--burg);color:#fff;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 16px;border-radius:0 0 3px 3px}
.tier h3{font-size:21px;color:var(--burg);margin-bottom:12px}
.tier-p{font-family:'Merriweather',serif;font-size:38px;font-weight:900;color:var(--ink);line-height:1}
.tier-c{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin:10px 0 16px}
.tier-t{font-size:14.5px;color:var(--muted);margin-bottom:24px;min-height:62px}
.gb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gb-pick{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:3px;padding:16px;cursor:pointer;transition:border-color .3s,transform .4s var(--ease),box-shadow .4s}
.gb-pick:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(70,20,20,.5)}
.gb-pick input{position:absolute;opacity:0;pointer-events:none}
.gb-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border:1.5px solid var(--rule);border-radius:50%;background:#fff;transition:all .3s var(--ease)}
.gb-tick::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.gb-pick input:checked ~ .gb-tick{background:var(--burg);border-color:var(--burg)}
.gb-pick input:checked ~ .gb-tick::after{transform:rotate(45deg) scale(1)}
.gb-pick:has(input:checked){border-color:var(--burg);box-shadow:0 0 0 2px rgba(102,0,0,.08)}
.gb-art{display:block;height:130px;margin-bottom:12px}
.gb-art svg,.gb-art img{height:100%;width:100%;object-fit:contain}
.gb-n b{display:block;font-family:'Merriweather',serif;font-size:14.5px;margin-bottom:4px}
.gb-n em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-bottom:7px}
.gb-n i{font-style:normal;font-weight:700;color:var(--burg)}
.gb-bar{position:sticky;bottom:0;margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:var(--burg);color:#fff;padding:18px 26px;border-radius:3px;box-shadow:0 -10px 34px -18px rgba(0,0,0,.5);z-index:40}
.gb-sum{display:flex;flex-direction:column}
.gb-sum span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e2bdbd}
.gb-sum b{font-family:'Merriweather',serif;font-size:26px;color:var(--gold-l)}
.gb-wrap label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.gb-wrap input{display:none}
.gb-wrap input:checked + .sw{background:var(--gold)}
.gb-wrap input:checked + .sw::after{transform:translateX(18px)}
.gb-bar .btn{margin-left:auto}

/* ============ CART & CHECKOUT PAGES ============ */
.cp-in,.co-in{display:grid;grid-template-columns:1.5fr .85fr;gap:34px;align-items:start}
.cp-lines{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:6px 24px}
.cp-side{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--burg);border-radius:3px;padding:26px 26px 28px;position:sticky;top:120px}
.cp-side h3{font-size:18px;color:var(--burg);margin-bottom:20px}
.cp-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:15px}
.cp-row span{color:var(--muted)}
.cp-row.total{border-top:1px solid var(--rule);margin-top:10px;padding-top:16px}
.cp-row.total span{color:var(--ink);font-weight:700}
.cp-row.total b{font-family:'Merriweather',serif;font-size:25px;color:var(--burg)}
.cp-side .btn{margin-top:14px}
.cp-cont{display:block;text-align:center;margin-top:18px;font-size:14px;color:var(--burg)}
.cp-cont:hover{text-decoration:underline}
.co-form{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:32px 34px 34px}
.co-form h3{font-size:20px;color:var(--burg);margin-bottom:22px}
.co-form label,.contact-form label{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.co-form input,.co-form select,.co-form textarea{display:block;width:100%;margin-top:8px;padding:13px 15px;border:1px solid var(--rule);border-radius:2px;background:var(--cream);font-size:15.5px;color:var(--ink);font-weight:400;letter-spacing:0;text-transform:none;font-family:inherit;transition:border-color .3s,background .3s,box-shadow .3s}
.co-form textarea{resize:vertical}
.co-form input:focus,.co-form select:focus,.co-form textarea:focus{outline:none;border-color:var(--burg);background:#fff;box-shadow:0 0 0 3px rgba(102,0,0,.09)}
.co-form input.bad,.co-form select.bad,.co-form textarea.bad{border-color:#b3261e;background:#fdf3f2}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.pay-box{margin:8px 0 22px;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.pay-row{display:flex;gap:14px;align-items:flex-start;padding:17px 18px;border-bottom:1px solid var(--rule)}
.pay-row:last-child{border-bottom:none}
.pay-row.on{background:var(--brand-pale,#f6ecec)}
.pay-row.off{opacity:.55}
.pay-row b{display:block;font-size:15px}
.pay-row span:not(.radio){font-size:13.5px;color:var(--muted)}
.radio{width:18px;height:18px;border:2px solid var(--rule);border-radius:50%;flex:none;margin-top:3px;position:relative}
.radio.on{border-color:var(--burg)}
.radio.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--burg)}
.co-lines{margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.co-line{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:7px 0}
.co-line span{color:var(--muted)}
.co-empty{font-size:14.5px;color:var(--muted)}
.cart-empty .btn{margin-top:18px}

/* ============ PROSE (policy pages) ============ */
.prose-in{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--rule);border-radius:3px;padding:44px 46px}
.prose-in h2{font-size:21px;color:var(--burg);margin:32px 0 13px}
.prose-in h2:first-child{margin-top:0}
.prose-in p{font-size:15.8px;color:var(--muted);line-height:1.76;margin-bottom:15px}
.prose-in strong{color:var(--ink)}
.story.plain .story-in{padding-top:62px}
.story-txt .lede{font-size:17px;line-height:1.78}
.contact-lede{max-width:760px;margin:0 auto 42px;text-align:center;color:var(--muted);font-size:16.2px;line-height:1.75}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .brand-grid,.gb-steps,.tiers{grid-template-columns:1fr 1fr}
  .gb-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .pdp-in,.cp-in,.co-in{grid-template-columns:1fr;gap:34px}
  .cp-side{position:static}
  .pdp-main svg{max-height:300px}
  .gb-grid{grid-template-columns:repeat(2,1fr)}
  .gb-bar .btn{margin-left:0;width:100%}
}
@media (max-width:680px){
  .brand-grid,.gb-steps,.tiers{grid-template-columns:1fr}
  .page-head-in{padding:44px 20px 40px}
  .prose-in{padding:28px 24px}
  .pdp-in{padding:34px 20px 44px}
  .pdp-main{padding:26px}
  .co-form{padding:24px 22px 26px}
  .cp-lines{padding:4px 18px}
  .tier-t{min-height:0}
}

/* "all brands" link at the foot of the nav dropdown */
.drop-all{border-top:1px solid var(--rule);margin-top:6px;padding-top:11px!important;color:var(--gold)!important;font-weight:700}
.drop-all:hover{color:var(--burg)!important}

/* a different backdrop per category, so For Her / For Him / Kids feel distinct */
.card[data-gender="him"] .card-art{
  background:radial-gradient(ellipse 62% 54% at 50% 42%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
             linear-gradient(168deg,#eef0f3 0%,#dfe3e9 55%,#d2d8e0 100%);
}
.card[data-gender="kids"] .card-art{
  background:radial-gradient(ellipse 62% 54% at 50% 42%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
             linear-gradient(168deg,#eef7f4 0%,#ddeee8 55%,#cde4dc 100%);
}
.card[data-gender="body"] .card-art{
  background:radial-gradient(ellipse 62% 54% at 50% 42%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
             linear-gradient(168deg,#fbeef3 0%,#f4dfe8 55%,#eccfdc 100%);
}
/* product page gets the same treatment, larger */
.pdp-main{
  background:radial-gradient(ellipse 60% 52% at 50% 44%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
             linear-gradient(168deg,#f8f1e9 0%,#efe3d6 55%,#e7d8c7 100%)!important;
}
.pdp-main img.pdp-img{filter:drop-shadow(0 22px 26px rgba(70,35,20,.26))}
.sr-art,.ci-art{background:linear-gradient(168deg,#f8f1e9,#e9dbcb)}
.gb-art img{filter:drop-shadow(0 10px 12px rgba(70,35,20,.2))}

/* ============ PAGINATION ============ */
.pager{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:46px;padding-top:28px;border-top:1px solid var(--rule)}
.pg,.pg-n{padding:9px 16px;border:1px solid var(--rule);background:#fff;border-radius:2px;
  font-size:13.5px;color:var(--ink);transition:all .3s var(--ease)}
.pg:hover,.pg-n:hover{border-color:var(--burg);color:var(--burg)}
.pg.off{opacity:.35;pointer-events:none}
.pg-nums{display:flex;gap:6px;flex-wrap:wrap}
.pg-n.on{background:var(--burg);border-color:var(--burg);color:#fff;font-weight:700}
.pg-gap{padding:9px 4px;color:var(--muted)}
.pg-count{width:100%;text-align:center;font-size:13px;color:var(--muted);margin-top:4px}
a.fil{text-decoration:none}
@media (max-width:680px){
  .pager{gap:9px}
  .pg,.pg-n{padding:8px 12px;font-size:12.5px}
}

/* ============================================================
   ARABIC / RIGHT-TO-LEFT
   Tajawal for Arabic; the Latin faces stay for brand and product
   names, which are not translated in this market.
   ============================================================ */
[dir="rtl"]{
  font-family:'Tajawal',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  letter-spacing:0;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,
[dir="rtl"] .logo-word,[dir="rtl"] .sec-head h2,[dir="rtl"] .card-n,
[dir="rtl"] .hero-h1,[dir="rtl"] .story-txt h2{
  font-family:'Tajawal','Merriweather',Georgia,serif;font-weight:700;
}
/* the wordmark and product names stay Latin */
[dir="rtl"] .logo-word,[dir="rtl"] .card-brand,[dir="rtl"] .pdp-brand,
[dir="rtl"] .brand-chip b,[dir="rtl"] .brand-card h3{
  font-family:'Merriweather',Georgia,serif;letter-spacing:.2em;direction:ltr;display:inline-block;
}
[dir="rtl"] .card-n,[dir="rtl"] .pdp-b h1{direction:ltr;text-align:right}
[dir="rtl"] .logo{align-items:flex-start}

/* ---- Arabic reads better a touch larger ---- */
[dir="rtl"] body{font-size:16.5px;line-height:1.85}
[dir="rtl"] .links>a,[dir="rtl"] .drop-t{letter-spacing:0;font-size:14px}
[dir="rtl"] .kicker,[dir="rtl"] .hero-eyebrow,[dir="rtl"] .logo-tag{letter-spacing:.12em}
[dir="rtl"] .btn{letter-spacing:0;font-size:14px}

/* ---- directional flips ---- */
[dir="rtl"] .hero,[dir="rtl"] .hero-in{text-align:right}
[dir="rtl"] .hero-veil{background:
  linear-gradient(260deg, rgba(252,248,244,.97) 0%, rgba(252,248,244,.93) 30%,
                          rgba(252,248,244,.62) 52%, rgba(252,248,244,.12) 72%, rgba(252,248,244,0) 86%),
  linear-gradient(to top, rgba(252,248,244,.55), transparent 32%)}
[dir="rtl"] .hero-trust,[dir="rtl"] .hero-cta,[dir="rtl"] .hero-eyebrow{justify-content:flex-start}
[dir="rtl"] .links{margin-left:0;margin-right:auto}
[dir="rtl"] .actions{margin-right:0;margin-left:0}
[dir="rtl"] .drop-menu{left:auto;right:0;text-align:right}
[dir="rtl"] .drop-menu a:hover{padding-left:20px;padding-right:26px}
[dir="rtl"] .cart{right:auto;left:0;transform:translateX(-100%);box-shadow:24px 0 60px -30px rgba(0,0,0,.6)}
[dir="rtl"] .cart.on{transform:none}
[dir="rtl"] .mob{left:auto;right:0;transform:translateX(100%)}
[dir="rtl"] .mob.on{transform:none}
[dir="rtl"] .mob>a:hover{padding-left:24px;padding-right:32px}
[dir="rtl"] .wa{right:auto;left:22px}
[dir="rtl"] .cat-txt,[dir="rtl"] .card-b,[dir="rtl"] .pdp-b,[dir="rtl"] .story-txt,
[dir="rtl"] .gift-txt,[dir="rtl"] .contact-side,[dir="rtl"] .co-form,[dir="rtl"] .prose-in{text-align:right}
[dir="rtl"] .crumbs-in,[dir="rtl"] .card-p,[dir="rtl"] .stars,[dir="rtl"] .pdp-price,
[dir="rtl"] .pdp-trust li,[dir="rtl"] .cline,[dir="rtl"] .hrow,
[dir="rtl"] .gift-steps,[dir="rtl"] .trust-i,[dir="rtl"] .rev-who,[dir="rtl"] .story-sign{flex-direction:row-reverse}
[dir="rtl"] .card-p .off{margin-left:0;margin-right:auto}
[dir="rtl"] .fil-bar .right{margin-left:0;margin-right:auto}
[dir="rtl"] .f-col a:hover{transform:translateX(-4px)}
[dir="rtl"] .sr:hover{transform:translateX(-5px)}
[dir="rtl"] .ci{flex-direction:row-reverse}
[dir="rtl"] .search-box{flex-direction:row-reverse}
[dir="rtl"] .search-box input{text-align:right}
[dir="rtl"] .foot-in,[dir="rtl"] .f-col{text-align:right}
[dir="rtl"] .pager{flex-direction:row-reverse}
[dir="rtl"] .pg.prev::before{content:'→ '}
[dir="rtl"] .pg.next::after{content:' ←'}
[dir="rtl"] .hero-eyebrow .rule{order:2}
[dir="rtl"] .cart-btn .count{right:auto;left:1px}
[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea{text-align:right}
[dir="rtl"] .toast{border-left:0;border-right:3px solid var(--gold)}

/* ---- language switcher ---- */
.lang-sw{
  display:grid;place-items:center;height:36px;padding:0 13px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.3);border-radius:3px;color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.04em;margin-left:4px;
  transition:background .3s,border-color .3s;
}
.lang-sw:hover{background:rgba(255,255,255,.14);border-color:var(--gold-l)}
/* The switcher always shows the language you are switching TO, so on the
   English pages the label is Arabic and needs an Arabic face. Tajawal only
   loads on the Arabic tree, so fall back to the system Arabic fonts here. */
.lang-sw{font-family:'Tajawal','Geeza Pro','Segoe UI',Tahoma,Arial,sans-serif;font-size:14px;letter-spacing:0}
[dir="rtl"] .lang-sw{
  margin-left:0;margin-right:4px;
  font-family:'Merriweather',Georgia,serif;font-size:12.5px;letter-spacing:.06em;
}
@media (max-width:900px){
  [dir="rtl"] .logo{margin-right:0;margin-left:auto}
  [dir="rtl"] .wa{left:16px;right:auto}
}
@media (max-width:560px){
  /* A touch smaller on phones, and the hover-to-expand label is pointless
     on a device with no hover — keep it to the circle. */
  .wa{height:54px;padding:0 15px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
  [dir="rtl"] .wa{left:16px;right:auto}
  .wa svg{width:26px;height:26px}
  .wa-label{display:none}
}

/* ---------- leave a review ---------- */
.rv-sec{padding-top:0}
.rv-form{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--rule);border-radius:3px;padding:30px 32px}
.rv-form label{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.rv-form input[type=text],.rv-form input:not([type]),.rv-form textarea{
  display:block;width:100%;margin-top:8px;padding:12px 15px;border:1px solid var(--rule);
  border-radius:2px;background:var(--cream);font-size:15.5px;color:var(--ink);
  font-weight:400;letter-spacing:0;text-transform:none;font-family:inherit}
.rv-form textarea{resize:vertical}
.rv-form input:focus,.rv-form textarea:focus{outline:none;border-color:var(--burg);background:#fff;box-shadow:0 0 0 3px rgba(102,0,0,.09)}
.rv-stars{border:0;padding:0;margin:0 0 18px;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.rv-stars legend{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;float:right;width:100%;margin-bottom:8px}
.rv-stars input{position:absolute;opacity:0;width:0}
.rv-stars label{font-size:30px;line-height:1;color:var(--rule);cursor:pointer;margin:0;padding:0 2px;transition:color .2s;text-transform:none;letter-spacing:0}
.rv-stars input:checked ~ label,.rv-stars label:hover,.rv-stars label:hover ~ label{color:var(--gold)}
.rv-stars input:focus-visible + label{outline:2px solid var(--burg);outline-offset:2px}
.rv-thanks{font-size:16px;color:var(--ok,#2d6b35);text-align:center;margin:0;padding:18px}
[dir="rtl"] .rv-stars{flex-direction:row}
.ask,.card-p b.ask,.pdp-price b.ask{font-style:normal;font-size:14px;font-weight:700;color:var(--gold);font-family:'PT Sans',sans-serif}
.pdp-price b.ask{font-size:20px}
.sr-p .ask{font-size:13px}

/* [hidden] must beat layout display rules (.co-in is display:grid) */
[hidden]{display:none!important}

/* ---------- order confirmation ---------- */
.co-done{display:flex;justify-content:center;padding:18px 0 10px}
.co-done-in{max-width:540px;width:100%;text-align:center;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:46px 34px}
.co-tick{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:var(--brand-pale,#f6ecec);color:var(--brand,#660000)}
.co-tick svg{width:34px;height:34px}
.co-done-in h2{margin:0 0 22px;font-size:27px;line-height:1.25}
.co-ref-l{margin:0 0 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-ref{margin:0 0 22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:21px;font-weight:700;letter-spacing:.06em;color:var(--brand,#660000)}
.co-done-b{margin:0 0 26px;color:var(--muted);line-height:1.65}
.co-done-a{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.co-wa-fallback{margin-top:11px}
@media(max-width:560px){
  .co-done-in{padding:34px 20px}
  .co-done-in h2{font-size:23px}
  .co-done-a .btn{width:100%}
}

/* ---------- sale visibility ----------
   Markdowns previously rendered burgundy-on-burgundy and disappeared into the
   brand palette. They now use their own red and sit on the product image. */
.card-art{position:relative}
.flash{
  position:absolute;top:10px;right:10px;z-index:3;
  background:var(--sale);color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em;
  padding:7px 10px;border-radius:999px;line-height:1;
  box-shadow:0 2px 10px rgba(209,45,45,.42);
}
[dir="rtl"] .flash{right:auto;left:10px}
.bdg.sale{background:var(--sale)}
.card-p .off,.pdp-price .off{background:var(--sale)}
.card-p del,.pdp-price del,.sr-p del{text-decoration-color:var(--sale);text-decoration-thickness:1.5px}
.pdp-price .off{font-size:13px;padding:6px 13px}

/* "on sale only" filter reads as a live control once sales are running */
.sale-tog{position:relative}
.sale-tog input:checked + .sw{background:var(--sale)}

@media(max-width:560px){ .flash{font-size:11.5px;padding:6px 9px;top:8px;right:8px} }

/* ---------- fragrance notes, colour-coded by family ---------- */
.notes-v2{margin-bottom:26px}
.np-bar{display:flex;gap:3px;height:7px;margin-bottom:20px;border-radius:999px;overflow:hidden}
.np-seg{background:var(--c);border-radius:999px;min-width:10px;transition:flex .5s var(--ease)}
.nf-grid{display:flex;flex-direction:column;gap:15px}
.nf-h{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:9px;font-family:'PT Sans',sans-serif}
.nf-h em{font-style:normal;color:var(--muted);letter-spacing:.06em;font-size:11px}
.nf-dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.nf-chips{display:flex;flex-wrap:wrap;gap:7px}
.nchip{
  font-size:12.5px;letter-spacing:.02em;padding:6px 13px;border-radius:999px;
  background:var(--bg);color:var(--ink);border:1px solid color-mix(in srgb,var(--c) 32%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nchip:hover{transform:translateY(-2px);box-shadow:0 5px 14px -6px var(--c)}
[dir="rtl"] .nf-h,[dir="rtl"] .nf-chips{direction:rtl}
@media(max-width:560px){ .nchip{font-size:12px;padding:5px 11px} }

/* ---------- phone: stop the page scrolling sideways ----------
   A `1fr` grid track will not shrink below its content's intrinsic width,
   and an <input> carries a built-in minimum of roughly 170px. Two of them
   side by side plus the page gutters came to more than a 400px screen, so
   the whole page gained a horizontal scrollbar and the fixed WhatsApp
   button sat off to one side of it. */
@media (max-width:620px){
  .story-in,
  .contact-in,
  .co-in{grid-template-columns:1fr}
  .story-in{gap:30px}
}
@media (max-width:560px){
  /* let every grid child shrink instead of forcing the track wider */
  .frow > *,.contact-in > *,.story-in > *,.co-in > *,.cp-side > *{min-width:0}
  input,select,textarea{max-width:100%}
  .stats-in{grid-template-columns:1fr 1fr}
}

/* ---------- phone header ----------
   .logo and .actions were both flex:none, so at 360px the burger, logo,
   gaps and icon row added up to ~469px and the page gained a horizontal
   scrollbar. That is also why the fixed WhatsApp button sat off-screen:
   right:16px measured from the 442px layout edge, not the 360px screen. */
@media (max-width:620px){
  .nav-in{padding:12px 14px;gap:10px}
  .logo{margin-right:auto;min-width:0}
  .logo .mark,.logo b{font-size:20px;letter-spacing:.18em}
  .logo small,.logo span{font-size:7.5px;letter-spacing:.14em}
  .actions{gap:2px;flex:0 1 auto;min-width:0}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:19px;height:19px}
  .lang-sw{height:32px;padding:0 9px;font-size:12px}
  [dir="rtl"] .lang-sw{font-size:11px}

  /* the rotating promo line had to wrap inside a 38px box, which clipped it
     and dropped "$75" onto a line of its own */
  .promo-rail p{font-size:10px;letter-spacing:.03em;white-space:nowrap;padding:0 10px}
  .promo-rail b{margin:0 .2em}
}
@media (max-width:380px){
  .promo-rail p{font-size:9px;letter-spacing:.01em}
  .logo .mark,.logo b{font-size:18px}
}

/* ---------- sale pricing on phones ----------
   The card price row holds the new price, the struck original and a
   discount chip. At 360px the card is 153px wide and that row needs 138px
   in a 123px space, so the chip was pushed out past the card edge and
   clipped — "$32.00 $64.00 -50".

   The chip also repeats what the corner flash on the image already says,
   so on small screens it goes and the flash carries the discount. The row
   may wrap as a last resort, so no width can push anything out again. */
@media (max-width:620px){
  .card-p{flex-wrap:wrap;gap:7px;row-gap:2px}
  .card-p .off{display:none}
  .card-p b{font-size:17.5px}
  .card-p del{font-size:13px}
}
@media (max-width:380px){
  .card-p b{font-size:16px}
  .card-p del{font-size:12px}
}