/* ════════════════════════════════════════════════════════════════════
   Cococure Dining Page — [coco_dining_page]

   Self-contained light editorial design. Scoped to .coco-dine so it
   doesn't bleed into the shared editorial system (haus-pages.css) used
   by /brunch/, /private-hire/, /groups/, etc.

   Modelled on the brunch page's inline-CSS pattern. Same booking-widget
   handoff via `coco-prebooking-ready` event — slugs (`aldgate`,
   `stratford`, `haus-garden`) and form-field name (`location`) are
   preserved verbatim.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens — WARM EDITORIAL LIGHT (v3).
   v1 cream felt cold/empty (white-space ≠ blank-space problem).
   v3 fixes it: warmer pink-beige base, off-white cards (not pure
   white so cards actually SIT on the bg), bolder serif weights,
   multi-accent palette beyond gold, vertical section anchors,
   dotted dividers inside content blocks, tighter section padding.
   Inspired by editorial print / Sketch / Hawksmoor light variants. */
.coco-dine {
    /* Semantic — warmer, denser */
    --bg:          #F2EADC;            /* warm pink-beige page bg (NOT pure cream) */
    --bg-tint:     #ECDFC6;            /* deeper accent stripes / alt bands */
    --fg:          #1F1410;            /* deep cocoa text */
    --fg-muted:    #6B5D4F;            /* secondary text */
    --surface:     #FAF5EA;            /* off-white card surface (visibly different from bg) */
    --surface-2:   #EFE3CB;            /* nested / hover surfaces */
    --border:      #C9B89F;            /* strong warm-tan border so cards anchor */
    /* Multi-accent palette — gold stays primary, plus wine + forest
       for editorial colour-coding on section anchors. Each appears
       sparingly: gold = buttons + main accents, wine = visit / address,
       forest = kitchen / dishes. Together they give the eye places
       to land without fragmenting the brand. */
    --accent:           #c9a96e;       /* brand gold — primary CTAs */
    --accent-deep:      #a88c52;       /* gold hover/press */
    --accent-on:        #1F1410;       /* text on gold button */
    /* Body-label gold for cream surfaces (gold-on-cream is too light) */
    --accent-ink:       #7c5f2a;       /* dark amber for kickers + labels */
    --accent-ink-2:     rgba(124, 95, 42, 0.85);
    /* Secondary accents */
    --accent-wine:      #7A2E2E;       /* deep wine for visit / place */
    --accent-wine-08:   rgba(122, 46, 46, 0.08);
    --accent-forest:    #3A5A40;       /* deep forest for kitchen / food */
    --accent-forest-08: rgba(58, 90, 64, 0.08);
    --accent-terra:     #A8412F;       /* terracotta for groups / celebration */
    --accent-terra-08:  rgba(168, 65, 47, 0.08);

    /* Alpha variants — cocoa-on-cream needs higher alphas to read
       "muted but legible". 0.55 here ≈ 0.65 cream-on-dark. */
    --fg-90:       rgba(31, 20, 16, 0.93);
    --fg-80:       rgba(31, 20, 16, 0.86);
    --fg-70:       rgba(31, 20, 16, 0.78);
    --fg-50:       rgba(31, 20, 16, 0.64);
    --fg-30:       rgba(31, 20, 16, 0.42);
    --fg-12:       rgba(31, 20, 16, 0.18);
    --accent-30:   rgba(201, 169, 110, 0.30);
    --accent-15:   rgba(201, 169, 110, 0.15);
    --accent-08:   rgba(201, 169, 110, 0.08);

    /* Dark hero pockets keep cream text — anchored by photo + scrim */
    --on-dark:     #FAF7F0;

    /* Type */
    --serif:  "Fraunces", "Playfair Display", Georgia, serif;
    --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Layout */
    --radius:    14px;
    --radius-sm: 8px;
    --max:       1180px;

    /* Apply tokens to the wrapper */
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    position: relative;
    overflow-x: hidden;
}
.coco-dine *, .coco-dine *::before, .coco-dine *::after { box-sizing: border-box; }
.coco-dine a { color: inherit; text-decoration: none; }
/* Avada injects a:hover{color:red} globally — lock our hover to accent gold. */
.coco-dine a:hover, .coco-dine a:focus { color: var(--accent-ink) !important; }
.coco-dine img { max-width: 100%; display: block; }

/* ─────────────────────────────────────────────────────────────
   Defensive resets against Avada / Fusion-Builder.
   Avada sets global rules like `body h3{color:#333}` and
   `.fusion-body h4{font-family:...}` with high specificity AND
   sometimes !important. These overrides re-take control inside
   the .coco-dine scope.

   CRITICAL: explicitly exclude the .coco-res-widget subtree.
   The booking widget (from coco-reservations) is rendered inside
   .coco-dine but ships its own dark-themed styling. If we override
   its colours / fonts / display rules, the "Checking availability"
   step turns invisible, form inputs lose their styling, and the
   confirm button breaks. Use :not(.coco-res-widget *) on every
   selector so the widget stays untouched.
   ───────────────────────────────────────────────────────────── */
