html { scroll-behavior: smooth; }
  body {
    background-color: #FBF7EE;
    background-image:
      radial-gradient(1100px 640px at 88% -10%, rgba(224,164,59,.20), transparent 60%),
      radial-gradient(900px 700px at -8% 8%, rgba(76,156,87,.18), transparent 58%);
    background-attachment: fixed;
  }
  /* fine paper grain */
  body::before {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:.5; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  }
  /* progressive enhancement: hidden state only applies once JS confirms it can animate.
     Using :not(.in) so the hidden rule simply stops matching when revealed — no specificity tie. */
  .reveal-ready [data-reveal]{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);}
  .reveal-ready [data-reveal]:not(.in){opacity:0;transform:translateY(26px);}
  .delay-1{transition-delay:.08s} .delay-2{transition-delay:.16s} .delay-3{transition-delay:.24s} .delay-4{transition-delay:.32s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .animate-floaty{animation:floaty 6s ease-in-out infinite}
  @keyframes marquee{to{transform:translateX(-50%)}}
  .animate-marquee{animation:marquee 34s linear infinite}
  .marquee-wrap:hover .animate-marquee{animation-play-state:paused}
  ::selection{background:#E0A43B;color:#22402C}
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1;transform:none;transition:none}
    .animate-floaty,.animate-marquee{animation:none}
    html{scroll-behavior:auto}
  }
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #E0A43B;outline-offset:2px;border-radius:6px}

  /* ============================================================
     WOW-ERA ENHANCEMENTS
     ============================================================ */
  /* scroll progress bar */
  #scrollbar{position:fixed;top:0;left:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none;
    background:linear-gradient(90deg,#2F7D42,#4C9C57,#E0A43B,#BC4A2B);}
  /* cursor glow */
  #cursorGlow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;z-index:35;pointer-events:none;
    background:radial-gradient(circle,rgba(224,164,59,.18),rgba(76,156,87,.10) 42%,transparent 70%);mix-blend-mode:multiply;
    opacity:0;transition:opacity .4s;will-change:transform;}
  /* hero living-gradient canvas (with graceful CSS fallback) */
  #glcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
    background:
      radial-gradient(60% 60% at 82% 18%, rgba(224,164,59,.32), transparent 60%),
      radial-gradient(55% 55% at 8% 82%, rgba(76,156,87,.32), transparent 60%),
      radial-gradient(60% 60% at 45% 50%, rgba(246,217,201,.55), transparent 72%),
      #FBF7EE;}
  .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(251,247,238,.80) 0%,rgba(251,247,238,.34) 44%,rgba(251,247,238,0) 66%);}
  @media (max-width:900px){.hero-veil{background:linear-gradient(180deg,rgba(251,247,238,.55),rgba(251,247,238,.15))}}
  /* 3D tilt + cursor spotlight */
  .tilt{transition:transform .2s cubic-bezier(.2,.8,.2,1);will-change:transform;}
  .spotlight{position:relative;}
  .spotlight::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;
    background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);mix-blend-mode:overlay;}
  .spotlight:hover::after{opacity:1;}
  /* gradient text + shimmer heading */
  .grad-text{background:linear-gradient(92deg,#BC4A2B,#E0A43B 52%,#2F7D42);-webkit-background-clip:text;background-clip:text;color:transparent;}
  /* button sweep */
  .btn-shine{position:relative;overflow:hidden;}
  .btn-shine::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;transform:skewX(-18deg);transition:left .6s;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);}
  .btn-shine:hover::before{left:140%;}
  /* magnetic */
  .magnetic{will-change:transform;transition:transform .25s cubic-bezier(.2,.8,.2,1);}
  /* add-to-basket + pops */
  .addbtn{transition:transform .18s,background .2s,color .2s;}
  .addbtn:active{transform:scale(.82);}
  @keyframes pop-in{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
  .pop-in{animation:pop-in .35s cubic-bezier(.2,.8,.2,1);}
  @keyframes cart-bump{0%,100%{transform:scale(1)}30%{transform:scale(1.24) rotate(-8deg)}60%{transform:scale(.92)}}
  .cart-bump{animation:cart-bump .5s ease;}
  @keyframes fab-ring{0%{box-shadow:0 0 0 0 rgba(224,164,59,.55)}100%{box-shadow:0 0 0 18px rgba(224,164,59,0)}}
  .fab-ring{animation:fab-ring .6s ease-out;}
  /* basket panel + fly clone + confetti */
  #basketPanel{transition:transform .42s cubic-bezier(.2,.8,.2,1);}
  .fly{position:fixed;z-index:70;border-radius:12px;object-fit:contain;background:#fff;padding:4px;pointer-events:none;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.4);transition:transform .85s cubic-bezier(.5,-.35,.35,1.2),opacity .85s;will-change:transform,opacity;}
  #confetti{position:fixed;inset:0;z-index:65;pointer-events:none;}
  .stat-num{font-variant-numeric:tabular-nums;}
  /* skeleton shimmer for loading images */
  @keyframes shimmer{to{background-position:-200% 0}}
  .shimmer{background:linear-gradient(100deg,#efe8d4 30%,#faf5e8 50%,#efe8d4 70%);background-size:200% 100%;animation:shimmer 1.15s linear infinite;}
  /* scroll-spy active nav link */
  header nav a.nav-active{color:#2F7D42;}
  header nav a.nav-active::after{width:100%;background:#BC4A2B;}
  /* command palette (⌘K) */
  #palette{transition:opacity .22s;}
  #palette[hidden]{display:none;}
  #palette .pal-card{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s;}
  .pal-row[aria-selected="true"]{background:#F4ECDA;}
  /* toasts */
  #toasts{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
  @keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.97)}}
  .toast{animation:toast-in .3s cubic-bezier(.2,.8,.2,1);}
  .toast.out{animation:toast-out .3s forwards;}
  /* category label colours */
  .cat-Deli,.cat-Butcher,.cat-LCBO{color:#98391F;}
  .cat-Bakery,.cat-Pantry{color:#9A6A12;}
  .cat-Produce,.cat-Dairy,.cat-Beverages{color:#2F7D42;}

  /* ============================================================
     DARK MODE  (Tailwind v4 theme tokens flip most utilities;
     overloaded text-cream / text-forest fixed explicitly)
     ============================================================ */
  html.dark{ color-scheme: dark;
    --color-cream:#16211A;
    --color-sand:#1E2B24;
    --color-sand-2:#33473A;
    --color-ink:#E9F1E6;
    --color-mud:#A6B9AA;
  }
  .dark body{background-color:#0E1712;
    background-image:radial-gradient(1100px 640px at 88% -10%, rgba(224,164,59,.12), transparent 60%),radial-gradient(900px 700px at -8% 8%, rgba(76,156,87,.16), transparent 58%);}
  .dark .text-cream{color:#F3EFE6 !important;}
  .dark .text-forest{color:#8FD39F !important;}
  .dark .bg-honey.text-forest{color:#12281B !important;}   /* dark text stays on honey chips/buttons */
  .dark .bg-white{background-color:#1C261F !important;}
  .dark .hero-veil{background:linear-gradient(100deg,rgba(14,23,18,.86) 0%,rgba(14,23,18,.45) 44%,rgba(14,23,18,0) 66%);}
  @media (max-width:900px){.dark .hero-veil{background:linear-gradient(180deg,rgba(14,23,18,.6),rgba(14,23,18,.12));}}
  .dark ::selection{background:#E0A43B;color:#16211A;}
  .dark .cat-Deli,.dark .cat-Butcher,.dark .cat-LCBO{color:#F0A088;}
  .dark .cat-Bakery,.dark .cat-Pantry{color:#E8C46A;}
  .dark .cat-Produce,.dark .cat-Dairy,.dark .cat-Beverages{color:#84D194;}
  .dark .shimmer{background:linear-gradient(100deg,rgba(42,58,48,0) 30%,#2a3a30 50%,rgba(42,58,48,0) 70%);background-size:200% 100%;}
  .dark .pal-row[aria-selected="true"]{background:#22322a;}
  /* dark mode: product & basket tiles stay light so white-bg photos blend + text pops */
  .dark .product-card{background-color:#FCF8EF !important;box-shadow:0 10px 24px -12px rgba(0,0,0,.55) !important;}
  .dark .product-card .bg-white{background-color:#ffffff !important;}
  .dark .product-card .text-ink{color:#241D15 !important;}
  .dark .product-card .text-forest{color:#2F7D42 !important;}
  .dark .product-card .text-mud{color:#6C5C46 !important;}
  .dark .product-card .cat-Deli,.dark .product-card .cat-Butcher,.dark .product-card .cat-LCBO{color:#98391F !important;}
  .dark .product-card .cat-Bakery,.dark .product-card .cat-Pantry{color:#9A6A12 !important;}
  .dark .product-card .cat-Produce,.dark .product-card .cat-Dairy,.dark .product-card .cat-Beverages{color:#2F7D42 !important;}
  /* inner surfaces of light cards stay light too */
  .dark .product-card .bg-sand{background-color:#EFE7D3 !important;}
  .dark .product-card .border-sand-2{border-color:#E4D8BE !important;}
  .dark .product-card input,.dark .product-card textarea,.dark .product-card select{color:#241D15 !important;background-color:rgba(255,255,255,.72) !important;border-color:#E4D8BE !important;}
  .dark .product-card ::placeholder{color:#8A7C66 !important;opacity:1;}
  .dark .product-card kbd{color:#241D15 !important;}
  @media (prefers-reduced-motion: reduce){
    .tilt{transform:none!important;}
    #cursorGlow{display:none!important;}
    .fab-ring,.cart-bump,.pop-in{animation:none!important;}
  }