/* ==========================================================================
   SnakXo storefront — main stylesheet
   Look: a light, appetising theme modelled on McDonald's India (mcdindia.com): white pages, golden-yellow
   blocks, red pill buttons, bold black type, light-grey footer, a yellow "drip" edge and sesame-seed texture.
   The brand artwork (logo, packs, banners, film) keeps its own colours.
   ========================================================================== */

:root {
    --c-yellow: #ffbc0d;       /* golden yellow: big blocks and highlights */
    --c-yellow-2: #ffcd4a;     /* lighter yellow, for hovers on yellow */
    --c-yellow-soft: #fff3cf;  /* pale yellow tint: pills, chips */
    --c-red: #db0007;          /* buttons, links, prices, active states */
    --c-red-2: #b00006;        /* red hover */
    --c-ink: #111;             /* dark buttons, strongest text */
    --c-text: #222;            /* body copy and headings */
    --c-muted: #6b6b6b;        /* secondary text */
    --c-tan: #8b6b4f;          /* small brand labels: McDonald's bun tan, darkened so it reads on white */
    --c-tan-line: #b69a81;     /* footer divider, as on McDonald's */
    --c-line: #e7e7e7;         /* hairlines and borders */
    --c-grey: #f6f6f6;         /* light grey surfaces */
    --c-grey-2: #f1f1f1;       /* footer */
    --c-white: #fff;
    --c-cream: #fff7e3;        /* story section: the brand film's frames are graded to exactly this colour */
    --c-cream-2: #ffeec0;
    --c-green: #2e7d32;        /* success messages */
    --c-whatsapp: #19a84f;     /* WhatsApp green, a shade darker so the icon holds up on white */
    --c-star: #f6a400;

    --f-display: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
    --f-sans: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
    --f-text: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
    --f-logo: 'Figtree', 'Helvetica Neue', Arial, sans-serif;

    --radius: 18px;
    --radius-sm: 10px;
    --page-width: 1280px;
    --gutter: clamp(16px, 4vw, 48px);
    --header-h: 72px;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
    --shadow-soft: 0 6px 24px rgba(0, 0, 0, .07);   /* McDonald's-style card shadow */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Textures, inline so they cost no requests. Seeds: white sesame seeds for yellow surfaces (the bun).
       Drip: the wavy edge of a yellow band melting into the section below, used as a mask so it takes any colour. */
    --tex-seeds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23fff' fill-opacity='.75'%3E%3Cellipse cx='8.3' cy='17.9' rx='3.6' ry='1.6' transform='rotate(13 8.3 17.9)'/%3E%3Cellipse cx='12.4' cy='36.5' rx='3.6' ry='1.6' transform='rotate(91 12.4 36.5)'/%3E%3Cellipse cx='6.7' cy='97.1' rx='3.6' ry='1.6' transform='rotate(76 6.7 97.1)'/%3E%3Cellipse cx='7.8' cy='129.7' rx='3.6' ry='1.6' transform='rotate(112 7.8 129.7)'/%3E%3Cellipse cx='46.5' cy='13.0' rx='3.6' ry='1.6' transform='rotate(175 46.5 13.0)'/%3E%3Cellipse cx='41.0' cy='68.2' rx='3.6' ry='1.6' transform='rotate(21 41.0 68.2)'/%3E%3Cellipse cx='51.1' cy='98.9' rx='3.6' ry='1.6' transform='rotate(104 51.1 98.9)'/%3E%3Cellipse cx='42.6' cy='135.9' rx='3.6' ry='1.6' transform='rotate(11 42.6 135.9)'/%3E%3Cellipse cx='78.5' cy='43.6' rx='3.6' ry='1.6' transform='rotate(56 78.5 43.6)'/%3E%3Cellipse cx='74.1' cy='71.2' rx='3.6' ry='1.6' transform='rotate(142 74.1 71.2)'/%3E%3Cellipse cx='70.1' cy='106.4' rx='3.6' ry='1.6' transform='rotate(94 70.1 106.4)'/%3E%3Cellipse cx='79.4' cy='130.9' rx='3.6' ry='1.6' transform='rotate(176 79.4 130.9)'/%3E%3Cellipse cx='109.9' cy='38.3' rx='3.6' ry='1.6' transform='rotate(88 109.9 38.3)'/%3E%3Cellipse cx='110.1' cy='106.4' rx='3.6' ry='1.6' transform='rotate(157 110.1 106.4)'/%3E%3Cellipse cx='108.7' cy='136.8' rx='3.6' ry='1.6' transform='rotate(104 108.7 136.8)'/%3E%3Cellipse cx='141.5' cy='23.5' rx='3.6' ry='1.6' transform='rotate(85 141.5 23.5)'/%3E%3Cellipse cx='126.6' cy='48.9' rx='3.6' ry='1.6' transform='rotate(116 126.6 48.9)'/%3E%3Cellipse cx='141.2' cy='70.9' rx='3.6' ry='1.6' transform='rotate(69 141.2 70.9)'/%3E%3Cellipse cx='125.8' cy='104.3' rx='3.6' ry='1.6' transform='rotate(30 125.8 104.3)'/%3E%3C/g%3E%3C/svg%3E");
    --tex-drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V1H1370 C1340 1 1352 13 1310 13 S1280 1 1250 1H1150 C1132.5 1 1139.5 31 1115 31 S1097.5 1 1080 1H960 C920 1 936 19 880 19 S840 1 800 1H640 C620 1 628 35 600 35 S580 1 560 1H420 C397.5 1 406.5 14 375 14 S352.5 1 330 1H190 C160 1 172 27 130 27 S100 1 70 1H0Z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-yellow); color: var(--c-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

.page-width { width: 100%; max-width: var(--page-width); margin-inline: auto; padding-inline: var(--gutter); }
.section-pad { padding-block: clamp(56px, 8vw, 112px); }
.section-heading { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.02em; }
.section-heading--small { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1em; }
.eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-red); margin-bottom: 1rem; }
.serif-quote { font-family: var(--f-text); font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--c-red); }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 14px; background: var(--c-white); border-radius: 8px; }
.skip-link:focus { left: 8px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Logo wordmark (used only when no logo image exists) */
.wordmark {
    display: inline-block;
    font-family: var(--f-logo);
    font-weight: 900;
    font-size: 2.1rem; line-height: .9;
    letter-spacing: -.01em;
    color: var(--c-red); text-decoration: none;
}
.wordmark sup { position: relative; top: .15em; margin-left: .06em; font-family: var(--f-sans); font-weight: 700; font-size: .3em; letter-spacing: 0; vertical-align: top; }
.wordmark--light { color: var(--c-red); }

/* ---------- Buttons ---------- */
/* Pills with bold capitals, as on McDonald's ("ORDER NOW"): red for the main action, black for the rest. */
.button {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .8em 1.8em;
    border: 0; border-radius: 999px;
    font-family: var(--f-display); font-weight: 800; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none;
    transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s;
}
.button:hover { transform: translateY(-2px); }
.button--small { padding: .6em 1.3em; font-size: .82rem; }
.button--dark { background: var(--c-ink); color: var(--c-white); }
.button--dark:hover { background: var(--c-red); }
.button--light { background: var(--c-white); color: var(--c-ink); }
.button--accent { background: var(--c-red); color: var(--c-white); box-shadow: 0 8px 20px -10px rgba(219, 0, 7, .7); }
.button--accent:hover { background: var(--c-red-2); color: var(--c-white); }
.button--outline { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 2px currentColor; }
.button--outline:hover { background: var(--c-ink); color: var(--c-white); box-shadow: none; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.icon-button {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: transparent; text-decoration: none;
    transition: background-color .2s;
}
.icon-button:hover { background: rgba(0, 0, 0, .06); }

/* Round arrow buttons: outlined, or solid for the "next" one (McDonald's carousels pair the two). */
.round-button {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px;
    border: 2px solid currentColor; border-radius: 50%;
    background: transparent;
    transition: background-color .2s, color .2s, border-color .2s;
}
.round-button:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.round-button--solid { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.round-button--solid:hover { background: var(--c-red); border-color: var(--c-red); }
.round-button:disabled { opacity: .35; pointer-events: none; }

.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: var(--c-ink); transition: color .2s; }
.text-link:hover { color: var(--c-red); }
.text-link .icon { transition: transform .2s; }
.text-link:hover .icon { transform: translateX(4px); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 1.25rem; }
.pill { display: inline-block; padding: .4em .9em; border-radius: 999px; background: var(--c-yellow-soft); font-size: .85rem; font-weight: 700; color: var(--c-ink); }
.pill--small { font-size: .72rem; padding: .3em .75em; background: var(--c-yellow); color: var(--c-ink); }

/* ---------- Announcement bar ---------- */
.announcement-bar {
    overflow: hidden;
    background: var(--c-red); color: var(--c-white);
    font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.announcement-marquee { display: flex; width: max-content; animation: marquee var(--marquee-duration, 30s) linear infinite; }
.announcement-bar:hover .announcement-marquee { animation-play-state: paused; }
.announcement-marquee__group { display: flex; flex: none; }
.announcement-marquee__item { padding: 8px 64px 8px 0; white-space: nowrap; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-white); color: var(--c-ink); box-shadow: 0 4px 18px rgba(0, 0, 0, .06); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 8px 26px -6px rgba(0, 0, 0, .14); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: var(--header-h); }
.site-header__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.site-header__burger { display: none; }
.site-header__logo { text-decoration: none; display: inline-flex; min-width: 0; }
/* Height and width are both capped so a large logo file can never push the header open. */
.site-header__logo img { width: auto; height: calc(var(--header-h) - 16px); max-width: min(240px, 44vw); object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); }
.site-header__right { display: flex; align-items: center; gap: 6px; }
.site-header__shop { margin-right: 8px; }
/* Header icons (menu, WhatsApp, cart) are drawn larger than the icons elsewhere on the site. */
.site-header .icon-button { width: 50px; height: 50px; }
.site-header .icon-button .icon { width: 30px; height: 30px; }
.site-header__whatsapp { color: var(--c-whatsapp); }
.site-header__cart { position: relative; }
.cart-count {
    position: absolute; top: 2px; right: 0;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: var(--c-red); color: var(--c-white);
    font-size: .74rem; font-weight: 800; line-height: 20px; text-align: center;
    box-shadow: 0 0 0 2px var(--c-white);
}

/* The nav fills the full header height, so the "Shop Now" item's hover area reaches down to the mega menu. */
.site-header__nav { align-self: stretch; display: flex; justify-content: center; }
.nav-list { display: flex; gap: 4px; justify-content: center; }
.nav-list__item { display: flex; align-items: center; }
/* Plain black links; a red bar slides in underneath on hover, as on McDonald's. */
.nav-list__link {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 14px; border: 0;
    background: transparent; font-family: var(--f-display); font-size: 1.02rem; font-weight: 500; text-decoration: none;
    transition: color .2s;
}
.nav-list__link::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 2px;
    background: var(--c-red); transform: scaleX(0); transition: transform .25s var(--ease);
}
.nav-list__link:hover::after, .nav-list__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-list__link .icon { width: 1em; height: 1em; transition: transform .25s; }
.nav-list__link[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Mega menu */
.mega-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-white); color: var(--c-text); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .25); animation: drop .3s var(--ease); border-top: 3px solid var(--c-yellow); }
.mega-menu__inner { display: flex; gap: 20px; padding-block: 24px; }
.mega-menu__card { flex: 0 1 280px; text-decoration: none; }
.mega-menu__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); transition: transform .4s var(--ease); }
.mega-menu__card:hover img { transform: scale(1.03); }
.mega-menu__label { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-family: var(--f-display); font-weight: 700; transition: color .2s; }
.mega-menu__card:hover .mega-menu__label { color: var(--c-red); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Mobile drawer */
.menu-drawer { position: fixed; inset: 0; z-index: 100; }
.menu-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s; }
.menu-drawer__panel {
    position: absolute; inset: 0 auto 0 0; width: min(360px, 88vw);
    display: flex; flex-direction: column;
    padding: 64px 24px 24px;
    background: var(--c-white); color: var(--c-ink);
    border-top: 6px solid var(--c-yellow);
    transform: translateX(-100%); transition: transform .35s var(--ease);
}
.menu-drawer.is-open .menu-drawer__overlay { opacity: 1; }
.menu-drawer.is-open .menu-drawer__panel { transform: none; }
.menu-drawer__close { position: absolute; top: 12px; right: 12px; }
.menu-drawer__list > li { border-bottom: 1px solid var(--c-line); }
.menu-drawer__list a, .menu-drawer__group summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0; font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none;
}
.menu-drawer__list a:hover, .menu-drawer__group summary:hover { color: var(--c-red); }
.menu-drawer__group summary::-webkit-details-marker { display: none; }
.menu-drawer__group[open] summary .icon { transform: rotate(180deg); }
.menu-drawer__group ul { padding: 0 0 12px 12px; }
.menu-drawer__group ul a { padding: 8px 0; font-size: 1rem; font-family: var(--f-sans); font-weight: 500; color: #444; }
.menu-drawer__footer { margin-top: auto; display: grid; gap: 16px; }
.menu-drawer__contact { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-ink); font-weight: 700; }
.menu-drawer__contact .icon { color: var(--c-whatsapp); }

