/* ==========================================================================
   HUT Dining Buffet — v2 booking flow
   The journey guests knew on inline.app (party size, date, then every branch
   with its open sessions), rebuilt in this site's own dark/red skin.
   Scoped to .v2-* so nothing here can reach the v1 booking form.
   ========================================================================== */

/* Availability colours. Red is this brand's accent and is used for what the
   guest has CHOSEN and for what they CANNOT have; green means the session is
   open. The site's palette has no green, so it is defined here — a functional
   colour, not a decorative one. */
:root {
    /* Deep enough that the white time on it clears WCAG AA (4.6:1) — a brighter
       green looked better on a monitor and was 3.3:1, i.e. hard to read on a
       phone outdoors, which is where most of these bookings are made. */
    --v2-open:      #12873d;
    --v2-open-deep: #0f7a38;
    --v2-shut:      #e30613;
}

.v2-page { padding: 28px 0 80px; }
.v2-wrap { width: min(1120px, 92vw); margin: 0 auto; }

/* ---- brand header ---- */
.v2-banner {
    width: 100%;
    aspect-ratio: 1200 / 400;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
}
.v2-brand { padding: 22px 0 18px; border-bottom: 1px solid var(--sy-line); }
.v2-brand__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.v2-brand__name { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; margin: 0; letter-spacing: 0.01em; }
.v2-brand__tag { margin: 6px 0 0; color: var(--sy-muted); font-size: 0.95rem; }
.v2-brand__back { color: var(--sy-muted); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 7px; }
.v2-brand__back:hover { color: var(--sy-ink); }

/* ---- step 1: pickers ---- */
.v2-step-title { font-size: 1.32rem; font-weight: 700; margin: 30px 0 18px; }
.v2-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; align-items: end; }
.v2-picker-group { min-width: 0; }
.v2-picker-label { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 9px; }
.v2-picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-picker-row.has-highchair { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.v2-field {
    position: relative;
    display: block;
    width: 100%;
}
.v2-field select,
.v2-field .v2-fakefield {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--sy-washi);
    border: 1px solid var(--sy-line);
    border-radius: 6px;
    color: var(--sy-ink);
    font-family: var(--sy-sans);
    font-size: 0.95rem;
    padding: 12px 40px 12px 14px;
    line-height: 1.4;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s var(--sy-trans);
}
.v2-field select:focus,
.v2-field .v2-fakefield:focus-visible { outline: none; border-color: var(--sy-gold); }
.v2-field select:hover,
.v2-field .v2-fakefield:hover { border-color: rgba(255,255,255,0.3); }
.v2-field::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--sy-muted);
    border-bottom: 2px solid var(--sy-muted);
    transform: rotate(45deg);
    pointer-events: none;
}
.v2-field.is-open::after { margin-top: -2px; transform: rotate(225deg); }
.v2-hint { color: var(--sy-muted); font-size: 0.85rem; margin: 14px 0 0; }

