/* =========================================================================
   CHOMP — Design System / Global Stylesheet
   Loaded on every page. Page-specific CSS (home, woocommerce, build-a-box,
   events) is enqueued separately and conditionally.
   ------------------------------------------------------------------------
   Table of contents
   1.  Design tokens (custom properties)
   2.  Reset & base
   3.  Typography
   4.  Layout & containers
   5.  Buttons
   6.  Forms & inputs
   7.  Cards
   8.  Badges (dietary / product)
   9.  Notices & messages
   10. Focus, skip link, screen-reader utilities
   11. Motion / prefers-reduced-motion
   12. Utilities
   ========================================================================= */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
	/* ============================================================
	   CHOMP Design Language v2 — "Big Mint, Soft Serve"
	   Light-forward. #7DCABD is the HERO FILL on warm cream.
	   Dark teal (#14564C) is demoted to a text/ink utility only.
	   All pairs verified WCAG AA (most AAA). Fills ≠ text roles.
	   ============================================================ */

	/* Surfaces */
	--chomp-bg:            #FFFDF8; /* warm buttery cream — page canvas */
	--chomp-cream:         #FFFDF8; /* legacy alias -> bg */
	--chomp-cream-2:       #FCEEDD; /* warm toffee tint band */
	--chomp-surface:       #FFFFFF; /* cards, nav, floating panels */
	--chomp-surface-alt:   #E9F7F2; /* light mint-wash section band */

	/* Mint — THE HERO. Fills/backgrounds only (never text on light). */
	--chomp-primary:       #7DCABD; /* button fill, bands, hero pillow, progress */
	--chomp-primary-600:   #5FB9AA; /* mint hover / pressed */
	--chomp-primary-soft:  #E4F5F0; /* tint cards, badges, quiet panels, section--soft */
	--chomp-primary-soft2: #CDEBE3; /* stronger mint tint / focus wash */
	--chomp-mint-border:   #B4E0D6; /* DECORATIVE tonal hairline only */
	--chomp-ui-border:     #389A89; /* perceivable control edges (3.4:1 on light) */

	/* Teal ink — text / icons / links ONLY (the old brand green, demoted) */
	--chomp-teal-deep:     #14564C; /* links, eyebrows, headings-on-mint (large) */
	--chomp-primary-700:   #176357; /* strong teal for small UI text/icons */
	--chomp-primary-800:   #14564C; /* legacy TEXT alias (fills use --chomp-primary) */
	--chomp-primary-ink:   #14564C; /* large text on mint */

	/* Neutrals */
	--chomp-ink:     #211E1B; /* body/display text; label on mint (8.7:1) */
	--chomp-ink-2:   #3A342F;
	--chomp-muted:   #5C554D; /* secondary text — AA everywhere */
	--chomp-border:  #ECE3D8; /* warm decorative hairline on cream */
	--chomp-border-2:#389A89; /* form/control edges -> perceivable ui-border */
	--chomp-border-mint: #CDE9E2; /* decorative hairline on mint-wash */

	/* Warm + berry + sunny accents (personality, used sparingly) */
	--chomp-caramel:      #F2A65A; /* toffee — DECORATIVE fill only, no text */
	--chomp-caramel-soft: #FCEEDD;
	--chomp-on-warm:      #6B3D0F; /* approved text on toffee-soft (8:1) */
	--chomp-berry:        #E4568A; /* white text only >=19px bold */
	--chomp-berry-soft:   #FBE4EC;
	--chomp-berry-ink:    #8A2350; /* berry text (8.6:1 white) */
	--chomp-sunny:        #FFD25A; /* highlight-swipe / joy pops — decorative */

	/* Semantic */
	--chomp-success: #1E7A4D; --chomp-success-soft: #E4F4EC;
	--chomp-warning: #A6650A; --chomp-warning-soft: #FBF0DC;
	--chomp-error:   #C0341D; --chomp-error-soft: #FBE7E3;
	--chomp-info:    #1F6FB2; --chomp-info-soft: #E5F1FA;
	--chomp-overlay: rgba(20, 86, 76, .55); /* teal-tinted scrim */

	/* Spacing scale */
	--space-3xs: .25rem; --space-2xs: .375rem; --space-xs: .5rem; --space-sm: .75rem;
	--space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
	--space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: clamp(5rem, 4rem + 5vw, 8rem);

	/* Radii — pillow-soft (nothing sharper than 8px) */
	--radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 22px;
	--radius-xl: 32px; --radius-2xl: 48px; --radius-pill: 999px;

	/* Shadows — soft, low-opacity, teal/mint-tinted (never neutral grey) */
	--shadow-xs: 0 1px 2px rgba(20, 86, 76, .06);
	--shadow-sm: 0 3px 10px rgba(20, 86, 76, .07);
	--shadow-md: 0 10px 28px rgba(20, 86, 76, .09);
	--shadow-lg: 0 22px 54px rgba(20, 86, 76, .13);
	--shadow-xl: 0 36px 90px rgba(20, 86, 76, .15);
	--shadow-mint: 0 14px 34px rgba(125, 202, 189, .42); /* glowing lift on mint */
	--shadow-sticker: 0 6px 14px rgba(20, 86, 76, .16);
	--shadow-warm: 0 12px 28px rgba(107, 61, 15, .12);
	--shadow-teal: var(--shadow-mint); /* legacy alias */
	--pillow-top: inset 0 1px 0 rgba(255, 255, 255, .6); /* soft lit edge */

	/* Fluid type scale */
	--fs-xs: .8125rem;
	--fs-sm: .9rem;
	--fs-base: 1.0625rem;
	--fs-md:  clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
	--fs-lg:  clamp(1.35rem, 1.15rem + .9vw, 1.75rem);
	--fs-xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--fs-2xl: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
	--fs-3xl: clamp(2.6rem, 1.9rem + 3vw, 4rem);
	--fs-hero: clamp(3rem, 2rem + 4.4vw, 5.25rem);

	/* Typography — Roboto Slab (display) + Roboto (body) + Rock Salt (signature), self-hosted, matched to chompcookies.ca */
	--font-body: "Roboto", "Roboto Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--font-display: "Roboto Slab", "Roboto Slab Fallback", Georgia, "Times New Roman", serif;
	--font-hand: "Rock Salt", "Segoe Script", "Bradley Hand", cursive; /* signature — use sparingly */
	--lh-tight: 1.05;
	--lh-snug: 1.3;
	--lh-body: 1.6;

	/* Layout */
	--container: 1200px;
	--container-narrow: 720px;
	--container-wide: 1360px;
	--header-h: 68px;

	/* Motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* signature pillow-spring */
	--dur-fast: 140ms;
	--dur: 260ms;
	--dur-mid: 340ms;
	--dur-slow: 560ms;
	--dur-bite: 700ms;

	/* Focus — passes 3:1 on every brand surface incl. mint fills */
	--focus-ring: var(--chomp-focus, #176357);
	--chomp-focus: #176357;
	--focus-halo: rgba(20, 86, 76, .28);
}