.social-list { display: flex; gap: 6px; }
.social-list a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); color: var(--c-ink); transition: background-color .2s, color .2s, border-color .2s; }
.social-list a:hover { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }

/* ---------- Logo intro (homepage) ---------- */
/* The homepage opens on a screen-high golden-yellow brand panel, sprinkled with sesame seeds, with the header logo
   large in its middle (where .logo-intro__spot sits); main.js shrinks the logo back into its place in the header as
   the panel scrolls away. It all waits for .has-logo-intro, which the inline script in header.php sets on <html>
   unless the visitor prefers reduced motion, so without JavaScript the page starts at the banners. */
.logo-intro { display: none; }
.has-logo-intro .logo-intro {
    --announce-h: 0px;
    position: relative;
    display: grid; place-items: center;
    /* Fills the rest of the first screen. The bottom padding matches the header above it,
       so the spot is centred in everything below the announcement bar. */
    height: calc(100svh - var(--announce-h) - var(--header-h));
    padding-bottom: var(--header-h);
    background: var(--tex-seeds) center / 150px 150px, var(--c-yellow);
}
/* The announcement bar is one line of .85rem text at line-height 1.6, plus 8px padding above and below. */
.has-logo-intro .announcement-bar ~ .logo-intro { --announce-h: calc(.85rem * 1.6 + 16px); }
.logo-intro__spot {
    width: min(720px, 84vw, (100svh - var(--announce-h)) * .5 * var(--logo-ratio, 1.74));
    aspect-ratio: var(--logo-ratio, 1.74);
}
/* --intro-p (0 at the top of the page, 1 once the panel has gone) is set by main.js. */
.logo-intro__cue {
    position: absolute; left: 50%; bottom: clamp(12px, 3svh, 32px); transform: translateX(-50%);
    display: grid; justify-items: center; gap: 2px;
    padding: 6px 14px; border: 0; background: none;
    color: var(--c-ink); font-size: .7rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
    opacity: calc(.9 - var(--intro-p, 0) * 5);
}
.logo-intro__cue span { margin-right: -.24em; }
.logo-intro__cue:focus-visible { opacity: 1; }
.logo-intro__cue .icon { width: 22px; height: 22px; color: var(--c-red); animation: logo-intro-bob 1.8s ease-in-out infinite; }
@keyframes logo-intro-bob { 50% { transform: translateY(6px); } }

