/* ==========================================================================
   SweetBerries — Gainesville section
   Reproduces the one-page design the family commissioned for the Gainesville
   store (Oct 2026) with plain templates and CSS. Loaded after main.css, only
   on pages that belong to the Gainesville store (body.sb-gville): the landing
   page (page-templates/template-gainesville.php), its menu pages and the
   lineup page. Everything here is scoped so the home page and Bradenton are
   untouched.
   Layers: font → tokens → type → buttons → header → landing sections →
   footer → shared components (menus, lineup, forms) → responsive
   ========================================================================== */

/* The design was set in Concert One (SIL OFL; license in assets/fonts/), but
   the font never loaded on the review site, so what the family approved was
   the browser fallback, Times New Roman. Both are available; pick one below. */
@font-face { font-family: 'Concert One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/concert-one-latin-400-normal.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.sb-gville {
	--gv-font-display: 'Times New Roman', Times, Georgia, serif;   /* what the family saw */
	/* --gv-font-display: 'Concert One', 'Times New Roman', serif;    what the design specified */
	--gv-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	--gv-ink:    #020301;   /* headings */
	--gv-text:   #111907;   /* body text */
	--gv-muted:  #585e6a;   /* sub-labels, descriptions */
	--gv-cream:  #fff0de;   /* the landing page's contact band only; sub-pages use the site's Sky tokens */
	--gv-line:   #eaeaea;   /* hairlines */
	--gv-berry:  var(--sb-berry);
	--gv-berry-dark: var(--sb-berry-dark);
	--gv-leaf:   var(--sb-leaf);
	--gv-radius: 14px;      /* buttons, cards */

	--gv-content: 1140px;   /* text sections */
	--gv-wide:    1600px;   /* photo sections */
	--gv-gutter:  clamp(1rem, 3vw, 2rem);

	font-family: var(--gv-font-body);
	font-size: 18px;
	line-height: 1.68;
	color: var(--gv-text);
	background: #fff;
}
html:has(body.sb-gville) { scroll-padding-top: calc(var(--sb-header-h, 121px) + 16px); }
.sb-gville .site-main { background: #fff; }
.sb-gville p { margin: 0 0 1em; }
.sb-gville a { color: var(--gv-berry); }
.sb-gville a:hover { color: var(--gv-berry-dark); }

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

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */
.gv-h2, .gv-h3, .gv-hero__title {
	font-family: var(--gv-font-display); font-weight: 500; text-transform: uppercase; color: var(--gv-ink);
	letter-spacing: 0; margin: 0;
}
.gv-h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; max-width: 750px; text-wrap: balance; }
.gv-h2--center { text-align: center; margin-inline: auto; }
.gv-h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.gv-h3--center { text-align: center; }

/* --------------------------------------------------------------------------
   3. Buttons — berry pill, 14px corners, uppercase label
   -------------------------------------------------------------------------- */
.gv-button, .sb-gville a.gv-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	min-height: 54px; padding: 12px 24px;
	background: var(--gv-berry); color: #fff;
	font: 400 18px/1.4 var(--gv-font-body); text-transform: uppercase; text-decoration: none; text-align: center;
	border: 0; border-radius: var(--gv-radius); cursor: pointer;
	transition: background .15s;
}
.gv-button:hover, .gv-button:focus-visible, .sb-gville a.gv-button:hover, .sb-gville a.gv-button:focus-visible { background: var(--gv-berry-dark); color: #fff; }
.gv-button--lg { font-size: 20px; padding: 14px 28px; }
.gv-button--block { display: flex; width: 100%; }
.gv-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 50px; }

/* --------------------------------------------------------------------------
   4. Header — white bar, anchor nav left of a centered logo, phone + social right
   -------------------------------------------------------------------------- */
