/* =========================================================================
   Shiv Shakti — home page
   Full-bleed, fluid layout: every band runs edge to edge and the content
   inside it sits in a wide shell with gutters that grow with the viewport.

   Builds only on the tokens declared in css/common.css and is scoped to
   <body class="home-page"> so no other page is affected.
   Pair with:  <link rel="stylesheet" href="assets/home.css">   (last)
   ========================================================================= */

/* ===================== Shell, rhythm, helpers ===================== */
.home-page{
  --hm-gutter:clamp(16px,3.6vw,72px);
  --hm-shell:1780px;
  --hm-pad:clamp(58px,6.4vw,118px);
  --hm-ease:cubic-bezier(.22,1,.36,1);
  --hm-soft:cubic-bezier(.4,0,.2,1);
  --hm-r:clamp(16px,1.5vw,26px);
  --arr-shift:260%;
  --swiper-theme-color:var(--maroon-700);
  /* line the shared header and footer up with this page's wider shell, so the
     logo starts at the same x as the first card instead of 230px inside it
     (assets/site-header.css declares the defaults for every other page) */
  --ss-shell:var(--hm-shell);
  --ss-shell-pad:var(--hm-gutter);
  background:var(--cream-050);
  /* clip, not hidden: it stops a stray reveal transform from creating a
     horizontal scrollbar without turning <body> into a scroll container,
     which would break the shared header's position:sticky */
  overflow-x:clip;
}

/* the wide shell — replaces the 1240px .container cap on this page */
.home-page .container,
.hm-shell{
  width:100%;
  max-width:var(--hm-shell);
  margin-inline:auto;
  padding-inline:var(--hm-gutter);
}
/* full-bleed rows opt out of the gutter and manage their own edges */
.hm-bleed{width:100%; max-width:none; padding-inline:0;}

.home-page section{padding:var(--hm-pad) 0;}

/* Every band that carries a decorative layer needs its own stacking context:
   the orbs and dot grids sit at z-index:-1 and would otherwise fall behind
   the band's own background. `.home-page X` also outranks `.home-page section`
   for the bands that set their own padding. */
.home-page .hm-intro,
.home-page .hm-craft,
.home-page .hm-story,
.home-page .hm-why,
.home-page .hm-bulk,
.home-page .hm-cities{
  position:relative; isolation:isolate; overflow:hidden;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.intro-pending .hm-reveal{visibility:hidden;}

/* ---------- shared motion ---------- */
@keyframes hmFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes hmMarquee{to{transform:translateX(-50%);}}
@keyframes hmShimmer{to{background-position:200% center;}}
@keyframes hmGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes hmRing{0%{opacity:.8; transform:scale(.85);}100%{opacity:0; transform:scale(1.4);}}
@keyframes hmSpin{to{transform:rotate(360deg);}}
@keyframes hmRoll{
  0%{transform:translateY(0); opacity:1;}
  45%{transform:translateY(-70%); opacity:0;}
  46%{transform:translateY(70%); opacity:0;}
  100%{transform:translateY(0); opacity:1;}
}
@keyframes hmWheel{0%{opacity:0; transform:translateY(0);}30%{opacity:1;}100%{opacity:0; transform:translateY(12px);}}
@keyframes hmDrift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ---------- decorative primitives reused across bands ---------- */
.hm-dots{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.11;
  background-image:radial-gradient(circle,rgba(217,176,74,.9) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse at center,#000 20%,transparent 78%);
}
.hm-orb{
  position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(217,176,74,.28),transparent 66%);
  animation:hmGlow 8s ease-in-out infinite;
}

/* sliding double-arrow used by buttons, cards and icon links */
.arr{position:relative; display:inline-grid; place-items:center; width:1em; height:1em; overflow:hidden; flex:none;}
.arr i{grid-area:1/1; font-size:1em; transition:transform .5s var(--hm-ease);}
.arr i + i{transform:translateX(calc(var(--arr-shift) * -1));}
.arr-host:is(:hover,:focus-visible) .arr i:first-child{transform:translateX(var(--arr-shift));}
.arr-host:is(:hover,:focus-visible) .arr i + i{transform:translateX(0);}

/* ===================== Buttons (home polish) ===================== */
.home-page .btn{position:relative; overflow:hidden; isolation:isolate;}
.home-page .btn::before{
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:50%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg); transition:left .8s var(--hm-ease);
}
.home-page .btn:hover::before{left:130%;}
.home-page .btn-maroon{
  border-color:transparent;
  background-image:linear-gradient(120deg,var(--maroon-700) 0%,var(--maroon-900) 50%,var(--maroon-500) 100%);
  background-size:220% 100%; background-position:0 0;
  transition:background-position .6s var(--hm-ease), box-shadow .3s, transform .3s var(--hm-ease);
}
.home-page .btn-maroon:hover{
  background-color:transparent; background-position:100% 0;
  box-shadow:0 14px 26px -12px rgba(110,22,34,.85); transform:translateY(-1px);
}
.home-page .btn-gold{box-shadow:0 14px 30px -10px rgba(217,176,74,.5);}
.home-page .btn-outline-gold:hover{transform:translateY(-1px);}
.home-page .btn i{font-size:.85em;}

/* ===================== Scroll progress / toast ===================== */
/* back-to-top is the shared footer's .ss-totop — nothing to add here */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1001; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-300),var(--gold-500),var(--maroon-500));
}

.home-page .toast{
  bottom:92px; opacity:0; pointer-events:none;
  transform:translateY(24px);
  transition:transform .4s var(--hm-ease), opacity .3s ease;
}
.home-page .toast.show{opacity:1; transform:translateY(0);}
.home-page .toast i{color:var(--gold-300);}


/* ===================== 1 · Banner ===================== */
/* the banner is a <section>, so it has to opt back out of the band padding */
.home-page .ss-banner{padding:0; border-bottom:0;}
.home-page .ss-banner::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:6;
  background:linear-gradient(90deg,var(--maroon-700),var(--gold-400) 50%,var(--maroon-700));
}