.coco-dine h1:not(.coco-res-widget h1),
.coco-dine h2:not(.coco-res-widget h2),
.coco-dine h3:not(.coco-res-widget h3),
.coco-dine h4:not(.coco-res-widget h4),
.coco-dine h5:not(.coco-res-widget h5),
.coco-dine h6:not(.coco-res-widget h6) {
    color: var(--fg) !important;
    font-family: var(--serif) !important;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.coco-dine p:not(.coco-res-widget p) {
    color: var(--fg-80) !important;
    font-family: var(--sans) !important;
}
.coco-dine em:not(.coco-res-widget em) { font-style: italic !important; }
.coco-dine a:not(.coco-res-widget a) { color: inherit !important; }
.coco-dine button:not(.coco-res-widget button) {
    font-family: var(--sans);
    color: inherit;
}

/* Apple sign-in button — black with white Apple logo + text. The widget's
   own CSS sets this, but Avada and parent inheritance can bleach it on
   the cream dine page. Lock in the contrast here. */
.coco-dine .coco-res-social-btn--apple {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.coco-dine .coco-res-social-btn--apple:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}
.coco-dine .coco-res-social-btn--apple svg {
    width: 16px;
    height: 16px;
    fill: #fff !important;
}


/* ── Container ───────────────────────────────────────────────────── */
.coco-dine__container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
@media (max-width: 640px) {
    .coco-dine__container { padding: 0 18px; }
}

/* ── Common bits ─────────────────────────────────────────────────── */
.coco-dine__kicker {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--accent-ink) !important;   /* darker amber for readability on cream */
    display: block !important;
}
.coco-dine .coco-dine__h2 {
    font-family: var(--serif) !important;
    font-weight: 600 !important;       /* bolder — feathered 400 reads as airy */
    font-size: clamp(38px, 5vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    color: var(--fg) !important;
    margin: 10px 0 0 !important;
}
.coco-dine .coco-dine__h2 em { color: var(--accent-ink) !important; font-style: italic !important; font-weight: 500 !important; }
.coco-dine__lede {
    font-size: 17px;
    color: var(--fg-70);
    margin: 18px 0 0;
    max-width: 640px;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.coco-dine-hero {
    position: relative;
    min-height: 56vh;
    background: #000;            /* fallback while image loads */
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 130px 0 64px;
}
.coco-dine-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: opacity 0.35s ease;
}
.coco-dine-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Heavier scrim — busy food photos blow out cream text without it.
       Stronger gradient at bottom where the title sits, plus a soft
       inner darkening behind the text block. */
    background:
        radial-gradient(ellipse 70% 55% at 25% 80%, rgba(0,0,0,0.55) 0%, transparent 70%),
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 30%, rgba(0,0,0,0.70) 78%, rgba(0,0,0,0.92) 100%);
}
.coco-dine-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
    color: var(--on-dark);
}
.coco-dine-hero__kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}
.coco-dine .coco-dine-hero__title {
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    font-size: clamp(48px, 7vw, 92px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.025em !important;
    color: var(--on-dark) !important;
    margin: 14px 0 0 !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);  /* legibility over busy food photos */
}
.coco-dine .coco-dine-hero__kicker {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.coco-dine .coco-dine-hero__sub {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.coco-dine .coco-dine-hero__title em { font-style: italic !important; color: var(--accent) !important; font-weight: 300 !important; }
.coco-dine .coco-dine-hero__sub {
    font-size: clamp(15px, 1.3vw, 18px) !important;
    color: rgba(250, 247, 240, 0.82) !important;
    margin: 18px 0 0 !important;
    max-width: 580px;
    line-height: 1.55 !important;
}
.coco-dine .coco-dine-hero__sub em { color: var(--accent) !important; font-style: italic !important; }
.coco-dine .coco-dine-hero__kicker { color: var(--accent) !important; }

@media (max-width: 760px) {
    .coco-dine-hero { min-height: 44vh; padding: 110px 0 40px; }
    .coco-dine-hero__inner { padding: 0 22px; }
}

/* ── Venue picker — BIG italic serif, generous breathing room
   (matches the dark page's prominent toggle treatment). Becomes
   sticky once it hits the top of the viewport so customers can
   switch venues without scrolling back up during the booking
   flow. ──────────────────────────────────────────────────────── */
.coco-dine-picker {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(242, 234, 220, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 32px 28px;
}
.coco-dine-picker__bar {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.coco-dine-picker__btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg) !important;
    padding: 14px 34px;
    border-radius: 999px;
    font-family: var(--serif) !important;
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.1;
    text-align: center;
}
.coco-dine-picker__btn strong {
    display: block;
    font-weight: 500;
    font-style: italic;
}
.coco-dine-picker__btn small {
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-50);
    margin-top: 4px;
}
.coco-dine-picker__btn:hover {
    color: var(--accent-ink) !important;
}
.coco-dine-picker__btn.is-active {
    background: var(--accent);
    color: var(--accent-on) !important;
    border-color: var(--accent);
}
/* haus-pages.css styles .chp-loc-toggle-btn.active strong with brand
   gold (cream-on-dark pattern). On our gold-fill active pill that
   becomes gold-on-gold = invisible. Force dark cocoa here. */
.coco-dine .coco-dine-picker__btn.is-active strong,
.coco-dine .coco-dine-picker__btn.chp-loc-toggle-btn.active strong {
    color: var(--accent-on) !important;
}
.coco-dine-picker__btn.is-active small { color: rgba(31, 20, 16, 0.7) !important; }

@media (max-width: 760px) {
    .coco-dine-picker { padding: 20px 16px; }
    .coco-dine-picker__bar { gap: 8px; justify-content: flex-start; }
    .coco-dine-picker__btn { padding: 10px 18px; font-size: 18px; }
    .coco-dine-picker__btn small { font-size: 9px; margin-top: 2px; }
}

/* ── Quick-nav pills — Reserve / Menu / Groups / What's On.
   Sits below the picker, mirrors the dark page's pill bar. ─── */
.coco-dine-quicknav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 24px 18px 0;
    flex-wrap: wrap;
}
.coco-dine-quicknav__pill {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-70) !important;
    font-weight: 600;
    background: var(--surface);
    transition: all 0.18s ease;
    text-decoration: none !important;
}
.coco-dine-quicknav__pill:hover {
    color: var(--accent-ink) !important;
    border-color: var(--accent);
}
.coco-dine-quicknav__pill.is-active {
    background: var(--accent);
    color: var(--accent-on) !important;
    border-color: var(--accent);
}

/* ── Booking-context tile — image + venue label + Change link.
   Mirrors the dark page's chp-loc-bookhead pattern. ────────── */
.coco-dine-bookhead {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    margin: 0 auto 28px;
    max-width: 720px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(31, 20, 16, 0.05);
}
.coco-dine-bookhead__img {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--surface-2);
}
.coco-dine-bookhead__img--ph {
    background: linear-gradient(135deg, var(--surface-2), var(--bg-tint));
}
.coco-dine-bookhead__meta { flex: 1 1 auto; min-width: 0; text-align: left; }
.coco-dine-bookhead__kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-ink);
    font-weight: 700;
    margin-bottom: 4px;
}
.coco-dine-bookhead__name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--fg) !important;
    line-height: 1.15;
}
.coco-dine-bookhead__sub {
    font-size: 12.5px;
    color: var(--fg-70);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coco-dine-bookhead__change {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-ink) !important;
    text-decoration: none !important;
    padding: 8px 14px;
    border: 1px solid var(--accent-ink);
    border-radius: 999px;
    font-weight: 700;
    background: transparent;
}
.coco-dine-bookhead__change:hover {
    background: var(--accent-ink);
    color: #fff !important;
}
@media (max-width: 600px) {
    .coco-dine-bookhead { padding: 12px 14px; gap: 14px; }
    .coco-dine-bookhead__img { flex: 0 0 56px; width: 56px; height: 56px; }
    .coco-dine-bookhead__name { font-size: 18px; }
    .coco-dine-bookhead__sub { font-size: 11.5px; }
    .coco-dine-bookhead__change { padding: 6px 10px; font-size: 9px; }
}