/* The header logo stays hidden until main.js has moved it into the panel (.is-placed) and the image is
   ready (.is-shown), then pops in. If the script never runs, it shows up in the header after 3 seconds anyway. */
.has-logo-intro .site-header__logo { position: relative; isolation: isolate; visibility: hidden; }
.has-logo-intro .site-header__logo:not(.is-placed) { animation: logo-intro-failsafe 0s 3s forwards; }
.has-logo-intro .site-header__logo.is-shown { visibility: visible; }
/* Soft white spotlight behind the big logo. The logo draws it, so it travels and shrinks with it and fades out on the
   way into the header. Only 8% wider than the logo, which is at most 84vw, so it never makes the page scroll sideways. */
.has-logo-intro .site-header__logo::before {
    content: ''; position: absolute; inset: -30% -8%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 55%, transparent);
    opacity: calc(1 - var(--intro-p, 0) * 1.25);
}
.has-logo-intro .site-header__logo.is-shown > *,
.has-logo-intro .site-header__logo.is-shown::before { animation: logo-intro-pop .8s var(--ease-out); }
@keyframes logo-intro-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes logo-intro-failsafe { to { visibility: visible; } }
/* No shadow while the panel is still below the header: the white bar sits cleanly on the yellow. */
.site-header.is-intro { box-shadow: none; }
/* "Skip to content" lands just below the sticky header. */
.has-logo-intro #main { scroll-margin-top: var(--header-h); }

/* ---------- 1. Hero banners ---------- */
.hero { position: relative; overflow: hidden; background: var(--c-yellow); }
.hero__track { display: grid; }
.hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .5s ease, visibility 0s; }
.hero__link { display: block; }
.hero__link img { width: 100%; height: auto; }
.hero__caption { display: none; }
.hero__heading { font-size: clamp(1.7rem, 4vw, 3.2rem); letter-spacing: -.02em; }
.hero__text { font-size: 1.05rem; opacity: .9; margin-bottom: 1.25rem; }

.hero__nav {
    position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
    display: grid; place-items: center; width: 48px; height: 48px;
    border: 0; border-radius: 50%; background: var(--c-white); color: var(--c-red);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35);
    transition: background-color .2s, color .2s, transform .2s;
}
.hero__nav:hover { background: var(--c-red); color: var(--c-white); }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }
.hero__dots { position: absolute; bottom: 14px; left: 50%; z-index: 3; transform: translateX(-50%); display: flex; gap: 8px; }
.hero__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); transition: width .3s, background-color .3s; }
.hero__dot.is-active { width: 28px; background: var(--c-red); }
/* Bigger tap area than the visible dot. */
.hero__dot, .showcase__dot { position: relative; }
.hero__dot::after, .showcase__dot::after { content: ''; position: absolute; inset: -8px -4px; }

/* Fallback hero when no banners are published */
.hero--brand { color: var(--c-ink); text-align: center; background: var(--tex-seeds) center / 150px 150px, var(--c-yellow); }
.hero--brand__inner { display: grid; justify-items: center; gap: 20px; padding-block: clamp(56px, 10vw, 120px); }
.hero--brand img { width: min(360px, 70%); height: auto; }

/* ---------- 2. Scrolling promotion ---------- */
.promo-strip { overflow: hidden; background: var(--c-yellow); color: var(--c-ink); }
.promo-strip__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.promo-strip:hover .promo-strip__track { animation-play-state: paused; }
.promo-strip__group { display: flex; align-items: center; gap: 28px; padding: 14px 14px; white-space: nowrap; }
.promo-strip__text { font-family: var(--f-display); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.promo-strip__sep { font-size: .9rem; color: var(--c-red); }
@keyframes marquee { to { transform: translateX(-50%); } }
/* The yellow strip "drips" into the section below it, like the melting edges on McDonald's. The strip clips its own
   overflow for the marquee, so the drip is drawn by the next section, inside its top padding. */
.promo-strip + * { position: relative; }
.promo-strip + *::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; z-index: 1;
    height: clamp(22px, 2.8vw, 40px);
    background: var(--c-yellow); pointer-events: none;
    -webkit-mask: var(--tex-drip) 0 0 / max(900px, 100%) 100% repeat-x;
    mask: var(--tex-drip) 0 0 / max(900px, 100%) 100% repeat-x;
}

/* ---------- 3. Intro split ---------- */
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.intro__text p:not(.eyebrow) { margin: 0 0 1em; max-width: 50ch; font-family: var(--f-text); font-weight: 400; font-size: 17px; line-height: 1.6; color: #444; }
.intro__text p:last-of-type { margin-bottom: 30px; }
/* A yellow block, offset down and to the left, peeks out from behind the flip card. */
.intro__media { position: relative; isolation: isolate; }
.intro__media::before { content: ''; position: absolute; inset: 16px 16px -16px -16px; z-index: -1; border-radius: var(--radius); background: var(--c-yellow); }

.flip-card { perspective: 1400px; cursor: pointer; outline: none; }
.flip-card__inner { position: relative; aspect-ratio: 800 / 724; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.37, 0, .63, 1); }
.flip-card:hover .flip-card__inner, .flip-card:focus-visible .flip-card__inner, .flip-card.is-flipped .flip-card__inner { transform: rotateY(-180deg); }
.flip-card__face { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); backface-visibility: hidden; box-shadow: var(--shadow); }
.flip-card__face--back { transform: rotateY(180deg); }
.flip-card__face img { width: 100%; height: 100%; object-fit: cover; }

/* Modal */
.modal {
    width: min(960px, calc(100% - 32px)); max-height: calc(100svh - 32px);
    padding: 0; border: 0; border-radius: var(--radius);
    background: var(--c-white); color: var(--c-text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
    overflow: hidden;
}
.modal::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .35s var(--ease); }
.modal__close { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--c-white); box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.modal__close:hover { background: var(--c-red); color: var(--c-white); }
/* The grid scrolls, not the dialog, so the close button stays in view on short screens. */
.modal__grid { display: grid; grid-template-columns: 2fr 3fr; max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(24px, 4vw, 48px); }
.modal__body .section-heading { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.modal__body p { color: var(--c-muted); }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Showcase (flavours / collections) ---------- */
.showcase { background: var(--c-yellow); color: var(--c-ink); overflow: hidden; }

/* Pinned showcase: it sticks once its bottom reaches the bottom of the screen (--pin-top is set by main.js),
   then the storyteller, which comes next in .reveal-pair, slides up over it. */
.reveal-pair > .showcase { position: sticky; top: var(--pin-top, 0px); z-index: 0; }
.reveal-pair > .story { z-index: 1; box-shadow: 0 -16px 32px -14px rgba(0, 0, 0, .14); }
.showcase__grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 40px; align-items: center; padding-left: max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))); }
.showcase__heading { display: grid; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; }
.showcase__heading-scale { font-size: 1.35em; color: var(--c-red); }
.showcase__heading-nowrap { white-space: nowrap; }
.showcase__heading-light { color: var(--c-ink); }
.showcase__sidebar p { margin-top: 1rem; color: #3a3a3a; font-size: 1.05rem; }
.showcase__cta { margin-top: .5rem; }

.showcase__carousel { min-width: 0; }
.showcase__track {
    display: flex; gap: 20px; align-items: stretch;
    padding: 8px var(--gutter) 24px 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
}
.showcase__track::-webkit-scrollbar { display: none; }
.showcase__track > * { flex: 0 0 clamp(230px, 22vw, 280px); scroll-snap-align: start; }
.showcase__track .product-card { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .35); }
.showcase__controls { display: flex; align-items: center; gap: 16px; padding-right: var(--gutter); }
.showcase__controls .round-button { color: var(--c-ink); }
.showcase__controls .round-button--solid { color: var(--c-white); }
.showcase__dots { display: flex; gap: 8px; }
.showcase__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(0, 0, 0, .22); transition: width .3s, background-color .3s; }
.showcase__dot.is-active { width: 24px; background: var(--c-ink); }