/* ---- step 1: the date calendar panel ---- */
.v2-cal {
    margin-top: 18px;
    border: 1px solid var(--sy-line);
    border-radius: 8px;
    background: var(--sy-washi);
    padding: 20px 22px 24px;
}
.v2-cal[hidden] { display: none !important; }
.v2-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.v2-cal__month { min-width: 0; }
.v2-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.v2-cal__title { font-size: 1.05rem; font-weight: 700; text-align: center; flex: 1; }
.v2-cal__nav {
    background: transparent;
    border: 0;
    color: var(--sy-ink);
    font-size: 1.05rem;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
}
.v2-cal__nav:disabled { opacity: 0.25; cursor: default; }
.v2-cal__nav:not(:disabled):hover { background: rgba(255,255,255,0.07); }
.v2-cal__nav--ghost { visibility: hidden; }
.v2-cal__dow, .v2-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.v2-cal__dow span { text-align: center; font-size: 0.74rem; color: var(--sy-muted); padding-bottom: 8px; }
.v2-day {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sy-line);
    border-radius: 5px;
    background: transparent;
    color: var(--sy-ink);
    font-family: var(--sy-sans);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s var(--sy-trans);
}
.v2-day:hover:not(:disabled):not(.is-selected) { border-color: var(--sy-ink); }
.v2-day.is-selected { background: var(--v2-open); border-color: var(--v2-open); color: #fff; }
.v2-day:disabled { border-color: transparent; color: var(--sy-muted); opacity: 0.45; cursor: default; }
.v2-day--blank { border: 0; cursor: default; }
.v2-day__mark {
    position: absolute;
    top: 4px;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    color: var(--sy-gold);
    font-weight: 700;
}
.v2-day.is-selected .v2-day__mark { color: #fff; }

/* ---- step 1: the outlet list ---- */
.v2-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--sy-line); margin: 28px 0 0; }
.v2-tab {
    padding: 12px 2px 11px;
    font-size: 0.92rem;
    color: var(--sy-gold);
    border-bottom: 2px solid var(--sy-gold);
    font-weight: 600;
}

.v2-outlets { margin: 0; }
.v2-outlet {
    display: grid;
    /* The picture spans all three rows of the right-hand column: the words, the
       message, and the seatings. Unchanged to look at -- the seatings simply are
       not nested inside the words any more, which is what lets a phone give them
       the full width. */
    grid-template-columns: 284px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 22px;
    padding: 26px 14px;
    margin: 0 -14px;
    border-bottom: 1px solid var(--sy-line);
    border-radius: 8px;
    transition: background 0.18s var(--sy-trans);
}
.v2-outlet > .v2-outlet__img { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.v2-outlet > .v2-outlet__body,
.v2-outlet > .v2-outlet__msg,
.v2-outlet > .v2-slots { grid-column: 2; }
.v2-outlet:hover { background: rgba(255,255,255,0.03); }
.v2-outlet__img {
    aspect-ratio: 16 / 10;
    /* The whole picture, never a crop. `cover` filled the box by cutting the
       banner's sides off, which on artwork that carries the brand's own wordmark
       and branch list meant the part worth showing was the part discarded. It is
       contained instead, on black, so every card shows the same complete image and
       the letterbox reads as a frame rather than a mistake. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    border-radius: 6px;
}
.v2-outlet__body { min-width: 0; }

/* ---- a branch that books somewhere else (AEON Tebrau, on inline.app) ---- */
.v2-extoutlet {
    display: grid;
    grid-template-columns: 284px 1fr;
    gap: 22px;
    padding: 26px 14px;
    margin: 0 -14px;
    border-radius: 8px;
}
.v2-extoutlet__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid var(--sy-gold);
    border-radius: 5px;
    color: var(--sy-gold);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.18s var(--sy-trans);
}
.v2-extoutlet__cta:hover { background: var(--sy-gold); color: var(--sy-paper); }
@media (max-width: 640px) {
    .v2-extoutlet { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; margin: 0; }
    .v2-extoutlet .v2-outlet__img { aspect-ratio: 16 / 7; }
}


/* Map and WhatsApp, finishing the address. Above the chips on purpose: under them
   a thumb aiming for a seating was landing on the number instead. */
/* `.v2-outlet` in front on purpose: this row is a <p> and the last child of the
   card body, so site.css's `p:last-child { margin-bottom: 0 }` (0,1,1) outranked a
   bare class (0,1,0) and silently cancelled this gap for as long as it has existed.
   Two classes (0,2,0) beat it. */
.v2-outlet .v2-outlet__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 0 0 26px;
    font-size: 0.9rem;
}
.v2-outlet__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--sy-gold);
    white-space: nowrap;
}
.v2-outlet__link:hover { text-decoration: underline; }
.v2-outlet__name { font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; }
.v2-outlet__addr { color: var(--sy-muted); font-size: 0.92rem; margin: 0 0 6px; }
.v2-outlet__msg { font-size: 0.92rem; margin: 0 0 12px; color: var(--sy-ink-soft); }
.v2-outlet__msg--off { color: var(--sy-muted); }
/* One row of seatings that slides sideways, at EVERY width. Eleven of them
   wrapped into four rows on a phone and two or three on a desktop, which on a
   list of branches meant the times took more of the page than the branches did.
   The chip cut off at the right edge is the affordance: it reads as a strip. */
