/*
 * И ЛАДНО storefront — «Тихая вода» design system.
 *
 * Direction: calm depth. Deep ink-teal water for narrative surfaces (hero,
 * summary rails, footer), clear paper for anything the customer has to read,
 * fill in or trust. One aqua accent carried over from ladno.land, one warm
 * sand accent reserved for subscription/loyalty moments.
 *
 * Layer order matters: `base` restyles bare elements so pages that have not
 * been re-marked-up yet still inherit the system.
 */

/* ------------------------------------------------------------------ fonts */

@font-face {
    font-family: Unbounded;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/unbounded-cyrillic-_eBBxmp.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Unbounded;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/unbounded-cyrillic-ext-3cl_V9K.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: Unbounded;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/unbounded-latin-boXcx2G.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Onest;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/onest-cyrillic-4aHSNXv.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Onest;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/onest-cyrillic-ext-s24aqlY.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: Onest;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/onest-latin-h2ySEG-.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Everything below is one cascade layer so a page stylesheet loaded after this
 * file (see the `stylesheets` block in storefront/base.html.twig) can restyle
 * shared primitives — .section, .shell, .faq, .rise, .btn, .site-main — without
 * having to out-specify rules like `.section + .section` or
 * `.faq details > :not(summary)`. Unlayered wins over layered whatever the
 * specificity, which is exactly what a bespoke page needs.
 *
 * Order inside the layer is unchanged, so pages without their own stylesheet
 * render identically.
 */
/*
 * Layer order, and it is load-bearing.
 *
 * The Yandex Delivery widget injects six unlayered stylesheets into <head>,
 * and among them a generic element reset: `details { display: block }`,
 * `summary { display: list-item }`, a smaller `button` font size. Unlayered
 * declarations beat EVERY layered one regardless of specificity, so that reset
 * was overriding our `.site-menu { display: none }` — the mobile drawer's
 * burger appeared on the desktop checkout, the header nav crowded into the
 * icons, and only on the steps that load the widget.
 *
 * Naming `yandex-widget` first makes it the weaker layer for normal
 * declarations, and the widget controller moved the injected styles into it.
 * The widget itself was unaffected: nearly all of its own rules are
 * `!important`, and for important declarations the layer order reverses — the
 * earlier layer wins. Measured in the browser: header restored, widget's own
 * controls still laid out.
 *
 * That controller was deleted on 2026-09-07 (CPO-F3): pickup points are off
 * the storefront (D-DOP-17, D-DOP-18), the file had not been registered in
 * `app.js` for a while, and while it sat in the repository the release scanner
 * was right to report an undeclared external origin nothing declares. The
 * layer order stays: it costs nothing, it is the documented answer to a real
 * measured breakage, and re-deriving it from scratch the day the map comes
 * back would cost an afternoon of head-scratching.
 */
@layer yandex-widget, storefront;

@layer storefront {

/* ----------------------------------------------------------------- tokens */

:root {
    /* Warm Amber — shared by the live storefront and the approved prototype. */
    --ink-900: #0d0d0c;
    --ink-800: #211f1b;
    --ink-700: #3a352e;
    --ink-600: #565047;

    /* Aqua — the single brand accent, inherited from ladno.land. */
    --aqua: #f78600;
    --aqua-bright: #ffb528;
    --aqua-deep: #d96f00;
    --aqua-ink: #a84f00;
    --aqua-tint: #fff0dc;
    --aqua-tint-strong: #ffddb0;

    /* Sand — reserved for subscription / loyalty only. Never decorative. */
    --sand: #f0d4a8;
    --sand-ink: #7a5a2a;
    --sand-tint: #fbf1e2;

    /* Paper — everything the customer reads or fills in. */
    --paper: #faf8f5;
    --surface: #fff;
    --surface-sunk: #f1ece4;
    --text: #0d0d0c;
    --text-soft: #56534c;
    --muted: #746e64;
    --line: #e3ddd4;
    --line-strong: #cfc5b8;

    /* States. */
    --ok: #1e7f63;
    --ok-tint: #e2f4ee;
    --warn: #9a6a12;
    --warn-tint: #fbf0da;
    --danger: #c4404f;
    --danger-tint: #fceaec;

    /* Rhythm — 4px base. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4rem;
    --s9: 6rem;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-pill: 999px;

    --wide: 72rem;
    --mid: 56rem;
    --narrow: 34rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* Glass rim instead of drop shadows: a hairline plus an inner highlight. */
    --rim: inset 0 1px 0 rgb(255 255 255 / 80%);
    --lift-1: 0 1px 2px rgb(6 23 32 / 5%), 0 6px 18px -10px rgb(6 23 32 / 22%);
    --lift-2: 0 2px 4px rgb(6 23 32 / 6%), 0 20px 44px -22px rgb(6 23 32 / 32%);
    --lift-dark: 0 0 0 1px rgb(255 255 255 / 8%), 0 18px 48px rgb(0 0 0 / 34%);

    --font-display: Unbounded, "Segoe UI", system-ui, sans-serif;
    --font-text: Onest, "Segoe UI", system-ui, -apple-system, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: light;
}

html[data-theme="dark"] {
    --paper: #101315;
    --surface: #191d20;
    --surface-sunk: #0a0c0e;
    --text: #f4f1eb;
    --text-soft: #c7c0b5;
    --muted: #a09b92;
    --line: rgb(244 241 235 / 14%);
    --line-strong: rgb(244 241 235 / 24%);
    --ink-900: #070809;
    --ink-800: #101315;
    color-scheme: dark;
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--paper);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

img,
svg {
    max-width: 100%;
    display: block;
}

/*
 * Several components below set `display` on elements the Stimulus controllers
 * toggle with the `hidden` attribute (delivery loading row, checkout status,
 * pickup map). Keep the attribute authoritative.
 */
[hidden] {
    display: none !important;
}

a {
    color: var(--aqua-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.2s var(--ease);
}

a:hover {
    color: var(--aqua-deep);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s3);
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem);
    letter-spacing: -0.03em;
    margin-top: var(--s6);
}

h3 {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

h4 {
    font-size: 0.95rem;
}

:where(h2, h3):first-child {
    margin-top: 0;
}

p {
    margin: 0 0 var(--s3);
    text-wrap: pretty;
}

ul,
ol {
    margin: 0 0 var(--s4);
    padding-left: 1.15rem;
}

li {
    margin-bottom: var(--s1);
}

strong,
b {
    font-weight: 600;
}

code,
kbd {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
    font-size: 0.88em;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: var(--aqua-tint);
    color: var(--aqua-ink);
}

hr {
    height: 1px;
    border: 0;
    margin: var(--s6) 0;
    background: var(--line);
}

/* Prices, counters, dates — brand numerals. */
.num,
.price,
td:has(+ td),
time {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ layout shell */

.skip-link {
    position: absolute;
    left: var(--s4);
    top: var(--s2);
    z-index: 200;
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    background: var(--ink-900);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
}

.shell {
    width: min(var(--wide), 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.shell--mid {
    width: min(var(--mid), 100% - var(--gutter) * 2);
}

.shell--narrow {
    width: min(var(--narrow), 100% - var(--gutter) * 2);
}

/* ---------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgb(242 247 248 / 82%);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
    padding-top: env(safe-area-inset-top, 0px);
}
body:has(.test-mode-banner) .site-header {
    padding-top: 0;
}

.site-header__inner {
    width: min(var(--wide), 100% - var(--gutter) * 2);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: 4rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    text-decoration: none;
}

/* The wordmark carries the brand now, so it gets an explicit box: width and
   height attributes on the tag reserve the row and stop the header jumping
   while the image loads. */
.site-brand img {
    display: block;
    width: auto;
    height: clamp(1.35rem, 2.6vw, 1.75rem);
    transform-origin: 8% 54%;
    transition:
        filter 0.2s linear,
        transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.site-brand:hover img,
.site-brand:focus-visible img {
    transform: rotate(-5deg) skewX(2deg) skewY(-0.3deg);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45rem 0.8rem;
    border-radius: var(--r-pill);
    color: var(--text-soft);
    font-size: 0.94rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.site-nav a:hover {
    background: var(--aqua-tint);
    color: var(--aqua-ink);
}

.site-nav a[aria-current="page"] {
    background: var(--ink-900);
    color: #fff;
}

html[data-theme="dark"] .site-nav a[aria-current="page"] {
    background: #fff;
    color: #0d0d0c;
}

.site-nav__cart {
    font-weight: 600;
    color: var(--ink-900);
}

.site-nav__count {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--aqua);
    color: var(--ink-900);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Mobile drawer — CSS only, no controller needed. */
.site-menu {
    display: none;
}

.site-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text);
    box-shadow: none;
    cursor: pointer;
    transition-property: background-color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.site-menu > summary:hover {
    background: color-mix(in srgb, var(--text) 9%, transparent);
}

.site-menu > summary:active {
    transform: scale(0.96);
}

.site-menu > summary::-webkit-details-marker {
    display: none;
}

.site-menu__bars,
.site-menu__bars::before,
.site-menu__bars::after {
    display: block;
    width: 1.05rem;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition-property: transform, opacity, background-color;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease);
}

.site-menu__bars::before,
.site-menu__bars::after {
    content: "";
    position: relative;
}

.site-menu__bars::before {
    top: -6px;
}

.site-menu__bars::after {
    top: 4px;
}

.site-menu[open] .site-menu__bars {
    background: transparent;
}

.site-menu[open] .site-menu__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.site-menu[open] .site-menu__bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

.site-menu__panel {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    margin-top: var(--s3);
    padding: var(--s2);
    display: grid;
    gap: 2px;
    max-height: min(70vh, calc(100dvh - 6rem));
    overflow-y: auto;
    border: 0;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--lift-2);
    z-index: 3;
}

.site-menu__panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    transition-property: background-color, color, transform, opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.site-menu__panel a:hover {
    background: var(--surface-sunk);
    color: var(--text);
}

.site-menu__panel a:active {
    transform: scale(0.96);
}

.site-menu__count {
    font-variant-numeric: tabular-nums;
}

.site-menu__group {
    display: grid;
    gap: 2px;
    margin: 4px 0 2px;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface-sunk);
}

.site-menu__label {
    margin: 0;
    padding: 0.4rem 0.85rem 0.2rem;
    color: var(--text-soft);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.site-menu__group a {
    min-height: 40px;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
}

.site-menu__group a:hover {
    background: var(--surface);
}

.site-menu__group a[aria-current="page"],
.site-menu__group a[aria-current="page"]:hover {
    background: var(--text);
    color: var(--surface);
}

html[data-theme="dark"] .site-menu__group a[aria-current="page"],
html[data-theme="dark"] .site-menu__group a[aria-current="page"]:hover {
    background: #fff;
    color: #0d0d0c;
}

.site-menu__exit {
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}

/* ---------- main + footer */

.site-main {
    flex: 1 0 auto;
    width: min(var(--wide), 100% - var(--gutter) * 2);
    margin: var(--s6) auto var(--s8);
}

/* Home and other narrative pages paint their own full-bleed bands. */
.site-main--bleed {
    width: 100%;
    margin: 0 0 var(--s8);
}

/*
 * Same closing screen as the home prototype. Tokens live on the footer so
 * inner pages (which do not load home-prototype.css) still get the charcoal
 * band; on `/` that sheet reverts this layer and paints `.footer` itself.
 */
.footer.site-footer {
    --ink: #f4f1eb;
    --ink-soft: #9f9a91;
    --line: rgba(244, 241, 235, 0.14);
    --orange: var(--aqua);
    flex-shrink: 0;
    padding: clamp(72px, 10vh, 132px) 0 clamp(40px, 6vh, 64px);
    background: #0b0e10;
    color: var(--ink);
    font-size: 1rem;
    line-height: normal;
}

.footer.site-footer .shell {
    width: min(1180px, 100% - clamp(36px, 8vw, 120px));
    margin-inline: auto;
}

.footer.site-footer .rise {
    animation: none;
    opacity: 1;
    transform: none;
}

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 1.05fr) auto;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 36px;
    align-items: start;
}

.footer__brand,
.footer__nav,
.footer__legal,
.footer__mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__mark {
    justify-self: end;
    align-self: center;
    /* Caption sits under the mark, so the box center is below the white mass. */
    transform: translateY(-48px);
}

.footer__logo {
    --box: 1080;
    --mx: 57;
    --my: 425;
    --mw: 967;
    --mh: 231;
    display: block;
    width: min(52vw, 200px);
    aspect-ratio: 967 / 231;
    overflow: hidden;
    margin: 0 0 16px;
}

.footer__logo img {
    display: block;
    width: calc(100% * var(--box) / var(--mw));
    max-width: none;
    height: auto;
    margin-left: calc(-100% * var(--mx) / var(--mw));
    margin-top: calc(-100% * var(--my) / var(--mw));
    filter: brightness(0) invert(1);
}

.footer__tag {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__contacts p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.4;
}

.footer__contacts a,
.footer__nav a,
.footer__docs a,
.footer .footer__docs button {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    transition: color 0.2s linear;
}

.footer .footer__docs button {
    appearance: none;
    display: inline;
    align-items: unset;
    justify-content: unset;
    gap: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-transform: none;
    cursor: pointer;
    text-align: left;
}

.footer .footer__docs button:hover,
.footer .footer__docs button:active {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--orange);
}

.footer__contacts a:hover,
.footer__nav a:hover,
.footer__docs a:hover {
    color: var(--orange);
}

.footer__nav {
    gap: 28px;
}

.footer__nav nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}

.footer__legal {
    gap: 20px;
}

.footer__docs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__legal p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.footer__legal a[href^="tel:"],
.footer__legal a[x-apple-data-detectors] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

.footer__made {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.footer__made img {
    display: block;
    width: 80px;
    height: auto;
    transition: opacity 0.2s linear;
}

.footer__made span {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    color: var(--ink);
}

.footer__made:hover img {
    opacity: 0.82;
}

.footer__made:active {
    transform: scale(0.96);
}

.footer__copy {
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
}

@media (max-width: 960px) {
    .footer__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "brand mark"
            "nav legal";
    }

    .footer__brand { grid-area: brand; }
    .footer__nav { grid-area: nav; }
    .footer__legal { grid-area: legal; }

    .footer__mark {
        grid-area: mark;
        justify-self: start;
        align-self: center;
        transform: none;
    }
}

@media (max-width: 640px) {
    .footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "brand brand"
            "nav legal"
            "mark mark";
    }

    .footer__mark {
        justify-self: start;
        align-self: start;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer__made,
    .footer__made img {
        transition: none;
    }
}

/* ---------------------------------------------------------------- surfaces */

/*
 * Bare <section> elements get card treatment so pages that have not been
 * re-marked-up still look right. The fallback sits inside :where() so its
 * specificity is zero — any explicit class (.deep, .card--sunk, .empty-state)
 * wins without needing overrides.
 */
.card,
.panel,
:where(.site-main:not(.site-main--bleed) > section),
:where(.site-main > .stack > section),
:where(.layout-rail > .stack > section),
:where(.account-page > section),
:where(.content-page > article) {
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--rim), var(--lift-1);
}

:where(.site-main:not(.site-main--bleed) > section),
:where(.site-main > .stack > section),
:where(.account-page > section) {
    margin: 0 0 var(--s4);
}

:where(.site-main > section:last-child) {
    margin-bottom: 0;
}

.card--sunk {
    background: var(--surface-sunk);
    box-shadow: none;
}

.card--interactive {
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--aqua);
    box-shadow: var(--rim), var(--lift-2);
}

/* Dark "water" surface used for hero bands and summary rails. */
.deep {
    position: relative;
    isolation: isolate;
    color: rgb(232 244 249 / 88%);
    background:
        radial-gradient(ellipse 70% 90% at 8% 0%, rgb(94 200 232 / 18%), transparent 62%),
        radial-gradient(ellipse 60% 70% at 100% 100%, rgb(58 158 196 / 16%), transparent 60%),
        linear-gradient(168deg, var(--ink-800), var(--ink-900) 70%);
}

.deep h1,
.deep h2,
.deep h3,
.deep strong {
    color: #fff;
}

.deep a {
    color: var(--aqua-bright);
}

.deep .muted {
    color: rgb(198 222 233 / 68%);
}

/*
 * Signature: the meniscus. A single elliptical curve where the deep water
 * meets the paper. Used instead of a hard section border.
 */
.deep--meniscus::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -6%;
    right: -6%;
    bottom: -1px;
    height: clamp(2rem, 5vw, 3.75rem);
    background: var(--paper);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -1px 0 rgb(94 200 232 / 35%);
}

/* --------------------------------------------------------------- typography */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    margin: 0 0 var(--s3);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--aqua-deep);
}

.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentcolor;
    opacity: 0.6;
}

.deep .eyebrow {
    color: var(--aqua-bright);
}

/*
 * Имя владельца кабинета под заголовком «Личный кабинет». Подчинено ему по
 * размеру, но набрано плотнее и контрастнее подписи ниже: это ответ на
 * «кто я здесь», а не описание раздела. Пока имени нет, здесь почта —
 * длинная строка переносится по символам, а не выталкивает вёрстку.
 */
.account-holder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    margin: 0 0 var(--s3);
}

.account-holder__copy {
    flex: 1 1 12rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
    min-width: 0;
}

.account-identity__kicker {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.45rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text);
    text-wrap: pretty;
}

.account-holder__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

button[type="button"].account-holder__edit,
button.account-holder__edit,
.account-holder__edit {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-height: 40px;
    min-width: 40px;
    margin: 0;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-color: transparent;
    border-radius: var(--r-xs);
    background: transparent;
    box-shadow: none;
    color: var(--aqua-ink);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, var(--aqua-ink) 55%, transparent);
    transform: none;
    transition-property: color, text-decoration-color, transform;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

button[type="button"].account-holder__edit:hover,
button.account-holder__edit:hover,
.account-holder__edit:hover {
    color: var(--aqua-deep);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    text-decoration-color: currentColor;
}

button[type="button"].account-holder__edit:active,
button.account-holder__edit:active,
.account-holder__edit:active {
    transform: scale(0.96);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

button[type="button"].account-holder__edit:focus-visible,
button.account-holder__edit:focus-visible,
.account-holder__edit:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 2px;
}

.account-holder__form {
    flex: 1 1 16rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.75rem;
}

.account-holder__form[hidden] {
    display: none;
}

.account-holder__form .form-row,
.account-holder__form div:has(> input) {
    flex: 1 1 12rem;
    margin: 0;
}

.account-holder__notice {
    flex: 1 1 100%;
    margin: 0;
    color: var(--danger);
    font-size: 0.9rem;
}

.account-holder__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-avatar {
    position: relative;
    flex: 0 0 auto;
}

button[type="button"].account-avatar__trigger,
.account-avatar__trigger {
    appearance: none;
    position: relative;
    display: block;
    width: 4.25rem;
    height: 4.25rem;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transform: none;
    outline: none;
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

button[type="button"].account-avatar__trigger:hover,
.account-avatar__trigger:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-1px);
}

button[type="button"].account-avatar__trigger:active,
.account-avatar__trigger:active {
    transform: scale(0.96);
    background: transparent;
}

button[type="button"].account-avatar__trigger:focus-visible,
.account-avatar__trigger:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 3px;
}

/*
    The round frame of the account page portrait, and with overflow:hidden it is
    also what crops the drawing inside it. The picker tiles are deliberately
    square — a circle takes the ears off the animals — so this is the one place
    where the round shape is kept on purpose.
*/
.account-avatar__preview {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.account-avatar .avatar,
.account-avatar .avatar-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.account-avatar__overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgb(13 13 12 / 48%);
    display: grid;
    place-items: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.account-avatar__trigger:hover .account-avatar__overlay,
.account-avatar__trigger:focus-visible .account-avatar__overlay {
    opacity: 1;
}

.account-avatar__overlay-icon {
    width: 1.35rem;
    height: 1.35rem;
    stroke: #fff;
}

/* -------------------------------------------------- account avatar modal */

.account-avatar-modal {
    width: min(32rem, calc(100% - 2rem));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 24px 70px rgb(6 23 32 / 28%);
}

.account-avatar-modal::backdrop {
    background: rgb(6 23 32 / 52%);
    backdrop-filter: blur(3px);
}

.account-avatar-modal[open] {
    animation: avatar-modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes avatar-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.account-avatar-modal__content {
    display: flex;
    flex-direction: column;
}

.account-avatar-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--line);
}

.account-avatar-modal__header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    font-family: var(--font-display);
    font-weight: 600;
}

.account-avatar-modal__header p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

button[type="button"].account-avatar-modal__close,
button.account-avatar-modal__close,
.account-avatar-modal__close {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button[type="button"].account-avatar-modal__close:hover,
button.account-avatar-modal__close:hover,
.account-avatar-modal__close:hover {
    background: var(--aqua-tint);
    border-color: var(--aqua);
    color: var(--aqua-ink);
    box-shadow: none;
    transform: none;
}

.account-avatar-modal__body {
    padding: var(--s4) var(--s5);
    max-height: 60vh;
    overflow-y: auto;
}

.account-avatar-modal .avatar-choice__legend {
    display: none;
}

.account-avatar-modal .avatar-choice {
    margin: 0;
}

.account-avatar-modal .account-avatar__form {
    margin: 0;
}

.account-avatar-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: var(--s3) var(--s5);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 95%, var(--text) 5%);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
}

.account-avatar__form {
    width: 100%;
    margin: 0 0 var(--s4);
}

.avatar-choice {
    border: 0;
    margin: 0 0 0.85rem;
    padding: 0;
    min-width: 0;
}

.avatar-choice__legend {
    padding: 0;
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.avatar-choice__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.avatar-choice__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.avatar-choice__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.avatar-choice__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.65rem 0.4rem 0.55rem;
    border-radius: 1.05rem;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    outline: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    transition: outline-color 0.15s ease, background-color 0.15s ease, transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.avatar-choice__option:has(:checked) .avatar-choice__card {
    outline: 2px solid var(--aqua);
    background: color-mix(in srgb, var(--aqua) 14%, transparent);
}

.avatar-choice__option:has(:focus-visible) .avatar-choice__card {
    outline: 2px solid var(--aqua);
}

.avatar-choice__option:active .avatar-choice__card {
    transform: scale(0.96);
}

.avatar-choice__card .avatar,
.avatar-choice__card .avatar-fallback {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
}

.avatar-choice__name {
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: center;
}

.avatar-choice--picker {
    min-width: 0;
}

.storefront-auth button.avatar-choice__trigger,
button.avatar-choice__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 40px;
    margin: 0 0 1rem;
    padding: 0.45rem 0.9rem 0.45rem 0.55rem;
    border: 1px solid rgb(13 13 12 / 14%);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition-property: background-color, border-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

html[data-theme="dark"] .storefront-auth button.avatar-choice__trigger,
html[data-theme="dark"] button.avatar-choice__trigger {
    border-color: rgb(255 255 255 / 14%);
}

.storefront-auth button.avatar-choice__trigger:hover,
button.avatar-choice__trigger:hover {
    background: var(--surface);
    color: var(--text);
    border-color: color-mix(in srgb, var(--aqua) 55%, var(--line-strong));
    box-shadow: none;
    transform: none;
}

.storefront-auth button.avatar-choice__trigger:focus-visible,
button.avatar-choice__trigger:focus-visible {
    outline: none;
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

.storefront-auth button.avatar-choice__trigger:active,
button.avatar-choice__trigger:active {
    transform: scale(0.96);
}

.avatar-choice__trigger-preview {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 0.7rem;
    min-width: 0;
}

.avatar-choice__trigger-preview .avatar,
.avatar-choice__trigger-preview .avatar-fallback {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    object-fit: cover;
}

.avatar-choice__trigger-preview .avatar-choice__name,
.avatar-choice__card .avatar-choice__name {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.avatar-choice__trigger-hint {
    flex: 0 0 auto;
    color: var(--aqua);
    font-size: 0.82rem;
    font-weight: 600;
}

[data-js] .avatar-choice--picker .avatar-choice__sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-property: opacity, visibility;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

[data-js] .avatar-choice--picker.is-open .avatar-choice__sheet {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.avatar-choice__backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(0 0 0 / 58%);
    box-shadow: none;
    cursor: pointer;
}

html:not([data-js]) .avatar-choice--picker .avatar-choice__trigger,
html:not([data-js]) .avatar-choice--picker .avatar-choice__backdrop,
html:not([data-js]) .avatar-choice--picker .avatar-choice__header {
    display: none !important;
}

.storefront-auth button.avatar-choice__backdrop,
button.avatar-choice__backdrop {
    display: block;
    min-height: 0;
    background: rgb(0 0 0 / 58%);
    color: transparent;
    box-shadow: none;
}

.storefront-auth button.avatar-choice__backdrop:hover,
button.avatar-choice__backdrop:hover {
    background: rgb(0 0 0 / 58%);
    color: transparent;
    transform: none;
    box-shadow: none;
}

[data-js] .avatar-choice--picker .avatar-choice__popover {
    position: relative;
    z-index: 1;
    width: min(24rem, 100%);
    max-height: min(36rem, calc(100dvh - 2.5rem));
    overflow: auto;
    padding: var(--flow-pad, 20px);
    border-radius: var(--flow-radius, 32px);
    background: var(--surface);
    box-shadow: var(--flow-lift);
    opacity: 0;
    transform: translateY(8px);
    transition-property: opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

[data-js] .avatar-choice--picker.is-open .avatar-choice__popover {
    opacity: 1;
    transform: translateY(0);
}

html[data-theme="dark"] [data-js] .avatar-choice--picker .avatar-choice__popover {
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 12%),
        0 18px 40px -10px rgb(0 0 0 / 70%);
}

.avatar-choice__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.avatar-choice__header h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.storefront-auth button.avatar-choice__close,
button.avatar-choice__close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
    transition-property: color, background-color, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.storefront-auth button.avatar-choice__close:hover,
button.avatar-choice__close:hover {
    background: var(--surface-sunk);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.storefront-auth button.avatar-choice__close:active,
button.avatar-choice__close:active {
    transform: scale(0.96);
}

[data-js] .avatar-choice--picker .avatar-choice__card {
    border-radius: var(--flow-inner, 12px);
}

.lede {
    max-width: 40ch;
    font-size: clamp(1rem, 0.94rem + 0.35vw, 1.15rem);
    line-height: 1.55;
    color: var(--text-soft);
}

.deep .lede {
    color: rgb(232 244 249 / 82%);
}

.muted {
    color: var(--muted);
    font-size: 0.92rem;
}

.price {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-900);
}

.price--hero {
    font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
    line-height: 1;
}

/* Same role in a narrow summary rail, where the hero size would wrap. */
.price--rail {
    font-size: 1.9rem;
    line-height: 1.05;
}

.price--strike {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--muted);
    text-decoration: line-through;
}

/* The list price set inside the pack caption. It is part of a sentence, so it
   inherits that sentence's type: borrowing .price--strike here would swap the
   family and size mid-line and reflow the paragraph the moment a volume rung
   is reached. Only the decoration and the colour change. */
.buybox__pack-price--struck {
    color: var(--muted);
    text-decoration: line-through;
}

.price__unit {
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted);
}

/* ------------------------------------------------------------------ buttons */

button,
input[type="submit"],
.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.6rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -12px rgb(6 23 32 / 60%);
}

button:active,
.btn:active {
    transform: translateY(0) scale(0.985);
}

button:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Primary action — aqua, reserved for the one thing we want clicked. */
.btn--primary,
button.btn--primary {
    background: linear-gradient(140deg, var(--aqua-bright), var(--aqua) 45%, var(--aqua-deep));
    color: var(--ink-900);
    box-shadow: 0 1px 2px rgb(94 200 232 / 35%), 0 10px 26px -12px rgb(94 200 232 / 70%);
}

.btn--primary:hover,
button.btn--primary:hover {
    color: var(--ink-900);
    box-shadow: 0 2px 4px rgb(94 200 232 / 40%), 0 16px 34px -14px rgb(94 200 232 / 85%);
}

/* Secondary — quiet outline. Also the default for non-submit buttons so the
   dozens of small "Удалить"/"Изменить" controls do not shout. */
.btn--ghost,
button[type="button"],
button.secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line-strong);
    box-shadow: none;
}

.btn--ghost:hover,
button[type="button"]:hover,
button.secondary:hover {
    color: var(--aqua-ink);
    border-color: var(--aqua);
    background: var(--aqua-tint);
    box-shadow: none;
}

.btn--danger {
    background: var(--surface);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, white);
    box-shadow: none;
}

.btn--danger:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.btn--small {
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
}

.btn--block {
    width: 100%;
}

/*
 * Progressive enhancement without the flash.
 *
 * `html[data-js]` is stamped by the inline script in base.html.twig, before the
 * first paint. Controls that only work once a Stimulus controller is attached
 * used to be toggled in `connect()` — after paint — so the cart drew its no-JS
 * layout, then redrew itself a moment later. Deciding it here means the right
 * layout is the first one on screen, and the fallback is still exactly right
 * for a browser that never runs the script.
 */
