/* ==========================================================================
   Sushi Yoshi — v2 booking flow
   The journey guests knew on inline.app (party size, date, then every branch
   with its open sessions), rebuilt on this brand’s washi-and-gold ground.
   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 {
    /* Soft terracotta: the one attention colour, legible on both brands' dark grounds. */
    --v2-alert: #e08a6a;
    /* 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: 1920 / 768;   /* the artwork's real shape; 1200/400 cropped it */
    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-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(20,23,28,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; }

/* The standing "call us for a bigger party" line under the pickers. Deliberately
   quieter than the out-of-range prompt -- this is advice a guest may not need, that
   one is a guest who is stuck -- but the number itself is a link worth seeing. */
.v2-overflow-hint { margin: 14px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--sy-muted); }
.v2-overflow-hint a {
    color: var(--sy-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(216, 176, 102, 0.45);
    white-space: nowrap;
}
.v2-overflow-hint a:hover { color: var(--sy-gold-light); }

/* ---- 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(20,23,28,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; }
/* The card's bottom rule separates one branch from the NEXT one, so the last card
   must not draw it: the following section (Menu, or Restaurant information when a
   brand has no menu images) opens with its own top rule, and the two were landing
   34px apart as a pair of parallel lines with a gap between them. */
.v2-outlet:last-child { border-bottom: none; }
.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(20,23,28,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; }

/* Map and phone, under the branch's seatings. This brand's footer still carries
   the Visit and Hours columns, so the hours are not repeated here -- only the two
   things that belong to the branch you are looking at. */
/* Finishes the address, with real air before the session chips: under them, a
   thumb aiming for a seating was landing on a phone call 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; }
/* An out-of-range party is the one thing standing between a guest and a booking, and
   as plain body text it read as a caption -- same size, same colour, same weight as
   everything around it -- so nobody noticed it. It is a prompt now. */
.v2-outlet__msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 11px 13px;
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--sy-ink);
    background: rgba(224, 138, 106, 0.13);
    border: 1px solid rgba(224, 138, 106, 0.42);
    border-left: 3px solid var(--v2-alert);
    border-radius: 6px;
}
/* The explicit display above would otherwise defeat the hidden attribute. */
.v2-outlet__msg[hidden] { display: none !important; }
.v2-outlet__msg::before {
    content: "!";
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--v2-alert);
    color: #231a16;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 19px;
    text-align: center;
}
/* A branch that simply is not open that day is information, not an obstacle. Same shape
   so the card does not jump between the two, but quiet. */
.v2-outlet__msg--off {
    color: var(--sy-ink-soft);
    background: rgba(20,23,28,0.04);
    border-color: var(--sy-line);
    border-left-color: var(--sy-muted);
}
.v2-outlet__msg--off::before {
    content: "i";
    background: var(--sy-muted);
    color: var(--sy-washi);
}
/* 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 */
/* Matches the banner file (1920x768). The old 16/10 forced a 2.5:1 image into a
   1.6:1 box, so `cover` ate both sides and the brand mark inside it read as a
   square crop. With the true ratio nothing is cropped and the height simply
   follows the width at every screen size. */
.v2-summary__img { aspect-ratio: 1920 / 768; background-size: cover; background-position: center; }
.v2-summary__name { font-size: 1.16rem; font-weight: 700; margin: 0; padding: 18px 20px 4px; }
/* The brand's second line, same lockup as the site header, so the summary confirms
   WHICH restaurant as well as which branch. */
.v2-summary__tagline { margin: 0; padding: 0 20px 16px; font-size: 0.82rem; letter-spacing: 0.04em;
                       text-transform: uppercase; color: var(--sy-muted); }
/* An address wraps, so it must not be forced onto the one line the other facts use. */
.v2-summary__row--addr { align-items: flex-start; line-height: 1.45; }
.v2-summary__row--addr i { margin-top: 2px; }
.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(20,23,28,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; }
    .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; }
/* Shown in place of the branch select when there is only one branch. */
.v2-menu__outlet { margin: 0; font-size: 1rem; font-weight: 600; color: var(--sy-muted); }

