/**
 * SSB Shop — token contract (plugin defaults)
 * ===========================================
 *
 * This stylesheet establishes the CSS custom-property CONTRACT for the
 * ssb-shop plugin. P0 ships NO real surface design — the `/shop` hero and the
 * `/build-box` builder CSS land in P1 once copy + product data are ready. For
 * now it ships neutral, self-contained `--ssb-shop-*` defaults so plugin markup
 * is never unstyled in isolation.
 *
 * Token-override contract
 * -----------------------
 * Every visual value the plugin uses is read from a `--ssb-shop-*` custom
 * property, scoped to the plugin root selector `.ssb-shop`. The `brats` theme
 * OVERRIDES these by mapping them to its editorial `--ssb-*` cluster (ink /
 * cream / tan / red-deep — defined in the theme's `screen.css`, the editorial
 * token block ~lines 4896-4915). The plugin never references theme tokens
 * directly, which keeps ssb-shop usable on a vanilla install while letting the
 * theme fully reskin it.
 *
 * Per art-direction (memory: dtc-brat-box-order-form, "Design + art direction"):
 *   - `/shop`     = CREAM daylight (national / giftable, NOT bar-ink).
 *   - `/build-box`= SPLIT ground — cream work area + an INK manifest panel.
 *   - Red is PUNCTUATION only. `--ssb-red` (#d32f2f) FAILS 4.5:1 on light, so
 *     red TEXT/ICONS on light must use the deeper `--ssb-red-deep` (#A02523);
 *     #d32f2f is reserved for large Bowlby text, UI dots/borders, and CTA fills.
 *
 * The theme override lives in the theme stylesheet (NOT here), e.g.:
 *
 *   .ssb-shop {
 *     --ssb-shop-ink:        var(--ssb-ink,        #0F0F0F);
 *     --ssb-shop-surface:    var(--ssb-cream,      #EFE2C7);
 *     --ssb-shop-warm:       var(--ssb-tan,        #C9A877);
 *     --ssb-shop-accent:     var(--ssb-red,        #d32f2f);
 *     --ssb-shop-accent-ink: var(--ssb-red-deep,   #A02523);
 *   }
 *
 * Because the theme rule has equal specificity and loads after this file (the
 * theme stylesheet enqueues later), the theme's mapped values win. P1 surfaces
 * should consume only the tokens below — never hard-code colors.
 */

.ssb-shop {
    /* Color — neutral standalone defaults; theme maps to the editorial cluster */
    --ssb-shop-ink: #0f0f0f;          /* default text */
    --ssb-shop-muted: #6b6b6b;        /* secondary text (meta, notes) */
    --ssb-shop-surface: #efe2c7;      /* cream work area / panel background */
    --ssb-shop-surface-soft: #f5e9cf; /* lighter cream for raised cards */
    --ssb-shop-warm: #c9a877;         /* tan warmth / merch ground */
    --ssb-shop-warm-deep: #a88857;    /* tan shadow / hairlines on tan */
    --ssb-shop-manifest: #0f0f0f;     /* ink manifest panel background */
    --ssb-shop-accent: #d32f2f;       /* red PUNCTUATION — large text / UI / CTA fill only */
    --ssb-shop-accent-ink: #a02523;   /* red text/icons on light (4.5:1-safe) */
    --ssb-shop-border: rgba(15, 15, 15, 0.12);

    /* Geometry */
    --ssb-shop-radius: 16px;          /* card radius (theme maps to --radius-card) */
    --ssb-shop-radius-control: 8px;   /* control / chip radius (theme maps to --radius-md) */
    --ssb-shop-band: 1280px;          /* editorial inner-band width */
    --ssb-shop-elevation: 0 1px 3px rgba(15, 15, 15, .08), 0 2px 8px rgba(15, 15, 15, .06);
    --ssb-shop-elevation-hover: 0 2px 6px rgba(15, 15, 15, .1), 0 4px 16px rgba(15, 15, 15, .1);
    --ssb-shop-gap: 1.5rem;
}


/**
 * /shop LANDING SURFACE (P1)
 * ==========================
 * Cream daylight ground. Bowlby One SC for the loud lines + zone headings,
 * Averia Libre italic for eyebrow / body / heritage. Red is PUNCTUATION only:
 * the heritage star + date, the lead stat value, and the primary CTA fill —
 * and any red TEXT on light uses --ssb-shop-accent-ink (4.5:1-safe).
 *
 * Generic component classes (.eyebrow, .btn-box, .status-tile, the wavy-edge +
 * butcher-texture utilities) are styled by the THEME; this file only adds the
 * shop-specific layout. Everything reads from --ssb-shop-* tokens so the theme
 * reskins it without forking colors.
 */

