/* ==========================================================================
   SweetBerries theme — main stylesheet ("Custard Stand" direction, Sky blue scheme)
   Layers: fonts → tokens → reset → base → components → header → sections → footer → responsive
   All text/background pairs meet WCAG AA (4.5:1 text, 3:1 UI).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Self-hosted fonts (SIL OFL; licenses in assets/fonts/)
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/alfa-slab-one-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand colors from the logo files */
	--sb-berry:        #b30838;   /* 6.7:1 on cream */
	--sb-berry-dark:   #8a0a2c;   /* 9.3:1 */
	--sb-berry-light:  #fbe4ea;
	--sb-leaf:         #4b721d;   /* 5.4:1 on cream */
	--sb-leaf-dark:    #3d5d17;
	--sb-leaf-light:   #eef1e2;
	--sb-olive:        #687f38;   /* wordmark green — large text only */
	--sb-cream:        #f6fbfe;   /* page background (a cool near-white) */
	--sb-sky:          #d9ecf7;   /* hero band, panels — backgrounds only */
	--sb-sky-deep:     #b9d6e8;   /* borders, rules */
	--sb-cocoa:        #2b1a17;   /* body text — 16:1 on cream, 13.7:1 on the band */
	--sb-cocoa-soft:   #5b4740;   /* secondary text — 8.3:1 on cream, 7.1:1 on the band */
	--sb-white:        #ffffff;
	--sb-line:         #dbe8f0;

	/* Surface roles. Components reference these, never --sb-sky directly, so
	   the canvas can be swapped in one place. The "Sky blue" scheme was chosen
	   by the family in Oct 2026 over the original custard-yellow band. */
	--sb-band:         var(--sb-sky);          /* home hero, lineup page header, visit panel */
	--sb-band-title:   var(--sb-berry-dark);   /* headings + kicker on the band — 8:1 */
	--sb-band-text:    var(--sb-cocoa);        /* body text on the band */
	--sb-band-muted:   var(--sb-cocoa-soft);   /* dates, breadcrumb separators on the band */
	--sb-band-link:    var(--sb-berry);        /* links on the band — 5.7:1 */
	--sb-tint:         var(--sb-sky);          /* soft badge / phone-button background */
	--sb-tint-hover:   #c6e0f0;
	--sb-on-tint:      var(--sb-cocoa);
	--sb-rule:         var(--sb-sky-deep);     /* card borders, dashed rules, inputs */
	--sb-dark-accent:  var(--sb-sky);          /* kicker + breadcrumbs over the store hero photo */
	--sb-hover:        var(--sb-tint-hover);   /* menu / outline-button hover tint */

	--sb-font-body:    'Nunito', 'Trebuchet MS', 'Segoe UI', sans-serif;
	--sb-font-display: 'Alfa Slab One', 'Rockwell', 'Georgia', serif;

	--sb-radius-lg:    32px;
	--sb-radius:       20px;
	--sb-radius-sm:    12px;
	--sb-shadow:       0 16px 40px rgba(43, 26, 23, .12);
	--sb-shadow-lg:    0 24px 60px rgba(43, 26, 23, .20);
	--sb-container:    1200px;
	--sb-gutter:       clamp(1rem, 4vw, 4rem);
	--sb-section:      clamp(2rem, 4vw, 3.25rem);

	--sb-step--1: clamp(.875rem, .85rem + .15vw, .95rem);
	--sb-step-0:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	--sb-step-1:  clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
	--sb-step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
	--sb-step-3:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
	--sb-step-4:  clamp(2.5rem, 1.6rem + 4.5vw, 5.25rem);
	--sb-step-5:  clamp(2.75rem, 1.5rem + 5vw, 5.25rem);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.75rem; } /* keep anchor targets clear of the sticky header */
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 800; overflow-wrap: anywhere; text-wrap: balance; }
.display, h1.display, h2.display, h3.display { font-family: var(--sb-font-display); font-weight: 400; letter-spacing: .005em; }
p, ul, ol, table { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
a { color: var(--sb-berry); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--sb-berry-dark); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
	font-family: var(--sb-font-body);
	font-size: var(--sb-step-0);
	line-height: 1.6;
	color: var(--sb-cocoa);
	background: var(--sb-cream);
	display: flex; flex-direction: column; min-height: 100vh;
}
.site-main { flex: 1; }
.site-main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--sb-berry); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 1rem; left: 1rem; width: auto; height: auto; margin: 0; padding: .75rem 1.25rem;
	clip: auto; clip-path: none; white-space: normal; z-index: 1000;
	background: var(--sb-cocoa); color: var(--sb-white); border-radius: var(--sb-radius-sm); font-weight: 700;
}

.container { width: min(100% - 2 * var(--sb-gutter), var(--sb-container)); margin-inline: auto; }

.kicker { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: var(--sb-step--1); color: var(--sb-berry-dark); margin: 0 0 .75em; }
.kicker a { text-decoration: none; }
.kicker--light { color: var(--sb-dark-accent); }