/* 2. RESET & BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--chomp-ink);
	background: var(--chomp-cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--chomp-primary-800); text-decoration: none; }
a:hover { text-decoration: underline; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:target { scroll-margin-top: calc(var(--header-h) + 1rem); }
hr { border: 0; border-top: 1px solid var(--chomp-border); margin: var(--space-xl) 0; }

/* Body scroll lock (used by mobile menu / modals) */
body.chomp-no-scroll { overflow: hidden; }

/* 3. TYPOGRAPHY --------------------------------------------------------- */
body { font-optical-sizing: auto; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); color: var(--chomp-ink); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
.eyebrow { display: inline-block; font-weight: 800; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--chomp-primary-800); }
.lead { font-size: var(--fs-md); color: var(--chomp-muted); }
:where(h1, h2, h3) .accent { color: var(--chomp-primary-700); }

/* 4. LAYOUT & CONTAINERS ------------------------------------------------ */
.container { width: min(100% - 2 * var(--space-lg), var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2 * var(--space-lg), var(--container-narrow)); margin-inline: auto; }
.container-wide { width: min(100% - 2 * var(--space-lg), var(--container-wide)); margin-inline: auto; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section--cream { background: var(--chomp-cream); }
.section--soft { background: var(--chomp-primary-soft); }
.section--surface { background: var(--chomp-surface); }
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.section-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--chomp-muted); font-size: var(--fs-md); }
.section-head h2 { overflow-wrap: break-word; text-wrap: balance; }
/* Keep long section headings inside narrow phones (no clipping / no h-scroll). */
@media (max-width: 560px) {
	.section-head h2 { font-size: var(--fs-xl); }
}
main { display: block; }

/* Responsive grid helper */
.grid { display: grid; gap: var(--space-lg); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* 5. BUTTONS ------------------------------------------------------------ */
.btn,
.chomp .button,
a.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	min-height: 48px; /* mobile tap target */
	padding: 0.85rem 1.6rem;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	-webkit-tap-highlight-color: transparent;
	text-align: center;
}
.btn:hover { text-decoration: none; }
/* Pillow-press: cushion up on hover, squish on press */
@media (prefers-reduced-motion: no-preference) {
	.btn:hover { transform: translateY(-3px); }
	.btn:active { transform: scale(.96); }
}

/* PRIMARY = light mint fill + dark ink label (the inversion of the old dark button) */
.btn-primary { background: var(--chomp-primary); color: var(--chomp-ink); box-shadow: var(--shadow-mint), var(--pillow-top); }
.btn-primary:hover { background: var(--chomp-primary-600); color: var(--chomp-ink); box-shadow: var(--shadow-mint), var(--pillow-top); }

.btn-brand { background: var(--chomp-primary); color: var(--chomp-ink); box-shadow: var(--pillow-top); }
.btn-brand:hover { background: var(--chomp-primary-600); color: var(--chomp-ink); }

/* SECONDARY = ghost with a perceivable mint edge + teal-deep label */
.btn-secondary { background: var(--chomp-surface); color: var(--chomp-teal-deep); border-color: var(--chomp-ui-border); }
.btn-secondary:hover { background: var(--chomp-primary-soft); color: var(--chomp-teal-deep); border-color: var(--chomp-teal-deep); }

.btn-ghost { background: transparent; color: var(--chomp-ink); border-color: var(--chomp-ui-border); }
.btn-ghost:hover { background: var(--chomp-surface); border-color: var(--chomp-ink); }