/* ── Booking module ──────────────────────────────────────────────── */
.coco-dine-booking {
    padding: 56px 0 36px;
    position: relative;
}
.coco-dine-booking__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 28px;
    text-align: center;
}
.coco-dine-booking__h {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.02;
    margin: 6px 0 4px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.coco-dine .coco-dine-booking__h em { color: var(--accent-ink) !important; font-style: italic !important; }
.coco-dine-booking__hint {
    color: var(--fg-70);
    font-size: 14px;
    margin: 6px 0 22px;
}
.coco-dine-booking__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 28px 26px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(31, 20, 16, 0.08);
    /* Subtle warm-paper texture via radial gradient — fills negative
       space with depth, prevents the "blank flat cream" look. */
    background-image:
        radial-gradient(circle at 20% 10%, rgba(122, 46, 46, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(201, 169, 110, 0.03) 0%, transparent 40%);
    transition: background 0.2s ease, border 0.2s ease;
}

/* When the pre-booking form hides (Continue clicked → booking widget
   takes over), strip the light card chrome around the widget so its
   styling sits cleanly on the cream page rather than nested inside
   a white box. */
.coco-dine-booking__card:has(#coco-prebooking-form-wrap[style*="display: none"]),
.coco-dine-booking__card:has(#coco-prebooking-form-wrap[style*="display:none"]) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Hide the "Pick your party size, then your date and time." hint
   once the booking widget takes over — irrelevant at that point. */
.coco-dine-booking__inner:has(#coco-prebooking-form-wrap[style*="display: none"]) .coco-dine-booking__hint,
.coco-dine-booking__inner:has(#coco-prebooking-form-wrap[style*="display:none"]) .coco-dine-booking__hint {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKING WIDGET — LIGHT THEME OVERRIDES
   The widget (coco-reservations/.coco-res-widget) ships with dark
   styling. When it renders inside .coco-dine we re-skin it so the
   booking flow visually continues the cream restaurant page rather
   than dropping into a dark modal moment.

   The Stripe Element (#coco-res-card-element) stays dark
   intentionally — its iframe text color is set white by booking-
   widget.js when it mounts, so a light bg would clip the input.
   Treat it as a deliberate dark "payment island".
   ═══════════════════════════════════════════════════════════════════ */
.coco-dine .coco-res-widget {
    background: transparent !important;
    color: var(--fg) !important;
    max-width: 720px;
    margin: 0 auto;
}

/* THIS is the actual dark wrapper in the widget. Lives in
   booking-widget.css with `background: #111; border: 1px solid #222;`
   — has to be force-overridden specifically. */
.coco-dine .coco-res-confirm-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 28px 26px !important;
    box-shadow: 0 6px 20px rgba(31, 20, 16, 0.06);
    color: var(--fg) !important;
}
.coco-dine .coco-res-confirm-panel * { color: var(--fg) !important; }
.coco-dine .coco-res-success,
.coco-dine .coco-res-fully-booked,
.coco-dine .coco-res-standing-confirm,
.coco-dine .coco-res-unavailable {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 32px 26px !important;
    color: var(--fg) !important;
}

/* Section titles — H3 Confirm Your Reservation / Your Details / Group Set Menus */
.coco-dine .coco-res-section-title {
    font-family: var(--serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin: 18px 0 12px !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

/* Countdown bar — keep it amber-tinted so it reads as time-sensitive */
.coco-dine .coco-res-countdown {
    background: var(--accent-ink-08, rgba(124,95,42,0.10)) !important;
    border: 1px solid rgba(124, 95, 42, 0.25);
    color: var(--accent-ink) !important;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.coco-dine .coco-res-countdown * { color: var(--accent-ink) !important; }

/* Summary rows — Venue, Date, Time, Party Size */
.coco-dine .coco-res-summary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 16px;
    margin: 10px 0 22px;
}
.coco-dine .coco-res-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dotted var(--border);
}
.coco-dine .coco-res-summary-row:last-of-type { border-bottom: none; }
.coco-dine .coco-res-label {
    font-family: var(--mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--fg-50) !important;
    font-weight: 700 !important;
}
.coco-dine .coco-res-value {
    font-family: var(--serif) !important;
    font-size: 15px !important;
    color: var(--fg) !important;
    font-weight: 500 !important;
}

/* Social divider "or enter your details" */
.coco-dine .coco-res-social-divider {
    text-align: center;
    color: var(--fg-50) !important;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 18px 0 14px;
    position: relative;
}
.coco-dine .coco-res-social-divider span {
    background: var(--surface);
    padding: 0 14px;
    color: var(--fg-50) !important;
    position: relative;
    z-index: 1;
}
.coco-dine .coco-res-social-divider::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--border);
    z-index: 0;
}

/* Form fields — labels + inputs */
.coco-dine .coco-res-field { margin-bottom: 14px; }
.coco-dine .coco-res-field label {
    display: block !important;
    font-family: var(--mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--fg-50) !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
}
.coco-dine .coco-res-field input[type="text"],
.coco-dine .coco-res-field input[type="email"],
.coco-dine .coco-res-field input[type="tel"],
.coco-dine .coco-res-field input[type="number"],
.coco-dine .coco-res-field textarea,
.coco-dine .coco-res-field select {
    width: 100%;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 11px 13px !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    color: var(--fg) !important;
    transition: border-color 0.15s ease;
}
.coco-dine .coco-res-field input:focus,
.coco-dine .coco-res-field textarea:focus,
.coco-dine .coco-res-field select:focus {
    outline: none !important;
    border-color: var(--accent) !important;
}
.coco-dine .coco-res-field input::placeholder { color: var(--fg-30) !important; }

/* Birthday inputs row */
.coco-dine .coco-res-birthday-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.coco-dine .coco-res-birthday-row input {
    flex: 0 0 auto;
    width: 56px !important;
    text-align: center;
}
.coco-dine .coco-res-birthday-sep { color: var(--fg-50) !important; }

/* Deposit badges (DEPOSIT REQUIRED / CARD REQUIRED) */
.coco-dine .coco-res-deposit-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    background: var(--accent-ink) !important;
    color: #fff !important;
    margin-bottom: 8px;
}
.coco-dine .coco-res-card-on-file .coco-res-deposit-badge {
    background: #1F4ED8 !important;       /* keep "CARD REQUIRED" blue */
    color: #fff !important;
}

.coco-dine .coco-res-card-message {
    color: var(--fg-80) !important;
    font-size: 14.5px !important;
    margin: 6px 0 10px !important;
}
.coco-dine .coco-res-card-note {
    color: var(--fg-50) !important;
    font-size: 12px !important;
}

/* Deposit info section */
.coco-dine .coco-res-deposit-info {
    background: var(--accent-08);
    border: 1px solid var(--accent-30);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 12px 0;
}
.coco-dine .coco-res-deposit-amount {
    font-family: var(--serif) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin: 6px 0 !important;
}
.coco-dine .coco-res-deposit-breakdown,
.coco-dine .coco-res-deposit-note,
.coco-dine .coco-res-walkin-note { color: var(--fg-70) !important; font-size: 13.5px !important; }

/* Stripe element stays dark — payment moment, deliberately distinct */
.coco-dine #coco-res-card-element {
    /* override inline style with !important */
    background: #111 !important;
    border: 1px solid #333 !important;
}

/* Payment type toggle */
.coco-dine .coco-res-pay-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.coco-dine .coco-res-pay-opt {
    flex: 1;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--fg) !important;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
}
.coco-dine .coco-res-pay-opt.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-on) !important;
}
.coco-dine .coco-res-pay-opt.active * { color: var(--accent-on) !important; }
.coco-dine .coco-res-pay-note { color: var(--fg-70) !important; font-size: 13px !important; }

/* Accordion (Special Occasion / Dietary) */
.coco-dine .coco-res-accordion-item {
    border-top: 1px solid var(--border);
}
.coco-dine .coco-res-accordion-trigger {
    width: 100%;
    background: transparent !important;
    border: none !important;
    text-align: left;
    padding: 14px 0 !important;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    color: var(--fg) !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Marketing opt-in */
.coco-dine .coco-res-marketing-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: var(--fg-80) !important;
    font-size: 13px !important;
    padding: 14px 0;
    cursor: pointer;
}

