/* Fiji Islands Supermarket — Newton, Surrey BC
   Design system: drawn from the store's own storefront signage — the deep
   sign-green of the wordmark plus the hibiscus red/gold of the flower
   artwork, so the site reads as the same brand as the physical shop. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --cream:#FFFFFF;
  --paper2:#F5F1E8;
  --ink:#1F2A22;
  --ink-soft:#57605A;
  --green-900:#1C3D28;   /* sign wordmark green */
  --green-800:#254D33;
  --green-700:#2F6340;
  --green-500:#6B8C74;
  --coral:#D8342A;       /* hibiscus petal red */
  --coral-dark:#B5271E;
  --gold:#C98A2E;        /* hibiscus stamen gold */
  --gold-soft:#F5DFAE;
  --line:rgba(31,42,34,.14);
  --line-dark:rgba(255,255,255,.18);
  --shadow:0 20px 50px -20px rgba(28,61,40,.4);
  --radius:16px;
  --maxw:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fraunces',serif;margin:0;font-weight:600;letter-spacing:-.01em;color:var(--green-900)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.pad{padding:112px 0}
@media(max-width:720px){.pad{padding:76px 0}}

::selection{background:var(--coral);color:var(--cream)}

/* focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--coral);outline-offset:3px;border-radius:4px;
}

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

/* progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--coral),var(--gold));z-index:999;transition:width .1s linear}

/* ---------- INTRO ---------- */
.intro{position:fixed;inset:0;z-index:600;background:var(--green-900);display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease),visibility 0s linear .6s}

.intro.ready .mk{opacity:1;transform:scale(1)}
.intro.out{opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
html:not(.js) .intro{display:none}

/* ---------- UTILITY BAR ---------- */
.utilbar{position:fixed;top:0;left:0;right:0;z-index:210;background:var(--green-900);color:rgba(246,244,239,.82);transition:transform .35s var(--ease),opacity .3s var(--ease)}
.ubwrap{height:38px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.ubinfo{display:flex;align-items:center;gap:22px}
.ubinfo a{display:flex;align-items:center;gap:6px;opacity:.9;font-weight:500}
.ubinfo a:hover{opacity:1;color:var(--gold)}
.ubinfo svg{width:14px;height:14px;flex:none}
.ubstatus{display:flex;align-items:center;gap:7px;font-weight:700}
.ubstatus .dot{width:6px;height:6px;border-radius:50%;border:1.3px solid rgba(246,244,239,.5);background:transparent}
.ubstatus.is-open{color:var(--cream)}
.ubstatus.is-open .dot{background:var(--cream);border-color:var(--cream);box-shadow:0 0 0 3px rgba(246,244,239,.22)}
.ubstatus.is-closed{color:rgba(246,244,239,.55)}
.ubright{display:flex;gap:20px}
.ubright a{opacity:.85;font-weight:500}
.ubright a:hover{opacity:1;color:var(--gold)}
body.scrolled .utilbar{transform:translateY(-100%);opacity:0}
@media(max-width:880px){.ubright{display:none}.ubinfo a:first-child{display:none}}
@media(max-width:560px){.utilbar{display:none}}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:38px;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
  padding:16px 28px;
  transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),top .35s var(--ease);
}
@media(max-width:560px){.nav{top:0}}
body.scrolled .nav{top:0}
.nav::before{
  /* always on, not just after scroll: the hero is a carousel with dark promo
     slides behind it, so a "transparent until scroll" nav goes illegible
     over 3 of its 4 slides. A stable light strip beats a prettier but
     unreadable one. */
  content:'';position:absolute;inset:0;background:rgba(246,244,239,.92);backdrop-filter:blur(14px);
  transition:border-color .35s var(--ease);z-index:-1;border-bottom:1px solid transparent;
}
.nav.small{padding:11px 28px}
.nav.small::before{border-bottom-color:var(--line)}





/* search */
.searchwrap{position:relative;flex:1 1 auto;max-width:420px;min-width:160px}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--paper2);border:1px solid var(--line);border-radius:100px;padding:10px 18px;transition:border-color .25s,box-shadow .25s}
.searchbar:focus-within{border-color:var(--coral-dark);box-shadow:0 0 0 3px rgba(23,22,19,.12)}
.searchbar svg{width:17px;height:17px;color:var(--ink-soft);flex:none}
.searchbar input{border:0;background:none;outline:0;font:inherit;font-size:13.5px;width:100%;color:var(--ink)}
.searchbar input::placeholder{color:var(--ink-soft);opacity:.75}
.searchresults{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;z-index:250;max-height:360px;overflow-y:auto}
.searchresults a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--green-900)}
.searchresults a:hover,.searchresults a.active{background:var(--paper2)}
.searchresults .sr-dept{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;flex:none}
.searchresults .sr-empty{padding:14px;font-size:13.5px;color:var(--ink-soft);text-align:center}

.navlinks{display:flex;align-items:center;gap:26px;flex:none}
.navlinks a{font-size:14px;font-weight:600;color:var(--green-900);position:relative;padding:4px 0;white-space:nowrap}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--coral);transition:right .3s var(--ease)}
.navlinks a:hover::after,.navlinks a.on::after{right:0}
.navactions{display:flex;align-items:center;gap:10px;flex:none}
.navcta{display:flex;align-items:center;gap:8px;background:var(--coral);color:var(--cream);padding:11px 20px;border-radius:100px;font-weight:700;font-size:14px;box-shadow:0 10px 24px -10px rgba(23,22,19,.55);white-space:nowrap}
.navcta:hover{background:var(--coral-dark)}
.navcta.ghost{background:transparent;color:var(--green-900);border:1.5px solid var(--line);box-shadow:none}
.navcta.ghost:hover{border-color:var(--green-900);background:rgba(21,44,37,.05)}
.burger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center;flex:none}
.burger span{width:20px;height:2px;background:var(--green-900);transition:.3s}