/* Collection card (categories; also used on the shop page) */
.collection-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius); overflow: hidden;
    background: var(--c-white); color: var(--c-text); text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s;
}
a.collection-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.collection-card__media { position: relative; aspect-ratio: 5 / 6; overflow: hidden; }
.collection-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.collection-card:hover .collection-card__img { transform: scale(1.05); }
.collection-card__badge { position: absolute; top: 14px; left: 14px; z-index: 1; padding: .35em .85em; border-radius: 999px; background: var(--c-red); color: var(--c-white); font-size: .75rem; font-weight: 800; }
.collection-card__body { padding: 18px 20px 22px; }
.collection-card__brand { font-size: .7rem; font-weight: 800; letter-spacing: .18em; color: var(--c-tan); }
.collection-card__title { margin: .2em 0 .3em; font-size: 1.5rem; }
.collection-card__price { margin: 0 0 .8em; color: var(--c-muted); font-size: .92rem; }
.collection-card__cta { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-red); }
.collection-card--soon .collection-card__img { filter: grayscale(.85) brightness(.95); }
.collection-card--soon .collection-card__badge { background: var(--c-ink); color: var(--c-white); }
.collection-card--soon { opacity: .85; }

/* ---------- 5. Scroll storyteller ---------- */
/* Desktop: the section is pinned and the brand film (assets/img/story-film/) is scrubbed by scroll.
   main.js sets data-phase on .story: 1 = the film plays and holds on its last frame (the four feature nodes
   are part of it), 3 = the film fades out, the pack moves in as a fanned stack, the two cards slide in on the left.
   The three --*-screens values split the pinned scroll, in screen heights; main.js reads them too.
   Raise --film-screens to slow the film down, lower it to speed it up.
   The section stays cream, the colour the film's frames are graded to, and fades to white at its foot so it runs
   straight into the white section after it. */
.story {
    --film-screens: 7.5;  /* scrolling it takes to play the whole film */
    --hold-screens: .5;   /* the last frame stays while the four features are read */
    --cards-screens: .8;  /* the cards */
    position: relative;
    height: calc(100svh - var(--header-h) + (var(--film-screens) + var(--hold-screens) + var(--cards-screens)) * 100vh);
    background: linear-gradient(var(--c-cream), var(--c-white));
}
.story__sticky {
    position: sticky; top: var(--header-h);
    height: calc(100svh - var(--header-h));
    overflow: hidden;
}

/* Brand film: 16:9 frames drawn to cover the stage. The poster (the film's last frame) shows until the script
   draws and again once the film has reached its end. The frames' cream matches --c-cream, so no edge shows. */
.story__film { position: absolute; inset: 0; z-index: 2; background: var(--c-cream); transition: opacity .6s ease, transform 1s var(--ease-out); }
.story__film picture { display: contents; }
.story__film-canvas, .story__film-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.story__film-poster { object-fit: cover; }
.story__film.is-live .story__film-poster { visibility: hidden; }

/* Product pack (+ two extra packs that fan out in phase 3). Packs are portrait (7:10). Behind the film until phase 3. */
.story__product {
    position: absolute; z-index: 3; left: 50%; top: 57%;
    width: clamp(190px, min(23vw, 34vh), 320px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
    transition: left .9s var(--ease-out), top .9s var(--ease-out), transform .9s var(--ease-out), opacity .5s ease;
}
.story__pack { position: relative; z-index: 3; }
.story__pack img, .story__deck img { width: 100%; height: auto; border-radius: 16px; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .25)); }
.story__deck { position: absolute; inset: 0; opacity: 0; transform: scale(.85); transition: transform .85s var(--ease-out), opacity .5s ease; }
.story__deck--1 { z-index: 2; }
.story__deck--2 { z-index: 1; }

/* Feature nodes: icon circle, title, short text. On desktop they are drawn in the film, so the list is kept
   for screen readers only (same trick as .visually-hidden); the stacked layout under 990px shows it. */
.story__nodes { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; list-style: none; }
.story__node { display: flex; flex-direction: column; align-items: center; text-align: center; }
.story__node-icon {
    display: grid; place-items: center; flex: none;
    width: clamp(64px, 12vh, 104px); aspect-ratio: 1; margin-bottom: 10px;
    border-radius: 50%; border: 3px solid var(--c-yellow); background: var(--c-white); color: var(--c-red);
    box-shadow: 0 0 0 6px rgba(255, 188, 13, .22), 0 12px 28px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.story__node-icon .icon { width: 46%; height: 46%; stroke-width: 1.4; }
.story__node-icon img { width: 100%; height: 100%; object-fit: cover; }
.story__node-title { margin: 0 0 4px; font-family: var(--f-display); font-weight: 800; font-size: clamp(.95rem, 1.3vw, 1.15rem); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink); }
.story__node-text { margin: 0; font-family: var(--f-text); font-size: clamp(.8rem, 1vw, .92rem); line-height: 1.45; color: #555; }

/* Cards that slide in on the left in phase 3: one red, one yellow. */
.story__cards { position: absolute; z-index: 4; left: max(var(--gutter), 7%); top: 57%; width: min(380px, 33vw); transform: translateY(-50%); pointer-events: none; }
.story__card {
    position: relative; padding: clamp(14px, 2.6vh, 26px) clamp(18px, 2vw, 26px);
    border-radius: 20px; color: var(--c-white);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .28);
    opacity: 0;
    transition: transform .8s var(--ease-out), opacity .45s ease;
}
.story__card--1 { margin-bottom: clamp(20px, 5vh, 44px); background: var(--c-red); transform: translateY(40px) rotate(-6deg) scale(.95); }
.story__card--2 { margin: -6px 0 0 20%; background: var(--c-yellow); color: var(--c-ink); transform: translateY(40px) rotate(5deg) scale(.95); }
.story__card h3 { margin: 0 0 .45em; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.02rem, min(1.5vw, 3vh), 1.35rem); line-height: 1.2; color: inherit; }
.story__card p { margin: 0; font-family: var(--f-text); font-size: clamp(.8rem, min(1vw, 2.2vh), .95rem); line-height: 1.5; opacity: .92; }

/* Phase 3 */
.story[data-phase="3"] .story__film { opacity: 0; transform: scale(.97); pointer-events: none; }
.story[data-phase="3"] .story__product { opacity: 1; left: 70%; top: 52%; transform: translate(-50%, -50%) scale(.92) rotate(-6deg); }
.story[data-phase="3"] .story__deck { opacity: 1; }
.story[data-phase="3"] .story__deck--1 { transform: translate(-30%, 5%) rotate(-14deg) scale(.95); transition-delay: .1s; }
.story[data-phase="3"] .story__deck--2 { transform: translate(30%, 5%) rotate(14deg) scale(.95); transition-delay: .2s; }
.story[data-phase="3"] .story__cards { pointer-events: auto; }
.story[data-phase="3"] .story__card { opacity: 1; }
.story[data-phase="3"] .story__card--1 { transform: rotate(-6deg); }
.story[data-phase="3"] .story__card--2 { transform: rotate(5deg); transition-delay: .12s; }

/* Seal badge overlapping the top edge of the section */
.story__seal { position: absolute; top: 0; left: clamp(8px, 2vw, 32px); z-index: 6; width: clamp(88px, 9vw, 124px); transform: translateY(-55%) rotate(-8deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .2)); pointer-events: none; }
.story__seal svg { display: block; width: 100%; height: auto; }
.story__seal-edge { fill: var(--c-red); }
.story__seal-ring { fill: none; stroke: var(--c-yellow); stroke-width: 1.2; stroke-dasharray: 2 3; }
.story__seal-text { fill: var(--c-white); font-family: var(--f-sans); font-weight: 800; font-size: 9.5px; letter-spacing: .14em; }
.story__seal-icon path { fill: var(--c-yellow); }
.story__seal-icon .story__seal-vein { fill: none; stroke: var(--c-red); stroke-width: 1.6; stroke-linecap: round; }

