/* ==========================================================================
   Ressaut — premium category showcase + editorial polish
   --------------------------------------------------------------------------
   Shipped as a standalone stylesheet loaded AFTER the built bundle, so the
   Vite pipeline does not need a rebuild. Every colour comes from the existing
   theme tokens (--paper / --ink / --accent / --nm-*) so light and dark both
   work with no extra rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Category showcase — tall editorial cards with a legible overlaid label.
   Replaces the round bubble rail. Keeps the .cat-rail wrapper + data-cat-rail
   hook so the existing autoplay/arrow JS keeps working untouched.
   -------------------------------------------------------------------------- */
.cat-v2 {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0.15rem 0.85rem;
}
.cat-v2::-webkit-scrollbar { display: none; }

.cat-v2-card {
    position: relative;
    flex: 0 0 auto;
    width: 9.75rem;
    scroll-snap-align: start;
    display: block;
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: var(--nm-raised-sm);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    transition: transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .42s;
}
.cat-v2-card:hover,
.cat-v2-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 0 0 1.5px var(--ring-accent), var(--nm-raised);
}
.cat-v2-card:focus-visible { outline: none; }

.cat-v2-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--paper-2);
}
.cat-v2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.cat-v2-card:hover .cat-v2-img { transform: scale(1.09); }

/* Dark scrim anchored to the bottom — the overlaid name stays legible over
   any photo, in either theme. */
.cat-v2-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 68%;
    background: linear-gradient(to top,
        rgba(9, 11, 17, .94) 0%,
        rgba(9, 11, 17, .62) 42%,
        rgba(9, 11, 17, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Inner hairline + accent ring on hover. */
.cat-v2-sheen {
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
    pointer-events: none;
    transition: box-shadow .35s;
}
.cat-v2-card:hover .cat-v2-sheen { box-shadow: inset 0 0 0 2px var(--accent); }

.cat-v2-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: 0.85rem 0.9rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.cat-v2-name {
    font-family: var(--font-display);
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.18;
    letter-spacing: -.01em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.cat-v2-count {
    color: rgba(255, 255, 255, .80);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.cat-v2-card:not(:has(.cat-v2-img)) .cat-v2-body { position: static; }
.cat-v2-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-strong);
    background: linear-gradient(150deg, var(--paper-2), color-mix(in oklab, var(--accent) 14%, var(--paper-2)));
}

@media (min-width: 640px) {
    .cat-v2 { gap: 1.05rem; }
    .cat-v2-card { width: 12rem; border-radius: 1.5rem; }
    .cat-v2-name { font-size: 1.16rem; }
    .cat-v2-count { font-size: 0.8rem; }
    .cat-v2-body { padding: 1rem 1.1rem 1.1rem; }
}
@media (min-width: 1024px) {
    .cat-v2-card { width: 14rem; }
}
@media (min-width: 1440px) {
    .cat-v2-card { width: 15.5rem; }
}

/* --------------------------------------------------------------------------
   2. Small editorial polish that lifts the whole page without touching layout.
   -------------------------------------------------------------------------- */
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }

:focus-visible {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}

/* The section label gets a hairline underline in the category block. */
.cat-showcase .section-title {
    text-underline-offset: .35em;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent);
    text-decoration-thickness: 3px;
    border-radius: 2px;
}

/* Rail cards stay visible (the old .cat-bubbles rail did the same): a reveal
   translate inside a snap-scrolling rail fights the drift animation. */
html.js .cat-v2 .reveal { opacity: 1; animation: none; transform: none; }

/* --------------------------------------------------------------------------
   3. Checkout — delivery-zone picker.
   The old .opt-compact cards stacked icon, name and fee in one cramped column
   with no clear "selected" state, so a shopper could not tell which zone was
   chosen. These cards separate an icon + name, a "how long it takes" line and
   a bold fee, and paint a filled check plus an accent ring on the chosen one.
   -------------------------------------------------------------------------- */
.zone-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border-radius: 1rem;
    cursor: pointer;
    background: var(--surface);
    box-shadow: var(--nm-raised-sm);
    transition: box-shadow .25s, transform .25s;
}
.zone-opt:hover { transform: translateY(-2px); }

.zone-opt:has(input:checked) {
    box-shadow: var(--nm-inset-sm), 0 0 0 2px var(--accent);
}
.zone-opt:has(input:focus-visible) {
    outline: 2px solid var(--ring-accent);
    outline-offset: 2px;
}
.zone-opt input { position: absolute; opacity: 0; pointer-events: none; }

.zone-opt__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    color: var(--muted);
    background: var(--paper-2);
    box-shadow: var(--nm-inset-sm);
    transition: background .2s, color .2s, box-shadow .2s;
}
/* Empty circle when unselected; a filled check on the chosen zone. The glyph
   is drawn in CSS so the indicator reads clearly even before any JS runs. */
.zone-opt__check::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--line);
    transition: width .18s, height .18s, background .18s;
}
.zone-opt:has(input:checked) .zone-opt__check::after {
    content: "✓";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--brand-grad-ink);
    background: transparent;
}
.zone-opt:has(input:checked) .zone-opt__check {
    color: var(--brand-grad-ink);
    background: var(--brand-grad);
    box-shadow: var(--nm-raised-sm), 0 4px 10px -6px var(--brand-glow);
}

.zone-opt__head { display: flex; align-items: center; gap: 0.4rem; padding-right: 1.7rem; }
.zone-opt__icon { font-size: 1.1rem; line-height: 1; }
.zone-opt__name { font-size: 0.95rem; font-weight: 700; line-height: 1.15; }
.zone-opt__sub { font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.zone-opt__price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--accent-strong); }