.section-title, .page-title { font-family: var(--sb-font-display); font-weight: 400; letter-spacing: .005em; }
.section-title { font-size: var(--sb-step-2); color: var(--sb-berry-dark); margin-bottom: .75em; }
.section-title--center { text-align: center; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.section-head .section-title { margin: 0; }
.section-head__link { font-weight: 800; }
.section-head__note { margin: 0; color: var(--sb-cocoa-soft); }

.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--sb-step-2); margin-top: 1.5em; font-family: var(--sb-font-display); font-weight: 400; color: var(--sb-berry-dark); }
.prose h3 { font-size: var(--sb-step-1); margin-top: 1.25em; }
.prose img { border-radius: var(--sb-radius-sm); }

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */
.button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .8em 1.6em; border-radius: 999px; font-weight: 800; font-size: var(--sb-step-0);
	text-decoration: none; border: 3px solid transparent; cursor: pointer; line-height: 1.2;
	min-height: 48px; transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.button--primary { background: var(--sb-berry); color: var(--sb-white); box-shadow: 0 5px 0 var(--sb-berry-dark); }
.button--primary:hover { background: var(--sb-berry-dark); color: var(--sb-white); transform: translateY(-2px); box-shadow: 0 7px 0 #5e061e; }
.button--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sb-berry-dark); }
.button--outline { background: var(--sb-cream); color: var(--sb-berry-dark); border-color: var(--sb-berry-dark); }
.button--outline:hover { background: var(--sb-hover); color: var(--sb-berry-dark); }
.button--custard { background: var(--sb-tint); color: var(--sb-on-tint); }
.button--custard:hover { background: var(--sb-tint-hover); color: var(--sb-on-tint); }
.button:not([class*="--"]) { background: var(--sb-cocoa); color: var(--sb-white); }

.open-badge {
	display: inline-flex; align-items: center; gap: .45em; font-size: var(--sb-step--1); font-weight: 800;
	padding: .35em .9em; border-radius: 999px; letter-spacing: .01em; white-space: nowrap;
}
.open-badge::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.open-badge--open   { color: var(--sb-leaf-dark); background: var(--sb-leaf-light); }
.open-badge--closed { color: var(--sb-cocoa-soft); background: #efe4d6; }

.notice { padding: 1rem 1.25rem; border-radius: var(--sb-radius-sm); border: 3px solid; margin-bottom: 1.5rem; background: var(--sb-white); }
.notice--success { border-color: var(--sb-leaf); }
.notice--error   { border-color: var(--sb-berry); }
.notice ul { margin-bottom: 0; }

.hours { border-collapse: collapse; width: auto; }
.hours th, .hours td { text-align: left; padding: .3em 1.25em .3em 0; vertical-align: top; }
.hours th { font-weight: 800; white-space: nowrap; }
.hours--compact { font-size: var(--sb-step--1); }

.sticker {
	position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	width: 9.5rem; height: 9.5rem; border-radius: 50%; padding: 1rem; margin: 0;
	background: var(--sb-berry); color: var(--sb-white); box-shadow: 0 10px 30px rgba(43,26,23,.25);
	transform: rotate(8deg);
}
.sticker__name { display: block; font-family: var(--sb-font-display); font-size: 1.15rem; line-height: 1.05; margin-top: .25em; text-wrap: balance; }
.sticker--a { right: -.5rem; bottom: 1rem; }
.sticker--b { left: 55%; top: -1rem; transform: rotate(-6deg); background: var(--sb-leaf); width: 8rem; height: 8rem; }

.menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.menu-list__link {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	background: var(--sb-white); border: 3px solid var(--sb-rule); border-radius: var(--sb-radius);
	padding: 1.1rem 1.4rem; font-weight: 800; font-size: var(--sb-step-1); color: var(--sb-cocoa); text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.menu-list__link:hover { border-color: var(--sb-berry); color: var(--sb-berry-dark); transform: translateX(4px); }
.menu-list__type { font-size: var(--sb-step--1); color: var(--sb-cocoa-soft); font-weight: 700; }
.order-links { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.order-links__primary { align-self: flex-start; }
.order-links__subtitle { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-berry); margin: .75rem 0 0; }
/* The standalone "Menus" subtitle on store pages sits outside the .order-links flex gap, so give it the same .75rem breathing room below. */
.menus > .order-links__subtitle { margin-bottom: .75rem; }
.order-links__note { margin: 0; padding: 1rem 1.25rem; background: var(--sb-white); border: 3px dashed var(--sb-rule); border-radius: var(--sb-radius); font-weight: 700; }

/* Scroll reveal (class added by main.js; without JS everything is simply visible) */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * .12s); }
.js-reveal .reveal--down { transform: translateY(-28px); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 248, 239, .94); background: color-mix(in srgb, var(--sb-cream) 94%, transparent); backdrop-filter: blur(10px);
	border-bottom: 3px dashed var(--sb-rule);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; transition: padding .25s ease; }
