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;}
}
/* ---- Product-search thumbnails: fully contain ANY aspect ratio --------- */
/* Flex-centered box with a definite size + a max-capped image = the whole
image always fits, never oversized, never bleeding (works where the
Tailwind grid + h-full/object-contain combo failed for tall images). */
.thumb-fit{display:flex;align-items:center;justify-content:center;padding:5px;box-sizing:border-box;}
.thumb-fit .thumb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
/* ---- Collections shelf (product sub-categories) ------------------------ */
#collectionsShelf{display:flex;gap:14px;justify-content:safe center;overflow-x:auto;padding:6px 2px 12px;margin-top:22px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
#collectionsShelf[hidden]{display:none;}
/* expand-in animation, replayed by app.js only when the shelf newly appears */
@keyframes ccExpand{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
#collectionsShelf.cc-open{animation:ccExpand .34s cubic-bezier(.2,.7,.3,1) both;}
@media (prefers-reduced-motion: reduce){#collectionsShelf.cc-open{animation:none;}}
#collectionsShelf::-webkit-scrollbar{height:6px;}
#collectionsShelf::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px;}
.collection-card{scroll-snap-align:start;flex:0 0 auto;width:118px;padding:0;border:0;background:transparent;cursor:pointer;font:inherit;text-align:center;color:#FCF8EF;}
.collection-card .cc-thumb{display:flex;align-items:center;justify-content:center;height:92px;width:118px;padding:10px;box-sizing:border-box;border-radius:18px;overflow:hidden;background:#FCF8EF;box-shadow:0 12px 26px -16px rgba(0,0,0,.6);transition:transform .35s ease, outline-color .2s;outline:3px solid transparent;outline-offset:2px;}
/* max-width/height cap the image to the padded box so a tall photo (e.g. a
74x250 bottle) can never spill out of the thumb, even before object-fit */
.collection-card .cc-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .4s ease;}
.collection-card .cc-thumb.cc-noimg{background:linear-gradient(150deg,#2f7d42,#23632f);}
.collection-card:hover .cc-thumb{transform:translateY(-2px);}
.collection-card:hover .cc-thumb img{transform:scale(1.06);}
.collection-card .cc-name{display:block;margin-top:9px;font-weight:800;font-size:13px;line-height:1.2;}
.collection-card .cc-count{display:block;font-size:11px;opacity:.72;}
.collection-card[aria-pressed="true"] .cc-thumb{outline-color:var(--color-honey,#e0a43b);}
.collection-card[aria-pressed="true"] .cc-name{color:var(--color-honey-soft,#f2c879);}
.collection-card:focus-visible .cc-thumb{outline-color:var(--color-honey-soft,#f2c879);}
/* ---- Deli Catalogue popup (flipbook reading room) --------------------- */
.cat-modal{position:fixed;inset:0;z-index:90;display:flex;}
.cat-modal[hidden]{display:none;}
.cat-backdrop{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 0%,rgba(35,99,47,.40),rgba(16,32,23,.55));backdrop-filter:blur(8px) saturate(1.05);-webkit-backdrop-filter:blur(8px) saturate(1.05);opacity:0;transition:opacity .45s ease;cursor:zoom-out;}
.cat-panel{position:relative;z-index:1;margin:auto;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;height:100%;padding:22px 20px 16px;box-sizing:border-box;opacity:0;transform:scale(.98) translateY(8px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.85,.25,1);}
.cat-modal.is-open .cat-backdrop{opacity:1;}
.cat-modal.is-open .cat-panel{opacity:1;transform:none;}
/* floating toolbar */
.cat-toolbar{position:relative;display:flex;align-items:center;gap:16px;flex:0 0 auto;padding:8px 8px 8px 22px;border-radius:999px;background:rgba(252,248,239,.95);border:1px solid rgba(255,255,255,.55);box-shadow:0 22px 50px -22px rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.4);}
.cat-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--color-tomato,#c0392b);}
.cat-title{font-size:clamp(17px,2.5vw,23px);font-weight:600;line-height:1;color:#23632f;letter-spacing:.005em;white-space:nowrap;}
.cat-title span{color:var(--color-honey,#c8890f);}
.cat-close{margin-left:2px;flex:0 0 auto;display:grid;place-items:center;height:42px;width:42px;border-radius:999px;border:0;cursor:pointer;background:#fff;color:#23632f;box-shadow:0 3px 10px rgba(0,0,0,.14);transition:background .22s,color .22s,transform .3s cubic-bezier(.2,.8,.2,1);}
.cat-close svg{height:20px;width:20px;}
.cat-close:hover,.cat-close:focus-visible{background:#111318;color:#fff;transform:rotate(90deg);outline:none;}
/* stage: transparent so the flipbook pages float on the backdrop */
.cat-stage{position:relative;flex:1 1 auto;width:100%;max-width:1200px;min-height:0;border-radius:16px;overflow:hidden;}
.cat-frame{width:100%;height:100%;border:0;display:block;background:transparent;opacity:0;transition:opacity .5s ease .1s;}
.cat-modal.is-loaded .cat-frame{opacity:1;}
.cat-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:rgba(252,248,239,.9);transition:opacity .4s ease;}
.cat-modal.is-loaded .cat-loader{opacity:0;pointer-events:none;}
.cat-spinner{display:grid;place-items:center;height:60px;width:60px;border-radius:999px;background:rgba(252,248,239,.12);border:1px solid rgba(252,248,239,.25);font-size:22px;color:var(--color-honey-soft,#f2c879);animation:catPulse 1.6s ease-in-out infinite;}
.cat-loading-text{font-size:13px;font-weight:600;letter-spacing:.04em;}
@keyframes catPulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.08);opacity:1;}}
.cat-hint{flex:0 0 auto;margin:0;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:rgba(252,248,239,.72);display:flex;align-items:center;gap:7px;}
.cat-hint kbd{font:inherit;font-weight:800;background:rgba(252,248,239,.16);border:1px solid rgba(252,248,239,.25);border-radius:5px;padding:1px 6px;}
@media (max-width:640px){
.cat-panel{padding:12px 10px 10px;gap:11px;}
.cat-toolbar{gap:10px;padding:6px 6px 6px 15px;}
.cat-close{height:36px;width:36px;}
.cat-close svg{height:17px;width:17px;}
.cat-stage{border-radius:12px;}
.cat-hint{font-size:10.5px;}
}
@media (prefers-reduced-motion: reduce){
.cat-backdrop,.cat-panel,.cat-frame,.cat-loader{transition:none;}
.cat-close:hover,.cat-close:focus-visible{transform:none;}
.cat-spinner{animation:none;}
}
/* ---- Header nav: show the full 6-item menu only where it fits (>=1280px);
below that the hamburger drawer (which lists every item) takes over, so
the row never wraps or overflows. -------------------------------------- */
#header nav a{white-space:nowrap;}
@media (min-width:1280px){ #header > div{max-width:84rem;} }
@media (max-width:1279px){
#header nav{display:none !important;}
#header #menuBtn{display:grid !important;}
}