/* Under 990px: no scroll phases, everything stacked; the film plays once as it scrolls into view */
@media (max-width: 989px) {
    /* The film is full-bleed and the section's gradient only starts under it (its height is a share of 100vw), so no edge shows. */
    .story { height: auto; background: linear-gradient(var(--c-cream) 56.25vw, var(--c-white)); }
    .story__sticky { position: static; height: auto; overflow: visible; display: grid; justify-items: center; gap: 28px; padding: 0 var(--gutter) 56px; }
    .story__film { position: relative; inset: auto; justify-self: stretch; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 16 / 9; opacity: 1; transform: none; }
    .story__deck { display: none; }
    .story__product { position: relative; left: auto; top: auto; width: min(280px, 70%); opacity: 1; transform: none !important; }
    .story__nodes { position: static; width: 100%; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; max-width: 640px; }
    .story__cards { position: static; display: grid; gap: 16px; width: 100%; max-width: 560px; transform: none; pointer-events: auto; }
    .story__card { margin: 0 !important; opacity: 1; }
    .story__card--1 { transform: rotate(-1.5deg) !important; }
    .story__card--2 { transform: rotate(1.5deg) !important; }
}
@media (max-width: 749px) {
    /* Taller crop on phones, so the logo reads bigger */
    .story { background: linear-gradient(var(--c-cream) 75vw, var(--c-white)); }
    .story__film { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
    .story__nodes { grid-template-columns: 1fr; gap: 18px; }
    .story__node { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
    .story__node-icon { width: 68px; margin: 0; }
}

/* ---------- 6. Numbers ---------- */
.impact { background: var(--c-white); text-align: center; }
.impact__inner { max-width: 960px; }
.impact .section-heading { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.impact__text { max-width: 60ch; margin-inline: auto; color: var(--c-muted); font-size: 1.05rem; }
.impact__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.impact__metric { display: grid; gap: 6px; padding: 28px 16px; border-radius: var(--radius); background: var(--c-white); border-top: 6px solid var(--c-yellow); box-shadow: var(--shadow-soft); }
.impact__number { font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--c-red); font-variant-numeric: tabular-nums; }
.impact__label { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }

/* ---------- 7. Reviews ---------- */
.reviews__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.reviews__title { margin: 0; color: var(--c-ink); }
.reviews__title .wordmark { display: block; margin-top: .1em; color: var(--c-red); font-size: 1.2em; }
.reviews__logo { display: block; width: min(260px, 60vw); height: auto; margin-top: .25em; }
.reviews__summary { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; }
.reviews__score { font-family: var(--f-display); font-size: clamp(3rem, 5vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--c-ink); }
.reviews__summary-meta { display: grid; gap: 6px; }
.reviews__stars { font-size: 1.1rem; letter-spacing: 3px; }
.reviews__count { font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--c-red); }

/* Star ratings, see stars() in includes/functions.php */
.stars { display: inline-flex; line-height: 1; white-space: nowrap; color: var(--c-star); }
.star--off { opacity: .3; }
.star--half {
    background: linear-gradient(90deg, var(--c-star) 50%, rgba(246, 164, 0, .3) 50%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.reviews__slider { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }
/* Vertical padding leaves room for the cards' shadows inside the clipped viewport. */
.reviews__viewport { flex: 1; min-width: 0; overflow: hidden; padding-block: 12px 28px; }
.reviews__track { --per-view: 3; --gap: clamp(16px, 2vw, 26px); display: flex; gap: var(--gap); transition: transform .6s var(--ease); }
.reviews__arrow { flex: none; color: var(--c-ink); }
.reviews__arrow.round-button--solid { color: var(--c-white); }
.review-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    display: flex; flex-direction: column;
    padding: clamp(24px, 2.6vw, 34px);
    border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-white); color: var(--c-ink);
    box-shadow: var(--shadow-soft);
}
.review-card__quote { flex: none; width: 34px; height: 26px; fill: var(--c-yellow); }
.review-card__text { flex: 1; margin: 22px 0 24px; font-family: var(--f-text); font-size: 1rem; line-height: 1.55; }
.review-card__footer { display: grid; justify-items: start; gap: 20px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.review-card__author { display: flex; align-items: center; gap: 14px; width: 100%; }
.review-card__avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-red); color: var(--c-white); font-family: var(--f-display); font-weight: 800; }
.review-card__name { flex: 1; min-width: 0; margin: 0; font-family: var(--f-sans); font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
.review-card__name small { display: block; font-weight: 600; font-size: .78rem; color: var(--c-muted); letter-spacing: 0; }
.review-card__stars { font-size: .95rem; letter-spacing: 2px; }
.review-card__product { padding: .8em 1.4em; border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px; font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; color: var(--c-text); }

/* ---------- Footer ---------- */
/* Light grey, as on McDonald's: a gentle wave on top with a red brand badge, a yellow sesame "bun" behind the
   brand column, a tan rule above the small print and capitalised policy links. */
.site-footer { margin-top: clamp(40px, 6vw, 80px); color: var(--c-text); }
.site-footer__wave { position: relative; height: 90px; }
.site-footer__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-grey-2); }
.site-footer__badge {
    position: absolute; left: 50%; top: 0; z-index: 1; transform: translate(-50%, -20%) rotate(-6deg);
    display: grid; place-items: center; width: 110px; height: 110px;
    border-radius: 50%; border: 4px solid var(--c-white);
    background: var(--c-red); color: var(--c-yellow);
    font-family: var(--f-logo); font-weight: 900;
    font-size: 1.35rem; letter-spacing: -.01em;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35);
}
.site-footer__body { overflow: hidden; background: var(--c-grey-2); padding-bottom: 24px; }
.site-footer__top { display: grid; grid-template-columns: 1.2fr .8fr 1.3fr; gap: 40px; padding-block: 32px 40px; }
.site-footer__brand { position: relative; isolation: isolate; }
.site-footer__brand p { margin-top: .5rem; color: #3a3a3a; }
/* The yellow "bun": an egg-shaped blob that runs off the left edge of the screen, like McDonald's newsletter panel. */
.site-footer__brand::before {
    content: ''; position: absolute; z-index: -1;
    top: -32px; bottom: -40px; left: -100vw; right: -28px;
    border-radius: 0 300px 260px 0 / 0 52% 48% 0;
    background: var(--tex-seeds) 0 0 / 150px 150px, var(--c-yellow);
}
.site-footer__logo { display: block; width: auto; height: clamp(84px, 9vw, 116px); }
.site-footer__sub { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; }
.site-footer__sub img { width: auto; height: 38px; }
.site-footer__heading { margin-bottom: 1em; font-size: .9rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink); }
.site-footer__links li { margin-bottom: .45em; }
.site-footer__links a { text-decoration: none; color: #333; transition: color .2s; }
.site-footer__links a:hover { color: var(--c-red); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: .7em; color: #333; }
.site-footer__contact .icon { margin-top: .2em; color: var(--c-red); }
.site-footer__contact a { color: var(--c-red); font-weight: 700; text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__fssai { font-size: .85rem; color: var(--c-muted) !important; }
.site-footer__middle { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 24px; }
.payment-list { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-list li { padding: .3em .8em; border-radius: 6px; background: var(--c-white); border: 1px solid rgba(0, 0, 0, .08); font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--c-ink); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--c-tan-line); font-size: .85rem; color: #555; }
.site-footer__bottom p { margin: 0; }
.policy-list { display: flex; flex-wrap: wrap; gap: 20px; }
.policy-list a { display: inline-block; padding-block: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #444; }
.policy-list a:hover { color: var(--c-red); }

/* ---------- Inner pages ---------- */
/* The title sits on a yellow tab that runs in from the left edge of the screen, like McDonald's product titles. */
.page-hero { overflow: hidden; padding-block: clamp(36px, 5vw, 64px) clamp(12px, 2vw, 24px); background: var(--c-white); }
.page-hero .section-heading {
    position: relative; display: inline-block; max-width: 100%;
    margin-bottom: .55em; padding: .3em .9em .3em 0;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    background: var(--c-yellow); border-radius: 0 1.1em 1.1em 0;
}
.page-hero .section-heading::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: inherit; }
.page-hero p { color: var(--c-muted); font-size: 1.1rem; margin: 0; max-width: 70ch; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.collection-grid .collection-card { flex: none; box-shadow: var(--shadow-soft); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.contact-details { display: grid; gap: 20px; align-content: start; }
.contact-details li { display: grid; gap: 2px; justify-items: start; }
.contact-details strong { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red); }
.contact-details .text-link { margin-top: 6px; font-size: .78rem; }
.contact-form { display: grid; gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-weight: 700; }
.contact-form input, .contact-form textarea { padding: 12px 14px; border: 1.5px solid #d9d9d9; border-radius: var(--radius-sm); background: var(--c-white); font: inherit; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(255, 188, 13, .5); }
.contact-form .button { justify-self: start; }
.prose { max-width: 70ch; }
.prose h2 { margin: 1.6em 0 .5em; font-size: 1.5rem; color: var(--c-ink); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: #444; font-size: 1.05rem; }

.section-pad--tight { padding-top: clamp(28px, 4vw, 48px); }

/* ---------- Product page ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; font-size: .85rem; color: var(--c-muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-red); text-decoration: underline; }
.product__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.product__media { position: sticky; top: calc(var(--header-h) + 24px); border-radius: var(--radius); overflow: hidden; background: var(--c-grey); box-shadow: var(--shadow-soft); }
.product__media img { width: 100%; height: auto; }
.product__media .product-card__badge { top: 16px; left: 16px; }
.product__title { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .2em; }
.product__weight { margin: 0 0 1em; font-weight: 700; color: var(--c-tan); }
.product__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 1.4em; }
.product__price strong { font-family: var(--f-display); font-size: 2rem; font-weight: 800; color: var(--c-ink); }
.product__price .product-card__sale { color: var(--c-red); }
.product__price s { color: #999; }
.product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 2em; }
.product__add { font-size: 1.05rem; }
.product__stock { font-size: .85rem; font-weight: 800; color: var(--c-red); }
.product__description h2 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
.product__description p { font-size: .98rem; }
.product-grid.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Shop: filters + product grid ---------- */
.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.shop__overlay, .shop-filters__head, .shop-filters__foot { display: none; }

.filter-group { border-bottom: 1px solid var(--c-line); }
.filter-group__title {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 0; list-style: none; cursor: pointer;
    font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--c-ink);
}
.filter-group__title::-webkit-details-marker { display: none; }
.filter-group__title .icon { width: 18px; height: 18px; transition: transform .25s; }
.filter-group[open] .filter-group__title .icon { transform: rotate(180deg); }
.filter-group__body { display: grid; gap: 14px; padding-bottom: 24px; }

.filter-check { display: flex; align-items: center; gap: 12px; font-family: var(--f-text); font-size: .95rem; cursor: pointer; }
.filter-check input {
    -webkit-appearance: none; appearance: none;
    flex: none; display: grid; place-items: center;
    width: 20px; height: 20px; margin: 0;
    border: 1.5px solid #c4c4c4; border-radius: 4px; background: var(--c-white);
    cursor: inherit; transition: background-color .15s, border-color .15s;
}
.filter-check input::after { content: ''; width: 10px; height: 5px; border: solid var(--c-white); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.filter-check input:checked { background: var(--c-red); border-color: var(--c-red); }
.filter-check input:checked::after { opacity: 1; }
.filter-check input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.filter-check__label { flex: 1; }
.filter-check__count { font-size: .8rem; color: var(--c-muted); }
.filter-check.is-disabled { opacity: .4; cursor: default; }

/* Two range inputs share one track; --from / --to (0–1) colour the selected span. */
.price-range { --from: 0; --to: 1; }
.price-range__slider { position: relative; height: 22px; }
.price-range__slider::before {
    content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
    background: linear-gradient(90deg, #e2e2e2 calc(var(--from) * 100%), var(--c-red) calc(var(--from) * 100%), var(--c-red) calc(var(--to) * 100%), #e2e2e2 calc(var(--to) * 100%));
}
.price-range__slider input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; }
.price-range__slider input::-webkit-slider-runnable-track { height: 22px; background: none; }
.price-range__slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: 1px; border: 3px solid var(--c-white); border-radius: 50%; background: var(--c-red); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: grab; pointer-events: auto; }
.price-range__slider input::-moz-range-track { background: none; }
.price-range__slider input::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--c-white); border-radius: 50%; background: var(--c-red); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: grab; pointer-events: auto; }
.price-range__slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 188, 13, .6); }
.price-range__slider input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255, 188, 13, .6); }
.price-range__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-field { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border: 1px solid #d9d9d9; border-radius: 8px; background: var(--c-white); }
.price-field:focus-within { border-color: var(--c-ink); }
.price-field__currency { font-size: .85rem; color: var(--c-muted); }
.price-field input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-family: var(--f-text); color: var(--c-text); outline: none; -moz-appearance: textfield; }
.price-field input::-webkit-outer-spin-button, .price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-range__apply { justify-self: start; padding: 1.05em 1.7em; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.shop__toolbar { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--c-line); }
.shop__count { margin: 0 auto 0 0; font-family: var(--f-text); color: var(--c-muted); }
.shop__filter-toggle, .shop__pincode {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px;
    background: transparent; font-size: .86rem; font-weight: 800; color: var(--c-ink); white-space: nowrap;
}
.shop__filter-toggle { display: none; }
.shop__filter-toggle .icon, .shop__pincode .icon { width: 18px; height: 18px; }
.shop__pincode:hover, .shop__filter-toggle:hover { border-color: var(--c-ink); background: var(--c-grey); }
.shop__sort { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.shop__sort select {
    -webkit-appearance: none; appearance: none;
    max-width: 100%; padding: 10px 40px 10px 18px;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px; background: var(--c-white);
    font: inherit; font-size: .86rem; font-weight: 700; color: var(--c-ink); text-overflow: ellipsis; cursor: pointer;
}
.shop__sort .icon { position: absolute; right: 14px; width: 16px; height: 16px; pointer-events: none; }
.shop__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 24px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border-radius: 999px; background: var(--c-yellow-soft); font-size: .82rem; font-weight: 700; color: var(--c-ink); text-decoration: none; }
.filter-chip:hover { background: var(--c-yellow); }
.filter-chip .icon { width: 14px; height: 14px; }
.shop__clear { margin-left: 4px; font-size: .82rem; font-weight: 800; color: var(--c-red); }
.shop__empty { display: grid; justify-items: center; gap: 12px; padding: 56px 0; text-align: center; color: var(--c-muted); }