/* Primary CTA — gold pill */
.coco-dine .coco-res-btn-primary {
    background: var(--accent) !important;
    color: var(--accent-on) !important;
    border: none !important;
    padding: 16px 28px !important;
    border-radius: 999px !important;
    font-family: var(--mono) !important;
    font-size: 12.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
}
.coco-dine .coco-res-btn-primary:hover {
    background: var(--accent-deep) !important;
}
.coco-dine .coco-res-actions { margin-top: 18px; }

/* Dine & Stay block — keep as accent moment */
.coco-dine .coco-res-dine-stay {
    background: var(--accent-08);
    border: 1px solid var(--accent-30);
    border-radius: 10px;
    margin: 16px 0;
    padding: 14px 16px;
}
.coco-dine .coco-res-dine-stay-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-on) !important;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.coco-dine .coco-res-dine-stay-title {
    font-family: var(--serif) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
}
.coco-dine .coco-res-dine-stay-subtitle { color: var(--fg-70) !important; font-size: 13px !important; }

/* Success / fully-booked / standing-confirm steps — light skin */
.coco-dine .coco-res-success,
.coco-dine .coco-res-fully-booked,
.coco-dine .coco-res-standing-confirm,
.coco-dine .coco-res-unavailable {
    text-align: center;
    padding: 24px 8px;
}
.coco-dine .coco-res-success h3,
.coco-dine .coco-res-fully-booked h3,
.coco-dine .coco-res-standing-confirm h3,
.coco-dine .coco-res-unavailable h3 {
    font-family: var(--serif) !important;
    font-size: 26px !important;
    color: var(--fg) !important;
    margin-bottom: 12px;
}
.coco-dine .coco-res-success-icon {
    font-size: 48px !important;
    color: var(--accent) !important;
    margin-bottom: 12px;
}

/* Override key haus-pages form elements when they sit inside the
   dining card. The form classes (.coco-pb-*) are reused from
   haus-pages.js — same JS handlers — but get re-skinned here. */
.coco-dine-booking__card .coco-pb-step { display: none; }
.coco-dine-booking__card .coco-pb-step.active { display: block; }
.coco-dine-booking__card .coco-pb-progress {
    display: flex; gap: 6px; justify-content: center;
    margin-bottom: 22px;
}
.coco-dine-booking__card .coco-pb-dot {
    width: 22px; height: 4px; border-radius: 2px;
    background: var(--fg-12);
}
.coco-dine-booking__card .coco-pb-dot.active { background: var(--accent); }
.coco-dine-booking__card .coco-pb-dot.completed { background: var(--accent-deep); }

.coco-dine-booking__card label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-50);
    margin-bottom: 6px;
}
.coco-dine-booking__card select,
.coco-dine-booking__card input[type="text"],
.coco-dine-booking__card input[type="email"],
.coco-dine-booking__card input[type="tel"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--fg);
    transition: border-color 0.15s ease;
}
.coco-dine-booking__card select:focus,
.coco-dine-booking__card input:focus {
    outline: none; border-color: var(--accent);
}

.coco-dine-booking__card .chp-loc-booking-hint {
    color: var(--fg-70);
    font-size: 14px;
    text-align: center;
    margin: 0 0 18px;
}

.coco-dine-booking__card .coco-pb-row--single { max-width: 280px; margin: 0 auto; }

.coco-dine-booking__card .coco-pb-party-inline {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 18px;
}
.coco-dine-booking__card .coco-pb-party-inline label {
    margin: 0; flex: 0 0 auto;
}
.coco-dine-booking__card .coco-pb-party-inline select {
    width: auto; padding: 7px 10px; font-size: 14px;
}

/* Date strip — horizontal pill row */
.coco-dine-booking__card .coco-pb-date-strip-label,
.coco-dine-booking__card .coco-pb-time-grid-label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-50);
    margin: 18px 0 10px;
}
.coco-dine-booking__card .coco-pb-date-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px;
    scroll-snap-type: x mandatory;
}
/* Date pills — taller editorial cards with prominent numbers,
   matches the dark page's chp-loc-date treatment. */
.coco-dine-booking__card .coco-pb-date-pill {
    flex: 0 0 auto;
    min-width: 84px;
    min-height: 108px;
    padding: 14px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--fg);
    text-align: center;
    font-family: var(--sans);
    cursor: pointer;
    transition: all 0.18s ease;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.coco-dine-booking__card .coco-pb-date-pill-day {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-50);
    font-weight: 700;
}
.coco-dine-booking__card .coco-pb-date-pill-num {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--fg);
    line-height: 1;
    letter-spacing: -0.01em;
}
.coco-dine-booking__card .coco-pb-date-pill-month {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-50);
    font-weight: 600;
}
.coco-dine-booking__card .coco-pb-date-pill:hover { border-color: var(--accent-deep); }
.coco-dine-booking__card .coco-pb-date-pill.active {
    background: var(--accent);
    border-color: var(--accent);
}
.coco-dine-booking__card .coco-pb-date-pill.active .coco-pb-date-pill-num,
.coco-dine-booking__card .coco-pb-date-pill.active .coco-pb-date-pill-day,
.coco-dine-booking__card .coco-pb-date-pill.active .coco-pb-date-pill-month {
    color: var(--accent-on);
}
.coco-dine-booking__card .coco-pb-date-pill--sold-out {
    background: var(--surface-2);
    border-color: var(--border);
    cursor: not-allowed;
    opacity: 0.55;
}
.coco-dine-booking__card .coco-pb-date-pill--sold-out .coco-pb-date-pill-badge {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    color: var(--fg-50);
    text-transform: uppercase;
    line-height: 1.2;
}
.coco-dine-booking__card .coco-pb-date-pill--sister-available {
    cursor: pointer;
    opacity: 1;
    border-color: var(--accent-30);
    background: var(--accent-08);
}
.coco-dine-booking__card .coco-pb-date-pill--sister-available .coco-pb-date-pill-badge {
    color: var(--accent);
}

/* Time grid */
.coco-dine-booking__card .coco-pb-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.coco-dine-booking__card .coco-pb-time-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 8px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
    transition: all 0.15s ease;
}
.coco-dine-booking__card .coco-pb-time-btn:hover { border-color: var(--accent); }
.coco-dine-booking__card .coco-pb-time-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
}