[data-js] [data-enhanced-only="off"] {
    display: none !important;
}

html:not([data-js]) [data-enhanced-only="on"] {
    display: none;
}

/*
 * CXG-37: the check button that applies one field of the cart's pricing card.
 * Square, so it reads as an action on the input beside it rather than as a
 * second call to action competing with «Продолжить».
 */
.btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 2.25rem;
    width: 2.25rem;
    padding: 0;
}

/* The field takes the room; the button takes what it needs. */
.row--tight > input {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * The balance and the ceiling, stacked tight above the bonus field: three
 * short lines that belong to the input under them, not to the card.
 */
.bonus-balance > p + p {
    margin-top: var(--s1);
}

.bonus-balance__amount {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.deep button,
.deep .btn--ghost {
    background: rgb(255 255 255 / 8%);
    border-color: rgb(255 255 255 / 18%);
    color: #fff;
}

.deep .btn--primary {
    background: linear-gradient(140deg, var(--aqua-bright), var(--aqua) 45%, var(--aqua-deep));
    color: var(--ink-900);
    border-color: transparent;
}

/* Link that should read as an action rather than prose. */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentcolor;
    padding-bottom: 1px;
}

.link-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-bottom: var(--s4);
    color: var(--muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.link-back:hover {
    color: var(--aqua-ink);
}

/* -------------------------------------------------------------------- forms */

label {
    display: block;
    margin: 0 0 var(--s1);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-soft);
}

input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
select,
textarea {
    width: 100%;
    max-width: 30rem;
    display: block;
    margin: 0 0 var(--s4);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

select {
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 1.25rem, calc(100% - 0.75rem) 1.25rem;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--aqua-deep);
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 65%, white);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.18rem 0.55rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--aqua-deep);
}

/*
 * Consent rows: the label wraps the control plus running prose with inline
 * links. Flex/grid would turn every text node and <a> into a separate track,
 * so the checkbox is pulled out of flow and the prose keeps normal inline
 * wrapping.
 */
.field-check,
form label:has(> input[type="checkbox"]) {
    display: block;
    position: relative;
    margin: 0 0 var(--s3);
    padding-left: 1.75rem;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-soft);
    cursor: pointer;
}

.field-check > input[type="checkbox"],
form label:has(> input[type="checkbox"]) > input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.25rem;
    margin: 0;
}

.field-grid {
    display: grid;
    gap: 0 var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.field-grid input,
.field-grid select {
    max-width: none;
}

/*
 * Symfony's default form_div_layout renders a checkbox row as
 * <div><input type=checkbox><label></div>. Turn that back into a real row so
 * consent blocks read as sentences, not as stacked fragments.
 */
form div:has(> input[type="checkbox"]) {
    position: relative;
    display: block;
    margin-bottom: var(--s2);
    padding-left: 1.75rem;
}

form div:has(> input[type="checkbox"]) > input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.3rem;
    margin: 0;
}

form div:has(> input[type="checkbox"]) > label {
    display: block;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-soft);
    cursor: pointer;
}

form div:has(> input[type="checkbox"]) > ul,
form div:has(> input[type="checkbox"]) > .form-error {
    margin: 0;
}

/* Legal links that belong to the consent row directly above them. */
.consent-note {
    margin: 0 0 var(--s4);
    padding-left: 1.75rem;
    font-size: 0.86rem;
    color: var(--muted);
}

.form-error,
ul li .form-error,
.form-error-icon {
    color: var(--danger);
    font-size: 0.85rem;
}

ul.form-error {
    list-style: none;
    padding: 0;
    margin: -0.6rem 0 var(--s3);
}

fieldset {
    margin: 0 0 var(--s5);
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
    margin-bottom: var(--s3);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* ------------------------------------------------------------------- tables */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--s4);
    font-size: 0.94rem;
}

th,
td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-color: var(--line-strong);
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background-color 0.15s linear;
}

tbody tr:hover {
    background: var(--surface-sunk);
}

/* Tables become stacked rows on phones; headers come from data-label. */
@media (max-width: 40rem) {
    .table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .table-stack tbody tr {
        display: grid;
        gap: 0.15rem;
        padding: var(--s3) 0;
        border-bottom: 1px solid var(--line);
    }

    .table-stack td {
        display: flex;
        justify-content: space-between;
        gap: var(--s4);
        padding: 0.2rem 0;
        border: 0;
    }

    .table-stack td::before {
        content: attr(data-label);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
    }
}

/* ------------------------------------------------------------------ feedback */

.flash,
[data-test="flash-success"],
[data-test="flash-error"],
[data-test="login-error"],
[data-test="checkout-error"],
[data-test="delivery-error"],
p[data-test="subscription-error"],
p[data-test="subscription-success"] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 var(--s4);
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--muted);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 0.95rem;
}

.flash-success,
[data-test="flash-success"],
p[data-test="subscription-success"] {
    border-left-color: var(--ok);
    background: var(--ok-tint);
    color: var(--ok);
}

.flash-error,
[data-test="flash-error"],
[data-test="login-error"],
[data-test="checkout-error"],
[data-test="delivery-error"],
p[data-test="subscription-error"] {
    border-left-color: var(--danger);
    background: var(--danger-tint);
    color: var(--danger);
}

.storefront-flow [data-test="delivery-error"] {
    border-color: transparent;
    border-left: 3px solid var(--aqua);
    background: var(--warn-tint);
    color: var(--warn);
}

html[data-theme="dark"] .storefront-flow [data-test="delivery-error"] {
    background: color-mix(in srgb, var(--aqua) 18%, var(--surface));
    border-left-color: var(--aqua);
    color: var(--text);
}

.note {
    padding: var(--s4);
    border-radius: var(--r-md);
    border-left: 3px solid var(--aqua);
    background: var(--aqua-tint);
    color: var(--aqua-ink);
    font-size: 0.94rem;
}

.note > :last-child {
    margin-bottom: 0;
}

.note--sand {
    border-left-color: var(--sand);
    background: var(--sand-tint);
    color: var(--sand-ink);
}

/* -------------------------------------------------------------------- status */

.status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.7rem 0.26rem;
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    white-space: nowrap;
}

.status::before {
    content: none;
    display: none;
}

.status--ok {
    background: var(--ok-tint);
    border-color: color-mix(in srgb, var(--ok) 25%, white);
    color: var(--ok);
}

.status--warn {
    background: var(--warn-tint);
    border-color: color-mix(in srgb, var(--warn) 25%, white);
    color: var(--warn);
}

.status--danger {
    background: var(--danger-tint);
    border-color: color-mix(in srgb, var(--danger) 25%, white);
    color: var(--danger);
}

.status--info {
    background: var(--aqua-tint);
    border-color: var(--aqua-tint-strong);
    color: var(--aqua-ink);
}

/* --------------------------------------------------------- page primitives */

.page-head {
    margin-bottom: var(--s6);
}

.page-head > :last-child {
    margin-bottom: 0;
}

.stack > * + * {
    margin-top: var(--s4);
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
}

.row--between {
    justify-content: space-between;
}

.row--tight {
    gap: var(--s2);
}

.grid-cards {
    display: grid;
    gap: var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Two-column commerce layout: content + sticky summary rail. */
.layout-rail {
    display: grid;
    gap: var(--s5);
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 21rem;
}

.layout-rail__aside {
    position: sticky;
    top: 5rem;
}

/*
 * The delivery step carries more in its rail than the review step does — a
 * tariff card with a day picker inside it, not just a column of figures — so it
 * gets a wider one. 70/30: at three-quarters the tariff name, the price and the
 * date field were fighting for the same line.
 */
.layout-rail--delivery {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

/* The rail's «nothing chosen yet» card: present, quiet, clearly a slot. */
.delivery-panel--placeholder {
    border-style: dashed;
}

@media (max-width: 75rem) {
    /* Below this the rail cannot keep shrinking with the page — a percentage
       would squeeze the date field until the month name wrapped. */
    .layout-rail--delivery {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }
}

@media (max-width: 60rem) {
    .layout-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-rail__aside {
        position: static;
    }
}

@media (max-width: 60rem) {
    .layout-rail--delivery {
        grid-template-columns: minmax(0, 1fr);
    }
}

.definition {
    display: grid;
    grid-template-columns: 1fr auto;
    /* Column gap used to split the «Итого» hairline into two dashes.
       Spacing lives on the label so the total border can run edge to edge. */
    row-gap: 0.55rem;
    column-gap: 0;
    margin: 0;
    font-size: 0.95rem;
}

.definition dt {
    color: var(--muted);
    padding-right: var(--s4);
}

.definition dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The label block on the product page, below the marketing copy. */
.product-spec {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    /* The buy box links here by fragment; the sticky header would cover the
       heading it lands on. */
    scroll-margin-top: 5rem;
}

.product-spec h2 {
    margin-top: var(--s5);
    font-size: 1.15rem;
}

.product-spec > h2:first-child {
    margin-top: 0;
}

/*
 * Label/value pairs that carry sentences rather than sums — requisites,
 * addresses, a composition. `.definition` right-aligns its values for money
 * columns, which turns a two-line address into a ragged block.
 */
.spec-list {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
    gap: var(--s2) var(--s5);
    margin: var(--s4) 0 var(--s5);
    font-size: 0.95rem;
}

.spec-list dt {
    color: var(--muted);
}

.spec-list dd {
    margin: 0;
}

@media (max-width: 40rem) {
    .spec-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .spec-list dd {
        margin-bottom: var(--s3);
    }
}

.definition__total {
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
}

.definition dt.definition__total {
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
}

/* ------------------------------------------------------------- account area */

.site-account-nav {
    width: min(var(--wide), 100% - var(--gutter) * 2);
    margin: 0.5rem auto 0;
    display: flex;
    gap: 0.15rem 0.2rem;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.site-account-nav::-webkit-scrollbar {
    display: none;
}

.site-account-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.7rem 0.85rem 0.8rem;
    margin-bottom: -1px;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 transparent;
    transition-property: color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.site-account-nav a:hover {
    background: transparent;
    color: var(--text);
}

.site-account-nav a:active {
    transform: scale(0.96);
}

.site-account-nav a[aria-current="page"] {
    background: transparent;
    color: var(--text);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--text);
}

html[data-theme="dark"] .site-account-nav a[aria-current="page"] {
    background: transparent;
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--text);
}

.account-page,
.content-page {
    width: min(var(--mid), 100%);
    margin-inline: auto;
}

.account-page > header,
.content-page > header {
    margin-bottom: var(--s6);
}

.account-list {
    display: grid;
    gap: 8px;
    margin: 0 0 var(--s4);
    padding: 0;
    list-style: none;
}

.account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: var(--flow-inner, 12px);
    background: var(--surface-sunk);
    box-shadow: none;
    transition-property: background-color;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.account-card:hover {
    background: color-mix(in srgb, var(--surface-sunk) 88%, var(--text));
}

.account-card h3,
.account-card__heading {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.account-card h3:has(.account-card__unit) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.account-card__unit {
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text);
}

.account-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    text-wrap: pretty;
}

.account-card__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex: 0 0 auto;
}

.account-card form {
    margin: 0;
}

.account-card[data-status="current"] strong {
    color: var(--ok);
}

.account-card[data-status="stale"] strong {
    color: var(--warn);
}

.account-card[data-status="withdrawn"] strong,
.account-card[data-status="not_granted"] strong {
    color: var(--muted);
}

/* KPI tiles on the account hub. */
.stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--flow-pad, 20px);
    border: 0;
    border-radius: var(--flow-radius, 32px);
    background: var(--surface);
    box-shadow: var(--flow-lift);
    text-decoration: none;
    color: inherit;
    transition-property: box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

a.stat:hover {
    color: inherit;
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 8%),
        0 1px 2px -1px rgb(0 0 0 / 8%),
        0 2px 4px 0 rgb(0 0 0 / 6%);
}

html[data-theme="dark"] a.stat:hover {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 13%);
}

a.stat:active {
    transform: scale(0.96);
}

.stat__label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.stat__value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.stat__meta {
    font-size: 0.88rem;
    color: var(--muted);
    text-wrap: pretty;
}

body:has(.storefront-account) .site-main {
    min-width: 0;
    margin-top: var(--s6);
}

body:has(.storefront-account) .page-head {
    max-width: 48rem;
    padding: 0;
    margin-bottom: 1rem;
}

body:has(.storefront-account) .page-head h1,
body:has(.storefront-account) .page-head h1.mt-0 {
    margin: 0;
    font-size: clamp(1.7rem, 3.8vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

body:has(.storefront-account) .page-head .lede,
body:has(.storefront-account) .account-greeting,
body:has(.storefront-account) .lede {
    margin: 0 0 1.25rem;
    max-width: none;
    font-size: 1.05rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-wrap: pretty;
}

body:has(.storefront-account) .account-greeting {
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--text);
}

body:has(.storefront-account) .account-greeting + .lede {
    margin-top: 0;
}

body:has(.storefront-account) .account-identity {
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
}

body:has(.storefront-account) .account-identity .account-holder {
    flex: 1 1 auto;
    margin: 0;
    gap: 1.15rem;
    align-items: center;
}

body:has(.storefront-account) .account-identity .account-holder__name {
    font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
    letter-spacing: -0.03em;
}

body:has(.storefront-account) .account-identity .account-holder__form {
    flex: 0 0 100%;
    width: 100%;
}

body:has(.storefront-account) .account-identity__lede.lede {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0.2rem 0 0;
}

body:has(.storefront-account) .account-identity .account-avatar__trigger {
    width: 4.5rem;
    height: 4.5rem;
}

body:has(.storefront-account) h2,
body:has(.storefront-account) h3 {
    text-wrap: balance;
}

body:has(.storefront-account) .account-kpis,
body:has(.storefront-account) .loyalty-summary {
    margin-bottom: 3.5rem;
}

body:has(.storefront-account) .site-main > section,
body:has(.storefront-account) .account-page > section {
    padding: var(--flow-pad);
    border: 0;
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

body:has(.storefront-account) .account-page > section.account-pay {
    margin: 0 0 1.25rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .account-pay .btn--primary,
body:has(.storefront-account) .account-pay button.btn--primary {
    width: 100%;
}

body:has(.storefront-account) .account-pay__hint {
    margin-top: 0.85rem;
    text-wrap: pretty;
}

body:has(.storefront-account) .site-main > section h2,
body:has(.storefront-account) .account-page > section h2 {
    margin: 0 0 1.15rem;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text);
}

/*
 * Grouped records: heading on paper, one plate for the rows.
 * A section plate around sunk cards was a box-in-a-box and shoved
 * the inner surface to the right of the title.
 */
body:has(.storefront-account) .site-main > section:has(.account-list, .table-stack),
body:has(.storefront-account) .account-page > section:has(.account-list, .table-stack) {
    margin-bottom: 2.25rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .site-main > section:has(.account-list, .table-stack) > h2,
body:has(.storefront-account) .site-main > section:has(.account-list, .table-stack) > .row h2,
body:has(.storefront-account) .account-page > section:has(.account-list, .table-stack) > h2,
body:has(.storefront-account) .account-page > section:has(.account-list, .table-stack) > .row h2 {
    margin: 0 0 1.15rem;
    padding-inline: var(--flow-pad);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text);
}

body:has(.storefront-account) .site-main > section:has(.tier-ladder),
body:has(.storefront-account) .account-page > section:has(.tier-ladder) {
    margin-bottom: 2.25rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .site-main > section:has(.tier-ladder) > h2,
body:has(.storefront-account) .account-page > section:has(.tier-ladder) > h2 {
    margin: 0 0 1rem;
    padding-inline: var(--flow-pad);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text);
}

body:has(.storefront-account) .loyalty-progress-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem 1.5rem;
    margin: 0 0 1.25rem;
    padding-inline: var(--flow-pad);
}

body:has(.storefront-account) .loyalty-progress-meta > .muted {
    margin: 0;
    text-wrap: pretty;
    font-variant-numeric: tabular-nums;
}

body:has(.storefront-account) .loyalty-progress-meta__next {
    margin-left: auto;
    text-align: right;
}

body:has(.storefront-account) .account-list {
    gap: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

body:has(.storefront-account) .account-list-note {
    margin: 0.85rem 0 0;
    padding-inline: var(--flow-pad);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-soft);
    text-wrap: pretty;
}

/* Referral details use the same plate and spacing as adjacent account records. */
body:has(.storefront-account) .account-referrals__body {
    display: grid;
    gap: 1rem;
}

body:has(.storefront-account) .account-referrals__body:hover {
    background: transparent;
}

.account-referrals__fields,
.account-referrals__stats {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem 2rem;
    margin: 0;
}

.account-referrals__field {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.account-referrals__field > label,
.account-referrals__field > span,
.account-referrals__stats dt {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 400;
}

.account-referrals__field input {
    width: 100%;
    min-width: 0;
}

.account-referrals__copy {
    position: relative;
    min-width: 0;
}

.account-referrals__copy input {
    padding-right: 3.25rem;
}

.account-referrals__copy-button {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
}

.account-referrals__copy-button[hidden] {
    display: none;
}

.account-referrals__copy-button:hover {
    color: var(--text);
    background: var(--surface-sunk);
}

.account-referrals__copy-button:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: -3px;
}

.account-referrals__copy-status {
    display: block;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.account-referrals__copy-status:not(:empty) {
    margin-top: 0.4rem;
}

.account-referrals__code {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 500;
    overflow-wrap: anywhere;
    user-select: all;
}

.account-referrals__stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

.account-referrals__stats dd {
    margin: 0.4rem 0 0;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.account-referrals > .table-scroll {
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .account-referrals__fields,
    .account-referrals__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-referrals__code {
        min-height: auto;
    }
}

body:has(.storefront-account) .privacy-center .account-card h3 {
    font-size: 0.98rem;
    font-weight: 500;
}

body:has(.storefront-account) .privacy-center .account-card p {
    font-size: 0.88rem;
}

body:has(.storefront-account) .privacy-center .account-card__actions,
body:has(.storefront-account) .privacy-center .account-card__actions form,
body:has(.storefront-account) .privacy-center .account-card__actions button,
body:has(.storefront-account) .privacy-center .account-card__actions a {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
}

body:has(.storefront-account) .privacy-center .account-card .btn--small {
    min-height: 40px;
    padding: 0.4rem 1rem;
    text-wrap: pretty;
}

body:has(.storefront-account) .support-center > .lede,
body:has(.storefront-account) .support-center > section,
body:has(.storefront-account) .support-center > #account-support-status {
    width: 100%;
    max-width: calc(30rem + 2 * var(--flow-pad));
    margin-inline: auto;
}

body:has(.storefront-account) .support-center form label:has(> input[type="checkbox"]) {
    max-width: 30rem;
}

.support-center {
    width: min(var(--mid), 100%);
    margin-inline: auto;
}

.support-center > .lede {
    width: 100%;
    max-width: calc(30rem + 2 * var(--flow-pad));
    margin: 0 auto 1.15rem;
    text-wrap: pretty;
}

.support-center > section {
    width: 100%;
    max-width: calc(30rem + 2 * var(--flow-pad, 2rem));
    margin-inline: auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--flow-radius, 32px);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.support-center > #account-support-status {
    width: 100%;
    max-width: calc(30rem + 2 * var(--flow-pad, 2rem));
    margin: 0 auto 1.15rem;
}

.support-center > section h2 {
    margin: 0 0 1.15rem;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text);
    text-wrap: balance;
}