/* The party-cap notice. NOT informational: the party is no longer trimmed to fit,
   so this says why the booking cannot go ahead as asked. */
.v2-partynote {
    display: block;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--sy-gold);
    background: rgba(20,23,28,0.04);
    border-radius: 4px;
    font-size: 0.93rem;
    line-height: 1.5;
}
/* the explicit display above would otherwise defeat the hidden attribute */
.v2-partynote[hidden] { display: none !important; }
/* A party that cannot be booked online is a stop, not a tip. Same prompt treatment as
   the per-branch message above, so both ways of being out of range look alike. */
.v2-partynote.is-blocking {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--sy-ink);
    background: rgba(224, 138, 106, 0.13);
    border: 1px solid rgba(224, 138, 106, 0.42);
    border-left: 3px solid var(--v2-alert);
}
.v2-partynote.is-blocking::before {
    content: "!";
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--v2-alert);
    color: #231a16;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 19px;
    text-align: center;
}
/* One shelf of posters, scrolled sideways, exactly how inline presents the same
   menus: every thumbnail shares a HEIGHT and takes whatever width its own ratio
   gives it. Height is the common baseline rather than width, which is what lets a
   1:3 menu page and a near-square a-la-carte sheet sit together without either
   being cropped or letterboxed. */
.v2-menu__pages {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin-top: 20px;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
/* the explicit display above would otherwise defeat the hidden attribute */
.v2-menu__pages[hidden] { display: none !important; }
.v2-menu__page {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
    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); }
/* the bars contain leaves are the card itself, so keep them quiet */
/* Fixed height, natural width: nothing is cropped and nothing is letterboxed,
   because the box IS the image's own shape. No object-fit and no aspect-ratio
   on purpose -- both would reintroduce a box the image has to be squeezed into. */
.v2-menu__page img {
    height: 400px;
    width: auto;
    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; }
/* Opens FITTED: the whole poster on screen at once. It used to open at full width
   with height:auto, so a 1600x4825 menu came out ~1177px tall on a phone and the
   guest only ever saw its top -- which reads as being zoomed in on a corner. */
.v2-viewer__scroll {
    position: absolute;
    inset: 0;
    padding: 24px 16px 40px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.v2-viewer__scroll img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 4px;
    cursor: zoom-in;
}
/* Tap to read. This toggle is not a nicety: the site sets user-scalable=no, so
   pinch-zoom cannot rescue a fitted poster and these menus are dense. The width
   floor is what makes the text legible on a phone; the view then scrolls both ways. */
/* How an omakase card OPENS: filled to the width of the screen and scrolling
   downwards, because these sheets are 1:2.7 and fitting one whole into a landscape
   viewport leaves the courses too small to read -- which is exactly what the
   restaurant reported. Capped at 860px so a desktop does not blow a 552px-wide
   scan up into mush, and centred. Tapping still swaps to the whole-sheet view. */
.v2-viewer.is-fill .v2-viewer__scroll {
    display: block;
    overflow: auto;
    text-align: center;
    padding: 24px 12px 56px;
}
.v2-viewer.is-fill .v2-viewer__scroll img {
    width: min(100%, 860px);
    max-width: none;
    max-height: none;
    height: auto;
    /* The base rule makes this a block, and text-align cannot centre a block --
       it opened hard against the left edge of the screen. */
    margin: 0 auto;
    cursor: zoom-out;
}

.v2-viewer.is-zoom .v2-viewer__scroll {
    display: block;
    overflow: auto;
    text-align: center;
}
.v2-viewer.is-zoom .v2-viewer__scroll img {
    width: clamp(820px, 100%, 1000px);
    max-width: none;
    max-height: none;
    height: auto;
    cursor: zoom-out;
}
.v2-viewer__hint {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.72);
    pointer-events: none;
}
.v2-viewer.is-zoom .v2-viewer__hint { display: none; }
.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) {
    /* Shorter shelf on a phone so more than one poster is in view at a time. */
    .v2-menu__page img { height: 320px; }
    /* hover lift would stick after a tap and fight the scroll */
    .v2-menu__page:hover { transform: none; }
    .v2-field--menu { max-width: none; }
}