.v2-slots {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.v2-slots::-webkit-scrollbar { display: none; }
/* The loading / fully-booked line shares this box and must still wrap rather
   than run off the side of a nowrap row. */
.v2-slots .v2-skeleton { flex: 1 1 100%; white-space: normal; }
.v2-slots[hidden] { display: none !important; }

.v2-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex: 0 0 auto;
    min-width: 72px;
    padding: 7px 12px;
    scroll-snap-align: start;
    border: 1px solid var(--v2-open);
    border-radius: 5px;
    background: var(--v2-open);
    color: #fff;
    font-family: var(--sy-sans);
    cursor: pointer;
    line-height: 1.25;
    transition: all 0.18s var(--sy-trans);
}
.v2-chip[hidden] { display: none !important; }
.v2-chip:hover { background: var(--v2-open-deep); border-color: var(--v2-open-deep); transform: translateY(-1px); }
.v2-chip__time { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; }
.v2-chip__note { font-size: 0.62rem; opacity: 0.92; letter-spacing: 0.04em; text-transform: uppercase; }
.v2-chip--off {
    background: var(--v2-shut);
    border-color: var(--v2-shut);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.85;
}
.v2-chip--off:hover { background: var(--v2-shut); border-color: var(--v2-shut); transform: none; }
.v2-skeleton { color: var(--sy-muted); font-size: 0.9rem; padding: 26px 0; }
.v2-note { text-align: center; color: var(--sy-ink-soft); font-size: 0.95rem; padding: 34px 0 0; line-height: 2; }

/* ---- house rules dialog ---- */
.v2-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 16px;
    /* Above the sticky site header (z-index 100) — otherwise the nav bar sits
       on top of the dimmed backdrop. */
    z-index: 200;
}
.v2-modal[hidden] { display: none !important; }
.v2-modal__panel {
    background: var(--sy-washi);
    border: 1px solid var(--sy-line);
    border-radius: 10px;
    width: min(680px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.v2-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sy-line);
}
.v2-modal__title { font-size: 1.12rem; font-weight: 700; margin: 0; }
.v2-modal__close { background: transparent; border: 0; color: var(--sy-muted); font-size: 1.15rem; cursor: pointer; padding: 4px 6px; }
.v2-modal__close:hover { color: var(--sy-ink); }
.v2-modal__body { padding: 20px 22px; overflow-y: auto; font-size: 0.92rem; line-height: 1.75; color: var(--sy-ink-soft); }
.v2-modal__foot { padding: 16px 22px 20px; border-top: 1px solid var(--sy-line); }
.v2-modal__note { text-align: center; color: var(--sy-gold); font-size: 0.84rem; margin: 0 0 12px; }

/* ---- step 2: contact form ---- */
.v2-form-title { text-align: center; font-size: clamp(1.25rem, 3vw, 1.85rem); font-weight: 700; margin: 6px 0 30px; }
.v2-form-grid { display: grid; grid-template-columns: 330px 1fr; gap: 34px; align-items: start; }
.v2-summary { border: 1px solid var(--sy-line); border-radius: 8px; overflow: hidden; background: var(--sy-washi); position: sticky; top: 96px; }  /* clears the sticky site header */
.v2-summary__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.v2-summary__name { font-size: 1.16rem; font-weight: 700; margin: 0; padding: 18px 20px; }
.v2-summary__facts { border-top: 1px solid var(--sy-line); padding: 16px 20px 18px; display: grid; gap: 11px; }
.v2-summary__row { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; }
.v2-summary__row i { color: var(--sy-gold); width: 18px; text-align: center; }
.v2-summary__modify { margin-left: auto; font-size: 0.85rem; color: var(--sy-muted); }
.v2-summary__modify:hover { color: var(--sy-ink); }