/* ===================== 2 · Trust ticker ===================== */
.hm-ticker{
  position:relative; overflow:hidden; padding:15px 0; color:var(--maroon-950);
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300) 50%,var(--gold-600));
  border-bottom:1px solid rgba(58,10,17,.3);
}
.hm-ticker-track{display:flex; width:max-content; animation:hmMarquee 46s linear infinite;}
.hm-ticker:hover .hm-ticker-track{animation-play-state:paused;}
.hm-ticker-group{display:flex; align-items:center; gap:32px; padding-right:32px; flex:none;}
.hm-ticker-group span{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:.9rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.hm-ticker-group .sep{color:var(--maroon-700); font-size:.66rem;}

/* ===================== 3 · Brand intro band ===================== */
.home-page .hm-intro{
  color:var(--cream-100);
  padding:clamp(56px,6vw,104px) 0 clamp(60px,6.4vw,112px);
  background:
    radial-gradient(1100px 620px at 88% -20%,rgba(217,176,74,.20),transparent 62%),
    radial-gradient(900px 520px at 0% 110%,rgba(165,35,50,.34),transparent 62%),
    linear-gradient(158deg,var(--maroon-950) 0%,var(--maroon-900) 48%,var(--maroon-800) 100%);
}
.hm-intro::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(40,5,9,.5));
}
.hm-intro .hm-orb{width:min(640px,70vw); aspect-ratio:1; right:-160px; top:-200px;}
.hm-embers{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.hm-ember{
  position:absolute; bottom:-12px; width:6px; height:6px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,#fff1c9 0%,rgba(232,200,118,.85) 40%,transparent 72%);
}

.hm-intro-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center; gap:clamp(36px,4.6vw,86px);
}
.hm-eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--gold-300);
}
.hm-eyebrow::before{content:""; width:42px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-400));}
.hm-eyebrow i{font-style:normal; font-size:1rem; color:var(--gold-400);}

.hm-intro h1{
  font-family:var(--display); font-weight:600; color:var(--cream-100);
  font-size:clamp(2.35rem,4.7vw,4.15rem); line-height:1.06; letter-spacing:.005em;
  margin:0 0 22px;
}
.hm-intro h1 .line{display:block; overflow:hidden; padding-bottom:.07em;}
.hm-intro h1 .line > span{display:inline-block;}
.hm-intro h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--gold-300) 0%,#fff1c9 25%,var(--gold-400) 50%,#fff1c9 75%,var(--gold-300) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hmShimmer 7s linear infinite;
}
.hm-lead{
  max-width:56ch; margin:0 0 34px;
  color:#e8dccb; font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.75;
}
.hm-intro-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:34px;}

.hm-proof{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.hm-proof-rating{display:flex; flex-direction:column; gap:6px;}
.hm-proof-stars{display:flex; align-items:center; gap:4px; color:var(--gold-400); font-size:.84rem;}
.hm-proof-text{margin:0; font-size:.86rem; color:#d7c4ac; line-height:1.5;}
.hm-proof-text b{display:block; font-family:var(--display); color:var(--gold-300); font-size:.98rem;}
.hm-proof-line{width:1px; height:34px; background:rgba(217,176,74,.3);}

/* assurance tiles */
.hm-assure{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.2vw,18px);
  margin:0; padding:0; list-style:none;
}
.hm-assure li{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(20px,1.8vw,28px) clamp(18px,1.6vw,24px);
  border-radius:var(--hm-r); border:1px solid rgba(217,176,74,.26);
  background:linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .55s var(--hm-ease), border-color .45s, box-shadow .45s;
}
.hm-assure li::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s;
  background:radial-gradient(240px circle at 50% 0%,rgba(217,176,74,.26),transparent 68%);
}
.hm-assure li:hover{
  transform:translateY(-6px); border-color:rgba(217,176,74,.6);
  box-shadow:0 30px 46px -30px rgba(0,0,0,.9);
}
.hm-assure li:hover::before{opacity:1;}
.hm-assure .ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:14px; font-size:1.1rem; color:var(--maroon-950);
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  box-shadow:0 12px 22px -12px rgba(169,121,31,.85);
  transition:transform .6s var(--hm-ease), box-shadow .45s;
}
.hm-assure li:hover .ic{transform:rotate(-10deg) scale(1.06); box-shadow:0 0 0 7px rgba(217,176,74,.16);}
.hm-assure .big{
  display:block; font-family:var(--display); font-size:clamp(1.25rem,1.7vw,1.6rem);
  line-height:1.15; color:var(--gold-300); margin-bottom:4px;
}
.hm-assure .sub{display:block; font-size:.83rem; color:#d5c2aa; line-height:1.55;}

/* scroll cue */
.hm-cue{
  position:absolute; left:50%; bottom:18px; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--gold-300); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; opacity:.8;
}
.hm-cue .mouse{position:relative; width:23px; height:37px; border:1.5px solid rgba(232,200,118,.7); border-radius:14px;}
.hm-cue .mouse span{
  position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px;
  background:var(--gold-300); animation:hmWheel 1.8s var(--hm-soft) infinite;
}

/* ===================== Section heads ===================== */
.home-page .section-head{max-width:720px; margin:0 auto clamp(34px,3.4vw,54px);}
.home-page .section-head .kicker{
  display:inline-flex; align-items:center; gap:13px;
  font-size:1.06rem; letter-spacing:.02em;
}
.home-page .section-head .kicker::before,
.home-page .section-head .kicker::after{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,currentColor);
}
.home-page .section-head .kicker::after{transform:scaleX(-1);}
.home-page .section-head.left{text-align:left; margin-inline:0;}
.home-page .section-head.left .kicker::before{display:none;}
.home-page .section-head h2{
  font-size:clamp(1.85rem,3.3vw,2.85rem); line-height:1.13; margin:0 0 12px;
}
.home-page .section-head p{font-size:clamp(.94rem,1.05vw,1.04rem); line-height:1.7;}

.hm-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; margin-bottom:clamp(26px,2.6vw,38px);
}
.hm-head-row .section-head{margin:0; max-width:660px;}
.hm-nav{display:flex; gap:12px; flex:none;}
.nav-btn{
  position:relative; overflow:hidden; isolation:isolate;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1rem;
  border:1px solid var(--maroon-600); background:transparent; color:var(--maroon-700);
  transition:color .4s, border-color .4s, transform .4s var(--hm-ease), opacity .3s;
}
.nav-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:50%;
  background:linear-gradient(135deg,var(--maroon-700),var(--maroon-950));
  transform:scale(0); transition:transform .45s var(--hm-ease);
}
.nav-btn:hover{color:var(--gold-300); transform:translateY(-2px);}
.nav-btn:hover::before{transform:scale(1);}
.nav-btn.swiper-button-disabled{opacity:.35; cursor:default;}