.sb-gville .site-header.gv-header {
	position: sticky; top: 0; z-index: 100;
	background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--gv-line); box-shadow: none;
	transition: transform .3s ease, box-shadow .3s ease;
}
.sb-gville .site-header.gv-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
/* Like the design: the bar slides away while scrolling down and comes back on the first scroll up (main.js). */
.sb-gville .site-header.gv-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.gv-header__inner {
	width: min(100% - 2 * var(--gv-gutter), var(--gv-wide)); margin-inline: auto; min-height: 121px;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 60px;
}
.gv-header__nav { justify-self: end; }
.gv-menu { display: flex; align-items: center; gap: 25px; margin: 0; padding: 0; list-style: none; }
.gv-menu a { display: block; padding: 10px 0; border-radius: 0; background: none; font: 400 16px/1 var(--gv-font-body); color: var(--gv-leaf); text-decoration: none; }
.gv-menu a:hover, .gv-menu a:focus-visible { background: none; color: var(--gv-berry); }
.gv-header__logo { justify-self: center; }
.sb-gville .gv-header .site-logo__img, .sb-gville .gv-header.is-scrolled .site-logo__img { height: 80px; width: auto; }
.sb-gville .gv-menu a, .sb-gville .gv-header__phone { text-decoration: none; }
.gv-header__contact { display: flex; align-items: center; gap: 28px; justify-self: start; }
.gv-header__phone { font: 400 24px/1.4 var(--gv-font-body); color: var(--gv-berry); text-decoration: none; white-space: nowrap; }
.gv-header__phone:hover { color: var(--gv-berry-dark); }
.gv-header__contact .social { margin: 0; gap: 14px; flex-wrap: nowrap; }
.gv-header__contact .social__link { padding: 0; min-height: 0; border: 0; background: none; color: var(--gv-text); transform: none; }
.gv-header__contact .social__link:hover { color: var(--gv-berry); }
.gv-header__contact .social__icon { width: 24px; height: 24px; color: inherit; }
.gv-header__contact .social__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.gv-header__contact .social__link--yelp, .gv-header__contact .social__link--google { display: none; } /* the design shows Facebook and Instagram */
.gv-header__contact--menu, .gv-header__toggle { display: none; }

/* --------------------------------------------------------------------------
   5. Hero — photo collage behind a berry headline box
   In the design the header sits on top of the hero, so the collage starts at
   the very top of the page and the white bar covers its first 121px. The
   negative margin reproduces that: the hero is 814px tall but only the part
   below the header shows, which keeps its wide, letterbox proportion.
   -------------------------------------------------------------------------- */
.gv-hero { position: relative; isolation: isolate; overflow: hidden; background: #131313; margin-top: calc(-1 * var(--sb-header-h, 121px)); }
.gv-hero__media, .gv-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.gv-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(19, 19, 19, .15); }
.gv-hero__inner { position: relative; z-index: 1; display: flex; justify-content: center; padding: 370px 0 300px; }
.gv-hero__title {
	width: 80%; max-width: 912px; padding: 0 .25em;
	background: var(--gv-berry); color: #fff; text-align: center;
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.2; text-wrap: balance;
}

/* --------------------------------------------------------------------------
   6. Location and hours
   -------------------------------------------------------------------------- */