/* ── Hero (cream daylight) ─────────────────────────────────────────────── */
.shop-hero {
    background-color: var(--ssb-shop-surface);
    color: var(--ssb-shop-ink);
    padding: clamp(48px, 7vw, 96px) clamp(18px, 4vw, 40px);
}
.shop-hero__inner {
    max-width: var(--ssb-shop-band);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.shop-hero__title {
    margin: 0 0 0.5rem;
    font-family: "Bowlby One SC", "Bowlby One", "Ultra", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(44px, 7vw, 88px);
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--ssb-shop-ink);
}
.shop-hero__heritage {
    margin: 0 0 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--ssb-shop-accent-ink); /* red PUNCTUATION beat #1 — on cream, 4.5:1-safe */
}
.shop-hero__heritage-star {
    flex: none;
    color: var(--ssb-shop-accent-ink); /* matches the heritage line; currentColor fill */
}
.shop-hero__body {
    margin: 0 0 1.75rem;
    max-width: 46ch;
    font-family: "Averia Libre", Georgia, serif;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    color: var(--ssb-shop-ink);
}

/* Stat row */
.shop-hero__stats {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.5vw, 28px);
    border-top: 1px solid var(--ssb-shop-border);
    border-bottom: 1px solid var(--ssb-shop-border);
    padding-block: 1.25rem;
}
.shop-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.shop-stat__value {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ssb-shop-ink);
}
.shop-stat__value--accent {
    color: var(--ssb-shop-accent); /* red PUNCTUATION beat #2 — large Bowlby, ok at brighter red */
}
.shop-stat__label {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--ssb-shop-muted);
    max-width: 16ch;
}

.shop-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* CTA inline SVG arrow (no unicode) */
.shop-cta .shop-cta__arrow {
    transition: transform 150ms ease;
}
.shop-cta:hover .shop-cta__arrow,
.shop-cta:focus-visible .shop-cta__arrow {
    transform: translateX(4px);
}

/* Flat-lay in a refined rounded catalog plate (matches the front-page
   .shop-pathway__media the visitor clicked through): a 1px ink hairline +
   rounded corners + a gentle ambient lift. */
.shop-hero__media {
    margin: 0;
}
.shop-hero__frame {
    position: relative;
    border: 1px solid var(--ssb-shop-ink);
    border-radius: var(--ssb-shop-radius);
    overflow: hidden;
    box-shadow: var(--ssb-shop-elevation);
}
.shop-hero__frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Full-bleed escape for the ONE section still rendered INSIDE WC's content
   wrapper. The hero + food zone + reassurance band now all hook
   `woocommerce_before_main_content` (before the wrapper opens @10), so they're
   already edge-to-edge cream. Only the merch zone (woocommerce_before_shop_loop)
   renders inside .content-area / .container — width-constrained + padded — so we
   break it out to true full-bleed for the tan band. */
.shop-zone--merch {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Overflow backstop on the landing only. The merch breakout uses 100vw, which
   includes the scrollbar gutter and would otherwise cause horizontal overflow
   on /shop. Clip (NOT hidden) so any sticky descendants keep working; nothing
   on /shop relies on body scroll for sticky, so this is safe. Gated by the
   `ssb-shop-landing` body class (added via body_class in shop-landing.php). */
body.ssb-shop-landing {
    overflow-x: clip;
}

/* ── Zone scaffold (shared by food + merch zones) ──────────────────────── */
.shop-zone {
    padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 40px);
}
.shop-zone--food {
    background-color: var(--ssb-shop-surface);
    color: var(--ssb-shop-ink);
}
.shop-zone--merch {
    background-color: var(--ssb-shop-warm);
    color: var(--ssb-shop-ink);
    /* Wavy top seam: the food zone above is cream, so the carved-away strip
       fills with cream over the tan ground. The theme's .has-wavy-edge-top
       utility reads --prev-edge-color (don't hard-code it in the utility). */
    --prev-edge-color: var(--ssb-shop-surface);
}
.shop-zone__inner {
    max-width: var(--ssb-shop-band);
    margin: 0 auto;
}
.shop-zone__head {
    margin-bottom: clamp(24px, 4vw, 44px);
}
.shop-zone__title {
    margin: 0 0 0.5rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 4.5vw, 52px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ssb-shop-ink);
}
.shop-zone__lede {
    margin: 0;
    max-width: 52ch;
    font-family: "Averia Libre", Georgia, serif;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.55;
    color: var(--ssb-shop-ink);
}
.shop-zone__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    color: var(--ssb-shop-muted);
}