.btn-berry { background: var(--chomp-berry-ink); color: #fff; font-weight: 700; }
.btn-berry:hover { filter: brightness(.96); }

.btn-sm { min-height: 40px; padding: .55rem 1.1rem; font-size: .9rem; }
.btn-lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.075rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:active { transform: none; }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* 6. FORMS & INPUTS ----------------------------------------------------- */
label { font-weight: 600; font-size: var(--fs-sm); display: inline-block; margin-bottom: .35rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], input[type="password"], textarea, select {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--chomp-surface);
	border: 1.5px solid var(--chomp-border-2);
	border-radius: var(--radius-sm);
	color: var(--chomp-ink);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #767066; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--chomp-primary-700); box-shadow: 0 0 0 4px var(--chomp-primary-soft2); }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323201D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
.field-help { font-size: var(--fs-xs); color: var(--chomp-muted); margin-top: .3rem; }
.field-error { color: var(--chomp-error); font-size: var(--fs-sm); margin-top: .3rem; }

/* Quantity stepper: rounded pill holding circular +/- buttons and a bold,
   auto-fitting count. Buttons sit inside the pill (padding); hover = soft
   mint circle; the count is always bold and uses tabular figures so 1 / 10 /
   100 stay centred and never clip. */
.chomp-qty { display: inline-flex; align-items: center; gap: .1rem; padding: .25rem; border: 1.5px solid var(--chomp-border-2); border-radius: var(--radius-pill); background: var(--chomp-surface); }
.chomp-qty__btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; font-weight: 800; color: var(--chomp-primary-700); line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.chomp-qty__btn:hover { background: var(--chomp-primary-soft); color: var(--chomp-primary-800); }
.chomp-qty__btn:active { transform: scale(.92); }
.chomp-qty__btn[disabled] { color: var(--chomp-border-2); cursor: not-allowed; background: transparent; transform: none; }
/* .chomp-qty scope raises specificity above the global input[type=number] rule. */
.chomp-qty .chomp-qty__input { width: 2.75rem; min-height: 36px; text-align: center; border: 0; border-radius: 0; padding: 0 .2rem; background: transparent; color: var(--chomp-ink); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.chomp-qty .chomp-qty__input::-webkit-outer-spin-button, .chomp-qty .chomp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chomp-qty .chomp-qty__input:focus { outline: 0; border: 0; box-shadow: none; }

/* 7. CARDS -------------------------------------------------------------- */
.card { background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; overflow: clip; transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* display:block is load-bearing: when the media is an <a> (e.g. the cookie menu),
   inline layout drops aspect-ratio + overflow and the body overflows the card. */
.card__media { display: block; position: relative; aspect-ratio: 1 / 1; background: var(--chomp-primary-soft); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.card__title { font-size: var(--fs-lg); }
.card__title a { color: inherit; }
.card__desc { color: var(--chomp-muted); font-size: var(--fs-sm); }

/* 7b. CALLOUT + HINT ----------------------------------------------------
   A friendly nudge card (icon, heading, one line, one CTA) and the speech
   bubble that can greet you once you take it up. Shared: the contact page's
   order shortcut and the product page's box shortcut are the same component,
   so they can't drift apart. Colour comes from a --warm / --mint modifier.

   The card is one link: __cta stretches its hit area over the whole card, so
   the whole surface is clickable with no JS and only one tab stop. Anything
   that needs a richer click (see contact.js) intercepts the bubbled event. */
.chomp-callout { position: relative; display: flex; gap: var(--space-md); padding: var(--space-lg); border: 1.5px solid transparent; border-radius: var(--radius-lg); background: var(--chomp-primary-soft); color: var(--chomp-ink); cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.chomp-callout__icon { flex: none; font-size: 2rem; line-height: 1; }
.chomp-callout__body { min-width: 0; }
.chomp-callout h3 { margin: 0 0 .25rem; font-size: 1.15rem; color: inherit; }
.chomp-callout p { margin: 0; font-size: var(--fs-sm); }
.chomp-callout__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; color: inherit; font-size: var(--fs-sm); font-weight: 800; }
.chomp-callout__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.chomp-callout__cta .icon { transition: transform var(--dur) var(--ease); }
.chomp-callout:hover { transform: translateY(-2px); }
.chomp-callout:active { transform: translateY(0); }
.chomp-callout:hover .chomp-callout__icon { animation: chomp-callout-nudge var(--dur-bite) var(--ease); }
.chomp-callout:hover .chomp-callout__cta .icon { transform: translateX(3px); }
.chomp-callout:has(:focus-visible) { border-color: var(--chomp-ui-border); }
.chomp-callout--warm { background: var(--chomp-caramel-soft); color: var(--chomp-on-warm); }
.chomp-callout--warm:hover { border-color: var(--chomp-caramel); box-shadow: var(--shadow-warm); }
.chomp-callout--mint { background: var(--chomp-primary-soft); color: var(--chomp-teal-deep); }
.chomp-callout--mint:hover { border-color: var(--chomp-mint-border); box-shadow: var(--shadow-mint); }

@keyframes chomp-callout-nudge {
	0%, 100% { transform: rotate(0) scale(1); }
	35%      { transform: rotate(-9deg) scale(1.12); }
	70%      { transform: rotate(6deg) scale(1.06); }
}

/* Speech bubble. Tail points down at whatever it is talking about, so place it
   immediately before that element. .is-in pops it, .is-out retires it. */
.chomp-hint { position: relative; display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .95rem; padding: .7rem .9rem; border: 1.5px solid var(--chomp-mint-border); border-radius: var(--radius-md); background: var(--chomp-primary-soft); box-shadow: var(--shadow-sm); color: var(--chomp-teal-deep); font-size: var(--fs-sm); font-weight: 600; }
.chomp-hint__emoji { flex: none; font-size: 1.05rem; line-height: 1.35; }
.chomp-hint::after { content: ""; position: absolute; top: 100%; left: 1.75rem; width: 12px; height: 12px; margin-top: -7px; border-right: 1.5px solid var(--chomp-mint-border); border-bottom: 1.5px solid var(--chomp-mint-border); border-bottom-right-radius: 3px; background: var(--chomp-primary-soft); transform: rotate(45deg); }
.chomp-hint.is-in { animation: chomp-hint-in var(--dur-mid) var(--ease) both; }
.chomp-hint.is-out { animation: none; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

@keyframes chomp-hint-in {
	0%   { opacity: 0; transform: translateY(7px) scale(.96); }
	60%  { opacity: 1; transform: translateY(0) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.chomp-callout,
	.chomp-callout__cta .icon,
	.chomp-hint.is-out { transition: none; }
	.chomp-callout:hover { transform: none; }
	.chomp-callout:hover .chomp-callout__icon,
	.chomp-callout:hover .chomp-callout__cta .icon { animation: none; transform: none; }
	.chomp-hint.is-in { animation: none; }
}

/* 8. BADGES ------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .35em; font-size: var(--fs-xs); font-weight: 600; line-height: 1; padding: .42em .75em; border-radius: var(--radius-pill); background: var(--chomp-primary-soft); color: var(--chomp-teal-deep); letter-spacing: .02em; white-space: nowrap; }
.badge--vegan       { background: #E4F4EC; color: #17603C; }
.badge--gf          { background: #FBF0DC; color: #8A5307; }
.badge--nut-free    { background: #E5F1FA; color: #17557F; }
.badge--dairy-free  { background: #F3ECFB; color: #5B2C86; }
.badge--new         { background: var(--chomp-berry-soft); color: var(--chomp-berry-ink); }
.badge--bestseller  { background: var(--chomp-caramel-soft); color: var(--chomp-on-warm); }
.badge--sale        { background: var(--chomp-error); color: #fff; }
.badge--soldout     { background: #EDE7E0; color: #6B645C; }
.badge--cotm        { background: var(--chomp-primary); color: var(--chomp-ink); box-shadow: var(--shadow-xs), var(--pillow-top); }
.badge-row { display: flex; flex-wrap: wrap; gap: .35rem; }

/* 9. NOTICES ------------------------------------------------------------ */
.notice { display: flex; gap: .75rem; align-items: flex-start; padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--chomp-border); background: var(--chomp-surface); font-size: var(--fs-sm); }
.notice .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.notice--success { background: var(--chomp-success-soft); border-color: #BFE4CF; color: #14532D; }
.notice--warning { background: var(--chomp-warning-soft); border-color: #EFD9AE; color: #7A4B06; }
.notice--error   { background: var(--chomp-error-soft); border-color: #F1C4BB; color: #8F2314; }
.notice--info    { background: var(--chomp-info-soft); border-color: #C3E0F3; color: #16557F; }

/* 10. FOCUS, SKIP LINK, SR-ONLY ---------------------------------------- */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); border-radius: 4px; }
/* Keep radius sensible on pill/rounded controls */
.btn:focus-visible, .chomp-qty__btn:focus-visible, .badge:focus-visible { border-radius: var(--radius-pill); }
:focus:not(:focus-visible) { outline: 0; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 9999; background: var(--chomp-primary); color: var(--chomp-ink); padding: .75rem 1.25rem; border-radius: var(--radius-sm); font-weight: 700; box-shadow: var(--shadow-md); transition: top var(--dur) var(--ease); }
.skip-link:focus { top: 8px; text-decoration: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only-focusable:focus, .sr-only-focusable:focus-within { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* 11. MOTION ------------------------------------------------------------ */
/* Mint Rise: content lifts onto the cream as it enters.
   Gated behind .js so that WITHOUT JavaScript everything is fully visible
   (no invisible content) — progressive enhancement, not dependency. */
.js .reveal { opacity: 0; transform: translateY(20px) scale(.98); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal="scale"] { transform: scale(.94); }
.reveal[data-reveal="left"] { transform: translateX(-24px); }
.reveal[data-reveal="right"] { transform: translateX(24px); }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

@keyframes chomp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes chomp-pop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
.animate-float { animation: chomp-float 6s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1 !important; transform: none !important; }
	.card:hover, .card:hover .card__media img { transform: none; }
}

/* 12. UTILITIES --------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--chomp-muted); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); }
.hidden { display: none !important; }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.rounded { border-radius: var(--radius-lg); }
.shadow { box-shadow: var(--shadow-md); }
.aspect-square { aspect-ratio: 1/1; }
.visually-textured { background-image: radial-gradient(var(--chomp-primary-soft2) 1px, transparent 1px); background-size: 22px 22px; }

/* =========================================================================
   13. HEADER / ANNOUNCEMENT
   ========================================================================= */
.chomp-announce { background: var(--chomp-primary); color: var(--chomp-ink); font-size: var(--fs-sm); font-weight: 600; }
.chomp-announce__inner { padding-block: .5rem; text-align: center; }
.chomp-announce a { color: var(--chomp-ink); text-decoration: underline; }

/* Wholesale partner bar (shown at top of content for logged-in wholesale users) */
.chomp-partner-bar { background: var(--chomp-primary-soft); border-bottom: 1px solid var(--chomp-border); }
.chomp-partner-bar__inner { display: flex; align-items: center; justify-content: center; gap: .55rem; padding-block: .6rem; text-align: center; }
.chomp-partner-bar .icon { color: var(--chomp-primary-800); flex: none; }
.chomp-partner-bar__text { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--chomp-ink-2); }
.chomp-partner-bar__text strong { color: var(--chomp-ink); }

/* Promo "code applied" confirmation toast (self-dismissing, no JS) */
.chomp-promo-flash { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100% - 2rem); animation: chomp-promo-flash 6s var(--ease) forwards; }
.chomp-promo-flash__inner { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; background: var(--chomp-teal-deep); color: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-xl); font-size: var(--fs-sm); font-weight: 600; text-align: left; }
.chomp-promo-flash__inner .icon { color: #fff; flex: none; }
@keyframes chomp-promo-flash { 0% { opacity: 0; transform: translateX(-50%) translateY(-12px); } 8%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
	.chomp-promo-flash { animation: chomp-promo-flash-fade 6s linear forwards; }
	@keyframes chomp-promo-flash-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
}

/* Store holiday / vacation banner */
.chomp-holiday { color: #fff; }
.chomp-holiday__inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding-block: .7rem; text-align: center; }
.chomp-holiday__emoji { font-size: 1.35rem; flex: none; line-height: 1; }
.chomp-holiday__text { margin: 0; font-size: var(--fs-sm); line-height: 1.35; }
.chomp-holiday__text strong { font-weight: 800; }
.chomp-holiday--closed { background: var(--chomp-berry-ink); }
.chomp-holiday--closed .chomp-holiday__text strong { display: inline; }
.chomp-holiday--notice { background: var(--chomp-primary-800); }
@media (max-width: 560px) { .chomp-holiday__inner { flex-direction: column; gap: .25rem; } }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--chomp-surface); background: color-mix(in srgb, var(--chomp-surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.site-header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--chomp-border); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); min-height: var(--header-h); padding-block: .5rem; }
.site-header__brand { display: flex; align-items: center; gap: .5rem; justify-self: center; min-width: 0; }
/* Header brand at 2x (42->84 wordmark, 48->96 dino). Scoped to the header on
   purpose: .site-brand__* is shared with the footer, which stays as it was. */
.site-header__brand .site-brand__logo { max-height: 44px; }
.site-header__brand .site-brand__monster { max-height: 96px; }
.site-header__brand .site-brand__tm { font-size: 1rem; margin-top: .5em; }
.site-brand__link { display: inline-flex; align-items: center; flex: none; }
.site-brand__logo { max-height: 42px; width: auto; }
.site-brand__monster { max-height: 48px; width: auto; flex: none; }
/* ™ rides at the top-right of the wordmark. Sized in em off the link's own
   font-size, so bumping the header brand scales the mark with it. */
.site-brand__tm { align-self: flex-start; flex: none; margin-top: .25em; margin-left: .1em; font-size: .62em; font-weight: 800; line-height: 1; color: var(--chomp-ink); }
.site-brand__monster:hover { animation: chomp-wobble .5s var(--ease-spring); }
/* The monster is decorative. Only show it on wide desktop, where the nav has
   room — below that it overlapped the nav (iPad landscape) and crowded the
   compact mobile header. */
@media (max-width: 1279px) { .site-brand__monster { display: none; } }
@media (max-width: 400px) { .site-brand__logo { max-height: 36px; } }
.site-title { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--chomp-ink); }
.site-header__burger { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-sm); color: var(--chomp-ink); }
.site-header__burger:hover { background: var(--chomp-primary-soft); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-xs); }
.site-header__cart { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-sm); color: var(--chomp-ink); }
.site-header__cart:hover { background: var(--chomp-primary-soft); text-decoration: none; }
.site-header__cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; color: #fff; background: var(--chomp-berry-ink); border-radius: var(--radius-pill); }
.site-header__cart-count[data-cart-count="0"] { display: none; }
/* Hidden on mobile/tablet — the "Build a box" CTA lives in the burger menu.
   Scoped past a.btn (which sets display and would otherwise force it visible). */