.v2-panel { border: 1px solid var(--sy-line); border-radius: 8px; background: var(--sy-washi); padding: 26px 28px 30px; }
.v2-panel__title { font-size: 1.16rem; font-weight: 700; margin: 0 0 22px; }
.v2-panel__sep { border: 0; border-top: 1px solid var(--sy-line); margin: 24px 0; }
.v2-group { margin-bottom: 20px; }
.v2-group__label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 9px; }
.v2-group__label .req { color: var(--sy-sakura); }
.v2-input {
    width: 100%;
    background: var(--sy-paper);
    border: 1px solid var(--sy-line);
    border-radius: 6px;
    color: var(--sy-ink);
    font-family: var(--sy-sans);
    font-size: 0.95rem;
    padding: 12px 14px;
}
.v2-input:focus { outline: none; border-color: var(--sy-gold); }
.v2-input::placeholder { color: var(--sy-muted); }
textarea.v2-input { resize: vertical; min-height: 104px; line-height: 1.6; }
.v2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v2-count { text-align: right; color: var(--sy-muted); font-size: 0.78rem; margin: 6px 0 0; }

.v2-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v2-tag {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--sy-line);
    border-radius: 6px;
    background: var(--sy-paper);
    color: var(--sy-ink-soft);
    font-family: var(--sy-sans);
    font-size: 0.9rem;
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.16s var(--sy-trans);
}
.v2-tag:hover { border-color: rgba(255,255,255,0.32); color: var(--sy-ink); }
/* Chosen = the brand red, at the same weight as the selected calendar day. The
   old 12%-tint border was easy to miss on a phone in daylight. */
.v2-tag.is-on {
    border-color: var(--v2-open);
    background: var(--v2-open);
    color: #fff;
    font-weight: 600;
}
.v2-tag.is-on .v2-tag__sub { color: rgba(255,255,255,0.82); }
.v2-tag input { display: none; }
.v2-tag__sub { display: block; font-size: 0.78rem; color: var(--sy-muted); margin-top: 2px; }

.v2-agree { font-size: 0.88rem; color: var(--sy-ink-soft); margin: 22px 0 14px; text-align: center; }
.v2-agree a { color: var(--sy-gold); text-decoration: underline; }
.v2-actions { display: grid; gap: 12px; margin-top: 4px; }
/* The shared .sy-btn is this brand's red. Inside the v2 flow the primary button
   is always "yes, go ahead" — accept the rules, book the table — so it takes the
   go colour here. Scoped to v2: v1's Confirm Reservation button is untouched. */
