/* ============================================================================
   Valentines — brand layer

   Loaded after theme.css. theme.css keeps the platform's commerce components
   (cart, checkout, product, quote…); this file carries the Valentines look:
   the teal weave header, torn-paper section edges, brick and confetti bands,
   and the Bemio / Bliss / Kaoly type stack from the original site.
   ============================================================================ */

@font-face { font-family: 'Bliss'; src: url('fonts/bliss-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bliss'; src: url('fonts/bliss-bold.woff') format('woff'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'Bemio'; src: url('fonts/bemio.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kaoly'; src: url('fonts/kaoly.woff') format('woff'); font-display: swap; }

/* ── Tokens ───────────────────────────────────────────────── */
:root {
    --v-red: #DE4444;
    --v-red-dark: #CB4646;
    --v-teal: #69BABF;
    --v-teal-dark: #3CA4AA;
    --v-teal-light: #8ACCD0;
    --v-teal-line: #C4E6E8;
    --v-brown: #5A4C42;
    --v-charcoal: #393532;
    --v-cream: #EFEBE2;
    --v-white: #FFFFFF;
    --v-yellow: #F4CE67;
    --v-pink: #F7AABB;

    --font-display: 'Bemio', 'Arial Black', sans-serif;
    --font-script: 'Kaoly', 'Brush Script MT', cursive;
    --font-body: 'Bliss', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-display);

    /* The platform's brand tokens, pointed at the Valentines palette. Settings → Appearance
       can still override these from layout/theme.liquid. */
    --brand: var(--v-teal);
    --brand-accent: var(--v-red);
    --color-bg: var(--v-cream);
    --color-text: var(--v-brown);

    --v-edge: 30px;
    --v-band-pad: clamp(3.5rem, 8vw, 6.5rem);
}

body { font-family: var(--font-body); font-size: 1.0625rem; background: var(--v-cream); color: var(--v-brown); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }

/* The platform wraps each top-level block in a centred container; Valentines pages are
   built from full-width bands, so the page wrapper opts out. */
.site-main > .v-page { max-width: none; padding-inline: 0; }

.v-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.v-narrow { max-width: 900px; }

/* ── Type ─────────────────────────────────────────────────── */
.v-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 2.7rem); line-height: 1.15; margin-bottom: 1rem; }
.v-kicker { font-family: var(--font-display); font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.v-script { font-family: var(--font-script); font-size: clamp(2rem, 4.5vw, 2.5rem); line-height: 1.25; }
.v-lead { font-size: 1.125rem; line-height: 1.5; }
.v-lead + .v-lead { margin-top: 1rem; }
.v-center { text-align: center; }
.v-center .v-lead { margin-inline: auto; }

/* Red banner block used for page titles ("Join the Valentines team today!") */
.v-flag {
    display: inline-block;
    background: var(--v-red);
    color: var(--v-white);
    font-family: var(--font-script);
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    line-height: 1.25;
    padding: 1rem 1.5rem;
    text-align: center;
    max-width: 100%;
}

/* ── Buttons ──────────────────────────────────────────────── */
.v-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 11rem;
    padding: 0.6rem 1.5rem;
    border: 0;
    border-radius: 999px;
    font: 700 1.0625rem/1.75 var(--font-body);
    color: var(--v-white);
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}
.v-btn:hover { transform: translateY(-1px); }
.v-btn--teal { background: var(--v-teal); }
.v-btn--teal:hover { background: var(--v-teal-dark); }
.v-btn--red { background: var(--v-red); }
.v-btn--red:hover { background: var(--v-red-dark); }
.v-btn--small { min-width: 0; padding: 0.35rem 1.1rem; font-size: 0.9375rem; }
.v-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.v-center .v-actions { justify-content: center; }

/* Platform buttons pick up the pill shape too. */
.btn, button[type="submit"], .product-info button, .not-found a { border-radius: 999px; font-family: var(--font-body); font-weight: 700; }