.gv-location { padding-top: 100px; background: #fff; }
.gv-location .gv-h2 { padding-bottom: 50px; }
.gv-location__grid { display: grid; grid-template-columns: 4fr 5fr; gap: 20px 5%; align-items: center; padding-bottom: 10px; }
.gv-location__info { display: grid; gap: 20px; padding: 10px; }
.gv-location__address { margin: 0; }
.gv-location__phone { margin: 0 .2em; font-weight: 700; color: var(--gv-berry); text-decoration: none; }
.gv-hours th, .gv-hours td { padding: .2em 1.25em .2em 0; font-size: 18px; }
.gv-map { background: #e9e9e4; }
.gv-map__frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.gv-map__link { margin: 0; padding: .4rem 0 0; font-size: 14px; }
.gv-location__photo img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   7. Menus — two full-bleed photos, four buttons
   -------------------------------------------------------------------------- */
.gv-menus { display: grid; gap: 20px; padding-top: 100px; margin-bottom: 60px; }
.gv-menus__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 10px; }
.gv-menus__photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Four equal columns across the full width, like the photos above, each button centered in its column. */
.gv-menus__buttons { list-style: none; margin: 0; padding: 0 10px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 20px; }

/* --------------------------------------------------------------------------
   8. Order — heading, blurb, one button; line-art doodle at the left
   -------------------------------------------------------------------------- */
.gv-order { position: relative; padding: 50px 0 100px; background: #fff url('../img/gainesville/deco-order.png') no-repeat 0 150px / 260px auto; }
.gv-order__inner { display: grid; justify-items: center; gap: 30px; }
.gv-order__text { max-width: 720px; margin: 0; text-align: center; }
.gv-order__action { margin: 0; }

/* --------------------------------------------------------------------------
   9. Split sections — photo left, copy right (delivery, catering)
   -------------------------------------------------------------------------- */
.gv-split__grid { display: grid; grid-template-columns: minmax(0, 664px) minmax(0, 1fr); align-items: center; gap: 0 50px; }
.gv-split__photo img { display: block; width: 100%; height: auto; }
.gv-split__copy { display: grid; gap: 50px; padding: 10px 10px 10px 0; }
.gv-split__copy p { margin: 0; }
.gv-split__copy .gv-h2 { max-width: none; }
.gv-catering { padding-bottom: 100px; }

/* --------------------------------------------------------------------------
   10. Flavor of the day — four custard photos, today's lineup, the calendar
   -------------------------------------------------------------------------- */
.gv-flavors { padding: 100px 0; }
.gv-flavors__inner { display: grid; justify-items: center; gap: 20px; }
.gv-flavors__photos { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 260px)); justify-content: center; gap: 20px; }
.gv-flavors__photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gv-today, .gv-calendar { width: 100%; max-width: 1100px; }
.gv-today { margin-top: 10px; }
/* Today's lineup: centered cards, only as wide as they need to be; the plugin's empty blocks stay out of the way. */
.sb-gville .gv-today .lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.sb-gville .gv-today .lineup > div { flex: 1 1 280px; max-width: 360px; }
.sb-gville .gv-today .lineup > div:empty { display: none; }
.gv-calendar { display: grid; gap: 20px; margin-top: 20px; }
.gv-flavors__more { margin: 0; text-align: center; }
.gv-flavors__more a { font-weight: 600; text-decoration: none; }
.gv-flavors__more a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Contact — cream band, line-art doodle top right, the form
   -------------------------------------------------------------------------- */
.gv-contact { padding: 100px 0; background: var(--gv-cream) url('../img/gainesville/deco-contact.png') no-repeat top right / 326px auto; }
.gv-contact__inner { display: grid; justify-items: center; gap: 20px; }
.gv-contact .gv-h2 { margin-bottom: 20px; }
.sb-gville .contact-form { width: 100%; max-width: 1200px; }

/* --------------------------------------------------------------------------
   12. Footer — the shared footer in this palette (white, hairline, serif names)
   -------------------------------------------------------------------------- */