.site-header.is-scrolled .site-header__inner { padding-block: .4rem; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(43,26,23,.08); }
.site-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo__img { height: 96px; width: auto; transition: height .25s ease; }
.site-header.is-scrolled .site-logo__img { height: 56px; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; align-items: center; }
.menu a {
	display: block; padding: .65em 1.1em; border-radius: 999px; text-decoration: none; font-weight: 800; color: var(--sb-cocoa);
	transition: background .15s, color .15s;
}
.menu a:hover, .menu a:focus-visible { background: var(--sb-hover); color: var(--sb-berry-dark); }
.menu a[aria-current="page"], .menu .current-menu-item > a, .menu .current-menu-ancestor > a { background: var(--sb-berry); color: var(--sb-white); }
.menu .sub-menu { display: none; list-style: none; margin: 0; padding: 0; }
.menu .menu-item-has-children { position: relative; display: flex; align-items: center; }
.menu .menu-item-has-children > a { flex: 1; }
.menu .menu-item-has-children.is-open > .sub-menu {
	display: block; position: absolute; top: 100%; left: 0; min-width: 13rem; padding: .5rem;
	background: var(--sb-white); border-radius: var(--sb-radius-sm); box-shadow: var(--sb-shadow); border: 2px solid var(--sb-rule);
}
.menu .sub-menu a { border-radius: var(--sb-radius-sm); }
.submenu-toggle { background: none; border: 0; padding: .5em; min-width: 44px; min-height: 44px; cursor: pointer; border-radius: 999px; color: var(--sb-cocoa); }
.submenu-toggle:hover { background: var(--sb-hover); }

.nav-toggle {
	display: none; align-items: center; gap: .6rem; background: var(--sb-white); border: 3px solid var(--sb-cocoa);
	border-radius: 999px; padding: .5rem 1.1rem; font-weight: 800; min-height: 48px; cursor: pointer;
}
.nav-toggle__bars { width: 20px; height: 3px; border-radius: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 7px; }

/* --------------------------------------------------------------------------
   6. Hero (home)
   -------------------------------------------------------------------------- */
.hero--home { background: var(--sb-band); color: var(--sb-band-text); padding-block: clamp(1.75rem, 4vw, 3rem); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__copy { display: flex; flex-direction: column; }
.hero--home .kicker { color: var(--sb-band-title); }
.hero--home .hero__title { font-size: var(--sb-step-5); line-height: .98; color: var(--sb-band-title); margin-bottom: .35em; }
/* Fly-in headline: each line slides in from the left, staggered by --i */
.hero__line { display: block; opacity: 0; transform: translateX(-100vw); animation: sb-fly-in .75s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.1s + var(--i, 0) * .18s); }
@keyframes sb-fly-in { to { opacity: 1; transform: none; } }

/* Photos fly in from the right (keeping their tilt), then the stickers spin in: two full turns (opposite directions) before settling on their tilt */
.hero--home .hero__photo--a { opacity: 0; transform: translateX(100vw) rotate(3deg); animation: sb-fly-in-a .8s cubic-bezier(.2,.8,.2,1) .35s forwards; }
.hero--home .hero__photo--b { opacity: 0; transform: translateX(100vw) rotate(-4deg); animation: sb-fly-in-b .8s cubic-bezier(.2,.8,.2,1) .55s forwards; }
@keyframes sb-fly-in-a { to { opacity: 1; transform: translateX(0) rotate(3deg); } }
@keyframes sb-fly-in-b { to { opacity: 1; transform: translateX(0) rotate(-4deg); } }
.hero--home .sticker--a { opacity: 0; animation: sb-pop-a .9s cubic-bezier(.3,1.3,.5,1) 1.25s forwards; }
.hero--home .sticker--b { opacity: 0; animation: sb-pop-b .9s cubic-bezier(.3,1.3,.5,1) 1.45s forwards; }
@keyframes sb-pop-a { from { opacity: 0; transform: rotate(-712deg) scale(.4); } 25% { opacity: 1; } to { opacity: 1; transform: rotate(8deg) scale(1); } }
@keyframes sb-pop-b { from { opacity: 0; transform: rotate(714deg) scale(.4); } 25% { opacity: 1; } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* Store pages: kicker, title and tagline fly in from the left; the action buttons from the right.
   Lineup pages: the same for the yellow header. */
.hero--store .hero__copy > *, .page-header--custard .kicker, .page-header--custard .page-title, .page-header--custard .page-header__date {
	opacity: 0; transform: translateX(-100vw); animation: sb-fly-in .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero--store .hero__copy > :nth-child(1), .page-header--custard .kicker { animation-delay: .1s; }
.hero--store .hero__copy > :nth-child(2), .page-header--custard .page-title { animation-delay: .25s; }
.hero--store .hero__copy > :nth-child(3), .page-header--custard .page-header__date { animation-delay: .4s; }
.hero--store .hero__actions { opacity: 0; transform: translateX(100vw); animation: sb-fly-in .7s cubic-bezier(.2,.8,.2,1) .5s forwards; }

@media (prefers-reduced-motion: reduce) {
	.hero--store .hero__copy > *, .hero--store .hero__actions, .page-header--custard .kicker, .page-header--custard .page-title, .page-header--custard .page-header__date { opacity: 1; transform: none; animation: none; }
	.hero__line, .hero--home .hero__photo, .hero--home .sticker { opacity: 1; animation: none; }
	.hero__line { transform: none; }
	.hero--home .hero__photo--a { transform: rotate(3deg); }
	.hero--home .hero__photo--b { transform: rotate(-4deg); }
}
.hero__tagline { font-size: var(--sb-step-1); line-height: 1.5; max-width: 36ch; margin: 0 0 1.5em; color: var(--sb-band-text); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin: 0; }

.hero__photos { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; width: 100%; }
.hero__photo { position: absolute; object-fit: cover; border-radius: 28px; border: 8px solid var(--sb-cream); box-shadow: 0 20px 50px rgba(43,26,23,.22); }
.hero__photo--a { right: 0; top: 0; width: 80%; height: 68%; transform: rotate(3deg); }
.hero__photo--b { left: 0; bottom: 0; width: 64%; height: 52%; transform: rotate(-4deg); }

/* --------------------------------------------------------------------------
   7. Home sections
   -------------------------------------------------------------------------- */
.stores { padding-block: var(--sb-section) 1.5rem; }
.store-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.store-card {
	position: relative; display: flex; flex-direction: column; background: var(--sb-white);
	border-radius: var(--sb-radius-lg); border: 4px solid var(--sb-rule); box-shadow: var(--sb-shadow); overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}
.store-card.is-visible:hover, .store-card.is-visible:focus-within, html:not(.js-reveal) .store-card:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); }
.store-card__media { aspect-ratio: 16 / 10; background: var(--sb-berry-light); }
.store-card__media img { width: 100%; height: 100%; object-fit: cover; }
.store-card__body { padding: clamp(1.25rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .5rem; }
.store-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.store-card__title { font-size: var(--sb-step-3); color: var(--sb-berry-dark); }
.store-card__link { color: inherit; text-decoration: none; }
.store-card__link::after { content: ""; position: absolute; inset: 0; }
.store-card__link:focus-visible { outline: none; }
.store-card:has(.store-card__link:focus-visible) { outline: 3px solid var(--sb-berry); outline-offset: 3px; }
.store-card__tagline { color: var(--sb-cocoa-soft); margin: 0; }
.store-card__address { margin: 0; font-weight: 700; }
.store-card__flavor { margin: .75rem 0 0; padding: 1rem 1.25rem; background: var(--sb-cream); border-radius: var(--sb-radius-sm); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.store-card__flavor-label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sb-berry); }
.store-card__flavor-name { font-size: var(--sb-step-1); }
.store-card__cta { margin-top: .75rem; font-weight: 800; color: var(--sb-berry); }

