/* ============================================================
   MidiBG · Магазин — a plain scrolling shop in the film's palette.
   Self-contained on purpose: it shares the tokens with cinematic.css
   but none of its paged-scene machinery.
   ============================================================ */

:root {
    --abyss: #050b10;
    --deep: #0a1620;
    --sea: #10222c;
    --foam: #eaf2f0;
    --mist: #8fa6a6;
    --gold: #d9a05b;
    --glass: #74c7b2;
    --font-display: 'Unbounded', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --pad: clamp(1.25rem, 4vw, 4rem);
    --line: rgba(116, 199, 178, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: var(--sea) var(--abyss); scroll-behavior: smooth; }

body {
    background: var(--abyss);
    color: var(--foam);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.05vw + .6rem, 1.15rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--abyss); }

a { color: inherit; }

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

.mono {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- header ---------- */
.head {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem var(--pad);
    background: rgba(5, 11, 16, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.head__brand {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.15rem; letter-spacing: .02em; text-decoration: none;
}
.head__brand span { color: var(--glass); }
.head__nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.head__link, .head__cart {
    color: var(--mist); text-decoration: none;
    transition: color .3s ease;
}
.head__link:hover, .head__cart:hover { color: var(--gold); }
.head__cart { display: inline-flex; align-items: center; gap: .6rem; }
.head__badge {
    display: inline-grid; place-items: center;
    min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem;
    border-radius: 999px; background: var(--gold); color: var(--abyss);
    font-size: .68rem; letter-spacing: 0;
}

/* ---------- shell ---------- */
.wrap {
    max-width: 68rem; margin: 0 auto;
    padding: clamp(2.5rem, 7vh, 5rem) var(--pad) clamp(4rem, 10vh, 7rem);
}

/* ---------- the three steps, side by side ----------
   Catalogue, checkout and confirmation sit in one row and the row is moved
   sideways. Without JS the track never moves: each panel keeps its own URL
   and the browser simply loads the one that was asked for, which is why the
   inactive panels are hidden rather than merely off to one side. */
.slider { overflow: hidden; }
.slider__track {
    display: flex;
    align-items: flex-start;
    width: 300%;
    transition: transform .6s cubic-bezier(.65, 0, .25, 1);
}
.panel { width: 33.3333%; flex: 0 0 33.3333%; }
.slider[data-active="checkout"] .slider__track { transform: translateX(-33.3333%); }
.slider[data-active="thanks"]   .slider__track { transform: translateX(-66.6666%); }

/* Off-screen panels must not be tabbable, and must not stretch the page. */
.panel[aria-hidden="true"] { visibility: hidden; }
body:not(.has-js) .panel[aria-hidden="true"] { display: none; }

/* The track is as tall as its tallest panel, which leaves a long empty gap
   under a short one; JS pins it to the active panel instead. */
body.has-js .slider { transition: height .5s cubic-bezier(.65, 0, .25, 1); }

/* The way back out of a step. Sits above the heading, where people look
   for it, and is a real target rather than a line of small print. */
.panel__back {
    display: inline-flex; align-items: center; gap: .7rem;
    margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
    padding: .7rem 1.2rem .7rem 1rem;
    font-size: .62rem; color: var(--mist); text-decoration: none;
    border: 1px solid rgba(143, 166, 166, .3);
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.panel__back:hover, .panel__back:focus-visible {
    color: var(--abyss); background: var(--mist); border-color: var(--mist);
}
.panel__back:focus-visible { outline: 2px solid var(--glass); outline-offset: 3px; }
.panel__back-arrow { font-size: .9rem; line-height: 1; transition: transform .3s ease; }
.panel__back:hover .panel__back-arrow { transform: translateX(-3px); }

.intro { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.intro__kicker { color: var(--gold); margin-bottom: 1rem; }
.intro h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.05;
    text-transform: uppercase; letter-spacing: .01em;
    margin-bottom: 1rem;
}
.intro__lead { color: var(--mist); max-width: 40rem; }

/* With JS the quantity field submits itself, so the button is redundant. */
body.has-js [data-cart-submit] { display: none; }

/* ---------- cart motion ----------
   The cart is replaced wholesale on each update, so the JS marks what
   actually changed and these animations respond to that. Everything here
   is decorative: the reduced-motion block at the bottom switches it all off. */

[data-cart], [data-summary] { transition: opacity .2s ease; }
[data-cart][aria-busy="true"],
[data-summary][aria-busy="true"] { opacity: .6; pointer-events: none; }

/* a line arriving */
@keyframes line-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}
.line.is-entering { animation: line-in .45s cubic-bezier(.2, .6, .2, 1) both; }

/* a line leaving: collapses its own height, so the rest slides up with it */
.line.is-leaving {
    overflow: hidden;
    opacity: 0;
    transform: translateX(28px);
    height: 0 !important;
    padding-top: 0; padding-bottom: 0;
    border-bottom-color: transparent;
    transition: height .34s cubic-bezier(.4, 0, .2, 1),
                opacity .24s ease,
                transform .34s cubic-bezier(.4, 0, .2, 1),
                padding .34s cubic-bezier(.4, 0, .2, 1);
}

/* A figure that just changed: it settles into place rather than jumping.
   Deliberately restrained — the counting total is the one thing meant to
   draw the eye, and competing bumps around it read as noise. */
@keyframes settle {
    0%   { opacity: .45; transform: translateY(-2px); }
    100% { opacity: 1; transform: none; }
}
.is-settling {
    display: inline-block;
    animation: settle .28s cubic-bezier(.2, .6, .2, 1);
}

/* the header badge */
@keyframes badge-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.head__badge.is-bumped { animation: badge-pop .45s cubic-bezier(.2, .7, .3, 1); }

/* the cart appearing for the first time, and the checkout button with it */
@keyframes cart-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
/* applies to whichever panel is showing the basket */
.is-filling .cart__lines,
.is-filling [data-total],
.is-filling .btn--wide { animation: cart-in .5s cubic-bezier(.2, .6, .2, 1) both; }
.is-filling [data-total] { animation-delay: .06s; }
.is-filling .btn--wide { animation-delay: .12s; }

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.flash { animation: flash-in .4s cubic-bezier(.2, .6, .2, 1); }
.flash[hidden] { display: none; }
.flash {
    margin-bottom: 2rem; padding: .9rem 1.2rem;
    border: 1px solid rgba(116, 199, 178, .35);
    background: rgba(116, 199, 178, .08);
    color: var(--glass); letter-spacing: .12em;
}
.flash--bad {
    border-color: rgba(224, 138, 124, .45);
    background: rgba(224, 138, 124, .08);
    color: #e08a7c;
}

/* ---------- products ---------- */
.products {
    display: grid;
    /* capped at 26rem so two or three products don't stretch into slabs */
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 26rem));
    gap: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: clamp(3rem, 8vh, 5rem);
}

/* a single product reads better as one wide card: photo beside the details */
.products--single { grid-template-columns: 1fr; }
.products--single .product { display: grid; grid-template-columns: 1fr 1fr; }
/* a definite height: with height:100% the img falls back to its natural
   size and the card grows absurdly tall */
.products--single .product__media { aspect-ratio: auto; height: clamp(20rem, 32vw, 27rem); }
.products--single .product__body { padding: clamp(1.6rem, 3vw, 2.6rem); }
@media (max-width: 720px) {
    .products--single .product { grid-template-columns: 1fr; }
    .products--single .product__media { aspect-ratio: 4 / 3; height: auto; }
}
.product {
    display: flex; flex-direction: column;
    background: var(--deep);
    border: 1px solid var(--line);
    transition: border-color .4s ease, transform .4s cubic-bezier(.2, .6, .2, 1);
}
.product:hover { border-color: rgba(217, 160, 91, .45); transform: translateY(-4px); }
.product__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sea); }
.product__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.9) brightness(.92);
    transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}