.support-center form label:has(> input[type="checkbox"]) {
    max-width: 30rem;
    margin: 0 0 var(--s3);
    padding: 0 0 0 1.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.support-center form label:has(> input[type="checkbox"]):has(input:checked) {
    border: 0;
    background: transparent;
}

.support-center form label:has(> input[type="checkbox"]) > input[type="checkbox"] {
    left: 0;
    top: 0.25rem;
}

.support-center input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
.support-center textarea,
.support-center select {
    border-radius: 16px;
    border-color: rgb(13 13 12 / 14%);
    background: var(--surface);
    box-shadow: none;
}

html[data-theme="dark"] .support-center input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
html[data-theme="dark"] .support-center textarea,
html[data-theme="dark"] .support-center select {
    border-color: rgb(255 255 255 / 14%);
}

.support-center input:focus,
.support-center textarea:focus,
.support-center select:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

.support-center button[type="submit"],
.support-center input[type="submit"] {
    padding: 18px 26px;
    min-height: 40px;
    border: 0;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.support-center button[type="submit"]:hover,
.support-center input[type="submit"]:hover {
    background: var(--aqua-bright, #ff9a1a);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.support-center button[type="submit"]:active,
.support-center input[type="submit"]:active {
    transform: scale(0.96);
}

.support-center .link-action {
    color: var(--aqua);
}

html[data-theme="dark"] .support-center a:not(.btn) {
    color: var(--aqua);
}

[data-test="support-form"] form {
    max-width: 30rem;
}

.confirm-modal {
    width: min(28rem, calc(100% - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--flow-radius, 32px);
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.confirm-modal::backdrop {
    background: rgb(13 13 12 / 46%);
    backdrop-filter: blur(8px);
}

.confirm-modal[open] {
    animation: confirm-modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes confirm-modal-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.confirm-modal__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--flow-pad, 2rem);
}

.confirm-modal__content h2 {
    margin: 0 0 0.65rem;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.confirm-modal__content p {
    margin: 0 0 1.25rem;
    color: var(--text-soft);
    text-wrap: pretty;
}

.confirm-modal__content .btn--primary,
.confirm-modal__content button.btn--primary {
    align-self: flex-start;
    min-width: 6.5rem;
}

body:has(.storefront-account) .subscription-manage {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

body:has(.storefront-account) .subscription-manage__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .subscription-manage__field input,
body:has(.storefront-account) .subscription-manage__field select {
    width: 100%;
    max-width: none;
    margin: 0;
}

body:has(.storefront-account) .subscription-manage__field .btn--ghost,
body:has(.storefront-account) .subscription-manage__field button.btn--ghost {
    align-self: flex-start;
}

/*
 * Compose sits under the list, not inside its plate — otherwise «add»
 * reads as another row of the address above. Closed: just the pill.
 * Open: its own plate, heading, fields, then Save + Cancel.
 */
body:has(.storefront-account) .account-card.account-card--compose {
    display: block;
    margin-top: 1.75rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition-property: background-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: var(--flow-ease);
}

body:has(.storefront-account) .account-card.account-card--compose:hover {
    background: transparent;
}

body:has(.storefront-account) .account-card.account-card--compose:has(.inline-editor[open]) {
    position: relative;
    padding: var(--flow-pad);
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

body:has(.storefront-account) .account-card.account-card--compose:has(.inline-editor[open])::before {
    display: block;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-wrap: balance;
}

body:has(.storefront-account) .account-card.account-card--compose:has(.inline-editor--address[open])::before {
    content: "Новый адрес";
}

body:has(.storefront-account) .account-card.account-card--compose:has(.inline-editor[open]):not(:has(.inline-editor--address))::before {
    content: "Новый получатель";
}

body:has(.storefront-account) .account-card {
    padding: var(--flow-pad);
    border-radius: 0;
    background: transparent;
}

body:has(.storefront-account) .account-card:hover {
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

body:has(.storefront-account) .account-list > .account-card:not([hidden]) + .account-card:not([hidden]) {
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

body:has(.storefront-account) .account-list.account-list--plates {
    gap: 10px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .account-list.account-list--plates > .account-card {
    padding: var(--flow-pad);
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

body:has(.storefront-account) .account-list.account-list--plates > .account-card:hover {
    background: var(--surface);
}

body:has(.storefront-account) .account-list.account-list--plates > .account-card:not([hidden]) + .account-card:not([hidden]) {
    border-top: 0;
}

body:has(.storefront-account) .inline-editor__summary {
    min-height: 40px;
    padding: 0.35rem 0;
}

body:has(.storefront-account) .inline-editor__body {
    padding: 0.15rem 0 0.15rem;
    border-radius: 0;
    background: transparent;
}

body:has(.storefront-account) .account-card .inline-editor {
    border-top: 0;
    padding-top: 0;
}

body:has(.storefront-account) .account-card .inline-editor__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    gap: 0;
    white-space: nowrap;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

body:has(.storefront-account) .account-card .inline-editor__summary::before {
    content: none;
    display: none;
}

body:has(.storefront-account) .account-card .inline-editor__summary:hover {
    background: color-mix(in srgb, var(--aqua) 12%, var(--surface-sunk));
    color: var(--text);
}

body:has(.storefront-account) .account-card .inline-editor__summary:active {
    transform: scale(0.96);
}

body:has(.storefront-account) .account-card .inline-editor[open] > .inline-editor__summary {
    background: var(--text);
    color: var(--surface);
}

html[data-theme="dark"] body:has(.storefront-account) .account-card .inline-editor[open] > .inline-editor__summary {
    background: #fff;
    color: #0d0d0c;
}

body:has(.storefront-account) .account-card .inline-editor__body {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

body:has(.storefront-account) .account-card .inline-editor__body > div {
    margin: 0;
}

body:has(.storefront-account) .account-card .inline-editor__body > div:has(> label) {
    display: grid;
    gap: 0.2rem;
}

body:has(.storefront-account) .account-card .inline-editor__body div:has(> input[name$="[fullName]"]) {
    position: relative;
}

body:has(.storefront-account) .account-card .inline-editor__body label {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
}

body:has(.storefront-account) .account-card .inline-editor__body input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
body:has(.storefront-account) .account-card .inline-editor__body select,
body:has(.storefront-account) .account-card .inline-editor__body textarea {
    max-width: none;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
}

body:has(.storefront-account) .account-card .inline-editor__body textarea {
    min-height: 5.5rem;
}

body:has(.storefront-account) .account-card .inline-editor__body .help-text {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 400;
    text-wrap: pretty;
}

body:has(.storefront-account) .account-card .inline-editor__body input[name$="[fullName]"] {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

body:has(.storefront-account) .account-card .inline-editor__body div:has(> input[name$="[fullName]"]) > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body:has(.storefront-account) .account-card--compose .inline-editor__body div:has(> input[name$="[fullName]"]) {
    position: static;
}

body:has(.storefront-account) .account-card--compose .inline-editor__body div:has(> input[name$="[fullName]"]) > label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

body:has(.storefront-account) .account-card--compose .inline-editor__body input[name$="[fullName]"] {
    font-size: 0.98rem;
    font-weight: 400;
    letter-spacing: 0;
}

body:has(.storefront-account) .account-page > section > .inline-editor .inline-editor__body {
    display: grid;
    gap: 0.85rem;
}

body:has(.storefront-account) .account-page > section > .inline-editor .inline-editor__body > div {
    margin: 0;
}

body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost),
body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--text);
    color: var(--surface);
    font-size: 0;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 0;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition-property: background-color, color, transform, opacity;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost)::after {
    content: "Сохранить";
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

html[data-theme="dark"] body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost) {
    background: #fff;
    color: #0d0d0c;
}

body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover,
body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover {
    background: color-mix(in srgb, var(--aqua) 22%, var(--text));
    color: var(--surface);
    transform: none;
    box-shadow: none;
}

html[data-theme="dark"] body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover {
    background: color-mix(in srgb, var(--aqua) 22%, #fff);
    color: #0d0d0c;
}

body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):active,
body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):active {
    transform: scale(0.96);
}

body:has(.storefront-account) .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):disabled {
    opacity: 0.55;
    transform: none;
}

body:has(.storefront-account) .site-main button[type="submit"]:not(.btn--danger, .btn--ghost),
body:has(.storefront-account) .site-main input[type="submit"]:not(.btn--danger),
body:has(.storefront-account) .btn--primary,
body:has(.storefront-account) a.btn--primary,
body:has(.storefront-account) button.btn--primary,
body:has(.storefront-account) input[type="submit"].btn--primary {
    padding: 18px 26px;
    min-height: 40px;
    border: 0;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease);
}

body:has(.storefront-account) .site-main button[type="submit"]:not(.btn--danger, .btn--ghost):hover,
body:has(.storefront-account) .site-main input[type="submit"]:not(.btn--danger):hover,
body:has(.storefront-account) .btn--primary:hover,
body:has(.storefront-account) a.btn--primary:hover,
body:has(.storefront-account) button.btn--primary:hover,
body:has(.storefront-account) input[type="submit"].btn--primary:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

body:has(.storefront-account) .site-main button[type="submit"]:not(.btn--danger, .btn--ghost):active,
body:has(.storefront-account) .site-main input[type="submit"]:not(.btn--danger):active,
body:has(.storefront-account) .btn--primary:active,
body:has(.storefront-account) a.btn--primary:active,
body:has(.storefront-account) button.btn--primary:active,
body:has(.storefront-account) input[type="submit"].btn--primary:active {
    transform: scale(0.96);
}

body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost) {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--text);
    color: var(--surface);
    font-size: 0;
    font-weight: 500;
}

html[data-theme="dark"] body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost) {
    background: #fff;
    color: #0d0d0c;
}

body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover {
    background: color-mix(in srgb, var(--aqua) 22%, var(--text));
    color: var(--surface);
}

html[data-theme="dark"] body:has(.storefront-account) .site-main .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover {
    background: color-mix(in srgb, var(--aqua) 22%, #fff);
    color: #0d0d0c;
}

body:has(.storefront-account) .btn--ghost,
body:has(.storefront-account) a.btn--ghost,
body:has(.storefront-account) button.btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

body:has(.storefront-account) .btn--ghost:hover,
body:has(.storefront-account) a.btn--ghost:hover,
body:has(.storefront-account) button.btn--ghost:hover {
    background: color-mix(in srgb, var(--aqua) 12%, var(--surface-sunk));
    color: var(--text);
    border: 0;
    transform: none;
    box-shadow: none;
}

body:has(.storefront-account) .btn--ghost:active,
body:has(.storefront-account) a.btn--ghost:active,
body:has(.storefront-account) button.btn--ghost:active {
    transform: scale(0.96);
}

body:has(.storefront-account) .btn--danger,
body:has(.storefront-account) button.btn--danger {
    min-height: 40px;
    border: 0;
    background: var(--surface-sunk);
    color: var(--danger);
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

body:has(.storefront-account) .btn--danger:hover,
body:has(.storefront-account) button.btn--danger:hover {
    background: var(--danger);
    color: #fff;
    box-shadow: none;
}

body:has(.storefront-account) .btn--danger:active,
body:has(.storefront-account) button.btn--danger:active {
    transform: scale(0.96);
}

body:has(.storefront-account) .btn--small {
    min-height: 40px;
    padding: 0.4rem 1rem;
}

body:has(.storefront-account) .btn--primary.btn--small,
body:has(.storefront-account) a.btn--primary.btn--small,
body:has(.storefront-account) button.btn--primary.btn--small {
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
}

body:has(.storefront-account) input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
body:has(.storefront-account) textarea,
body:has(.storefront-account) select {
    border-radius: 16px;
    border-color: rgb(13 13 12 / 14%);
    background: var(--surface);
    box-shadow: none;
}

html[data-theme="dark"] body:has(.storefront-account) input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
html[data-theme="dark"] body:has(.storefront-account) textarea,
html[data-theme="dark"] body:has(.storefront-account) select {
    border-color: rgb(255 255 255 / 14%);
}

body:has(.storefront-account) input:focus,
body:has(.storefront-account) textarea:focus,
body:has(.storefront-account) select:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

body:has(.storefront-account) .note,
body:has(.storefront-account) .flash,
body:has(.storefront-account) [data-test="flash-success"],
body:has(.storefront-account) [data-test="flash-error"] {
    border: 0;
    border-radius: var(--flow-inner);
    box-shadow: none;
    text-wrap: pretty;
}

body:has(.storefront-account) .note {
    background: var(--surface-sunk);
    color: var(--text-soft);
}

body:has(.storefront-account) .note--sand {
    background: var(--sand-tint);
    color: var(--sand-ink);
}

body:has(.storefront-account) .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

body:has(.storefront-account) .table-stack {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .table-stack th,
body:has(.storefront-account) .table-stack td {
    padding-inline: 0.85rem;
    padding-block: 1rem;
    overflow-wrap: break-word;
    border-bottom-color: color-mix(in srgb, var(--text) 8%, transparent);
}

body:has(.storefront-account) .table-stack th {
    white-space: nowrap;
    overflow-wrap: normal;
}

body:has(.storefront-account) .table-stack th:first-child,
body:has(.storefront-account) .table-stack td:first-child {
    padding-left: var(--flow-pad);
}

body:has(.storefront-account) .table-stack th:last-child,
body:has(.storefront-account) .table-stack td:last-child {
    padding-right: var(--flow-pad);
}

body:has(.storefront-account) .table-stack tbody tr:hover {
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

body:has(.storefront-account) .table-stack td:nth-child(3) {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 56rem) {
    body:has(.storefront-account) .table-scroll {
        overflow: visible;
    }

    body:has(.storefront-account) .table-stack {
        table-layout: auto;
        width: 100%;
    }

    body:has(.storefront-account) .table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    body:has(.storefront-account) .table-stack tbody tr {
        display: grid;
        gap: 0.2rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    }

    body:has(.storefront-account) .table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    body:has(.storefront-account) .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--s4);
        padding: 0.25rem var(--flow-pad);
        border: 0;
    }

    body:has(.storefront-account) .table-stack td::before {
        content: attr(data-label);
        flex: 0 0 7.5rem;
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-soft);
    }

    body:has(.storefront-account) .table-stack td[colspan]::before {
        display: none;
    }
}

body:has(.storefront-account) .definition dt {
    color: var(--text-soft);
}

body:has(.storefront-account) .muted {
    color: var(--text-soft);
}

html[data-theme="dark"] body:has(.storefront-account) .table-stack a,
html[data-theme="dark"] body:has(.storefront-account) .note a {
    color: var(--aqua);
    text-decoration-color: color-mix(in srgb, var(--aqua) 55%, transparent);
    transition-property: color, text-decoration-color;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

html[data-theme="dark"] body:has(.storefront-account) .table-stack a:hover,
html[data-theme="dark"] body:has(.storefront-account) .note a:hover {
    color: var(--aqua-bright);
    text-decoration-color: currentColor;
}

body:has(.storefront-account) .line-item__thumb img {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
}

html[data-theme="dark"] body:has(.storefront-account) .line-item__thumb img {
    outline-color: rgba(255, 255, 255, 0.1);
}

body:has(.storefront-account) [data-test="account-order-lines"] .line-item__title {
    text-wrap: pretty;
}

body:has(.storefront-account) [data-test="account-order-lines"] .muted {
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

body:has(.storefront-account) .account-avatar__overlay-icon {
    transition-property: opacity, transform, filter;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    transform: scale(0.25);
    filter: blur(4px);
    opacity: 0;
}

body:has(.storefront-account) .account-avatar__trigger:hover .account-avatar__overlay-icon,
body:has(.storefront-account) .account-avatar__trigger:focus-visible .account-avatar__overlay-icon {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}

body:has(.storefront-account) .account-avatar__trigger:hover {
    transform: none;
}

body:has(.storefront-account) .account-holder__edit:active {
    transform: scale(0.96);
}

body:has(.storefront-account) .tier-ladder {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:has(.storefront-account) .tier-ladder__step {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--flow-pad);
    border: 0;
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
    color: var(--text);
}

body:has(.storefront-account) .tier-ladder__step::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: calc(var(--tier-fill, 0) * 100%);
    background: var(--aqua);
    pointer-events: none;
    transition-property: width;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

body:has(.storefront-account) .tier-ladder__step > * {
    position: relative;
    z-index: 1;
}

body:has(.storefront-account) .tier-ladder__rate,
body:has(.storefront-account) .tier-ladder__threshold {
    font-variant-numeric: tabular-nums;
}

body:has(.storefront-account) .tier-ladder__step[data-state="locked"] {
    background: var(--surface);
    color: var(--text);
}

body:has(.storefront-account) .tier-ladder__step[data-state="locked"] .tier-ladder__name {
    color: var(--text-soft);
}

body:has(.storefront-account) .tier-ladder__step[data-state="current"],
body:has(.storefront-account) .tier-ladder__step[data-state="reached"] {
    border: 0;
    box-shadow: var(--flow-lift);
    color: #0d0d0c;
}

body:has(.storefront-account) .tier-ladder__step[data-state="current"] .tier-ladder__rate,
body:has(.storefront-account) .tier-ladder__step[data-state="current"] .tier-ladder__threshold,
body:has(.storefront-account) .tier-ladder__step[data-state="reached"] .tier-ladder__rate,
body:has(.storefront-account) .tier-ladder__step[data-state="reached"] .tier-ladder__threshold {
    color: #0d0d0c;
}

html[data-theme="dark"] body:has(.storefront-account) .tier-ladder__step[data-state="current"],
html[data-theme="dark"] body:has(.storefront-account) .tier-ladder__step[data-state="reached"] {
    color: #0d0d0c;
}

body:has(.storefront-account) .inline-editor {
    border-top-color: color-mix(in srgb, var(--text) 10%, transparent);
}

@media (max-width: 48rem) {
    .site-account-nav {
        display: none;
    }
}

/* ------------------------------------------------------------------- витрина */

.hero {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4.5rem, 9vw, 7.5rem);
    overflow: hidden;
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: min(var(--wide), 100% - var(--gutter) * 2);
    margin-inline: auto;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
}

.hero__title {
    font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    margin-bottom: var(--s4);
}

.hero__title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--aqua-bright), #d8f3ff 60%, var(--aqua));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin: var(--s5) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.hero__facts li {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin: 0;
    color: rgb(232 244 249 / 78%);
}

.hero__facts li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--aqua);
}

/* The buy box floats over the water — the landing's glass panel, reused. */
.buybox {
    padding: clamp(1.25rem, 3vw, 1.85rem);
    border-radius: var(--r-lg);
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--lift-dark);
    /* Light island inside a .deep band: restore the paper text colours. */
    color: var(--text);
}

.buybox .muted {
    color: var(--muted);
}

.buybox a {
    color: var(--aqua-ink);
}

.buybox h1,
.buybox h2,
.buybox h3,
.buybox strong {
    color: var(--ink-900);
}

.buybox__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-bottom: var(--s2);
}

.buybox__mode {
    display: grid;
    gap: var(--s2);
    margin: var(--s4) 0;
}

/*
 * One option card. Its children are the radio, a head row (`.buy-opt__head` —
 * the name, any badge and the price on one line) and a body that holds the
 * fine print. The prototype's collapse lives in `home-prototype.css` and only
 * applies on home; here every body is simply open.
 */
.buybox__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.15rem var(--s2);
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.buybox__option-radio {
    margin-top: 0.3rem;
}

/*
 * The head wraps rather than truncates: in a narrow rail the figure and the
 * name cannot share a line without one of them shredding, so the price drops
 * to its own row instead.
 */
.buybox__option .buy-opt__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem var(--s2);
    cursor: inherit;
}

.buybox__option .buy-opt__body {
    grid-column: 1 / -1;
}

/* Decoration of the prototype's skin only — there is a real radio here. */
.buybox .buy-opt__dot {
    display: none;
}

.buybox__option:hover {
    border-color: var(--aqua);
}

.buybox__option:has(input:checked) {
    border-color: var(--aqua-deep);
    background: var(--aqua-tint);
    box-shadow: inset 0 0 0 1px var(--aqua-deep);
}

.buybox__option-title {
    font-weight: 600;
    color: var(--ink-900);
}

.buybox__option-price {
    margin: 0;
}

.buybox__option-note {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
    color: var(--muted);
    text-wrap: pretty;
}

.buybox .buy-opt__pad {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.buybox .buy-opt__pad:has(.buy-opt__lead):has(.buy-opt__tail) {
    gap: 0;
}

.buybox .buy-opt__lead {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.buybox .buy-opt__tail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.buybox .buy-opt__lead + .buy-opt__tail {
    margin-top: 3.25rem;
}

.buybox .buy-scene__product-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--ink-900);
}

.buybox .buy-opt__perks {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.6rem;
}

.buybox .buy-opt__perk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.81rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--muted) 72%, #fff);
    text-wrap: pretty;
    transition: color 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.buybox .buy-opt__perk.is-on {
    color: var(--orange);
}

.buybox .buy-opt__perk-mark,
.buybox .buy-opt__gift-mark {
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
    align-self: center;
}

.buybox .buy-opt__perk-mark--crown {
    width: 15px;
    height: 15px;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: url("../images/buybox/crown-t9H3aRq.svg") center / contain no-repeat;
    mask: url("../images/buybox/crown-t9H3aRq.svg") center / contain no-repeat;
}

.buybox .buy-opt__gift {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--muted) 72%, #fff);
    transition: color 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.buybox .buy-opt__gift-mark {
    color: inherit;
    overflow: visible;
    transition: color 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.buybox .buy-opt__gift-mark circle,
.buybox .buy-opt__gift-mark path {
    transition: fill 0.18s cubic-bezier(0.2, 0, 0, 1), stroke 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.buybox .buy-opt__gift.is-on {
    color: var(--orange);
}

.buybox .buy-opt__gift.is-on .buy-opt__gift-mark circle {
    fill: currentColor;
}

.buybox .buy-opt__gift.is-on .buy-opt__gift-mark path {
    stroke: #fff;
}

.buybox .buy-opt__promo {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--orange);
    text-wrap: pretty;
}

.buybox .buy-opt__footnote {
    font-size: 0.69rem;
    color: color-mix(in srgb, var(--muted) 72%, #fff);
    text-align: left;
    text-wrap: pretty;
    margin-top: 1.25rem;
}

.buybox .buy-opt__qty label {
    margin: 0;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-900);
}

.buybox .buy-opt .buybox__qty {
    margin: 0;
}

.buybox .buy-widget__qty,
.buybox .qty {
    background: #f5f7fa;
}

/*
 * A card with no mode to choose from — the subscription is switched off — has
 * no radio in the first column, so the head takes it.
 */
.buybox__option--single {
    grid-template-columns: 1fr;
}

/*
 * The quantity stepper sits under both cards, not inside the open one: a
 * subscription carries a box count too, so folding it into the one-time card
 * would leave no way to order two boxes a month.
 */
.buybox__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s3) 0;
}

.buybox__option-badge {
    align-self: center;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--sand);
    color: var(--sand-ink);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* The running total, under the options and above «В корзину». */
.buybox__total {
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}

.buybox__total-label {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-900);
}

/*
 * Signature: the pack meter. Six marks for six bottles — the whole product in
 * one glance, and the quantity control people actually understand.
 */
.pack-meter {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 1.9rem;
}

.pack-meter span {
    flex: 1 1 0;
    height: 100%;
    border-radius: 3px 3px 5px 5px / 3px 3px 8px 8px;
    background: linear-gradient(180deg, rgb(94 200 232 / 22%), rgb(94 200 232 / 45%));
    box-shadow: inset 0 0 0 1px rgb(58 158 196 / 35%);
    position: relative;
}

.pack-meter span::before {
    content: "";
    position: absolute;
    left: 32%;
    right: 32%;
    top: -0.45rem;
    height: 0.45rem;
    border-radius: 2px 2px 0 0;
    background: rgb(58 158 196 / 45%);
}

.qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    overflow: hidden;
}

.qty button {
    min-height: 0;
    width: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-900);
    font-size: 1.1rem;
    box-shadow: none;
}

.qty button:hover {
    background: var(--aqua-tint);
    transform: none;
    box-shadow: none;
}

.qty input {
    width: 3.25rem;
    max-width: none;
    margin: 0;
    padding: 0.5rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* The − and + buttons are the stepper; the browser's own spinner would be
       a second one, half the size and on top of the digits. */
    appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.qty input:focus,
.qty input:focus-visible,
.qty button:focus,
.qty button:focus-visible {
    outline: none;
    box-shadow: none;
}

/* The product shots: the bottle in the hero, the pack beside the buy box. */
.pack-photo {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(165deg, var(--ink-700), var(--ink-900));
    box-shadow: var(--lift-dark);
}

.pack-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Contents and price under the pack, on the dark plate the photo sits on —
 * hence the light text rather than --muted.
 */
.pack-photo__caption {
    padding: var(--s3) var(--s4);
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgb(232 244 249 / 78%);
}

/* Steps / how it works. */
.steps {
    display: grid;
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.steps li {
    counter-increment: step;
    margin: 0;
    padding: var(--s5) var(--s4) var(--s4);
    border-top: 2px solid var(--line-strong);
    position: relative;
    transition: border-color 0.3s var(--ease);
}

.steps li:hover {
    border-top-color: var(--aqua);
}

.steps li::before {
    content: "0" counter(step);
    position: absolute;
    top: var(--s3);
    left: var(--s4);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--aqua-deep);
}

.steps h3 {
    margin: var(--s4) 0 var(--s2);
}

.steps p {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.section {
    padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}

.section + .section {
    padding-top: 0;
}

.section__head {
    max-width: 46ch;
    margin-bottom: var(--s5);
}

.faq {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}

.faq details {
    border-bottom: 1px solid var(--line);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--aqua-deep);
    border-bottom: 2px solid var(--aqua-deep);
    transform: rotate(45deg) translateY(-25%);
    transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
    transform: rotate(225deg) translateY(-25%);
}

.faq details > :not(summary) {
    margin: 0 0 var(--s4);
    max-width: 62ch;
    color: var(--text-soft);
}

/* ------------------------------------------------------------------ checkout */

.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin: 0 0 var(--s6);
    padding: 0;
    list-style: none;
    counter-reset: stepper;
    font-size: 0.88rem;
}

.stepper li {
    counter-increment: stepper;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--muted);
}

.stepper li::before {
    content: counter(stepper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
}

.stepper li[data-state="done"] {
    color: var(--text-soft);
    cursor: pointer;
}

.stepper li a,
.stepper__link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.stepper li a:hover,
.stepper li a:focus,
.stepper li a:active,
.stepper__link:hover,
.stepper__link:focus,
.stepper__link:active {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.stepper li[data-state="done"]::before {
    content: "✓";
    border-color: var(--ok);
    background: var(--ok-tint);
    color: var(--ok);
}

.stepper li[data-state="current"] {
    color: var(--ink-900);
    font-weight: 600;
}

.stepper li[data-state="current"]::before {
    border-color: transparent;
    background: var(--ink-900);
    color: #fff;
}

.line-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--s4);
    align-items: center;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
}

.line-item:last-of-type {
    border-bottom: 0;
}

/*
    The order line's picture of the showbox. Was three CSS bottles in a tinted
    crate — a placeholder that read as «какой-то другой товар» next to the real
    pack shot two steps earlier.

    The tint stays as the backdrop: the photo is a 16:9 frame cropped square,
    and a tinted square is a better ending than a letterbox if the image ever
    fails to load.
*/
.line-item__thumb {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background: linear-gradient(150deg, var(--aqua-tint), var(--aqua-tint-strong));
    overflow: hidden;
}

.line-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.line-item__title {
    margin: 0 0 0.15rem;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.line-item__controls {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.line-item__controls form {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0;
}

.line-item__controls input {
    margin: 0;
}

.line-item__total {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .line-item {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        row-gap: var(--s3);
    }

    .line-item__total {
        grid-column: 2;
        justify-self: start;
    }
}

.empty-state {
    padding: var(--s8) var(--s4);
    text-align: center;
    color: var(--muted);
}

.empty-state h2 {
    margin: 0 0 var(--s2);
    color: var(--text);
}

/* ---------- delivery */

.delivery-page__header {
    margin-bottom: var(--s5);
}

.delivery-panel {
    margin-bottom: var(--s4);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--rim), var(--lift-1);
}

.delivery-panel h2,
.delivery-panel h3 {
    margin-top: 0;
    font-size: 1.05rem;
}

.delivery-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
    margin-bottom: var(--s4);
}

.delivery-mode-tabs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.delivery-mode-tabs__item:hover {
    border-color: var(--aqua);
}

.delivery-mode-tabs__item:has(input:checked) {
    border-color: var(--aqua-deep);
    background: var(--aqua-tint);
    box-shadow: inset 0 0 0 1px var(--aqua-deep);
    color: var(--aqua-ink);
}

.delivery-mode-tabs__item input {
    margin: 0;
}

/*
 * Вкладка перевозчика, который по этому адресу отказал (CPO-D1).
 *
 * Серая, но живая: клик по ней разрешён и повторяет расчёт. Отказ бывает
 * минутным, а `disabled` отнял бы у покупателя единственный способ попробовать
 * снова — и заодно выкинул бы поле из POST, отправив расчёт к оператору по
 * умолчанию, то есть к чужому.
 */
.delivery-carrier-tabs__item[data-outcome="refused"] {
    opacity: 0.65;
}

.delivery-carrier-tabs__reason {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 400;
}

.delivery-hint {
    margin: 0 0 var(--s3);
    color: var(--muted);
    font-size: 0.9rem;
}

.delivery-manual-address {
    margin: var(--s3) 0 var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}

.delivery-manual-address summary {
    cursor: pointer;
    color: var(--aqua-ink);
    font-size: 0.92rem;
    font-weight: 500;
}

.delivery-manual-address__fields {
    display: grid;
    gap: 0 var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: var(--s4);
}

.delivery-manual-address__fields input {
    max-width: none;
}

/*
    Measured 2026-08-31: on a narrow screen the widget draws a 300px block and
    sets `display: none` on its own address search, whatever height it is given
    — enlarging this box only adds blank space under the map. So the box keeps
    its own proportion and the widget is left to render as it will.
*/
.delivery-map {
    width: 100%;
    height: min(52vh, 420px);
    min-height: 280px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--aqua-tint);
}



.delivery-loading {
    margin: var(--s3) 0 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.delivery-loading::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid var(--aqua-tint-strong);
    border-top-color: var(--aqua-deep);
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.delivery-panel--tariffs {
    position: relative;
}

.tariffs-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: rgb(6 23 32 / 40%);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--ease);
}

[data-delivery-target="tariffs"][aria-busy="true"] .tariffs-overlay {
    opacity: 1;
    pointer-events: auto;
}

.tariffs-overlay__spinner {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 2.5px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    animation: spin 0.7s linear infinite;
}

.pvz-list,
.tariff-list {
    list-style: none;
    padding: 0;
    margin: var(--s3) 0 0;
    display: grid;
    gap: var(--s2);
}

.disclosure {
    margin-top: var(--s4);
    border-top: 1px solid var(--line);
    padding-top: var(--s3);
}

.disclosure > summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--aqua-ink);
}

.disclosure .pvz-list {
    max-height: 20rem;
    overflow-y: auto;
}

/*
 * Модалка «Пункт выдачи» (набор 21, ADR-020). Список слева работает без
 * карты и без согласия на функциональные cookie; карта справа — только
 * после согласия (см. `pickup_point_map_controller.js`).
 */
body.pickup-point-map-open {
    overflow: hidden;
}

dialog.pvz-modal-backdrop:not([open]) { display: none; }
dialog.pvz-modal-backdrop::backdrop { background: transparent; }

.pvz-modal-backdrop {
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    color: inherit;
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgb(13 13 12 / 55%);
    padding: var(--s3);
    overflow: hidden;
    overscroll-behavior: none;
}

/* Клавиатура сжимает видимую область. Диалог остаётся ростом с неё,
   иначе жест уходит в страницу под модалкой и крутит подвал. */
.pvz-modal-backdrop.is-keyboard {
    top: var(--pvz-vv-top, 0px);
    height: var(--pvz-vv-height, 100%);
    bottom: auto;
    overflow: hidden;
}

.pvz-modal {
    --pvz-cdek: #00a651;
    --pvz-yandex: #fc3f1d;
    --pvz-other: var(--muted);
    display: grid;
    grid-template-rows: auto 1fr;
    width: min(1100px, 100%);
    height: min(80vh, 760px);
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgb(13 13 12 / 25%);
}

html[data-theme="dark"] .pvz-modal {
    --pvz-cdek: #2ec27e;
    --pvz-yandex: #ff6b5a;
}

.pvz-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line);
}

.pvz-modal__close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
    padding: var(--s1);
}

.pvz-modal__body {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    min-height: 0;
}

/* Сайдбар сам не прокручивается: поиск, фильтры и статус закреплены
   сверху (.pvz-modal__tools), прокручивается только список (MAP-F13) */
.pvz-modal__sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--line);
    overflow: hidden;
}

.pvz-modal__tools {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s3) var(--s3) var(--s2);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.pvz-modal__find {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    min-width: 0;
    padding: var(--s3) var(--s3) 0;
}

.pvz-modal__find + .pvz-modal__tools {
    padding-top: 0;
}

.pvz-modal__tools:not(:has(> :not([hidden]))) {
    display: none;
}

.pvz-map-expand {
    display: none;
}

.pvz-modal__sidebar .pvz-list {
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    margin: 0;
    padding: var(--s2) var(--s3) var(--s3);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.pvz-city-select {
    position: relative;
    width: 100%;
}

.pvz-field {
    position: relative;
}

.pvz-field > .pvz-city-search,
.pvz-field > .pvz-search {
    width: 100%;
    max-width: none;
    padding-right: 2.75rem;
}

.pvz-field > input[type="search"]::-webkit-search-cancel-button,
.pvz-field > input[type="search"]::-webkit-search-decoration,
.pvz-field > input[type="search"]::-webkit-search-results-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
    width: 0;
    height: 0;
}

button[type="button"].pvz-field-clear {
    display: none;
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 0;
    z-index: 1;
    width: 40px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    transform: none;
    transition-property: color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.pvz-field:has(input:not(:placeholder-shown)) button[type="button"].pvz-field-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button[type="button"].pvz-field-clear:hover {
    background: transparent;
    border: 0;
    color: var(--text);
    transform: none;
    box-shadow: none;
}

button[type="button"].pvz-field-clear:active {
    background: transparent;
    border: 0;
    transform: scale(0.96);
}

.pvz-city-search {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: inherit;
    margin-bottom: 0;
}

.pvz-city-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    list-style: none;
}

.pvz-city-dropdown__item {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.35;
}