/* ── Bands & torn edges ───────────────────────────────────── */
.v-band { position: relative; padding-block: var(--v-band-pad); }
.v-band--flush { padding-block: 0; }
.v-band--cream { background-color: var(--v-cream); color: var(--v-brown); }
.v-band--charcoal { background-color: var(--v-charcoal); color: var(--v-white); }
.v-band--teal { background-color: var(--v-teal); color: var(--v-white); }
.v-band--white { background-color: var(--v-white); color: var(--v-brown); }
.v-band--bricks { background: var(--v-charcoal) url('img/bricks.webp') center / 1400px auto repeat; color: var(--v-white); }
.v-band--confetti { background: var(--v-teal) url('img/confetti.webp') center / cover no-repeat; color: var(--v-white); }
.v-band--confetti-dark { background: var(--v-charcoal) url('img/confetti-dark.webp') center / cover no-repeat; color: var(--v-white); }
.v-band--promo { background: var(--v-teal) url('img/promo-bg.webp') center / cover no-repeat; color: var(--v-white); }
.v-band--recipes { background: var(--v-cream) url('img/recipes-bg.webp') center / cover no-repeat; }

.v-torn-top::before,
.v-torn-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--v-edge);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}
.v-torn-top::before { top: calc(1px - var(--v-edge)); }
.v-torn-bottom::after { bottom: calc(1px - var(--v-edge)); }
.v-torn-bottom { z-index: 1; }

.v-band--cream.v-torn-top::before { background-image: url('img/breaker-top-cream.svg'); }
.v-band--cream.v-torn-bottom::after { background-image: url('img/breaker-bottom-cream.svg'); }
.v-band--charcoal.v-torn-top::before { background-image: url('img/breaker-top-charcoal.svg'); }
.v-band--charcoal.v-torn-bottom::after { background-image: url('img/breaker-bottom-charcoal.svg'); }
.v-band--teal.v-torn-top::before { background-image: url('img/breaker-top-teal.svg'); }
.v-band--teal.v-torn-bottom::after { background-image: url('img/breaker-bottom-teal.svg'); }
.v-band--white.v-torn-top::before { background-image: url('img/breaker-top-white.svg'); }
.v-band--white.v-torn-bottom::after { background-image: url('img/breaker-bottom-white.svg'); }
/* The brick edge is a painted image (2400×94): show all of it, full width, at its own proportions. */
.v-band--bricks.v-torn-top::before {
    background-image: url('img/brick-top.webp');
    background-size: 100% 100%;
    height: calc(100vw * 94 / 2400);
    top: calc(1px - 100vw * 94 / 2400);
}

/* Wide photo strip between bands */
.v-photo { display: block; width: 100%; height: clamp(220px, 32vw, 350px); object-fit: cover; }

/* ── Split rows (image + copy) ────────────────────────────── */
.v-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.v-split + .v-split { margin-top: 3.5rem; }
.v-split-media { display: flex; justify-content: center; }
.v-split-media img { width: 100%; max-width: 540px; height: auto; }
.v-split-copy { text-align: center; }
.v-split-copy .v-lead { max-width: 34rem; margin-inline: auto; }

@media (min-width: 768px) {
    .v-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .v-split-copy { text-align: left; }
    .v-split-copy .v-lead { margin-inline: 0; }
    .v-split-copy .v-actions { justify-content: flex-start; }
    /* Copy comes first in the markup, so the image sits on the right; --flip puts it on the left. */
    .v-split--flip .v-split-media { order: -1; }
}
@media (max-width: 767px) {
    .v-split-media { order: -1; }
    .v-split-copy .v-actions { justify-content: center; }
}