@media(max-width:1080px){.navcta.ghost{display:none}}
/* navlinks go off-canvas well before the header can run out of room —
   crammed at exactly the pinch point is how headers silently overlap content */
@media(max-width:1360px){
  .navlinks{position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);background:var(--green-900);flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;gap:26px;transform:translateX(100%);transition:transform .4s var(--ease);z-index:150}
  .navlinks.open{transform:translateX(0)}
  .navlinks a{color:var(--cream);font-size:19px}
  .navlinks a::after{display:none}
  .navactions .navcta:not(.ghost){padding:11px 16px}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:880px){
  .nav{flex-wrap:wrap}
  .searchwrap{order:3;flex:1 1 100%;max-width:none;margin-top:2px}
}

/* ---------- HERO / CAROUSEL ---------- */
.hero{position:relative}
.carousel{position:relative;min-height:100svh;overflow:hidden;background:var(--cream)}

/* photo-forward hero: full-bleed product photography, a stamp-style badge,
   and a dark overlay card carrying the headline — the local-grocer pattern */
.herophoto{background:var(--green-900)}
.heroimg{position:absolute;inset:0;z-index:0;overflow:hidden}
.heroimg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:saturate(1.05) contrast(1.04);transform:scale(1.06);transition:transform 9s linear}
/* Ken Burns — a slow, barely-there drift only on the slide currently on
   screen; nothing moves on inactive slides so there's no wasted motion. */
.slide.is-active .heroimg img{transform:scale(1.14)}
@media (prefers-reduced-motion: reduce){ .heroimg img{transition:none;transform:scale(1)!important} }
.heroimg::after{
  /* stopped tuning this per-viewport — three attempts at a light-to-dark
     gradient all failed the same way against bright, dense produce photos
     (cherries, strawberries), because "dark enough" depends on exactly
     where text lands, which changes with wrap width. One strong uniform
     wash, same everywhere, can't have that failure mode: every pixel of
     the photo gets the same darkening regardless of crop or viewport. */
  content:'';position:absolute;inset:0;background:rgba(4,10,7,.82);
}
.promo-festival .heroimg img{object-position:center 30%}
.promo-pantry .heroimg img{object-position:center 30%}
.herophoto .wrap{position:relative;z-index:1;width:100%;padding-top:24px;padding-bottom:24px}
.herobadge{
  position:absolute;top:-18px;right:28px;z-index:2;width:120px;height:120px;border-radius:50%;
  background:var(--coral);color:var(--cream);display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:19px;line-height:1.18;box-shadow:var(--shadow);
  transform:rotate(6deg);
}
/* the card is a genuine solid panel, not text floating on the photo — that's
   what was making it unreadable, and inconsistent margin-top chaining is what
   let lines overlap on narrow screens. flex + gap replaces every margin-top
   here, which can't collapse or overlap regardless of how much text wraps. */
.herocard{
  /* no floating panel — a boxed translucent card over a busy photo just
     reads as a CSS default, not a designed choice. Text sits straight on
     the image; the gradient behind it (.heroimg::after) plus a soft
     text-shadow carry all the contrast, the way real editorial hero
     treatments do it. */
  position:relative;max-width:600px;display:flex;flex-direction:column;gap:20px;
}
.herocard h1,.herocard .sub,.herocard .eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.7),0 0 40px rgba(0,0,0,.35)}
.herocard .eyebrow{margin:0;align-self:flex-start;background:rgba(255,255,255,.14);color:var(--cream);border:1px solid rgba(255,255,255,.28);white-space:nowrap}
.herocard .eyebrow .pip{background:var(--gold-soft);flex:none}
.herocard h1{color:var(--cream)}
.herocard h1 .em{color:var(--gold-soft)}
@media(max-width:560px){
  .herocard .eyebrow{white-space:normal;font-size:11px;line-height:1.5;padding:8px 14px;border-radius:14px;letter-spacing:.06em;text-align:left}
}
.herocard .sub{margin:0;max-width:none;color:#fff;font-weight:500;font-size:18.5px;line-height:1.7}
.herocard .ctas{margin:0}
.herocard .ctas .btn.ghost{color:var(--cream);border-color:rgba(255,255,255,.55)}
.herocard .ctas .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:var(--cream)}
.herocard .badges{margin:0}
.herocard .badges b{color:var(--cream)}
.herocard .badges b svg{color:var(--gold-soft)}
.herocard #livestatus{border-color:rgba(255,255,255,.5)}
.herocard #livestatus.is-closed{color:var(--cream);border-color:rgba(255,255,255,.5)}
.herocard #livestatus.is-closed svg{color:var(--cream)}
@media(max-width:720px){
  .herobadge{width:88px;height:88px;font-size:14px;top:-14px;right:16px}
  .herocard{max-width:100%;padding:60px 22px 26px;gap:18px;border-radius:16px}
}
.slide{
  /* out-then-in, never both: two slides crossfading at once means two sets
     of real, readable text sitting on top of each other for the whole
     transition — this fades the leaving slide out completely before the
     next one fades in, driven by app.js so there's no simultaneous overlap. */
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:172px 0 96px;opacity:0;visibility:hidden;
  transition:opacity .38s ease-out;
}
.slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity .45s ease}
/* outgoing stays fully visible UNDERNEATH while the next fades in on top —
   removing it first is what left the hero blank for ~400ms. Its text is
   hidden instantly so the two captions can never ghost over each other. */