.pvz-city-dropdown__city {
    font-weight: 600;
    color: var(--text);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.pvz-city-dropdown__region {
    color: var(--text-soft);
    text-align: right;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.pvz-city-dropdown__item:hover,
.pvz-city-dropdown__item:focus,
.pvz-city-dropdown__item.is-active {
    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
    outline: none;
}

.pvz-city-dropdown__empty {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.pvz-search {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: inherit;
    margin-bottom: 0;
}

.pvz-modal__map {
    position: relative;
    min-height: 0;
}

.pvz-map {
    position: absolute;
    inset: 0;
}

.pvz-map-unavailable {
    padding: var(--s4);
}

.pvz-list__item {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 0.25rem;
    min-width: 0;
    height: auto;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pvz-list__item:hover {
    border-color: var(--pvz-color, var(--line-strong, #999));
}

.pvz-list__item.is-focused {
    border-color: var(--pvz-color, var(--line-strong, #999));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pvz-color, var(--line-strong, #999)) 25%, transparent);
}

.pvz-marker--cdek,
.pvz-list__item--cdek,
.pvz-popup--cdek,
.pvz-balloon--cdek {
    --pvz-color: var(--pvz-cdek);
}

.pvz-marker--yandex,
.pvz-list__item--yandex,
.pvz-popup--yandex,
.pvz-balloon--yandex {
    --pvz-color: var(--pvz-yandex);
}

.pvz-marker--other,
.pvz-list__item--other,
.pvz-popup--other,
.pvz-balloon--other {
    --pvz-color: var(--pvz-other);
}

.pvz-marker {
    background: none;
    border: 0;
}

.pvz-pin {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--pvz-color, var(--pvz-other));
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
    transition: transform 0.15s var(--ease);
}

.pvz-marker:hover .pvz-pin {
    transform: scale(1.15);
}

.pvz-cluster {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    border: 6px solid var(--pvz-color, var(--pvz-other));
    color: var(--pvz-color, var(--pvz-other));
    font: 600 0.8rem/1 var(--font-display, sans-serif);
    box-shadow: 0 1px 6px rgb(0 0 0 / 30%);
    transition: transform 0.15s var(--ease);
}

.pvz-marker:hover .pvz-cluster {
    transform: scale(1.1);
}

/* Правила для узлов самого Leaflet (.leaflet-popup-*, .leaflet-container,
   .leaflet-bar) лежат вне слоя — в конце файла, см. «Переопределения Leaflet» */

.pvz-popup__body {
    display: grid;
    row-gap: 0.25rem;
    min-width: 220px;
    max-width: 280px;
}

.pvz-popup__header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pvz-popup__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--r-sm, 4px);
    color: var(--pvz-color, var(--pvz-other));
    background: color-mix(in srgb, var(--pvz-color, var(--pvz-other)) 14%, transparent);
}

.pvz-popup__name {
    font-size: 0.95rem;
    font-weight: 600;
}

.pvz-popup__address {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.pvz-popup__metro,
.pvz-popup__schedule,
.pvz-popup__directions,
.pvz-popup__phone {
    margin: 0;
    font-size: 0.8rem;
}

/* Ссылка-кнопка: глобальные `button` / `button[type="button"]` дают 44 px
   высоты, рамку и подложку — здесь это строка текста, как .account-holder__edit */
button[type="button"].pvz-popup__directions-link {
    display: inline;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--aqua-ink);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transform: none;
    cursor: pointer;
}

button[type="button"].pvz-popup__directions-link:hover,
button[type="button"].pvz-popup__directions-link[aria-expanded="true"] {
    background: none;
    box-shadow: none;
    color: var(--aqua-ink);
    text-decoration-color: transparent;
    transform: none;
}

button[type="button"].pvz-popup__directions-link:focus-visible {
    outline: 2px solid var(--aqua-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Тёмный балун «Как пройти» — абсолютно позиционирован в контейнере карты
   (`.pvz-map` — position: absolute), координаты ставит контроллер;
   носик смотрит на ссылку: снизу, когда балун над ней, сверху — под ней (MAP-F12) */
.pvz-directions {
    --pvz-directions-tip-x: 50%;

    position: absolute;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: max-content;
    max-width: min(320px, calc(100% - 16px));
    padding: var(--s3) calc(var(--s3) + 1.5rem) var(--s3) var(--s3);
    border-radius: var(--r-md);
    background: var(--ink-900);
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-shadow: var(--lift-2, 0 4px 20px rgb(13 13 12 / 25%));
}

.pvz-directions::after {
    content: "";
    position: absolute;
    left: var(--pvz-directions-tip-x);
    bottom: -6px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
}

.pvz-directions--below::after {
    top: -6px;
    bottom: auto;
}

/* При max-height от контроллера (карта ниже текста) прокручивается текст,
   а не сам балун — иначе overflow срезал бы носик */
.pvz-directions__text {
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    white-space: pre-line;
}

button[type="button"].pvz-directions__close {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    min-width: 0;
    height: 1.75rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: rgb(255 255 255 / 70%);
    font-size: 1.25rem;
    line-height: 1;
    transform: none;
    cursor: pointer;
}

button[type="button"].pvz-directions__close:hover {
    background: rgb(255 255 255 / 12%);
    box-shadow: none;
    color: #fff;
    transform: none;
}

html[data-theme="dark"] .pvz-directions {
    border: 1px solid rgb(255 255 255 / 14%);
}

.pvz-popup__select {
    margin-top: 0.25rem;
    width: 100%;
}

.pvz-popup__title {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.pvz-popup__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    gap: var(--s2);
}

.pvz-popup__item {
    display: grid;
    gap: 0.25rem;
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
}

.pvz-popup__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pvz-balloon {
    padding: var(--s3);
    display: grid;
    gap: 0.35rem;
    min-width: 220px;
    max-width: 280px;
}

.pvz-balloon__header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pvz-balloon__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--r-sm, 4px);
    color: var(--pvz-color, var(--pvz-other));
    background: color-mix(in srgb, var(--pvz-color, var(--pvz-other)) 14%, transparent);
}

.pvz-balloon__name {
    font-size: 0.95rem;
    font-weight: 600;
}

.pvz-balloon__address {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.pvz-balloon__metro,
.pvz-balloon__schedule {
    margin: 0;
    font-size: 0.8rem;
}

.pvz-balloon__select {
    margin-top: 0.25rem;
    width: 100%;
}

.pvz-balloon-list {
    list-style: none;
    margin: 0;
    padding: var(--s3);
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    gap: var(--s2);
}

.pvz-balloon-list__item {
    display: grid;
    gap: 0.25rem;
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
}

.pvz-balloon-list__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pvz-balloon-list__info {
    display: grid;
    gap: 0.2rem;
}

.pvz-balloon-list__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--r-sm, 4px);
    color: var(--pvz-color, var(--pvz-other));
    background: color-mix(in srgb, var(--pvz-color, var(--pvz-other)) 14%, transparent);
}

.pvz-balloon-list__name {
    font-size: 0.9rem;
    font-weight: 600;
}

.pvz-balloon-list__address {
    font-size: 0.8rem;
    color: var(--muted);
}

.pvz-balloon-list__select {
    justify-self: start;
    margin-top: 0.25rem;
}

.pvz-list__badge {
    justify-self: start;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--r-sm, 4px);
    white-space: nowrap;
    color: var(--pvz-color, var(--pvz-other));
    background: color-mix(in srgb, var(--pvz-color, var(--pvz-other)) 14%, transparent);
}

.pvz-list__name,
.pvz-list__address {
    min-width: 0;
    overflow-wrap: anywhere;
    display: block;
}

.pvz-list__select,
.pvz-popup__select {
    font-family: var(--font-text);
}

.pvz-list__select {
    justify-self: start;
    align-self: start;
    height: auto;
    margin-top: 0.25rem;
}

.pvz-list__empty {
    list-style: none;
    padding: var(--s3) 0 var(--s2);
    text-wrap: pretty;
}

.pvz-modal__sidebar:has(.pvz-status:not([hidden])) .pvz-list__empty {
    display: none;
}

/* «Повторить» в строке статуса после пустого/частичного/неудачного запроса (MAP-F5) */
.pvz-status__retry {
    margin: 0;
}

.pvz-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.15rem 0 0;
    text-wrap: pretty;
}

/* Порции списка: счётчик и кнопка следующей порции (MAP-F4) */
.pvz-list__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    list-style: none;
    padding: var(--s2) 0;
}

/* Строка точки открытого балуна, раскрытая за пределами текущей порции */
.pvz-list__item.is-revealed {
    margin-top: var(--s3);
}

.tariff-card {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.tariff-card:hover {
    border-color: var(--aqua);
    box-shadow: var(--lift-1);
}

.tariff-card__main {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    align-items: baseline;
}

.tariff-card__main strong {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.tariff-card__price {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tariff-card__action {
    margin-top: var(--s2);
}

/* ------------------------------------------- delivery date picker (UNF-free)
    Replaces a column of radio buttons: the operator offers a handful of
    windows, not a range, so a native date input would let the customer pick a
    day the courier is not coming.
*/
.delivery-window {
    position: relative;
    margin-top: var(--s2);
}

.delivery-window__legend {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.delivery-window__field {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
}

.delivery-window__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: var(--text);
    /* Readonly, not disabled: the value still submits and still reads out. */
    cursor: default;
}

.delivery-window__input:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: -2px;
}

.delivery-window__calendar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    /* The global button style rounds every button into a pill. This one sits
       flush inside the field, which owns the corners and clips them. */
    border-radius: 0;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
}

/*
    Explicit, because the base reset's `img, svg { max-width: 100% }` collapses
    an SVG to zero width inside a grid item whose track has no definite size —
    the icon was in the DOM, correctly namespaced, and 0 pixels wide.
*/
.delivery-window__calendar svg {
    width: 18px;
    height: 18px;
    max-width: none;
}

.delivery-window__calendar:hover,
.delivery-window__calendar:focus-visible {
    color: var(--text);
    background: var(--surface-sunk);
}

/*
    Anchored to the RIGHT edge of the field, so it opens leftward. The picker
    lives in the rail on the right of the step: opening rightward from there
    put half the popover past the edge of the window, over the page background
    rather than over anything.

    Width is clamped against the viewport as well as the rail, because the rail
    is narrower than the popover wants to be on a laptop.
*/
.delivery-calendar {
    position: absolute;
    z-index: 20;
    inset-inline-end: 0;
    margin-top: 0.35rem;
    padding: 0.6rem;
    width: max(100%, 15.5rem);
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 12px 32px rgb(13 13 12 / 18%);
}

.delivery-calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.delivery-calendar__month {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.delivery-calendar__nav {
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}

.delivery-calendar__nav:hover {
    background: var(--surface-sunk);
}

.delivery-calendar__weekdays,
.delivery-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.delivery-calendar__weekdays {
    margin-bottom: 0.15rem;
    font-size: 0.66rem;
    color: var(--text-soft);
    text-align: center;
}

/*
    `padding: 0` and `min-width: 0` are the load-bearing pair. The global
    `button` style pads every button, and a padded cell with `aspect-ratio: 1`
    grew each column past its 1fr track — the grid spilled out of the popover
    onto the page background and gave the whole document a horizontal scrollbar.
*/
.delivery-calendar__day {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}

.delivery-calendar__day:hover:not(:disabled) {
    background: var(--aqua-tint);
}

/* A day the operator did not offer. Dimmed rather than removed, so the month
   keeps its shape and the customer can see which days exist at all. */
.delivery-calendar__day:disabled {
    color: var(--text-soft);
    opacity: 0.35;
    cursor: default;
}

.delivery-calendar__day[aria-current="date"] {
    background: var(--ink-900);
    color: var(--paper);
}

/* Inside the popover now, under the day the hours belong to. */
.delivery-times {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.delivery-times__legend {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-soft);
}

.delivery-times__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.delivery-times__item {
    border: 1px solid var(--line-strong);
    /* Not the global pill: these sit in a tight row inside the popover. */
    border-radius: 6px;
    background: var(--surface);
    padding: 0.25rem 0.45rem;
    font: inherit;
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
}

.delivery-times__item:hover {
    background: var(--surface-sunk);
}

.delivery-times__item.is-selected {
    border-color: var(--ink-900);
    background: var(--ink-900);
    color: var(--paper);
}

/* Self-pickup: an address to read, not a form to fill in. */
.delivery-selfpickup__address {
    margin: 0 0 var(--s2);
    font-size: 1.05rem;
    line-height: 1.5;
}

.delivery-submit {
    margin-top: var(--s4);
}

.delivery-selection-line {
    margin-bottom: var(--s1);
}

.storefront-flow .delivery-selection-title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.storefront-flow .delivery-selection-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em 0.5rem;
    margin: 0 0 0.55rem;
}

.storefront-flow .delivery-selection-fact {
    margin: 0 0 0.55rem;
    text-wrap: pretty;
}

.storefront-flow .delivery-selection-label {
    color: var(--text);
    font-weight: 700;
}

.storefront-flow .delivery-selection-value {
    color: var(--text);
    font-weight: 400;
    text-wrap: pretty;
}

.storefront-flow .delivery-selection-value--price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.storefront-flow [data-delivery-summary] > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- auth pages */

.auth {
    width: min(28rem, 100%);
    margin: 0 auto;
    padding: 0.5rem 0 2.5rem;
}

.auth--wide {
    width: min(36rem, 100%);
}

.storefront-auth .page-head {
    max-width: none;
    margin: 0 0 0.85rem;
    padding: 0;
    text-align: center;
}

body:has(.storefront-auth) .site-main {
    margin-top: 0.75rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.storefront-auth .page-head .eyebrow {
    justify-content: center;
    color: var(--aqua);
}

.storefront-auth .page-head h1 {
    margin: 0;
    font-size: clamp(1.85rem, 4vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.auth__panel {
    padding: var(--flow-pad, 20px);
    border: 0;
    border-radius: var(--flow-radius, 32px);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.auth__panel input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]) {
    max-width: none;
    margin-bottom: 1rem;
    border-radius: 16px;
    border-color: rgb(13 13 12 / 14%);
    background: var(--surface);
    box-shadow: none;
}

html[data-theme="dark"] .auth__panel input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]) {
    border-color: rgb(255 255 255 / 14%);
}

.auth__panel input:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

.storefront-auth .avatar-choice {
    margin: 0;
}

.storefront-auth .avatar-choice__legend {
    margin: 0 0 var(--s1);
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-soft);
}

.auth--wide .password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
}

.auth--wide .password-field > * {
    min-width: 0;
}

.auth--wide .password-strength {
    grid-column: 1 / -1;
}

.auth--wide .password-field__requirement {
    grid-column: 1 / -1;
}

.storefront-auth .password-strength {
    margin: 0 0 1rem;
}

.storefront-auth .password-strength:has([data-level="0"]) {
    height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.storefront-auth .password-field__requirement {
    margin: 0 0 1.15rem;
    color: var(--muted);
    text-wrap: pretty;
}

.storefront-auth .auth__consents {
    margin: 0 0 1.15rem;
    padding: 0;
    background: none;
    min-width: 0;
}

.storefront-auth .auth__consents legend {
    display: table;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 0.45rem;
    font-family: var(--font-text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-soft);
}

.storefront-auth .auth__consents legend + * {
    clear: both;
}

.storefront-auth .auth__consents div:has(> input[type="checkbox"]) {
    margin-bottom: 0.35rem;
}

.storefront-auth .auth__consents div:has(> input[type="checkbox"]) > input[type="checkbox"] {
    top: 0.05rem;
}

.storefront-auth .auth__consents div:has(> input[type="checkbox"]) > label {
    font-size: 0.78rem;
    line-height: 1.4;
}

.storefront-auth .consent-note {
    margin: 0 0 0.7rem;
    padding-left: 1.75rem;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.4;
    text-wrap: pretty;
}

.storefront-auth .btn--primary,
.storefront-auth a.btn--primary,
.storefront-auth button.btn--primary,
.storefront-auth input[type="submit"].btn--primary {
    padding: 18px 26px;
    min-height: 0;
    border: 0;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.storefront-auth .btn--primary:hover,
.storefront-auth a.btn--primary:hover,
.storefront-auth button.btn--primary:hover,
.storefront-auth input[type="submit"].btn--primary:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.storefront-auth .btn--primary:active,
.storefront-auth a.btn--primary:active,
.storefront-auth button.btn--primary:active,
.storefront-auth input[type="submit"].btn--primary:active {
    transform: scale(0.96);
}

.auth__aside {
    margin-top: 1.15rem;
    text-align: center;
    font-size: 0.92rem;
    color: var(--muted);
}

.auth__aside a {
    font-weight: 600;
    color: var(--aqua);
    text-decoration: none;
}

.auth__aside a:hover {
    color: var(--aqua-deep);
}

.auth__email {
    margin: 0 0 1rem;
}

.auth__mock {
    margin-top: 0.85rem;
}

.storefront-auth .social-list a {
    border: 0;
    border-radius: 16px;
    background: var(--surface-sunk);
    box-shadow: none;
    transition-property: background-color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.storefront-auth .social-list a:hover {
    border: 0;
    background: color-mix(in srgb, var(--aqua) 12%, var(--surface-sunk));
    color: var(--text);
}

.storefront-auth .social-list a:active {
    transform: scale(0.96);
}

.storefront-auth .flash-error,
.storefront-auth .auth__notice {
    margin-bottom: 1rem;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--flow-inner, 12px);
    background: var(--surface-sunk);
    font-size: 0.9rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.storefront-auth .flash-error {
    color: var(--danger);
}

.storefront-auth .auth__notice {
    color: var(--text);
}

.storefront-auth .auth__panel:has([data-test="loyalty-auto-enrollment"]) {
    padding-bottom: 2.25rem;
}

.storefront-auth [data-test="loyalty-auto-enrollment"] {
    margin: 1.6rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
    text-wrap: pretty;
}

@media (max-width: 40rem) {
    .auth--wide .password-field {
        grid-template-columns: minmax(0, 1fr);
    }
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s5) 0;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.social-list {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.social-list a:hover {
    border-color: var(--aqua);
    background: var(--aqua-tint);
    color: var(--aqua-ink);
}

/* -------------------------------------------------------- content / legal */

.content-page > article h2 {
    font-size: 1.15rem;
}

.content-page > article > :last-child {
    margin-bottom: 0;
}

.prose {
    max-width: 68ch;
}

.prose h2 {
    margin-top: var(--s6);
}

.prose ul,
.prose ol {
    color: var(--text-soft);
}

/* Consent boxes keep room for the absolutely positioned checkbox. */
.content-page form > label {
    max-width: 40rem;
    margin: var(--s3) 0;
    padding: var(--s4) var(--s4) var(--s4) 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
    color: var(--text);
}

.content-page form > label > input[type="checkbox"] {
    left: var(--s4);
    top: 1.1rem;
}

.content-page form > label:has(input:checked) {
    border-color: var(--aqua-deep);
    background: var(--aqua-tint);
}

/* ---------- legal documents */

.storefront-section {
    width: min(var(--mid), 100%);
    margin-inline: auto;
}

.legal-document-list {
    display: grid;
    gap: var(--s2);
    margin: var(--s5) 0 0;
    padding: 0;
    list-style: none;
}

.legal-document-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin: 0;
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.legal-document-list li:hover {
    border-color: var(--aqua);
    box-shadow: var(--lift-1);
}

.legal-document-list a {
    font-weight: 600;
    text-decoration: none;
}

.legal-document-list span {
    color: var(--muted);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.legal-document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s6);
    margin: 0 0 var(--s5);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.legal-document-meta dt {
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.legal-document-meta dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/*
 * The document text, converted from the approved DOCX. Its headings run h2–h4
 * under the page's own h1, and the tables — the processors appendix among them
 * — are wide enough to need their own scroller rather than pushing the page
 * sideways.
 */
.legal-document-body h3,
.legal-document-body h4 {
    margin-top: var(--s5);
}

.legal-document-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: var(--s4) 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-document-body th,
.legal-document-body td {
    padding: var(--s2) var(--s3);
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.legal-document-body th {
    background: var(--surface-sunk);
    font-weight: 600;
}

.legal-document-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: var(--s6) 0 0;
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
}

/* Full-width so the links wrap underneath rather than beside the heading. */
.legal-document-actions__title {
    flex-basis: 100%;
    margin: 0;
    font-size: 1.05rem;
}

.legal-document-actions > .muted {
    flex-basis: 100%;
    margin: 0 0 var(--s2);
}

.legal-document-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.legal-document-actions a:hover {
    border-color: var(--aqua);
    background: var(--aqua-tint);
    color: var(--aqua-ink);
}

.legal-document-note {
    margin-top: var(--s6);
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.legal-document-note h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.notice {
    padding: var(--s3) var(--s4);
    border-left: 3px solid var(--warn);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--warn-tint);
    color: var(--warn);
    font-size: 0.94rem;
}

.calmness-index-disclaimer {
    margin-top: var(--s5);
    padding: var(--s4);
    border-left: 3px solid var(--aqua);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--aqua-tint);
    color: var(--aqua-ink);
}

.calmness-index-disclaimer p {
    margin: 0;
}

[data-test="support-personal-data-error"]:empty,
[data-test="review-publication-error"]:empty {
    display: none;
}

[data-test="support-personal-data-error"],
[data-test="review-publication-error"] {
    margin-top: var(--s2);
    color: var(--danger);
    font-size: 0.88rem;
}

/* ------------------------------------------------------- cookie preferences */

/*
 * Compact chip, not a panel: same paper / orange / Onest language as the
 * homepage buy widget. Nested pills sit in 10px of padding, so the shell is
 * 24px — concentric with a fully-round inner button, not a copy of it.
 */
.cookie-banner {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    width: max-content;
    max-width: min(42rem, calc(100% - 1.5rem));
    margin: 0;
    padding: 0.625rem 0.625rem 0.625rem 1rem;
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    color: var(--text);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.06),
        0 10px 28px -8px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
    animation: cookie-banner-in 0.4s var(--ease) 0.2s both;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__copy,
.cookie-banner__actions,
.cookie-banner__dismiss {
    animation: cookie-banner-chunk 0.4s var(--ease) both;
}

.cookie-banner__copy {
    flex: 1 1 12rem;
    min-width: 0;
    animation-delay: 0.25s;
}

.cookie-banner strong,
.cookie-banner h2 {
    display: inline;
    margin: 0 0.35em 0 0;
    color: var(--ink-900);
    font-family: var(--font-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: balance;
}

.cookie-banner__copy p {
    display: inline;
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.35;
    text-wrap: pretty;
}

.cookie-banner__copy a {
    color: var(--aqua-ink);
    text-underline-offset: 0.18em;
}

.cookie-banner__copy a:hover,
.cookie-banner__copy a:focus-visible {
    color: var(--aqua);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 0 1 auto;
    animation-delay: 0.35s;
}

.cookie-banner__actions form {
    display: contents;
}

.cookie-action {
    min-height: 2.25rem;
    margin: 0;
    padding: 0.35rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition-property: background-color, color, scale;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.cookie-action:hover,
.cookie-action:focus-visible {
    background: color-mix(in srgb, var(--aqua) 16%, var(--surface-sunk));
    color: var(--ink-900);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.cookie-action:active {
    scale: 0.96;
    transform: none;
}

.cookie-action--primary {
    background: var(--aqua);
    color: var(--ink-900);
}

.cookie-action--primary:hover,
.cookie-action--primary:focus-visible {
    background: var(--aqua-bright);
    color: var(--ink-900);
}

.cookie-banner__dismiss {
    display: flex;
    flex: 0 0 auto;
    animation-delay: 0.45s;
}

.cookie-banner__close {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    color: var(--muted);
    cursor: pointer;
    box-shadow: none;
    transition-property: background-color, color, scale;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.cookie-banner__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.cookie-banner__close svg {
    width: 1rem;
    height: 1rem;
}

.cookie-banner__close:hover,
.cookie-banner__close:focus-visible {
    background: var(--surface-sunk);
    color: var(--ink-900);
    transform: none;
    box-shadow: none;
}

.cookie-banner__close:active {
    scale: 0.96;
    transform: none;
}

html[data-theme="dark"] .cookie-banner {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .cookie-banner strong,
html[data-theme="dark"] .cookie-banner h2 {
    color: var(--text);
}

@keyframes cookie-banner-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        filter: blur(0);
    }
}

@keyframes cookie-banner-chunk {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.cookie-settings {
    width: min(28rem, calc(100% - 2rem));
    max-height: min(40rem, calc(100dvh - 2rem));
    overflow: auto;
    padding: 0;
    border: 0;
    border-radius: 32px;
    color: var(--text);
    background: var(--surface);
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 6%),
        0 1px 2px -1px rgb(0 0 0 / 6%),
        0 24px 48px -16px rgb(0 0 0 / 28%);
}

.cookie-settings[open] {
    animation: cookie-settings-in 0.32s cubic-bezier(0.2, 0, 0, 1);
}

.cookie-settings::backdrop {
    background: color-mix(in srgb, #0d0d0c 46%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.cookie-settings form {
    margin: 0;
    padding: 1.5rem 1.5rem 1.25rem;
}

.cookie-settings[open] .cookie-settings__header,
.cookie-settings[open] .cookie-category,
.cookie-settings[open] .cookie-settings__footer {
    animation: cookie-settings-chunk 0.4s cubic-bezier(0.2, 0, 0, 1) both;
}

.cookie-settings[open] .cookie-settings__header {
    animation-delay: 40ms;
}

.cookie-settings[open] .cookie-category:nth-child(1) { animation-delay: 120ms; }
.cookie-settings[open] .cookie-category:nth-child(2) { animation-delay: 220ms; }
.cookie-settings[open] .cookie-category:nth-child(3) { animation-delay: 320ms; }
.cookie-settings[open] .cookie-category:nth-child(4) { animation-delay: 420ms; }

.cookie-settings[open] .cookie-settings__footer {
    animation-delay: 500ms;
}

.cookie-settings__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 1.15rem;
    border: 0;
}

.cookie-settings__header h2 {
    margin: 0 0 0.3rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-wrap: balance;
}

.cookie-settings__header p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.45;
    text-wrap: pretty;
}

button[type="button"].cookie-settings__close,
.cookie-settings button.cookie-settings__close {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 40px;
    min-height: 40px;
    margin: -0.35rem -0.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.cookie-settings__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.cookie-settings__close svg {
    width: 1.05rem;
    height: 1.05rem;
}

button[type="button"].cookie-settings__close:hover,
.cookie-settings button.cookie-settings__close:hover,
button[type="button"].cookie-settings__close:focus-visible,
.cookie-settings button.cookie-settings__close:focus-visible {
    background: var(--surface-sunk);
    color: var(--text);
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

button[type="button"].cookie-settings__close:focus-visible,
.cookie-settings button.cookie-settings__close:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 2px;
}

button[type="button"].cookie-settings__close:active,
.cookie-settings button.cookie-settings__close:active {
    transform: scale(0.96);
}

.cookie-settings__list {
    display: grid;
}

.cookie-settings form label.cookie-category:has(> input[type="checkbox"]) {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.85rem;
    position: static;
    margin: 0;
    padding: 1rem 0;
    padding-left: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    background: transparent;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.cookie-settings form label.cookie-category--locked:has(> input[type="checkbox"]) {
    cursor: default;
}

.cookie-settings .cookie-category strong {
    display: block;
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text);
}

.cookie-settings .cookie-category p,
.cookie-settings .cookie-category span span {
    display: block;
    margin: 0.2rem 0 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 400;
    text-wrap: pretty;
}

.cookie-settings form label.cookie-category:has(> input[type="checkbox"]) > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: static;
    inset: auto;
    left: auto;
    top: auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
    flex: none;
    border: 0;
    border-radius: 6px;
    background: var(--surface-sunk);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
    accent-color: var(--aqua);
    cursor: pointer;
    transition-property: background-color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.cookie-settings form label.cookie-category:has(> input[type="checkbox"]) > input[type="checkbox"]:checked {
    background-color: var(--aqua);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230d0d0c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.2 6.6 11.2 12.6 4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem;
    box-shadow: none;
}

.cookie-settings form label.cookie-category:has(> input[type="checkbox"]) > input[type="checkbox"]:disabled {
    background-color: color-mix(in srgb, var(--text) 14%, var(--surface));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2356534c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.2 6.6 11.2 12.6 4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
    cursor: default;
    opacity: 1;
}

html[data-theme="dark"] .cookie-settings form label.cookie-category:has(> input[type="checkbox"]) > input[type="checkbox"]:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f4f1eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.2 6.6 11.2 12.6 4.8'/%3E%3C/svg%3E");
}

.cookie-settings form label.cookie-category:has(> input[type="checkbox"]) > input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 3px;
}

.cookie-settings__footer {
    display: flex;
    justify-content: flex-end;
    padding: 1.15rem 0 0;
}

.cookie-settings form button.btn.btn--primary,
.cookie-settings form button[data-test="cookie-save"],
body:has(.storefront-account) .cookie-settings form button.btn.btn--primary,
body:has(.storefront-account) .cookie-settings form button[data-test="cookie-save"] {
    min-height: 40px;
    padding: 0.4rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: background-color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.cookie-settings form button.btn.btn--primary:hover,
.cookie-settings form button[data-test="cookie-save"]:hover,
body:has(.storefront-account) .cookie-settings form button.btn.btn--primary:hover,
body:has(.storefront-account) .cookie-settings form button[data-test="cookie-save"]:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.cookie-settings form button.btn.btn--primary:active,
.cookie-settings form button[data-test="cookie-save"]:active,
body:has(.storefront-account) .cookie-settings form button.btn.btn--primary:active,
body:has(.storefront-account) .cookie-settings form button[data-test="cookie-save"]:active {
    transform: scale(0.96);
}

.cookie-settings__error {
    margin: 0.85rem 0 0;
    color: var(--danger);
    font-size: 0.88rem;
}

html[data-theme="dark"] .cookie-settings {
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 10%),
        0 24px 48px -16px rgb(0 0 0 / 55%);
}

@keyframes cookie-settings-in {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes cookie-settings-chunk {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ----------------------------------------------------------------- messages */

/* The server prints these inline at the top of <main>; with scripting on the
   messages controller lifts them out of the flow. Both states are readable —
   the class below is added by JS, so no-JS keeps the plain block. */
.messages--toast {
    position: fixed;
    inset: auto 1rem 1rem auto;
    z-index: 1100; /* above .cookie-banner at 1000 */
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    max-inline-size: min(26rem, calc(100% - 2rem));
}

@media (max-width: 40rem) {
    /* Anchored to the top on phones: the cookie banner owns the bottom. */
    .messages--toast {
        inset: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem auto;
    }
}

/* Tints stay mint/rose even in dark theme. `--text` there is cream, so the
   success toast («Товар добавлен в корзину») painted white on #e2f4ee. */
.messages .flash {
    position: relative;
    padding-right: 2.75rem;
    color: #0d0d0c;
    text-wrap: pretty;
}

.messages .flash-success,
.messages [data-test="flash-success"] {
    color: #145c48;
}

.messages .flash-error,
.messages [data-test="flash-error"] {
    color: #8a2430;
}

.messages__dismiss {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    min-block-size: 40px;
    min-inline-size: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(13 13 12 / 10%);
    color: #0d0d0c;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.messages__dismiss:hover {
    background: rgb(13 13 12 / 16%);
}

.messages__dismiss:focus-visible {
    outline: 2px solid #0d0d0c;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- motion */

.rise {
    animation: rise 0.7s var(--ease) both;
}

.rise--1 {
    animation-delay: 0.08s;
}

.rise--2 {
    animation-delay: 0.16s;
}

.rise--3 {
    animation-delay: 0.24s;
}

.rise--4 {
    animation-delay: 0.32s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* ------------------------------------------------------------------ utility */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-right {
    text-align: right;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 60rem) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__media {
        order: -1;
        max-width: 22rem;
    }
}

@media (max-width: 48rem) {
    .site-nav--sections {
        display: none;
    }

    .site-nav--actions .site-nav__buy {
        display: none;
    }

    .site-menu {
        display: block;
        height: 2.5rem;
        overflow: visible;
        flex: 0 0 auto;
        align-self: center;
    }

    .site-brand,
    .site-nav {
        align-self: center;
    }

    .site-main {
        margin-top: var(--s5);
    }

    html:has(.site-menu[open]) {
        overflow: hidden;
    }

    .site-menu[open] .site-menu__panel {
        position: fixed;
        top: calc(4.3rem + env(safe-area-inset-top, 0px));
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        display: grid;
        align-content: start;
        gap: 0.15rem;
        margin: 0;
        padding: 0.75rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
        max-height: none;
        width: auto;
        height: auto;
        overflow-y: auto;
        border-radius: 0;
        background: var(--paper);
        box-shadow: none;
    }

    .site-menu__panel a {
        min-height: 3.35rem;
        padding: 0.5rem 0;
        border-radius: 0;
        font-family: var(--font-display);
        font-size: clamp(1.85rem, 7vw, 2.2rem);
        font-weight: 400;
        letter-spacing: -0.045em;
        line-height: 1.12;
        color: var(--text-soft);
        text-wrap: pretty;
    }

    .site-menu__panel a:hover {
        background: transparent;
        color: var(--text);
    }

    .site-menu__panel a[aria-current="page"],
    .site-menu__panel a[aria-current="page"]:hover {
        background: transparent;
        color: var(--text);
        font-weight: 500;
        box-shadow: inset 2px 0 0 var(--text);
        padding-left: 0.7rem;
        margin-left: -0.7rem;
    }

    .site-menu__group {
        gap: 0.1rem;
        margin: 1.15rem 0 0;
        padding: 0 0 0 0.85rem;
        border-radius: 0;
        background: transparent;
    }

    .site-menu__label {
        padding: 0 0 0.55rem;
        font-size: 1.05rem;
    }

    .site-menu__group a {
        min-height: 3rem;
        padding: 0.4rem 0;
        border-radius: 0;
        font-size: clamp(1.6rem, 6.2vw, 2rem);
    }

    .site-menu__group a:hover {
        background: transparent;
    }

    html[data-theme="dark"] .site-menu__panel a[aria-current="page"],
    html[data-theme="dark"] .site-menu__panel a[aria-current="page"]:hover {
        background: transparent;
        color: var(--text);
    }

    .site-menu__exit {
        margin-top: 0.35rem;
        padding-top: 0.85rem;
        box-shadow: 0 -1px 0 color-mix(in srgb, var(--text) 12%, transparent);
    }
}

@media (max-width: 40rem) {
    .delivery-mode-tabs {
        grid-template-columns: 1fr;
    }

    .tariff-card__main {
        flex-direction: column;
        align-items: flex-start;
    }

    .pvz-modal-backdrop {
        padding: 0;
    }

    .pvz-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    /*
     * Одна прокрутка на всю колонку: карта уезжает вверх, список адресов
     * занимает экран. Город и строка адреса липнут к верху, радиус и
     * фильтры уезжают вместе со списком.
     */
    .pvz-modal__body {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .pvz-modal__map {
        order: -1;
        flex: none;
        height: min(38vh, 15rem);
        min-height: 9.5rem;
    }

    .pvz-modal__sidebar {
        flex: none;
        height: auto;
        min-height: min-content;
        overflow: visible;
        border-right: none;
        border-top: 0;
    }

    .pvz-modal__tools {
        padding: 0 var(--s3) var(--s2);
        border-bottom: 0;
        background: transparent;
    }

    .pvz-modal__find {
        position: sticky;
        top: 0;
        z-index: 4;
        padding: var(--s3);
        background: var(--surface);
        box-shadow:
            0 1px 0 rgb(13 13 12 / 6%),
            0 12px 20px -16px rgb(13 13 12 / 28%);
    }

    .pvz-map-expand {
        position: absolute;
        z-index: 500;
        left: 50%;
        bottom: 1.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin: 0;
        padding: 0.4rem 1rem;
        border: 0;
        border-radius: 999px;
        background: var(--surface);
        box-shadow:
            0 1px 2px rgb(13 13 12 / 12%),
            0 8px 20px -10px rgb(13 13 12 / 35%);
        color: var(--text);
        font-family: var(--font-text);
        font-size: 0.88rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.2;
        white-space: nowrap;
        transform: translateX(-50%);
        transition-property: transform, background-color, color;
        transition-duration: 160ms;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }

    .pvz-map-expand:hover {
        background: var(--surface);
        color: var(--text);
        transform: translateX(-50%);
        box-shadow:
            0 1px 2px rgb(13 13 12 / 12%),
            0 8px 20px -10px rgb(13 13 12 / 35%);
    }

    .pvz-map-expand:active {
        transform: translateX(-50%) scale(0.96);
    }

    .pvz-map-expand__close {
        display: none;
    }

    .pvz-modal-backdrop.is-map-expanded .pvz-map-expand__open {
        display: none;
    }

    .pvz-modal-backdrop.is-map-expanded .pvz-map-expand__close {
        display: inline;
    }

    .pvz-modal-backdrop.is-map-unavailable .pvz-map-expand {
        display: none;
    }

    .pvz-modal-backdrop.is-map-expanded .pvz-modal__sidebar {
        display: none;
    }

    .pvz-modal-backdrop.is-map-expanded .pvz-modal__map {
        order: 0;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .pvz-modal-backdrop.is-map-expanded .pvz-modal__body {
        overflow: hidden;
    }

    html[data-theme="dark"] .pvz-modal__find {
        box-shadow:
            0 1px 0 rgb(255 255 255 / 8%),
            0 12px 22px -16px rgb(0 0 0 / 60%);
    }

    .pvz-modal__sidebar .pvz-list {
        overflow: visible;
        flex: none;
        max-height: none;
        min-height: min-content;
    }

    .pvz-modal-backdrop.is-keyboard:not(.is-map-expanded) .pvz-modal__map {
        display: none;
    }

    .pvz-modal-backdrop.is-keyboard .pvz-modal__body {
        grid-template-rows: none;
    }

    .pvz-popup {
        max-width: calc(100vw - 48px);
    }

    .account-card {
        align-items: stretch;
        flex-direction: column;
    }

    .account-card__actions,
    .account-card form,
    .account-card__actions .btn,
    .account-card button {
        width: 100%;
    }

    body:has(.storefront-account) .account-card--editable .inline-editor__summary,
    body:has(.storefront-account) .account-card--editable .inline-editor__body button[type="submit"],
    body:has(.storefront-account) .account-card--editable .account-card__actions,
    body:has(.storefront-account) .account-card--editable .account-card__actions form,
    body:has(.storefront-account) .account-card--editable .account-card__actions button,
    body:has(.storefront-account) .privacy-center .account-card__actions,
    body:has(.storefront-account) .privacy-center .account-card__actions form,
    body:has(.storefront-account) .privacy-center .account-card__actions button,
    body:has(.storefront-account) .privacy-center .account-card__actions a {
        width: auto;
    }

    .cookie-banner {
        align-items: center;
        width: calc(100% - 1.5rem);
        max-width: none;
        padding: 0.55rem 0.55rem 0.55rem 0.9rem;
        border-radius: 20px;
        gap: 0.4rem 0.5rem;
    }

    .cookie-banner__copy {
        flex: 1 1 8rem;
        padding-right: 0;
    }

    .cookie-banner__actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .site-brand:hover img,
    .site-brand:focus-visible img,
    .storefront-flow--cart .qty button:active,
    .storefront-flow .stepper li[data-state="done"]:active::before,
    .site-nav .site-nav__icon:active,
    .site-nav button.site-nav__icon:active,
    .site-menu > summary:active,
    .site-menu__panel a:active,
    .site-account-nav a:active,
    a.stat:active,
    body:has(.storefront-account) .btn--primary:active,
    body:has(.storefront-account) .btn--ghost:active,
    body:has(.storefront-account) .btn--danger:active,
    body:has(.storefront-account) .account-holder__edit:active,
    body:has(.storefront-account) .account-avatar__trigger:active {
        transform: none;
    }
}

/* ------------------------------------------------ CXG-08: password guidance */

.password-field__requirement,
.password-field__advice {
    margin-bottom: var(--s2);
    font-size: 0.88rem;
    line-height: 1.45;
}

.password-field__requirement {
    color: var(--text-soft);
    font-weight: 500;
}

.password-field__advice {
    margin-bottom: var(--s3);
    color: var(--muted);
}

/*
 * Advisory meter, never a gate. Colour alone never carries the state: the word
 * beside the bar and the progressbar's aria-valuetext say the same thing
 * (WCAG 1.4.1).
 */
.password-strength {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: calc(var(--s2) * -1) 0 var(--s4);
}

.password-strength__track {
    flex: 1;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
}

.password-strength__bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--r-pill);
    background: var(--line-strong);
    transition: width 160ms var(--ease), background-color 160ms var(--ease);
}

.password-strength__bar[data-level="1"] {
    width: 25%;
    background: var(--danger);
}

.password-strength__bar[data-level="2"] {
    width: 50%;
    background: var(--warn);
}

.password-strength__bar[data-level="3"] {
    width: 75%;
    background: color-mix(in srgb, var(--ok) 55%, var(--warn));
}

.password-strength__bar[data-level="4"] {
    width: 100%;
    background: var(--ok);
}

.password-strength__word {
    margin: 0;
    min-width: 5.5rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

/* --------------------------------------------- CXG-08: registration notices */

.auth__notice {
    margin-bottom: var(--s4);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-md);
    border-left: 3px solid var(--warn);
    background: var(--warn-tint);
    color: var(--warn);
    font-size: 0.92rem;
}

.auth__notice a {
    color: inherit;
    font-weight: 600;
}

/* ==========================================================================
   CXG-20 — inline account editing (profile, recipients, addresses)
   ========================================================================== */

/*
 * Preview and editor share one grid: «Изменить» sits with «Удалить» on the
 * right. Opening the details hides the duplicate facts, puts the fields
 * where those facts were, and swaps «Изменить» for the form's submit in
 * the same slot. Address pairs live in a nested two-column grid.
 */
.account-card--editable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    column-gap: 0.5rem;
    row-gap: 1rem;
}

.account-card--editable > .account-card__body {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.account-card--editable > .inline-editor {
    grid-column: 2;
    grid-row: 1;
}

.account-card--editable > .account-card__actions {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
}

.account-card--editable > .inline-editor__notice {
    grid-column: 1 / -1;
}

.account-card--editable:not(:has(> .account-card__actions)) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.account-card--editable:has(.inline-editor[open]) > .account-card__body:not(:has(.account-facts__row--keep)) {
    display: none;
}

.account-card--editable:has(.inline-editor[open]) .account-facts__row--preview {
    display: none;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) > .inline-editor {
    display: contents;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) > .inline-editor > .inline-editor__summary {
    display: none;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) > .inline-editor > .inline-editor__body {
    display: block;
    grid-column: 1 / 3;
    grid-row: 1;
    min-width: 0;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]):has(.account-facts__row--keep) > .inline-editor > .inline-editor__body {
    grid-row: 2;
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable {
    display: block;
}

body:has(.storefront-account) .account-card--compose .inline-editor:not([open]) > .inline-editor__summary {
    font-size: 0;
    line-height: 0;
}

body:has(.storefront-account) .account-card--compose .inline-editor:not([open]) > .inline-editor__summary::after {
    content: "Добавить";
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
}

body:has(.storefront-account) .account-card--compose .inline-editor:not([open]) .inline-editor__label-cancel {
    display: none;
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) > .inline-editor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) > .inline-editor > .inline-editor__summary {
    display: inline-flex;
    position: absolute;
    left: calc(var(--flow-pad) + 7.1rem);
    bottom: var(--flow-pad);
    background: var(--surface-sunk);
    color: var(--text);
}

html[data-theme="dark"] body:has(.storefront-account) .account-card.account-card--compose .inline-editor[open] > .inline-editor__summary {
    background: var(--surface-sunk);
    color: var(--text);
}

body:has(.storefront-account) .account-card--compose .inline-editor[open] > .inline-editor__summary .inline-editor__label-add {
    display: none;
}

body:has(.storefront-account) .account-card--compose .inline-editor[open] > .inline-editor__summary .inline-editor__label-cancel {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) > .inline-editor > .inline-editor__body {
    display: block;
    order: 1;
    grid-column: auto;
    grid-row: auto;
}

body:has(.storefront-account) .site-main .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost),
body:has(.storefront-account) .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost) {
    background: var(--aqua);
    color: #0d0d0c;
}

body:has(.storefront-account) .site-main .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover,
body:has(.storefront-account) .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover {
    background: color-mix(in srgb, var(--aqua) 82%, var(--text));
    color: #0d0d0c;
}

html[data-theme="dark"] body:has(.storefront-account) .site-main .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost),
html[data-theme="dark"] body:has(.storefront-account) .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost) {
    background: var(--aqua);
    color: #0d0d0c;
}

html[data-theme="dark"] body:has(.storefront-account) .site-main .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover,
html[data-theme="dark"] body:has(.storefront-account) .account-card--compose .inline-editor__body button[type="submit"]:not(.btn--danger, .btn--ghost):hover {
    background: color-mix(in srgb, var(--aqua) 82%, #fff);
    color: #0d0d0c;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) > .account-card__actions {
    grid-column: 3;
    grid-row: 1;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body form > div:has(> div),
body:has(.storefront-account) .account-page > section > .inline-editor[open] .inline-editor__body form > div:has(> div) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 1rem;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body form div:has(> label),
body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body > .inline-editor__notice:not([hidden]),
body:has(.storefront-account) .account-page > section > .inline-editor[open] .inline-editor__body form div:has(> label),
body:has(.storefront-account) .account-page > section > .inline-editor[open] .inline-editor__body > .inline-editor__notice:not([hidden]) {
    grid-column: 1 / span 2;
    min-width: 0;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body form div:has(> button[type="submit"]),
body:has(.storefront-account) .account-page > section > .inline-editor[open] .inline-editor__body form div:has(> button[type="submit"]) {
    grid-column: 3;
    grid-row: 1;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[street]"]),
body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[block]"]),
body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[entrance]"]),
body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[intercom]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[street]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[block]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[entrance]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[intercom]"]) {
    grid-column: 1;
}

body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[house]"]),
body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[apartment]"]),
body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> [name$="[floor]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[house]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[apartment]"]),
body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> [name$="[floor]"]) {
    grid-column: 2;
}

@media (max-width: 40rem) {
    body:has(.storefront-account) .account-card--editable:has(.inline-editor--address[open]) .inline-editor__body form div:has(> label),
    body:has(.storefront-account) .account-page > section > .inline-editor--address[open] form div:has(> label) {
        grid-column: 1 / span 2;
    }
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) .inline-editor__body form > div:has(> div) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) .inline-editor__body form div:has(> button[type="submit"]) {
    display: flex;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0.15rem;
}

body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) .inline-editor__body form div:has(> label) {
    min-width: 0;
}

@media (max-width: 40rem) {
    body:has(.storefront-account) .account-card.account-card--compose.account-card--editable:has(.inline-editor[open]) > .inline-editor > .inline-editor__summary {
        position: static;
        left: auto;
        bottom: auto;
        margin-top: 0.5rem;
    }

    /*
     * Safari drops `display: contents` on <details>, so the open editor
     * sat in the same cell as the Email row and the two labels painted
     * on top of each other. Stack: keep facts, then the form.
     */
    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) {
        grid-template-columns: minmax(0, 1fr);
    }

    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) > .inline-editor {
        display: block;
        grid-column: 1;
        grid-row: 2;
    }

    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) > .inline-editor > .inline-editor__body,
    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]):has(.account-facts__row--keep) > .inline-editor > .inline-editor__body {
        display: grid;
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
    }

    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body form > div:has(> div) {
        grid-template-columns: minmax(0, 1fr);
    }

    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body form div:has(> label),
    body:has(.storefront-account) .account-card--editable:has(.inline-editor[open]) .inline-editor__body form div:has(> button[type="submit"]) {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        width: auto;
    }
}