.sb-gville .site-footer { background: #fff; color: var(--gv-text); border-top: 1px solid var(--gv-line); padding-block: 60px 24px; }
.sb-gville .site-footer a { color: var(--gv-berry); }
.sb-gville .site-footer a:hover { color: var(--gv-berry-dark); }
.sb-gville .footer-store__name { font-family: var(--gv-font-display); font-weight: 500; text-transform: uppercase; font-size: 28px; letter-spacing: 0; }
.sb-gville .footer-store__name a { color: var(--gv-ink); }
.sb-gville .site-footer .hours th, .sb-gville .site-footer .hours td { color: var(--gv-text); font-size: 16px; }
.sb-gville .footer-brand__logo { height: 80px; padding: 0; background: none; border-radius: 0; }
.sb-gville .footer-brand__blurb { font-size: 16px; color: var(--gv-muted); }
.sb-gville .site-footer__legal { align-items: center; text-align: center; font-size: 16px; color: var(--gv-muted); border-top-color: var(--gv-line); }

/* Back to top: a small berry square, like the design's */
.sb-gville .back-to-top { right: 20px; bottom: 10px; width: 46px; height: 46px; border: 0; border-radius: 2px; box-shadow: none; }
.sb-gville .back-to-top svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   13. Shared components in this look: page headers, buttons, menu pages,
       lineup cards, calendar, dialog, forms
   -------------------------------------------------------------------------- */
/* Page headers (menu pages, lineup page): the site's Sky blue band, with this section's type */
.sb-gville .page-header--custard { background: var(--sb-band); color: var(--gv-text); }
.sb-gville .page-title, .sb-gville .section-title, .sb-gville .menu-section__title, .sb-gville .menu-aside__title, .sb-gville .footer-store__name,
.sb-gville .page-header--custard .page-title {
	font-family: var(--gv-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0; color: var(--gv-ink);
}
.sb-gville .section-title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.sb-gville .kicker, .sb-gville .page-header--custard .kicker, .sb-gville .page-header--custard .kicker a { font-family: var(--gv-font-body); font-weight: 600; letter-spacing: .08em; color: var(--gv-berry); }
.sb-gville .page-header--custard .page-header__date, .sb-gville .page-header__sub, .sb-gville .post-meta { color: var(--gv-text); }
.sb-gville .breadcrumbs a, .sb-gville .page-header--custard .breadcrumbs a { color: var(--gv-berry); }
.sb-gville .breadcrumbs [aria-current], .sb-gville .breadcrumbs li + li::before, .sb-gville .page-header--custard .breadcrumbs [aria-current], .sb-gville .page-header--custard .breadcrumbs li + li::before { color: var(--gv-muted); }

/* Buttons */
.sb-gville .button, .sb-gville .dailyberry-modal__close {
	min-height: 54px; padding: 12px 24px; border: 0; border-radius: var(--gv-radius); box-shadow: none;
	font-family: var(--gv-font-body); font-weight: 400; font-size: 18px; text-transform: uppercase;
}
.sb-gville .button--primary, .sb-gville .dailyberry-modal__close { background: var(--gv-berry); color: #fff; }
.sb-gville .button--primary:hover, .sb-gville .button--primary:active, .sb-gville .dailyberry-modal__close:hover, .sb-gville .dailyberry-modal__close:active { background: var(--gv-berry-dark); color: #fff; transform: none; box-shadow: none; }
.sb-gville .button--outline { background: #fff; color: var(--gv-berry); box-shadow: inset 0 0 0 1px var(--gv-berry); }
.sb-gville .button--outline:hover { background: var(--sb-hover); color: var(--gv-berry-dark); }
.sb-gville .button--custard { background: var(--sb-tint); color: var(--gv-text); }
.sb-gville .button--custard:hover { background: var(--sb-tint-hover); color: var(--gv-text); }

/* Menu pages */
.sb-gville .menu-switch a { border: 1px solid var(--gv-line); border-radius: 8px; background: #fff; color: var(--gv-text); font-weight: 500; }
.sb-gville .menu-switch a:hover { border-color: var(--gv-berry); color: var(--gv-berry); }
.sb-gville .menu-switch a[aria-current] { background: var(--gv-berry); border-color: var(--gv-berry); color: #fff; }
.sb-gville .menu-jump { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--gv-line); top: var(--sb-header-h, 0px); transition: top .3s ease; }
/* The pill bar follows the header: under it while it shows, at the top of the window once it has slid away.
   Anchor offsets shrink with it so a section lands right under the bar either way (the header's own
   height is already in html's scroll-padding-top; see section 1). */
.sb-gville:has(.gv-header.is-hidden) .menu-jump { top: 0; }
.sb-gville .menu-section { scroll-margin-top: calc(var(--sb-jump-h, 3.5rem) + .75rem); }
html:has(body.sb-gville .gv-header.is-hidden) { scroll-padding-top: 16px; }
.sb-gville .menu-jump a { font-weight: 500; color: var(--gv-text); }
.sb-gville .menu-jump a:hover, .sb-gville .menu-jump a:focus-visible { background: var(--sb-hover); color: var(--gv-berry); }
.sb-gville .menu-jump a[aria-current] { background: var(--gv-berry); color: #fff; }
.sb-gville .menu-section, .sb-gville .menu-notes, .sb-gville .order-links__note, .sb-gville .menu-list__link, .sb-gville .notice, .sb-gville .lineup > div, .sb-gville .post-teaser {
	border: 1px solid var(--gv-line); border-radius: var(--gv-radius); background: #fff;
}
.sb-gville .notice--success { border-color: var(--gv-leaf); }
.sb-gville .notice--error { border-color: var(--gv-berry); }
.sb-gville .menu-notes li::before { color: var(--gv-berry); }
.sb-gville .menu-item { border-top-color: var(--gv-line); }
.sb-gville .menu-item__name { font-weight: 600; color: var(--gv-text); }
.sb-gville .menu-item__price, .sb-gville .menu-item__prices dd { font-weight: 600; color: var(--gv-berry); }
.sb-gville .menu-item__choices dt { color: var(--gv-leaf); }
.sb-gville .menu-sizes { background: var(--sb-tint); color: var(--gv-text); border-radius: 8px; font-weight: 600; }
.sb-gville .menu-aside { background: var(--sb-band); color: var(--gv-text); border-radius: var(--gv-radius); }
.sb-gville .menu-section__note, .sb-gville .menu-footer { border-color: var(--gv-line); border-style: solid; }
.sb-gville .menu-section--compact .menu-item { border-bottom-color: var(--gv-line); }
.sb-gville .flag--nuts { background: var(--sb-tint); color: var(--gv-text); }
.sb-gville .menu-list__link { font-weight: 500; font-size: 18px; color: var(--gv-text); }
.sb-gville .menu-list__link:hover { border-color: var(--gv-berry); color: var(--gv-berry); transform: none; }
.sb-gville .menu-list__type, .sb-gville .order-links__subtitle { font-family: var(--gv-font-body); }
.sb-gville .order-links__subtitle { color: var(--gv-berry); font-weight: 600; letter-spacing: .08em; }

/* Daily Berry: lineup cards, calendar, flavor dialog (the plugin's markup, this look) */
.sb-gville .lineup > div { padding: 1.25rem 1.5rem; }
.sb-gville .dailyberry-today__label, .sb-gville .dailyberry-soup__label, .sb-gville .dailyberry-special__label {
	font-family: var(--gv-font-body); font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gv-text);
}
.sb-gville .dailyberry-today__name, .sb-gville .dailyberry-soup__name, .sb-gville .dailyberry-special__title {
	font-family: var(--gv-font-body); font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--gv-berry);
}
.sb-gville .dailyberry-today__desc, .sb-gville .dailyberry-soup__desc, .sb-gville .dailyberry-special__desc { color: var(--gv-muted); }
.sb-gville .dailyberry-badge { font-family: var(--gv-font-body); background: var(--sb-tint); color: var(--gv-text); }
.sb-gville .dailyberry-badge--out { background: var(--gv-ink); color: #fff; }
.sb-gville .dailyberry-cal-wrap { padding: 1rem; border: 1px solid var(--gv-line); border-radius: 8px; background: #fff; }
.sb-gville .dailyberry-cal-nav__title { font-size: 20px; font-weight: 700; color: var(--gv-ink); }
.sb-gville .dailyberry-cal-nav__link { display: inline-block; padding: .45em 1.1em; border-radius: 8px; background: var(--gv-berry); color: #fff; font-weight: 600; text-decoration: none; }
.sb-gville .dailyberry-cal-nav__link:hover { background: var(--gv-berry-dark); color: #fff; }
.sb-gville .dailyberry-cal th { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gv-muted); border-color: var(--gv-line); }
.sb-gville .dailyberry-cal__day, .sb-gville .dailyberry-cal-list__day { border-color: var(--gv-line); }
.sb-gville .dailyberry-cal__date { font-size: .8rem; color: var(--gv-muted); text-align: center; }
.sb-gville .dailyberry-cal__day--today, .sb-gville .dailyberry-cal-list__day--today { box-shadow: inset 0 0 0 2px var(--gv-berry); background: var(--sb-tint); }
.sb-gville a.dailyberry-flavor-link { color: var(--gv-berry); font-weight: 600; text-decoration: none; }
.sb-gville .dailyberry-cal-print__link { color: var(--gv-berry); }
.sb-gville .dailyberry-modal { border: 1px solid var(--gv-line); border-radius: var(--gv-radius); color: var(--gv-text); }
.sb-gville .dailyberry-modal__name { background: var(--sb-band); color: var(--gv-ink); font-family: var(--gv-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.sb-gville .dailyberry-modal__name::before { font-family: var(--gv-font-body); font-weight: 600; letter-spacing: .08em; color: var(--gv-berry); }
.sb-gville .dailyberry-modal__desc { color: var(--gv-muted); }

/* Forms: the contact form in the design's layout (first/last, email/confirm, comments) */
.sb-gville .contact-form form { display: grid; gap: 16px; }
.sb-gville .form-group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sb-gville .form-group__label, .sb-gville .form-field > label { font: 500 14px/1.43 var(--gv-font-body); color: #112337; }
.sb-gville .form-req { margin-left: .25em; font-size: 12px; font-weight: 500; color: #c02b0a; }
.sb-gville .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5%; }
.sb-gville .form-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sb-gville .form-field--hint > label { font-size: 13px; font-weight: 400; color: var(--gv-muted); }
.sb-gville .form-field__desc, .sb-gville .form-field__counter { margin: 0; font-size: 13px; color: var(--gv-muted); }
.sb-gville .form-field input, .sb-gville .form-field textarea {
	min-height: 38px; height: 38px; padding: 0 12px; width: 100%;
	border: 1px solid #686e77; border-radius: 3px; background: #fff;
	font: 400 14px/1.4 var(--gv-font-body); color: var(--gv-text);
}
.sb-gville .form-field textarea { height: 192px; min-height: 192px; padding: 8px 12px; resize: vertical; }
.sb-gville .form-field input:focus-visible, .sb-gville .form-field textarea:focus-visible { border-color: var(--gv-berry); outline: 2px solid var(--gv-berry); outline-offset: 0; }
.sb-gville .form-field--error input, .sb-gville .form-field--error textarea { border-color: #c02b0a; }
.sb-gville .form-error { font-size: 13px; font-weight: 500; color: #c02b0a; }
.sb-gville .form-actions { margin: 0; }
.sb-gville .form-actions .button { min-height: 38px; padding: 0 16px; border-radius: 3px; font-size: 14px; font-weight: 500; text-transform: none; }
.sb-gville .contact-form form.is-sent .notice { margin: 0; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Header: logo left, menu button right, nav drops down */
	.gv-header__inner { grid-template-columns: auto 1fr; min-height: 80px; gap: 1rem; }
	.gv-header__logo { order: 1; justify-self: start; }
	.sb-gville .gv-header .site-logo__img, .sb-gville .gv-header.is-scrolled .site-logo__img { height: 60px; }
	.gv-header__toggle { display: inline-flex; order: 2; justify-self: end; background: #fff; border: 1px solid var(--gv-ink); border-radius: var(--gv-radius); color: var(--gv-ink); font-weight: 500; }
	.gv-header__contact--bar { display: none; }
	.gv-header__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: .5rem var(--gv-gutter) 1.5rem; background: #fff; border-bottom: 1px solid var(--gv-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .08); }
	.gv-header__nav.is-open { display: block; }
	.gv-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.gv-menu a { padding: 14px 0; border-bottom: 1px solid var(--gv-line); font-size: 18px; }
	.gv-header__contact--menu { display: flex; flex-wrap: wrap; gap: 1rem 28px; margin-top: 1.25rem; }

	.gv-hero__inner { padding: 300px 0; }
	.gv-location { padding-top: 75px; }
	.gv-location__grid { padding-bottom: 50px; }
	.gv-menus { padding-top: 0; }
	.gv-order { padding: 50px 0; background-position: 0 0; }
	.gv-split__grid { padding-bottom: 50px; }
	.gv-split__copy { padding: 10px; }
	.gv-catering { padding-bottom: 0; }
	.gv-flavors { padding: 50px 0; }
	.gv-contact { padding: 50px 0; }
	.sb-gville .contact-form { max-width: 90%; }
}
@media (max-width: 767px) {
	/* The header covers the top of the hero, so leave a little collage showing above the headline box. */
	.gv-hero__inner { padding: calc(var(--sb-header-h, 80px) + 60px) 0 100px; }
	.gv-hero__title { width: 92%; padding: .15em .4em; }
	.gv-location { padding-top: 50px; }
	.gv-location .gv-h2 { padding-bottom: 30px; }
	.gv-location__grid { grid-template-columns: 1fr; }
	.gv-menus__photos { grid-template-columns: 1fr; }
	.gv-menus__buttons { grid-template-columns: 1fr; justify-items: stretch; }
	.gv-menus__buttons .gv-button { width: 100%; }
	.gv-split__grid { grid-template-columns: 1fr; gap: 30px; }
	.gv-split__copy { gap: 30px; }
	.gv-flavors__photos { grid-template-columns: repeat(2, 1fr); }
	.gv-stack { gap: 30px; }
	.sb-gville .contact-form { max-width: 100%; }
	.sb-gville .form-row { grid-template-columns: 1fr; gap: 12px; }
	.sb-gville .footer-store__name { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.gv-button, .sb-gville .site-header.gv-header { transition: none; }
	.sb-gville .site-header.gv-header.is-hidden { transform: none; }
}
@media print {
	.gv-hero, .gv-contact, .gv-map { display: none !important; }
}