.product:hover .product__media img { transform: scale(1.06); }
.product__placeholder {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(140deg, var(--sea), var(--deep));
}
.product__body {
    display: flex; flex-direction: column; flex: 1;
    padding: clamp(1.3rem, 2.5vw, 1.8rem);
}
.product__body h2 {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.2rem; text-transform: uppercase; letter-spacing: .01em;
    margin-bottom: .7rem;
}
.product__desc { color: var(--mist); font-size: .92rem; margin-bottom: 1.2rem; }
.product__price {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    margin-top: auto; padding-top: 1.1rem;
    border-top: 1px solid rgba(143, 166, 166, .2);
}
.product__price strong {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.product__price .mono { color: var(--mist); font-size: .62rem; }
.product__min { color: var(--glass); font-size: .58rem; margin-top: .7rem; }

.product__form { margin-top: 1.2rem; }
.product__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .9rem; }

/* ---------- quick-pick quantities ---------- */
.presets { border: 0; padding: 0; margin: 0; }
.presets__legend { color: var(--mist); font-size: .6rem; padding: 0; margin-bottom: .7rem; }
.preset { display: inline-block; margin: 0 .5rem .5rem 0; }
/* the radio itself is hidden but still focusable, so keyboard and screen
   readers get real radio-group behaviour */