.site-header__actions .site-header__cta { display: none; }
.site-nav { display: none; }

/* Header member area (desktop only; mobile lives inside the off-canvas menu) */
.site-header__account { display: none; position: relative; align-items: center; }
.site-header__account--login { gap: .4rem; height: 46px; padding: 0 .7rem; border-radius: var(--radius-sm); color: var(--chomp-ink); }
.site-header__account--login:hover { background: var(--chomp-primary-soft); text-decoration: none; }
.site-header__account-btn { display: inline-flex; align-items: center; gap: .4rem; height: 46px; padding: 0 .7rem; border-radius: var(--radius-sm); color: var(--chomp-ink); cursor: pointer; font: inherit; }
.site-header__account-btn:hover { background: var(--chomp-primary-soft); }
.site-header__account-label { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; max-width: 13ch; overflow: hidden; text-overflow: ellipsis; }
.site-header__account-chevron { color: var(--chomp-muted); transition: transform var(--dur-fast) var(--ease); }
.site-header__account.is-open .site-header__account-chevron { transform: rotate(180deg); }
.account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; margin: 0; padding: .4rem; list-style: none; background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); z-index: 60; }
.site-header__account.is-open .account-menu, .site-header__account:hover .account-menu, .site-header__account:focus-within .account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.account-menu li { margin: 0; }
.account-menu a { display: block; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--chomp-ink); font-weight: 600; font-size: var(--fs-sm); }
.account-menu a:hover { background: var(--chomp-primary-soft); text-decoration: none; }
.account-menu__sep { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--chomp-border); }
@media (max-width: 1099px) { .site-header__account-label { display: none; } }

/* Member block inside the off-canvas mobile menu. Each account link is a
   full-width row (>=50px, no side-by-side neighbours) so a thumb can't misclick
   between them — the old layout wrapped 5 small links inline at 23px tall. */
.chomp-mobile-menu__account { padding: var(--space-xs) var(--space-sm) var(--space-sm); margin-bottom: var(--space-sm); background: var(--chomp-primary-soft); border-radius: var(--radius-lg); }
/* Logged-out: a single clear "Log in / Register" row. */
a.chomp-mobile-menu__account { display: flex; flex-direction: row; align-items: center; gap: .6rem; min-height: 54px; padding: var(--space-sm) var(--space-md); font-weight: 700; font-size: 1.05rem; color: var(--chomp-ink); text-decoration: none; }
/* Logged-in greeting = a section header above the rows. */
.chomp-mobile-menu__hi { display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem .4rem; font-weight: 800; font-size: var(--fs-md); color: var(--chomp-ink); }
.chomp-mobile-menu__account-links { display: flex; flex-direction: column; }
.chomp-mobile-menu__account-links a { display: flex; align-items: center; min-height: 50px; padding: .55rem .6rem; font-size: 1.02rem; font-weight: 600; color: var(--chomp-teal-deep); border-top: 1px solid var(--chomp-border-mint); }
.chomp-mobile-menu__account-links a:hover,
.chomp-mobile-menu__account-links a:active,
.chomp-mobile-menu__account-links a:focus-visible { background: var(--chomp-primary-soft2); color: var(--chomp-primary-800); text-decoration: none; }
/* Chevron affordance on navigation rows (not the log-out action). */
.chomp-mobile-menu__account-links a:not(.chomp-mobile-menu__logout)::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .45; }
/* Destructive action — red, and a top border to set it apart from the nav rows.
   Scoped past .chomp-mobile-menu__account-links a (0,1,1) so the red wins. */