/* carousels that have not booted degrade to a scroll row */
.home-page .swiper:not(.swiper-initialized) .swiper-wrapper{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
}
.home-page .swiper:not(.swiper-initialized) .swiper-slide{
  flex:0 0 min(300px,78%); width:auto; scroll-snap-align:start;
}

/* ===================== 4 · Categories ===================== */
.hm-cats{
  background:
    radial-gradient(900px 420px at 100% 0%,rgba(217,176,74,.18),transparent 60%),
    radial-gradient(760px 400px at 0% 100%,rgba(138,28,42,.09),transparent 62%),
    var(--paper);
}
.cat-swiper{padding:14px 8px 24px; margin:0 -8px;}
.hm-carousel-foot{display:flex; align-items:center; gap:24px; margin-top:16px;}
.hm-carousel-foot .count{
  flex:none; font-family:var(--display); color:var(--maroon-700);
  letter-spacing:.08em; font-size:.92rem;
}
.hm-carousel-foot .count b{font-size:1.35rem;}
.hm-carousel-foot .cat-progress.swiper-pagination-progressbar{
  position:relative; top:auto; left:auto; width:auto; flex:1; height:3px;
  border-radius:3px; overflow:hidden; background:var(--line);
}
.hm-carousel-foot .cat-progress .swiper-pagination-progressbar-fill{
  background:linear-gradient(90deg,var(--gold-500),var(--maroon-600));
}

/* ---------- image card shared by categories + cities ---------- */
.dest-card{
  position:relative; display:block; aspect-ratio:3/4; border-radius:clamp(18px,1.6vw,28px);
  overflow:hidden; isolation:isolate; color:var(--cream-100);
  background:linear-gradient(160deg,var(--maroon-700),var(--maroon-950));
  box-shadow:0 16px 32px -22px rgba(58,10,17,.6);
  transition:translate .6s var(--hm-ease), box-shadow .6s var(--hm-ease);
}
.dest-card:is(:hover,:focus-visible){
  translate:0 -10px;
  box-shadow:0 40px 54px -30px rgba(58,10,17,.75), 0 0 0 1px rgba(217,176,74,.6);
}
.dest-card:focus-visible{outline-offset:4px;}
.dest-media{position:absolute; inset:0; z-index:-3; overflow:hidden;}
.dest-media img{
  width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02);
  transition:transform 1.4s var(--hm-ease), filter 1s var(--hm-ease), opacity .7s ease;
}
.dest-media img.is-ready{opacity:1;}
.dest-card:is(:hover,:focus-visible) .dest-media img{transform:scale(1.13); filter:saturate(1.14) brightness(1.04);}
.dest-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform 1.1s var(--hm-ease);
}
.dest-card:is(:hover,:focus-visible) .dest-media::after{transform:translateX(120%);}
/* the resting scrim — deep enough under .dest-body to keep the name and tag
   legible over the bright product photography */
.dest-card::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg,
    rgba(40,5,9,.06) 0%,
    rgba(40,5,9,.20) 30%,
    rgba(40,5,9,.66) 56%,
    rgba(40,5,9,.93) 80%,
    rgba(40,5,9,.98) 100%);
}
.dest-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(200deg,rgba(217,176,74,.42) 0%,rgba(138,28,42,.74) 42%,rgba(40,5,9,.97) 100%);
  clip-path:circle(0% at 88% 90%); transition:clip-path .9s var(--hm-ease);
}
.dest-card:is(:hover,:focus-visible)::after{clip-path:circle(150% at 88% 90%);}
.dest-chip{
  position:absolute; top:18px; left:18px; max-width:calc(100% - 96px);
  padding:7px 13px; border-radius:999px; font-size:.7rem; font-weight:600; letter-spacing:.04em;
  color:var(--cream-100); background:rgba(40,5,9,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(232,200,118,.35);
  transition:background .5s, color .5s, translate .5s var(--hm-ease);
}
.dest-card:is(:hover,:focus-visible) .dest-chip{background:var(--gold-400); color:var(--maroon-950); translate:0 -2px;}
.dest-icon{
  position:absolute; top:14px; right:14px; width:50px; height:50px; border-radius:16px;
  display:grid; place-items:center; font-size:1.15rem; color:var(--gold-300);
  background:rgba(40,5,9,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(232,200,118,.45); box-shadow:0 10px 24px -12px rgba(0,0,0,.55);
  animation:hmFloat 4.2s ease-in-out infinite; animation-delay:var(--d,0s);
  transition:background .5s, color .5s, border-color .5s, box-shadow .5s;
}
.dest-icon i{transition:transform .8s var(--hm-ease);}
.dest-card:is(:hover,:focus-visible) .dest-icon{
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600)); color:var(--maroon-950); border-color:transparent;
  box-shadow:0 0 0 6px rgba(217,176,74,.2), 0 14px 26px -10px rgba(169,121,31,.8);
}
.dest-card:is(:hover,:focus-visible) .dest-icon i{transform:rotate(360deg) scale(1.1);}
.dest-body{position:absolute; left:0; right:0; bottom:0; padding:22px 84px 24px 22px;}
.dest-tag{display:block; margin-bottom:6px; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-300);}
.dest-name{
  margin:0; font-family:var(--display); font-size:clamp(1.22rem,1.35vw,1.5rem); line-height:1.18; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
  transition:color .5s, translate .6s var(--hm-ease);
}
.dest-name::after{
  content:""; display:block; width:26px; height:2px; margin-top:10px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-300),var(--gold-600)); transition:width .6s var(--hm-ease);
}
.dest-name .w{display:inline-block; white-space:nowrap;}
.dest-name .ch{display:inline-block;}
.dest-card:is(:hover,:focus-visible) .dest-name{color:#f6e4b3; translate:6px 0;}
.dest-card:is(:hover,:focus-visible) .dest-name::after{width:64px;}
.dest-card:is(:hover,:focus-visible) .dest-name .ch{animation:hmRoll .7s var(--hm-ease) both; animation-delay:calc(var(--i) * 22ms);}
.dest-reveal{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--hm-ease);}
.dest-reveal > div{overflow:hidden; min-height:0;}
.dest-desc{
  display:block; padding-top:12px; font-size:.84rem; line-height:1.55; color:#eadbc6;
  opacity:0; translate:0 12px; transition:opacity .5s, translate .6s var(--hm-ease);
}
.dest-cta{
  display:inline-block; margin-top:10px; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-300);
  opacity:0; translate:0 12px; transition:opacity .5s .08s, translate .6s var(--hm-ease) .08s;
}
.dest-card:is(:hover,:focus-visible) .dest-reveal{grid-template-rows:1fr;}
.dest-card:is(:hover,:focus-visible) :is(.dest-desc,.dest-cta){opacity:1; translate:0 0;}
.dest-arrow{
  position:absolute; right:20px; bottom:22px; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-size:.95rem; color:var(--gold-300);
  border:1px solid rgba(232,200,118,.55); background:rgba(40,5,9,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .5s, color .5s, border-color .5s, rotate .6s var(--hm-ease), scale .6s var(--hm-ease);
}
.dest-arrow::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(232,200,118,.6); opacity:0;
}
.dest-card:is(:hover,:focus-visible) .dest-arrow{
  background:var(--gold-400); color:var(--maroon-950); border-color:var(--gold-300); rotate:-45deg; scale:1.08;
}
.dest-card:is(:hover,:focus-visible) .dest-arrow::after{animation:hmRing 1.4s ease-out infinite;}
@media (hover:none){
  .dest-reveal{grid-template-rows:1fr;}
  .dest-desc{opacity:1; translate:0 0;}
}

