/* SE-F 12 S 9 (#36749) — branch storefront styles. Mobile-first. Every colour resolves from the
   tenant theme tokens ThemeCss emits server-side, with no hardcoded values and no var() fallbacks:
   the page always emits the full token set (BuildWithNeutralDefaults), so a fallback would only
   ever hide a missing declaration while making the token unreachable for per-tenant overrides.
   Contrast is therefore the tenant's configured pair, not a fixed dark-on-light scheme (38424). */

/* Pin the canvas. Nothing on these pages sets a page background, so a dark-mode browser
   (or Android WebView force-dark) renders the transparent canvas dark and the design's own
   colours become unreadable. color-scheme: light also opts out of force-dark heuristics. */
html {
    /* Meta/secondary text: a dimmed mix of the canvas foreground. ThemeCss's --muted-color is a
       55% mix, which lands at 3.8:1 on the neutral light canvas — below AA for labels this
       small — so this dims less. */
    --meta-color: color-mix(in srgb, var(--on-background-color) 70%, transparent);

    background: var(--background-color);
    color-scheme: light;
}

/* The header is the shared .site-nav from ssr-chrome.css; the horizontal measure comes from
   .ssr-content on the same element, so this page is exactly as wide as the menu and landing
   pages (37950 AC3). Only the vertical rhythm is this page's own. */
.storefront {
    padding-block: 1rem;
    color: var(--on-background-color);
    font-family: var(--base-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    line-height: 1.5;
}

.storefront h1,
.storefront h2,
.storefront h3 {
    color: var(--on-background-color);
    line-height: 1.2;
}

/* ---------- Hero ---------- */
.storefront-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Placeholder fill behind the hero image while it loads — a faint tint of the page's own
   foreground, so it reads as an empty panel on a light and a dark canvas alike. */
.storefront-hero__media {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--border-color);
}

.storefront-hero__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.storefront-hero__title {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
}

.storefront-hero__status {
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.badge--open {
    /* Semantic success pair (overridable per tenant), so "open" never reads as a brand colour
       that could connote error (e.g. a red-branded tenant). */
    background: var(--success-color);
    color: var(--on-success-color);
}

/* Closed reads as a neutral chip rather than a second semantic colour: a faint tint of the
   page foreground, with the page's own text colour on it. */
.badge--closed {
    background: var(--border-color);
    color: var(--on-background-color);
}

.storefront-hero__close {
    color: var(--meta-color);
    font-size: 0.9rem;
}

.storefront-hero__nap {
    font-style: normal;
    margin: 0 0 1rem;
    color: var(--on-background-color);
}

.storefront-hero__address {
    display: block;
}

.storefront-hero__phone {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.storefront-hero__phone:hover {
    text-decoration: underline;
}

/* ---------- Occasion chooser ---------- */
.occasion {
    display: flex;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.occasion__option {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--on-surface-color);
    background: var(--surface-color);
}

.occasion__option.is-selected {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--on-primary-color);
}

.occasion__label {
    font-weight: 700;
}

.occasion__eta {
    font-size: 0.85rem;
}

/* ---------- Delivery facts ---------- */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin: 0 0 1rem;
    padding: 0;
}

.facts__item {
    margin: 0;
}

.facts dt {
    font-size: 0.8rem;
    color: var(--meta-color);
}

.facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--on-background-color);
}

/* ---------- Postcode check ---------- */
.postcode {
    margin: 0 0 1rem;
}

.postcode__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.postcode__row {
    display: flex;
    gap: 0.5rem;
}

/* The field is a surface, not canvas: its own background/foreground pair, so the typed value
   never inherits a canvas colour the field itself does not paint. */
.postcode__input {
    flex: 1 1 auto;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--meta-color);
    border-radius: 0.5rem;
    background: var(--surface-color);
    color: var(--on-surface-color);
    font-size: 1rem;
    min-width: 0;
}