.flavors { padding-block: 1.5rem var(--sb-section); }
.flavor-today { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-bottom: 2rem; }
.flavor-today__item {
	display: flex; flex-direction: column; gap: .25rem; padding: 1.5rem 1.75rem; text-decoration: none; color: var(--sb-cocoa);
	background: var(--sb-white); border: 4px solid var(--sb-rule); border-radius: var(--sb-radius); transition: border-color .15s, transform .15s;
}
.flavor-today__item:hover { border-color: var(--sb-berry); transform: translateY(-2px); color: var(--sb-cocoa); }
.flavor-today__store { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sb-berry); }
.flavor-today__name { font-size: var(--sb-step-2); line-height: 1.1; }
.flavor-today__desc { color: var(--sb-cocoa-soft); margin-top: .35rem; text-wrap: pretty; }
.flavor-today__more { font-weight: 800; color: var(--sb-berry); margin-top: .5rem; }

.custard-strip { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.custard-strip__item { display: flex; flex-direction: column; gap: .6rem; }
.custard-strip__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sb-radius); }
.custard-strip__name { font-weight: 800; }

.intro { padding-block: 0 var(--sb-section); }
.intro .prose { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   8. Store landing page
   -------------------------------------------------------------------------- */
.hero--store { position: relative; min-height: clamp(420px, 60vh, 640px); display: grid; align-items: end; color: var(--sb-cream); overflow: hidden; background: var(--sb-cocoa); }
.hero--store .hero__media { position: absolute; inset: 0; }
.hero--store .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero--store .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,26,23,.85), rgba(43,26,23,.25) 55%, rgba(43,26,23,.05)); }
.hero--store .hero__inner { position: relative; z-index: 1; padding-block: 1.5rem 2.25rem; }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.hero--store .hero__title { font-size: var(--sb-step-5); line-height: .95; color: var(--sb-cream); margin-bottom: .2em; }
.hero--store .hero__tagline { color: var(--sb-cream); margin-bottom: 0; }
.hero--store .breadcrumbs a { color: var(--sb-dark-accent); }
.hero--store .breadcrumbs [aria-current], .hero--store .breadcrumbs li + li::before { color: rgba(255,248,239,.8); }

.page-header { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) 1.25rem; }
.page-header--custard { background: var(--sb-band); color: var(--sb-band-text); padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem); overflow: hidden; }
.page-header--custard .page-title, .page-header--custard .kicker, .page-header--custard .kicker a { color: var(--sb-band-title); }
.page-header--custard .page-header__date, .page-header--custard .breadcrumbs [aria-current], .page-header--custard .breadcrumbs li + li::before { color: var(--sb-band-muted); }
.page-header--custard .breadcrumbs a { color: var(--sb-band-link); }
.page-header--custard .breadcrumbs a:hover { color: var(--sb-band-title); }
.page-title { font-size: var(--sb-step-4); color: var(--sb-berry-dark); }
.page-header__date, .post-meta { color: var(--sb-cocoa-soft); margin: .6em 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem; font-size: var(--sb-step--1); font-weight: 600; }
.breadcrumbs li + li::before { content: "›"; margin-inline: .4em; color: var(--sb-cocoa-soft); }
.breadcrumbs [aria-current] { color: var(--sb-cocoa-soft); }