/* ===================== 5 · Bestsellers ===================== */
.hm-best{
  background:
    radial-gradient(760px 380px at 8% 0%,rgba(217,176,74,.1),transparent 62%),
    var(--cream-050);
}
.filter-tabs{
  position:relative; display:flex; gap:4px; width:max-content; max-width:100%;
  margin:-6px auto clamp(30px,3vw,46px); padding:6px;
  overflow-x:auto; scrollbar-width:none; border-radius:999px;
  background:var(--paper); border:1px solid var(--line);
}
.filter-tabs::-webkit-scrollbar{display:none;}
html:not(.js) .filter-tabs{display:none;}
.filter-tabs button{
  position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border:0; border-radius:999px; background:transparent;
  font-size:.87rem; font-weight:600; color:var(--ink-soft); transition:color .35s;
}
.filter-tabs button i{font-size:.78rem; color:var(--gold-600); transition:color .35s;}
.filter-tabs button:hover{color:var(--maroon-700);}
.filter-tabs button.active{color:var(--cream-100);}
.filter-tabs button.active i{color:var(--gold-300);}
.ft-pill{
  position:absolute; z-index:0; top:0; left:0; width:0; height:0; border-radius:999px; pointer-events:none;
  background:linear-gradient(135deg,var(--maroon-700),var(--maroon-900));
  box-shadow:0 8px 18px -8px rgba(110,22,34,.7);
  transition:transform .5s var(--hm-ease), width .5s var(--hm-ease), height .5s var(--hm-ease);
}

/* The grid fills the shell, and every step is a divisor of the twelve cards
   below it (2 · 3 · 4 · 6) so the last row is never left with orphans. */
.home-page .prod-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.5vw,28px);
}
@media (min-width:680px){ .home-page .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1040px){ .home-page .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (min-width:1700px){ .home-page .prod-grid{grid-template-columns:repeat(6,minmax(0,1fr));} }
.p-item{display:flex; min-width:0;}
.p-item.is-hidden{display:none;}
.home-page .card{
  width:100%; border-radius:var(--hm-r);
  transition:translate .55s var(--hm-ease), box-shadow .55s var(--hm-ease), border-color .55s;
}
.home-page .card:hover{
  transform:none; translate:0 -8px; border-color:var(--gold-400);
  box-shadow:0 32px 46px -30px rgba(58,10,17,.6), 0 0 0 1px rgba(217,176,74,.35);
}
.home-page .card .thumb{isolation:isolate;}
.home-page .card .thumb-link{position:absolute; inset:0; z-index:0; display:block;}
.home-page .card .thumb img{transition:transform 1.2s var(--hm-ease), filter .8s;}
.home-page .card:hover .thumb img{transform:scale(1.12); filter:saturate(1.08);}
.home-page .card .thumb::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,rgba(58,10,17,0) 30%,rgba(58,10,17,.22) 58%,rgba(40,5,9,.8) 100%);
  transition:opacity .55s var(--hm-ease);
}
.home-page .card:hover .thumb::after{opacity:1;}
.home-page .card .thumb::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform 1s var(--hm-ease);
}
.home-page .card:hover .thumb::before{transform:translateX(120%);}
.home-page .badge{
  z-index:3; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
}
.home-page .badge i{font-size:.6rem;}
.home-page .badge.gold{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));}
.home-page .wish{
  z-index:3; width:38px; height:38px; border:0; font-size:.95rem;
  background:rgba(253,250,243,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 18px -8px rgba(58,10,17,.45);
  transition:background .35s, color .35s, scale .35s var(--hm-ease);
}
.home-page .wish:hover{scale:1.12; background:#fff;}
.home-page .wish .fa-solid{display:none;}
.home-page .wish.active{background:var(--maroon-700); color:var(--gold-300);}
.home-page .wish.active .fa-solid{display:inline-block;}
.home-page .wish.active .fa-regular{display:none;}
.home-page .card .info{position:relative;}
.home-page .card .info::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:2px;
  background:linear-gradient(90deg,var(--gold-400),var(--maroon-600));
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--hm-ease);
}
.home-page .card:hover .info::before{transform:scaleX(1);}
.home-page .card .cat-label{transition:letter-spacing .5s var(--hm-ease);}
.home-page .card:hover .cat-label{letter-spacing:.14em;}
.home-page .card h4{transition:color .4s, translate .5s var(--hm-ease);}
.home-page .card:hover h4{color:var(--maroon-700); translate:4px 0;}
.home-page .card .variants-mini{flex-wrap:wrap;}
.home-page .stars i{font-size:.72rem;}
.home-page .icon-cart{
  font-size:.9rem; background:linear-gradient(135deg,var(--maroon-800),var(--maroon-950));
  transition:background .4s, color .4s, rotate .5s var(--hm-ease), box-shadow .4s;
}
.home-page .card:hover .icon-cart{
  background:linear-gradient(135deg,var(--gold-300),var(--gold-600)); color:var(--maroon-950);
  rotate:-45deg; box-shadow:0 10px 20px -8px rgba(169,121,31,.75);
}
.home-page .view-all-wrap{margin-top:clamp(30px,3vw,48px);}
.home-page .view-all-wrap .btn{gap:12px;}