/* Preview rows: label above value, so a long street never squeezes its label. */
.account-facts {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.account-facts__row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: stretch;
}

.account-facts dt {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.account-facts dd {
    margin: 0;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.inline-editor {
    border-top: 1px solid var(--line);
    padding-top: var(--s2);
}

.inline-editor__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) 0;
    color: var(--aqua-ink);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Safari still needs the WebKit pseudo-element to drop the default triangle. */
.inline-editor__summary::-webkit-details-marker {
    display: none;
}

.inline-editor__summary::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(-45deg);
    transition: transform 0.2s var(--ease);
}

.inline-editor[open] > .inline-editor__summary::before {
    transform: rotate(45deg);
}

.inline-editor__summary:focus-visible {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.inline-editor__body {
    margin-top: var(--s3);
    padding: var(--s4);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}

.inline-editor__body form {
    margin: 0;
}

.inline-editor__body input,
.inline-editor__body select,
.inline-editor__body textarea {
    max-width: none;
}

/*
 * A refusal the form itself cannot express — a conflict, a dead network. It
 * sits inside the block that failed so the customer reads it where they were
 * working, not at the top of a page they have scrolled past.
 */
.inline-editor__notice {
    margin: var(--s2) 0 0;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--danger);
    background: var(--danger-tint);
    color: var(--danger);
    font-size: 0.88rem;
}

.inline-editor__notice:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .inline-editor__body {
        padding: 0;
    }
}

/* ------------------------------------------------ CXG-24: bonuses and level */

.loyalty-summary {
    margin-bottom: var(--s5);
}

.tier-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s2);
}

.tier-ladder__step {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: var(--s2) var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* Levels still out of reach stay readable but visibly not yours yet. */
.tier-ladder__step[data-state="locked"] {
    background: var(--surface-sunk);
    color: var(--text-soft);
}

.tier-ladder__step[data-state="locked"] .tier-ladder__name {
    color: var(--text-soft);
}

.tier-ladder__step[data-state="current"] {
    border-color: var(--line-strong);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.tier-ladder__name {
    font-family: var(--font-display);
    font-weight: 500;
}

.tier-ladder__rate,
.tier-ladder__threshold {
    font-size: 0.9rem;
    color: var(--text-soft);
}

.tier-ladder__state {
    justify-self: end;
}

@media (max-width: 640px) {
    .tier-ladder__step {
        grid-template-columns: 1fr;
    }

    .tier-ladder__state {
        justify-self: start;
    }
}

/* ------------------------------------------- CXG-21: email verification card */

/* The address and its badge share a line and wrap together on a narrow phone. */
.account-facts__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

.account-card__verify {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--s2);
}

.account-card__hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ------------------------------------------------- CXG-33 test-mode banner */

/*
 * A thin operator-controlled strip above the header. It has to be readable
 * without being mistaken for an error, so it borrows the warn tokens rather
 * than the danger ones. Nothing here is `position: fixed` — the strip scrolls
 * away with the page and never covers content.
 *
 * When the setting is off the markup is not rendered at all, so there is no
 * `display: none` state and no reserved height to explain.
 */
.test-mode-banner {
    background: var(--warn-tint);
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 25%, white);
    color: var(--warn);
    padding-top: env(safe-area-inset-top, 0px);
}

.test-mode-banner__text {
    width: min(var(--wide), 100% - var(--gutter) * 2);
    margin: 0 auto;
    padding: var(--s2) 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

/* --------------------------------------------- checkout steps (CXG-09..CXG-11)
 *
 * D-CXG-03 put the address at the top of the delivery step and the recipient on
 * a step of its own, so both steps now show the same two-part shape: a list of
 * what the profile already knows, and a form for something new. These rules
 * only give that shape room — colour and type come from the tokens above.
 */

.checkout-page {
    width: 100%;
    margin: 0 auto;
}

.checkout-panel {
    margin-bottom: var(--s4);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--rim), var(--lift-1);
}

.checkout-panel h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.checkout-page__back,
.delivery-page__back {
    margin-top: var(--s5);
}

/* A saved address or recipient reads as a row you can click anywhere on,
   rather than as a radio with a caption next to it. */
.choice-list {
    display: grid;
    gap: var(--s2);
    margin-bottom: var(--s4);
}

.choice-list__item {
    display: flex;
    gap: var(--s3);
    align-items: baseline;
    margin: 0;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
    cursor: pointer;
}

.choice-list__item:hover {
    border-color: var(--line-strong);
}

.choice-list__item:has(input:checked) {
    border-color: var(--aqua-ink);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.choice-list__item input {
    flex: none;
    margin: 0;
    width: auto;
}

.delivery-address-choice,
.delivery-address-new {
    margin: 0 0 var(--s4);
    padding: 0;
    border: 0;
}

.delivery-address-choice legend,
.delivery-address-new legend {
    margin-bottom: var(--s2);
    padding: 0;
    font-weight: 600;
}

/* ------------------------------------------ address suggestions (CXG-11) */

/* The list is an overlay over the page, not a block that pushes the rest of
   the form down every time a suggestion arrives. Wraps the input only — not
   the label/errors/help form_row used to bundle it with — so `top: 100%`
   below sits flush under the field instead of under the whole row. */
.address-suggestions {
    position: relative;
}

.address-suggestions__list {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 16rem;
    margin: var(--s1) 0 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--rim), var(--lift-1);
    list-style: none;
}

.address-suggestions__unlock {
    display: inline-block;
    margin-top: var(--s1);
    padding: 0;
    border: 0;
    background: none;
    color: var(--aqua-ink);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.address-suggestions__unlock[hidden] {
    display: none;
}

.address-suggestions__list[hidden] {
    display: none;
}

.address-suggestions__option {
    padding: var(--s2) var(--s3);
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
}

.address-suggestions__option:hover,
.address-suggestions__option.is-active {
    background: var(--surface-sunk);
}

/* ------------------------------------------- customer reviews (CXG-25/27) */

/* One review card, shared by /reviews and the home-page carousel. */
.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    height: 100%;
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--rim);
}