/* Buttons */
.coco-dine-booking__card .coco-pb-submit,
.coco-dine-booking__card .coco-venue-btn-primary {
    display: block;
    width: 100%;
    background: var(--accent);
    color: var(--accent-on);
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-top: 22px;
}
.coco-dine-booking__card .coco-pb-submit:hover,
.coco-dine-booking__card .coco-venue-btn-primary:hover {
    background: var(--accent-deep);
}
.coco-dine-booking__card .coco-pb-submit:disabled {
    background: var(--fg-12);
    color: var(--fg-50);
    cursor: not-allowed;
}
.coco-dine-booking__card .coco-pb-back {
    display: block;
    margin: 12px auto 0;
    background: transparent;
    border: none;
    color: var(--fg-50);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.coco-dine-booking__card .coco-pb-back:hover { color: var(--accent); }

.coco-dine-booking__card .coco-pb-error {
    color: #c2410c;
    background: rgba(194, 65, 12, 0.08);
    border: 1px solid rgba(194, 65, 12, 0.2);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-top: 12px;
}

/* Deposit / pricing info */
.coco-dine-booking__card .coco-pb-deposit-info {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--accent-08);
    border: 1px solid var(--accent-30);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--fg-80);
}

/* ── Experience events this week (per-venue) ─────────────────────────
   Sits directly under the booking widget. One pane per venue, swapped
   in/out by data-pane-loc when the venue picker toggles. Each event
   card carries a frequency badge (Weekly / Monthly / One-off) so the
   customer immediately reads "this is a recurring thing" vs "catch
   this once". Click-through is a deep-link back into the booking
   widget on the same page, pre-filled with the event's date + time
   so the customer slides straight to deposit. ─────────────────────── */
.coco-dine-events {
    padding: 28px 0 8px;
    background: var(--bg);
}
.coco-dine-events__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
.coco-dine-events__head {
    text-align: center;
    margin-bottom: 28px;
}
.coco-dine .coco-dine-events__lede {
    font-size: 15px !important;
    color: var(--fg-muted) !important;
    margin: 8px auto 0 !important;
    max-width: 520px !important;
}
/* Show only the active venue's pane. The dining-page.js venue toggle
   adds/removes `hidden` to keep the right one visible. */
.coco-dine-events__pane[hidden] { display: none; }
.coco-dine-events__empty {
    text-align: center;
    color: var(--fg-muted) !important;
    font-style: italic;
    padding: 32px 0;
}
.coco-dine-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .coco-dine-events__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .coco-dine-events__grid { grid-template-columns: 1fr; } }

.coco-dine-event {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.coco-dine-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(31,20,16,0.08);
}
.coco-dine-event__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
}
.coco-dine-event__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coco-dine-event__img--ph {
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg-tint) 100%);
}
/* Frequency badge — sits top-right over the image. Colour codes the
   recurrence so the customer reads vibe before words. */
