/*
 * Home page slideshow (1.55.0): designed slides, transitions, progress dots, and how pictures fit beside the panel.
 * Shared by the shop (home page) and the slide editor's preview in the admin. Colours follow the theme (--brand).
 */
.slider { container-type: inline-size; --sd-ink: #15171a; }
.slider .slide { position: relative; overflow: hidden; }
.slider .slide .ph img { object-position: var(--fx, 50%) var(--fy, 50%); }

/* ------------------------------------------------------------------ transitions */
.slider.tr-fade .track, .slider.tr-zoom .track { position: relative; display: block; transform: none !important; transition: none; }
.slider.tr-fade .slide, .slider.tr-zoom .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.slider.tr-fade .slide.is-active, .slider.tr-zoom .slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s ease; }
.slider.tr-zoom .slide.is-active .ph img { animation: sdZoom calc(var(--speed, 6s) + 1.5s) ease-out both; }
@keyframes sdZoom { from { transform: scale(1); } to { transform: scale(1.09); } }

/* ------------------------------------------------------------------ dots, progress and pause */
.slider.has-progress .sdots button { position: relative; overflow: hidden; }
.slider .sdots button i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand, #B71C2B); border-radius: inherit; }
.slider.has-progress.is-playing .sdots button.on i { animation: sdFill var(--speed, 6s) linear forwards; }
@keyframes sdFill { from { width: 0; } to { width: 100%; } }
.slider .splay { position: absolute; right: 14px; bottom: 9px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .38); color: #fff; z-index: 6; display: grid; place-items: center; font-size: .72rem; backdrop-filter: blur(4px); transition: background .2s; }
.slider .splay:hover { background: rgba(0, 0, 0, .6); }
.slider .splay:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ designed slides */
.slide-designed .sd-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.slide-designed.sd-ov-dark { --ovc: 10, 11, 14; }
.slide-designed.sd-ov-light { --ovc: 255, 255, 255; }
.slide-designed.sd-ov-dark .sd-overlay, .slide-designed.sd-ov-light .sd-overlay { background: linear-gradient(90deg, rgba(var(--ovc), var(--ov, .55)) 0%, rgba(var(--ovc), calc(var(--ov, .55) * .78)) 36%, rgba(var(--ovc), 0) 74%); }
.slide-designed.sd-align-right.sd-ov-dark .sd-overlay, .slide-designed.sd-align-right.sd-ov-light .sd-overlay { background: linear-gradient(270deg, rgba(var(--ovc), var(--ov, .55)) 0%, rgba(var(--ovc), calc(var(--ov, .55) * .78)) 36%, rgba(var(--ovc), 0) 74%); }
.slide-designed.sd-align-center.sd-ov-dark .sd-overlay, .slide-designed.sd-align-center.sd-ov-light .sd-overlay { background: radial-gradient(ellipse at center, rgba(var(--ovc), var(--ov, .55)) 0%, rgba(var(--ovc), calc(var(--ov, .55) * .6)) 62%, rgba(var(--ovc), calc(var(--ov, .55) * .4)) 100%); }
.slide-designed.sd-ov-brand .sd-overlay { background: linear-gradient(90deg, color-mix(in srgb, var(--brand, #B71C2B) calc(var(--ov, .55) * 100%), transparent) 0%, color-mix(in srgb, var(--brand, #B71C2B) calc(var(--ov, .55) * 70%), transparent) 40%, transparent 78%); }
.slide-designed.sd-align-right.sd-ov-brand .sd-overlay { background: linear-gradient(270deg, color-mix(in srgb, var(--brand, #B71C2B) calc(var(--ov, .55) * 100%), transparent) 0%, color-mix(in srgb, var(--brand, #B71C2B) calc(var(--ov, .55) * 70%), transparent) 40%, transparent 78%); }
.slide-designed.sd-align-center.sd-ov-brand .sd-overlay { background: color-mix(in srgb, var(--brand, #B71C2B) calc(var(--ov, .55) * 85%), transparent); }

.sd-stretch { position: absolute; inset: 0; z-index: 3; }
.sd-copy { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: min(60%, 44rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(.35rem, 1.1cqw, .8rem); padding: clamp(1.2rem, 4.5cqw, 3.6rem) clamp(1.4rem, 6cqw, 4.6rem); pointer-events: none; text-align: left; }
.sd-copy a { pointer-events: auto; }
/* Room for the arrows beside the texts. */
.slider:has(.snav) .sd-copy { padding-left: max(clamp(1.4rem, 6cqw, 4.6rem), 74px); }
.slider:has(.snav) .sd-align-right .sd-copy { padding-left: clamp(1.4rem, 6cqw, 4.6rem); padding-right: max(clamp(1.4rem, 6cqw, 4.6rem), 74px); }
.slider:has(.snav) .sd-align-center .sd-copy { padding-left: 74px; padding-right: 74px; }
.sd-align-right .sd-copy { left: auto; right: 0; align-items: flex-end; text-align: right; }
.sd-align-center .sd-copy { left: 50%; width: min(82%, 52rem); transform: translateX(-50%); align-items: center; text-align: center; }
.sd-tone-light { color: #fff; }
.sd-tone-dark { color: var(--sd-ink); }

.sd-label { display: inline-flex; align-items: center; gap: .7em; font-size: clamp(.66rem, 1.15cqw, .88rem); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .95; }
.sd-label::after { content: ""; width: clamp(22px, 3.2cqw, 44px); height: 2px; border-radius: 2px; background: var(--brand, #B71C2B); }
.sd-tone-light.sd-ov-brand .sd-label::after { background: #fff; }
.sd-align-right .sd-label { flex-direction: row-reverse; }
.sd-align-center .sd-label::before { content: ""; width: clamp(22px, 3.2cqw, 44px); height: 2px; border-radius: 2px; background: var(--brand, #B71C2B); }
.sd-title { font-size: clamp(1.4rem, 5.2cqw, 3.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin: 0; text-wrap: balance; color: inherit; }
.sd-tone-light .sd-title { text-shadow: 0 2px 22px rgba(0, 0, 0, .25); }
.sd-text { font-size: clamp(.84rem, 1.55cqw, 1.15rem); line-height: 1.5; margin: 0; max-width: 34em; opacity: .9; }
.sd-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(.2rem, 1cqw, .6rem); }
.sd-align-right .sd-cta { justify-content: flex-end; }
.sd-align-center .sd-cta { justify-content: center; }
.sdbtn { display: inline-flex; align-items: center; gap: .55em; padding: .8em 1.5em; border-radius: 99px; font-weight: 700; font-size: clamp(.8rem, 1.3cqw, 1rem); line-height: 1.2; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; }
.sdbtn i { font-size: .85em; transition: transform .2s ease; }
.sdbtn:hover i, .sdbtn:focus-visible i { transform: translateX(3px); }
.sdbtn:hover { transform: translateY(-2px); }
.sdbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sd-tone-dark .sdbtn:focus-visible { outline-color: var(--sd-ink); }
.sdb-brand { background: var(--brand, #B71C2B); color: var(--on-brand, #fff); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand, #B71C2B) 38%, transparent); }
.sdb-brand:hover { color: var(--on-brand, #fff); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand, #B71C2B) 48%, transparent); }
.sdb-light { background: #fff; color: var(--sd-ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.sdb-light:hover { color: var(--sd-ink); }
.sdb-dark { background: var(--sd-ink); color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.sdb-dark:hover { color: #fff; }
.sdb-ghost { color: inherit; background: rgba(255, 255, 255, .12); border: 1.5px solid currentColor; backdrop-filter: blur(6px); padding: calc(.8em - 1.5px) calc(1.5em - 1.5px); }
.sdb-ghost:hover { color: inherit; background: rgba(255, 255, 255, .22); }
.sd-tone-dark .sdb-ghost { background: rgba(255, 255, 255, .5); }

.sd-countdown { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.sd-align-right .sd-countdown { justify-content: flex-end; }
.sd-align-center .sd-countdown { justify-content: center; }
.sd-cd-label { font-size: clamp(.72rem, 1.1cqw, .85rem); font-weight: 600; opacity: .88; margin-inline-end: .15rem; }
.sd-cd-part { display: inline-flex; flex-direction: column; align-items: center; min-width: 3em; padding: .38em .45em .32em; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); line-height: 1; }
.sd-tone-dark .sd-cd-part { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .08); }
.sd-cd-part b { font-size: clamp(.92rem, 1.85cqw, 1.4rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.sd-cd-part small { font-size: .6rem; opacity: .8; margin-top: .25em; text-transform: uppercase; letter-spacing: .06em; }
.sd-cd-part.is-zero-days { display: none; }

.sd-badge { position: absolute; z-index: 4; top: clamp(.8rem, 3cqw, 1.8rem); right: clamp(.8rem, 3cqw, 1.8rem); width: clamp(62px, 10.5cqw, 118px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: clamp(.72rem, 1.75cqw, 1.3rem); line-height: 1.05; padding: .55em; transform: rotate(-10deg); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); animation: sdBadge 3s ease-in-out infinite; }
.sd-badge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .55); }
.sd-badge span { position: relative; overflow-wrap: anywhere; }
.sd-align-right .sd-badge { right: auto; left: clamp(.8rem, 3cqw, 1.8rem); }
.sdbg-brand { background: var(--brand, #B71C2B); color: var(--on-brand, #fff); }
.sdbg-amber { background: #FFB020; color: #2B1A00; }
.sdbg-amber::before { border-color: rgba(43, 26, 0, .35); }
.sdbg-green { background: #1E9E5A; color: #fff; }
.sdbg-dark { background: var(--sd-ink); color: #fff; }
@keyframes sdBadge { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.05); } }

/* The texts arrive one after another when a slide is shown. */
.sd-animate .sd-copy > * { opacity: 0; transform: translateY(16px); }
.sd-animate.is-active .sd-copy > * { animation: sdUp .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.sd-animate.is-active .sd-copy > :nth-child(2) { animation-delay: .1s; }
.sd-animate.is-active .sd-copy > :nth-child(3) { animation-delay: .2s; }
.sd-animate.is-active .sd-copy > :nth-child(4) { animation-delay: .3s; }
.sd-animate.is-active .sd-copy > :nth-child(5) { animation-delay: .4s; }
@keyframes sdUp { to { opacity: 1; transform: none; } }

/* Narrow slideshows (phones, or a narrow column): the texts sit at the bottom over a darker band. */
@container (max-width: 600px) {
    .sd-copy, .sd-align-right .sd-copy, .sd-align-center .sd-copy, .slider:has(.snav) .sd-copy, .slider:has(.snav) .sd-align-right .sd-copy, .slider:has(.snav) .sd-align-center .sd-copy { left: 0; right: 0; width: 100%; transform: none; justify-content: flex-end; align-items: flex-start; text-align: left; padding: 1rem 1.1rem 2.5rem; gap: .35rem; }
    .sd-align-right .sd-label { flex-direction: row; }
    .sd-align-center .sd-label::before { display: none; }
    .sd-align-right .sd-cta, .sd-align-center .sd-cta, .sd-align-right .sd-countdown, .sd-align-center .sd-countdown { justify-content: flex-start; }
    .sd-title { font-size: clamp(1.25rem, 7cqw, 1.9rem); }
    .sd-text { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sdbtn { font-size: .8rem; padding: .65em 1.15em; }
    .sdb-ghost { padding: calc(.65em - 1.5px) calc(1.15em - 1.5px); }
    .sd-cd-part { min-width: 2.6em; }
    .slide-designed.sd-ov-dark .sd-overlay, .slide-designed.sd-ov-light .sd-overlay, .slide-designed.sd-align-right.sd-ov-dark .sd-overlay, .slide-designed.sd-align-right.sd-ov-light .sd-overlay, .slide-designed.sd-align-center.sd-ov-dark .sd-overlay, .slide-designed.sd-align-center.sd-ov-light .sd-overlay { background: linear-gradient(0deg, rgba(var(--ovc), max(var(--ov, .55), .5)) 0%, rgba(var(--ovc), calc(var(--ov, .55) * .7)) 45%, rgba(var(--ovc), .05) 80%); }
    .slide-designed.sd-ov-brand .sd-overlay, .slide-designed.sd-align-right.sd-ov-brand .sd-overlay, .slide-designed.sd-align-center.sd-ov-brand .sd-overlay { background: linear-gradient(0deg, color-mix(in srgb, var(--brand, #B71C2B) 85%, transparent) 0%, color-mix(in srgb, var(--brand, #B71C2B) 50%, transparent) 50%, transparent 85%); }
    .sd-badge, .sd-align-right .sd-badge { right: .8rem; left: auto; top: .8rem; }
}
@media (max-width: 575.98px) { .slider.has-designed { aspect-ratio: 5 / 4; } }
@media (min-width: 576px) and (max-width: 767.98px) { .slider.has-designed { aspect-ratio: 16 / 10; } }

/* ------------------------------------------------------------------ beside the panel (wide screens) */
@media (min-width: 992px) {
    /* Whole picture: the slideshow keeps the pictures' shape; the panel fits its height. */
    .hero-split.fit-whole { grid-template-columns: minmax(0, 2.3fr) minmax(290px, 1fr); }
    .hero-split.fit-whole .hero-main .slider { aspect-ratio: 21 / 8; min-height: 0; height: auto; }
    .hero-split.fit-whole .hero-side { contain: size; height: 100%; min-height: 0; overflow: hidden; gap: .5rem; }
    .hero-split.fit-whole .hero-promo { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
    .hero-split.fit-whole .hero-links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .hero-split.fit-whole .hero-link { padding: .5rem .6rem; gap: .55rem; }
    .hero-split.fit-whole .hero-link:last-child:nth-child(odd) { grid-column: span 2; }
    .hero-split.fit-whole .hero-link-ic { width: 36px; height: 36px; font-size: .95rem; }
    .hero-split.fit-whole .hero-link-t b { font-size: .86rem; }
    .hero-split.fit-whole .hero-link-t small, .hero-split.fit-whole .hero-link-go { display: none; }
    .hero-split.fit-whole .hero-side:not(:has(.hero-promo)) .hero-links { grid-template-columns: 1fr; }
    .hero-split.fit-whole .hero-side:not(:has(.hero-promo)) .hero-link-t small { display: block; }
    .hero-split.fit-whole .hero-hours { padding: .5rem .7rem; margin-top: 0; }
    .hero-split.fit-whole .hero-hours-t .d-block { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hero-split.fit-whole .hero-hours-t .d-block ~ .d-block { display: none !important; }
    /* Fill the space: pictures are cropped around their focus point (default behaviour of .ph img). */
    /* Whole picture, blurred edges: the picture is shown whole over a soft copy of itself. */
    .hero-split.fit-blur .slide-picture .ph { background: #0d0d0f; }
    .hero-split.fit-blur .slide-picture .ph::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat; filter: blur(26px) brightness(.8) saturate(1.1); z-index: 0; }
    .hero-split.fit-blur .slide-picture .ph img { object-fit: contain; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-split.fit-whole .hero-hours { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-animate .sd-copy > * { opacity: 1; transform: none; animation: none !important; }
    .slider.tr-zoom .slide.is-active .ph img, .sd-badge { animation: none; }
    .slider .sdots button i { display: none; }
}

/* The editor's preview shows the blurred-edges layout at any width. */
.slider.pv-blur .slide-picture .ph { background: #0d0d0f; }
.slider.pv-blur .slide-picture .ph::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat; filter: blur(26px) brightness(.8) saturate(1.1); z-index: 0; }
.slider.pv-blur .slide-picture .ph img { object-fit: contain; }

/* ------------------------------------------------------------------ video slides (1.56.0) */
.slider .slide .ph .slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); z-index: 1; }
@media (prefers-reduced-motion: reduce) { .slider .slide .ph .slide-video { display: none; } }

/* ------------------------------------------------------------------ the panel beside the slideshow (1.56.0) */
@media (min-width: 992px) {
    /* Side by side with flex: the panel's place (left or right) and width are the shop's choice. */
    .hero-split { display: flex; gap: 1rem; align-items: stretch; --mw: 2; --sw: 300px; }
    .hero-split > .hero-main { flex: var(--mw) 1 0; min-width: 0; }
    .hero-split > .hero-side { flex: 1 1 0; min-width: var(--sw); }
    .hero-split.fit-whole { --mw: 2.3; --sw: 290px; }
    .hero-split.panel-narrow { --mw: 2.7; --sw: 250px; }
    .hero-split.fit-whole.panel-narrow { --mw: 3; --sw: 250px; }
    .hero-split.panel-wide { --mw: 1.6; --sw: 340px; }
    .hero-split.fit-whole.panel-wide { --mw: 1.85; --sw: 330px; }
    .hero-split.panel-left > .hero-side { order: -1; }
}
@media (max-width: 767.98px) {
    .hero-side.hide-phone-promo .hero-promo, .hero-side.hide-phone-status .hero-status, .hero-side.hide-phone-postcode .hero-postcode,
    .hero-side.hide-phone-personal .hero-me, .hero-side.hide-phone-links .hero-links { display: none !important; }
}

/* Countdown on a promo picture. */
.hero-promo-cd { position: absolute; left: .6rem; bottom: .6rem; z-index: 2; display: inline-flex; align-items: center; gap: .2rem; padding: .25rem .6rem; border-radius: 99px; background: rgba(0, 0, 0, .62); color: #fff; font-size: .78rem; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); }
.hero-promo-cd i { margin-right: .2rem; }
.hero-promo-cd small { margin-right: .25rem; opacity: .8; }

/* Welcome back: points, credit and "order again". */
.hero-me { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .85rem; border-radius: calc(14px * var(--rs, 1)); background: linear-gradient(120deg, color-mix(in srgb, var(--brand, #B71C2B) 9%, var(--surface, #fff)), var(--surface, #fff)); border: 1px solid color-mix(in srgb, var(--brand, #B71C2B) 18%, var(--line, #e7e9ec)); }
.hero-me-hi { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; color: var(--ink, #1f2328); }
.hero-me-hi i { color: var(--brand, #B71C2B); }
.hero-me-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 99px; background: var(--surface, #fff); border: 1px solid var(--line, #e7e9ec); color: var(--ink, #1f2328); font-size: .78rem; font-weight: 600; text-decoration: none; }
.hero-chip i { color: #e0a100; }
.hero-chip:hover { color: var(--ink, #1f2328); border-color: var(--brand, #B71C2B); }
.hero-me-again { display: flex; align-items: center; gap: .6rem; margin: 0; }
.hero-me-last { flex: 1; min-width: 0; line-height: 1.25; }
.hero-me-last small { display: block; color: var(--muted, #6b7280); font-size: .72rem; }
.hero-me-last b { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-me-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 99px; padding: .45rem .85rem; background: var(--brand, #B71C2B); color: var(--on-brand, #fff); font-size: .8rem; font-weight: 700; }
.hero-me-btn:hover { filter: brightness(1.08); }

/* Live status: open now, orders until, wait times, busy, opening hours, delivery or collection. */
.hero-status { flex-direction: column; align-items: stretch; gap: .45rem; }
.hero-status-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.hero-status .hero-open { max-width: none; text-align: start; font-size: .84rem; }
.hero-until { font-size: .8rem; color: var(--ink, #1f2328); font-weight: 600; }
.hero-branch { font-size: .76rem; color: var(--muted, #6b7280); display: inline-flex; gap: .3rem; align-items: center; margin-left: auto; }
.hero-waits { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-wait { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 99px; background: var(--surface, #fff); border: 1px solid color-mix(in srgb, #f5a623 25%, var(--line, #e7e9ec)); font-size: .78rem; color: var(--ink, #1f2328); }
.hero-wait i { color: #c27a00; }
.hero-wait.is-chosen { border-color: #c27a00; box-shadow: 0 0 0 1px #c27a00 inset; }
.hero-busy { font-size: .76rem; color: #9a5b00; display: flex; gap: .35rem; align-items: center; }
.hero-times { font-size: .8rem; color: var(--ink, #1f2328); }
.hero-times summary { cursor: pointer; color: #c27a00; font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; list-style: none; }
.hero-times summary::-webkit-details-marker { display: none; }
.hero-times summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .62rem; transition: transform .2s; }
.hero-times[open] summary::after { transform: rotate(180deg); }
.hero-times .d-block { margin-top: .15rem; }
.hero-choose { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--brand, #B71C2B); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.hero-choose u { text-underline-offset: 2px; }

/* Do we deliver to you? */
.hero-postcode { margin: 0; padding: .65rem .8rem; border-radius: calc(14px * var(--rs, 1)); border: 1px solid var(--line, #e7e9ec); background: var(--surface, #fff); }
.hero-postcode label { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .86rem; margin-bottom: .4rem; color: var(--ink, #1f2328); }
.hero-postcode label i { color: var(--brand, #B71C2B); }
.hero-postcode-row { display: flex; gap: .4rem; }
.hero-postcode input { flex: 1; min-width: 0; border: 1px solid var(--line, #e7e9ec); border-radius: 99px; padding: .45rem .85rem; font-size: .86rem; text-transform: uppercase; background: var(--surface, #fff); color: var(--ink, #1f2328); }
.hero-postcode input:focus { outline: 2px solid var(--brand, #B71C2B); outline-offset: 1px; }
.hero-postcode button { flex-shrink: 0; border: 0; border-radius: 99px; padding: .45rem 1rem; background: var(--ink, #1f2328); color: #fff; font-weight: 700; font-size: .84rem; }

/* Whole picture beside the panel: the extra cards become one line each. */
@media (min-width: 992px) {
    .hero-split.fit-whole .hero-me { padding: .5rem .7rem; gap: .35rem; }
    .hero-split.fit-whole .hero-me-chips, .hero-split.fit-whole .hero-me-last small { display: none; }
    .hero-split.fit-whole .hero-status { gap: .3rem; }
    .hero-split.fit-whole .hero-times, .hero-split.fit-whole .hero-busy { display: none; }
    .hero-split.fit-whole .hero-postcode { padding: .5rem .7rem; }
    .hero-split.fit-whole .hero-postcode label { display: none; }
    .hero-split.fit-whole .hero-hours-t .d-block ~ .d-block { display: block !important; }
}

/* Whole picture: when the panel's cards do not all fit beside the slideshow, the script makes them tighter step by step. */
@media (min-width: 992px) {
    .hero-split.fit-whole .hero-branch, .hero-split.fit-whole .hero-choose { display: none; }
    .hero-split.fit-whole .hero-status-top { gap: .2rem .55rem; }
    .hero-split.fit-whole .hero-wait { padding: .12rem .5rem; font-size: .74rem; }
    .hero-split.fit-whole .hero-side.tight-1 .hero-waits { display: none; }
    .hero-split.fit-whole .hero-side.tight-1 .hero-link { padding: .38rem .5rem; }
    .hero-split.fit-whole .hero-side.tight-1 .hero-link-ic { width: 30px; height: 30px; font-size: .85rem; }
    .hero-split.fit-whole .hero-side.tight-1 .hero-me-chips, .hero-split.fit-whole .hero-side.tight-1 .hero-me-hi { display: none; }
    .hero-split.fit-whole .hero-side.tight-2 .hero-promo { display: none; }
    .hero-split.fit-whole .hero-side.tight-3 .hero-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-split.fit-whole .hero-side.tight-3 .hero-link { flex-direction: column; justify-content: center; gap: .2rem; text-align: center; padding: .35rem .2rem; }
    .hero-split.fit-whole .hero-side.tight-3 .hero-link:last-child:nth-child(odd) { grid-column: auto; }
    .hero-split.fit-whole .hero-side.tight-3 .hero-link-t b { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.hero-status .hero-status-top { justify-content: flex-start; text-align: start; }