.lineup-preview, .lineup-full { padding-block: var(--sb-section) 1.5rem; }
.lineup-full { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* The Daily Berry blocks: plugin CSS is layout-only; brand them here. */
.lineup { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lineup > div { background: var(--sb-white); border: 4px solid var(--sb-rule); border-radius: var(--sb-radius-lg); padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .5rem; }
.dailyberry-today__label, .dailyberry-soup__label, .dailyberry-special__label {
	font-family: var(--sb-font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--sb-berry); margin: 0;
}
.dailyberry-soup__label { color: var(--sb-leaf); }
.dailyberry-today__name, .dailyberry-soup__name, .dailyberry-special__title { font-family: var(--sb-font-display); font-weight: 400; font-size: var(--sb-step-2); line-height: 1.1; margin: 0; }
.dailyberry-today__desc, .dailyberry-soup__desc, .dailyberry-special__desc { color: var(--sb-cocoa-soft); margin: 0; }
/* Special: the plugin puts the photo beside the text (7em square, flex row). In our card it goes full-width above the text instead. */
.lineup .dailyberry-special__body { flex-direction: column; align-items: stretch; gap: .5rem; margin-top: 0; }
.lineup .dailyberry-special__photo, .lineup .dailyberry-special img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--sb-radius-sm); margin: .25rem 0; align-self: stretch; }
.dailyberry-badge { display: inline-block; vertical-align: middle; font-family: var(--sb-font-body); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px; background: var(--sb-tint); color: var(--sb-on-tint); }
.dailyberry-badge--out { background: var(--sb-cocoa); color: var(--sb-white); }
.lineup__unavailable { font-style: italic; color: var(--sb-cocoa-soft); }
/* Flavor description dialog: markup and open/close come from the plugin, the look from here.
   The title strip takes the current color scheme's band, so it matches the hero and footer. */
.dailyberry-modal {
	max-width: min(30rem, calc(100vw - 2rem)); padding: 0; overflow: hidden;
	background: var(--sb-white); color: var(--sb-cocoa);
	border: 4px solid var(--sb-rule); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-lg);
}
.dailyberry-modal[open] { animation: sb-dialog-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes sb-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dailyberry-modal::backdrop { background: rgba(43, 26, 23, .55); backdrop-filter: blur(3px); }
.dailyberry-modal__name {
	margin: 0; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2rem) 1.1rem;
	background: var(--sb-band); color: var(--sb-band-title);
	font-family: var(--sb-font-display); font-weight: 400; font-size: var(--sb-step-2); line-height: 1.1; letter-spacing: .005em; text-wrap: balance;
}
.dailyberry-modal__name::before {
	content: "Frozen custard"; display: block; margin-bottom: .5em;
	font-family: var(--sb-font-body); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-band-link);
}
.dailyberry-modal__desc { margin: 0; padding: 1.25rem clamp(1.25rem, 4vw, 2rem) 0; color: var(--sb-cocoa-soft); line-height: 1.6; text-wrap: pretty; }
.dailyberry-modal__close {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	margin: 1.25rem clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); padding: .7em 1.6em;
	font: inherit; font-weight: 800; line-height: 1.2; cursor: pointer;
	background: var(--sb-berry); color: var(--sb-white); border: 3px solid transparent; border-radius: 999px; box-shadow: 0 5px 0 var(--sb-berry-dark);
	transition: transform .15s, background .15s, box-shadow .15s;
}
.dailyberry-modal__close:hover { background: var(--sb-berry-dark); transform: translateY(-2px); box-shadow: 0 7px 0 #5e061e; }
.dailyberry-modal__close:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sb-berry-dark); }
@media (prefers-reduced-motion: reduce) { .dailyberry-modal[open] { animation: none; } }