.chomp-mobile-menu__account-links a.chomp-mobile-menu__logout { margin-top: .1rem; color: var(--chomp-error); font-weight: 700; }
.chomp-mobile-menu__account-links a.chomp-mobile-menu__logout:hover,
.chomp-mobile-menu__account-links a.chomp-mobile-menu__logout:active { background: var(--chomp-error-soft); color: var(--chomp-error); }

/* Desktop navigation */
@media (min-width: 992px) {
	.site-header__burger { display: none; }
	.site-header__inner { grid-template-columns: auto 1fr auto; gap: var(--space-lg); }
	.site-header__brand { justify-self: start; }
	.site-header__brand .site-brand__logo { max-height: 84px; }
	.site-nav { display: block; justify-self: center; }
	.site-header__actions .site-header__cta { display: inline-flex; }
	.site-header__account { display: inline-flex; }
	.site-nav__list { display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
	.site-nav .menu-item__link { display: inline-flex; align-items: center; padding: .55rem .8rem; border-radius: var(--radius-pill); font-weight: 600; color: var(--chomp-ink); }
	.site-nav .menu-item__link:hover { background: var(--chomp-primary-soft); text-decoration: none; }
	.site-nav .menu-item.is-current > .menu-item__link,
	.site-nav .menu-item.is-current > .menu-item__parent .menu-item__link { color: var(--chomp-primary-800); }
	.site-nav .menu-item__parent { display: inline-flex; align-items: center; }
	.site-nav .menu-item__toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -.3rem; border-radius: var(--radius-pill); color: var(--chomp-muted); }
	.site-nav .menu-item__chevron { transition: transform var(--dur) var(--ease); }
	.site-nav .has-dropdown { position: relative; }
	.site-nav .cookies-submenu {
		position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
		width: min(560px, 80vw); margin: 0; padding: .5rem; list-style: none;
		background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		display: grid; grid-template-columns: 1fr 1fr; gap: .15rem;
		opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
		z-index: 40;
	}
	/* Invisible hover bridge across the gap between the trigger and the panel, so
	   moving the cursor down from "Order" into the submenu never drops the hover
	   (fixes the diagonal / dead-zone problem). Only catches when the panel is open. */
	.site-nav .cookies-submenu::before {
		content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px;
	}
	.site-nav .has-dropdown:hover .cookies-submenu,
	.site-nav .has-dropdown:focus-within .cookies-submenu,
	.site-nav .menu-item.is-open .cookies-submenu {
		opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
	}
	.site-nav .menu-item__toggle[aria-expanded="true"] .menu-item__chevron { transform: rotate(180deg); }
	.cookies-submenu__all { grid-column: 1 / -1; }

		/* Catering dropdown: a simple single-column text list */
		.site-nav .catering-submenu {
			position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
			min-width: 220px; width: max-content; max-width: 80vw; margin: 0; padding: .4rem; list-style: none;
			background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg);
			box-shadow: var(--shadow-lg);
			opacity: 0; visibility: hidden; pointer-events: none;
			transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
			z-index: 40;
		}
		.site-nav .catering-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }
		.site-nav .has-dropdown:hover .catering-submenu,
		.site-nav .has-dropdown:focus-within .catering-submenu,
		.site-nav .menu-item.is-open .catering-submenu {
			opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
		}
}

.cookies-submenu__link { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius-md); color: var(--chomp-ink); font-weight: 600; font-size: .95rem; }
.cookies-submenu__link:hover { background: var(--chomp-primary-soft); text-decoration: none; }
.cookies-submenu__img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--chomp-primary-soft); }
.cookies-submenu__name { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cookies-submenu__all .cookies-submenu__link { justify-content: center; color: var(--chomp-primary-800); }
.cookies-submenu__build { grid-column: 1 / -1; }
.cookies-submenu__build .cookies-submenu__link { background: var(--chomp-primary-soft); }
.cookies-submenu__build .cookies-submenu__link:hover { background: var(--chomp-primary); }
.cookies-submenu__buildicon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--chomp-primary); color: var(--chomp-ink); flex: none; }
.cookies-submenu__build .cookies-submenu__link:hover .cookies-submenu__buildicon { background: var(--chomp-surface); }
.cookies-submenu__name--stack { flex-direction: column; align-items: flex-start; gap: 0; }
.cookies-submenu__sub { font-size: .78rem; font-weight: 500; color: var(--chomp-muted); }
.catering-submenu__link { display: block; padding: .55rem .8rem; border-radius: var(--radius-md); color: var(--chomp-ink); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.catering-submenu__link:hover { background: var(--chomp-primary-soft); text-decoration: none; }
.catering-submenu__other { margin-top: .3rem; border-top: 1px solid var(--chomp-border); padding-top: .3rem; }
.catering-submenu__other .catering-submenu__link { color: var(--chomp-primary-800); font-weight: 700; }

/* =========================================================================
   14. MOBILE MENU (off-canvas)
   ========================================================================= */
.chomp-mobile-menu { position: fixed; inset: 0; z-index: 200; background: rgba(35,32,29,.5); opacity: 0; transition: opacity var(--dur) var(--ease); }
.chomp-mobile-menu.is-open { opacity: 1; }
.chomp-mobile-menu__panel { position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--chomp-cream); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--dur) var(--ease-out); overflow-y: auto; }
.chomp-mobile-menu.is-open .chomp-mobile-menu__panel { transform: none; }
.chomp-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--chomp-border); position: sticky; top: 0; background: var(--chomp-cream); }
.chomp-mobile-menu__title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.chomp-mobile-menu__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--chomp-ink); }
.chomp-mobile-menu__close:hover { background: var(--chomp-primary-soft); }
.chomp-mobile-menu__list { list-style: none; margin: 0; padding: var(--space-sm) var(--space-md); }
.chomp-mobile-menu__list .menu-item { border-bottom: 1px solid var(--chomp-border); }
.chomp-mobile-menu__list .menu-item__link { display: block; padding: .95rem .5rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 1.08rem; color: var(--chomp-ink); }
/* Tap feedback across the whole row so it's clearly all clickable. */
.chomp-mobile-menu__list .menu-item__link:hover,
.chomp-mobile-menu__list .menu-item__link:active,
.chomp-mobile-menu__list .menu-item__link:focus-visible { background: var(--chomp-primary-soft); text-decoration: none; }
.chomp-mobile-menu__list .menu-item__parent { display: flex; align-items: center; justify-content: space-between; }
/* The label link fills the whole bar (up to the arrow) so there's no dead space
   to misclick — tap anywhere on the row to go to the page, tap the arrow to open
   the submenu. */