/* ===================== 6 · Purity promise (process rail) ===================== */
.home-page .hm-craft{
  color:var(--cream-100);
  background:
    radial-gradient(1000px 520px at 80% 0%,rgba(217,176,74,.16),transparent 62%),
    linear-gradient(150deg,var(--maroon-900),var(--maroon-950) 62%,var(--maroon-800));
}
.hm-steps{
  position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.8vw,30px);
}
/* the thread that links the four steps */
.hm-steps::before{
  content:""; position:absolute; z-index:0; left:12%; right:12%; top:44px; height:1px;
  background:repeating-linear-gradient(90deg,rgba(217,176,74,.55) 0 8px,transparent 8px 18px);
}
.hm-step{position:relative; z-index:1; text-align:center; padding:0 clamp(4px,.8vw,12px);}
.hm-step .ring{
  position:relative; width:88px; height:88px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; font-size:1.55rem; color:var(--gold-300);
  background:linear-gradient(155deg,rgba(74,20,28,.96),rgba(40,5,9,.96));
  border:1px solid rgba(217,176,74,.4);
  transition:transform .6s var(--hm-ease), background .5s, color .5s, border-color .5s, box-shadow .5s;
}
.hm-step .ring::after{
  content:attr(data-step);
  position:absolute; right:-6px; bottom:-6px;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:.82rem; font-weight:700; color:var(--maroon-950);
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  box-shadow:0 8px 16px -8px rgba(169,121,31,.9);
}
.hm-step:hover .ring{
  transform:translateY(-6px);
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  color:var(--maroon-950); border-color:transparent;
  box-shadow:0 0 0 8px rgba(217,176,74,.14), 0 20px 34px -16px rgba(169,121,31,.85);
}
.hm-step h3{
  font-family:var(--display); font-size:clamp(1.02rem,1.2vw,1.18rem);
  margin:0 0 8px; color:var(--cream-100);
}
.hm-step p{margin:0; font-size:.88rem; line-height:1.7; color:#d4c1a9;}

.hm-craft-foot{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,26px);
  flex-wrap:wrap; margin-top:clamp(34px,3.4vw,54px);
  padding-top:clamp(26px,2.6vw,38px); border-top:1px solid rgba(217,176,74,.22);
}
.hm-craft-foot .pill{
  display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px;
  border:1px solid rgba(217,176,74,.34); background:rgba(255,255,255,.04);
  font-size:.84rem; color:#e6d6bd;
}
.hm-craft-foot .pill i{color:var(--gold-400);}

/* ===================== 7 · Founder story ===================== */
.home-page .hm-story{background:var(--paper);}
.hm-story .hm-orb{width:min(520px,60vw); aspect-ratio:1; left:-180px; bottom:-200px; opacity:.5;}
.hm-story-in{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(36px,4.6vw,86px); align-items:center;
}
.hm-portrait{position:relative; width:100%; max-width:480px; margin-inline:auto;}
.hm-portrait::before{
  content:""; position:absolute; inset:0; z-index:0;
  border:1.5px solid var(--gold-500);
  border-radius:50% 50% var(--hm-r) var(--hm-r) / 26% 26% 3% 3%;
  transform:translate(20px,20px); transition:transform .6s var(--hm-ease);
}
.hm-portrait:hover::before{transform:translate(28px,28px);}
.ph-frame{
  position:relative; z-index:1; overflow:hidden; isolation:isolate;
  border-radius:50% 50% var(--hm-r) var(--hm-r) / 26% 26% 3% 3%;
  box-shadow:var(--shadow-maroon);
}
.ph-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:linear-gradient(0deg,rgba(58,10,17,.62),transparent 55%); transition:opacity .6s;
}
.hm-portrait:hover .ph-frame::after{opacity:1;}
.ph-inner img{width:100%; display:block; transition:transform 1.2s var(--hm-ease);}
.hm-portrait:hover .ph-inner img{transform:scale(1.05);}
.hm-portrait .tag{
  position:absolute; z-index:2; right:-6px; bottom:6px;
  display:flex; align-items:center; gap:9px; padding:13px 20px; border-radius:14px;
  background:var(--maroon-800); color:#f4e3b6; border:1px solid var(--gold-500);
  font-family:var(--display); font-size:.93rem;
  box-shadow:0 18px 30px -16px rgba(58,10,17,.7); animation:hmFloat 5s ease-in-out infinite;
}
.hm-portrait .tag i{color:var(--gold-300);}
.ph-orn{
  position:absolute; z-index:2; top:6px; left:-18px; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; font-size:1.45rem; color:var(--maroon-950);
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  box-shadow:0 0 0 8px rgba(217,176,74,.16), 0 14px 26px -12px rgba(169,121,31,.75);
}
.ph-orn i{animation:hmSpin 18s linear infinite;}

.hm-story-copy .kicker{
  font-family:var(--serif); font-style:italic; color:var(--maroon-600);
  font-size:1.1rem; margin:0 0 12px;
}
.hm-story-copy blockquote{
  font-family:var(--serif); font-style:italic; color:var(--ink);
  font-size:clamp(1.28rem,1.85vw,1.68rem); line-height:1.5;
  margin:0 0 24px; padding-left:24px; border-left:3px solid var(--gold-500);
}
.hm-story-copy blockquote .q{color:var(--gold-500); font-size:1rem; margin-right:10px; vertical-align:.35em;}
.hm-story-copy p{color:var(--ink-soft); line-height:1.8; margin:0 0 16px; max-width:70ch;}
.hm-story-copy .sign{font-family:var(--display); color:var(--maroon-700); font-size:1.08rem; margin-top:22px;}
.hm-story-copy .sign span{
  display:block; margin-top:3px; font-family:var(--sans); font-weight:400;
  font-size:.79rem; color:var(--ink-soft);
}
.stat-band{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1vw,16px); margin-top:30px;
}
.stat-band .st{
  text-align:center; padding:20px 12px; border-radius:16px;
  background:var(--cream-050); border:1px solid var(--line);
  transition:translate .5s var(--hm-ease), box-shadow .5s, border-color .5s;
}
.stat-band .st:hover{translate:0 -4px; border-color:var(--gold-400); box-shadow:var(--shadow-maroon);}
.stat-band .val{
  display:block; font-family:var(--display); font-size:clamp(1.55rem,2.1vw,2.05rem);
  line-height:1.15; color:var(--maroon-700);
}
.stat-band .lbl{font-size:.77rem; color:var(--ink-soft);}