.visit { padding-block: 1.5rem var(--sb-section); }
.visit__panel { background: var(--sb-band); color: var(--sb-band-text); border-radius: var(--sb-radius-lg); padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; }
.visit__panel .section-title { color: var(--sb-band-title); }
.visit__panel a:not(.button) { color: var(--sb-band-link); }
.visit__panel a:not(.button):hover { color: var(--sb-band-title); }
.visit__address { font-style: normal; font-size: var(--sb-step-1); font-weight: 700; line-height: 1.4; margin-bottom: .5rem; }
.visit__phone { font-size: var(--sb-step-1); }
.visit__subtitle { font-size: var(--sb-step-1); margin: 1.25rem 0 .5rem; }
.visit__actions { margin: 1.25rem 0 0; }
.map { border-radius: var(--sb-radius); overflow: hidden; border: 8px solid var(--sb-cream); background: var(--sb-white); box-shadow: var(--sb-shadow); }
.map__frame { width: 100%; aspect-ratio: 4 / 3; display: block; }
.map__link { margin: 0; padding: .75rem 1rem; font-size: var(--sb-step--1); font-weight: 700; }
.social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 0; }
.social__link {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
	padding: .45rem 1rem .45rem .75rem; border-radius: 999px;
	background: var(--sb-white); border: 3px solid var(--sb-rule);
	color: var(--sb-cocoa); font-weight: 800; font-size: var(--sb-step--1); text-decoration: none;
	transition: border-color .15s, color .15s, transform .15s;
}
.social__link:hover { border-color: var(--sb-berry); color: var(--sb-berry-dark); transform: translateY(-2px); }
.social__link:focus-visible { outline: 3px solid var(--sb-berry); outline-offset: 3px; }
.social__icon { display: inline-flex; width: 1.35em; height: 1.35em; color: var(--sb-berry); }
.social__icon svg { width: 100%; height: 100%; }

.menus-contact { padding-block: .5rem var(--sb-section); }
.menus-contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.contact__lead { color: var(--sb-cocoa-soft); }
.lineup-menus { padding-block: 1rem var(--sb-section); }
.lineup-menus__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.lineup-menus .order-links__subtitle:first-child { margin-top: 0; }

/* Forms */
.form-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-field label { font-weight: 800; }
.form-field input, .form-field textarea, .search-form__input {
	padding: .8em 1.1em; border: 3px solid var(--sb-rule); border-radius: var(--sb-radius-sm); background: var(--sb-white); width: 100%; min-height: 48px;
}
.form-field input:focus-visible, .form-field textarea:focus-visible { border-color: var(--sb-berry); outline-offset: 0; }
.form-field--error input, .form-field--error textarea { border-color: var(--sb-berry); }
.form-error { color: var(--sb-berry-dark); font-weight: 700; font-size: var(--sb-step--1); }
.form-field--turnstile { outline: none; }
.form-field--turnstile .cf-turnstile { min-height: 65px; } /* reserve the widget's height so the button doesn't jump */
.form-actions { margin: .5rem 0 0; }
.contact-form form.is-sent .form-field { opacity: .55; }
.contact-form form.is-sent .notice { margin: .5rem 0 0; }
.hp { position: absolute; left: -9999px; }
.search-form { display: flex; gap: .5rem; max-width: 480px; }

/* --------------------------------------------------------------------------
   8b. Menu pages (page-templates/template-menu.php)
   -------------------------------------------------------------------------- */
.menu-page .page-header__sub { font-size: var(--sb-step-1); line-height: 1.5; max-width: 60ch; margin: .5em 0 0; color: var(--sb-band-text); text-wrap: pretty; }
.menu-switch { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; }
.menu-switch a {
	display: inline-flex; align-items: center; min-height: 44px; padding: .45em 1.1em; border-radius: 999px;
	font-weight: 800; text-decoration: none; background: var(--sb-white); color: var(--sb-berry-dark); border: 2px solid var(--sb-rule);
	transition: border-color .15s, background .15s;
}
.menu-switch a:hover { border-color: var(--sb-berry); color: var(--sb-berry-dark); }
.menu-switch a[aria-current] { background: var(--sb-berry); color: var(--sb-white); border-color: var(--sb-berry); }
.menu-page .page-header__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; }