/* ── Header ───────────────────────────────────────────────── */
.v-header {
    position: sticky;
    top: 0;
    z-index: 100;
    color: var(--v-white);
    /* The see-through tear is the bottom ~75px of the 2400×222 weave image: 75/2400 of the
       viewport where the image is sized by width, and roughly 26px on phones. */
    --v-header-tear: max(calc(100vw * 75 / 2400), 26px);
}
/* The weave is drawn on a layer that hangs the torn edge *below* the header, over the top
   of the page, so the header's own box (and its centred row) is just the solid weave. */
.v-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(-1 * var(--v-header-tear));
    z-index: -1;
    background: url('img/weave-header.webp') center bottom / cover no-repeat;
    pointer-events: none;
}
/* Wide screens: stop the weave growing past its size at 1600px (148px tall, 50px tear).
   It keeps that height and stretches sideways instead (tiling shows seams, mirroring
   shows a chevron). */
@media (min-width: 1600px) {
    .v-header { --v-header-tear: 50px; }
    .v-header::before { background-size: 100% 148px; }
}
.v-header a { color: inherit; }

.v-header-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1600px;
    margin-inline: auto;
    /* The weave stays solid for ~2vw below the header box before its tears start (image
       rows 147–195 of 222), so the row is pushed down by about half that to sit centred in
       the solid weave rather than at the top of it. */
    padding: calc(0.4rem + clamp(10px, 1.2vw, 19px)) clamp(1rem, 3vw, 2.5rem) 0.3rem;
}
.v-logo { flex-shrink: 0; }
.v-logo img { height: 48px; width: auto; }

.v-nav { flex: 1; min-width: 0; }
.v-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.6rem; }
.v-nav a {
    font: 700 0.9375rem/2 var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 2px dashed transparent;
    padding-bottom: 1px;
}
.v-nav a:hover, .v-nav a[aria-current="page"] { border-bottom-color: var(--v-white); }

.v-header-actions { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; margin-left: auto; }
.v-order-now { display: inline-flex; transition: transform 160ms ease, filter 160ms ease; }
.v-order-now:hover { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(247, 170, 187, 0.8)); }
.v-order-now img { width: 125px; height: auto; }

/* The chosen restaurant, as on the old site: pin, name, phone. Click to change. */
.v-chosen {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 0; padding: 0.2rem 0.25rem; cursor: pointer;
    color: var(--v-white); text-align: left; font-family: var(--font-body);
}
.v-chosen[hidden] { display: none; }
.v-chosen img { width: 20px; height: auto; }
.v-chosen > span { display: grid; line-height: 1.25; }
.v-chosen-name { font-size: 0.875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; }
.v-chosen-phone { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.v-chosen:hover .v-chosen-name { text-decoration: underline; }
.v-chosen--drawer { margin: 0.25rem auto 0.5rem; }
.v-chosen--drawer .v-chosen-name, .v-chosen--drawer .v-chosen-phone { font-size: 0.9375rem; }

.v-cart { position: relative; display: inline-flex; padding: 0.25rem; }
.v-cart .icon { width: 24px; height: 24px; }
.v-cart .cart-count {
    position: absolute; top: -4px; right: -8px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px;
    background: var(--v-red); color: var(--v-white);
    font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* Mobile drawer: <details> so it works without JavaScript. */
.v-drawer { display: none; }
.v-drawer > summary { list-style: none; cursor: pointer; display: flex; padding: 0.35rem; }
.v-drawer > summary::-webkit-details-marker { display: none; }
.v-drawer > summary img { width: 36px; height: auto; }
.v-drawer-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    background: var(--v-teal);
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,0.25);
    z-index: 200;
}
.v-drawer-close { display: flex; justify-content: flex-end; }
.v-drawer-close button { background: none; border: 0; color: var(--v-white); font-size: 2rem; line-height: 1; cursor: pointer; }
.v-drawer-panel ul { margin-top: 0.5rem; }
.v-drawer-panel li { border-bottom: 2px dotted rgba(255,255,255,0.8); }
.v-drawer-panel li a { display: block; padding: 0.9rem 0.25rem; font: 700 1.2rem/1.4 var(--font-body); text-align: center; }
.v-drawer-panel .v-btn { width: 100%; margin-top: 1rem; }
.v-drawer-panel .v-btn:first-of-type { margin-top: 1.5rem; }

