/* Generated from index.html <style> by scripts/build-wp-front.py */
  :root{
    --paper:#F3EEE1; --paper-raise:#FAF5EA; --ink:#17140F; --ink-soft:#6F6353;
    --gold:#B08D3E; --gold-bright:#CDA85A; --fig:#5A2330; --pistachio:#7C8A4E; --terracotta:#BE5B34; --pine:#243528;
    --hairline:rgba(23,20,15,0.12);
  }
  html.no-js .reveal{opacity:1;transform:none}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  ::selection{background:var(--gold);color:#fff}
  h1,h2,h3,h4{font-family:'Cormorant',serif;font-weight:600;letter-spacing:-0.005em;line-height:1.05;margin:0}
  p{line-height:1.7;margin:0}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
  @media(min-width:768px){.wrap{padding-left:40px;padding-right:40px}}
  .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}

  /* film grain + vignette */
  .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");}
  .vignette{position:fixed;inset:0;z-index:59;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 10%,transparent 55%,rgba(23,20,15,.10) 100%);}

  /* custom cursor */
  .cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold);z-index:100;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .25s}
  .cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;z-index:100;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s,border-color .3s}
  body.hovering .cursor{width:0;height:0}
  body.hovering .cursor-ring{width:64px;height:64px;border-color:var(--fig)}
  @media(hover:none){.cursor,.cursor-ring{display:none}body{cursor:auto}}

  /* buttons */
  .btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:16px 30px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.01em;overflow:hidden;will-change:transform}
  .btn-gold{background:var(--ink);color:var(--paper)}
  .btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--gold),var(--gold-bright));transform:translateY(101%);transition:transform .5s cubic-bezier(.6,.05,.1,1);z-index:0}
  .btn-gold:hover::after{transform:translateY(0)}
  .btn-gold span,.btn-gold svg{position:relative;z-index:1;transition:color .4s}
  .btn-gold:hover span,.btn-gold:hover svg{color:var(--ink)}
  .btn-ghost{border:1.5px solid rgba(23,20,15,.5);color:var(--ink);transition:border-color .3s,background .3s,color .3s}
  .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
  .btn:focus-visible{outline:2px solid var(--fig);outline-offset:3px}
  .cta-primary{position:relative;display:inline-flex;align-items:center;gap:.7em;padding:16px 30px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;overflow:hidden;will-change:transform;transition:transform .42s cubic-bezier(.34,1.56,.64,1)}
  .cta-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--gold),var(--gold-bright));transform:translateY(101%);transition:transform .5s cubic-bezier(.6,.05,.1,1);z-index:0}
  .cta-primary:hover::after{transform:translateY(0)}
  .cta-primary span,.cta-primary svg{position:relative;z-index:1;transition:color .4s}
  .cta-primary:hover span,.cta-primary:hover svg{color:var(--ink)}
  .cta-primary:focus-visible{outline:2px solid var(--fig);outline-offset:3px}
  .cta-primary:hover{transform:translateY(-3px) scale(1.03)}
  .cta-primary:active{transform:translateY(-1px) scale(.98);transition-duration:.12s}
  .cta-secondary{display:inline-flex;align-items:center;gap:.85em;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  .cta-secondary .play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid currentColor;transition:background .3s,color .3s}
  .cta-secondary:hover .play{background:var(--ink);color:var(--paper)}
  .cta-secondary .label{position:relative}
  .cta-secondary .label::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.6,.05,.1,1)}
  .cta-secondary:hover .label::after{transform:scaleX(1);transform-origin:left}

  /* link underline wipe */
  .ulink{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .4s cubic-bezier(.22,1,.36,1)}
.ulink:hover{text-decoration-color:var(--gold)}
/* Primary nav: a hairline of gold drawn under the word, not a browser underline.
   It grows from the left on hover and retracts to the right on leave, and the
   current page keeps its own drawn, so "here" and "going here" speak the same
   language instead of two. */