/* ── Food zone — base-box cards that LINK to /build-box ────────────────── */
.shop-box-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 350px));
    gap: clamp(18px, 2.5vw, 30px);
}
.shop-box-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--ssb-shop-surface-soft);
    border: 0;
    border-radius: var(--ssb-shop-radius);
    overflow: hidden;
    box-shadow: var(--ssb-shop-elevation);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.shop-box-card:hover,
.shop-box-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--ssb-shop-elevation-hover);
}
a.shop-box-card:focus-visible {
    outline: 2px solid var(--ssb-shop-accent);
    outline-offset: 2px;
}
.shop-box-card__media {
    display: block;
    overflow: hidden;
    background: var(--ssb-shop-surface);
}
.shop-box-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 220ms ease;
}
.shop-box-card:hover .shop-box-card__media img,
.shop-box-card:focus-visible .shop-box-card__media img {
    transform: scale(1.03);
}
.shop-box-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(16px, 2vw, 22px);
    flex: 1 1 auto;
}
.shop-box-card__name {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--ssb-shop-ink);
}
.shop-box-card__price {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ssb-shop-ink);
}
.shop-box-card__price del {
    color: var(--ssb-shop-muted);
    font-weight: 400;
    margin-right: 0.4em;
}
.shop-box-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--ssb-shop-accent-ink); /* red PUNCTUATION — text on light, 4.5:1-safe */
}
.shop-box-card__cta .shop-cta__arrow {
    transition: transform 150ms ease;
}
.shop-box-card:hover .shop-box-card__cta .shop-cta__arrow,
.shop-box-card:focus-visible .shop-box-card__cta .shop-cta__arrow {
    transform: translateX(4px);
}

/* ── Merch zone — the existing WC loop + filter chips live inside here ─── */
/* The theme styles .shop-filter-group / .card-product; we only set rhythm so
   the chips + grid sit comfortably under the zone heading on the tan ground. */
.shop-zone--merch .shop-filter-group {
    margin-top: clamp(18px, 3vw, 30px);
}

/* ── Reassurance band (cream, 3 status tiles) ──────────────────────────── */
.shop-reassurance {
    background-color: var(--ssb-shop-surface);
    color: var(--ssb-shop-ink);
    padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 40px);
    border-top: 1px solid var(--ssb-shop-border);
}
.shop-reassurance__inner {
    max-width: var(--ssb-shop-band);
    margin: 0 auto;
}
/* The visible eyebrow gives the band an authored top edge like the other zones;
   space it off the tile grid to match the zone-head rhythm. */
.shop-reassurance__inner .eyebrow {
    margin-bottom: clamp(24px, 4vw, 44px);
}
.shop-reassurance__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(24px, 3.5vw, 48px);
}
/* The generic .status-tile inherits white text from dark contexts; on the cream
   reassurance band we re-point its label/detail/icon to ink-on-light tokens. */