.slide.is-prev{opacity:1;visibility:visible;z-index:1}
.slide.is-prev .wrap{opacity:0}
@media(max-width:720px){.slide{padding:150px 0 80px}}

.slide.promo{color:var(--cream)}
.slide.promo .wrap{max-width:680px;position:relative;z-index:1}
.promotag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(246,244,239,.12);backdrop-filter:blur(6px);border:1px solid rgba(246,244,239,.22);padding:9px 18px 9px 14px;border-radius:100px;margin-bottom:26px}
.promotag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-soft);flex:none}
.slide.promo h2{color:var(--cream);font-size:clamp(32px,5vw,58px);line-height:1.08;margin-bottom:20px}
.slide.promo p{font-size:18px;line-height:1.6;color:rgba(246,244,239,.82);max-width:520px;margin-bottom:34px}
.slide.promo .btn.solid{background:var(--cream);color:var(--green-900)}
.slide.promo .btn.solid:hover{background:var(--gold);color:var(--green-900)}
.promo-festival{background:linear-gradient(150deg,#082817,var(--green-700) 120%)}
.promo-produce{background:linear-gradient(150deg,var(--green-800),#1C7A45 120%)}
.promo-pantry{background:linear-gradient(150deg,#082817,#1F6B3E 120%)}

.carouselnav{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:5}
.carrow{width:38px;height:38px;border-radius:50%;background:rgba(246,244,239,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;color:var(--green-900);transition:background .25s,transform .2s}
.carrow:hover{background:var(--cream);transform:scale(1.06)}
.cardots{display:flex;gap:8px}
.cardots .dot{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(21,44,37,.22);transition:background .25s,width .25s,border-radius .25s}
.cardots .dot.is-active{background:var(--green-900);width:24px;border-radius:5px}
.carousel.on-dark .carrow{background:rgba(246,244,239,.22);color:var(--cream)}
.carousel.on-dark .carrow:hover{background:rgba(246,244,239,.34)}
.carousel.on-dark .cardots .dot{background:rgba(246,244,239,.32)}
.carousel.on-dark .cardots .dot.is-active{background:var(--cream)}
@media(max-width:720px){.carouselnav{bottom:16px;gap:12px}.carrow{width:32px;height:32px;font-size:18px}}

.mesh{position:absolute;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.blob.b1{width:520px;height:520px;background:radial-gradient(circle,var(--gold-soft),transparent 70%);top:-160px;right:-120px}
.blob.b2{width:440px;height:440px;background:radial-gradient(circle,var(--coral),transparent 70%);opacity:.28;bottom:-180px;left:-100px}
.blob.b3{width:320px;height:320px;background:radial-gradient(circle,var(--green-500),transparent 70%);opacity:.25;top:30%;left:44%}
.leaf-tex{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}

.hero .wrap{position:relative;z-index:1}
.herogrid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
@media(max-width:980px){.herogrid{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--coral-dark);background:rgba(23,22,19,.1);padding:8px 16px;border-radius:100px;margin-bottom:26px}
.eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--coral)}

.hero h1{font-size:clamp(36px,5.4vw,68px);line-height:1.15;font-weight:600}
/* the stagger-reveal wrapper needs overflow:hidden to hide the un-revealed
   line sliding up from below — but a tight line-box clips descenders (the
   tail on j/g/y/p). Padding the box and pulling it back with a matching
   negative margin gives descenders room without opening any visible gap. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero h1 .ln i{display:block;font-style:normal;transform:translateY(110%)}
.hero h1 .em{font-weight:500}

.hero .sub{margin-top:28px;max-width:540px;font-size:18px;line-height:1.65;color:var(--ink-soft)}
.hero .ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:100px;font-weight:700;font-size:15px;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.btn.solid{background:var(--green-900);color:var(--cream);box-shadow:0 14px 30px -14px rgba(21,44,37,.55)}
.btn.solid:hover{background:var(--coral-dark);box-shadow:0 14px 30px -14px rgba(20,18,14,.55)}
.btn.ghost{border:1.5px solid var(--line);color:var(--green-900)}
.btn.ghost:hover{border-color:var(--green-900);background:rgba(21,44,37,.05)}

.badges{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:52px}
.badges b{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--green-900)}
.badges b svg{width:16px;height:16px;color:var(--ink)}
#livestatus{padding:9px 16px 9px 12px;border-radius:100px;border:1.5px solid var(--green-900);transition:background .25s,color .25s}
#livestatus svg{width:15px;height:15px}
#livestatus.is-open{background:var(--green-900);color:var(--cream);border-color:var(--green-900)}
#livestatus.is-open svg{color:var(--cream)}
#livestatus.is-closed{background:transparent;color:var(--ink);border-color:var(--line)}
#livestatus.is-closed svg{color:var(--ink-soft)}

/* ---------- HERO VISUAL: composed stack cards (no stock photography) ---------- */
.herovisual{position:relative;height:400px;perspective:1200px}
/* the rotated stack-card composition needs real horizontal room to stay inside
   its own box — on narrow screens the rotated corners overflowed into the
   section below. Rather than a cramped, glitchy version, it's desktop-only;
   the typographic hero carries mobile on its own. */
@media(max-width:980px){.herovisual{display:none}}
.stackcard{position:absolute;border-radius:24px;padding:30px;box-shadow:var(--shadow);transform-style:preserve-3d}
.stackcard.back{inset:0 8% 10% 0;background:var(--green-900);color:var(--cream);transform:rotate(-6deg);overflow:hidden}
.stackcard.back .markbig{position:absolute;right:-36px;bottom:-36px;width:230px;height:230px;color:var(--gold);opacity:.16}
.scnum{font-family:'Inter',sans-serif;font-size:clamp(44px,5vw,60px);font-weight:600;line-height:1;position:relative}
.scnum span{font-size:.5em;vertical-align:top;color:var(--gold)}
.sclabel{margin-top:10px;font-size:14px;color:rgba(246,244,239,.72);line-height:1.4;position:relative}
.stackcard.front{inset:16% 0 0 14%;background:var(--cream);border:1px solid var(--line);transform:rotate(4deg);display:flex;flex-direction:column;justify-content:space-between}
.sctag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-dark);background:rgba(23,22,19,.1);padding:6px 13px;border-radius:100px}
.scline{font-family:'Fraunces',serif;font-size:clamp(17px,1.8vw,21px);line-height:1.32;color:var(--green-900);margin-top:16px}
.sciconrow{display:flex;gap:14px;margin-top:16px}
.sciconrow svg{width:24px;height:24px;color:var(--coral-dark)}
.floatpill{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%) rotate(-2deg);background:var(--cream);border:1.5px solid var(--green-900);border-radius:100px;padding:12px 22px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;box-shadow:var(--shadow);z-index:3;color:var(--ink);transition:background .25s,color .25s}
.floatpill .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-soft);background:transparent;flex:none}
.floatpill.is-open{background:var(--green-900);color:var(--cream)}
.floatpill.is-open .dot{background:var(--cream);border-color:var(--cream);box-shadow:0 0 0 3px rgba(246,244,239,.22)}
@media(max-width:560px){.floatpill{padding:9px 16px;font-size:12px}.stackcard{padding:22px}}

.scrollhint{position:absolute;left:28px;bottom:28px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);z-index:1}
.scrollhint .bar{width:1.5px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scrollhint .bar::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--coral);animation:scrollbar 1.8s ease-in-out infinite}
@keyframes scrollbar{0%{top:-100%}50%{top:0}100%{top:100%}}