/* Product cards: white, soft shadow, red tag and red "add" pill. */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.product-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius); overflow: hidden; background: var(--c-white); color: var(--c-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
    transition: transform .35s var(--ease), box-shadow .35s;
    scroll-margin-top: calc(var(--header-h) + 24px);
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .35); }
.product-card__top { position: relative; }
.product-card__media { display: block; aspect-ratio: 7 / 10; overflow: hidden; background: var(--c-grey); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card--sold-out .product-card__media img { opacity: .55; }
.product-card__badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: .5em 1.05em; border-radius: 999px; background: var(--c-red); color: var(--c-white); font-size: .64rem; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.product-card__badge--soldout { background: var(--c-ink); color: var(--c-white); }
/* Revealed on hover with a mouse; always shown on touch screens (see the hover: none query). */
.product-card__add {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
    padding: 13px 12px; border: 0; border-radius: 999px;
    background: var(--c-red); color: var(--c-white);
    font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s, transform .3s var(--ease), background-color .2s, color .2s;
}
.product-card:hover .product-card__add, .product-card__add:focus-visible { opacity: 1; transform: none; }
.product-card__add:hover { background: var(--c-red-2); color: var(--c-white); }
.product-card__add:disabled { cursor: progress; opacity: .7; }
.product-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; }
.product-card__brand { font-size: .64rem; font-weight: 800; letter-spacing: .14em; color: var(--c-tan); }
.product-card__title { margin: 0 0 4px; font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--c-ink); }
.product-card__title a { text-decoration: none; }
.product-card__title a:hover { color: var(--c-red); }
.product-card__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.product-card__price s { font-size: .82rem; color: #999; }
.product-card__price strong { font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.product-card__price .product-card__sale { color: var(--c-red); }
.product-card__off { padding: .35em .75em; border-radius: 999px; background: var(--c-yellow); color: var(--c-ink); font-size: .66rem; font-weight: 800; line-height: 1.2; }

/* Delivery (pincode) check */
.delivery-modal { width: min(440px, calc(100% - 32px)); background: var(--c-white); border-top: 6px solid var(--c-yellow); }
.delivery-modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 1;
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: none; color: var(--c-muted);
}
.delivery-modal__close:hover { background: var(--c-grey); color: var(--c-ink); }
.delivery-modal__close .icon { width: 18px; height: 18px; }
.delivery-modal__body { padding: 36px clamp(22px, 5vw, 32px) 30px; }
.delivery-modal__eyebrow { margin: 0 0 10px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); }
.delivery-modal__title { margin: 0 0 10px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2rem); line-height: 1.1; color: var(--c-ink); }
.delivery-modal__text { margin: 0 0 20px; font-family: var(--f-text); font-size: .9rem; line-height: 1.6; color: var(--c-muted); }
.delivery-modal__row { display: flex; gap: 10px; }
.delivery-modal__input {
    flex: 1; min-width: 0; height: 48px; padding: 0 16px;
    border: 1.5px solid #d4d4d4; border-radius: 999px; background: var(--c-white);
    font: inherit; font-family: var(--f-text); letter-spacing: .04em; color: var(--c-text);
}
.delivery-modal__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(255, 188, 13, .5); }
.delivery-modal__input[aria-invalid="true"] { border-color: var(--c-red); }
.delivery-modal__submit { flex: none; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--c-red); color: var(--c-white); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.delivery-modal__submit:hover { background: var(--c-red-2); }
.delivery-modal__submit:disabled { opacity: .6; cursor: progress; }
.delivery-modal__message { min-height: 1.5em; margin: 10px 0 0; font-size: .85rem; }
.delivery-modal__message.is-error { color: var(--c-red); }
.delivery-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 200;
    display: flex; align-items: center; gap: 16px;
    width: max-content; max-width: calc(100% - 32px); padding: 14px 20px;
    border-radius: 14px; background: var(--c-ink); color: var(--c-white);
    font-size: .92rem; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--c-yellow); font-weight: 800; white-space: nowrap; }