.shop-reassurance .status-tile {
    margin-top: 0;
}
.shop-reassurance .status-tile__icon {
    color: var(--ssb-shop-ink); /* calm ink — the reassurance band is over-budget on red */
}
.shop-reassurance .status-tile__label {
    color: var(--ssb-shop-ink);
}
.shop-reassurance .status-tile__detail {
    color: var(--ssb-shop-muted);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .shop-hero__inner {
        grid-template-columns: 1fr;
    }
    .shop-hero__media {
        order: -1; /* image leads on stacked mobile */
    }
}
@media (max-width: 560px) {
    .shop-hero__stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .shop-hero__ctas .btn-box {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-box-card,
    .shop-box-card__media img,
    .shop-cta__arrow {
        transition: none;
    }
}


/**
 * DELIVERY DETAILS — customer order view (order-received + My-Account view order)
 * ===============================================================================
 * Rendered after the order table by inc/box-builder/delivery-display.php, wrapped
 * in `.ssb-shop` so the theme's --ssb-shop-* override skins it on-brand. Light,
 * on-brand, left-aligned (never centered) — a focused block, NOT a restyle of the
 * order table. Reads only --ssb-shop-* tokens. (Admin + email variants are
 * inline-styled in PHP — this block governs only the front-end customer view.)
 */
.ssb-shop-delivery-details {
    margin: clamp(28px, 4vw, 44px) 0 clamp(8px, 2vw, 16px);
    padding: clamp(18px, 2.5vw, 26px);
    background: var(--ssb-shop-surface-soft, #f5e9cf);
    border: 1px solid var(--ssb-shop-border, rgba(15, 15, 15, 0.12));
    border-radius: var(--ssb-shop-radius-control, 8px);
    color: var(--ssb-shop-ink, #0f0f0f);
    text-align: left;
}
.ssb-shop-delivery-details__title {
    margin: 0 0 1rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ssb-shop-ink, #0f0f0f);
}
.ssb-shop-delivery-details__list {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.5rem 1.25rem;
}
.ssb-shop-delivery-details__list dt {
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    color: var(--ssb-shop-muted, #5a5346);
}
.ssb-shop-delivery-details__list dd {
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: 1rem; /* hold ≥16px even inside the shrunk order-table context */
    color: var(--ssb-shop-ink, #0f0f0f);
}
.ssb-shop-delivery-details__message {
    white-space: normal;
    line-height: 1.5;
}
.ssb-shop-delivery-details__note {
    margin: 1rem 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ssb-shop-muted, #5a5346);
}

.ssb-shop-delivery-details__change {
    margin: 0.75rem 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ssb-shop-ink, #0f0f0f);
}
.ssb-shop-delivery-details__change-link {
    color: var(--ssb-shop-accent-ink, #a02523);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .ssb-shop-delivery-details__list {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }
    .ssb-shop-delivery-details__list dd {
        margin-bottom: 0.65rem;
    }
}

/* -------------------------------------------------------------------------
 * Post-order "change delivery date" standalone page
 * (inc/box-builder/delivery-change.php). A tokenized, theme-wrapped page; the
 * .ssb-shop root pulls the token palette so it matches the rest of the shop.
 * ---------------------------------------------------------------------- */
/* The page is a centering wrapper; the inner `.ssb-form-box` (theme-styled:
   warm surface, hairline, radius, padding, left-aligned) carries the surface. */
.ssb-shop-delivery-change {
    margin: clamp(2rem, 5vw, 3.5rem) auto clamp(3rem, 6vw, 4.5rem);
    padding: 0 1.25rem;
    color: var(--ssb-shop-ink, #0f0f0f);
}
.ssb-shop-delivery-change__current {
    font-family: "Averia Libre", Georgia, serif;
    line-height: 1.5;
    margin: 0 0 1rem;
}
/* Success ("date updated") + non-form alert ("link not valid" / "locked"):
   simple role=status / role=alert paragraphs, not nested boxes (the form-box
   wrap already provides the surface). */
.ssb-shop-delivery-change__status,
.ssb-shop-delivery-change__alert {
    margin: 0 0 1.25rem;
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    line-height: 1.45;
}
.ssb-shop-delivery-change__alert {
    color: var(--ssb-shop-accent-ink, #a02523);
}
.ssb-shop-delivery-change__form {
    margin-top: 1.5rem;
}
.ssb-shop-delivery-change__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}
.ssb-shop-delivery-change__field label {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
}
.ssb-shop-delivery-change__field input[type="date"] {
    max-width: 16rem;
    padding: 0.6rem 0.75rem;
    font-size: 1rem; /* iOS zoom floor — keep at 1rem */
    border: 1px solid var(--ssb-shop-border, rgba(15, 15, 15, 0.3));
    border-radius: var(--ssb-shop-radius-control, 8px);
    background: #fff;
    color: var(--ssb-shop-ink, #0f0f0f);
}
.ssb-shop-delivery-change__hint {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ssb-shop-muted, #5a5346);
}
.ssb-shop-delivery-change__error {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    color: var(--ssb-shop-accent-ink, #a02523);
}
.ssb-shop-delivery-change__actions {
    margin: 1.5rem 0 0;
}
.ssb-shop-delivery-change__home {
    color: var(--ssb-shop-accent-ink, #a02523);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Food-addon PDP box-route — the replacement purchase module rendered by
 * ssb_shop_plugin_render_food_addon_route() (inc/gating.php) in the
 * add-to-cart slot of food-addon single product pages. The .btn-box itself is
 * theme-owned (screen.css); this only spaces the module and sets the note.
 * ------------------------------------------------------------------------- */
.ssb-addon-route {
    margin: 1.25rem 0 1.5rem;
}
.ssb-addon-route__note {
    margin: 0 0 1rem;
    max-width: 36ch;
    font-family: "Averia Libre", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ssb-shop-muted, #5a5346);
}