/* ===================== 8 · Why us ===================== */
.home-page .hm-why{
  background:linear-gradient(160deg,var(--maroon-950),var(--maroon-800));
}
.hm-why .container{position:relative;}
.home-page .why-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(14px,1.5vw,26px);
}
.home-page .why-grid > div{display:flex;}
.home-page .why-card{
  position:relative; width:100%; overflow:hidden; isolation:isolate;
  padding:clamp(26px,2.2vw,34px) clamp(22px,1.9vw,28px);
  border-radius:var(--hm-r);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  transition:translate .5s var(--hm-ease), border-color .5s, box-shadow .5s;
}
.home-page .why-card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(217,176,74,.24),transparent 65%);
}
.home-page .why-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--gold-300),var(--gold-600));
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--hm-ease);
}
.home-page .why-card:hover{translate:0 -8px; border-color:rgba(217,176,74,.6); box-shadow:0 32px 50px -32px rgba(0,0,0,.9);}
.home-page .why-card:hover::before{opacity:1;}
.home-page .why-card:hover::after{transform:scaleX(1);}
.home-page .why-card .num{
  position:absolute; top:14px; right:20px; line-height:1;
  font-family:var(--display); font-size:2.9rem; font-weight:700; color:rgba(217,176,74,.12);
  transition:color .5s, translate .6s var(--hm-ease);
}
.home-page .why-card:hover .num{color:rgba(217,176,74,.32); translate:0 -4px;}
.home-page .why-card .ic{
  font-size:1.3rem; animation:hmFloat 4.5s ease-in-out infinite;
  transition:rotate .6s var(--hm-ease), box-shadow .5s;
}
.home-page .why-grid > div:nth-child(2) .ic{animation-delay:-1.1s;}
.home-page .why-grid > div:nth-child(3) .ic{animation-delay:-2.2s;}
.home-page .why-grid > div:nth-child(4) .ic{animation-delay:-3.3s;}
.home-page .why-card:hover .ic{rotate:-10deg; box-shadow:0 0 0 7px rgba(217,176,74,.16);}

/* ===================== 9 · Voices ===================== */
.hm-voices{background:var(--cream-050);}
.hm-voice-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(16px,1.6vw,26px);
}
.hm-voice{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(26px,2.2vw,36px) clamp(22px,2vw,32px);
  border-radius:var(--hm-r); background:var(--paper); border:1px solid var(--line);
  transition:translate .5s var(--hm-ease), border-color .45s, box-shadow .5s;
}
.hm-voice::before{
  content:"\201C"; position:absolute; top:6px; right:22px;
  font-family:var(--serif); font-size:6rem; line-height:1; color:rgba(199,154,46,.18);
  transition:color .5s, transform .6s var(--hm-ease);
}
.hm-voice:hover{translate:0 -7px; border-color:var(--gold-400); box-shadow:0 30px 44px -30px rgba(58,10,17,.5);}
.hm-voice:hover::before{color:rgba(199,154,46,.32); transform:translateY(-4px);}
.hm-voice .stars{color:var(--gold-500);}
.hm-voice p{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.65; color:var(--ink);
}
.hm-voice .who{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px;}
/* .who .av, not .av — it has to outrank the `.who span` rule below */
.hm-voice .who .av{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-size:.92rem; letter-spacing:.04em;
  color:var(--gold-300);
  background:linear-gradient(145deg,var(--maroon-600),var(--maroon-900));
  border:1px solid rgba(217,176,74,.45);
}
.hm-voice .who b{display:block; font-family:var(--display); font-size:.98rem; color:var(--ink); font-weight:600;}
.hm-voice .who span{font-size:.78rem; color:var(--ink-soft);}

