/*
 * What the application needs and the storefront design manual (docs/design/storefront/) does not have yet.
 *
 * Same rules as storefront.css — tokens only, @layer components, BEM — so each block can move into the manual's
 * storefront.css unchanged once the manual adopts it (it is owed there, with its documentation in index.html). Until
 * then this file is the list of patterns the templates had to invent.
 */
@layer components {
    /* The redirect-after-POST feedback (Symfony flashes) above the page: the manual designs alerts, not where they go. */
    .flashes { display: grid; gap: var(--space-3); padding-block-start: var(--space-5); }

    /* The live toasts (CART-65; the live-form controller): the flashes a morph brings in, lifted into the top layer so
       nothing shifts — one manual popover holding the stack where the manual's .cart-toast stands (bottom end on a
       desktop, the phone's width), each toast the foundation's alert with a close button; a success leaves by itself,
       a refusal stays until closed. The popover's UA box (centred, bordered, white) is reset to a bare stack. */
    .toasts {
        position: fixed;
        inset: auto var(--gutter) var(--space-5) auto;
        inline-size: min(24rem, calc(100vw - 2 * var(--gutter)));
        block-size: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        overflow: visible;
    }
    .toasts:popover-open { display: grid; gap: var(--space-3); }
    .toast .alert { grid-template-columns: auto 1fr auto; align-items: start; box-shadow: var(--shadow-overlay); }
    .toast__close { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0; color: inherit; }
    @media (prefers-reduced-motion: no-preference) {
        .toasts:popover-open .toast { animation: toast-in var(--duration-base) var(--ease-standard); }
    }
    @keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-3)); } }

    /* The add-to-cart confirmation's item (the manual's .cart-toast): name, detail and price on their own lines, a line
       the controller has nothing for stays hidden. */
    .cart-toast__item > div > :not([hidden]) { display: block; }

    /* A CMS page (Content CNT-03/04): a section is a row of its preset's columns — one below the tablet breakpoint,
       the preset's widths from it; a column stacks its blocks. The editor preview's anchors take no box of their own. */
    .cms-page__title { margin-block-start: var(--space-6); }
    .cms-section { display: grid; gap: var(--space-6) var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
    .cms-section__column > * + * { margin-block-start: var(--space-5); }
    .cms-anchor { display: contents; }
    @media (width >= 48rem) {
        .cms-section--two_50_50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .cms-section--two_60_40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
        .cms-section--two_40_60 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
        .cms-section--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .cms-section--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (width >= 64rem) {
        .cms-section--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* A section or block shown on some devices only (Content CNT-73): mobile below the tablet breakpoint, tablet up to
       the desktop one, desktop from it — the grid's own breakpoints; the wrapper of a block takes no box of its own. */
    .cms-devices { display: contents; }
    @media (width < 48rem) { [data-devices]:not([data-devices~="mobile"]) { display: none; } }
    @media (48rem <= width < 64rem) { [data-devices]:not([data-devices~="tablet"]) { display: none; } }
    @media (width >= 64rem) { [data-devices]:not([data-devices~="desktop"]) { display: none; } }
}

@layer components {
    /* The launch block types (Content CNT-09/10/11/13/14/16/19/131) — tokens only; each block is one BEM family and
       moves into the manual's storefront.css unchanged once the manual adopts it. */
    .cms-media { display: block; inline-size: 100%; block-size: auto; object-fit: cover; }

    /* The social post and the map (Content CNT-133, CNT-119): a platform-derived frame and its caption. */
    .cms-embed { margin: 0; }
    .cms-embed__frame { display: block; inline-size: 100%; border: 0; background: var(--color-surface); }
    .cms-embed--post .cms-embed__frame { aspect-ratio: 4 / 5; max-inline-size: 32rem; }
    .cms-embed--map .cms-embed__frame { aspect-ratio: 16 / 9; }
    .cms-embed__caption { margin-block-start: var(--space-3); display: grid; gap: var(--space-2); }
    .cms-embed__caption address { font-style: normal; white-space: pre-line; }

    /* The logo strip (Content CNT-18): logos in a wrapping row, each its own link. */
    .cms-logos__heading { margin-block-end: var(--space-4); }
    .cms-logos__list { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; list-style: none; margin: 0; padding: 0; }
    .cms-logos__image { display: block; block-size: 3rem; inline-size: auto; object-fit: contain; }

    .cms-slider { position: relative; }
    .cms-slider__track { display: flex; gap: var(--grid-gap); list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .cms-slider__track::-webkit-scrollbar { display: none; }
    .cms-slider__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
    .cms-slider__image { aspect-ratio: 16 / 7; inline-size: 100%; object-fit: cover; }
    .cms-slider__copy { position: absolute; inset-block-end: var(--space-5); inset-inline: var(--space-5); max-inline-size: 36rem; padding: var(--space-4); background: color-mix(in oklab, var(--color-surface) 88%, transparent); }
    .cms-slider__headline { font-size: var(--step-3, 1.5rem); font-weight: 600; margin: 0; }
    .cms-slider__link { color: inherit; text-decoration: none; }
    .cms-slider__link::after { content: ''; position: absolute; inset: 0; }
    .cms-slider__caption { margin: var(--space-2) 0 0; }
    .cms-slider__cover { position: absolute; inset: 0; color: transparent; }
    .cms-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-3); }
    .cms-slider__dots { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
    .cms-slider__dot { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); padding: 0; }
    .cms-slider__dot[aria-current="true"] { background: var(--color-text); }

    .cms-banner { position: relative; margin: 0; }
    .cms-banner__image { aspect-ratio: 3 / 1; inline-size: 100%; object-fit: cover; }
    .cms-banner__copy { position: absolute; inset-block-end: var(--space-4); inset-inline-start: var(--space-4); max-inline-size: 28rem; padding: var(--space-3) var(--space-4); background: color-mix(in oklab, var(--color-surface) 88%, transparent); }
    .cms-banner__headline { font-weight: 600; margin: 0; }
    .cms-banner__link { color: inherit; text-decoration: none; }
    .cms-banner--linked .cms-banner__link::after { content: ''; position: absolute; inset: 0; }
    .cms-banner__text { margin: var(--space-1) 0 0; }

    .cms-usp { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); list-style: none; margin: 0; padding: 0; }
    .cms-usp__item { display: flex; gap: var(--space-3); align-items: flex-start; }
    .cms-usp__icon .icon { inline-size: 1.75rem; block-size: 1.75rem; }
    .cms-usp__title { font-weight: 600; margin: 0; }
    .cms-usp__link { color: inherit; }
    .cms-usp__text { margin: var(--space-1) 0 0; color: var(--color-text-muted); }

    .cms-products__title { margin-block-end: var(--space-4); }

    .cms-video { margin: 0; }
    .cms-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-surface-2, var(--color-border)); }
    .cms-video__player { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
    .cms-video__caption { margin-block-start: var(--space-2); color: var(--color-text-muted); }

    .cms-document__link { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); text-decoration: none; color: inherit; }
    .cms-document__label { font-weight: 600; }
    .cms-document__meta { color: var(--color-text-muted); font-size: var(--step--1, 0.875rem); }
    .cms-document__description { margin-block-start: var(--space-2); }

    .cms-gallery { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); list-style: none; margin: 0; padding: 0; }
    .cms-gallery__image { aspect-ratio: 1; inline-size: 100%; object-fit: cover; }

    .cms-accordion__item { border-block-end: 1px solid var(--color-border); }
    .cms-accordion__question { padding-block: var(--space-3); font-weight: 600; cursor: pointer; }
    .cms-accordion__answer { padding-block: 0 var(--space-4); }
}