/* Offer popup */
.offer-modal { width: min(780px, calc(100% - 32px)); border-radius: 28px; background: var(--c-white); border-top: 8px solid var(--c-yellow); }
.offer-modal__close {
    position: absolute; top: 16px; right: 16px; z-index: 1;
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1.5px solid var(--c-ink); border-radius: 50%; background: none; color: var(--c-ink);
    transition: background-color .2s, color .2s;
}
.offer-modal__close:hover { background: var(--c-ink); color: var(--c-white); }
.offer-modal__close .icon { width: 18px; height: 18px; }
.offer-modal__body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 52px clamp(20px, 9vw, 74px) clamp(28px, 5vw, 44px); text-align: center; }
.offer-modal__title { margin: 0 0 12px; font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 6.4vw, 3rem); line-height: 1.1; letter-spacing: -.02em; color: var(--c-ink); }
.offer-modal__text { margin: 0 0 18px; font-size: clamp(1.05rem, 2.8vw, 1.4rem); line-height: 1.35; color: var(--c-ink); }
.offer-modal__note { margin: 0 0 22px; font-size: .85rem; color: var(--c-muted); }
.offer-modal__field { width: 100%; height: 50px; margin-bottom: 18px; border: 1px solid #cfcfcf; border-radius: 999px; background: var(--c-white); overflow: hidden; }
input.offer-modal__field, .offer-modal__phone input { padding: 0 18px; font: inherit; letter-spacing: .08em; color: var(--c-text); }
.offer-modal__field::placeholder, .offer-modal__phone input::placeholder { color: #8a8a8a; }
input.offer-modal__field:focus, .offer-modal__phone:focus-within { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(255, 188, 13, .5); }
.offer-modal__field[aria-invalid="true"] { border-color: var(--c-red); }
.offer-modal__phone { display: flex; align-items: center; }
.offer-modal__prefix { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px 0 18px; border-right: 1px solid rgba(0, 0, 0, .18); font-size: .92rem; font-weight: 700; color: var(--c-ink); }
.offer-modal__phone input { flex: 1; width: 0; min-width: 0; height: 100%; border: 0; background: none; outline: none; }
.offer-modal__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.offer-modal__error { margin: -6px 0 14px; font-size: .88rem; color: var(--c-red); }
.offer-modal__error:empty { display: none; }
.offer-modal__submit {
    width: min(100%, 470px); height: 58px; margin-top: 2px;
    border: 0; border-radius: 999px; background: var(--c-red); color: var(--c-white);
    font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 10px 22px -12px rgba(219, 0, 7, .8);
    transition: background-color .2s, transform .2s;
}
.offer-modal__submit:hover { background: var(--c-red-2); transform: translateY(-1px); }
.offer-modal__submit:disabled { opacity: .6; cursor: progress; transform: none; }
.offer-modal__code { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; padding: 10px 10px 10px 22px; border: 2px dashed var(--c-red); border-radius: 14px; background: var(--c-yellow-soft); }
.offer-modal__code span { font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; letter-spacing: .12em; color: var(--c-ink); }
.offer-modal__code button { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--c-ink); color: var(--c-white); font-size: .85rem; font-weight: 700; }
.offer-modal__code button:hover { background: var(--c-red); }

/* ---------- Cart ---------- */
.cart-notice { margin: 0 0 24px; padding: 12px 16px; border-radius: var(--radius-sm); background: #e9f6ec; color: var(--c-ink); font-weight: 700; }
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.cart-line:first-child { padding-top: 0; }
.cart-line__image { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: var(--c-grey); }
.cart-line__name { margin: 0 0 4px; font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--c-ink); }
.cart-line__price { margin: 0 0 4px; font-size: .9rem; color: var(--c-muted); }
.cart-line__remove { padding: 0; border: 0; background: none; font-size: .82rem; color: var(--c-muted); text-decoration: underline; }
.cart-line__remove:hover { color: var(--c-red); }
.cart-line__qty { display: inline-flex; align-items: center; border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px; }
.cart-line__qty button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; font-size: 1.1rem; color: var(--c-ink); }
.cart-line__qty button:hover { color: var(--c-red); }
.cart-line__qty button:disabled { opacity: .3; cursor: default; }
.cart-line__count { min-width: 24px; font-weight: 800; text-align: center; }
.cart-line__total { margin: 0; min-width: 72px; font-weight: 800; text-align: right; color: var(--c-ink); }
.cart__summary { display: grid; gap: 16px; padding: 28px; border-radius: var(--radius); background: var(--c-white); border-top: 6px solid var(--c-yellow); box-shadow: 0 10px 34px -12px rgba(0, 0, 0, .18); }
.cart__title { margin: 0; font-size: 1.4rem; color: var(--c-ink); }
.cart__totals { display: grid; gap: 10px; margin: 0; }
.cart__totals div { display: flex; justify-content: space-between; gap: 12px; }
.cart__totals dt { color: var(--c-muted); }
.cart__totals dd { margin: 0; font-weight: 700; }
.cart__grand { padding-top: 12px; border-top: 1px solid var(--c-line); font-size: 1.1rem; }
.cart__grand dt, .cart__grand dd { font-weight: 800; color: var(--c-ink); }
.cart__hint { margin: 0; font-size: .85rem; color: var(--c-green); font-weight: 700; }
.cart__pincode summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: .9rem; }
.cart__pincode summary::-webkit-details-marker { display: none; }
.cart__pincode .icon { width: 18px; height: 18px; color: var(--c-red); }
.cart__change { margin-left: auto; font-size: .82rem; color: var(--c-muted); text-decoration: underline; }
.cart__pincode-form { display: flex; gap: 8px; margin-top: 10px; }
.cart__pincode-form input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px; font: inherit; }
.cart__pincode-form input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(255, 188, 13, .5); }
.cart__checkout { justify-content: center; }
.cart__checkout:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cart__continue { justify-self: center; font-size: .88rem; color: var(--c-ink); }
.cart__continue:hover { color: var(--c-red); }