/* ---- restaurant information (closes the page, as the old inline listing did) ---- */
.v2-info { padding-top: 34px; border-top: 1px solid var(--sy-line); margin-top: 34px; }
.v2-info .v2-step-title { margin-top: 0; }
.v2-info__block + .v2-info__block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sy-line); }
.v2-info__outlet { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; }
.v2-info__list { margin: 18px 0 0; }
.v2-info__row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--sy-line); }
.v2-info__row:first-child { border-top: 0; padding-top: 0; }
.v2-info__row dt { color: var(--sy-muted); font-size: 0.92rem; }
.v2-info__row dd { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.v2-info__map { display: inline-block; margin-left: 10px; white-space: nowrap; color: var(--sy-gold); }
.v2-info__map:hover { text-decoration: underline; }
.v2-info__muted { color: var(--sy-muted); }
@media (max-width: 640px) {
    /* the label column costs more than it earns on a phone */
    .v2-info__row { grid-template-columns: 1fr; gap: 4px; }
    .v2-info__map { margin-left: 0; display: block; margin-top: 4px; }
}

/* ---- hero carousel ---- */
.v2-hero { position: relative; }
.v2-hero__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 8px;
}
.v2-hero__track::-webkit-scrollbar { display: none; }
.v2-hero__slide { flex: 0 0 100%; scroll-snap-align: center; }
.v2-hero__slide img {
    width: 100%;
    aspect-ratio: 1920 / 768;   /* the banner artwork's own shape */
    object-fit: cover;
    display: block;
}
.v2-hero__dots {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    display: flex; justify-content: center; gap: 7px;
    pointer-events: none;
}
.v2-hero__dot {
    pointer-events: auto;
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background 0.2s var(--sy-trans), width 0.2s var(--sy-trans);
}
.v2-hero__dot.is-on { background: #fff; width: 18px; border-radius: 4px; }
.v2-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.18s var(--sy-trans), opacity 0.18s var(--sy-trans);
}
.v2-hero__nav:hover { background: rgba(0, 0, 0, 0.62); }
.v2-hero__nav--prev { left: 10px; }
.v2-hero__nav--next { right: 10px; }
/* at an end the arrow stays visible but stops inviting a tap */
.v2-hero__nav:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 640px) {
    /* edge to edge, matching the single banner below */
    .v2-hero { width: auto; margin-left: -3vw; margin-right: -3vw; }
    .v2-hero__track { border-radius: 0; }
    /* kept on phones on purpose: swiping is not discoverable on its own */
    .v2-hero__nav { width: 30px; height: 30px; font-size: 0.85rem; }
    .v2-hero__nav--prev { left: 6px; }
    .v2-hero__nav--next { right: 6px; }
}

/* ---- 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(20,23,28,0.06); }
.v2-phone__list li.is-on { background: rgba(20,23,28,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%; }
}

/* ==========================================================================
   The omakase step — this brand's one departure from the other sites' /v2.
   Every other brand picks a buffet on the FORM, after the session. Here the
   menu leads, because one tier (Takumi) needs five to six days' notice: a
   guest who picks the date first can only ever discover that as a refusal.
   Choosing the menu first lets the calendar withhold the dates it cannot
   honour, which is the whole point of the reordering.
   One omakase per adult, mixed freely across tiers — the same rule the v1
   form has always enforced (BookingController.Submit reconciles the per-tier
   adult counts against AdultCount), so the two flows cannot disagree.
   ========================================================================== */