.coco-dine-event__tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(31,20,16,0.85);
    color: #FAF7F0;
    backdrop-filter: blur(4px);
}
.coco-dine-event__tag--weekly  { background: var(--accent); color: #1A0F0A; }
.coco-dine-event__tag--monthly { background: var(--accent-forest, #3A5A40); color: #FAF7F0; }
.coco-dine-event__tag--one_off { background: var(--accent-wine, #7A2E2E); color: #FAF7F0; }
.coco-dine-event__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.coco-dine .coco-dine-event__name {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #1A0F0A !important;
}
.coco-dine-event__when {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink) !important;
    font-weight: 600;
}
.coco-dine .coco-dine-event__desc {
    font-size: 14px !important;
    color: var(--fg-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1;
}
.coco-dine .coco-dine-event__cta {
    align-self: flex-start;
    margin-top: 4px;
    font-family: var(--sans);
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    color: var(--accent-ink) !important;
    text-decoration: none !important;
    border-bottom: 1px solid currentColor !important;
    padding-bottom: 2px;
    transition: color .15s ease;
}
.coco-dine .coco-dine-event__cta:hover {
    color: var(--accent-deep, var(--accent-ink)) !important;
}

/* ── Per-venue intro / about ─────────────────────────────────────── */
.coco-dine-about {
    padding: 30px 0 64px;
}
.coco-dine-about__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 28px;
    text-align: center;
}
.coco-dine .coco-dine-about__tagline {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    color: var(--accent-ink) !important;   /* readable amber on cream */
    line-height: 1.25 !important;
    margin: 0 0 16px !important;
}
.coco-dine .coco-dine-about__body {
    font-size: 17px !important;
    color: var(--fg-80) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ── Sample dishes ───────────────────────────────────────────────── */
.coco-dine-dishes {
    padding: 64px 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.coco-dine-dishes__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
.coco-dine-dishes__head {
    text-align: center;
    margin-bottom: 36px;
}
.coco-dine-dishes__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 980px) {
    .coco-dine-dishes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .coco-dine-dishes__grid { grid-template-columns: 1fr; }
}
.coco-dine-dish {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.coco-dine-dish__img {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: var(--surface-2);
}
.coco-dine-dish__body { padding: 16px 18px 20px; }
/* Avada / Fusion-Builder injects aggressive h3 styling on some
   templates (color: inherit can resolve to transparent inside their
   wrappers, or font-family: 0 from a stripped reset). Be explicit
   so the dish names ALWAYS render. */
.coco-dine-dish__name,
.coco-dine h3.coco-dine-dish__name {
    font-family: var(--serif) !important;
    font-size: 19px !important;
    color: var(--fg) !important;
    margin: 0 0 6px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.coco-dine .coco-dine-dish__desc {
    font-size: 13.5px !important;
    color: var(--fg-70) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    font-family: var(--sans) !important;
}
.coco-dine-dishes__cta {
    text-align: center;
    margin-top: 32px;
}
.coco-dine .coco-dine-dishes__cta a {
    font-family: var(--mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--accent-ink) !important;
    border-bottom: 1px solid var(--accent-ink) !important;
    padding-bottom: 2px;
    text-decoration: none !important;
}

/* ── Visit details ───────────────────────────────────────────────── */
.coco-dine-visit {
    padding: 72px 0;
}
.coco-dine-visit__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
.coco-dine-visit__head {
    text-align: center;
    margin-bottom: 36px;
}
.coco-dine-visit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.coco-dine-visit__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
}
.coco-dine .coco-dine-visit__card h4 {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--accent-ink) !important;
    margin: 0 0 8px !important;
    font-weight: 600 !important;
}
.coco-dine .coco-dine-visit__card p {
    font-size: 15px !important;
    color: var(--fg-80) !important;
    margin: 0 !important;
    line-height: 1.55 !important;
    font-family: var(--sans) !important;
}
.coco-dine .coco-dine-visit__card a { color: var(--fg-80) !important; border-bottom: 1px solid var(--accent-ink); }
.coco-dine-visit__directions {
    text-align: center;
    margin-top: 28px;
}
.coco-dine .coco-dine-visit__directions a {
    display: inline-block !important;
    border: 1px solid var(--accent-ink) !important;
    color: var(--accent-ink) !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    background: transparent !important;
}
.coco-dine .coco-dine-visit__directions a:hover { background: var(--accent-ink) !important; color: #fff !important; }

/* ── Groups CTA ──────────────────────────────────────────────────── */
.coco-dine-groups {
    padding: 0 0 72px;
}
.coco-dine-groups__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 28px;
}
.coco-dine-groups__card {
    background: linear-gradient(135deg, var(--accent-08) 0%, var(--surface) 60%);
    border: 1px solid var(--accent-30);
    border-radius: var(--radius);
    padding: 36px 32px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
}
.coco-dine-groups__icon {
    font-size: 32px; line-height: 1;
}
.coco-dine .coco-dine-groups__copy h3 {
    font-family: var(--serif) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: var(--fg) !important;
    margin: 4px 0 6px !important;
}
.coco-dine .coco-dine-groups__copy p {
    color: var(--fg-70) !important;
    font-size: 14.5px !important;
    margin: 0 !important;
    font-family: var(--sans) !important;
}
.coco-dine .coco-dine-groups__btn {
    flex: 0 0 auto !important;
    background: var(--accent) !important;
    color: var(--accent-on) !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    display: inline-block !important;
    text-decoration: none !important;
}
.coco-dine .coco-dine-groups__btn:hover { background: var(--accent-deep) !important; color: var(--accent-on) !important; }
@media (max-width: 720px) {
    .coco-dine-groups__card { grid-template-columns: 1fr; text-align: center; }
    .coco-dine-groups__icon { margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 EDITORIAL OVERLAY
   Vertical colour-anchors per section + dotted dividers + numbered
   labels + paper-texture base. Layers on top of the existing layout
   without restructuring the template. Aims to fix the "white space =
   blank space" problem the cream v1 had: gives the eye places to
   land, fills negative space with rhythm.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Paper-texture page background — extremely subtle grain so the
   cream isn't a perfectly flat fill. ──────────────────────────── */
.coco-dine {
    background-image:
        radial-gradient(circle at 12% 8%, rgba(122, 46, 46, 0.025) 0%, transparent 32%),
        radial-gradient(circle at 88% 26%, rgba(201, 169, 110, 0.04) 0%, transparent 30%),
        radial-gradient(circle at 4% 64%, rgba(58, 90, 64, 0.025) 0%, transparent 30%),
        radial-gradient(circle at 96% 92%, rgba(168, 65, 47, 0.025) 0%, transparent 32%);
}

/* ── Numbered section labels ("01 — RESERVE", "02 — ABOUT") —
   Render via ::before on the kicker. Section index is set via a
   data-num attribute on the wrapping section (added below). ────── */
.coco-dine [data-section-num] .coco-dine__kicker::before {
    content: attr(data-section-num) " — ";
    color: var(--fg-30) !important;
    font-weight: 400 !important;
}

/* ── Vertical colour anchors on left edge of major sections.
   Different accent per section type, gives the eye coloured
   landmarks down the page. Sketch/Hawksmoor pattern. ──────── */
.coco-dine .coco-dine-booking,
.coco-dine .coco-dine-about,
.coco-dine .coco-dine-dishes,
.coco-dine .coco-dine-visit,
.coco-dine .coco-dine-groups {
    position: relative;
}
.coco-dine .coco-dine-booking::before,
.coco-dine .coco-dine-about::before,
.coco-dine .coco-dine-dishes::before,
.coco-dine .coco-dine-visit::before,
.coco-dine .coco-dine-groups::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 3px;
    border-radius: 2px;
    z-index: 2;
}
.coco-dine .coco-dine-booking::before  { background: var(--accent); }            /* gold — primary CTA */
.coco-dine .coco-dine-about::before    { background: var(--accent-forest); }     /* forest — about/intro */
.coco-dine .coco-dine-dishes::before   { background: var(--accent-terra); }      /* terracotta — food/kitchen */
.coco-dine .coco-dine-visit::before    { background: var(--accent-wine); }       /* wine — place/visit */
.coco-dine .coco-dine-groups::before   { background: var(--accent); }            /* gold — celebration */

@media (max-width: 720px) {
    /* Anchors stay but inset slightly on mobile so they don't graze the screen edge. */
    .coco-dine .coco-dine-booking::before,
    .coco-dine .coco-dine-about::before,
    .coco-dine .coco-dine-dishes::before,
    .coco-dine .coco-dine-visit::before,
    .coco-dine .coco-dine-groups::before {
        left: 6px;
    }
}

/* ── Per-section kicker colour aligned with the anchor bar.
   Editorial colour-coding without overwhelming the palette. ─── */
.coco-dine .coco-dine-booking .coco-dine__kicker { color: var(--accent-ink) !important; }
.coco-dine .coco-dine-about .coco-dine__kicker   { color: var(--accent-forest) !important; }
.coco-dine .coco-dine-dishes .coco-dine__kicker  { color: var(--accent-terra) !important; }
.coco-dine .coco-dine-visit .coco-dine__kicker   { color: var(--accent-wine) !important; }
.coco-dine .coco-dine-groups .coco-dine__kicker  { color: var(--accent-ink) !important; }
/* Visit-card h4 labels switch to wine to match the section anchor */
.coco-dine .coco-dine-visit .coco-dine-visit__card h4 { color: var(--accent-wine) !important; }

/* ── Dotted dividers inside the visit grid — fills negative space
   between cards with horizontal rhythm. ──────────────────────── */
.coco-dine .coco-dine-visit__card {
    position: relative;
    overflow: hidden;
}
.coco-dine .coco-dine-visit__card::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 1px;
    background-image: linear-gradient(to right, var(--border) 50%, transparent 50%);
    background-size: 8px 1px;
    opacity: 0.6;
    display: none;   /* dividers only show on tighter grid breakpoints */
}

/* ── Section padding — tighter than v1 for density.
   v1 had 64-72px top/bottom; reference uses ~48px. ─────────── */
.coco-dine .coco-dine-booking { padding: 48px 0 28px; }
.coco-dine .coco-dine-about   { padding: 24px 0 56px; }
.coco-dine .coco-dine-dishes  { padding: 52px 0; }
.coco-dine .coco-dine-visit   { padding: 60px 0; }
.coco-dine .coco-dine-groups  { padding: 0 0 64px; }

/* ── Kickers: tighter, denser, more letter-spaced.
   Reference uses 10-11px tight caps. Override the inherited
   style with this section's specific values. ─────────────── */
.coco-dine .coco-dine__kicker {
    font-size: 10.5px !important;
    letter-spacing: 0.22em !important;
    font-weight: 700 !important;
}

/* ── Section heading wrapper — left-align with stronger heading
   weight and a thin gold rule under the kicker for editorial
   structure. Applied to the standard "head" pattern. ─────── */
.coco-dine .coco-dine-dishes__head,
.coco-dine .coco-dine-visit__head {
    text-align: center;
    margin-bottom: 32px;
}

/* ── About section refinement — denser layout, smaller text,
   warmer feel. ──────────────────────────────────────────── */
.coco-dine .coco-dine-about__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}

/* ── Visit grid — tighter gaps + dotted vertical separators
   between columns to fill the white space.  ─────────────── */
.coco-dine .coco-dine-visit__grid {
    gap: 14px;
}

/* ── Dish cards on warm bg — slightly heavier border, deeper
   shadow for anchoring. ─────────────────────────────────── */
.coco-dine .coco-dine-dish {
    border-color: var(--border);
    box-shadow: 0 3px 12px rgba(31, 20, 16, 0.06);
}
.coco-dine .coco-dine-dish__img {
    background: var(--surface-2);
}

/* ── Groups card — terracotta tinted gradient instead of gold,
   gives the page a third anchor moment. ──────────────────── */
.coco-dine .coco-dine-groups__card {
    background: linear-gradient(135deg, var(--accent-terra-08) 0%, var(--surface) 60%) !important;
    border-color: rgba(168, 65, 47, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BRUNCH PAGE — light editorial brunch landing.
   Reuses the .coco-dine token system; this block adds the brunch-
   specific UI (party-size circle pills, day-card date strip, venue
   toggle, two-section vertical layout). Booking widget handoff is
   identical to /dine/ — same coco-prebooking-ready event contract.
   ═══════════════════════════════════════════════════════════════════ */

/* Venue toggle (Haus indoor / Haus Garden outdoor) */
.coco-dine--brunch .coco-venue-toggle {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0 auto 22px;
    max-width: 460px;
}
.coco-dine--brunch .coco-venue-toggle__opt {
    flex: 1;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--fg) !important;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--sans);
}
.coco-dine--brunch .coco-venue-toggle__opt:hover {
    border-color: var(--accent-ink) !important;
}
.coco-dine--brunch .coco-venue-toggle__opt.is-active {
    background: var(--accent-08) !important;
    border-color: var(--accent) !important;
}
.coco-dine--brunch .coco-venue-toggle__opt .vt-name {
    display: block;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--fg) !important;
}
.coco-dine--brunch .coco-venue-toggle__opt .vt-sub {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-50) !important;
    margin-top: 4px;
    font-weight: 600;
}

/* Form labels + group spacing */
.coco-dine--brunch .coco-brunch-form-group {
    text-align: center;
    margin-bottom: 22px;
}
.coco-dine--brunch .coco-brunch-form-label {
    display: block !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--accent-ink) !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

/* Party-size pills — circular pickers */
.coco-dine--brunch .coco-brunch-party-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.coco-dine--brunch .coco-brunch-party-pill,
.coco-dine--brunch .coco-wings-party-pill {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--fg) !important;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.coco-dine--brunch .coco-brunch-party-pill:hover,
.coco-dine--brunch .coco-wings-party-pill:hover {
    border-color: var(--accent);
}
.coco-dine--brunch .coco-brunch-party-pill.active,
.coco-dine--brunch .coco-wings-party-pill.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-on) !important;
}