.maintenance { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: var(--tex-seeds) center / 150px 150px, var(--c-yellow); color: var(--c-ink); }
.maintenance .section-heading { color: var(--c-ink); margin: 12px 0 0; }
.maintenance p { max-width: 44ch; color: #2a2a2a; }
.maintenance a { color: var(--c-ink); font-weight: 800; }

/* ---------- Responsive ---------- */
@media (min-width: 990px) and (max-width: 1149px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-grid.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 989px) {
    /* Shop: the filter sidebar becomes a drawer opened from the toolbar. */
    .shop { grid-template-columns: minmax(0, 1fr); }
    .shop__overlay { display: block; position: fixed; inset: 0; z-index: 105; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
    .shop-filters {
        position: fixed; inset: 0 auto 0 0; z-index: 110;
        display: flex; flex-direction: column;
        width: min(380px, 88vw); padding: 0 20px;
        background: var(--c-white); overflow-y: auto; overscroll-behavior: contain;
        visibility: hidden; transform: translateX(-100%);
        transition: transform .35s var(--ease), visibility .35s;
    }
    .shop.is-filtering .shop__overlay { opacity: 1; pointer-events: auto; }
    .shop.is-filtering .shop-filters { visibility: visible; transform: none; }
    .shop-filters__head {
        position: sticky; top: 0; z-index: 1;
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 0; background: var(--c-white); border-bottom: 1px solid var(--c-line);
    }
    .shop-filters__title { margin: 0; font-size: 1.25rem; color: var(--c-ink); }
    .shop-filters__foot {
        position: sticky; bottom: 0;
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        margin-top: auto; padding: 14px 0 18px; background: var(--c-white);
    }
    .shop-filters__foot .button { justify-content: center; padding-inline: 1em; }
    .shop__filter-toggle { display: inline-flex; }

    .cart { grid-template-columns: minmax(0, 1fr); }
    .product__grid { grid-template-columns: 1fr; }
    .product__media { position: static; max-width: 520px; }
    .product-grid.product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .site-header .icon-button { width: 44px; height: 44px; }
    .site-header .icon-button .icon { width: 27px; height: 27px; }
    .site-header__burger { display: inline-grid; }
    .site-header__nav, .site-header__shop { display: none; }
    .site-header__inner { grid-template-columns: 1fr auto; }
    .mega-menu { display: none; }

    .intro__grid { grid-template-columns: 1fr; }
    .intro__media { max-width: 520px; }
    .showcase__grid { grid-template-columns: 1fr; padding-left: var(--gutter); }
    .showcase__track > * { flex-basis: clamp(210px, 40vw, 260px); }
    .reviews__track { --per-view: 2; }
}

@media (max-width: 749px) {
    /* Hero: the banner at its natural size, with its heading, text and button underneath on a yellow panel. */
    .hero__caption { display: block; padding: 22px 0 54px; background: var(--c-yellow); color: var(--c-ink); }
    .hero__caption .hero__heading { font-size: 1.6rem; margin-bottom: .35em; color: var(--c-red); }
    .hero__caption .hero__text { font-size: .95rem; margin-bottom: 1rem; }
    .hero__nav { display: none; }
    .hero__dots { bottom: 16px; }
    .hero__dot { background: rgba(0, 0, 0, .22); box-shadow: none; }

    .modal__grid { grid-template-columns: 1fr; }
    .modal__media img { max-height: 240px; }

    .story__seal { width: 96px; }

    .reviews__header { flex-direction: column; align-items: flex-start; }
    .reviews__summary { padding-bottom: 0; }
    .reviews__track { --per-view: 1; }
    .reviews__arrow { display: none; }
    .reviews__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .reviews__viewport::-webkit-scrollbar { display: none; }
    .reviews__viewport .review-card { scroll-snap-align: start; flex-basis: 86%; }

    .site-footer__top, .contact-grid { grid-template-columns: 1fr; }
    /* One column: the bun becomes a full-width yellow band with a rounded foot behind the brand block. */
    .site-footer__brand { padding-bottom: 8px; }
    .site-footer__brand::before { top: -32px; bottom: -24px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); border-radius: 0 0 50% 50% / 0 0 48px 48px; }
    .site-footer__badge { width: 86px; height: 86px; font-size: 1.1rem; }
    .site-header .wordmark { font-size: 1.85rem; }

    /* Shop: toolbar on two rows, two products per row. */
    .shop__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .shop__filter-toggle { order: 1; justify-self: start; }
    .shop__sort { order: 2; justify-self: end; max-width: 190px; }
    .shop__count { order: 3; align-self: center; font-size: .9rem; }
    .shop__pincode { order: 4; justify-self: end; padding: 8px 12px; font-size: .8rem; }
    .product-grid, .product-grid.product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .product-card { border-radius: 12px; }
    .product-card__badge { top: 8px; left: 8px; font-size: .58rem; }
    .product-card__add { left: 6px; right: 6px; bottom: 6px; padding: 10px 6px; font-size: .64rem; letter-spacing: .08em; }
    .product-card__body { gap: 4px; padding: 12px 12px 14px; }
    .product-card__brand { font-size: .58rem; }
    .product-card__title { font-size: 1rem; line-height: 1.3; }
    .product-card__price { gap: 2px 6px; }
    .product-card__price s { font-size: .74rem; }
    .product-card__price strong { font-size: 1rem; }
    .product-card__off { font-size: .6rem; }
    .showcase__track > * { flex-basis: clamp(200px, 58vw, 240px); }

    .offer-modal { border-radius: 22px; }
    .offer-modal__body { padding: 60px 22px 28px; }
    .offer-modal__field { height: 48px; margin-bottom: 14px; }
    .offer-modal__submit { height: 54px; font-size: .95rem; }

    .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 10px 14px; }
    .cart-line__image { grid-row: span 2; width: 72px; height: 72px; }
    .cart-line__qty { grid-column: 2; grid-row: 2; justify-self: start; }
    .cart-line__total { grid-column: 3; grid-row: 1; min-width: 0; }
    .cart__summary { padding: 22px; }
}

@media (max-width: 560px) {
    .impact__row { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
    .impact__metric { padding: 20px 16px; }

    .policy-list { gap: 0 20px; }
}

/* Touch screens have no hover, so the quick-add button is always visible. */
@media (hover: none) {
    .product-card__add { opacity: 1; transform: none; }
    .product-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .promo-strip__track, .announcement-marquee { animation: none; }
    .story { --film-screens: .5; } /* the film shows as a still, so it needs little scrolling */
}