/* ---------- QUICK DEPARTMENT TILES (shop-by-category strip) ---------- */
.quickdept{background:var(--paper2);padding:24px 0;border-bottom:1px solid var(--line)}
.qdwrap{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.qdwrap::-webkit-scrollbar{display:none}
.qdtile{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:100px;text-align:center;font-size:12px;font-weight:700;color:var(--green-900);padding:12px 6px;border-radius:16px;transition:background .25s,transform .25s}
.qdtile:hover{background:var(--cream);transform:translateY(-3px)}
.qdic{width:58px;height:58px;border-radius:50%;background:var(--cream);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.qdic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.qdtile:hover .qdic{border-color:var(--coral-dark);box-shadow:0 8px 20px -10px rgba(23,22,19,.4)}
.qdtile:hover .qdic img{filter:grayscale(.2) contrast(1.05)}

/* ---------- PRODUCT GRID ("In the Aisles") ---------- */
.aisles{background:var(--cream)}
.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:920px){.prodgrid{grid-template-columns:repeat(2,1fr)}}
.prod{position:relative;background:var(--paper2);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,opacity .25s,filter .25s}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(21,44,37,.2)}
.prodphoto{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.prodphoto img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08);transition:transform .6s var(--ease),filter .4s var(--ease)}
.prod:hover .prodphoto img{transform:scale(1.07);filter:grayscale(.15) contrast(1.05)}
.prodphoto.iconph{display:flex;align-items:center;justify-content:center}
.prodphoto.iconph svg{width:40px;height:40px;color:var(--green-700)}
.prodtag{position:absolute;top:10px;left:10px;z-index:1;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-dark);background:rgba(246,244,239,.92);padding:4px 9px;border-radius:100px}
.prodbody{padding:16px 14px 20px}
.prod h3{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:10px;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.prodstock{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green-700)}
.prodstock::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green-500)}

/* search-driven emphasis, shared by .prod and .cell */
.prod.dim,.cell.dim,.qdtile.dim{opacity:.32;filter:grayscale(.5)}
.prod.hi,.cell.hi{outline:2.5px solid var(--coral);outline-offset:4px}