.chomp-mobile-menu__list .menu-item__parent .menu-item__link { flex: 1 1 auto; }
.chomp-mobile-menu__list .menu-item__toggle { width: 48px; height: 48px; display: grid; place-items: center; color: var(--chomp-muted); }
.chomp-mobile-menu__list .cookies-submenu { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.chomp-mobile-menu__list .menu-item.is-open .cookies-submenu { max-height: 60vh; overflow-y: auto; }
.chomp-mobile-menu__list .menu-item__toggle[aria-expanded="true"] .menu-item__chevron { transform: rotate(180deg); }
.chomp-mobile-menu__list .cookies-submenu__link { padding-left: 1rem; font-size: 1rem; font-weight: 600; }
.chomp-mobile-menu__list .catering-submenu { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.chomp-mobile-menu__list .menu-item.is-open .catering-submenu { max-height: 60vh; overflow-y: auto; }
.chomp-mobile-menu__list .catering-submenu__link { padding-left: 1rem; font-size: 1rem; font-weight: 600; white-space: normal; }
.chomp-mobile-menu__foot { margin-top: auto; padding: var(--space-lg); display: grid; gap: .6rem; border-top: 1px solid var(--chomp-border); }

@media (min-width: 992px) { .chomp-mobile-menu { display: none; } }

/* Mini-cart flyout drawer (slides from the right) */
.chomp-drawer { position: fixed; inset: 0; z-index: 210; }
.chomp-drawer[hidden] { display: none; }
.chomp-drawer__backdrop { position: absolute; inset: 0; background: rgba(35,32,29,.5); opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); }
.chomp-drawer.is-open .chomp-drawer__backdrop { opacity: 1; }
.chomp-drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(92vw, 420px); background: var(--chomp-cream); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-mid) var(--ease-out); }
.chomp-drawer.is-open .chomp-drawer__panel { transform: none; }
.chomp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--chomp-border); }
.chomp-drawer__title { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.chomp-drawer__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--chomp-ink); }
.chomp-drawer__close:hover { background: var(--chomp-primary-soft); }
.chomp-drawer__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.chomp-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: var(--space-sm) var(--space-lg); flex: 1 1 auto; }
.chomp-drawer .woocommerce-mini-cart-item { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--chomp-border); }
.chomp-drawer .mini_cart_item__media { width: 52px; flex: none; }
.chomp-drawer .mini_cart_item__media a { display: block; }
.chomp-drawer .mini_cart_item__media img { width: 52px !important; height: 52px !important; max-width: 52px; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--chomp-primary-soft); }
.chomp-drawer .mini_cart_item__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.chomp-drawer .mini_cart_item__name { font-weight: 700; font-size: var(--fs-sm); color: var(--chomp-ink); text-decoration: none; }
.chomp-drawer .mini_cart_item__name:hover { color: var(--chomp-primary-800); }
.chomp-drawer .woocommerce-mini-cart-item .quantity { font-size: var(--fs-xs); color: var(--chomp-muted); }
.chomp-drawer .woocommerce-mini-cart-item .remove { grid-column: 3; justify-self: end; width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--chomp-muted); font-size: 1.2rem; line-height: 1; text-decoration: none; }
.chomp-drawer .woocommerce-mini-cart-item .remove:hover { background: var(--chomp-berry-soft); color: var(--chomp-berry-ink); }
.chomp-drawer__foot { padding: var(--space-lg); border-top: 1px solid var(--chomp-border); background: var(--chomp-surface); display: grid; gap: .6rem; }
.chomp-drawer__foot .total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-weight: 700; }
.chomp-drawer__subtotal { font-family: var(--font-display); font-size: 1.25rem; color: var(--chomp-primary-800); }
.chomp-drawer__note { font-size: var(--fs-xs); margin: 0; }

/* Box nudge — sits above the drawer subtotal, inside WooCommerce's cart
   fragment, so it re-renders itself whenever the cart changes. */
.chomp-box-nudge { display: grid; gap: .3rem; padding: var(--space-md); border-radius: var(--radius-lg); border: 1.5px dashed var(--chomp-mint-border, var(--chomp-border-2)); background: var(--chomp-surface-alt); }
.chomp-box-nudge--convert { border-style: solid; background: linear-gradient(180deg, var(--chomp-primary-soft2, var(--chomp-surface-alt)), var(--chomp-surface)); }
.chomp-box-nudge__line { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 800; font-size: var(--fs-sm); color: var(--chomp-ink); }
.chomp-box-nudge__emoji { font-size: 1.05rem; line-height: 1; }
/* The branded box shot (assets/images/chomp-box.png — white background flood-
   filled out, so it sits on the nudge's mint rather than in a white rectangle).
   It's a white box, so it only reads against the gradient's mint end: keep it in
   __line, which is the top row. */
.chomp-box-nudge__ico { flex: none; width: 42px; }
.chomp-box-nudge__ico img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(20, 86, 76, .18)); }
.chomp-box-nudge__sub { margin: 0; font-size: var(--fs-xs); color: var(--chomp-ink-2); line-height: 1.5; }
.chomp-box-nudge__form { margin: 0; }
.chomp-box-nudge__cta { justify-self: start; margin-top: .35rem; padding: .4rem .85rem; border: 0; border-radius: var(--radius-pill); background: var(--chomp-primary); color: var(--chomp-primary-ink); font: inherit; font-size: var(--fs-xs); font-weight: 800; text-decoration: none; cursor: pointer; transition: background-color .18s var(--ease-out), transform .12s var(--ease-out); }
.chomp-box-nudge__cta:hover { background: var(--chomp-primary-600); color: var(--chomp-primary-ink); transform: translateY(-1px); }
.chomp-box-nudge__cta:focus-visible { outline: 3px solid var(--chomp-focus); outline-offset: 2px; }
.chomp-box-nudge__form.is-busy .chomp-box-nudge__cta { opacity: .6; pointer-events: none; }
.chomp-drawer__keep { background: none; border: none; color: var(--chomp-muted); font-weight: 600; padding: .3rem; cursor: pointer; text-decoration: underline; }
.chomp-drawer__keep:hover { color: var(--chomp-ink); }
.chomp-drawer__empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; padding: var(--space-2xl) var(--space-lg); }
.chomp-drawer__empty-emoji { font-size: 3rem; }
@media (prefers-reduced-motion: reduce) { .chomp-drawer__panel, .chomp-drawer__backdrop { transition: none; } }

/* =========================================================================
   15. FOOTER
   ========================================================================= */
/* Light footer, Levain-style layout, topped with a branded scalloped awning. */
.site-footer { position: relative; background: var(--chomp-surface-alt); color: var(--chomp-muted); margin-top: 0; padding-top: 64px; }
/* Branded 3-tone scalloped bakery awning hanging from the top edge. */
.site-footer__awning { position: absolute; top: 0; left: 0; right: 0; height: 34px; background-repeat: repeat-x; background-position: center top; background-size: 120px 34px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='34'%20viewBox='0%200%20120%2034'%3E%3Cpath%20d='M0,0%20h40%20v17%20a20,17%200%200%201%20-40,0%20z'%20fill='%237DCABD'/%3E%3Cpath%20d='M40,0%20h40%20v17%20a20,17%200%200%201%20-40,0%20z'%20fill='%235FA091'/%3E%3Cpath%20d='M80,0%20h40%20v17%20a20,17%200%200%201%20-40,0%20z'%20fill='%233C6E62'/%3E%3C/svg%3E"); }
.site-footer a { color: var(--chomp-teal-deep); }
.site-footer a:hover { color: var(--chomp-teal-deep); text-decoration: underline; }

.site-footer__cols { display: grid; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-xl); text-align: center; justify-items: center; }
.site-footer__heading { color: var(--chomp-teal-deep); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-md); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-weight: 600; }
.site-footer__list a { color: var(--chomp-ink); }
.site-footer__contact { margin-top: var(--space-lg); }
.site-footer__addr { display: flex; align-items: center; gap: .5rem; color: var(--chomp-muted); font-size: var(--fs-sm); margin-bottom: .4rem; }
.site-footer__addr .icon { color: var(--chomp-primary-700); flex: none; }