.nav nav a.ulink{position:relative}
.nav nav a.ulink,.nav nav a.ulink:hover{text-decoration-color:transparent}
.nav nav a.ulink::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(0);transform-origin:right center;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.nav nav a.ulink:hover::after,.nav nav a.ulink:focus-visible::after,.nav nav a.ulink.active::after{
  transform:scaleX(1);transform-origin:left center}
.nav nav a.ulink:focus-visible{outline:2px solid var(--fig);outline-offset:6px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  .nav nav a.ulink::after{transform:scaleX(1);opacity:0;transition:opacity .2s}
  .nav nav a.ulink:hover::after,.nav nav a.ulink:focus-visible::after,.nav nav a.ulink.active::after{opacity:1}}

  /* add-to-cart button */
  .addbtn{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s,box-shadow .35s}
  .addbtn svg{width:16px;height:16px;display:block}
  .addbtn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(176,141,62,.65)}
  .addbtn:active{transform:translateY(0) scale(.93);transition-duration:.1s}
  .addbtn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}

  /* nav: sticky on the home too; transparent over the hero, solid on scroll */
  .nav{position:sticky;top:0;z-index:50;background:transparent;box-shadow:none;backdrop-filter:none;transition:background .5s,box-shadow .5s,color .5s}
  .nav.solid{background:rgba(243,238,225,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hairline)}

  /* hero */
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.18);transform-origin:center}
  .hero-video::-webkit-media-controls,
  .hero-video::-webkit-media-controls-start-playback-button,
  .hero-video::-webkit-media-controls-play-button,
  .hero-video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none!important;opacity:0!important}
  .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(243,238,225,.92) 0%,rgba(243,238,225,.6) 36%,rgba(243,238,225,.14) 62%,transparent 80%)}
  #hero h1{text-shadow:0 2px 34px rgba(243,238,225,.78),0 1px 4px rgba(243,238,225,.6)}
  #hero p{text-shadow:0 1px 18px rgba(243,238,225,.66)}
  .hero-bg{position:absolute;inset:0;z-index:-1;background:
     radial-gradient(80% 60% at 75% 20%,rgba(205,168,90,.30),transparent 60%),
     radial-gradient(70% 70% at 15% 85%,rgba(90,35,48,.18),transparent 60%),
     radial-gradient(120% 120% at 50% 0%,#FAF5EA,#E9E1CF 70%);}

  /* reveals */
  .reveal{opacity:0;transform:translateY(26px)}
  /* scroll cutouts: one uniform contain-box so every fruit reads the same size, trimmed sources */
  .floatfruit{position:absolute;z-index:0;pointer-events:none;opacity:.92;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(23,20,15,.22));will-change:transform}
  .mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
  .mask > span{display:inline-block;transform:translateY(110%)}

  /* fruit rail: 3D cutouts as interactive category shortcuts.
     Rail cutouts (assets/cutouts/rail/) are pre-trimmed to content, so a
     fixed contain-box bounds both width AND height and every fruit lands at a
     balanced visual size regardless of its source padding or aspect ratio. */
  .fruit-rail{display:flex;gap:4px;overflow-x:auto;padding:6px 2px 2px;scroll-snap-type:x proximity}
  @media(min-width:1024px){.fruit-rail{justify-content:space-between;overflow:visible;gap:8px}}
  .fruit-chip{flex:none;display:flex;flex-direction:column;align-items:center;gap:13px;padding:10px 12px 6px;border-radius:16px;
    scroll-snap-align:center;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
  .fruit-chip:hover,.fruit-chip:focus-visible{transform:translateY(-8px);outline:none}
  .fruit-cut{width:66px;height:58px;display:flex;align-items:center;justify-content:center}
  .fruit-cut img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 11px 12px rgba(23,20,15,.22));
    transform:rotate(var(--r,-6deg));transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
  .fruit-chip:hover .fruit-cut img,.fruit-chip:focus-visible .fruit-cut img{transform:rotate(0deg) translateY(-3px) scale(1.13)}
  .fruit-name{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft);transition:color .3s}
  .fruit-chip:hover .fruit-name,.fruit-chip:focus-visible .fruit-name{color:var(--gold)}
  @media(prefers-reduced-motion:reduce){.fruit-chip,.fruit-cut img{transition:none}.fruit-chip:hover,.fruit-chip:focus-visible{transform:none}
    .fruit-chip:hover .fruit-cut img,.fruit-chip:focus-visible .fruit-cut img{transform:rotate(var(--r,-6deg))}}
  .hide-sb{scrollbar-width:none}.hide-sb::-webkit-scrollbar{display:none}

  /* ---------- Diwali promo carousel: same wrap margins as every other
     section (not full-bleed), rounded corners matching .heroCard on the
     combos page, auto-advancing with a real seamless loop (a cloned first
     slide is appended so "next" past the last one keeps scrolling forward
     instead of snapping back across the whole track - see the JS). Mobile
     stacks bottom-anchored text over a shorter image; desktop widens into a
     side-anchored panel with a horizontal gradient so the photo stays fully
     visible on the right. ---------- */
  /* One rounded window, square slides inside it. With the radius on each slide
     instead, a scroll showed the outgoing slide's rounded corners meeting the
     incoming slide's rounded corners, so the seam read as two boxes passing
     rather than one frame of film moving. */
  .promo-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    border-radius:22px}
  .promo-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:flex-end;
    overflow:hidden;border-radius:0;min-height:360px;background:var(--ink)}
  .promo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
    transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .promo-slide:hover .promo-img{transform:scale(1.04)}
  /* diwali-radiance-banner.webp has no dedicated mobile crop yet (see the
     dilwala/jars pair) - its wide 2.4:1 source centre-crops onto phone's
     near-square slide with the basket pushed off the right edge; bias the
     crop right until a real mobile crop is generated. */
  /* Each banner has a square crop for phones, so the slide is square too: the
     whole gift box is in frame instead of a wide photo cropped to a letterbox.
     Desktop keeps the 2.4:1 art and the taller panel below. */
  @media(max-width:767.98px){.promo-slide{aspect-ratio:1/1;min-height:0}}
  .promo-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.18) 42%,transparent 62%)}
  /* Two products per row on a phone, the way the shop and the combos read. The
     card was drawn for a full-width cell, so its type and padding come down to
     match the narrower column. */
  @media(max-width:639.98px){
    #find-grid .pcard h3{font-size:15px;line-height:1.25;min-height:37px}
    #find-grid .pcard > div:last-child{padding:11px 12px 13px}
    #find-grid .pcard .font-semibold{font-size:14.5px}
    #find-grid .pcard .line-through{font-size:11.5px}
    #find-grid .pcard span.absolute{font-size:10px;padding:2px 7px;top:8px;left:8px}
  }
  /* The copy sits over a photograph that is bright gold where the eyebrow lands,
     so on a phone the scrim carries further up the frame and the words keep
     their contrast wherever the picture happens to be light. */
  @media(max-width:767.98px){
    .promo-scrim{background:linear-gradient(0deg,rgba(23,16,10,.88) 0%,rgba(23,16,10,.74) 30%,rgba(23,16,10,.5) 52%,rgba(23,16,10,.22) 74%,transparent 100%)}
    /* The kicker was gold on a photograph that is gold everywhere the light
       falls, which is no contrast at all. On a phone it takes the same paper
       white as the rest of the copy, where it reads against the darkened frame. */
    .promo-card .eyebrow{color:#FAF5EA!important}
  }
  .promo-card{position:relative;z-index:1;padding:28px 24px;color:#FAF5EA;width:100%}
  .promo-title{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(26px,4vw,32px);margin-top:8px;line-height:1.08}
  .promo-copy{margin-top:10px;max-width:38ch;font-size:14px;line-height:1.6;color:rgba(250,245,234,.85)}
  .promo-cta{display:inline-flex;align-items:center;gap:.5em;margin-top:18px;padding:12px 22px;border-radius:999px;
    background:#FAF5EA;color:var(--ink);font-weight:600;font-size:13.5px;width:fit-content;transition:transform .3s,background .3s}
  .promo-slide:hover .promo-cta{transform:translateY(-2px);background:var(--gold-bright)}
  .promo-dots{display:flex;justify-content:center;gap:10px;padding-top:16px}
  .promo-dot{width:8px;height:8px;border-radius:50%;background:var(--hairline);border:0;cursor:pointer;padding:0;
    transition:background .3s,transform .3s}
  .promo-dot.active{background:var(--dc,var(--fig));transform:scale(1.35)}
  @media(min-width:768px){
    .promo-slide{min-height:460px}
    .promo-scrim{background:linear-gradient(100deg,var(--pc) 0%,rgba(0,0,0,.4) 40%,transparent 66%)}
    .promo-card{max-width:480px;padding:0 0 56px 56px}
    .promo-title{font-size:clamp(34px,3.6vw,46px)}
    .promo-copy{font-size:15.5px;max-width:42ch}
  }
  @media(prefers-reduced-motion:reduce){.promo-img,.promo-cta{transition:none}.promo-slide:hover .promo-img{transform:none}}

  /* ---------- loading skeletons: shimmer placeholders that sit in each
     JS-populated section (categories, bestsellers, combos, gifting, find-
     your-fruit) until their data fetch resolves and .innerHTML overwrites
     them - so a slow connection reads as "loading" instead of "broken". ---------- */
  .skel{position:relative;overflow:hidden;background:rgba(36,26,18,.08)}
  .skel::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.6) 50%,transparent 75%);
    transform:translateX(-100%);animation:skelShine 1.6s ease-in-out infinite}
  @keyframes skelShine{100%{transform:translateX(100%)}}
  .skel-line{height:12px;border-radius:6px;background:rgba(36,26,18,.08)}
  @media(prefers-reduced-motion:reduce){.skel::after{animation:none;display:none}}

  /* category + product cards */
  .tile{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;isolation:isolate;will-change:transform}
  .tile .art{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .tile:hover .art{transform:scale(1.06)}
  .tile .frame{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.35);border-radius:10px;z-index:2;pointer-events:none;opacity:.6;transition:opacity .5s,inset .5s}
  .tile:hover .frame{opacity:1;inset:10px}
  .tile .grad{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(23,20,15,.62),rgba(23,20,15,.05) 55%)}
  .pcard{background:var(--paper-raise);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .card-photo{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.pcard:hover .card-photo{transform:scale(1.045)}
  @media (prefers-reduced-motion:reduce){.card-photo{transition:none}.pcard:hover .card-photo{transform:none}}
  /* combo cards: fanned product tiles (mirrors combos.html) */
  .cluster{position:relative;height:100%;min-height:210px}
  .cluster .ct{position:absolute;border-radius:14px;overflow:hidden;background:#EFE8D8;border:1px solid var(--hairline);
    box-shadow:0 18px 34px -18px rgba(23,20,15,.4);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .cluster .ct img{width:100%;height:100%;object-fit:cover}
  .pcard:hover .cluster .ct{transform:translateY(-4px) rotate(0deg)!important}
  @media(prefers-reduced-motion:reduce){.pcard:hover .cluster .ct{transform:none!important}}
  .n2 .ct:nth-child(1){width:45%;height:72%;left:14%;top:12%;transform:rotate(-5deg);z-index:2}
  .n2 .ct:nth-child(2){width:43%;height:66%;left:41%;top:19%;transform:rotate(5deg);z-index:1}
  .n3 .ct:nth-child(1){width:46%;height:74%;left:6%;top:13%;transform:rotate(-5deg);z-index:3}
  .n3 .ct:nth-child(2){width:40%;height:64%;left:38%;top:6%;transform:rotate(3deg);z-index:2}
  .n3 .ct:nth-child(3){width:38%;height:60%;left:60%;top:30%;transform:rotate(7deg);z-index:1}
  .n4 .ct:nth-child(1){width:42%;height:68%;left:4%;top:16%;transform:rotate(-6deg);z-index:4}
  .n4 .ct:nth-child(2){width:36%;height:58%;left:31%;top:5%;transform:rotate(2deg);z-index:3}
  .n4 .ct:nth-child(3){width:36%;height:58%;left:44%;top:34%;transform:rotate(6deg);z-index:2}
  .n4 .ct:nth-child(4){width:34%;height:54%;left:66%;top:12%;transform:rotate(9deg);z-index:1}
  .n5 .ct:nth-child(1){width:38%;height:66%;left:3%;top:17%;transform:rotate(-7deg);z-index:5}
  .n5 .ct:nth-child(2){width:33%;height:56%;left:24%;top:4%;transform:rotate(-2deg);z-index:4}
  .n5 .ct:nth-child(3){width:34%;height:58%;left:36%;top:34%;transform:rotate(4deg);z-index:3}
  .n5 .ct:nth-child(4){width:32%;height:54%;left:55%;top:8%;transform:rotate(7deg);z-index:2}
  .n5 .ct:nth-child(5){width:30%;height:50%;left:70%;top:36%;transform:rotate(10deg);z-index:1}
  .savepill{display:inline-flex;align-items:center;gap:.4em;background:rgba(124,138,78,.14);color:#4E5A2E;
    border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
  /* find-your-fruit purpose chips: each carries its own hue (--c ink-strength, --cs soft tint) */
  .fchip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hairline);background:var(--paper-raise);
    border-radius:999px;padding:10px 18px 10px 15px;font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--ink);cursor:pointer;
    transition:background .3s,color .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
  .fchip .d{color:var(--c);font-size:9px;line-height:1}
  .fchip:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 10px 20px -12px var(--c)}
  .fchip.on{background:var(--c);border-color:var(--c);color:var(--paper-raise)}
  .fchip.on .d{color:rgba(250,245,234,.65)}
  .fchip:focus-visible{outline:2px solid var(--c);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){.fchip{transition:none}.fchip:hover{transform:none}}
  /* ---------- the purpose picker on a phone ----------
     The tab row is a good desktop control and a poor phone one: six pills in a
     strip you have to drag, with the ones off-screen invisible. Below 640px it
     becomes the same dropdown the combos page uses, and the tab row is hidden.
     Fixed, not absolute, so nothing that hides its overflow can clip it; the
     page script places it under the button. */
  .find-drop{display:none}
  @media(max-width:639.98px){
    #find-chips{display:none!important}
    .find-drop{display:block;position:relative;width:100%;max-width:400px;margin:0 auto 22px}
    .find-drop .csel-btn{
      display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
      height:50px;padding:0 20px;border-radius:25px;background:var(--paper-raise);
      border:1px solid var(--hairline);color:var(--ink);cursor:pointer;
      font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;font-weight:600;
      transition:border-color .2s}
    .find-drop .csel-btn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
    .find-drop .csel-btn svg{flex:none;transition:transform .3s cubic-bezier(.6,.05,.1,1);color:var(--ink-soft)}
    .find-drop.open .csel-btn{border-color:var(--ink)}
    .find-drop.open .csel-btn svg{transform:rotate(180deg)}
    .find-drop .csel-list{
      position:fixed;z-index:70;margin:0;padding:6px;
      list-style:none;background:var(--paper-raise);border:1px solid var(--hairline);
      border-radius:16px;box-shadow:0 26px 50px -22px rgba(23,20,15,.42);
      max-height:min(62vh,420px);overflow-y:auto;overscroll-behavior:contain;
      opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .2s,transform .22s,visibility .22s}
    .find-drop.open .csel-list{opacity:1;visibility:visible;transform:none}
    .find-drop .csel-list button{
      display:flex;align-items:center;gap:10px;width:100%;
      min-height:46px;padding:0 14px;border:0;background:none;border-radius:11px;cursor:pointer;
      font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink);text-align:left}
    .find-drop .csel-list button:hover,
    .find-drop .csel-list button:focus-visible{background:rgba(23,20,15,.06);outline:none}
    .find-drop .csel-list .d{flex:none;font-size:9px;line-height:1;color:var(--c,var(--gold))}
    .find-drop .csel-list button[aria-selected="true"]{background:var(--c,var(--fig));color:var(--paper-raise)}
    .find-drop .csel-list button[aria-selected="true"] .d{color:rgba(250,245,234,.65)}
  }
  @media(prefers-reduced-motion:reduce){.find-drop .csel-list,.find-drop .csel-btn svg{transition:none}}
  .pm-cards{display:grid;gap:12px;margin:0}
  .pmrow{display:grid;grid-template-columns:112px 1fr;gap:26px;align-items:start;padding:28px 30px;
    background:var(--paper-raise);border:1px solid var(--hairline);border-radius:16px;
    transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s}
  .pmrow:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
  @media(max-width:560px){.pmrow{grid-template-columns:1fr;gap:8px;padding:22px 20px}}
  .pmrow dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--c);padding-top:10px}
  @media(max-width:560px){.pmrow dt{padding-top:0}}
  .pmrow dd{margin:0}
  .pmrow h3{font-size:clamp(22px,2.3vw,28px);line-height:1.08}
  .pmrow p{color:var(--ink-soft);font-size:15px;line-height:1.65;margin-top:10px;max-width:52ch}
  .pmrow .go{color:var(--c);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:5px;margin-top:12px}
  .pmrow .go:hover{text-decoration:underline;text-underline-offset:3px}
  @media(prefers-reduced-motion:reduce){.pmrow{transition:none}.pmrow:hover{transform:none}}
  /* grading tray: the fruits we sort, laid out like the compartments of a Saiyam gift box */
  .pm-tray{position:relative;border-radius:16px;padding:16px;color:#F3EEE1;
    background:radial-gradient(120% 90% at 16% 0%,rgba(205,168,90,.28),transparent 55%),radial-gradient(90% 80% at 100% 100%,rgba(20,8,10,.5),transparent 60%),var(--fig);
    box-shadow:0 40px 70px -34px rgba(90,35,48,.6)}
  .pm-tray__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pm-cell{position:relative;display:grid;justify-items:center;align-content:center;gap:8px;aspect-ratio:1/.84;border-radius:12px;
    background:radial-gradient(70% 70% at 50% 42%,rgba(250,245,234,.11),rgba(250,245,234,.03));border:1px solid rgba(205,168,90,.26);
    color:inherit;transition:border-color .3s,background-color .3s}
  .pm-cell img{width:56%;max-width:88px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.38));transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .pm-cell span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(243,238,225,.8)}
  .pm-cell:hover{border-color:rgba(224,178,87,.75);background-color:rgba(250,245,234,.05)}
  .pm-cell:hover img{transform:translateY(-4px) rotate(calc(var(--r,0deg) * -1)) scale(1.06)}
  .pm-cell:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
  .pm-tray__foot{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:16px 6px 4px}
  .pm-tray__note{font-family:'Cormorant',serif;font-style:italic;font-weight:500;font-size:21px;line-height:1.25;color:#F3EEE1}
  .pm-tray__go{font-size:13px;font-weight:600;color:var(--gold-bright);display:inline-flex;align-items:center;gap:6px}
  .pm-tray__go:hover{text-decoration:underline;text-underline-offset:3px}
  .pm-tray__go:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:4px}
  @media(max-width:420px){.pm-tray{padding:12px}.pm-tray__grid{gap:6px}.pm-cell span{font-size:9px;letter-spacing:.1em}}
  @media(prefers-reduced-motion:reduce){.pm-cell img{transition:none}.pm-cell:hover img{transform:rotate(var(--r,0deg))}}
  /* Diwali offers heading above the promo carousel: the same lockup as the top strip */
  .fest-head{display:flex;align-items:center;justify-content:center;gap:14px}
  .fest-rule{flex:0 1 120px;height:1px;background:linear-gradient(90deg,transparent,rgba(176,141,62,.7))}
  .fest-rule:last-child{background:linear-gradient(90deg,rgba(176,141,62,.7),transparent)}
  .fest-spark{width:13px;height:13px;flex:none;fill:var(--gold);animation:festTwinkle 2.6s ease-in-out infinite}
  .fest-spark--r{animation-delay:1.3s}
  @keyframes festTwinkle{0%,100%{opacity:.4;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
  .fest-title{display:flex;align-items:baseline;gap:12px;font-size:clamp(34px,4.4vw,52px);line-height:1;white-space:nowrap}
  .fest-title em{font-style:italic;color:var(--fig)}
  .fest-title span{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(11px,1vw,13px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
  .fest-sub{text-align:center;color:var(--ink-soft);font-size:15px;margin:10px 0 26px}
  @media(max-width:480px){.fest-head{gap:9px}.fest-rule{flex-basis:36px}.fest-title{gap:8px}.fest-sub{font-size:14px;margin-bottom:20px}}
  @media(prefers-reduced-motion:reduce){.fest-spark{animation:none;opacity:.85}}
  /* promise section: about 10% shorter so heading, tray and cards fit one screen */
  @media(min-width:1024px){#craft{padding-top:72px;padding-bottom:72px}}
  #craft .pm-tray{margin-top:22px}
  #craft h2{font-size:clamp(30px,3.4vw,48px)}
  .pm-cell{aspect-ratio:1/.62;gap:4px;border-radius:10px}
  .pm-cell img{width:42%;max-width:62px}
  .pm-cell span{font-size:9.5px}
  .pm-tray{padding:13px}
  .pm-tray__grid{gap:7px}
  .pm-tray__note{font-size:19px}
  .pmrow{padding:17px 24px}
  .pmrow h3{font-size:clamp(19px,1.7vw,23px)}
  .pmrow p{font-size:14.5px;margin-top:7px}
  .pmrow dt{padding-top:7px}
  .pmrow .go{margin-top:9px}
  .pm-tray__foot{padding:11px 4px 2px}
  /* our story: founders and the story share one warm card */
  .story-card{position:relative;border-radius:16px;padding:clamp(22px,4.5vw,60px);
    background:radial-gradient(80% 120% at 0% 0%,rgba(224,178,87,.26),transparent 55%),radial-gradient(70% 90% at 100% 100%,rgba(90,35,48,.10),transparent 60%),linear-gradient(160deg,#F7EDD8,#E9D9B8);
    border:1px solid rgba(176,141,62,.38)}
  /* hero: the headline sits high, just under the nav, not centred in the viewport */
  #hero{align-items:flex-start;padding-top:clamp(36px,6vh,64px);padding-bottom:120px}
  .pcard:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(90,35,48,.35)}
  .vpill{border:1px solid var(--hairline);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;transition:border-color .25s,background .25s,color .25s}
  .vpill.on,.vpill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  .hide-sb::-webkit-scrollbar{display:none}
  .hide-sb{scrollbar-width:none}

  /* anchored sections land below the fixed topbar on direct hash loads */
  section[id]{scroll-margin-top:90px}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1!important;transform:none!important}
    .mask>span{transform:none!important}
    .cta-primary{transition:none}.cta-primary:hover,.cta-primary:active{transform:none}
    *{scroll-behavior:auto!important}
  }