/* Squeeze before collapsing: drop the chosen-restaurant chip, then the nav. */
@media (max-width: 1439px) { .v-header-row { gap: 1rem; } .v-nav ul { gap: 0.25rem 1.1rem; } .v-header-actions > .v-chosen { display: none; } }
@media (max-width: 1199px) {
    .v-nav { display: none; }
    .v-drawer { display: block; }
}
@media (max-width: 599px) {
    .v-logo img { height: 38px; }
    .v-header-actions { gap: 0.6rem; }
    .v-order-now img { width: 100px; }
}

/* ── Restaurant picker ────────────────────────────────────── */
.v-picker {
    width: min(640px, calc(100vw - 2rem));
    /* dvh = the visible viewport on phones (100vh includes the space behind the browser bars). */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto;
    border: 0;
    border-radius: 8px;
    padding: 1.5rem clamp(1rem, 4vw, 2rem) 2rem;
    background: var(--v-cream);
    color: var(--v-brown);
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.v-picker::backdrop { background: rgba(57, 53, 50, 0.7); }
.v-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.v-picker-head .v-title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.25rem; }
.v-picker-close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: inherit; }
.v-picker-intro { margin-bottom: 1rem; }

.v-chooser { display: grid; gap: 0.75rem; }
.v-chooser-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
    background: var(--v-white); border-radius: 6px; padding: 1rem 1.25rem;
}
.v-chooser-name { display: grid; color: var(--v-brown); }
.v-chooser-name strong { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.v-chooser-name small { font-size: 0.875rem; opacity: 0.8; }
.v-chooser-name:hover strong { color: var(--v-red); }
.v-chooser-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Phones: compact rows so all five restaurants fit without the picker running off screen. */
@media (max-width: 599px) {
    .v-picker { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 1rem 0.9rem 1.1rem; }
    .v-picker-head .v-title { font-size: 1.4rem; }
    .v-picker-close { font-size: 1.75rem; }
    .v-picker-intro { font-size: 0.9375rem; margin-bottom: 0.6rem; }
    .v-chooser { gap: 0.5rem; }
    .v-chooser-row { padding: 0.6rem 0.75rem; gap: 0.4rem 0.75rem; flex-wrap: nowrap; }
    .v-chooser-name strong { font-size: 1.1rem; }
    .v-chooser-name small { display: none; }
    .v-chooser-actions { flex-wrap: nowrap; gap: 0.35rem; flex-shrink: 0; }
    .v-chooser-actions .v-btn--small { padding: 0.3rem 0.7rem; font-size: 0.8125rem; }
}

/* ── Announcement (replaces the old site's pop-up modal) ──── */
.v-announce {
    background: var(--v-red);
    color: var(--v-white);
    text-align: center;
    padding: 0.6rem 2.75rem 0.6rem 1rem;
    font-size: 0.95rem;
    position: relative;
}
.v-announce strong { font-family: var(--font-display); font-weight: 400; margin-right: 0.35rem; }
.v-announce a { color: var(--v-white); text-decoration: underline; font-weight: 700; margin-left: 0.35rem; }
.v-announce-close {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.v-footer { position: relative; z-index: 3; background: var(--v-charcoal); color: var(--v-white); padding: 3.5rem 0 2.5rem; }
.v-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(1px - var(--v-edge)); height: var(--v-edge);
    background: url('img/breaker-top-charcoal.svg') 0 0 / 100% 100% no-repeat;
}
.v-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.v-footer ul li { line-height: 2; }
.v-footer a { color: var(--v-white); }
.v-footer a:hover { text-decoration: underline; }
.v-footer-label { opacity: 0.75; }
.v-footer-brand { text-align: center; }
.v-footer-brand img { width: 160px; height: auto; margin: 0 auto 1.25rem; }
.v-footer-social { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.v-footer-social img { width: 26px; height: 26px; }
.v-footer-credit { margin-top: 1.25rem; font-size: 0.8rem; opacity: 0.75; }
@media (max-width: 767px) { .v-footer-grid { text-align: center; } }

/* Pages without a closing band still sit nicely on the footer. */
.site-main { padding-bottom: 0; }

/* ── Hero slider ──────────────────────────────────────────── */
.v-slider { position: relative; background: var(--v-charcoal); overflow: hidden; }
.v-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.v-slides::-webkit-scrollbar { display: none; }
.v-slide { flex: 0 0 100%; scroll-snap-align: start; }
.v-slide img { width: 100%; height: auto; max-height: 800px; object-fit: cover; aspect-ratio: 1920 / 1115; }
.v-slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.v-slider-dots button {
    width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--v-white);
}
.v-slider-dots button[aria-current="true"] { background: var(--v-teal); }

/* Page hero with a title over a photo */
.v-hero { position: relative; display: grid; place-items: center; min-height: clamp(260px, 42vw, 560px); overflow: hidden; background: var(--v-charcoal); }
.v-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-hero-content { position: relative; z-index: 1; text-align: center; padding: 2rem 1rem; display: grid; justify-items: center; gap: 0.35rem; }
.v-hero-content .v-actions { margin-top: 1rem; justify-content: center; }

/* ── Small boxes (homepage quick links) ───────────────────── */
.v-boxes { display: grid; grid-template-columns: 1fr; gap: 2.5rem 1.5rem; max-width: 420px; margin-inline: auto; }
@media (min-width: 600px) { .v-boxes { grid-template-columns: repeat(2, 1fr); max-width: none; } }
@media (min-width: 1024px) { .v-boxes { grid-template-columns: repeat(4, 1fr); } }
.v-box { position: relative; background: var(--v-white); color: var(--v-brown); display: flex; flex-direction: column; }
.v-box::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 16px;
    background: url('img/small-box-bottom.svg') 0 0 / 100% 100% no-repeat;
}
.v-box img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.v-box-body { padding: 1.25rem 1.25rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex: 1; }
.v-box-body h3 { font-size: 1.125rem; line-height: 1.3; max-width: 13rem; }
.v-box-body p { flex: 1; }