/* Sticky row of section links under the header (--sb-header-h is set by main.js). */
.menu-jump { position: sticky; top: var(--sb-header-h, 0px); z-index: 90; background: rgba(255, 248, 239, .94); background: color-mix(in srgb, var(--sb-cream) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 3px dashed var(--sb-rule); }
/* Wide screens: wrap so every section link is visible. Phones (below): one swipeable row. */
.menu-jump ul { list-style: none; margin: 0; padding: .5rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }

.menu-jump a { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; padding: .4em .9em; border-radius: 999px; font-weight: 800; font-size: var(--sb-step--1); text-decoration: none; color: var(--sb-cocoa); }
.menu-jump a:hover, .menu-jump a:focus-visible { background: var(--sb-hover); color: var(--sb-berry-dark); }
.menu-jump a[aria-current] { background: var(--sb-berry); color: var(--sb-white); } /* the section in view (main.js) */

.menu-body { padding-block: var(--sb-section); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.menu-intro { margin: 0; max-width: 70ch; font-size: var(--sb-step-1); line-height: 1.5; text-wrap: pretty; }
.menu-notes { list-style: none; margin: 0; padding: 1rem 1.25rem; background: var(--sb-white); border: 3px dashed var(--sb-rule); border-radius: var(--sb-radius); display: grid; gap: .35rem; font-weight: 600; }
.menu-notes li { padding-left: 1.1em; text-indent: -1.1em; }
.menu-notes li::before { content: "•"; color: var(--sb-berry); margin-right: .55em; }

.menu-section { background: var(--sb-white); border: 4px solid var(--sb-rule); border-radius: var(--sb-radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); scroll-margin-top: calc(var(--sb-header-h, 0px) + var(--sb-jump-h, 3.5rem) + .75rem); }
.menu-section__head { margin-bottom: .75rem; }
.menu-section__title { font-size: var(--sb-step-2); color: var(--sb-berry-dark); margin: 0; }
.menu-section__intro { margin: 0 0 1rem; color: var(--sb-cocoa-soft); max-width: 70ch; text-wrap: pretty; }
.menu-sizes { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0 0 1rem; padding: .6rem 1rem; background: var(--sb-tint); color: var(--sb-on-tint); border-radius: var(--sb-radius-sm); font-weight: 800; }
.menu-sizes div { display: flex; gap: .35em; }
.menu-sizes dt::after { content: ":"; }
.menu-sizes dd { margin: 0; }

.menu-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.menu-item { padding-top: 1rem; border-top: 1px solid var(--sb-line); }
.menu-item:first-child { padding-top: 0; border-top: 0; }
.menu-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.menu-item__name { font-size: var(--sb-step-1); font-weight: 800; line-height: 1.2; margin: 0; }
.menu-item__price { margin: 0; font-weight: 800; font-size: var(--sb-step-1); color: var(--sb-berry-dark); white-space: nowrap; }
.menu-item__unit { font-size: var(--sb-step--1); color: var(--sb-cocoa-soft); font-weight: 700; white-space: normal; }
.menu-item__prices { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.menu-item__prices div { display: flex; gap: .4em; align-items: baseline; }
.menu-item__prices dt { font-size: var(--sb-step--1); font-weight: 700; color: var(--sb-cocoa-soft); }
.menu-item__prices dd { margin: 0; font-weight: 800; color: var(--sb-berry-dark); white-space: nowrap; }
.menu-item__desc { margin: .3rem 0 0; color: var(--sb-cocoa-soft); max-width: 70ch; text-wrap: pretty; }
.menu-item__note { margin: .35rem 0 0; font-size: var(--sb-step--1); font-style: italic; color: var(--sb-cocoa-soft); }
.menu-item__choices { margin: .5rem 0 0; display: grid; gap: .3rem; }
.menu-item__choices div { display: grid; grid-template-columns: minmax(6.5em, max-content) 1fr; gap: .25rem .75rem; }
.menu-item__choices dt { font-weight: 800; color: var(--sb-leaf-dark); }
.menu-item__choices dd { margin: 0; color: var(--sb-cocoa-soft); }
.menu-item__list { margin: .35rem 0 0; padding-left: 1.2em; color: var(--sb-cocoa-soft); }
.menu-item__list li + li { margin-top: .15rem; }

.flag { display: inline-flex; align-items: center; vertical-align: middle; margin-left: .35em; font-size: .7rem; font-weight: 800; letter-spacing: .05em; padding: .2em .55em; border-radius: 999px; line-height: 1.2; }
.flag--v { background: var(--sb-leaf-light); color: var(--sb-leaf-dark); }
.flag--nuts { background: var(--sb-tint); color: var(--sb-on-tint); }

/* Compact sections (extras, beverages, cups & cones): name + price rows in columns. */
.menu-section--compact .menu-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 2.5rem; }
.menu-section--compact .menu-item, .menu-section--compact .menu-item:first-child { padding: .55rem 0; border-top: 0; border-bottom: 1px solid var(--sb-line); }
.menu-section--compact .menu-item__name, .menu-section--compact .menu-item__price, .menu-section--compact .menu-item__prices dd { font-size: var(--sb-step-0); }
.menu-section--compact .menu-item__head { flex-wrap: nowrap; }
.menu-section--compact .menu-item__name { flex: 1; }

.menu-section__note { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px dashed var(--sb-rule); font-size: var(--sb-step--1); color: var(--sb-cocoa-soft); }

.menu-aside { background: var(--sb-band); color: var(--sb-band-text); border-radius: var(--sb-radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); }
.menu-aside__title { color: var(--sb-band-title); font-size: var(--sb-step-2); margin-bottom: .5em; }
.menu-aside ul { margin: 0; padding-left: 1.2em; display: grid; gap: .35rem; max-width: 70ch; }

.menu-legend { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--sb-step--1); color: var(--sb-cocoa-soft); }
.menu-legend div { display: flex; align-items: center; gap: .5em; }
.menu-legend dt .flag { margin-left: 0; }
.menu-legend dd { margin: 0; }

.menu-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 3px dashed var(--sb-rule); }
.menu-footer p { margin: 0; max-width: 60ch; font-size: var(--sb-step--1); color: var(--sb-cocoa-soft); }