.review-card__rating {
    margin: 0;
    color: var(--aqua-deep);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.review-card__body {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
}

.review-card__meta {
    margin-top: auto;
}

.review-card__author {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.review-list {
    display: grid;
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The account view is a summary, not a published card: state first, then the
   text the customer wrote, so a pending review is recognisable at a glance. */
.account-card--stacked {
    align-items: flex-start;
}

.review-summary__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 0 0 var(--s2);
}

.review-summary__body {
    margin: 0 0 var(--s2);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Carousel.

   The base rules are the no-JS state and they are a plain responsive grid of
   cards — nothing here needs scripting to look finished. `--enhanced` is added
   by the Stimulus controller and is the only thing that turns the grid into
   one-card-at-a-time; without it every slide simply stays on the page. */
.review-carousel__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-carousel__slide {
    margin: 0;
}

.review-carousel__viewport:focus-visible {
    outline: 2px solid var(--aqua-deep);
    outline-offset: var(--s2);
    border-radius: var(--r-md);
}

.review-carousel--enhanced .review-carousel__track {
    display: block;
}

.review-carousel--enhanced .review-carousel__slide {
    display: none;
}

.review-carousel--enhanced .review-carousel__slide.is-current {
    display: block;
    max-width: var(--mid);
    margin-inline: auto;
}

.review-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    margin-top: var(--s4);
}

.review-carousel__controls[hidden] {
    display: none;
}

.review-carousel__position {
    min-width: 6ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.review-carousel__status {
    margin: var(--s3) 0 0;
    text-align: center;
}

.review-carousel__status[hidden] {
    display: none;
}

/* ------------------------------------------------------------ cart (CXG-05) */

/* The quantity field is a number input, so it only needs to be as wide as two
   digits and a spinner — the layout of the line does the rest. */
.cart-qty {
    width: 4.5rem;
}

/* The «Итого» card says «считаем» while a figure on screen is still the
   customer's own — a quantity or a purchase mode the server has not confirmed
   yet (CART-02, CART-06): the money goes quiet and a spinner sits over it, so
   a stale total is visibly stale instead of quietly wrong. The header badges
   are NOT dimmed: they are repriced in the browser the instant the quantity
   moves (D-WF-12) and are already right.

   Keyed to that unconfirmed state and not to `aria-busy`: at 400 ms the request
   was the state, and a burst of ± turned this into a strobe over figures that
   were right again before the eye caught up. The window is seconds long, so
   it comes on once when the customer starts changing something and goes once
   when the answer lands. `aria-busy` still means «a request is in flight» and
   nothing else. The veil takes no clicks: a promo code can still be typed and
   «Продолжить» waits for the write on its own. */
[data-controller="cart"].is-cart-pending .definition {
    opacity: 0.45;
    transition-property: opacity;
    transition-duration: 160ms;
    transition-timing-function: ease-out;
}

/* Sits in the heading row, at the card's own padding, so it reads as
   «Итого — считаем» and never covers a figure or a control. */
.storefront-flow__summary::after {
    content: "";
    position: absolute;
    top: calc(var(--flow-pad, clamp(1.1rem, 2.4vw, 1.6rem)) + 0.15rem);
    right: var(--flow-pad, clamp(1.1rem, 2.4vw, 1.6rem));
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2.5px solid rgb(13 13 12 / 12%);
    border-top-color: var(--orange, #a85d0a);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
    animation: spin 0.7s linear infinite;
    animation-play-state: paused;
}

[data-controller="cart"].is-cart-pending .storefront-flow__summary::after {
    opacity: 1;
    animation-play-state: running;
}

.cart-summary__cta {
    margin-top: var(--s5);
}

.cart-summary__link {
    margin-top: var(--s3);
    text-align: center;
}
/* ------------------------------------------------------ cart and checkout */

/*
 * Funnel pages speak the home prototype's language: one orange that never
 * drifts, plates instead of glass, hairline rings instead of drop shadows,
 * and no leftover teal glow. Tokens live on the funnel wrappers and on
 * `body:has(.storefront-account)` so the cabinet speaks the same language;
 * legal stays on the older paper.
 */
html[data-theme="light"] body:has(.storefront-flow),
html[data-theme="light"] body:has(.storefront-auth),
html[data-theme="light"] body:has(.storefront-account) {
    --paper: #ffffff;
}

.storefront-flow,
.storefront-auth,
body:has(.storefront-account) {
    --flow-radius: 32px;
    --flow-pad: 20px;
    --flow-inner: 12px;
    --flow-dot: 20px;
    --flow-ease: cubic-bezier(0.2, 0, 0, 1);
    --flow-ring: 0 0 0 1px rgb(0 0 0 / 10%);
    --flow-lift:
        0 0 0 1px rgb(0 0 0 / 6%),
        0 1px 2px -1px rgb(0 0 0 / 6%),
        0 2px 4px 0 rgb(0 0 0 / 4%);
    --choice-picked: var(--aqua);
    --choice-picked-ink: var(--aqua);
    --check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.3l3.3 3.3L13 4.5'/%3E%3C/svg%3E");
}

/*
 * 32px radius eats visual margin at the corners. Cabinet plates need
 * padding equal to the radius so copy sits in the inscribed rectangle.
 */
body:has(.storefront-account) {
    --flow-pad: 2rem;
}

.storefront-flow.delivery-page {
    --flow-pad: 2rem;
    /* Header inner is 4.3rem; park the rail fully under it, not in the blur. */
    --delivery-rail-top: calc(4.3rem + env(safe-area-inset-top, 0px) + 1.15rem);
}

.storefront-flow,
.storefront-auth {
    position: relative;
}

html[data-theme="dark"] .storefront-flow,
html[data-theme="dark"] .storefront-auth,
html[data-theme="dark"] body:has(.storefront-account) {
    --flow-ring: 0 0 0 1px rgb(255 255 255 / 10%);
    --flow-lift: 0 0 0 1px rgb(255 255 255 / 10%);
    --choice-picked: var(--aqua);
    --choice-picked-ink: var(--aqua);
}

body:has(.storefront-flow) .site-main {
    margin-top: var(--s6);
}

.storefront-flow .page-head {
    max-width: 48rem;
    padding: 0.65rem 0 0;
    margin-bottom: 1rem;
}

.storefront-flow .page-head h1 {
    font-size: clamp(1.7rem, 3.8vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.storefront-flow .page-head .lede {
    margin: 0.85rem 0 0;
    max-width: 42ch;
    font-size: 1.05rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-wrap: pretty;
}

.storefront-flow .card,
.storefront-flow > section,
.storefront-flow .delivery-panel {
    padding: var(--flow-pad);
    border: 0;
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.storefront-flow .card h2,
.storefront-flow .delivery-panel h2,
.storefront-flow .delivery-panel h3 {
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.storefront-flow .layout-rail {
    gap: 20px;
}

.storefront-flow--cart .layout-rail {
    grid-template-columns: minmax(13rem, 1fr) minmax(16rem, 1.45fr) minmax(16.5rem, 1fr);
}

.storefront-flow__lines {
    padding: var(--flow-pad);
}

.storefront-flow__goods {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.storefront-flow--cart .storefront-flow__goods {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
    align-items: start;
    gap: 20px;
}

.storefront-flow__summary {
    position: sticky;
    top: 5rem;
    background: var(--surface);
}

.storefront-flow .line-item {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 1rem;
    padding-block: 1.25rem;
    border-bottom-color: var(--line);
}

.storefront-flow--cart .line-item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start;
    gap: 20px;
    padding: 0;
    border: 0;
}

.storefront-flow .line-item:first-child {
    padding-top: 0;
}

.storefront-flow .line-item:last-child {
    padding-bottom: 0;
}

.storefront-flow .line-item__thumb {
    border-radius: var(--flow-inner);
    background: var(--surface-sunk);
}

.storefront-flow .line-item__thumb img {
    outline: 1px solid rgb(0 0 0 / 10%);
    outline-offset: -1px;
}

html[data-theme="dark"] .storefront-flow .line-item__thumb img {
    outline-color: rgb(255 255 255 / 10%);
}

.storefront-flow .line-item__title {
    margin: 0 0 0.55rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    text-wrap: pretty;
}

.storefront-flow--cart .stepper,
.storefront-flow--checkout .stepper {
    margin-bottom: var(--s7);
}

/*
 * Desktop stepper already says «Корзина». On the phone the labels clip, so
 * the page name has to sit under the circles — same .page-head as the later
 * steps, hidden above 720px rather than a second title beside the labels.
 */
.storefront-flow--cart .storefront-flow__cart-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.storefront-flow .line-item__total,
.storefront-flow .definition dd,
.storefront-flow--result [data-test="order-number"] {
    font-variant-numeric: tabular-nums;
}

.storefront-flow .definition__total {
    color: var(--text);
}

.storefront-flow .line-item__remove {
    min-height: 40px;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-text);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: color, background-color, transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.storefront-flow .line-item__remove:hover {
    color: var(--danger);
    background: transparent;
    transform: none;
    box-shadow: none;
}

.storefront-flow .line-item__remove:active {
    transform: scale(0.96);
}

.storefront-flow .qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(13 13 12 / 14%);
    border-radius: 999px;
    overflow: hidden;
    background: #f5f7fa;
    box-shadow: none;
}

.storefront-flow .qty:focus-within {
    border-color: rgb(13 13 12 / 28%);
}

html[data-theme="dark"] .storefront-flow .qty {
    background: var(--surface-sunk);
    border-color: rgb(255 255 255 / 14%);
}

html[data-theme="dark"] .storefront-flow .qty:focus-within {
    border-color: rgb(255 255 255 / 28%);
}

.storefront-flow .qty button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    color: inherit;
    font-size: 16px;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .qty button:hover {
    background: color-mix(in srgb, var(--aqua) 16%, transparent);
    color: var(--aqua);
}

.storefront-flow .qty input,
.storefront-flow .qty .cart-qty {
    width: 36px;
    height: 38px;
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.storefront-flow .btn--primary,
.storefront-flow a.btn--primary,
.storefront-flow button.btn--primary {
    padding: 18px 26px;
    min-height: 0;
    border: 0;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .btn--primary:hover,
.storefront-flow a.btn--primary:hover,
.storefront-flow button.btn--primary:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.storefront-flow .btn--primary:active,
.storefront-flow a.btn--primary:active,
.storefront-flow button.btn--primary:active {
    transform: scale(0.96);
}

.storefront-flow .btn--primary:disabled,
.storefront-flow button.btn--primary:disabled {
    opacity: 0.55;
    transform: none;
    cursor: not-allowed;
}

.storefront-flow .btn--ghost,
.storefront-flow button[type="button"].btn--ghost {
    background: transparent;
    color: inherit;
    border-color: currentcolor;
    box-shadow: none;
}

.storefront-flow .btn--ghost:hover,
.storefront-flow button[type="button"].btn--ghost:hover {
    background: transparent;
    color: var(--aqua);
    border-color: var(--aqua);
    transform: none;
    box-shadow: none;
}

.storefront-flow .note,
.storefront-flow .notice {
    margin-top: 1rem;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--flow-inner);
    background: var(--surface-sunk);
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.storefront-flow .empty-state {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--flow-pad);
}

.storefront-flow .empty-state h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.04em;
}

.storefront-flow .cart-summary__link a {
    color: var(--aqua);
    font-weight: 600;
    text-decoration: none;
}

.storefront-flow .cart-summary__link a:hover {
    color: var(--aqua-deep);
}

.storefront-flow input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
.storefront-flow select,
.storefront-flow textarea {
    border-radius: 16px;
    border-color: rgb(13 13 12 / 14%);
    background: var(--surface);
    box-shadow: none;
}

html[data-theme="dark"] .storefront-flow input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
html[data-theme="dark"] .storefront-flow select,
html[data-theme="dark"] .storefront-flow textarea {
    border-color: rgb(255 255 255 / 14%);
}

.storefront-flow input:focus,
.storefront-flow select:focus,
.storefront-flow textarea:focus {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

/*
 * D-CMS-02: the two saved-entity selects run the full width of their plate.
 *
 * Every other field in the funnel is capped at 30rem, and for a name or a
 * phone that cap is right — a text field as wide as the page is harder to
 * read, not easier. An address is the exception: it is one long string the
 * customer has to recognise at a glance, and a select cannot wrap or ellipsise
 * gracefully. So these two, and only these two, are let out of the cap.
 *
 * Placed after `.storefront-flow select` above, which is a two-class selector
 * and would otherwise outrank a component written anywhere earlier.
 */
.storefront-flow .delivery-address-choice select,
.storefront-flow .checkout-recipient-choice select {
    max-width: none;
}

/*
 * What the short option label leaves out, under the select that shows it.
 *
 * The label names the address; this line carries the door — entrance, floor,
 * intercom — which is the half a courier needs and the half that never fit on
 * one line. Server-rendered, so it is right with scripting off, and rewritten
 * by delivery_controller.js on change.
 */
.delivery-address-choice__details {
    margin: calc(var(--s2) * -1) 0 var(--s4);
    font-size: 0.86rem;
}

/*
 * The recipient plate, above the two-column rail (D-CMS-01).
 *
 * It spans the full width rather than sitting in the left column: the rail's
 * content is the tariff, which has nothing to say about a name and a phone,
 * and starting the rail level with the recipient would have left the right
 * column empty for the first screen of a page whose whole point is that
 * nothing is empty any more.
 */
.checkout-recipient {
    margin: 0 0 var(--s6);
}

.checkout-recipient__panel > .muted {
    max-width: 52ch;
}

.checkout-recipient__new {
    margin-top: var(--s4);
}

/*
 * CXG-37: field and apply button as ONE control — the promo code and the
 * bonus spend in the cart.
 *
 * They used to be two siblings in a flex row with a gap between them, and a
 * gap is what they read as: an input, then a separate small button, with the
 * input's own bottom margin pushing the two off each other's baseline. The
 * border moves to the wrapper here and the button sits inside it, flush
 * against the field's right edge — so the pair reads as one input with an
 * action on its end, which is what it is.
 *
 * Scoped to `.storefront-flow` and placed after that section's own input and
 * `.btn--ghost` skins on purpose: both of those outrank a bare class, so a
 * component written as one would have quietly lost to them.
 */
.storefront-flow .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 30rem;
    margin: 0 0 var(--s4);
    padding: 3px;
    border: 1px solid rgb(13 13 12 / 14%);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

html[data-theme="dark"] .storefront-flow .input-group {
    border-color: rgb(255 255 255 / 14%);
}

/* The ring belongs to the whole control: the field inside no longer owns a
   border of its own to light up. */
.storefront-flow .input-group:focus-within {
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 22%, transparent);
}

.storefront-flow .input-group > .input-group__field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 13px;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .input-group > .input-group__field:focus {
    border: 0;
    box-shadow: none;
}

/* Spinners would sit right next to the apply button and read as a second pair
   of controls on the same edge. The field is typed into, not stepped. */
.storefront-flow .input-group > .input-group__field[type="number"] {
    appearance: textfield;
}

.storefront-flow .input-group > .input-group__field[type="number"]::-webkit-outer-spin-button,
.storefront-flow .input-group > .input-group__field[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Quiet on purpose: the rail already carries one aqua call to action
   («Продолжить»), and a second one beside it would compete with it. */
.storefront-flow .input-group__apply {
    flex: 0 0 auto;
    align-self: stretch;
    width: 2.5rem;
    min-width: 40px;
    min-height: 0;
    padding: 0;
    border-color: transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--muted);
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.storefront-flow .input-group__apply:hover,
.storefront-flow .input-group__apply:focus-visible {
    border-color: transparent;
    background: color-mix(in srgb, var(--aqua) 14%, transparent);
    color: var(--aqua);
    transform: none;
    box-shadow: none;
}

.storefront-flow .input-group__apply:active {
    transform: scale(0.96);
}

/* The label sits on the field it names, not adrift above a gap. */
.storefront-flow .cart-pricing-inputs label {
    margin-bottom: var(--s2);
}

.storefront-flow .cart-pricing-inputs .bonus-balance {
    margin-bottom: var(--s2);
}

.storefront-flow .bonus-balance__amount {
    color: var(--text);
}

.storefront-flow .cart-pricing-inputs form:last-of-type .input-group {
    margin-bottom: var(--s3);
}

.storefront-flow .cart-pricing-inputs__rules,
.storefront-flow .cart-pricing-inputs__legal {
    display: flex;
    flex-direction: column;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.storefront-flow .cart-pricing-inputs__rules a,
.storefront-flow .cart-pricing-inputs__legal a {
    display: flex;
    align-items: center;
    min-height: 40px;
    text-wrap: pretty;
}

[data-cart-pricing-slot]:empty {
    display: none;
}

[data-cart-pricing-slot]:not(:empty) {
    grid-column: 1 / -1;
    margin: 0.75rem 0 0.1rem;
}

.storefront-flow--cart .cart-pricing-inputs {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow--cart .cart-pricing-inputs__heading {
    margin: 0 0 0.85rem;
    color: var(--text);
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-wrap: balance;
}

.storefront-flow--cart .cart-pricing-inputs__panel {
    padding: 0 0 8px;
}

.storefront-flow--cart .cart-pricing-inputs__panel .input-group {
    max-width: none;
}

.storefront-flow--cart .cart-pricing-inputs__panel .input-group__field {
    font-variant-numeric: tabular-nums;
}

.storefront-flow--cart .cart-pricing-inputs__promo {
    position: relative;
    align-items: center;
    /* Square «ОК» is 3.25rem. Border-box min-height includes the 3px pad and the 1px ring. */
    min-height: calc(3.25rem + 8px);
}

.storefront-flow--cart .cart-pricing-inputs__promo > .input-group__field {
    padding: 1.15rem 0.55rem 0.5rem 0.85rem;
}

.storefront-flow--cart .cart-pricing-inputs__promo > label {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition-property: transform, font-size, font-weight, color, top;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.storefront-flow--cart .cart-pricing-inputs__promo:focus-within > label,
.storefront-flow--cart .cart-pricing-inputs__promo:has(.input-group__field:not(:placeholder-shown)) > label {
    top: 0.42rem;
    font-size: 0.72rem;
    font-weight: 300;
    transform: none;
}

.storefront-flow--cart .cart-pricing-inputs__promo > .cart-pricing-inputs__apply {
    flex: 0 0 3.25rem;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: var(--aqua);
    box-shadow: none;
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform-origin: center;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.storefront-flow--cart .cart-pricing-inputs__promo > .cart-pricing-inputs__apply:hover,
.storefront-flow--cart .cart-pricing-inputs__promo > .cart-pricing-inputs__apply:focus-visible {
    background: var(--aqua-bright);
    color: #0d0d0c;
    box-shadow: none;
    transform: none;
}

.storefront-flow--cart .cart-pricing-inputs__promo > .cart-pricing-inputs__apply:active {
    transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
    .storefront-flow--cart .cart-pricing-inputs__promo > label,
    .storefront-flow--cart .cart-pricing-inputs__promo > .cart-pricing-inputs__apply {
        transition-duration: 0.01ms;
    }
}

/* Where the two controls went, said once on the page that no longer has them. */
.storefront-flow .checkout-pricing__edit {
    margin-top: var(--s4);
    font-size: 0.85rem;
}

.storefront-flow .checkout-pricing__edit a {
    color: var(--aqua);
    font-weight: 600;
    text-decoration: none;
}

.storefront-flow .checkout-pricing__edit a:hover {
    color: var(--aqua-deep);
}

/*
 * Final checkout step. Same plates as the cart and the cabinet: 32px,
 * --flow-lift, no 1px ring. Confirm lives under «Итого» in the rail,
 * the way «Продолжить» does in the cart.
 */
.storefront-flow--review .layout-rail {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
}

.storefront-flow--review .layout-rail__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*
 * The rail already sticks. A second sticky on the cost card lets it
 * slide over the reservation note at mid widths, when the aside is
 * taller than the leftover viewport. Keep the pair moving as one.
 */
.storefront-flow--review .storefront-flow__summary {
    position: static;
}

.storefront-flow--review .stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.storefront-flow--review .stack > * + * {
    margin-top: 0;
}

.storefront-flow--review .stack > section {
    margin-bottom: 0;
}

.storefront-flow--review .card h2 {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.storefront-flow--review .card > .row--between {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.storefront-flow--review .card > .row--between h2 {
    margin: 0;
}

.storefront-flow--review a.btn--ghost,
.storefront-flow--review .btn--ghost,
.storefront-flow--result a.btn--ghost,
.storefront-flow--result .btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow--review a.btn--ghost:hover,
.storefront-flow--review .btn--ghost:hover,
.storefront-flow--result a.btn--ghost:hover,
.storefront-flow--result .btn--ghost:hover {
    background: color-mix(in srgb, var(--aqua) 12%, var(--surface-sunk));
    color: var(--text);
    border: 0;
    transform: none;
    box-shadow: none;
}

.storefront-flow--review a.btn--ghost:active,
.storefront-flow--review .btn--ghost:active,
.storefront-flow--result a.btn--ghost:active,
.storefront-flow--result .btn--ghost:active {
    transform: scale(0.96);
}

.storefront-flow--review .line-item {
    grid-template-columns: 5.75rem minmax(0, 1fr) auto;
    align-items: start;
}

.storefront-flow--review .line-item__thumb {
    border-radius: var(--flow-inner);
}

.storefront-flow--review .line-item__total {
    padding-top: 0.2rem;
}

.storefront-flow--review .checkout-submit {
    margin-top: 1.35rem;
}

.storefront-flow--review .checkout-submit .field-check {
    margin-bottom: 0.85rem;
}

.storefront-flow--review .checkout-submit__rules {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.storefront-flow--review .checkout-consent-notice {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    text-wrap: pretty;
}

/*
 * DEL-06: the same "бесплатно" pill and hover tooltip the review step draws
 * (`.storefront-flow--review`) also has to render on the delivery step,
 * where the tariff cards live under `.storefront-flow--checkout` and never
 * carry `--review`. Rather than a second copy of these rules under a second
 * scope, both modifiers are listed on every selector below — review carries
 * both `--checkout` and `--review` already (see `review.html.twig`'s
 * wrapper), and `.checkout-pricing__free` is not used on any OTHER page that
 * carries `--checkout` (`payment/redirect.html.twig`, `checkout/result.html.twig`),
 * so widening the scope this way reaches delivery.html.twig without painting
 * anything unintended elsewhere.
 */
/*
 * The word keeps its own line box: the dotted underline is a text
 * decoration on the glyphs and the tooltip hangs 6px above the line. It used
 * to be a 40px-tall inline-block (min-height + padding, margin −10px) with a
 * `border-bottom` for the underline — a touch target that put the dots a
 * line below «бесплатно» and the tooltip a line above it (walkthrough,
 * 2026-09-10). The touch target is still 40px: an invisible `::before`
 * overlay, which moves nothing.
 */
.storefront-flow--review .checkout-pricing__free,
.storefront-flow--checkout .checkout-pricing__free {
    position: relative;
    display: inline-block;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    line-height: inherit;
    text-decoration: underline dotted color-mix(in srgb, var(--text) 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: help;
}

.storefront-flow--review .checkout-pricing__free::before,
.storefront-flow--checkout .checkout-pricing__free::before {
    content: "";
    position: absolute;
    inset: -8px -6px;
}

.storefront-flow--review .checkout-pricing__free[data-hint]::after,
.storefront-flow--checkout .checkout-pricing__free[data-hint]::after {
    content: attr(data-hint);
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 2;
    width: max-content;
    max-width: min(16rem, 70vw);
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    background: var(--text);
    color: var(--surface);
    font-family: var(--font-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: left;
    text-wrap: pretty;
    white-space: normal;
    box-shadow:
        0 1px 1px rgb(13 13 12 / 6%),
        0 8px 18px rgb(13 13 12 / 14%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition-property: opacity, transform;
    transition-duration: 120ms;
    transition-delay: 0ms;
    transition-timing-function: var(--flow-ease);
}

@media (hover: hover) and (pointer: fine) {
    .storefront-flow--review .checkout-pricing__free[data-hint]:hover::after,
    .storefront-flow--checkout .checkout-pricing__free[data-hint]:hover::after {
        opacity: 1;
        transform: translateY(0);
        transition-duration: 160ms;
        transition-delay: 180ms;
    }
}

.storefront-flow--review .checkout-pricing__free[data-hint]:focus-visible,
.storefront-flow--checkout .checkout-pricing__free[data-hint]:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 3px;
    border-radius: 4px;
}

.storefront-flow--review .checkout-pricing__free[data-hint]:focus-visible::after,
.storefront-flow--checkout .checkout-pricing__free[data-hint]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
    .storefront-flow--review .checkout-pricing__free[data-hint]::after,
    .storefront-flow--checkout .checkout-pricing__free[data-hint]::after {
        transform: none;
        transition-duration: 0.01ms;
        transition-delay: 0ms;
    }
}

.storefront-flow--review .checkout-submit > .note:first-child {
    margin-top: 0;
    margin-bottom: 0.85rem;
}

.storefront-flow--review .layout-rail__aside > .note {
    margin-top: 0;
}

@media (max-width: 60rem) {
    .storefront-flow--review .layout-rail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .storefront-flow--review .line-item {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .storefront-flow--review .line-item__total {
        grid-column: 2;
        padding-top: 0;
        text-align: left;
    }
}

.flow-choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stack > .flow-choice-list {
    margin-top: 0;
}

.storefront-flow__mode {
    margin: 0;
}

.storefront-flow__mode-label {
    margin: 0 0 0.45rem;
    font-family: var(--font-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.storefront-flow--cart {
    --buy-pad-x: 22px;
    --buy-dot: 20px;
    --buy-head-gap: 12px;
    --buy-indent: calc(var(--buy-pad-x) + var(--buy-dot) + var(--buy-head-gap));
    /* Silver stays silver. Theme tokens must not remint this gradient. */
    --chrome: linear-gradient(148deg, #fff 0%, #eef2f5 15%, #bcc3cb 34%, #9ea5ad 46%, #dce1e6 63%, #fff 79%, #b2b9c1 100%);
}

html[data-theme="dark"] .storefront-flow--cart {
    --chrome: linear-gradient(148deg, #fff 0%, #eef2f5 15%, #bcc3cb 34%, #9ea5ad 46%, #dce1e6 63%, #fff 79%, #b2b9c1 100%);
}

.storefront-flow--cart .storefront-flow__shot {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.storefront-flow--cart .storefront-flow__offer {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.storefront-flow--cart [data-test="cart-error"] {
    grid-column: 1 / -1;
    margin-top: 0;
}

.storefront-flow--cart .layout-rail__aside {
    display: flex;
    flex-direction: column;
    grid-column: 3;
    grid-row: 1;
    gap: 12px;
}

.storefront-flow--cart .cart-summary__ship {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem var(--s4);
}

.storefront-flow--cart .cart-summary__area {
    display: none;
}

.storefront-flow--cart .line-item__thumb {
    width: 100%;
    border-radius: var(--flow-radius);
    background: var(--surface-sunk);
    box-shadow: var(--flow-lift);
}

.storefront-flow--cart .line-item__thumb img {
    outline: 1px solid rgb(0 0 0 / 10%);
    outline-offset: -1px;
}

html[data-theme="dark"] .storefront-flow--cart .line-item__thumb img {
    outline-color: rgb(255 255 255 / 10%);
}

.storefront-flow--cart .buy-opts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: 0;
}

.storefront-flow--cart .buy-opt {
    position: relative;
    isolation: isolate;
    width: 100%;
    border-radius: var(--flow-radius);
    background: var(--surface);
    color: #0d0d0c;
    overflow: hidden;
}

.storefront-flow--cart .buy-opt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--chrome);
    pointer-events: none;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.28s;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow--cart .buy-opt--single::before,
.storefront-flow--cart .buy-opt:has(input[name="mode"]:checked)::before {
    opacity: 0;
}

.storefront-flow--cart .buy-opt--single,
.storefront-flow--cart .buy-opt:has(input[name="mode"]:checked) {
    color: var(--text);
    box-shadow: var(--flow-lift);
}

.storefront-flow--cart .buy-opt__head,
.storefront-flow--cart .buy-opt__body {
    position: relative;
    z-index: 1;
}

.storefront-flow--cart .buy-opt__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px var(--buy-head-gap);
    width: 100%;
    padding: 16px var(--buy-pad-x);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.storefront-flow--cart .buy-opt--single .buy-opt__head {
    cursor: default;
}

.storefront-flow--cart .buy-opt:has(input[name="mode"]:checked) .buy-opt__head,
.storefront-flow--cart .buy-opt--single .buy-opt__head {
    padding-top: 24px;
    padding-bottom: 16px;
}

.storefront-flow--cart .buy-opt__radio {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin: 8px 0 0 12px;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.storefront-flow--cart .buy-opt__radio:focus,
.storefront-flow--cart .buy-opt__radio:focus-visible {
    outline: none;
}

.storefront-flow--cart .buy-opt__radio:focus-visible + .buy-opt__head {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 2px;
}

.storefront-flow--cart .buy-opt:has(input:disabled) {
    opacity: 0.4;
    pointer-events: none;
}

.storefront-flow--cart .buy-opt__dot {
    width: var(--buy-dot);
    height: var(--buy-dot);
    border-radius: 50%;
    border: 2px solid currentcolor;
    flex: none;
    position: relative;
}

.storefront-flow--cart .buy-opt--single .buy-opt__dot {
    display: none;
}

.storefront-flow--cart .buy-opt:has(input[name="mode"]:checked) .buy-opt__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentcolor;
}

.storefront-flow--cart .buy-opt__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.25;
    text-wrap: balance;
}

.storefront-flow--cart .buy-opt__unit {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.storefront-flow--cart .buy-opt__head .buybox__option-badge {
    flex: none;
    align-self: center;
    margin: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--aqua) 14%, transparent);
    color: var(--aqua);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.storefront-flow--cart .buy-opt__body-inner {
    overflow: hidden;
    min-height: 0;
}

.storefront-flow--cart .buy-opt__pad {
    padding: 0 var(--buy-pad-x) 24px var(--buy-indent);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.storefront-flow--cart .buy-opt:has(input[name="mode"]:checked) .buy-opt__pad,
.storefront-flow--cart .buy-opt--single .buy-opt__pad {
    padding-bottom: 24px;
}

.storefront-flow--cart .buy-opt--single .buy-opt__pad {
    padding-left: var(--buy-pad-x);
}

.storefront-flow--cart .buy-opt__pad:has(.buy-opt__lead):has(.buy-opt__tail) {
    gap: 0;
}

.storefront-flow--cart .buy-opt__lead {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.storefront-flow--cart .buy-opt__tail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.storefront-flow--cart .buy-opt__lead + .buy-opt__tail {
    margin-top: 16px;
}

.storefront-flow--cart .buy-opt__note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
    text-wrap: pretty;
}

.storefront-flow--cart .buy-scene__product-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--text);
}

.storefront-flow--cart .buy-scene__caption {
    font-size: 0.875rem;
}

.storefront-flow--cart .buy-opt__promo {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--aqua);
    text-wrap: pretty;
}

.storefront-flow--cart .buy-opt__note--italic {
    font-style: italic;
}

.storefront-flow--cart .buy-opt__footnote {
    font-size: 0.69rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--muted) 72%, #fff);
    text-align: left;
    text-wrap: pretty;
    margin-top: 28px;
}

.storefront-flow--cart .buy-opt__legal {
    font-size: 0.75rem;
    line-height: 1.4;
    text-wrap: pretty;
}

.storefront-flow--cart .buy-opt__perks {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
}

.storefront-flow--cart .buy-opt__perk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.81rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--muted) 62%, #fff);
    text-wrap: pretty;
    transition-property: color;
    transition-duration: 0.18s;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow--cart .buy-opt__perk.is-on {
    color: var(--aqua);
}

.storefront-flow--cart .buy-opt__perk-mark,
.storefront-flow--cart .buy-opt__gift-mark {
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
    align-self: center;
}

.storefront-flow--cart .buy-opt__perk-mark--crown {
    color: inherit;
    background-color: currentcolor;
    -webkit-mask: url("../images/buybox/crown-t9H3aRq.svg") center / contain no-repeat;
    mask: url("../images/buybox/crown-t9H3aRq.svg") center / contain no-repeat;
}

.storefront-flow--cart .buy-opt__gift {
    font-size: 0.75rem;
}

.storefront-flow--cart .buy-opt__gift-mark {
    overflow: visible;
}

.storefront-flow--cart .buy-opt__gift-mark circle,
.storefront-flow--cart .buy-opt__gift-mark path {
    transition-property: fill, stroke;
    transition-duration: 0.18s;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow--cart .buy-opt__gift.is-on .buy-opt__gift-mark circle {
    fill: currentcolor;
}

.storefront-flow--cart .buy-opt__gift.is-on .buy-opt__gift-mark path {
    stroke: #fff;
}

.storefront-flow--cart .buy-opt__qty {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.storefront-flow--cart .buy-opt__qty-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.storefront-flow--cart .buy-opt__qty .line-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 40px;
    min-height: 40px;
    padding-inline: 10px;
    white-space: nowrap;
}

.storefront-flow--cart .buy-opt__qty label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

.storefront-flow--cart .buy-opt .qty {
    flex: none;
}

.storefront-flow--cart .qty button {
    transition-property: background-color, color, transform;
}

.storefront-flow--cart .qty button:active {
    transform: scale(0.96);
}

html[data-theme="dark"] .storefront-flow--cart .buy-opt__perk:not(.is-on) {
    color: color-mix(in srgb, var(--muted) 78%, #000);
}

html[data-theme="dark"] .storefront-flow--cart .buy-opt__footnote {
    color: color-mix(in srgb, var(--muted) 70%, #000);
}

.storefront-flow--cart .cart-summary__delivery-free {
    font-weight: 600;
    color: var(--aqua);
}

html[data-js] .storefront-flow--cart .buy-opt__body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition-property: grid-template-rows;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-js] .storefront-flow--cart .buy-opt--single .buy-opt__body,
html[data-js] .storefront-flow--cart .buy-opt:has(input[name="mode"]:checked) .buy-opt__body {
    grid-template-rows: 1fr;
}

html[data-js] .storefront-flow--cart .buy-opt__body-inner {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-property: opacity, visibility;
    transition-duration: 0.16s, 0s;
    transition-delay: 0s, 0.16s;
    transition-timing-function: ease, linear;
}

html[data-js] .storefront-flow--cart .buy-opt--single .buy-opt__body-inner,
html[data-js] .storefront-flow--cart .buy-opt:has(input[name="mode"]:checked) .buy-opt__body-inner {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0.1s, 0s;
    transition-duration: 0.28s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .storefront-flow--cart .buy-opt::before,
    .storefront-flow--cart .buy-opt__perk,
    .storefront-flow--cart .buy-opt__gift-mark circle,
    .storefront-flow--cart .buy-opt__gift-mark path,
    html[data-js] .storefront-flow--cart .buy-opt__body,
    html[data-js] .storefront-flow--cart .buy-opt__body-inner {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}

.flow-choice,
.storefront-flow .delivery-mode-tabs__item {
    --flow-dot: 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--flow-radius, 32px);
    background: var(--surface-sunk);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: none;
    transition-property: background-color, box-shadow, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease);
}

.flow-choice__radio:focus-visible,
.storefront-flow .delivery-mode-tabs__item input:focus-visible {
    outline: none;
}

.flow-choice:has(input:focus-visible),
.storefront-flow .delivery-mode-tabs__item:has(input:focus-visible) {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 2px;
}

.flow-choice:has(input:checked),
.storefront-flow .delivery-mode-tabs__item:has(input:checked) {
    background: var(--surface);
    box-shadow: var(--flow-lift);
    color: var(--text);
}

.flow-choice:has(input:disabled) {
    opacity: 0.4;
    pointer-events: none;
}

.flow-choice__dot {
    width: var(--flow-dot, 20px);
    height: var(--flow-dot, 20px);
    flex: none;
    position: relative;
    border: 2px solid currentcolor;
    border-radius: 50%;
}

.flow-choice:has(input:checked) .flow-choice__dot::after,
.storefront-flow .delivery-mode-tabs__item:has(input:checked) .flow-choice__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentcolor;
}

.flow-choice__radio,
.storefront-flow .delivery-mode-tabs__item input {
    position: absolute;
    z-index: 2;
    left: 18px;
    top: 50%;
    width: var(--flow-dot, 20px);
    height: var(--flow-dot, 20px);
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(-50%);
    cursor: pointer;
}

.flow-choice__label {
    flex: 1;
}

.storefront-flow .delivery-mode-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.25rem;
}

.storefront-flow .delivery-mode-tabs__item:hover {
    border-color: transparent;
    background: var(--surface-sunk);
}

.storefront-flow .delivery-mode-tabs__item:has(input:checked):hover {
    background: var(--surface);
}

.storefront-flow .delivery-mode-tabs__item {
    border-radius: 16px;
}

/* Причина отказа уходит под имя перевозчика, а не встаёт с ним в строку:
   отступ равен точке выбора плюс её зазор, поэтому она читается как подпись
   к вкладке. */
.storefront-flow .delivery-carrier-tabs__item {
    flex-wrap: nowrap;
}

.storefront-flow .delivery-carrier-tabs__reason {
    flex: 0 1 auto;
    flex-basis: auto;
    width: 100%;
    padding-left: 0;
}

.storefront-flow .delivery-page__header {
    margin: 0;
    padding: 0;
}

.storefront-flow .delivery-page__back {
    padding-inline: var(--flow-pad);
}

.storefront-flow .layout-rail--delivery > .layout-rail__aside {
    top: var(--delivery-rail-top);
    align-self: start;
    z-index: 2;
}

.storefront-flow .layout-rail--delivery > .stack > [data-delivery-target="feedback"]:not(:has(*)) {
    display: none;
}

.storefront-flow .layout-rail--delivery > .stack > [data-delivery-target="feedback"]:not(:has(*)) + * {
    margin-top: 0;
}

.storefront-flow .delivery-panel--selection .btn--primary {
    margin-top: 1.5rem;
}

.storefront-flow .delivery-pickup [data-test="delivery-pickup-open-map"] {
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.storefront-flow .checkout-recipient {
    margin: 2.5rem 0 0;
}

.storefront-flow .delivery-address-choice,
.storefront-flow .delivery-address-new {
    margin-top: 1.15rem;
}

.storefront-flow .layout-rail > .stack > .delivery-quote {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .checkout-recipient__panel {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.storefront-flow .checkout-recipient__panel > h2,
.storefront-flow .delivery-address-choice > legend,
.storefront-flow .delivery-pickup > h2 {
    float: none;
    width: 100%;
    margin: 0 0 1.15rem;
    padding: 0 var(--flow-pad);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-wrap: balance;
}

.storefront-flow .checkout-recipient__panel > .muted,
.storefront-flow .delivery-pickup > .muted {
    max-width: none;
    margin: -0.55rem 0 1.15rem;
    padding-inline: var(--flow-pad);
    text-wrap: pretty;
}

.storefront-flow .delivery-choice-grid {
    --choice-gap: 10px;
    --choice-pad: 10px;
    --choice-radius: 20px;
    --choice-logo: 36px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--choice-gap);
    margin: 0 0 2.35rem;
    padding: 0;
    align-items: stretch;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .delivery-choice-grid:not(:has(> .delivery-mode-tabs:not([hidden]))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-flow .delivery-address-choice,
.storefront-flow .delivery-address-new {
    margin: 1.15rem 0 0;
}

.storefront-flow .delivery-selfpickup,
.storefront-flow .delivery-founder {
    padding: var(--flow-pad);
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.storefront-flow .delivery-selfpickup h2,
.storefront-flow .delivery-founder h2 {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.storefront-flow .delivery-choice-grid__carriers {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--choice-gap);
    order: 1;
    min-width: 0;
}

.storefront-flow .delivery-choice-grid:not(:has(> .delivery-mode-tabs:not([hidden]))) .delivery-choice-grid__carriers {
    grid-column: 1 / -1;
}

/* One offered operator: its card and «Самовывоз» split the row in two
   instead of leaving the two carrier columns empty (owner, 2026-09-10). */
.storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) .delivery-choice-grid__carriers {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
}

.storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) > .delivery-mode-tabs {
    grid-column: 2;
}

.storefront-flow .delivery-choice-grid .delivery-carrier-tabs {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--choice-gap);
    width: 100%;
    height: 100%;
    margin: 0;
}

.storefront-flow .delivery-choice-grid .delivery-carrier-tabs.delivery-carrier-tabs--single {
    grid-template-columns: minmax(0, 1fr);
}

.storefront-flow .delivery-choice-grid > .delivery-mode-tabs {
    display: flex;
    flex-direction: column;
    grid-column: 3;
    order: 2;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    gap: 0;
    align-self: stretch;
}

.storefront-flow .delivery-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 7.5rem;
    margin: 0;
    padding: var(--choice-pad, 10px);
    border: 0;
    border-radius: var(--choice-radius, 20px);
    background: var(--surface);
    box-shadow: var(--flow-ring);
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition-property: background-color, box-shadow, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-choice-grid .delivery-choice {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: var(--choice-pad);
    border-radius: var(--choice-radius);
}

.storefront-flow .delivery-choice--cdek {
    order: 1;
}

.storefront-flow .delivery-choice--yandex {
    order: 2;
}

.storefront-flow .delivery-choice--pvz {
    order: 3;
    flex: 1 1 auto;
}

.storefront-flow .delivery-choice--selfpickup {
    order: 4;
    flex: 1 1 auto;
}

/*
   Когда предлагается ПВЗ, `.delivery-mode-tabs` держит ДВА видимых
   тайла (самовывоз и ПВЗ) — а сама была одной flex-column-колонкой
   ровно на один тайл (единственный случай до набора 21). Второй тайл
   не появлялся в общей строке, а ложился НИЖЕ первого, внутри той же
   узкой колонки — визуально «внутри самовывоза» (владелец, 2026-09-12).
   Фикс: сама `.delivery-mode-tabs` перестаёт быть отдельной коробкой
   (`display: contents`), и её тайлы становятся прямыми элементами той
   же сетки, каждый в своей колонке — как перевозчики уже стоят рядом.
*/
.storefront-flow .delivery-choice-grid:has(.delivery-choice--pvz) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storefront-flow .delivery-choice-grid:has(.delivery-choice--pvz) > .delivery-mode-tabs {
    display: contents;
}

.storefront-flow .delivery-choice-grid:has(.delivery-choice--pvz) .delivery-choice--pvz {
    grid-column: 3;
}

.storefront-flow .delivery-choice-grid:has(.delivery-choice--pvz) .delivery-choice--selfpickup {
    grid-column: 4;
}

/* Один предлагаемый оператор + ПВЗ: перевозчик, ПВЗ и самовывоз делят
   строку на три, не на четыре с пустующим местом. */
.storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) .delivery-choice--pvz {
    grid-column: 2;
}

.storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) .delivery-choice--selfpickup {
    grid-column: 3;
}

.storefront-flow .delivery-choice-grid .delivery-choice__badge--pvz {
    background: transparent;
    box-shadow: none;
    color: var(--aqua-ink, var(--ink));
}

.storefront-flow .delivery-choice-grid .delivery-choice:hover {
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.storefront-flow .delivery-choice:has(input:focus-visible) {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 2px;
}

.storefront-flow .delivery-choice-grid .delivery-choice input,
.storefront-flow .delivery-choice input {
    position: absolute;
    z-index: 2;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    transform: none;
    pointer-events: none;
}

.storefront-flow .delivery-choice-grid .delivery-choice__badge {
    box-sizing: border-box;
    display: inline-flex;
    flex-shrink: 1;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    max-height: none;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.storefront-flow .delivery-choice-grid .delivery-choice__badge img {
    display: block;
    width: auto;
    height: 25px;
    max-width: 100%;
    object-fit: contain;
    outline: 0;
    box-shadow: none;
}

.storefront-flow .delivery-choice-grid .delivery-choice--yandex .delivery-choice__badge img,
.storefront-flow .delivery-choice-grid .delivery-choice--pvz-yandex .delivery-choice__badge img {
    height: 22.5px;
}

.storefront-flow .delivery-choice-grid .delivery-choice--cdek .delivery-choice__badge img,
.storefront-flow .delivery-choice-grid .delivery-choice--pvz-cdek .delivery-choice__badge img {
    height: 20px;
}

html[data-theme="dark"] .storefront-flow .delivery-choice--yandex .delivery-choice__badge img,
html[data-theme="dark"] .storefront-flow .delivery-choice--pvz-yandex .delivery-choice__badge img {
    filter: invert(1) hue-rotate(180deg);
}

.storefront-flow .delivery-choice--cdek .delivery-choice__title,
.storefront-flow .delivery-choice--yandex .delivery-choice__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * iladno-logo.svg is a 1080×1080 square with the wordmark as a centre band.
 * Same 40px row as the carrier chips; crop the band like the header.
 */
.storefront-flow .delivery-choice-grid .delivery-choice__badge--iladno {
    position: relative;
    width: 6.66rem;
    min-width: 6.66rem;
    max-width: 6.66rem;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .delivery-choice-grid .delivery-choice__badge--iladno img,
.storefront-flow .delivery-choice-grid .delivery-choice__logo--iladno {
    position: static;
    width: 6.66rem;
    height: 27px;
    max-width: none;
    object-fit: cover;
    object-position: center;
    outline: none;
    box-shadow: none;
    filter: brightness(0);
}

html[data-theme="dark"] .storefront-flow .delivery-choice__logo--iladno,
html[data-theme="dark"] .storefront-flow .delivery-choice-grid .delivery-choice__badge--iladno img {
    filter: brightness(0) invert(1);
}

.storefront-flow .delivery-choice__title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.storefront-flow .delivery-choice__check {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 3;
    top: var(--choice-pad, 10px);
    right: var(--choice-pad, 10px);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--choice-picked-ink);
    opacity: 0;
    transform: scale(0.25);
    filter: blur(4px);
    pointer-events: none;
    transition-property: opacity, transform, filter;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.storefront-flow .delivery-choice__check::after {
    content: "";
    width: 11px;
    height: 11px;
    margin: 0;
    border: 0;
    background: #fff;
    transform: translate(0.5px, 0.5px);
    -webkit-mask: var(--check-tick) center / contain no-repeat;
    mask: var(--check-tick) center / contain no-repeat;
}

/*
 * Mode and operator are two radio groups. The last chosen carrier stays
 * checked after pickup, so :has(input:checked) on a carrier is not “this
 * tile is the delivery choice”. Paint every tile like an idle plate;
 * show the check only on the one that is actually the current choice.
 */
.storefront-flow .delivery-choice-grid .delivery-choice:has(input:checked),
.storefront-flow .delivery-choice-grid .delivery-mode-tabs__item:has(input:checked) {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--flow-ring);
}

.storefront-flow .delivery-choice-grid .delivery-choice:has(input:checked) .delivery-choice__check {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.storefront-flow .delivery-choice-grid:has(.delivery-choice--selfpickup input:checked) .delivery-choice--carrier .delivery-choice__check,
.storefront-flow .delivery-choice-grid:has(.delivery-choice--pvz input:checked) .delivery-choice--carrier .delivery-choice__check {
    opacity: 0;
    transform: scale(0.25);
    filter: blur(4px);
}

/*
 * Пять карточек в одном ряду: логотип + «Курьер» / «ПВЗ» /
 * самовывоз. Обёртки разжимаем через `display: contents`,
 * чтобы order на самих бейджах собрал ряд.
 */
.storefront-flow .delivery-choice-grid--badges {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    grid-template-columns: none;
}

.storefront-flow .delivery-choice-grid--badges > .delivery-choice-grid__carriers,
.storefront-flow .delivery-choice-grid--badges .delivery-carrier-tabs,
.storefront-flow .delivery-choice-grid--badges > .delivery-mode-tabs,
.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--pvz) > .delivery-mode-tabs,
.storefront-flow .delivery-choice-grid--badges:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) > .delivery-mode-tabs {
    display: contents;
    grid-column: auto;
    grid-template-columns: none;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice {
    flex: 1 1 7.25rem;
    width: auto;
    height: auto;
    min-height: 5.75rem;
    min-width: 7.25rem;
    padding: 1.15rem 0.7rem 0.75rem;
    border-radius: 20px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--yandex {
    order: 1;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz-yandex {
    order: 2;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--cdek {
    order: 3;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz-cdek {
    order: 4;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--founder {
    order: 5;
}

.delivery-address-help--founder {
    display: none;
}

[data-controller~="delivery"]:has(input[value="founder"]:checked) .delivery-address-help--founder {
    display: block;
}

[data-controller~="delivery"]:has(input[value="founder"]:checked) .delivery-address-help--courier {
    display: none;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--founder .delivery-choice__badge {
    font-size: 2rem;
    line-height: 1;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--selfpickup {
    order: 6;
    grid-column: auto;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz:not(.delivery-choice--pvz-operator) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz-operator {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-weight: 600;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice:hover,
.storefront-flow .delivery-choice-grid--badges button.delivery-choice:hover {
    background: #e6e4e0;
    color: var(--text);
    box-shadow: var(--flow-ring);
    transform: none;
}

html[data-theme="dark"] .storefront-flow .delivery-choice-grid--badges .delivery-choice:hover,
html[data-theme="dark"] .storefront-flow .delivery-choice-grid--badges button.delivery-choice:hover {
    background: #2a2f36;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice:active,
.storefront-flow .delivery-choice-grid--badges button.delivery-choice:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz-operator:focus-visible {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 2px;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice__badge {
    display: inline-flex;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice--cdek .delivery-choice__title,
.storefront-flow .delivery-choice-grid--badges .delivery-choice--yandex .delivery-choice__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice__title {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--text-soft);
    text-wrap: balance;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice__check {
    top: 10px;
    right: 10px;
    transform: scale(0.25);
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice:has(input:checked) .delivery-choice__check,
.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--pvz input:checked) .delivery-choice--pvz-operator[aria-pressed="true"] .delivery-choice__check {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--founder input:checked) .delivery-choice--carrier .delivery-choice__check,
.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--founder input:checked) .delivery-choice--pvz-operator .delivery-choice__check,
.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--selfpickup input:checked) .delivery-choice--carrier .delivery-choice__check,
.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--pvz input:checked) .delivery-choice--carrier .delivery-choice__check,
.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--selfpickup input:checked) .delivery-choice--pvz-operator .delivery-choice__check {
    opacity: 0;
    transform: scale(0.25);
    filter: blur(4px);
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice[data-outcome="refused"],
.storefront-flow .delivery-choice-grid--badges .delivery-carrier-tabs__item[data-outcome="refused"] {
    min-height: 5.75rem;
    padding-top: 1.15rem;
    padding-bottom: 0.75rem;
    opacity: 1;
}

.storefront-flow .delivery-choice-grid--badges .delivery-choice .delivery-carrier-tabs__reason {
    position: absolute;
    left: -10000px;
    top: auto;
    flex: none;
    width: max-content;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.storefront-flow .delivery-pickup [data-controller="pickup-point-map"] {
    margin-top: 1rem;
    padding-inline: var(--flow-pad);
}

.storefront-flow .delivery-pickup__selected {
    margin-top: 0.35rem;
    padding-inline: var(--flow-pad);
}

.storefront-flow .delivery-choice:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-carrier-tabs__item[data-outcome="refused"] {
    opacity: 0.72;
}

.storefront-flow .delivery-choice .delivery-carrier-tabs__reason {
    order: 4;
    margin-top: 0.15rem;
    padding: 0 1.7rem;
    min-width: 0;
    max-width: 100%;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-soft);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.storefront-flow .delivery-choice[data-outcome="refused"] {
    justify-content: center;
    min-height: 8.5rem;
    padding-top: 2rem;
    padding-bottom: 0.85rem;
}

.storefront-flow .delivery-saved-list {
    display: grid;
    gap: 10px;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .delivery-saved-list > .account-card {
    position: relative;
    align-items: flex-start;
    padding: var(--flow-pad);
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.storefront-flow .delivery-saved-list > .account-card + .account-card {
    border-top: 0;
}

.storefront-flow .delivery-saved-list > .account-card:hover {
    background: #e6e4e0;
}

html[data-theme="dark"] .storefront-flow .delivery-saved-list > .account-card:hover {
    background: #2a2f36;
}

.storefront-flow .delivery-saved-list > .account-card:has(.delivery-card-editor[open]):hover,
.storefront-flow .delivery-saved-list > .account-card.is-selected,
.storefront-flow .delivery-saved-list > .account-card.is-selected:hover {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--flow-lift);
}

.storefront-flow .delivery-saved-list .account-card__heading {
    margin: 0 0 0.2rem;
}

.storefront-flow .delivery-saved-list .account-card__body {
    padding-right: 2.1rem;
    min-width: 0;
}

.storefront-flow .delivery-saved-meta {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

.storefront-flow .delivery-saved-list > .account-card > .delivery-saved-pick,
.storefront-flow .delivery-saved-list > .account-card > .delivery-saved-pick:hover,
.storefront-flow .delivery-saved-list > .account-card > .delivery-saved-pick:active,
.storefront-flow .delivery-saved-list > .account-card > .delivery-saved-pick:focus,
.storefront-flow .delivery-saved-list > .account-card > .delivery-saved-pick:focus-visible {
    appearance: none;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transform: none;
    cursor: pointer;
    transition-property: none;
}

.storefront-flow .delivery-saved-list > .account-card:has(.delivery-saved-pick:focus-visible) {
    outline: 2px solid var(--aqua-deep);
    outline-offset: 2px;
}

.storefront-flow .delivery-saved-list > .account-card.is-selected::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--flow-pad);
    right: var(--flow-pad);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--choice-picked-ink);
    pointer-events: none;
}

.storefront-flow .delivery-saved-list > .account-card.is-selected::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: var(--flow-pad);
    right: var(--flow-pad);
    width: 22px;
    height: 22px;
    border: 0;
    background: #fff;
    transform: translate(0.5px, 0.5px);
    -webkit-mask: var(--check-tick) center / 11px 11px no-repeat;
    mask: var(--check-tick) center / 11px 11px no-repeat;
    pointer-events: none;
}

/*
 * DEL-04, in the 08.09 card language: the whole card is «Выбрать» (the
 * invisible overlay button above, tick when selected), and «Изменить» is the
 * summary of a `<details>` editor that opens INSIDE the card — the same
 * gesture as the account page. The editor's fields belong to a form outside
 * the checkout forms through `form=`, so nothing here is a nested form.
 *
 * The `<details>` is an ordinary grid item spanning the whole card under the
 * heading row; its summary — the «Изменить»/«Отмена» pill — is taken out of
 * flow and pinned to the card's top-right corner, left of the tick. Not
 * `display: contents`: the UA wraps a details' content in its own
 * `::details-content` block, so the body can never be a grid item of the
 * card — with `contents` the open editor was one column wide and the closed
 * card carried a phantom row (review, 2026-09-10). A closed `<details>`
 * whose only in-flow child is hidden has no height, and the card's row gap
 * is zero, so a closed card measures exactly as it did without the editor;
 * the body brings its own top margin when it opens. The body stands above
 * the overlay (z-index), or every click into a field would pick the card.
 */
.storefront-flow .delivery-saved-list > .delivery-saved-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    row-gap: 0;
    padding-right: calc(var(--flow-pad) + 2.1rem);
}

.storefront-flow .delivery-saved-list > .delivery-saved-card > .account-card__body {
    grid-column: 1;
    grid-row: 1;
    min-height: 40px;
    padding-right: 8.5rem;
}

.storefront-flow .delivery-saved-list .delivery-card-editor {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    border: 0;
    padding: 0;
}

/* The pill itself. `.inline-editor__summary` sets `padding: … 0` and wins
   over `.btn--small`, which left the label touching the ring; the sizing is
   restated here to match «Добавить новый адрес» next to the list. */
.storefront-flow .delivery-saved-list .delivery-card-editor__summary,
.storefront-flow .delivery-saved-list .delivery-card-editor__summary.btn,
.storefront-flow .delivery-saved-list .delivery-card-editor__summary.btn--ghost {
    position: absolute;
    top: var(--flow-pad);
    right: calc(var(--flow-pad) + 2.1rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 40px;
    padding: 0.4rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-sunk);
    box-shadow: none;
    color: var(--text);
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    list-style: none;
    transform: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-saved-list .delivery-card-editor__summary:hover,
.storefront-flow .delivery-saved-list .delivery-card-editor__summary.btn--ghost:hover {
    background: color-mix(in srgb, var(--aqua) 12%, var(--surface-sunk));
    border-color: transparent;
    box-shadow: none;
    color: var(--text);
    transform: none;
}

html[data-theme="dark"] .storefront-flow .delivery-saved-list .delivery-card-editor__summary:hover,
html[data-theme="dark"] .storefront-flow .delivery-saved-list .delivery-card-editor__summary.btn--ghost:hover {
    background: #3e4248;
    color: var(--text);
}

.storefront-flow .delivery-saved-list .delivery-card-editor__summary:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-saved-list .delivery-card-editor__summary::before,
.storefront-flow .delivery-saved-list .delivery-card-editor__summary::-webkit-details-marker {
    content: none;
    display: none;
}

.storefront-flow .delivery-saved-list .delivery-card-editor:not([open]) > .delivery-card-editor__summary > .inline-editor__label-cancel,
.storefront-flow .delivery-saved-list .delivery-card-editor[open] > .delivery-card-editor__summary > .inline-editor__label-add {
    display: none;
}

.storefront-flow .delivery-saved-list .delivery-card-editor > .inline-editor__body {
    position: static;
    z-index: 2;
    min-width: 0;
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0.15rem;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 0.75rem;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div {
    margin: 0;
    min-width: 0;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:not(:has(label, button, textarea, input:not([type="hidden"]))) {
    display: none;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[city]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[comment]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> button[type="submit"]) {
    grid-column: 1 / -1;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[street]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[block]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[entrance]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[intercom]"]) {
    grid-column: 1;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[house]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[apartment]"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[floor]"]) {
    grid-column: 2;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields label {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
.storefront-flow .delivery-saved-list .delivery-card-editor__fields textarea {
    max-width: none;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 16px;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields .help-text {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-wrap: pretty;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> button[type="submit"]) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-column: 1 / -1;
    min-height: 40px;
    margin-top: 0.35rem;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields button[type="submit"] {
    position: static;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0.4rem 1.15rem;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields button[type="submit"]:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.storefront-flow .delivery-saved-list .delivery-card-editor__fields button[type="submit"]:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) {
    position: relative;
    align-items: stretch;
    padding: var(--flow-pad);
}

.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) > .account-card__body,
.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) > .delivery-saved-pick {
    display: none;
}

.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]).is-selected::before,
.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]).is-selected::after {
    content: none;
    display: none;
}

.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) .delivery-card-editor {
    grid-row: 1;
}

.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) .delivery-card-editor > .inline-editor__body {
    position: static;
    margin: 0;
    padding: 0;
    border-top: 0;
}

.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) .delivery-card-editor__summary,
.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) .delivery-card-editor__summary.btn,
.storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) .delivery-card-editor__summary.btn--ghost {
    top: auto;
    right: auto;
    left: var(--flow-pad);
    bottom: var(--flow-pad);
}

/*
 * На телефоне одна колонка. Правила `grid-column: 2` выше специфичнее, чем
 * «все поля в колонку 1», и дорисовывают неявную вторую колонку размером
 * с само поле. Явная `1fr` остаётся от неё крошками (~47px): город, подсказка
 * и «Сохранить адрес» живут в этой крошке и вылезают из карточки.
 * `-1` считает только явные линии сетки, поэтому город (`1 / -1`) в ту
 * вторую колонку не попадает. Здесь те же селекторы, что и у пар полей,
 * и стоят позже — на узком экране каждое поле снова на всю карточку.
 */
@media (max-width: 40rem) {
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[city]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[street]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[house]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[block]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[apartment]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[entrance]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[floor]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[intercom]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> [name$="[comment]"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> button[type="submit"]) {
        grid-column: 1 / -1;
        width: auto;
        max-width: none;
        justify-self: stretch;
    }

    .storefront-flow .delivery-saved-list .delivery-card-editor__fields input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields textarea,
    .storefront-flow .delivery-saved-list .delivery-card-editor__fields .help-text {
        width: 100%;
        max-width: none;
    }

    .storefront-flow .delivery-saved-list .delivery-card-editor__fields > div:has(> button[type="submit"]) {
        justify-content: flex-end;
    }

    .storefront-flow .delivery-saved-list .delivery-card-editor__fields button[type="submit"] {
        width: auto;
        max-width: 100%;
        white-space: nowrap;
    }

    .storefront-flow .delivery-saved-list > .delivery-saved-card:has(.delivery-card-editor[open]) {
        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
    }
}

.storefront-flow .delivery-compose {
    display: block;
    margin-top: 1.25rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition-property: background-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-compose .inline-editor {
    border-top: 0;
    padding-top: 0;
}

.storefront-flow .delivery-compose .inline-editor__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transform: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-compose .inline-editor__summary::before {
    content: none;
}

.storefront-flow .delivery-compose .inline-editor__summary:hover {
    background: color-mix(in srgb, var(--aqua) 12%, var(--surface-sunk));
}

html[data-theme="dark"] .storefront-flow .delivery-compose .inline-editor__summary:hover {
    background: #3e4248;
    color: var(--text);
}

.storefront-flow .delivery-compose .inline-editor__summary:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-compose .inline-editor:not([open]) .inline-editor__label-cancel {
    display: none;
}

.storefront-flow .delivery-compose .inline-editor[open] > .inline-editor__summary .inline-editor__label-add {
    display: none;
}

.storefront-flow .delivery-compose .inline-editor[open] > .inline-editor__summary .inline-editor__label-cancel {
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

.storefront-flow .delivery-compose .inline-editor[open] > .inline-editor__summary {
    position: absolute;
    left: var(--flow-pad);
    bottom: var(--flow-pad);
    z-index: 1;
    margin: 0;
    background: var(--surface-sunk);
    color: var(--text);
}

.storefront-flow .delivery-compose .inline-editor[open] .delivery-submit,
.storefront-flow .delivery-compose .inline-editor[open] button.delivery-submit {
    position: static;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: auto;
    min-height: 40px;
    margin: 1.25rem 0 0 auto;
    padding: 0.4rem 1.15rem;
    background: var(--aqua);
    color: #0d0d0c;
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
}

.storefront-flow .delivery-compose .inline-editor[open] .delivery-submit:hover,
.storefront-flow .delivery-compose .inline-editor[open] button.delivery-submit:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.storefront-flow .delivery-compose .inline-editor[open] .delivery-submit:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-compose .inline-editor[open] .inline-editor__body > :has(> .delivery-submit) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 40px;
    margin-top: 1.25rem;
}

.storefront-flow .delivery-compose .inline-editor[open] .inline-editor__body > :has(> .delivery-submit) .delivery-submit {
    margin: 0;
}

html[data-theme="dark"] .storefront-flow .delivery-compose .inline-editor[open] > .inline-editor__summary {
    background: var(--surface-sunk);
    color: var(--text);
}

.storefront-flow .delivery-compose:has(.inline-editor[open]) {
    position: relative;
    margin-top: 1.5rem;
    padding: var(--flow-pad);
    border-radius: var(--flow-radius);
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.storefront-flow .delivery-compose:has(.inline-editor--address[open])::before {
    content: "Новый адрес";
    display: block;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-wrap: balance;
}

.storefront-flow .checkout-recipient .delivery-compose:has(.inline-editor[open])::before {
    content: "Новый получатель";
    display: block;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-wrap: balance;
}

.storefront-flow .delivery-compose .inline-editor[open] .inline-editor__body {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0 0 0.25rem;
    border-radius: 0;
    background: transparent;
}

.storefront-flow .delivery-compose .inline-editor__body > div:has(> label) {
    display: grid;
    gap: 0.2rem;
}

.storefront-flow .delivery-compose .inline-editor__body label {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
}

.storefront-flow .delivery-compose .inline-editor__body input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]),
.storefront-flow .delivery-compose .inline-editor__body textarea {
    max-width: none;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 16px;
}

.storefront-flow .delivery-compose .inline-editor__body .field-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 0.75rem;
}

.storefront-flow .delivery-compose .inline-editor__body .help-text,
.storefront-flow .delivery-compose .inline-editor__body .delivery-hint,
.storefront-flow .delivery-compose .inline-editor__body > .muted {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 400;
    text-wrap: pretty;
}

.storefront-flow .delivery-compose .inline-editor[open] > .inline-editor__summary {
    position: absolute;
    left: var(--flow-pad);
    bottom: var(--flow-pad);
    z-index: 1;
    margin: 0;
}

@media (max-width: 40rem) {
    .storefront-flow .delivery-compose .inline-editor__body .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.storefront-flow .tariff-card {
    position: relative;
    gap: 0.75rem;
}

.storefront-flow .delivery-panel--tariffs .tariff-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.storefront-flow .delivery-panel--tariffs .tariff-card,
.storefront-flow .delivery-panel--tariffs .tariff-card:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .tariff-card__main {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.storefront-flow .tariff-card:has(.delivery-window) .tariff-card__when {
    display: none;
}

.storefront-flow .tariff-card__when {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

.storefront-flow .layout-rail__aside:has(.delivery-panel--selection:not([hidden])) [data-test="delivery-select-tariff"] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.storefront-flow .delivery-window__legend {
    font-size: 0.82rem;
    font-weight: 500;
}

.storefront-flow .delivery-window__field {
    align-items: center;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 10px;
}

.storefront-flow .delivery-window__input {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    resize: none;
    overflow: hidden;
}

.storefront-flow .delivery-window__input:focus,
.storefront-flow .delivery-window__input:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.storefront-flow .delivery-window__calendar {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-self: flex-start;
    border: 0;
    border-radius: 12px;
    background: var(--surface-sunk);
    color: var(--text);
    box-shadow: none;
    transform: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-window__calendar:hover,
.storefront-flow .delivery-window__calendar:focus-visible {
    background: color-mix(in srgb, var(--text) 8%, var(--surface-sunk));
    color: var(--text);
    transform: none;
    box-shadow: none;
}

html[data-theme="dark"] .storefront-flow .delivery-window__calendar {
    background: var(--aqua);
    color: #0d0d0c;
}

html[data-theme="dark"] .storefront-flow .delivery-window__calendar:hover,
html[data-theme="dark"] .storefront-flow .delivery-window__calendar:focus-visible {
    background: var(--aqua-bright);
    color: #0d0d0c;
}

.storefront-flow .delivery-window__calendar:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-window {
    width: 100%;
}

.storefront-flow.delivery-page .delivery-calendar,
.storefront-flow .delivery-calendar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    inset: auto;
    margin-top: 0.75rem;
    padding: 4px 0 0;
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.storefront-flow .delivery-calendar__head {
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.storefront-flow .delivery-calendar__month {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-transform: capitalize;
}

.storefront-flow.delivery-page .delivery-calendar button.delivery-calendar__nav,
.storefront-flow .delivery-calendar button.delivery-calendar__nav,
.storefront-flow .delivery-calendar__nav {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    background-image: none;
    color: var(--text);
    box-shadow: none;
    font-size: 1.15rem;
    transform: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow.delivery-page .delivery-calendar button.delivery-calendar__nav:hover,
.storefront-flow .delivery-calendar button.delivery-calendar__nav:hover,
.storefront-flow .delivery-calendar__nav:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    background-image: none;
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.storefront-flow .delivery-calendar__nav:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-calendar__weekdays {
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
}

.storefront-flow .delivery-calendar__weekdays,
.storefront-flow .delivery-calendar__grid {
    gap: 4px;
}

.storefront-flow .delivery-calendar__day {
    min-height: 40px;
    border-radius: 8px;
    background: transparent;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-calendar__day:disabled {
    background: transparent;
    color: color-mix(in srgb, var(--text) 46%, var(--surface));
    opacity: 1;
}

html[data-theme="dark"] .storefront-flow .delivery-calendar__day:disabled {
    color: color-mix(in srgb, var(--text) 55%, var(--surface));
}

.storefront-flow .delivery-calendar__day.is-available:not(:disabled) {
    background: color-mix(in srgb, var(--text) 7%, var(--surface));
    color: var(--text);
}

html[data-theme="dark"] .storefront-flow .delivery-calendar__day.is-available:not(:disabled) {
    background: color-mix(in srgb, var(--text) 14%, var(--surface));
}

.storefront-flow .delivery-calendar__day.is-available:hover:not(:disabled) {
    background: color-mix(in srgb, var(--aqua) 28%, var(--surface));
    color: var(--text);
}

html[data-theme="dark"] .storefront-flow .delivery-calendar__day.is-available:hover:not(:disabled) {
    background: color-mix(in srgb, var(--aqua) 36%, var(--surface));
    color: var(--text);
}

.storefront-flow .delivery-calendar__day.is-available:active:not(:disabled) {
    transform: scale(0.96);
}

.storefront-flow .delivery-calendar__day.is-selected,
.storefront-flow .delivery-calendar__day[aria-current="date"] {
    background: var(--aqua);
    color: #0d0d0c;
}

.storefront-flow .delivery-times {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 0;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.storefront-flow .delivery-times__legend {
    font-size: 0.82rem;
    font-weight: 500;
}

.storefront-flow .delivery-times__list {
    display: grid;
    grid-template-columns: 1fr;
}

.storefront-flow .delivery-times__item {
    width: 100%;
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-sunk);
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .delivery-times__item:hover {
    background: color-mix(in srgb, var(--aqua) 16%, var(--surface-sunk));
}

.storefront-flow .delivery-times__item:active {
    transform: scale(0.96);
}

.storefront-flow .delivery-times__item.is-selected {
    border: 0;
    background: var(--aqua);
    color: #0d0d0c;
}

@media (max-width: 40rem) {
    .storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges),
    .storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):not(:has(> .delivery-mode-tabs:not([hidden]))),
    .storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) {
        grid-template-columns: 1fr;
    }

    .storefront-flow .delivery-choice-grid__carriers,
    .storefront-flow .delivery-choice-grid:not(:has(> .delivery-mode-tabs:not([hidden]))) .delivery-choice-grid__carriers,
    .storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) .delivery-choice-grid__carriers,
    .storefront-flow .delivery-choice-grid > .delivery-mode-tabs,
    .storefront-flow .delivery-choice-grid:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single) > .delivery-mode-tabs {
        grid-column: 1;
    }

    .storefront-flow .delivery-choice-grid__carriers,
    .storefront-flow .delivery-choice-grid .delivery-carrier-tabs {
        grid-template-columns: 1fr;
    }

    /*
       ПВЗ-варианты (набор 21) специально ДУБЛИРУЮТ `.storefront-flow`, а не
       просто перечисляются в общем списке выше: их desktop-правила (см.
       `:has(.delivery-choice--pvz)` рядом с `.delivery-choice-grid`) сами
       набраны через несколько `:has()`, и итоговая специфичность у них
       выше, чем у списка правил этого медиа-блока построчно совпадает или
       уступает. Проверено эмпирически в браузере: при равной специфичности
       мобильный список НЕ переигрывал desktop-вариант с ПВЗ, хотя стоит
       позже в файле — а простое дублирование класса (без изменения того,
       что матчится) поднимает специфичность гарантированно выше desktop-
       аналога, без игры на равенстве/порядке источников.
    */
    .storefront-flow.storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(.delivery-choice--pvz),
    .storefront-flow.storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) {
        grid-template-columns: 1fr;
    }

    .storefront-flow.storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(.delivery-choice--pvz) .delivery-choice--selfpickup,
    .storefront-flow.storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(.delivery-choice--pvz) .delivery-choice--pvz,
    .storefront-flow.storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) .delivery-choice--selfpickup,
    .storefront-flow.storefront-flow .delivery-choice-grid:not(.delivery-choice-grid--badges):has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) .delivery-choice--pvz {
        grid-column: 1;
    }

    /*
     * Пять бейджей: 2 колонки. Самовывоз — ячейка той же ширины,
     * левая колонка третьего ряда (не растягивать на всю строку).
     * Стоит после 1-col правил ПВЗ: их специфичность иначе
     * схлопывала ряд в одну колонку.
     */
    .storefront-flow.storefront-flow .delivery-choice-grid--badges,
    .storefront-flow.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--pvz),
    .storefront-flow.storefront-flow .delivery-choice-grid--badges:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .storefront-flow.storefront-flow .delivery-choice-grid--badges .delivery-choice {
        flex: none;
        width: auto;
        min-width: 0;
    }

    .storefront-flow.storefront-flow .delivery-choice-grid--badges .delivery-choice--yandex {
        grid-column: 1;
        grid-row: 1;
    }

    .storefront-flow.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz-yandex {
        grid-column: 2;
        grid-row: 1;
    }

    .storefront-flow.storefront-flow .delivery-choice-grid--badges .delivery-choice--cdek {
        grid-column: 1;
        grid-row: 2;
    }

    .storefront-flow.storefront-flow .delivery-choice-grid--badges .delivery-choice--pvz-cdek {
        grid-column: 2;
        grid-row: 2;
    }

    .storefront-flow.storefront-flow .delivery-choice-grid--badges .delivery-choice--selfpickup,
    .storefront-flow.storefront-flow .delivery-choice-grid--badges:has(.delivery-choice--pvz) .delivery-choice--selfpickup,
    .storefront-flow.storefront-flow .delivery-choice-grid--badges:has(> .delivery-choice-grid__carriers .delivery-carrier-tabs--single):has(.delivery-choice--pvz) .delivery-choice--selfpickup {
        grid-column: 1;
        grid-row: 3;
        width: auto;
    }
}

.storefront-flow .choice-list__item,
.storefront-flow .tariff-card {
    border: 0;
    border-radius: 16px;
    background: var(--surface-sunk);
    box-shadow: none;
    transition-property: background-color, box-shadow, outline-color;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease, var(--ease));
}

.storefront-flow .choice-list__item:hover,
.storefront-flow .tariff-card:hover {
    border-color: transparent;
    background: var(--surface-sunk);
    box-shadow: none;
}

.storefront-flow .choice-list__item:has(input:checked),
.storefront-flow .tariff-card:hover {
    background: var(--surface);
    box-shadow: var(--flow-lift);
}

.storefront-flow .delivery-panel--tariffs .tariff-card,
.storefront-flow .delivery-panel--tariffs .tariff-card:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .delivery-panel--placeholder {
    background: transparent;
    box-shadow: var(--flow-ring);
}

.storefront-flow .delivery-map,
.storefront-flow .delivery-manual-address {
    border: 0;
    border-radius: 20px;
    box-shadow: var(--flow-ring);
    background: var(--surface-sunk);
}

.storefront-flow .tariff-card__action button {
    background: var(--aqua);
    color: #0d0d0c;
    border: 0;
    box-shadow: none;
    font-family: var(--font-text);
    font-weight: 600;
}

.storefront-flow .tariff-card__action button:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
    transform: none;
    box-shadow: none;
}

.storefront-flow .tariff-card__action button:active {
    transform: scale(0.96);
}

.storefront-flow .stepper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    gap: 0;
    margin-top: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-flow .stepper li {
    position: relative;
    min-height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 4px 0;
    text-align: left;
    white-space: nowrap;
}

.storefront-flow .stepper li:not(:last-child) {
    flex: 1 1 0;
    min-width: 0;
}

.storefront-flow .stepper li:last-child {
    flex: 0 0 auto;
}

.storefront-flow .stepper li::before {
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    box-shadow: var(--flow-ring);
    transition-property: background-color, color, box-shadow, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .stepper li:not(:last-child)::after {
    content: "";
    flex: 1 1 1.5rem;
    align-self: center;
    min-width: 1.25rem;
    height: 0;
    margin-inline: 12px;
    pointer-events: none;
    border: 0;
    border-top: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent);
    background: none;
    transition-property: border-color, border-style;
    transition-duration: 180ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .stepper li[data-state="done"]:not(:last-child)::after {
    border-top: 2px solid var(--aqua);
}

.storefront-flow .stepper li[data-state="current"] {
    background: transparent;
    border-radius: 0;
    color: var(--text);
    font-weight: 600;
}

.storefront-flow .stepper li[data-state="current"]::before,
.storefront-flow .stepper li[data-state="done"]::before {
    content: counter(stepper);
    background: var(--aqua);
    color: #0d0d0c;
    box-shadow: none;
}

.storefront-flow .stepper li[data-state="done"] {
    color: var(--text);
}

.storefront-flow .stepper li[data-state="done"] .stepper__link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
}

.storefront-flow .stepper li[data-state="done"] .stepper__link {
    transition-property: color;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow .stepper li[data-state="done"]:active::before {
    transform: scale(0.96);
}

.storefront-flow .field-check {
    padding: 1rem;
    border-radius: 16px;
    background: var(--surface-sunk);
}

.storefront-flow--result {
    width: min(36rem, 100%);
    margin-inline: auto;
}

.storefront-flow--result .storefront-result {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
}

.storefront-flow--result .page-head {
    max-width: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.storefront-flow--result .page-head .eyebrow {
    justify-content: center;
    color: var(--aqua);
}

.storefront-flow--result .page-head .eyebrow::after {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentcolor;
    opacity: 0.6;
}

.storefront-flow--result .page-head h1 {
    margin-inline: auto;
}

.storefront-flow--result .page-head .lede {
    max-width: none;
    margin-inline: auto;
}

.storefront-flow--result .page-head p,
.storefront-flow--result .storefront-result p,
.storefront-flow--result .muted,
.storefront-flow--result .note {
    margin-top: 0;
    text-wrap: pretty;
}

.storefront-flow--result .status {
    border: 0;
}

body:has(.storefront-flow--result) .flash,
body:has(.storefront-flow--result) [data-test="flash-success"],
body:has(.storefront-flow--result) [data-test="flash-error"] {
    border: 0;
    border-radius: var(--flow-inner);
    box-shadow: none;
    text-wrap: pretty;
}

.storefront-flow--result .storefront-result__pay {
    margin: 0;
}

.storefront-flow--result .storefront-result__pay .btn--primary {
    font-variant-numeric: tabular-nums;
}

.storefront-flow--result .storefront-result__bank {
    font-size: 0.82rem;
    line-height: 1.45;
}

.storefront-result__totals {
    padding: 1rem;
    border-radius: 16px;
    background: var(--surface-sunk);
    text-align: start;
}

.storefront-result__totals h2 {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.storefront-flow--result [data-test="reservation-expiry"] {
    font-variant-numeric: tabular-nums;
}

.storefront-flow--result .storefront-result__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.storefront-flow--result .storefront-result__nav .btn {
    min-height: 40px;
}

.storefront-flow--result .storefront-result__nav .btn--primary {
    padding: 0.55rem 1.15rem;
}

.storefront-flow--result .storefront-result__back a {
    color: var(--aqua);
    font-weight: 500;
    text-decoration: none;
    transition-property: color;
    transition-duration: 160ms;
    transition-timing-function: var(--flow-ease);
}

.storefront-flow--result .storefront-result__back a:hover {
    color: var(--aqua-deep);
}

@media (prefers-reduced-motion: no-preference) {
    .storefront-flow--result .storefront-result > * {
        animation: storefront-result-enter 0.45s var(--flow-ease) both;
    }

    .storefront-flow--result .storefront-result > *:nth-child(1) {
        animation-delay: 0ms;
    }

    .storefront-flow--result .storefront-result > *:nth-child(2) {
        animation-delay: 100ms;
    }

    .storefront-flow--result .storefront-result > *:nth-child(3) {
        animation-delay: 200ms;
    }

    .storefront-flow--result .storefront-result > *:nth-child(4) {
        animation-delay: 300ms;
    }

    .storefront-flow--result .storefront-result > *:nth-child(5) {
        animation-delay: 400ms;
    }

    .storefront-flow--result .storefront-result > *:nth-child(6) {
        animation-delay: 500ms;
    }

    .storefront-flow--result .storefront-result > *:nth-child(7) {
        animation-delay: 600ms;
    }
}

@keyframes storefront-result-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (max-width: 40rem) {
    .storefront-flow--result .storefront-result__nav {
        flex-direction: column;
        align-items: stretch;
    }

    .storefront-flow--result .storefront-result__nav .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 60rem) {
    .storefront-flow--cart .layout-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-flow--cart .storefront-flow__goods,
    .storefront-flow--cart .line-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-column: auto;
        width: 100%;
    }

    .storefront-flow--cart .storefront-flow__shot,
    .storefront-flow--cart .storefront-flow__offer,
    .storefront-flow--cart .layout-rail__aside,
    .storefront-flow--cart [data-test="cart-error"] {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }
}

@media (max-width: 40rem) {
    .storefront-flow .line-item {
        grid-template-columns: 4.25rem minmax(0, 1fr);
    }

    .storefront-flow--cart .line-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .storefront-flow--cart .buy-opt__qty {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .storefront-flow__summary {
        position: static;
    }

    .storefront-flow .stepper li {
        gap: 0;
    }

    .storefront-flow .stepper__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .storefront-flow--cart .stepper {
        margin-bottom: 1.25rem;
    }

    .storefront-flow--cart .storefront-flow__cart-title {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 1.25rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .storefront-flow .stepper li:not(:last-child)::after {
        margin-inline: 10px;
        min-width: 12px;
    }
}

/* ---------------------------------------------------------- warm brand chrome */

.site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.site-header.is-scrolled {
    border-bottom-color: var(--line);
}

/* Home's topbar is 16 px of padding around a 37 px row. The same height here,
   so moving between the landing and any other page does not shift the page
   under the reader. */
.site-header__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 4.3rem;
    padding-inline: clamp(1.1rem, 3vw, 2.25rem);
}

/*
 * `iladno-logo.svg` is drawn on a square 1080×1080 canvas with the wordmark as
 * a band across the middle, so it reports a 1:1 intrinsic ratio: `width` with
 * `height: auto` made the brand box 140×140 and that one element — not padding,
 * not the nav — was what stretched the header to 141 px against home's 69.
 * Crop to the band the way the prototype header does.
 */
.site-brand img {
    width: clamp(7.25rem, 10vw, 9.25rem);
    height: clamp(1.75rem, 2.4vw, 2.125rem);
    object-fit: cover;
    object-position: center;
    transform-origin: 8% 54%;
}

html[data-theme="dark"] .site-brand img {
    filter: brightness(0) invert(1);
}

.site-nav--sections {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: clamp(0.1rem, 1vw, 0.75rem);
}

.site-nav--sections a {
    color: var(--text);
    font-size: 0.82rem;
}

.site-nav--actions {
    margin-left: auto;
    gap: 0.25rem;
}

.site-nav .site-nav__icon,
.site-nav button.site-nav__icon {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    display: grid;
    place-items: center;
    gap: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

.site-nav .site-nav__icon:hover,
.site-nav button.site-nav__icon:hover {
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--aqua);
    transform: none;
    box-shadow: none;
}

.site-nav .site-nav__icon:active,
.site-nav button.site-nav__icon:active {
    transform: scale(0.96);
    box-shadow: none;
}

/*
 * Labels live on aria-label already. A CSS chip below the icon is enough:
 * no extra nodes, no native title delay, and the reader is not announced twice.
 */
.site-nav .site-nav__icon::after,
.site-nav button.site-nav__icon::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    z-index: 4;
    padding: 0.32rem 0.55rem;
    border-radius: 8px;
    background: var(--text);
    color: var(--surface);
    font-family: var(--font-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow:
        0 1px 1px rgb(13 13 12 / 6%),
        0 8px 18px rgb(13 13 12 / 14%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition-property: opacity, transform;
    transition-duration: 120ms;
    transition-delay: 0ms;
    transition-timing-function: var(--flow-ease, cubic-bezier(0.2, 0, 0, 1));
}

@media (hover: hover) and (pointer: fine) {
    .site-nav .site-nav__icon:hover::after,
    .site-nav button.site-nav__icon:hover::after {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-duration: 160ms;
        transition-delay: 180ms;
    }

    .site-nav .site-nav__icon:active::after,
    .site-nav button.site-nav__icon:active::after {
        opacity: 0;
        transition-delay: 0ms;
    }
}

.site-nav .site-nav__icon:focus-visible::after,
.site-nav button.site-nav__icon:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav .site-nav__icon::after,
    .site-nav button.site-nav__icon::after {
        transform: translate(-50%, 0);
        transition: none;
    }
}

.site-nav a.site-nav__icon[aria-current="page"],
.site-nav a.site-nav__icon[aria-current="page"]:hover {
    background: #0d0d0c;
    color: #fff;
}

html[data-theme="dark"] .site-nav a.site-nav__icon[aria-current="page"],
html[data-theme="dark"] .site-nav a.site-nav__icon[aria-current="page"]:hover {
    background: #fff;
    color: #0d0d0c;
}

.site-nav__icon svg {
    width: 1.19rem;
    height: 1.19rem;
}

.site-nav__icon .avatar,
.site-nav__icon .site-nav__avatar,
.site-nav__icon .avatar-fallback {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    outline: none;
    box-shadow: none;
}

.site-nav__icon .avatar-fallback {
    transform: translateY(-1px);
}

.site-nav .site-nav__cart {
    margin-right: 0.2rem;
}

.site-nav__icon .site-nav__count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    font-size: 0.62rem;
    background: var(--aqua);
    color: #0d0d0c;
}

.theme-icon {
    grid-area: 1 / 1;
    transition: opacity 0.2s var(--ease), scale 0.2s var(--ease), filter 0.2s var(--ease);
}

.theme-icon--sun,
html[data-theme="dark"] .theme-icon--moon {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
}

html[data-theme="dark"] .theme-icon--sun {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}

/* `.buy` on home: 8/18 px around 13 px type. The same pill, so the two headers
   line up when a customer moves between them. */
.site-nav .site-nav__buy {
    position: relative;
    margin-left: 0.5rem;
    padding: 0.5rem 1.125rem;
    background: var(--aqua);
    color: #0d0d0c;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.2;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.site-nav .site-nav__buy::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 40px;
    transform: translateY(-50%);
}

.site-nav .site-nav__buy:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
}

.site-nav .site-nav__buy:active {
    transform: scale(0.96);
}

@media (max-width: 980px) {
    .site-nav--sections {
        display: none;
    }
}

@media (max-width: 720px) {
    .site-nav--actions {
        display: flex;
    }

    .site-nav--actions .site-nav__buy {
        display: none;
    }

    .site-menu {
        display: block;
        height: 2.5rem;
        overflow: visible;
    }
}

} /* @layer storefront */

/* ----------------------------------------------- Переопределения Leaflet */
/*
 * leaflet.min.css подключается через importmap отдельным <link> и слоёв не
 * знает, а весь storefront.css лежит в @layer storefront. По правилам каскада
 * любое правило вне слоёв бьёт любое правило внутри слоя независимо от
 * специфичности — поэтому всё, что спорит с селекторами Leaflet (`.leaflet-
 * popup-content-wrapper`, `.leaflet-popup-content p { margin: 1.3em 0 }`,
 * `.leaflet-container { background: #ddd }`), обязано жить здесь, вне слоя.
 * Внутри слоя эти же правила молча проигрывали: балун получал поля Leaflet,
 * между строками — по два пустых, а в тёмной теме оставался белым (MAP-F12).
 * Специфичность здесь выше леафлетовской, так что порядок <link> не важен.
 */

.pvz-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
    box-shadow: var(--lift-2, 0 4px 20px rgb(13 13 12 / 15%));
}

.pvz-popup .leaflet-popup-tip {
    background: var(--surface);
    box-shadow: none;
}

.pvz-popup .leaflet-popup-content {
    margin: var(--s3) var(--s4);
    font: 400 0.92rem/1.4 var(--font-text, sans-serif);
    /* Длинный текст или слово без пробелов переносятся, а не расширяют балун (MAP-F3) */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* `.leaflet-popup-content p { margin: 1.3em 0 }` в grid-теле балуна не
   схлопывается — строки разделяет только row-gap тела (MAP-F12) */
.pvz-popup .leaflet-popup-content p {
    margin: 0;
}

.pvz-popup .leaflet-popup-close-button {
    color: var(--muted);
}

/* Класс leaflet-container получает сам элемент .pvz-map — не потомок (MAP-F3) */
html[data-theme="dark"] .pvz-map.leaflet-container {
    background: var(--surface-sunk);
}

html[data-theme="dark"] .pvz-popup .leaflet-popup-content-wrapper,
html[data-theme="dark"] .pvz-popup .leaflet-popup-tip {
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .pvz-map .leaflet-control-attribution {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    color: var(--muted);
}

html[data-theme="dark"] .pvz-map .leaflet-bar a {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

/* Nearby PVZ: the dropdown remains inside the modal's focus boundary. */
.pvz-address-search { position: relative; }
.pvz-address-status { margin: 6px 0; font-size: 0.85rem; }
.pvz-search-hint { line-height: 1.35; }
.pvz-address-options {
    list-style: none; margin: 4px 0 0; padding: 4px;
    max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface);
}
.pvz-address-options li { padding: 8px; cursor: pointer; border-radius: 4px; }
.pvz-address-options li:hover, .pvz-address-options li[aria-selected="true"] { background: var(--surface-2, #f3eee7); color: var(--text, #0d0d0c); }
.pvz-nearby p {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    text-wrap: pretty;
}

.pvz-radius-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.pvz-modal .pvz-radius-options button,
.pvz-modal .pvz-nearby button.btn,
.pvz-modal button.pvz-status__retry {
    font-family: var(--font-text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    min-height: 40px;
    padding: 0.4rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--text);
    box-shadow: none;
    transform: none;
    transition-property: background-color, color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.pvz-modal .pvz-radius-options button[aria-pressed="true"] {
    background: var(--aqua);
    color: #0d0d0c;
    border: 0;
}

.pvz-modal .pvz-radius-options button:hover,
.pvz-modal .pvz-nearby button.btn:hover,
.pvz-modal button.pvz-status__retry:hover {
    background: color-mix(in srgb, var(--aqua) 14%, var(--surface-sunk));
    color: var(--text);
    border: 0;
    transform: none;
    box-shadow: none;
}

.pvz-modal .pvz-radius-options button[aria-pressed="true"]:hover {
    background: var(--aqua-bright);
    color: #0d0d0c;
}

.pvz-modal .pvz-radius-options button:active,
.pvz-modal .pvz-nearby button.btn:active,
.pvz-modal button.pvz-status__retry:active {
    transform: scale(0.96);
}

@media (max-width: 720px) {
    .pvz-modal-backdrop.is-nearby .pvz-modal__body {
        grid-template-rows: minmax(0, 30%) minmax(0, 1fr);
    }
    .pvz-modal-backdrop.is-map-unavailable .pvz-modal__body {
        grid-template-rows: auto minmax(0, 1fr);
    }
    .pvz-modal-backdrop.is-map-unavailable .pvz-modal__map { min-height: 0; }
}
.pvz-modal-backdrop.is-map-unavailable [data-action="click->pickup-point-map#searchMapArea"] { display: none; }

/* Plan 37: search remains above the mobile map, including with the keyboard. */
@media (max-width: 720px) {
    .pvz-map-expand {
        position: absolute;
        z-index: 500;
        left: 50%;
        bottom: 1.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin: 0;
        padding: 0.4rem 1rem;
        border: 0;
        border-radius: 999px;
        background: var(--surface);
        box-shadow:
            0 1px 2px rgb(13 13 12 / 12%),
            0 8px 20px -10px rgb(13 13 12 / 35%);
        color: var(--text);
        font-family: var(--font-text);
        font-size: 0.88rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.2;
        white-space: nowrap;
        transform: translateX(-50%);
        transition-property: transform, background-color, color;
        transition-duration: 160ms;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    .pvz-modal .pvz-modal__body { overflow-y: auto; }
    .pvz-modal { padding-bottom: env(safe-area-inset-bottom); }
    .pvz-modal__head { padding-top: max(var(--s3), env(safe-area-inset-top)); }
    .pvz-modal .pvz-modal__body {
        display: flex;
        flex-direction: column;
    }
    .pvz-modal .pvz-modal__sidebar { display: contents; }
    .pvz-modal .pvz-modal__find { order: 0; flex: none; position: relative; }
    .pvz-modal .pvz-modal__tools { order: 1; flex: none; }
    .pvz-modal .pvz-modal__map {
        order: 2; flex: none; height: clamp(12rem, 38dvh, 20rem); min-height: 12rem;
    }
    .pvz-modal .pvz-list { order: 3; }
    .pvz-modal-backdrop.is-keyboard:not(.is-map-expanded) .pvz-modal__map {
        display: block; height: 12rem;
    }
    .pvz-modal-backdrop.is-map-expanded .pvz-modal__sidebar { display: none; }
    .pvz-modal-backdrop.is-map-expanded .pvz-modal__map { flex: 1 1 auto; height: auto; min-height: 0; }
    .pvz-modal-backdrop.is-map-unavailable .pvz-modal__map { height: auto; min-height: 0; }
}

.delivery-requested-date { display: grid; gap: .5rem; width: 100%; min-width: 0; }
.delivery-requested-date input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); color: var(--text); font: inherit; }
.delivery-requested-date .muted { font-size: .85rem; line-height: 1.45; }