/* ── Video ────────────────────────────────────────────────── */
.v-video { max-width: 560px; margin: 2.5rem auto 0; aspect-ratio: 16 / 9; }
.v-video iframe { width: 100%; height: 100%; border: 0; }
.v-video-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.v-video-facade img { width: 100%; height: 100%; object-fit: cover; }
.v-video-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: #e00; }
.v-video-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -6px; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff; }
.v-video-facade:hover .v-video-play, .v-video-facade:focus-visible .v-video-play { background: #c00; }

/* ── Forms ────────────────────────────────────────────────── */
.v-form { max-width: 800px; margin: 2rem auto 0; text-align: left; }
.v-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .v-form-grid { grid-template-columns: 1fr 1fr; } .v-form-grid .v-field--wide { grid-column: 1 / -1; } }
.v-field label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.v-field--check label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.v-form input:not([type="checkbox"]):not([type="radio"]),
.v-form select,
.v-form textarea {
    width: 100%;
    background: var(--v-teal-light);
    border: 1px solid var(--v-teal-line);
    border-radius: 5px;
    color: var(--v-white);
    font: 1.0625rem/1.5 var(--font-body);
    padding: 0.55rem 0.95rem;
}
.v-form textarea { min-height: 200px; resize: vertical; }
.v-form ::placeholder { color: var(--v-white); opacity: 0.9; }
.v-form select option { color: var(--v-brown); }
.v-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--v-red); flex-shrink: 0; margin-top: 2px; }
.v-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.v-form-foot small { opacity: 0.85; }
.v-form button[type="submit"] { background: var(--v-red); color: var(--v-white); padding: 0.6rem 1.75rem; }
.v-form button[type="submit"]:hover { background: var(--v-red-dark); }
.v-form-message { max-width: 800px; margin: 1.5rem auto 0; padding: 1rem 1.25rem; border-radius: 8px; background: rgba(255,255,255,0.18); font-weight: 700; text-align: center; }
.v-form-message[data-form-error] { background: var(--v-red); }
.v-band--cream .v-form-message { background: var(--v-white); }
.v-band--cream .v-form input:not([type="checkbox"]):not([type="radio"]),
.v-band--cream .v-form select,
.v-band--cream .v-form textarea { background: var(--v-teal); }