/* Date strip — horizontal scroll of day cards */
.coco-dine--brunch .coco-brunch-date-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 14px;
    scroll-snap-type: x mandatory;
}
.coco-dine--brunch .coco-brunch-date-pill {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 116px;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--fg);
    text-align: center;
    font-family: var(--sans);
    cursor: pointer;
    transition: all 0.18s ease;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.coco-dine--brunch .coco-brunch-date-pill:hover {
    border-color: var(--accent-deep);
}
.coco-dine--brunch .coco-brunch-date-pill.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}
.coco-dine--brunch .coco-brunch-date-pill.active .bd-day,
.coco-dine--brunch .coco-brunch-date-pill.active .bd-num,
.coco-dine--brunch .coco-brunch-date-pill.active .bd-month {
    color: var(--accent-on) !important;
}
.coco-dine--brunch .coco-brunch-date-pill .bd-day {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-50) !important;
    font-weight: 700;
}
.coco-dine--brunch .coco-brunch-date-pill .bd-num {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--fg) !important;
    line-height: 1;
}
.coco-dine--brunch .coco-brunch-date-pill .bd-month {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-50) !important;
    font-weight: 600;
}
.coco-dine--brunch .coco-brunch-date-pill .bd-spots {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-ink) !important;
    margin-top: 4px;
    font-weight: 700;
}
.coco-dine--brunch .coco-brunch-date-pill.is-sold-out {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface);
}
.coco-dine--brunch .coco-brunch-date-pill.is-sold-out .bd-badge {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-50) !important;
    margin-top: 6px;
    font-weight: 700;
    line-height: 1.2;
}
.coco-dine--brunch .coco-brunch-loading,
.coco-dine--brunch .coco-brunch-empty {
    color: var(--fg-50) !important;
    font-size: 14px;
    padding: 22px;
    text-align: center;
}

/* Widget slot — where booking-widget.js gets moved on date click */
.coco-dine--brunch .coco-dine-widget-slot {
    max-width: 720px;
    margin: 28px auto 0;
}
.coco-dine--brunch .coco-dine-widget-slot:empty { display: none; }

/* Brunch section spacing — tighter between two stacked sections */
.coco-dine--brunch .coco-dine-brunch-section { padding: 42px 0; }
.coco-dine--brunch .coco-dine-brunch-section + .coco-dine-brunch-section {
    border-top: 1px dashed var(--border);
}

/* Sticky section switcher — two pills (Saturday / Sunday) instead of
   the 3-venue toggle on /dine/. Slightly tighter padding. */
.coco-dine--brunch .coco-dine-picker { padding: 20px 28px; }
.coco-dine--brunch .coco-dine-picker__btn { padding: 12px 26px; font-size: clamp(18px, 2.2vw, 26px); }
@media (max-width: 720px) {
    .coco-dine--brunch .coco-dine-picker { padding: 14px 12px; }
    .coco-dine--brunch .coco-venue-toggle__opt .vt-name { font-size: 16px; }
    .coco-dine--brunch .coco-brunch-date-pill { min-width: 78px; min-height: 100px; }
    .coco-dine--brunch .coco-brunch-date-pill .bd-num { font-size: 24px; }
}

/* ── Brunch hero — Saturday & Sunday wordmark + ampersand ─────── */
.coco-brunch-hero .coco-dine-hero__title em {
    font-style: italic;
    color: var(--accent) !important;
}
.cc-brunch-amp {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    margin: 0 14px;
    color: var(--on-dark);
    opacity: 0.5;
}
.cc-brunch-chips {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.cc-brunch-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(250, 247, 240, 0.08);
    border: 1px solid rgba(250, 247, 240, 0.25);
    color: var(--on-dark) !important;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.18s ease;
}
.cc-brunch-chip:hover {
    background: rgba(201, 169, 110, 0.18);
    border-color: var(--accent);
}
.cc-brunch-chip__num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--accent) !important;
    font-weight: 700;
}