.preset input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.preset__chip {
    display: inline-block; cursor: pointer;
    font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mist);
    padding: .6rem 1rem;
    background: rgba(5, 11, 16, .6);
    border: 1px solid rgba(143, 166, 166, .28);
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.preset__chip:hover { color: var(--foam); border-color: rgba(234, 242, 240, .45); }
.preset input:checked + .preset__chip {
    color: var(--abyss); background: var(--gold); border-color: var(--gold);
}
.preset input:focus-visible + .preset__chip { outline: 2px solid var(--glass); outline-offset: 3px; }

/* ---------- stepper (cart fine-tuning) ---------- */
.stepper { display: inline-flex; align-items: stretch; }
.stepper__btn {
    width: 2.2rem; flex: 0 0 auto;
    font-family: var(--font-body); font-size: 1.1rem; line-height: 1;
    color: var(--mist); cursor: pointer;
    background: rgba(5, 11, 16, .7);
    border: 1px solid var(--line);
    transition: color .25s ease, border-color .25s ease;
}
.stepper__btn:hover { color: var(--gold); border-color: rgba(217, 160, 91, .5); }
.stepper__btn:focus-visible { outline: 2px solid var(--glass); outline-offset: 2px; }
.stepper__input { width: 3.6rem; text-align: center; border-left: 0; border-right: 0; }

/* ---------- quantity ---------- */
.qty { display: flex; align-items: center; gap: .8rem; }
.qty__label { color: var(--mist); font-size: .6rem; }
.qty__input {
    width: 5rem; padding: .6rem .7rem;
    font-family: var(--font-body); font-size: 1rem; /* 16px keeps iOS from zooming */
    color: var(--foam); background: rgba(5, 11, 16, .7);
    border: 1px solid var(--line); border-radius: 0;
    -webkit-appearance: none; appearance: none;
    transition: border-color .3s ease;
}
.qty__input:focus { outline: none; border-color: var(--gold); }

/* ---------- buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .24em; text-transform: uppercase; text-align: center;
    text-decoration: none; color: var(--foam);
    padding: .85rem 1.5rem;
    background: transparent; border: 1px solid rgba(143, 166, 166, .35);
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover, .btn:focus-visible { border-color: var(--foam); }
.btn:focus-visible { outline: 2px solid var(--glass); outline-offset: 3px; }
.btn--gold { color: var(--gold); border-color: rgba(217, 160, 91, .55); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold); color: var(--abyss); border-color: var(--gold); }
.btn--wide { width: 100%; padding: 1.05rem 1.5rem; }
.btn--small { padding: .55rem .9rem; font-size: .6rem; letter-spacing: .18em; }
.btn--bare {
    border: 0; padding: .4rem .6rem; font-size: 1.1rem;
    letter-spacing: 0; color: var(--mist); line-height: 1;
}
.btn--bare:hover { color: #e08a7c; }

/* ---------- cart ---------- */
.cart {
    padding: clamp(1.6rem, 4vw, 2.4rem);
    background: var(--deep); border: 1px solid var(--line);
    scroll-margin-top: 6rem;
}
.cart__title {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.3rem; text-transform: uppercase; margin-bottom: 1.4rem;
}
.cart__empty { color: var(--mist); }
.cart__lines { list-style: none; }
.line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas: 'name form sum remove' 'unit form sum remove';
    align-items: center; gap: .2rem 1rem;
    padding: 1rem 0; border-bottom: 1px solid rgba(143, 166, 166, .15);
}
/* the last row needs no separator: the total below draws its own, and the
   two together read as a double line */
.cart__lines .line:last-child { border-bottom: 0; }
.line__name { grid-area: name; font-weight: 400; }
.line__unit { grid-area: unit; color: var(--mist); font-size: .58rem; }
.line__form { grid-area: form; display: flex; align-items: center; gap: .5rem; }
.line__sum { grid-area: sum; color: var(--gold); white-space: nowrap; }
.line__remove { grid-area: remove; }
/* shared divider above the total, in both the cart and the checkout */
[data-total] {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid rgba(143, 166, 166, .2);
}
.cart__total {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.4rem;
}
.cart__total .mono { color: var(--mist); }
.cart__total strong {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.6rem; color: var(--gold);
}