/* ---------- MARQUEE ---------- */
.marquee-wrap{background:var(--green-900);padding:22px 0;overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.marquee{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee span{display:flex;align-items:center;white-space:nowrap;font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--paper2);padding:0 28px}
.marquee span::after{content:'✦';font-style:normal;color:var(--coral);margin-left:28px;font-size:14px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee{animation:none}}

/* ---------- REVEAL ----------
   IntersectionObserver-driven (see app.js), not scroll-position math —
   can't desync from a smooth-scroll library and can't get stuck hidden. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.bento .cell,.revgrid .revcard,.festlist li{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.bento.in .cell,.revgrid.in .revcard,.festlist.in li{opacity:1;transform:none}
/* no-JS: never hide content behind an animation that will never fire */
html:not(.js) .reveal,html:not(.js) .bento .cell,html:not(.js) .revgrid .revcard,html:not(.js) .festlist li{opacity:1;transform:none}

/* ---------- ABOUT ---------- */
.about .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.kicker{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--coral-dark);margin-bottom:16px;display:block}
.about h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;max-width:520px}
.about .lede{margin-top:24px;font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:520px}
.about .lede + .lede{margin-top:14px}
.aboutphoto{border-radius:var(--radius);overflow:hidden;margin-bottom:32px;box-shadow:var(--shadow)}
.aboutphoto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08);transition:filter .5s var(--ease),transform .5s var(--ease)}
.aboutphoto:hover img{filter:grayscale(0) contrast(1.04);transform:scale(1.03)}
.statcol{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.statrow{
  position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:18px;
  padding:22px 4px 22px 14px;border-bottom:1px solid var(--line);overflow:hidden;
  transition:padding-left .35s var(--ease),background .35s var(--ease);
}
.statrow::before{
  /* accent bar that wipes in from the left on hover — the row itself also
     nudges right so it reads as one deliberate motion, not a decal on top */
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--coral);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease);
}
.statrow:hover{padding-left:22px;background:var(--paper2)}
.statrow:hover::before{transform:scaleY(1)}
.si{
  width:44px;height:44px;flex:none;border-radius:50%;background:var(--paper2);color:var(--green-800);
  display:flex;align-items:center;justify-content:center;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.si svg{width:21px;height:21px}
.statrow:hover .si{background:var(--coral);color:var(--cream);transform:rotate(-8deg) scale(1.06)}
.statrow .v{font-family:'Inter',sans-serif;font-size:34px;font-weight:700;color:var(--green-900);display:flex;align-items:baseline;gap:2px;letter-spacing:-.01em}
.statrow .l{font-size:14px;color:var(--ink-soft);text-align:right;line-height:1.4}
@media(max-width:480px){
  .statrow{grid-template-columns:auto 1fr;row-gap:6px}
  .statrow .l{grid-column:2;text-align:left;order:3}
  .si{width:38px;height:38px}
  .si svg{width:18px;height:18px}
}

/* ---------- DEPARTMENTS ---------- */
.departments{background:var(--paper2)}
.dept-head{max-width:640px;margin-bottom:56px}
.dept-head h2{font-size:clamp(30px,3.6vw,46px)}
.dept-head p{margin-top:18px;font-size:17px;color:var(--ink-soft)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cell{
  position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.cell::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(23,22,19,.14),transparent 70%);
}
.cell:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(21,44,37,.22)}
.cell:hover::before{opacity:1}
.cell .ic{width:46px;height:46px;color:var(--coral-dark);margin-bottom:22px;position:relative}
.cell h3{font-size:20px;font-weight:700;margin-bottom:10px;position:relative}
.cell p{font-size:15px;color:var(--ink-soft);line-height:1.6;position:relative}
.cell::after{content:attr(data-num);position:absolute;top:14px;right:20px;font-family:'Fraunces',serif;font-size:52px;font-weight:600;color:rgba(21,44,37,.06);line-height:1}
@media(max-width:920px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bento{grid-template-columns:1fr}}

/* accent tile — one dark card breaks the uniform grid, bento-style rhythm */
.cell.accent{background:var(--green-900);border-color:transparent;color:var(--cream)}
.cell.accent .ic{color:var(--gold)}
.cell.accent h3{color:var(--cream)}
.cell.accent p{color:rgba(246,244,239,.72)}
.cell.accent::after{color:rgba(246,244,239,.08)}
.cell.accent::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(47,168,79,.18),transparent 70%)}
.cell.accent:hover{border-color:transparent}

/* ---------- FESTIVAL BAND ---------- */
.festival{background:var(--green-900);color:var(--cream);position:relative;overflow:hidden}
.festivalbg{position:absolute;inset:0;z-index:0}
.festivalbg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.4;filter:grayscale(1) contrast(1.1)}
.festivalbg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,44,37,.94),rgba(38,84,71,.88));}
.festival .glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(47,168,79,.35),transparent 70%);top:-220px;right:-160px;filter:blur(20px);z-index:1}
.festival .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.festival .kicker{color:var(--gold)}
.festival h2{color:var(--cream);font-size:clamp(30px,3.6vw,46px);max-width:480px}
.festival p{margin-top:22px;font-size:17px;line-height:1.7;color:rgba(246,244,239,.78);max-width:460px}
.festival .btn.solid{background:var(--gold);color:var(--green-900);margin-top:32px}
.festival .btn.solid:hover{background:var(--cream)}
.festlist{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-dark)}
.festlist li{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-dark);font-weight:600;font-size:16px}
.festlist li svg{width:20px;height:20px;color:var(--gold);flex:none}
@media(max-width:820px){.festival .wrap{grid-template-columns:1fr}}

/* ---------- REVIEWS ---------- */
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.stars{display:flex;gap:4px;margin-bottom:14px}
.stars svg{width:20px;height:20px;color:var(--gold)}
.gbadge{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--green-900)}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.revcard{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;overflow:hidden}
.revcard::before{content:'\201C';position:absolute;top:-6px;right:18px;font-family:'Fraunces',serif;font-size:96px;color:rgba(21,44,37,.055);line-height:1}
.revcard .stars{margin-bottom:18px;position:relative}
.revcard p{font-family:'Fraunces',serif;font-size:19px;line-height:1.55;color:var(--green-900);position:relative}
.revcard .who{margin-top:20px;font-size:13px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;position:relative}
.revlink{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;color:var(--coral-dark)}
.revgrid .revcard:nth-child(2){transform:translateY(28px)}
@media(max-width:920px){.revgrid{grid-template-columns:1fr}.revgrid .revcard:nth-child(2){transform:none}}