/* ── Duality cards — Saturday warm / Sunday wine ───────────────── */
.coco-brunch-duality {
    padding: 64px 0 56px;
    position: relative;
}
.coco-brunch-duality__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
.coco-brunch-duality__head {
    text-align: center;
    margin-bottom: 36px;
}
.coco-brunch-duality__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
@media (max-width: 820px) {
    .coco-brunch-duality__grid { grid-template-columns: 1fr; }
}
.coco-brunch-duality__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px 26px;
    position: relative;
    box-shadow: 0 4px 18px rgba(31, 20, 16, 0.05);
}
.coco-brunch-duality__card--sat {
    background: linear-gradient(150deg, rgba(201, 169, 110, 0.10) 0%, var(--surface) 60%);
    border-color: rgba(201, 169, 110, 0.30);
}
.coco-brunch-duality__card--sun {
    background: linear-gradient(150deg, rgba(122, 46, 46, 0.10) 0%, var(--surface) 60%);
    border-color: rgba(122, 46, 46, 0.25);
}
.coco-brunch-duality__title {
    font-family: var(--serif) !important;
    font-size: clamp(28px, 3.6vw, 40px) !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    line-height: 1.05 !important;
    margin: 6px 0 4px !important;
    letter-spacing: -0.02em;
}
.coco-brunch-duality__tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--accent-ink) !important;
    margin: 0 0 22px;
}
.coco-brunch-duality__card--sun .coco-brunch-duality__tag {
    color: var(--accent-wine) !important;
}
.coco-brunch-facts {
    margin: 0 0 24px;
    padding: 0;
}
.coco-brunch-fact {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 10px 0;
    border-top: 1px dotted var(--border);
}
.coco-brunch-fact:first-of-type { border-top: 1px solid var(--border); }
.coco-brunch-fact dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-50);
    font-weight: 700;
    align-self: center;
}
.coco-brunch-fact dd {
    margin: 0;
    font-family: var(--sans);
    font-size: 14.5px;
    color: var(--fg) !important;
    font-weight: 500;
}
.coco-brunch-duality__cta {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-on) !important;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none !important;
}
.coco-brunch-duality__cta:hover { background: var(--accent-deep); }
.coco-brunch-duality__cta--outline {
    background: transparent;
    color: var(--accent-wine) !important;
    border: 1px solid var(--accent-wine);
}
.coco-brunch-duality__cta--outline:hover {
    background: var(--accent-wine);
    color: #fff !important;
}

/* ── Menu highlights — 3-dish grid + bottomless drinks bar ───── */
.coco-brunch-menu {
    padding: 64px 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.coco-brunch-menu__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
.coco-brunch-menu__head {
    text-align: center;
    margin-bottom: 40px;
}
.coco-brunch-menu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 32px;
}
@media (max-width: 820px) {
    .coco-brunch-menu__grid { grid-template-columns: 1fr; }
}
.coco-brunch-dish {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.coco-brunch-dish__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.coco-brunch-dish__body { padding: 18px 22px 22px; position: relative; }
.coco-brunch-dish__num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent-ink) !important;
    margin-bottom: 4px;
    font-weight: 700;
}
.coco-brunch-dish__name {
    font-family: var(--serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin: 0 0 6px !important;
    line-height: 1.15 !important;
}
.coco-brunch-dish__desc {
    font-size: 14px !important;
    color: var(--fg-70) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.coco-brunch-dish__tag {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    background: var(--accent-08);
    color: var(--accent-ink);
    border: 1px solid var(--accent-30);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Bottomless bar callout */
.coco-brunch-drinks {
    background: linear-gradient(135deg, var(--accent-08) 0%, var(--surface) 60%);
    border: 1px solid var(--accent-30);
    border-radius: 14px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 28px;
    align-items: center;
}
@media (max-width: 720px) {
    .coco-brunch-drinks { grid-template-columns: 1fr; }
}
.coco-brunch-drinks__label {
    display: flex;
    gap: 14px;
    align-items: center;
}
.coco-brunch-drinks__emoji { font-size: 32px; }
.coco-brunch-drinks__k {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--fg);
}
.coco-brunch-drinks__sub {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-ink) !important;
    margin-top: 4px;
    font-weight: 700;
}
.coco-brunch-drinks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 520px) {
    .coco-brunch-drinks__list { grid-template-columns: 1fr; }
}
.coco-brunch-drinks__list li {
    padding-left: 14px;
    border-left: 2px solid var(--accent);
}
.coco-brunch-drinks__list strong {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    color: var(--fg);
    font-weight: 600;
}
.coco-brunch-drinks__list span {
    font-size: 13px;
    color: var(--fg-70);
}

/* ── Pricing tiers — 3 cards ─────────────────────────────────── */
.coco-brunch-pricing { padding: 72px 0; position: relative; }
.coco-brunch-pricing__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}
.coco-brunch-pricing__head {
    text-align: center;
    margin-bottom: 40px;
}
.coco-brunch-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 820px) {
    .coco-brunch-tiers { grid-template-columns: 1fr; }
}
.coco-brunch-tier {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.coco-brunch-tier--feat {
    background: linear-gradient(150deg, var(--accent-08) 0%, var(--surface) 70%);
    border-color: var(--accent);
    box-shadow: 0 8px 26px rgba(201, 169, 110, 0.18);
    transform: translateY(-4px);
}
.coco-brunch-tier__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--accent-on) !important;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
.coco-brunch-tier__name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-ink) !important;
    font-weight: 700;
    margin-bottom: 14px;
}
.coco-brunch-tier__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}
.coco-brunch-tier__num {
    font-family: var(--serif);
    font-size: 56px;
    font-weight: 600;
    color: var(--fg) !important;
    line-height: 1;
    letter-spacing: -0.02em;
}
.coco-brunch-tier__sub {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-50) !important;
    font-weight: 600;
}
.coco-brunch-tier__for {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--accent-ink) !important;
    margin: 0 0 16px;
}
.coco-brunch-tier__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    flex: 1;
}
.coco-brunch-tier__list li {
    padding: 8px 0 8px 18px;
    position: relative;
    color: var(--fg-80) !important;
    font-size: 14px;
    border-top: 1px dotted var(--border);
}
.coco-brunch-tier__list li:first-of-type { border-top: 1px solid var(--border); }
.coco-brunch-tier__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent-ink);
    font-weight: 600;
}
.coco-brunch-tier__cta {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-on) !important;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
}
.coco-brunch-tier__cta:hover { background: var(--accent-deep); }
.coco-brunch-tier:not(.coco-brunch-tier--feat) .coco-brunch-tier__cta {
    background: transparent;
    color: var(--accent-ink) !important;
    border: 1px solid var(--accent-ink);
}
.coco-brunch-tier:not(.coco-brunch-tier--feat) .coco-brunch-tier__cta:hover {
    background: var(--accent-ink);
    color: #fff !important;
}
.coco-brunch-pricing__note {
    text-align: center;
    margin: 28px 0 0;
    font-size: 13px;
    color: var(--fg-50);
    font-style: italic;
}

/* Section colour anchors for the new brunch sections */
.coco-dine .coco-brunch-duality::before,
.coco-dine .coco-brunch-menu::before,
.coco-dine .coco-brunch-pricing::before {
    content: "";
    position: absolute;
    left: 0; top: 24px; bottom: 24px;
    width: 3px;
    border-radius: 2px;
    z-index: 2;
}
.coco-dine .coco-brunch-duality::before  { background: var(--accent-wine); }
.coco-dine .coco-brunch-menu::before     { background: var(--accent-terra); }
.coco-dine .coco-brunch-pricing::before  { background: var(--accent); }

/* Numbered prefix for the new sections (matches dining-page pattern) */
.coco-brunch-duality .coco-dine__kicker::before,
.coco-brunch-menu .coco-dine__kicker::before,
.coco-brunch-pricing .coco-dine__kicker::before {
    content: attr(data-section-num) " — ";
    color: var(--fg-30);
    font-weight: 400;
}