.v2-page .sy-btn:not(.sy-btn--ghost):not(.sy-btn--light),
.v2-modal .sy-btn:not(.sy-btn--ghost):not(.sy-btn--light) {
    background: var(--v2-open);
    border-color: var(--v2-open);
    color: #fff;
}
.v2-page .sy-btn:not(.sy-btn--ghost):not(.sy-btn--light):hover,
.v2-modal .sy-btn:not(.sy-btn--ghost):not(.sy-btn--light):hover {
    background: var(--v2-open-deep);
    border-color: var(--v2-open-deep);
}
.v2-page .sy-btn:disabled,
.v2-modal .sy-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.v2-alert {
    border: 1px solid var(--sy-sakura);
    border-left-width: 3px;
    border-radius: 6px;
    background: rgba(227,6,19,0.1);
    padding: 13px 16px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.v2-alert[hidden] { display: none !important; }
.v2-alert ul { margin: 8px 0 0; padding-left: 20px; }
.v2-alert--warn { border-color: var(--sy-gold); background: rgba(216,176,102,0.1); }

.v2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 210;
    text-align: center;
    color: var(--sy-ink);
}
.v2-overlay[hidden] { display: none !important; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .v2-pickers { grid-template-columns: 1fr; }
    .v2-cal__months { grid-template-columns: 1fr; gap: 26px; }
    .v2-form-grid { grid-template-columns: 1fr; }
    .v2-summary { position: static; }
}
@media (max-width: 640px) {
    .v2-wrap { width: min(1120px, 94vw); }
    /* Inline bleeds the banner to both edges on a phone; ours sat inside the
       wrap with 3vw of gutter each side. The wrap is 94vw here, so each gutter
       is exactly 3vw and the same vw basis makes the pull line up precisely.
       `width: auto` is load-bearing: with the inherited `width: 100%` these
       negative margins would widen the box past the viewport and scroll the
       page sideways, which is the bug already fixed once below. */
    .v2-banner { width: auto; margin-left: -3vw; margin-right: -3vw; border-radius: 0; }
    /* The desktop row bleeds 14px into the gutter for its hover surface; at
       phone width that bleed is wider than the gutter itself and the page
       scrolls sideways by 2px. */
    /* Option A: an 84px thumbnail with the branch beside it, and the seatings
       across the full width underneath -- instead of a 160px band of the same
       brand picture pushing every branch a screen apart. */
    .v2-outlet {
        grid-template-columns: 84px 1fr;
        column-gap: 12px;
        padding: 16px 0;
        margin: 0;
    }
    .v2-outlet > .v2-outlet__img {
        grid-column: 1;
        grid-row: 1;
        width: 84px;
        aspect-ratio: 1;
    }
    .v2-outlet > .v2-outlet__body { grid-column: 2; grid-row: 1; }
    .v2-outlet > .v2-outlet__msg,
    .v2-outlet > .v2-slots { grid-column: 1 / -1; }
    /* Zero, so ONE rule owns the space above the chips -- the meta row's own 6px.
       With 11px here as well the gap was 17px and neither number explained it. */
    .v2-outlet > .v2-slots { margin-top: 0; }
    .v2-outlet__name { font-size: 1.05rem; margin-bottom: 4px; }
    .v2-outlet__addr { font-size: 0.8rem; margin-bottom: 6px; }
    /* 6px: the same step the address leaves above this row, so on a phone the three
       lines of a branch sit on one rhythm instead of the seatings floating away.
       Three classes on purpose (0,3,0) -- the base gap is set with two, so a rule
       written with two would merely tie and be settled by source order, which
       differs between these seven sites; that is how the old `margin-bottom: 0`
       ended up live on two brands and dead on five. */
    .v2-outlet .v2-outlet__body .v2-outlet__meta { margin-bottom: 6px; font-size: 0.8rem; gap: 6px 14px; }
    .v2-picker-row { grid-template-columns: 1fr 1fr; }
    /* Three in a row cut the labels off on a phone: Highchairs takes the next line. */
    .v2-picker-row.has-highchair { grid-template-columns: 1fr 1fr; }
    .v2-tags { grid-template-columns: 1fr; }
    .v2-two { grid-template-columns: 1fr; }
    .v2-cal { padding: 16px 14px 20px; }
}

/* ---- menu (the posters, behind a branch picker, at the foot of the page) ---- */
.v2-menu { padding-top: 34px; border-top: 1px solid var(--sy-line); margin-top: 34px; }
.v2-menu .v2-step-title { margin-top: 0; }
.v2-field--menu { max-width: 580px; }
.v2-menu__pages { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
/* the explicit display above would otherwise defeat the hidden attribute */
.v2-menu__pages[hidden] { display: none !important; }
.v2-menu__page {
    width: 132px;
    padding: 0;
    border: 1px solid var(--sy-line);
    border-radius: 4px;
    background: var(--sy-washi);
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
    transition: border-color 0.18s var(--sy-trans), transform 0.18s var(--sy-trans);
}
.v2-menu__page:hover { border-color: var(--sy-gold); transform: translateY(-2px); }
/* Uniform boxes: these posters come in several aspect ratios, and left to their
   own heights the row reads as clutter. Anchored to the top because that is
   where each poster carries its tier name. */
.v2-menu__page img {
    width: 100%;
    aspect-ratio: 1 / 2.4;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.v2-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 220;
    overflow: hidden;
}
.v2-viewer[hidden] { display: none !important; }
.v2-viewer__scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 24px 16px 40px;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}
.v2-viewer__scroll img {
    display: inline-block;
    width: min(760px, 100%);
    height: auto;
    border-radius: 4px;
}
.v2-viewer__close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--sy-line);
    background: rgba(20,20,20,0.9);
    color: var(--sy-ink);
    font-size: 0.95rem;
    cursor: pointer;
}
.v2-viewer__close:hover { border-color: var(--sy-ink); }