/* Centre: signup + socials */
.site-footer__col--center { display: flex; flex-direction: column; align-items: center; max-width: 30rem; }
.site-footer__col--center img, .site-footer__col--center .custom-logo { max-height: clamp(64px, 6vw, 84px); width: auto; margin-bottom: .5rem; }
/* Rock Salt signature under the footer logo (the one sparing hand-script use). */
.site-footer__signature { font-size: clamp(1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--chomp-teal-deep); margin: 0 0 var(--space-md); }
.site-footer__mark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--chomp-ink); }
.site-footer__signup-title { font-family: var(--font-display); font-size: var(--fs-xl); margin: .2rem 0 .4rem; color: var(--chomp-ink); }
.site-footer__signup-text { color: var(--chomp-muted); font-size: var(--fs-sm); margin-bottom: var(--space-md); }
.site-footer__form { display: flex; width: 100%; max-width: 24rem; background: var(--chomp-surface); border: 1.5px solid var(--chomp-ui-border); border-radius: var(--radius-pill); overflow: hidden; }
.site-footer__form input { flex: 1; border: 0; background: transparent; min-height: 48px; padding: 0 1.1rem; }
.site-footer__form input:focus { outline: 0; box-shadow: none; }
.site-footer__form:focus-within { border-color: var(--chomp-focus); box-shadow: 0 0 0 3px var(--chomp-primary-soft2); }
.site-footer__form button { flex: none; width: 52px; display: grid; place-items: center; background: var(--chomp-primary); color: var(--chomp-ink); }
.site-footer__form button:hover { background: var(--chomp-primary-600); }
.site-footer__social { display: flex; gap: .55rem; margin-top: var(--space-lg); justify-content: center; }
.site-footer__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--chomp-surface); color: var(--chomp-teal-deep); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease); }
.site-footer__social a:hover { background: var(--chomp-primary); color: var(--chomp-ink); transform: translateY(-3px); }

.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center; justify-content: space-between; padding-block: var(--space-lg); border-top: 1px solid var(--chomp-mint-border); font-size: var(--fs-sm); color: var(--chomp-muted); }
.site-footer__policies { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; }

/* Levain 3-column: menus flank the centred signup, pulled toward the middle. */
@media (min-width: 900px) {
	.site-footer__cols { grid-template-columns: 1fr 1.5fr 1fr; align-items: start; justify-items: stretch; text-align: left; gap: var(--space-3xl); }
	.site-footer__col--left { text-align: right; }
	.site-footer__col--left .site-footer__addr { justify-content: flex-end; }
	.site-footer__col--center { text-align: center; margin-inline: auto; }
	.site-footer__col--right { text-align: left; }
}

/* =========================================================================
   16. PAGE HERO / BREADCRUMBS / PAGINATION / SEARCH / EMPTY STATE
   ========================================================================= */
.page-hero { padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--chomp-primary-soft); }
.page-hero__title { margin: 0; }
.page-hero__desc { margin-top: var(--space-sm); }
.chomp-breadcrumbs { font-size: var(--fs-sm); margin-bottom: var(--space-sm); color: var(--chomp-muted); }
.chomp-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.chomp-breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--chomp-border-2); }
.chomp-breadcrumbs a { color: var(--chomp-primary-800); }
.chomp-breadcrumbs [aria-current="page"] { color: var(--chomp-muted); }

.entry-content > * + * { margin-top: var(--space-md); }
.entry-content h2 { margin-top: var(--space-xl); }
.entry-content h3 { margin-top: var(--space-lg); }
.entry-content img { border-radius: var(--radius-lg); }
.entry-content a { text-decoration: underline; }

.chomp-pagination { margin-top: var(--space-2xl); }
.chomp-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.chomp-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6rem; border-radius: var(--radius-sm); border: 1px solid var(--chomp-border); font-weight: 700; color: var(--chomp-ink); }
.chomp-pagination .page-numbers.current { background: var(--chomp-primary); color: var(--chomp-ink); border-color: transparent; }
.chomp-pagination a.page-numbers:hover { background: var(--chomp-primary-soft); text-decoration: none; }

.chomp-search__row { display: flex; gap: .5rem; }
.chomp-search__input { flex: 1; }
.chomp-search__btn { flex: none; }

.empty-state { text-align: center; padding-block: var(--space-2xl); max-width: 34rem; margin-inline: auto; }
.empty-state__emoji { font-size: 3.5rem; margin-bottom: var(--space-sm); }
.card__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--chomp-primary-800); font-size: var(--fs-sm); margin-top: auto; }

/* =========================================================================
   17. HOMEPAGE COOKIE MENU (shared component)
   ========================================================================= */
.cookie-menu__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
.cookie-menu__item { position: relative; }
.cookie-menu__flag { position: absolute; top: .6rem; left: .6rem; z-index: 2; }
@media (min-width: 640px) { .cookie-menu__grid { grid-template-columns: repeat(var(--cookie-cols, 3), 1fr); } }

/* =========================================================================
   18. PRODUCT CARD + GRID (shared: homepage + shop)
   ========================================================================= */
.chomp-product-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .chomp-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .chomp-product-grid { grid-template-columns: repeat(4, 1fr); } }

.chomp-product-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.chomp-product-card__media { display: block; position: relative; aspect-ratio: 1/1; background: var(--chomp-primary-soft); }
.chomp-product-card__img { width: 100%; height: 100%; object-fit: cover; }
.chomp-product-card__badges { position: absolute; top: .6rem; left: .6rem; right: .6rem; z-index: 2; }
.chomp-product-card__body { display: flex; flex-direction: column; gap: .4rem; padding: var(--space-md); flex: 1; }
.chomp-product-card__title { font-size: var(--fs-md); margin: 0; }
.chomp-product-card__desc { color: var(--chomp-muted); font-size: var(--fs-sm); }
.chomp-product-card__foot { margin-top: auto; padding-top: var(--space-xs); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.chomp-product-card__price { font-weight: 800; color: var(--chomp-ink); font-size: 1.05rem; }
.chomp-product-card__price del { color: var(--chomp-muted); font-weight: 500; font-size: .9em; margin-right: .3em; }
.chomp-product-card__price ins { text-decoration: none; }
.chomp-product-card__add { display: flex; align-items: center; gap: .4rem; width: 100%; }
.chomp-product-card__add .chomp-qty { flex: none; padding: .2rem; }
.chomp-product-card__add .chomp-qty__btn { width: 32px; height: 32px; font-size: 1.15rem; }
.chomp-product-card__add .chomp-qty__input { width: 2.25rem; min-height: 32px; font-size: 1rem; }
.chomp-product-card__add .chomp-add-to-cart { flex: 1; min-height: 40px; padding-inline: .6rem; }
.chomp-product-card__add .chomp-add-to-cart.loading { opacity: .7; pointer-events: none; }
.chomp-product-card__add .chomp-add-to-cart.added::after { content: ""; }
.chomp-product-card__oos { font-weight: 700; color: var(--chomp-muted); font-size: var(--fs-sm); }
.chomp-closed-chip { display: inline-block; padding: .3rem .7rem; border-radius: var(--radius-pill); background: var(--chomp-primary-soft); color: var(--chomp-primary-800); font-weight: 800; font-size: var(--fs-xs); }

/* Section head row (heading + "shop all") */
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); flex-wrap: wrap; }
.section-head-row .eyebrow { margin-bottom: .3rem; }
.section-head-row h2 { margin: 0; }