/* ===================== 10 · Cities ===================== */
.home-page .hm-cities{
  background:
    radial-gradient(820px 400px at 0% 0%,rgba(217,176,74,.17),transparent 62%),
    var(--paper);
}
.city-swiper{padding:14px var(--hm-gutter) 34px;}
.city-card{aspect-ratio:auto; height:clamp(320px,26vw,400px);}
.city-card::before{background:linear-gradient(180deg,rgba(40,5,9,0) 30%,rgba(40,5,9,.55) 70%,rgba(40,5,9,.88) 100%);}
.city-art{
  position:absolute; inset:0; z-index:-3; overflow:hidden;
  background:
    radial-gradient(120% 80% at 15% 0%,var(--c2,rgba(232,200,118,.4)),transparent 60%),
    linear-gradient(165deg,var(--c1,var(--maroon-700)) 0%,var(--maroon-950) 100%);
  transition:transform 1.4s var(--hm-ease);
}
.city-art::before{
  content:""; position:absolute; inset:-20%;
  background:repeating-radial-gradient(circle at 85% 100%,rgba(232,200,118,.16) 0 1px,transparent 1px 22px);
  transition:transform 1.6s var(--hm-ease);
}
.city-art .wm{
  position:absolute; right:-22px; top:46px; font-size:11rem; line-height:1; color:rgba(232,200,118,.1);
  transition:transform 1.4s var(--hm-ease), color .6s;
}
.city-card:is(:hover,:focus-visible) .city-art{transform:scale(1.08);}
.city-card:is(:hover,:focus-visible) .city-art::before{transform:rotate(10deg) scale(1.1);}
.city-card:is(:hover,:focus-visible) .city-art .wm{transform:rotate(-12deg) scale(1.12); color:rgba(232,200,118,.2);}
.city-hi{
  display:block; margin-bottom:2px; font-family:var(--sans); font-weight:700;
  font-size:clamp(1.9rem,2.4vw,2.4rem); line-height:1.15;
  color:var(--gold-300); text-shadow:0 4px 20px rgba(0,0,0,.35);
  transition:translate .6s var(--hm-ease), color .5s;
}
.city-card:is(:hover,:focus-visible) .city-hi{translate:0 -4px; color:#fff1c9;}
.city-card .dest-name{font-size:1.18rem;}
.city-sub{display:flex; align-items:center; gap:7px; margin-top:10px; font-size:.78rem; color:#e6d3b8;}
.city-sub i{color:var(--gold-400); font-size:.72rem;}

/* ===================== 11 · Bulk enquiry band ===================== */
.home-page .hm-bulk{
  color:var(--cream-100);
  padding:clamp(52px,5.4vw,96px) 0;
  background:linear-gradient(120deg,var(--maroon-800),var(--maroon-950) 50%,var(--maroon-700));
  background-size:220% 220%; animation:hmDrift 16s ease infinite;
  border-block:1px solid rgba(217,176,74,.32);
}
.hm-bulk .hm-orb{width:min(420px,50vw); aspect-ratio:1; left:-120px; bottom:-170px;}
.hm-bulk-in{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:clamp(24px,3vw,52px); flex-wrap:wrap;
}
.hm-bulk-ic{
  flex:none; width:clamp(68px,5.4vw,92px); aspect-ratio:1; border-radius:26px;
  display:grid; place-items:center; font-size:clamp(1.6rem,2.2vw,2.1rem); color:var(--maroon-950);
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  box-shadow:0 0 0 10px rgba(217,176,74,.12), 0 22px 32px -14px rgba(0,0,0,.55);
  animation:hmFloat 4.4s ease-in-out infinite;
}
.hm-bulk-copy{flex:1 1 380px; min-width:0;}
.hm-bulk-copy .kicker{
  margin:0 0 6px; font-family:var(--serif); font-style:italic;
  font-size:1.08rem; color:var(--gold-300);
}
.hm-bulk-copy h2{
  font-family:var(--display); font-size:clamp(1.55rem,2.6vw,2.3rem);
  line-height:1.16; margin:0 0 10px; color:var(--cream-100);
}
.hm-bulk-copy p{margin:0; color:#d9c6ad; line-height:1.7; max-width:56ch;}
.hm-bulk-actions{display:flex; flex-direction:column; gap:12px; flex:none;}

/* ===================== Responsive ===================== */
@media (max-width:1180px){
  .hm-intro-in{grid-template-columns:minmax(0,1fr); gap:44px;}
  .hm-assure{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hm-story-in{grid-template-columns:minmax(0,1fr); gap:46px;}
  .hm-portrait{max-width:420px; margin-inline:auto;}
  .hm-cue{display:none;}                    /* stacked intro: the cue lands on the cards */
}
@media (max-width:1024px){
  .hm-steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 20px;}
  .hm-steps::before{display:none;}
}
@media (max-width:900px){
  .hm-assure{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hm-head-row{flex-direction:column; align-items:flex-start;}
  .hm-bulk-in{flex-direction:column; text-align:center;}
  .hm-bulk-copy{flex:none; width:100%;}     /* a 380px basis becomes 380px of height in a column */
  .hm-bulk-copy p{margin-inline:auto;}
  .hm-bulk-actions{flex-direction:row; flex-wrap:wrap; justify-content:center;}
}
@media (max-width:640px){
  .home-page{--hm-gutter:16px;}
  .hm-ticker-group span{font-size:.78rem;}
  .hm-eyebrow{font-size:1.05rem;}
  .hm-intro-ctas .btn{flex:1 1 100%;}
  .hm-proof-line{display:none;}
  .hm-assure{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .hm-assure li{padding:18px 14px;}
  .hm-assure .ic{width:40px; height:40px; margin-bottom:10px;}
  .nav-btn{width:46px; height:46px;}
  /* all four filters visible as a 2 × 2 block rather than a clipped scroller */
  .filter-tabs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; border-radius:22px; overflow:visible;}
  .filter-tabs button{justify-content:center; padding:11px 10px; font-size:.82rem;}
  .home-page .prod-grid{gap:12px;}
  .home-page .card .info{padding:14px 12px 16px;}
  .home-page .card h4{font-size:.95rem;}
  .home-page .price-row{flex-wrap:wrap; gap:4px 8px;}
  .home-page .add-row{gap:8px;}
  .home-page .add-row .btn{padding:10px 8px; font-size:.75rem;}
  .home-page .add-row .btn i{display:none;}
  .home-page .icon-cart{width:38px; height:38px;}
  .home-page .badge{font-size:.6rem; padding:4px 8px;}
  .hm-steps{grid-template-columns:minmax(0,1fr); gap:28px;}
  .hm-portrait{max-width:none;}
  .ph-orn{top:0; left:-10px; width:52px; height:52px; font-size:1.15rem;}
  .hm-portrait::before{transform:translate(11px,11px);}
  .hm-portrait .tag{right:0; bottom:-14px; padding:11px 16px; font-size:.85rem;}
  .stat-band{gap:8px;}
  .stat-band .st{padding:14px 8px;}
  .hm-voice::before{font-size:4.6rem; right:16px;}
  .city-card{height:320px;}
  .hm-bulk-actions{width:100%;}
  .hm-bulk-actions .btn{width:100%;}
  .home-page .toast{left:16px; right:78px; bottom:76px;}
  .to-top{right:14px; bottom:16px; width:44px; height:44px;}
}

/* ===================== Offer banner (mid-page) =====================
   Full-bleed band over images/banner/b4.jpg: copy on the art's maroon
   panel, a gold rosette seal over the products. Stacks on phones. */
.home-page .hm-promo{
  --hm-promo-ar:2;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(340px,27vw,760px);
  padding:0;
  background:linear-gradient(180deg,var(--maroon-900),var(--maroon-950));
}
/* gold rules top and bottom */
.hm-promo::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg,var(--gold-600),var(--gold-300) 30%,var(--gold-500) 55%,var(--gold-300) 80%,var(--gold-600)) top/100% 3px no-repeat,
    linear-gradient(90deg,var(--gold-600),var(--gold-300) 30%,var(--gold-500) 55%,var(--gold-300) 80%,var(--gold-600)) bottom/100% 3px no-repeat;
}
.hm-promo-bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 58%;
}
/* legibility wash over the copy side only */
.hm-promo::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 70% at 18% 40%,rgba(232,200,118,.12),transparent 70%),
    linear-gradient(90deg,rgba(40,5,9,.84) 0%,rgba(40,5,9,.62) 28%,rgba(40,5,9,.18) 46%,rgba(40,5,9,0) 58%);
}
.hm-promo-in{position:relative; z-index:1; padding-block:clamp(40px,4vw,72px);}
.hm-promo-copy{max-width:min(46%,760px);}