/* ---------- VISIT ---------- */
.visit{background:var(--paper2)}
.visit .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:stretch}
.visitcard{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:44px;display:flex;flex-direction:column;gap:30px}
.vrow{display:flex;gap:16px;align-items:flex-start}
.vrow svg{width:22px;height:22px;color:var(--coral-dark);flex:none;margin-top:2px}
.vrow .t{font-weight:700;font-size:15px;color:var(--green-900);margin-bottom:4px}
.vrow .d{font-size:15px;color:var(--ink-soft);line-height:1.6}
.hourstable{width:100%;border-collapse:collapse;font-size:14.5px}
.hourstable td{padding:8px 0;border-bottom:1px solid var(--line)}
.hourstable td:first-child{font-weight:700;color:var(--green-900);width:44%}
.hourstable td:last-child{color:var(--ink-soft);text-align:right}
.hourstable tr.today td{color:var(--coral-dark);font-weight:700}
.visit .ctas{display:flex;gap:14px;flex-wrap:wrap}
.mapbox{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:420px;position:relative;background:var(--paper2)}
.mapbox iframe{width:100%;height:100%;min-height:420px;border:0;filter:saturate(.9)}
@media(max-width:920px){.visit .grid{grid-template-columns:1fr}.mapbox{min-height:320px}.mapbox iframe{min-height:320px}}

/* ---------- CTA STRIP ---------- */
/* ---------- SUBPAGE HERO (page banner) ---------- */
.phero{position:relative;background:var(--green-900);color:var(--cream);padding:168px 0 66px;overflow:hidden}
.phero .wrap{position:relative;z-index:1;max-width:720px}
.phero .kicker{color:var(--gold-soft)}
.phero h1{color:var(--cream);font-size:clamp(32px,4.6vw,54px);line-height:1.06}
.phero p{margin-top:18px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.85);max-width:560px}
.phero .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:18px}
.phero .crumbs a{color:rgba(255,255,255,.85)}
.phero .crumbs a:hover{color:var(--cream)}
.phero.hasimg .heroimg img{filter:saturate(1.05) contrast(1.04)}
.phero.hasimg .heroimg::after{background:linear-gradient(100deg,rgba(32,64,44,.92) 0%,rgba(32,64,44,.68) 50%,rgba(32,64,44,.3) 100%)}
@media(max-width:720px){.phero{padding:140px 0 50px}}

.ctastrip{background:var(--green-900);padding:64px 0}
.ctastrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ctastrip h3{color:var(--cream);font-size:clamp(22px,2.6vw,30px);max-width:520px}
.ctastrip .btn.solid{background:var(--coral)}
.ctastrip .btn.solid:hover{background:var(--gold);color:var(--green-900)}

/* ---------- FOOTER ---------- */
/* ---------- SKETCHBAND: original vintage-engraving-style divider ---------- */
.sketchband{
  display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  gap:clamp(10px,3vw,34px);padding:44px clamp(16px,6vw,64px) 26px;background:var(--cream);
}
.sk{flex:none;opacity:.9}
.sk.s1{width:54px;height:54px}
.sk.s2{width:42px;height:42px;margin-bottom:6px}
.sk.s3{width:34px;height:34px;margin-bottom:2px}
.sk.c-navy{color:#233A63}
.sk.c-maroon{color:var(--coral)}
.sk.c-green{color:var(--green-700)}
.sk:nth-child(odd){transform:rotate(-4deg)}
.sk:nth-child(even){transform:rotate(5deg)}
@media(max-width:640px){ .sk.s1{width:40px;height:40px} .sk.s2{width:32px;height:32px} .sk.s3{width:26px;height:26px} .sketchband{gap:16px;padding:32px 20px 20px} }

footer{background:var(--green-900);color:var(--cream);padding:70px 0 30px;position:relative}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:7px;
  background:repeating-linear-gradient(to bottom,var(--cream) 0 1.5px,transparent 1.5px 5px);
}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
footer 
footer 
footer 
.fd{margin-top:16px;font-size:14.5px;color:rgba(246,244,239,.65);max-width:280px;line-height:1.6}
footer h5{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,239,.55);margin-bottom:16px}
footer ul li{margin-bottom:10px}
footer ul a{font-size:14.5px;color:rgba(246,244,239,.85)}
footer ul a:hover{color:var(--gold)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:13px;color:rgba(246,244,239,.5)}

@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:32px}.about .grid{grid-template-columns:1fr;gap:40px}}