/* =========================================================================
   19. SIGNATURE MOVES — "Big Mint, Soft Serve"
   ========================================================================= */

/* Bite-notch: a die-cut cookie 'bite' masked from a corner. Zero JS/perf cost. */
.chomp-notch {
	--notch: 52px;
	-webkit-mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 1px), #000 var(--notch));
	        mask: radial-gradient(circle var(--notch) at 100% 0, transparent calc(var(--notch) - 1px), #000 var(--notch));
}
.chomp-notch--bl {
	--notch: 44px;
	-webkit-mask: radial-gradient(circle var(--notch) at 0 100%, transparent calc(var(--notch) - 1px), #000 var(--notch));
	        mask: radial-gradient(circle var(--notch) at 0 100%, transparent calc(var(--notch) - 1px), #000 var(--notch));
}

/* Signature hand-script (Rock Salt). Sparing accents only — it's charming but
   hard to read at length. */
.chomp-hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0; }

/* Highlight-swipe: a hand-drawn mint (or sunny) block behind a headline word. */
.chomp-swipe { position: relative; z-index: 0; padding: 0 .1em; }
.chomp-swipe::before { content: ""; position: absolute; left: -.06em; right: -.06em; top: .16em; bottom: .12em; z-index: -1; background: var(--chomp-primary); border-radius: 9px 11px 8px 12px; transform: rotate(-1.5deg); }
.chomp-swipe--sunny::before { background: var(--chomp-sunny); }
@media (prefers-reduced-motion: no-preference) {
	.js .chomp-swipe::before { transform: rotate(-1.5deg) scaleX(0); transform-origin: left center; animation: chomp-swipe-in .6s var(--ease-out) .4s forwards; }
	.js .is-visible .chomp-swipe::before { animation-play-state: running; }
}
@keyframes chomp-swipe-in { to { transform: rotate(-1.5deg) scaleX(1); } }

/* Sticker badge: die-cut, tilted, soft shadow, white keyline, peel-wobble. */
.badge--sticker, .chomp-sticker { transform: rotate(-3deg); box-shadow: var(--shadow-sticker); border: 2px solid #fff; }
@media (prefers-reduced-motion: no-preference) {
	.badge--sticker:hover, .chomp-sticker:hover { animation: chomp-wobble .5s var(--ease-spring); }
}
@keyframes chomp-wobble { 0%, 100% { transform: rotate(-3deg); } 30% { transform: rotate(2deg); } 60% { transform: rotate(-2deg); } }

/* Crumb confetti (Build-A-Box completion + add-to-cart). JS spawns the spans. */
.chomp-crumb { position: fixed; width: 10px; height: 10px; border-radius: 3px; pointer-events: none; z-index: 300; will-change: transform, opacity; }

/* Pillow-press helper for any interactive tile */
@media (prefers-reduced-motion: no-preference) {
	.pillow { transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out); }
	.pillow:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
	.pillow:active { transform: scale(.97); }
	/* Cart squash-bounce on add */
	.site-header__cart.is-bounce { animation: chomp-cart-bounce .55s var(--ease-spring); }
	@keyframes chomp-cart-bounce { 0% { transform: scale(1); } 30% { transform: scale(.82) rotate(-6deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1); } }
}

/* =========================================================================
   20. REVIEWS (Google-style cards — shared: homepage + About)
   ========================================================================= */
.reviews__agg { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; color: var(--chomp-muted); font-weight: 600; margin-top: var(--space-sm); }
.reviews__agg-stars { display: inline-flex; color: var(--chomp-caramel); }
.reviews__grid { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 720px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); text-align: left; }
.review-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.review-card__head { display: flex; align-items: center; gap: .6rem; }
.review-card__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; object-fit: cover; flex: none; box-shadow: var(--shadow-xs), var(--pillow-top); }
.review-card__meta { display: flex; flex-direction: column; min-width: 0; }
.review-card__author { font-weight: 700; color: var(--chomp-ink); }
.review-card__source { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); color: var(--chomp-muted); }
.review-card__stars { display: flex; gap: .1rem; color: var(--chomp-caramel); }
.review-card__stars .is-empty { color: var(--chomp-border-2); }
.review-card__text { font-size: var(--fs-md); line-height: 1.55; color: var(--chomp-ink-2); font-style: normal; margin: 0; }
.review-card__photos { display: grid; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.review-card__photos[data-count="2"] { grid-template-columns: 1fr 1fr; }
.review-card__photos[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.review-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); display: block; background: var(--chomp-primary-soft); }
.review-card__photos[data-count="1"] .review-card__photo { aspect-ratio: 4 / 3; }

/* =========================================================================
   21. MAP MODULE (embedded Google map + Google/Apple/Waze directions CTAs)
   ========================================================================= */
.chomp-map { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; }
.chomp-map__frame { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--chomp-border); box-shadow: var(--shadow-md); background: var(--chomp-primary-soft); line-height: 0; }
.chomp-map__embed { display: block; width: 100%; min-height: 260px; border: 0; }
.chomp-map__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chomp-map__ctas-label { font-size: var(--fs-sm); font-weight: 700; color: var(--chomp-ink); margin-right: .1rem; }
.chomp-map__cta { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: var(--radius-pill); border: 1.5px solid var(--chomp-border-2); background: var(--chomp-surface); color: var(--chomp-ink); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; transition: border-color .18s var(--ease-out), transform .12s var(--ease-out), box-shadow .18s var(--ease-out); }
.chomp-map__cta:hover { border-color: var(--chomp-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--chomp-ink); }
.chomp-map__cta:focus-visible { outline: 3px solid var(--chomp-focus); outline-offset: 2px; }
.chomp-map__cta-icon { display: inline-flex; }
.chomp-map__cta-icon svg { display: block; }
.chomp-map__cta--apple .chomp-map__cta-icon { color: var(--chomp-ink); }
.chomp-map__cta--waze .chomp-map__cta-icon { color: #33ccff; }
@media (max-width: 400px) { .chomp-map__cta { flex: 1; justify-content: center; } .chomp-map__ctas-label { flex-basis: 100%; } }