.hm-promo h2{
  margin:0 0 clamp(12px,1.2vw,22px);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.3rem,4.2vw,5.2rem); line-height:1.02; letter-spacing:-.005em;
  background:linear-gradient(180deg,#fff4d6 0%,var(--gold-300) 52%,var(--gold-500) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 14px rgba(20,3,6,.45));
}
.hm-promo h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--gold-300) 0%,#fff1c9 25%,var(--gold-400) 50%,#fff1c9 75%,var(--gold-300) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hmPromoShimmer 7s linear infinite;
}
@keyframes hmPromoShimmer{to{background-position:200% center;}}

.hm-promo-sub{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55em;
  margin:0 0 clamp(22px,2.2vw,38px);
  font-size:clamp(1.02rem,1.55vw,1.7rem); font-weight:500; letter-spacing:.03em;
  color:var(--cream-100);
}
.hm-promo-sub::before,
.hm-promo-sub::after{content:"\2013"; color:var(--gold-300);}
.hm-promo-sub span{color:var(--gold-400); font-size:.8em;}
.hm-promo .btn-lg{padding:clamp(14px,1.1vw,20px) clamp(30px,2.6vw,48px); font-size:clamp(.95rem,1.05vw,1.15rem);}

/* rosette seal */
.hm-promo-seal{
  position:absolute; z-index:2; top:50%; right:clamp(16px,2.6vw,60px);
  width:clamp(150px,16vw,320px); aspect-ratio:1; margin-top:calc(clamp(150px,16vw,320px) / -2);
  display:grid; place-items:center;
  filter:drop-shadow(0 16px 30px rgba(20,3,6,.5));
  transition:transform .5s var(--hm-ease);
}
.hm-promo-seal::before{
  content:""; position:absolute; inset:0;
  background:conic-gradient(from 20deg,#f7e2a4,var(--gold-500),#fff1c9,var(--gold-600),#f3d98f,var(--gold-500),#fff1c9,var(--gold-400),#f7e2a4);
  clip-path:polygon(50.0% 0.0%,58.9% 5.4%,69.1% 3.8%,75.3% 12.2%,85.4% 14.6%,87.8% 24.7%,96.2% 30.9%,94.6% 41.1%,100.0% 50.0%,94.6% 58.9%,96.2% 69.1%,87.8% 75.3%,85.4% 85.4%,75.3% 87.8%,69.1% 96.2%,58.9% 94.6%,50.0% 100.0%,41.1% 94.6%,30.9% 96.2%,24.7% 87.8%,14.6% 85.4%,12.2% 75.3%,3.8% 69.1%,5.4% 58.9%,0.0% 50.0%,5.4% 41.1%,3.8% 30.9%,12.2% 24.7%,14.6% 14.6%,24.7% 12.2%,30.9% 3.8%,41.1% 5.4%);
  animation:hmSealSpin 60s linear infinite;
}
@keyframes hmSealSpin{to{transform:rotate(360deg);}}
.hm-promo-seal .in{
  position:relative; width:80%; aspect-ratio:1; min-height:0; overflow:hidden; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:10%;
  background:radial-gradient(circle at 35% 30%,#fffdf6 0%,#fbf0d4 55%,#f1dca6 100%);
  box-shadow:0 0 0 2px var(--gold-500), 0 0 0 5px #fbf0d4, 0 0 0 6px rgba(169,121,31,.55), inset 0 2px 10px rgba(169,121,31,.25);
}
.hm-promo-seal b{
  display:block;
  font-family:var(--serif); font-weight:700; line-height:1.05;
  font-size:clamp(1.25rem,1.9vw,2.4rem); color:var(--maroon-700);
}
.hm-promo-seal .in > span{
  margin-top:.5em; font-size:clamp(.72rem,.85vw,1rem); font-weight:500; color:var(--ink-soft);
  white-space:nowrap;
}
.hm-promo-seal:hover{transform:scale(1.04) rotate(-3deg);}
.hm-promo-seal:focus-visible{outline:2px solid var(--gold-300); outline-offset:6px; border-radius:50%;}

@media (max-width:900px){
  .home-page .hm-promo{display:block; min-height:0;}
  .hm-promo-bg{
    position:relative; z-index:auto; display:block;
    height:auto; aspect-ratio:var(--hm-promo-ar); object-position:80% 50%;
  }
  .hm-promo::before{
    inset:0 0 auto 0; height:calc(100vw / var(--hm-promo-ar)); z-index:1;
    background:linear-gradient(0deg,var(--maroon-900) 0%,rgba(58,10,17,0) 38%);
  }
  .hm-promo-in{padding-block:22px 44px; text-align:center;}
  .hm-promo-copy{max-width:none;}
  .hm-promo-sub{justify-content:center;}
  .hm-promo-seal{
    top:14px; right:auto; left:14px; margin-top:0;
    width:clamp(116px,26vw,150px);
  }
  .hm-promo-seal .in{padding:6%;}
  .hm-promo-seal b{font-size:clamp(1rem,3.6vw,1.35rem);}
  .hm-promo-seal .in > span{font-size:clamp(.6rem,1.7vw,.7rem); margin-top:.35em;}
}
@media (max-width:600px){
  .home-page .hm-promo{--hm-promo-ar:1.6;}
  .hm-promo h2{font-size:clamp(2rem,9vw,2.6rem);}
  .hm-promo .btn-lg{width:100%; max-width:320px;}
}
@media (prefers-reduced-motion:reduce){
  .hm-promo h2 em, .hm-promo-seal::before{animation:none;}
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
  .home-page *, .home-page *::before, .home-page *::after{
    animation-iteration-count:1 !important; scroll-behavior:auto !important;
  }
  .hm-ticker-track, .hm-bulk{animation:none;}
  .intro-pending .hm-reveal{visibility:visible;}
}