.v2-menus {
    display: grid;
    /* Two across the 1120 column, one on a phone, without a media query. 430 is
       the floor at which a card still fits "Omakase Kotobuki" and its price on one
       line each beside the stepper; at 340 a third column squeezed in and every
       name wrapped.
       `min(430px, 100%)` and not a bare 430px: a grid track's MINIMUM does not
       shrink, so on a 390px phone the column was forced to 430px and every card
       hung past the right edge of the screen. Capping the floor at the container's
       own width lets the single column collapse to fit. */
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
    gap: 14px 22px;
}
.v2-menucard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px;
    background: var(--sy-washi);
    border: 1px solid var(--sy-line);
    border-radius: 6px;
    transition: border-color 0.18s var(--sy-trans), box-shadow 0.18s var(--sy-trans);
}
/* Chosen = the gold rule down the edge, at the same weight the chips and the
   calendar use for a choice. A tint alone was invisible on a phone outdoors. */
.v2-menucard.is-on {
    border-color: var(--sy-gold);
    box-shadow: inset 3px 0 0 var(--sy-gold);
}
/* The artwork IS the menu: this is the only way to read the courses, so it is a
   real button with its own label, not a decorative thumbnail. */
.v2-menucard__art {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--sy-line);
    border-radius: 4px;
    background: var(--sy-washi-soft);
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
}
/* These are printed menu cards, not dishes: the interesting part is the whole
   sheet, and `cover` cropped a tall menu down to a band of its middle. Contained
   on the paper ground, the thumbnail reads as a miniature of the real thing --
   which is what tells a guest there is something to open. */
.v2-menucard__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v2-menucard__art:focus-visible { outline: 2px solid var(--sy-gold); outline-offset: 2px; }
.v2-menucard__zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(251,248,241,0.94);
    color: var(--sy-ink);
    font-size: 0.66rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* No artwork uploaded yet: the kanji stands in, and the button still opens a
   panel that says so rather than a blank viewer. */
.v2-menucard__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--sy-display);
    font-size: 1.5rem;
    color: var(--sy-gold);
}
.v2-menucard__body { flex-grow: 1; min-width: 0; }
.v2-menucard__name { font-family: var(--sy-display); font-size: 1.05rem; font-weight: 600; }
.v2-menucard__meta { font-size: 0.85rem; color: var(--sy-muted); margin-top: 3px; }
.v2-menucard__notice { font-size: 0.78rem; color: var(--sy-sakura); margin-top: 3px; }
.v2-menucard__qty { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.v2-menucard__qty button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--sy-line);
    border-radius: 4px;
    background: var(--sy-paper);
    color: var(--sy-ink);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.16s var(--sy-trans);
}
.v2-menucard__qty button:hover:not(:disabled) { border-color: var(--sy-ink); }
.v2-menucard__qty button:disabled { opacity: 0.35; cursor: default; }
.v2-menucard__qty output {
    min-width: 16px;
    text-align: center;
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}
.v2-menucard.is-on .v2-menucard__qty output { font-weight: 700; }

/* Running total under the cards. Prices are per adult and exclude SST and
   service, exactly as the v1 form words it. */
.v2-menusum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sy-line);
    font-size: 0.92rem;
    color: var(--sy-ink-soft);
}
.v2-menusum__amt { font-family: var(--sy-display); font-size: 1.3rem; color: var(--sy-ink); }
.v2-menusum__note { color: var(--sy-muted); font-size: 0.82rem; }

/* Adults are not picked here: one omakase is one adult, so the number is
   whatever the cards above add up to. Shown in the party row anyway, in the
   same slot the other brands put their adults select, so the row reads the
   same — it just cannot be edited from this end. */
.v2-readfield {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: var(--sy-washi-soft);
    border: 1px dashed var(--sy-line);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.95rem;
    color: var(--sy-ink);
}
.v2-readfield__hint { font-size: 0.78rem; color: var(--sy-muted); }

/* On a phone the card is one column of ~367px, and the thumbnail plus a 34px
   stepper left too little for "Omakase Kotobuki" to sit on one line. Everything
   shrinks a notch rather than the name wrapping under its own price. */
@media (max-width: 640px) {
    .v2-menucard { gap: 11px; padding: 10px; }
    .v2-menucard__art { width: 78px; height: 58px; }
    .v2-menucard__name { font-size: 1rem; }
    .v2-menucard__qty { gap: 7px; }
    .v2-menucard__qty button { width: 32px; height: 32px; }
    .v2-menusum { gap: 6px 12px; }
}