/* ── Menu & prices ────────────────────────────────────────── */
.v-buffet { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .v-buffet { grid-template-columns: 1fr 2fr; gap: 3rem; } }
.v-buffet-intro { text-align: center; }
@media (min-width: 768px) { .v-buffet-intro { text-align: left; } }
.v-buffet-intro .v-kicker { display: block; margin-top: 0.35rem; }
.v-buffet-intro p { margin-top: 1rem; }
.v-price-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.v-price-card { color: var(--v-brown); }
.v-price-card h3 { font-size: 1.125rem; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--v-red); }
.v-price-card table { width: 100%; border-collapse: collapse; }
.v-price-card td { padding: 0.4rem 0; border-bottom: 1px dotted rgba(90, 76, 66, 0.35); vertical-align: top; }
.v-price-card tr:last-child td { border-bottom: 0; }
.v-price-card td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 1rem; }

.v-menu-links { display: grid; gap: 0.75rem; }
.v-menu-links a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Location cards ───────────────────────────────────────── */
.v-locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.v-location-card { background: var(--v-charcoal); color: var(--v-white); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.v-location-card h3 { font-size: 1.5rem; }
.v-location-card address { font-style: normal; opacity: 0.9; flex: 1; }
.v-location-card .v-actions { margin-top: 1rem; }
.v-location-card .v-btn { min-width: 0; flex: 1; }

.v-contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin-top: 2rem; }
.v-contact-row a { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; font-weight: 700; word-break: break-word; }
.v-contact-row img { width: 22px; height: 22px; }

.v-map { display: block; width: 100%; height: 380px; border: 0; }

/* ── Promotions ───────────────────────────────────────────── */
.v-promos { display: grid; gap: 3rem; }
.v-promo { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; background: var(--v-cream); color: var(--v-brown); padding: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 768px) { .v-promo { grid-template-columns: 2fr 3fr; gap: 3rem; } }
.v-promo img { width: 100%; height: auto; border-radius: 4px; }