/* ---------- checkout summary ---------- */
.summary {
    padding: clamp(1.4rem, 3vw, 2rem);
    background: var(--deep); border: 1px solid var(--line);
    margin-bottom: clamp(2rem, 5vh, 3rem);
}
/* The summary reuses the cart's rows, so quantities can be changed here
   too; only the first row's top rule is redundant inside the panel. */
.summary .cart__lines .line:first-child { padding-top: 0; }
.summary__total {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
}
.summary__total strong {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.4rem; color: var(--gold);
}
/* ---------- order form ---------- */
.order { display: grid; gap: 1.3rem; max-width: 34rem; }
.field { display: block; }
.field__label { display: block; color: var(--mist); font-size: .62rem; margin-bottom: .5rem; }
.field__opt { letter-spacing: .1em; opacity: .7; }
.field__control {
    display: block; width: 100%;
    font-family: var(--font-body); font-weight: 400;
    font-size: 1rem;              /* below 16px iOS Safari zooms the viewport on focus */
    line-height: 1.4; color: var(--foam);
    background: rgba(10, 22, 32, .8);
    border: 1px solid rgba(116, 199, 178, .22);
    border-radius: 0; padding: .85rem 1rem;
    -webkit-appearance: none; appearance: none;
    transition: border-color .3s ease, background .3s ease;
}
.field__control::placeholder { color: rgba(143, 166, 166, .55); }
.field__control:hover { border-color: rgba(116, 199, 178, .4); }
.field__control:focus { outline: none; border-color: var(--gold); background: rgba(10, 22, 32, .95); }
.field__control.is-bad { border-color: #d96b5b; }
.field__hint { display: block; margin-top: .45rem; color: #e08a7c; font-size: .58rem; letter-spacing: .1em; }

/* Chrome and Safari otherwise paint a near-white field over the dark theme */
.field__control:-webkit-autofill,
.field__control:-webkit-autofill:hover,
.field__control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--foam);
    -webkit-box-shadow: inset 0 0 0 1000px rgba(10, 22, 32, .95);
    caret-color: var(--foam);
    transition: background-color 9999s ease-in-out 0s;
}

.field__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.order__fine { color: var(--mist); font-size: .56rem; letter-spacing: .12em; line-height: 1.9; opacity: .85; }

/* ---------- thanks ---------- */
.thanks { text-align: center; padding: clamp(2rem, 8vh, 5rem) 0; }
.thanks h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.8rem, 5.5vw, 3.2rem); text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.thanks__lead { color: var(--mist); max-width: 32rem; margin: 0 auto 2rem; }
.thanks__ref { color: var(--mist); font-size: .62rem; margin-bottom: 2rem; }
.thanks__ref strong { color: var(--gold); font-size: .9rem; }
.thanks__call {
    display: inline-block; color: var(--gold); text-decoration: none;
    font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .24em; text-transform: uppercase;
    padding: .9rem 1.6rem; border: 1px solid rgba(217, 160, 91, .55);
    transition: background .3s ease, color .3s ease;
}
.thanks__call:hover { background: var(--gold); color: var(--abyss); }
.thanks__back {
    display: block; margin-top: 2.5rem;
    color: var(--mist); text-decoration: none; font-size: .6rem;
}
.thanks__back:hover { color: var(--gold); }

/* ---------- footer ---------- */
.foot {
    text-align: center;
    padding: clamp(2.5rem, 7vh, 4rem) var(--pad) clamp(2rem, 5vh, 3rem);
    border-top: 1px solid var(--line);
    background: radial-gradient(90% 60% at 50% 120%, rgba(116, 199, 178, .07), transparent 70%), var(--abyss);
}
.foot__phone {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.3rem, 4vw, 2.2rem);
    text-decoration: none; color: var(--foam);
    transition: color .35s ease;
}
.foot__phone:hover { color: var(--gold); }
.foot__mail { color: var(--mist); font-size: .9rem; margin-top: .6rem; }
.foot__mail a { color: var(--glass); }
.foot__end { color: var(--mist); font-size: .58rem; line-height: 1.9; margin-top: 2rem; }
.foot__by { display: block; opacity: .85; letter-spacing: .26em; color: inherit; text-decoration: none; }
.foot__by:hover { opacity: 1; }
.foot__ganvo { color: var(--gold); }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    .line {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'name remove' 'unit remove' 'form sum';
        gap: .35rem .8rem;
    }
    .line__sum { justify-self: end; }
    .product__actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}