@media (max-width: 640px) {
	.menu-jump .container { width: 100%; }
	.menu-jump ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: var(--sb-gutter); }
	.menu-jump ul::-webkit-scrollbar { display: none; }
	.menu-item__choices div { grid-template-columns: 1fr; gap: 0; }
}
@media print {
	.menu-jump, .menu-switch, .page-header__actions, .menu-footer .button { display: none !important; }
	.menu-section { border-width: 1px; break-inside: avoid; padding: 1rem; }
	.menu-item { break-inside: avoid; }
	.menu-item__desc, .menu-item__note, .menu-section__intro { color: #333; }
}

/* --------------------------------------------------------------------------
   9. Blog
   -------------------------------------------------------------------------- */
.blog-layout { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); padding-block: 1rem var(--sb-section); }
@media (min-width: 900px) { .blog-layout:has(.blog-layout__side) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.post-list { display: grid; gap: 2rem; }
.post-teaser { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); background: var(--sb-white); border: 4px solid var(--sb-rule); border-radius: var(--sb-radius-lg); overflow: hidden; }
@media (min-width: 640px) { .post-teaser:has(.post-teaser__thumb) { grid-template-columns: 260px minmax(0, 1fr); } }
.post-teaser__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-teaser__body { padding: 1.5rem; }
.post-teaser__title { font-size: var(--sb-step-1); font-family: var(--sb-font-display); font-weight: 400; }
.post-teaser__title a { text-decoration: none; color: var(--sb-berry-dark); }
.post-teaser__title a:hover { text-decoration: underline; }
.post-single__thumb img { border-radius: var(--sb-radius-lg); margin-bottom: 2rem; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem; font-weight: 700; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }
.pagination .page-numbers { padding: .5em .9em; border-radius: 999px; text-decoration: none; min-width: 44px; text-align: center; font-weight: 700; }
.pagination .page-numbers.current { background: var(--sb-berry); color: var(--sb-white); }
.widget + .widget { margin-top: 2rem; }
.widget__title { font-size: var(--sb-step-1); margin-bottom: .5em; }
.page-single .prose, .post-single .prose { padding-bottom: var(--sb-section); }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--sb-band); color: var(--sb-band-text); padding-block: var(--sb-section) 1.5rem; margin-top: auto; }
.site-footer a { color: var(--sb-band-link); }
.site-footer a:hover { color: var(--sb-band-title); }
.site-footer__stores { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.footer-store__name { font-size: var(--sb-step-1); margin-bottom: .5rem; }
.footer-store__name a { text-decoration: none; color: var(--sb-band-title); }
.footer-store__address { font-style: normal; }
.footer-store__phone { margin: .25em 0 .5em; }
.footer-store__apply { margin: .6em 0 0; font-size: var(--sb-step--1); font-weight: 800; }
.site-footer .hours th, .site-footer .hours td { color: var(--sb-band-text); }
.footer-brand { display: flex; flex-direction: column; gap: .75rem; }
.footer-brand__logo { height: 68px; width: auto; align-self: flex-start; background: var(--sb-cream); padding: .6rem 1rem; border-radius: var(--sb-radius-sm); box-sizing: content-box; }
.footer-brand__blurb { margin: 0; font-size: var(--sb-step--1); color: var(--sb-band-muted); max-width: 40ch; }
.footer-nav .menu { flex-wrap: wrap; }
.footer-nav .menu a { color: var(--sb-band-text); padding: .4em .8em; }
.footer-nav .menu a:hover { background: var(--sb-hover); color: var(--sb-berry-dark); }
.site-footer__legal { margin: 2.5rem 0 0; font-size: var(--sb-step--1); color: var(--sb-band-muted); border-top: 1px solid color-mix(in srgb, var(--sb-band-text) 25%, transparent); padding-top: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.site-footer__privacy { font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }
.site-footer { padding-bottom: 5.5rem; } /* keeps the back-to-top button clear of the footer text */

/* Back to top */
.back-to-top {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
	width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--sb-cream);
	background: var(--sb-berry); color: var(--sb-white); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(43,26,23,.25);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .15s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.back-to-top:hover { background: var(--sb-berry-dark); }
.back-to-top svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--sb-cream); border-bottom: 3px dashed var(--sb-rule); padding: 1rem var(--sb-gutter) 1.5rem; box-shadow: var(--sb-shadow); }
	.primary-nav.is-open { display: block; }
	.menu { flex-direction: column; align-items: stretch; gap: .25rem; }
	.menu a { padding: .9em 1.1em; }
	.menu .menu-item-has-children.is-open > .sub-menu { position: static; box-shadow: none; background: transparent; border: 0; padding-left: 1rem; }
}
@media (max-width: 640px) {
	.site-logo__img { height: 68px; }
	.site-header.is-scrolled .site-logo__img { height: 46px; }
	.hero--home { padding-block: 1.5rem 2rem; }
	.hero__photos { max-width: 420px; }
	.hero__photo { border-width: 5px; border-radius: 18px; }
	.sticker { width: 7.5rem; height: 7.5rem; }
	.sticker--b { width: 6.5rem; height: 6.5rem; left: 50%; }
	.sticker__name { font-size: 1rem; }
	.hero__actions .button { width: 100%; }
	.hero--store .hero__actions { width: 100%; }
	.hero--store .hero__actions .button { flex: 1; }
	.store-card__head { flex-direction: column; align-items: flex-start; }
	.map { border-width: 5px; }
	.hero--store .hero__media::after { background: linear-gradient(to top, rgba(43,26,23,.88), rgba(43,26,23,.55) 55%, rgba(43,26,23,.25)); }
	.kicker { letter-spacing: .1em; }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
	.site-header, .site-footer, .nav-toggle, .map, .contact, .breadcrumbs, .sticker { display: none !important; }
	body { background: #fff; color: #000; }
}