/* ── Merch & recipes grids ────────────────────────────────── */
.v-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2rem 1.5rem; }
.v-merch { background: var(--v-charcoal); color: var(--v-white); display: flex; flex-direction: column; overflow: hidden; }
.v-merch img { width: 100%; aspect-ratio: 13 / 10; object-fit: cover; background: var(--v-white); }
.v-merch-body { padding: 1rem 1.25rem 1.25rem; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.v-merch-body h3 { font-size: 1.25rem; }
.v-merch-body p { font-size: 0.9375rem; line-height: 1.45; flex: 1; }
.v-merch-price { font-weight: 700; font-size: 1.125rem; color: var(--v-red); }

.v-recipe { display: block; background: var(--v-white); transition: transform 160ms ease, box-shadow 160ms ease; }
.v-recipe:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.v-recipe img { width: 100%; height: auto; }

/* Product cards inside Valentines bands */
.v-band .product-card { background: var(--v-white); color: var(--v-brown); padding: 0.75rem; }
.v-band .product-card h3 { font-family: var(--font-display); font-weight: 400; }

/* ── Terms ────────────────────────────────────────────────── */
.v-terms { max-width: 900px; margin-inline: auto; }
.v-terms h2 { font-size: 1.125rem; text-transform: uppercase; margin: 2rem 0 0.5rem; color: var(--v-red); }
.v-terms ul { list-style: disc; padding-left: 1.25rem; }
.v-terms li { margin-bottom: 0.4rem; }
.v-terms ol { list-style: lower-roman; padding-left: 2.5rem; margin-top: 0.4rem; }

/* ── Location picker (Menu & prices landing) ──────────────── */
.v-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.v-pick a {
    position: relative; display: grid; place-items: end start; min-height: 180px; overflow: hidden;
    color: var(--v-white); background: var(--v-charcoal);
}
.v-pick a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: transform 300ms ease, opacity 300ms ease; }
.v-pick a:hover img { transform: scale(1.05); opacity: 0.55; }
.v-pick span { position: relative; padding: 1rem 1.25rem; font-family: var(--font-display); font-size: 1.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.v-pick small { display: block; font-family: var(--font-body); font-size: 0.875rem; }

/* ── Commerce & system pages inside the brand ─────────────── */
.collection, .search-page, .cart-page, .checkout-page, .order-page, .quote-page, .blog-page, .blog-post, .not-found { color: var(--v-brown); }
.collection > h1, .search-page > h1, .blog-page > h1, .cart-page h1, .checkout-page h1 { font-family: var(--font-display); font-weight: 400; }
.not-found { text-align: center; padding-block: 5rem; }
.not-found h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.not-found p { margin-bottom: 1.5rem; }

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

/* Buffet menu board and takeaway menu pages */
.v-menu-board { display: block; max-width: 1100px; margin: 1.5rem auto 0; border-radius: 6px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.v-menu-board img { width: 100%; height: auto; }
.v-menu-pages { display: grid; gap: 2rem; max-width: 1100px; margin-inline: auto; }

/* Live cooking photo: takes the next price column beside the dinner prices, as on the old site. */
.v-buffet-image { align-self: start; width: 100%; height: auto; }
.v-footer-social a[hidden] { display: none; }
.v-switch { color: var(--v-teal-light); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Low-resolution artwork: never shown larger than its own pixels. */
.v-split-media img.v-img-lowres { max-width: 313px; }

/* ── Contact: restaurant finder (dropdown + map, as on the old site) ── */
.v-finder { display: grid; grid-template-columns: 1fr; background: var(--v-charcoal); color: var(--v-white); }
@media (min-width: 900px) { .v-finder { grid-template-columns: minmax(300px, 1fr) 2fr; } }
.v-finder-panel { padding: 1.75rem 1.5rem 2rem; }
.v-finder-panel .v-script { font-size: 2rem; }
.v-finder-panel select {
    width: 100%; margin: 1.25rem 0 1.5rem; padding: 0.85rem 1rem;
    border: 0; border-radius: 0; background: var(--v-white); color: var(--v-brown);
    font: 1.125rem/1.4 var(--font-display);
}
.v-finder-detail h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.v-finder-detail address { font-style: normal; margin: 0.35rem 0 1rem; opacity: 0.9; }
.v-finder-detail ul { display: grid; gap: 0.6rem; }
.v-finder-detail li { display: flex; align-items: center; gap: 0.6rem; }
.v-finder-detail li img { width: 20px; height: 20px; flex-shrink: 0; }
.v-finder-detail a { color: var(--v-white); word-break: break-word; }
.v-finder-detail a:hover { text-decoration: underline; }
.v-finder-map { min-height: 400px; position: relative; }
.v-finder-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v-finder-map iframe[hidden] { display: none; }
/* The drawer is teal, so its teal button needs to stand out. */
.v-drawer-panel .v-btn--teal { background: var(--v-white); color: var(--v-teal-dark); }
.v-drawer-panel .v-btn--teal:hover { background: var(--v-cream); }