/* ---------- BRAND LOCKUP — matches the storefront sign:
   hibiscus | FIJI ISLANDS MARKET | hibiscus, green wordmark with a white
   keyline, exactly the arrangement painted on the shop window. ---------- */
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mk{width:38px;height:38px;flex:none;display:block}
.brand .mk img{width:100%;height:100%;object-fit:contain;display:block}
.brand .nm{
  font-family:'Inter',sans-serif;font-weight:800;font-style:italic;
  font-size:20px;line-height:.98;letter-spacing:-.015em;color:var(--green-900);
  text-transform:uppercase;text-align:center;
  -webkit-text-stroke:2.5px var(--cream);paint-order:stroke fill;
}
.brand .nm b{display:block;font-weight:800;letter-spacing:.06em;font-size:.82em}
.brand .nm small{
  display:block;margin-top:4px;font-style:normal;font-weight:600;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--coral);
  -webkit-text-stroke:0;
}
.intro .mk{width:104px;height:104px;opacity:0;transform:scale(.6);transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
.intro .mk img{width:100%;height:100%;object-fit:contain}
.intro .nm{display:none}
footer .brand .nm{color:var(--cream);-webkit-text-stroke:0}
footer .brand .nm small{color:var(--gold-soft)}
@media(max-width:560px){
  .brand{gap:7px}
  .brand .nm{font-size:15px;-webkit-text-stroke:2px var(--cream)}
  .brand .mk{width:30px;height:30px}
  .brand .nm small{display:none}
}

/* ---------- TWO-COLOUR BRAND THEME ----------
   The whole site is now only the two sign colours: the green of the painted
   wordmark and the red of the hibiscus, alternating band to band so neither
   one just decorates the other. Cream is red-tinted, not neutral, so even
   the light sections belong to the palette. */
:root{
  --paper2:#FBF1EE;                 /* cream with hibiscus red mixed in */
  --gold:#D8342A;
  --gold-soft:#FBD9D4;
  --line:rgba(216,52,42,.18);       /* hairlines carry the red */
  --shadow:0 20px 50px -20px rgba(28,61,40,.38);
}

/* alternating green / red bands down the page */
.marquee-wrap{background:var(--coral);border-color:rgba(255,255,255,.22)}
.marquee span{color:#FFF}
.marquee span::after{color:var(--gold-soft)}

.cell.accent{background:var(--coral)}
.cell.accent .ic{color:#FFF}
.cell.accent h3{color:#FFF}
.cell.accent p{color:rgba(255,255,255,.86)}
.cell.accent::after{color:rgba(255,255,255,.16)}
.cell.accent::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 70%)}

.ctastrip{background:var(--coral)}
.ctastrip h3{color:#FFF}
.ctastrip .btn.solid{background:#FFF;color:var(--coral-dark)}
.ctastrip .btn.solid:hover{background:var(--green-900);color:#FFF}

/* green stays the anchor for nav, footer and the festival band */
.utilbar,footer,.festival{background:var(--green-900)}

/* red keyline tying the header to the brand */
.nav.small::before{border-bottom-color:var(--coral)}
.quickdept{border-bottom:2px solid var(--coral)}
.qdic{border-color:rgba(216,52,42,.35)}
.prodtag{color:var(--coral-dark);background:rgba(216,52,42,.12)}
.prodstock{color:var(--green-700)}
.prodstock::before{background:var(--coral)}
.statrow .si{background:var(--paper2);color:var(--coral-dark)}
.kicker,.dept-head .kicker{color:var(--coral-dark)}
.stars svg{color:var(--coral)}
.searchbar{background:var(--paper2);border-color:rgba(216,52,42,.22)}
footer h5{color:var(--gold-soft)}

/* touch targets: the carousel dots were 8px visually AND 8px tappable —
   keep the dot small but give it a finger-sized transparent hit area */
.cardots{gap:2px}
.cardots .dot{position:relative;background-clip:content-box;padding:14px 8px;width:auto;height:auto;min-width:8px}
.cardots .dot::after{content:'';position:absolute;inset:0}
.cardots .dot{background-color:rgba(31,42,34,.28)}
.cardots .dot.is-active{background-color:var(--green-900);width:auto;min-width:24px;border-radius:20px}
.carousel.on-dark .cardots .dot{background-color:rgba(255,255,255,.4)}
.carousel.on-dark .cardots .dot.is-active{background-color:var(--cream)}

/* ==========================================================================
   AISLE WALKTHROUGHS — a rail of tall video cards (built by showcase.js)
   ========================================================================== */
.aislesec{background:var(--green-900);color:var(--cream);position:relative;overflow:hidden}
.aislesec::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 20% 100%,rgba(47,99,64,.45),transparent),
  radial-gradient(ellipse 60% 50% at 80% 0%,rgba(201,138,46,.18),transparent);
  pointer-events:none}
.aislesec .wrap{position:relative;z-index:1}

/* header row: text left, arrows right */
.aisle-header{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:42px;flex-wrap:wrap}
.aisle-header h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;color:var(--cream)}
.aisle-header p{color:rgba(246,244,239,.72);margin-top:14px;max-width:540px;font-size:17px;line-height:1.65}
.aisle-header .kicker{color:var(--gold)}
.aisle-arrows{display:flex;gap:10px;flex:none}
.aisle-arrows .carrow{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);color:var(--cream);
  font-size:20px;line-height:1;display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .25s var(--ease),opacity .25s}
.aisle-arrows .carrow:hover:not([disabled]){background:var(--cream);color:var(--green-900);border-color:var(--cream);transform:translateY(-2px)}
.aisle-arrows .carrow[disabled]{opacity:.25;cursor:default}

/* rail container — full-bleed on homepage */
.aislerail-wrap{position:relative;z-index:1}
.aislerail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 28px 32px;scroll-padding-inline:28px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.aislerail::-webkit-scrollbar{display:none}

.ais-card{flex:0 0 clamp(250px,26vw,320px);scroll-snap-align:start;cursor:pointer;
  transition:transform .4s var(--ease),filter .3s}
.ais-card.no-vid{cursor:default}
.ais-card:hover{transform:translateY(-8px) scale(1.02)}
.ais-media{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;
  background:var(--green-800);box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.ais-media img,.ais-media video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ais-card:hover .ais-media img,.ais-card:hover .ais-media video{transform:scale(1.05)}
.ais-blank{width:100%;height:100%;background:linear-gradient(160deg,var(--green-800),var(--green-900))}
.ais-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,44,37,.4) 0%,rgba(21,44,37,0) 30%,rgba(21,44,37,0) 60%,rgba(21,44,37,.7) 100%)}
.ais-num{position:absolute;top:16px;left:18px;color:rgba(255,255,255,.92);font-weight:800;
  font-size:13px;letter-spacing:.14em;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.ais-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;
  border-radius:50%;background:rgba(255,255,255,.95);color:var(--green-900);display:grid;place-items:center;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.6);transition:transform .35s var(--ease),background .25s,box-shadow .25s}