@media (max-width: 640px) {
    .v2-menu__page { width: calc(50% - 7px); }
    .v2-field--menu { max-width: none; }
}

/* ---- option B on this brand ----
   Seven and eight branches, every one of them showing the SAME brand picture. It cost
   a row per branch on a phone and a 284px column on a desktop, and in neither place
   did it tell anyone which branch they were reading -- an identical picture cannot.
   The branch keeps the full width at every size. */
.v2-outlet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v2-outlet { grid-template-columns: 1fr; }
.v2-outlet > .v2-outlet__img { display: none; }
/* All three, not just the body: the base rule puts every one of them in column 2, and
   a child still asking for column 2 makes the grid grow an implicit second track --
   the picture would be gone and its empty column would not. */
.v2-outlet > .v2-outlet__body,
.v2-outlet > .v2-outlet__msg,
.v2-outlet > .v2-slots { grid-column: 1 / -1; }
/* the Inline branch carries the same picture, and loses it too, so the list reads as one */
.v2-extoutlet { grid-template-columns: 1fr; }
.v2-extoutlet .v2-outlet__img { display: none; }

/* ---- phone with a country picker ---- */
.v2-phone { position: relative; display: flex; gap: 8px; }
.v2-phone__cc {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--sy-line);
    border-radius: 6px;
    background: var(--sy-washi);
    color: var(--sy-ink);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.v2-phone__cc:hover { border-color: var(--sy-gold); }
.v2-phone__cc i { font-size: 0.7rem; color: var(--sy-muted); }
.v2-phone__flag { font-size: 1.15rem; line-height: 1; }
.v2-phone__dial { font-variant-numeric: tabular-nums; }
.v2-phone__num { flex: 1 1 auto; min-width: 0; }
.v2-phone__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px); left: 0;
    width: min(340px, 100%);
    background: var(--sy-washi);
    border: 1px solid var(--sy-line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    padding: 10px;
}
/* the explicit padding above would otherwise defeat the hidden attribute */
.v2-phone__panel[hidden] { display: none !important; }
.v2-phone__search {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--sy-line);
    border-radius: 6px;
    background: transparent;
    color: var(--sy-ink);
    font: inherit;
}
.v2-phone__list {
    list-style: none; margin: 8px 0 0; padding: 0;
    max-height: 260px; overflow-y: auto;
}
.v2-phone__list li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.93rem;
}
.v2-phone__list li:hover { background: rgba(255,255,255,0.06); }
.v2-phone__list li.is-on { background: rgba(255,255,255,0.09); }
.v2-phone__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-phone__code { color: var(--sy-muted); font-variant-numeric: tabular-nums; }
.v2-phone__none { margin: 10px 4px 2px; color: var(--sy-muted); font-size: 0.9rem; }
.v2-phone__none[hidden] { display: none !important; }
@media (max-width: 640px) {
    .v2-phone__panel { width: 100%; }
}

/* Sits under the branch list now, so the air belongs above it. */
.v2-hours {
    margin: 22px 0 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--sy-ink-soft);
}
.v2-hours i { color: var(--sy-gold); margin-right: 6px; }
.v2-hours__note { color: var(--sy-muted); font-size: 0.86rem; }