/* The editor's preview (Content D-85): the storefront in an iframe on the admin host — a link there is not a visit and
   must not navigate, script or no script; a click falls through to the block behind it, which the editor focuses. */
.is-preview a[href] { pointer-events: none; cursor: default; }

/* The cookie consent (ADR-0018 D3/D5, #676): a small box pinned to the bottom start until the visitor chooses, and the
   settings dialog. Without JavaScript the dialog is a :target overlay (the footer's #cookie-settings link); with it the
   consent-settings controller makes it a modal <dialog> (.is-enhanced), and only [open] shows it. Full width on a phone.
   The base structure; the Godzone theme re-skins it in @layer theme. */
@layer components {
    .consent-banner {
        position: fixed;
        inset-block-end: var(--space-3);
        inset-inline: var(--space-3);
        z-index: var(--z-overlay);
        display: grid;
        gap: var(--space-3);
        max-inline-size: 24rem;
        padding: var(--space-4);
        background: var(--color-surface);
        border: var(--border-width) solid var(--color-line);
        border-radius: var(--radius-panel);
        box-shadow: var(--shadow-overlay);
        color: var(--color-ink);
        font: var(--text-sm) / 1.5 var(--font-body);
    }
    .consent-banner__title { margin: 0; font-size: var(--text-md); }
    .consent-banner__text { margin: 0; color: var(--color-ink-muted); }
    .consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
    .consent-banner__choice { flex: 1 1 auto; }

    .consent-modal {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-overlay) + 1);
        inline-size: 100%;
        max-inline-size: none;
        block-size: 100%;
        max-block-size: none;
        margin: 0;
        padding: var(--space-3);
        border: 0;
        background: var(--backdrop);
        color: var(--color-ink);
        font: var(--text-sm) / 1.5 var(--font-body);
    }
    .consent-modal:not(.is-enhanced):target,
    .consent-modal[open] { display: grid; place-items: center; }
    .consent-modal::backdrop { background: transparent; }
    .consent-modal__panel {
        display: grid;
        gap: var(--space-4);
        inline-size: min(36rem, 100%);
        max-block-size: 100%;
        overflow-y: auto;
        padding: var(--space-5);
        background: var(--color-surface);
        border-radius: var(--radius-panel);
        box-shadow: var(--shadow-overlay);
    }
    .consent-modal__head { display: flex; gap: var(--space-3); align-items: start; justify-content: space-between; }
    .consent-modal__title { margin: 0; font-size: var(--text-lg); }
    .consent-modal__close {
        display: grid;
        place-items: center;
        flex: none;
        min-inline-size: var(--target-min);
        min-block-size: var(--target-min);
        color: var(--color-ink);
        font-size: var(--text-lg);
        text-decoration: none;
    }
    .consent-modal__form { display: grid; gap: var(--space-4); }
    .consent-modal__text { margin: 0; color: var(--color-ink-muted); }
    .consent-modal__categories { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--border-width) solid var(--color-line); }
    .consent-modal__category { padding-block: var(--space-3); border-block-end: var(--border-width) solid var(--color-line); }
    .consent-modal__switch { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; font-weight: var(--font-weight-medium); cursor: pointer; }
    /* a checkbox drawn as a switch (role="switch"): the track is the control's boundary (line-strong, WCAG 1.4.11) */
    .consent-modal__toggle {
        position: relative;
        flex: none;
        inline-size: 2.75rem;
        block-size: 1.5rem;
        margin: 0;
        appearance: none;
        border-radius: 999px;
        background: var(--color-line-strong);
        cursor: pointer;
        transition: background-color var(--duration-base);
    }
    .consent-modal__toggle::before {
        content: "";
        position: absolute;
        inset-block-start: 0.1875rem;
        inset-inline-start: 0.1875rem;
        inline-size: 1.125rem;
        block-size: 1.125rem;
        border-radius: 50%;
        background: var(--color-paper);
        transition: transform var(--duration-base);
    }
    .consent-modal__toggle:checked { background: var(--color-primary); }
    .consent-modal__toggle:checked::before { transform: translateX(1.25rem); }
    .consent-modal__toggle:checked:dir(rtl)::before { transform: translateX(-1.25rem); }
    .consent-modal__toggle:disabled { opacity: 0.6; cursor: not-allowed; }
    .consent-modal__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
        .consent-modal__toggle, .consent-modal__toggle::before { transition: none; }
    }
    .consent-modal__category-note { margin: var(--space-1) 0 0; color: var(--color-ink-muted); }
    .consent-modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .consent-modal__actions > .button { flex: 1 1 auto; }

    @media (width < 40rem) {
        .consent-banner { max-inline-size: none; }
        .consent-modal { padding: 0; }
        .consent-modal:not(.is-enhanced):target,
        .consent-modal[open] { place-items: end stretch; }
        .consent-modal__panel { inline-size: 100%; border-end-start-radius: 0; border-end-end-radius: 0; }
        .consent-modal__actions { flex-direction: column; }
    }
}