.ais-play svg{width:30px;height:30px;margin-left:3px}
.ais-card:hover .ais-play{transform:translate(-50%,-50%) scale(1.12);background:#fff;box-shadow:0 18px 44px -12px rgba(0,0,0,.7)}
.ais-soon{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);color:var(--green-900);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:100px}
.ais-body{display:none}
.ais-body h3{font-size:20px;font-weight:700;color:var(--cream)}
.ais-body p{color:rgba(246,244,239,.65);font-size:14px;margin-top:6px;line-height:1.5}

@media(max-width:720px){
  .aisle-header{margin-bottom:28px}
  .aisle-arrows .carrow{width:40px;height:40px;font-size:17px}
  .ais-card{flex:0 0 clamp(220px,60vw,280px)}
  .ais-play{width:56px;height:56px}
  .ais-play svg{width:24px;height:24px}
}

/* fullscreen player */
.ais-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(14,24,18,.94);
  display:grid;place-items:center;padding:28px;backdrop-filter:blur(10px)}
.ais-lightbox[hidden]{display:none}
.ais-stage{width:min(460px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px}
.ais-stage video{width:100%;max-height:78vh;border-radius:22px;background:#000;box-shadow:0 28px 60px -16px rgba(0,0,0,.7)}
.ais-caption{color:rgba(255,255,255,.92);text-align:center;font-weight:600;margin:0;font-size:16px}
.ais-close{position:absolute;top:20px;right:24px;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;font-size:32px;line-height:1;display:grid;place-items:center;
  transition:background .25s,transform .25s}
.ais-close:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}

/* ==========================================================================
   FEATURED PRODUCTS — 3D scroll showcase (built by showcase.js)
   ========================================================================== */
.featsec{background:var(--green-900);color:var(--cream);overflow:hidden;position:relative}
.featsec .feathead{text-align:center;max-width:680px;margin:0 auto 10px}
.featsec .feathead h2{color:var(--cream);font-size:clamp(28px,3.8vw,46px);line-height:1.1}
.featsec .feathead p{color:rgba(255,255,255,.72);margin-top:14px}
.featsec .kicker{color:var(--gold-soft)}

.fx-viewport{position:relative;min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:26px;padding:40px 0}
.fx-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}

/* --- 3D mode --- */
.is-3d .fx-stage{position:relative;width:100%;height:clamp(360px,52vh,470px);
  perspective:1400px;transform-style:preserve-3d}
.is-3d .fx-card{position:absolute;left:50%;top:50%;width:clamp(230px,22vw,270px);
  transform-origin:center;will-change:transform,opacity;cursor:pointer;
  transition:box-shadow .3s var(--ease)}
.is-3d .fx-photo{box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.is-3d .fx-card.is-current .fx-photo{box-shadow:0 36px 70px -26px rgba(0,0,0,.9);
  outline:2px solid rgba(245,223,174,.55);outline-offset:6px}

/* --- rail mode (phone / reduced motion / no GSAP) --- */
.is-rail .fx-stage{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  width:100%;padding:8px 28px 22px;scrollbar-width:none}
.is-rail .fx-stage::-webkit-scrollbar{display:none}
.is-rail .fx-card{flex:0 0 min(230px,66vw);scroll-snap-align:center}

/* --- the card itself --- */
.fx-photo{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,var(--green-800),#16321f)}
.fx-photo img{width:100%;height:100%;object-fit:cover}
.fx-photo.is-empty::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(245,223,174,.18),transparent 62%)}
.fx-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.93);color:var(--green-900);
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:100px}
.fx-body{padding:16px 2px 0;text-align:center}
.fx-body h3{color:var(--cream);font-size:19px}
.fx-body p{color:rgba(255,255,255,.62);font-size:13.5px;margin-top:5px;line-height:1.5}

.fx-ui{display:flex;align-items:center;gap:20px}
.fx-arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  color:var(--cream);font-size:22px;line-height:1;display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .25s var(--ease)}
.fx-arrow:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);transform:translateY(-2px)}
.fx-bar{width:min(260px,38vw);height:3px;border-radius:100px;background:rgba(255,255,255,.2);overflow:hidden}
.fx-bar i{display:block;height:100%;background:var(--gold-soft);transform-origin:left center;transform:scaleX(0);
  transition:transform .18s linear}

@media(max-width:720px){
  .fx-viewport{min-height:auto;padding:26px 0}
  .aishead{margin-bottom:26px}
}