.postcode__result {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

/* Solid semantic pairs. These used --success-surface/--error-surface, which ThemeCss does not
   emit — the var() fallback meant the tint was always the same fixed pastel, whatever the
   tenant configured, and its paired text colour could not be relied on either. */
.postcode__result--yes {
    background: var(--success-color);
    color: var(--on-success-color);
}

.postcode__result--no {
    background: var(--error-color);
    color: var(--on-error-color);
}

.postcode__collection-link {
    margin-left: 0.4rem;
    color: inherit;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn--primary {
    background: var(--primary-color);
    color: var(--on-primary-color);
}

.btn--primary:hover {
    filter: brightness(0.93);
}

.btn--secondary {
    background: var(--surface-color);
    color: var(--on-surface-color);
    border-color: var(--on-surface-color);
}

.btn--add {
    background: var(--primary-color);
    color: var(--on-primary-color);
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

.storefront-hero__cta .btn--primary {
    /* border-box so the 1.1rem button padding stays inside width:100% — this sheet has no
       global box-sizing reset, so the default content-box overflowed the phone viewport. */
    box-sizing: border-box;
    display: block;
    width: 100%;
    font-size: 1.05rem;
}

/* ---------- Deals / popular rows ---------- */
.row {
    margin: 0 0 2rem;
}

.row__heading {
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}

.cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* A card is a surface, so it sets both halves of the pair: without its own colour its contents
   would inherit the canvas foreground, which is only guaranteed to contrast with the canvas. */
.card {
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface-color);
    color: var(--on-surface-color);
    display: flex;
    flex-direction: column;
}

.card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--border-color);
}

.card__body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Selector carries .card so it outweighs the canvas heading rule above: this is an h3, and
   .storefront h3 is more specific than the colour the card passes down — which is how a
   surface ended up wearing canvas text. Same reason .rewards .rewards__heading is scoped. */
.card .card__name {
    margin: 0;
    font-size: 1rem;
    color: var(--on-surface-color);
}

.card__price {
    margin: 0;
    font-weight: 700;
    color: var(--on-surface-color);
}

/* ---------- Rewards band ---------- */
/* The band is deliberately the site's chrome colour — the same secondary pair the footer uses —
   so it reads as a brand band against the page canvas rather than a fixed near-black panel. */
.rewards {
    margin: 0 0 2rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: var(--secondary-color);
    color: var(--on-secondary-color);
    text-align: center;
}

.rewards .rewards__heading {
    color: var(--on-secondary-color);
    margin: 0 0 0.5rem;
}

.rewards__copy {
    margin: 0 0 1rem;
    color: color-mix(in srgb, var(--on-secondary-color) 85%, transparent);
}

/* ---------- Store info ---------- */
.store-info {
    margin: 0 0 2rem;
    color: var(--on-background-color);
}

/* Special trading-hours closure notice — the semantic warning pair. It was a fixed amber
   palette chosen when this page was a fixed dark-on-light design; now that the canvas is the
   tenant's Background, a fixed panel could not be relied on to contrast with it (38424). */
.closure-notice {
    background: var(--warning-color);
    color: var(--on-warning-color);
    border: 1px solid var(--on-warning-color);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.closure-notice__title {
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.closure-notice__body {
    margin: 0 0 0.25rem;
}

.closure-notice__reopen {
    margin: 0;
    font-weight: 700;
}

.store-info__heading {
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}

.store-info__subheading {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.store-info__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.store-info__map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
}

.store-info table {
    border-collapse: collapse;
    width: 100%;
}

/* The opening-hours table sits directly on the page canvas, so it takes the canvas foreground.
   It used a fixed dark grey, which is unreadable on a tenant with a dark Background (38424). */
.store-info th,
.store-info td {
    text-align: left;
    padding: 0.25rem 0.5rem;
    color: var(--on-background-color);
}

/* Today's row is emphasised by weight alone — a second colour here would have to be a shade of
   the canvas foreground, which no token expresses. */
.store-info tr.today th,
.store-info tr.today td {
    font-weight: 700;
}

.store-info__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Local copy ---------- */
.local-copy {
    color: var(--meta-color);
    margin-bottom: 2rem;
}

/* ---------- Desktop ---------- */
@media (min-width: 48rem) {
    .storefront-hero {
        flex-direction: row;
        align-items: flex-start;
    }

    .storefront-hero__media,
    .storefront-hero__body {
        flex: 1 1 50%;
    }

    .storefront-hero__cta .btn--primary {
        display: inline-block;
        width: auto;
    }

    .cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .store-info__grid {
        grid-template-columns: 1fr 1fr;
    }
}