/* KOKOS — сайт по логобуку Appazov, направление «Плакат»: скруглённые плакаты на бледно-синем поле,
   зернистые красный и синий градиенты, белый медиатор, спрей-стикеры. Каталог и корзина — на светлом. */

@font-face { font-family: 'Golos Text'; src: url('/fonts/GolosText-VF.woff2') format('woff2-variations'); font-weight: 400 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: var(--w-text) var(--t-body)/1.6 var(--font);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
[id] { scroll-margin-top: 88px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red-ink); color: #fff; padding: 12px 20px; font-weight: 600; }
.skip:focus { left: 0; }

/* ── типографика ── */
.kicker { font-weight: var(--w-title); font-size: var(--t-meta); letter-spacing: .02em; color: var(--red-ink); margin: 0 0 14px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: var(--w-title); }
h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; }
h1 em { font-style: normal; color: var(--red); }
h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -.01em; }
p { margin: 0; }
.lead { font-size: var(--t-lead); color: var(--dim); max-width: 54ch; margin-top: 20px; text-wrap: pretty; }
.note { color: var(--dim); font-size: var(--t-meta); margin-top: 14px; max-width: 64ch; text-wrap: pretty; }

/* ── плакат: главная единица композиции ── */
.poster { position: relative; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 64px); overflow: hidden; background: var(--white); }
.poster--navy { background: var(--navy); color: var(--white); --dim: var(--sky); }
.band { padding-block: var(--tile); }

/* ── зерно (CSS + SVG-шум) ── */
.grain { position: relative; isolation: isolate; color: var(--white); --dim: var(--sky); }
.grain .kicker { color: var(--white); }
.grain::before, .grain::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.grain--blue::before {
  background:
    radial-gradient(70% 90% at 12% 18%, var(--blue) 0%, transparent 62%),
    radial-gradient(55% 70% at 88% 92%, var(--royal) 0%, transparent 70%),
    linear-gradient(118deg, var(--blue) 0%, #05061a 40%, var(--royal) 64%, #020310 100%);
}
.grain--red::before {
  background:
    radial-gradient(75% 85% at 18% 22%, var(--red) 0%, transparent 64%),
    radial-gradient(60% 70% at 86% 86%, var(--red) 0%, transparent 72%),
    linear-gradient(122deg, var(--red) 0%, #1c0303 46%, var(--red) 74%, #0a0101 100%);
}
.grain::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: .55;
}

/* ── медиатор: контур знака из логотипа ── */
.med { display: inline-block; aspect-ratio: var(--med-ratio); background: currentColor; flex: none;
  -webkit-mask: url('/images/brand/mediator.svg') center / 100% 100% no-repeat; mask: url('/images/brand/mediator.svg') center / 100% 100% no-repeat; }
.med--dot { width: .72em; color: var(--red); margin-right: .45em; }
.med--num { width: 32px; color: var(--red); }
.medslot { position: relative; aspect-ratio: var(--med-ratio); background: var(--white);
  -webkit-mask: url('/images/brand/mediator.svg') center / 100% 100% no-repeat; mask: url('/images/brand/mediator.svg') center / 100% 100% no-repeat; }
.medslot img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* ── стикер: готовые картинки из стикерпака, 1–2 на экран, не на ценах и кнопках ── */
.sticker { position: absolute; z-index: 3; height: auto; pointer-events: none; transform: rotate(var(--rot, -8deg));
  filter: drop-shadow(0 6px 14px rgb(10 12 30 / .18)); }

/* ── кнопки (тач ≥ 44px) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px;
  font-weight: 500; font-size: 16px; line-height: 1.2; border: 2px solid transparent; border-radius: var(--r-pill); text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--red { background: var(--red-ink); color: #fff; }
.btn--red:hover { background: var(--red-ink-hover); }
.btn--ghost, .btn--wa { border-color: currentColor; }
.btn--ghost:hover, .btn--wa:hover { background: var(--fg); color: var(--bg-alt); border-color: var(--fg); }
.grain .btn--ghost:hover, .poster--navy .btn--ghost:hover, .cart .btn--ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--mist); }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.btn--qty { min-width: 44px; min-height: 44px; padding: 6px 12px; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ── шапка ── */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--white); color: var(--navy); border-bottom: 1px solid var(--border); }
.hdr__in { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 450; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--red); }
.hdr__tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: 15px; white-space: nowrap; }
.cart-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1.5px solid var(--border); }
.cart-btn:hover { border-color: var(--navy); }
.cart-btn__n { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red-ink); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.burger { display: none; width: 44px; height: 44px; }
@media (max-width: 980px) {
  .nav { display: none; } .hdr__tel { display: none; }
  .nav[data-open="true"] { display: flex; flex-direction: column; gap: 0; position: absolute; inset: 100% 0 auto 0; background: var(--white); padding: 8px var(--pad) 20px; border-bottom: 1px solid var(--border); }
  .nav[data-open="true"] a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .cart-btn { margin-left: auto; }
  .burger { display: grid; place-items: center; }
}

/* ── первый экран: три плаката ── */
.hero { padding-block: clamp(20px, 3vw, 40px) var(--tile); }
.hero__in { display: grid; gap: var(--tile); }
@media (min-width: 980px) {
  .hero__in { grid-template-columns: 7fr 5fr; grid-template-areas: "text media" "aside media"; }
  .hero__text { grid-area: text; } .hero__media { grid-area: media; } .hero__aside { grid-area: aside; }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__media { display: grid; place-items: center; min-height: clamp(380px, 46vw, 640px); }
.hero__media .medslot { width: 88%; }
.hero__media .sticker { right: 5%; top: 5%; width: clamp(130px, 13vw, 190px); --rot: 10deg; }
.hero__aside { display: flex; align-items: center; }
.stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 56px); }
.stats b { display: block; font-weight: var(--w-title); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
.stats span { font-size: var(--t-meta); color: var(--dim); }

/* ── подбор ── */
.about__hd { position: relative; max-width: 900px; }
.about__hd h2 { max-width: 11ch; }
.about__hd .sticker { right: clamp(-260px, -18vw, -120px); top: 0; width: clamp(150px, 16vw, 230px); --rot: 9deg; }
@media (max-width: 1180px) { .about__hd .sticker { position: relative; right: auto; display: block; margin-top: 24px; } }
.steps { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-md); background: var(--mist); }
.steps__n { font-weight: 500; font-size: 14px; color: var(--dim); }
.steps p { color: var(--dim); }

/* коды краски */
.codes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .codes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .codes { grid-template-columns: repeat(8, 1fr); } }
.codes li { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--mist); }
.codes b { font-weight: 500; font-size: 22px; letter-spacing: .02em; }
.codes span { font-size: 14px; color: var(--dim); }

/* услуги */
.services { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 860px) { .services { grid-template-columns: repeat(3, 1fr); } }
.services li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-md); background: var(--mist); }
.services__n { font-weight: 500; font-size: 14px; color: var(--dim); }
.services p { color: var(--dim); }

/* ── каталог ── */
.catalog { padding-block: clamp(36px, 5vw, 72px); }
.catalog__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 28px; }
.catalog__head .note { margin: 0; }
.catalog__in { display: grid; gap: 24px; }
.catalog__in > * { min-width: 0; }
@media (min-width: 980px) { .catalog__in { grid-template-columns: 280px 1fr; align-items: start; } .side { position: sticky; top: 92px; } }
.side { display: grid; gap: 14px; }
.side__q { min-height: 50px; padding: 0 18px; border: 1.5px solid var(--border); border-radius: var(--r-pill); background: var(--white); }
.side__q:focus { border-color: var(--navy); outline: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--white); font-size: 15px; font-weight: 450; }
.filters button span { font-size: 13px; color: var(--dim); font-weight: 500; }
.filters button:hover { border-color: var(--navy); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filters button[aria-pressed="true"] span { color: var(--sky); }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 450; cursor: pointer; }
.toggle input { width: 22px; height: 22px; accent-color: var(--navy); }
.side__reset { justify-self: start; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.catalog__count { margin: 0 0 14px; font-weight: 450; color: var(--dim); }

.grid-products { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 560px) { .grid-products { grid-template-columns: 1fr 1fr; gap: 10px; } .p-card__buy { flex-direction: column; align-items: stretch; } .p-card__price { align-self: flex-start; } }
.p-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; border-radius: 20px; background: var(--white); }
.p-card__shot { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--mist); display: grid; place-items: center; overflow: hidden; margin-bottom: 6px; cursor: pointer; }
.p-card__shot img { width: 100%; height: 100%; object-fit: contain; padding: 10px; background: var(--white); }
.p-card__shot:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.p-card__stock { display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--ok); }
.p-card__stock .med { color: var(--ok); }
.p-card__stock--out { color: var(--warn); } .p-card__stock--out .med { color: var(--warn); }
.p-card__name { font-size: 16px; font-weight: 500; line-height: 1.3; }
.p-card__name a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.p-card__sku { font-size: 14px; color: var(--dim); }
.p-card__b { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.p-card__price { padding: 6px 12px; border-radius: var(--r-pill); background: var(--royal); color: var(--white); font-weight: var(--w-title); font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-card__price--ask { background: var(--mist); color: var(--navy); }
.p-card .btn { white-space: nowrap; min-height: 44px; padding: 8px 14px; font-size: 15px; border-color: var(--border); background: var(--white); color: var(--navy); }
.p-card .btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.grid-more { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 8px; }

.nophoto { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; min-height: 110px; color: var(--dim); font-size: 13px; }
.nophoto .med { width: 34%; max-width: 90px; color: var(--sky); }

.state { padding: 32px; border-radius: var(--r-md); background: var(--white); text-align: center; grid-column: 1 / -1; }
.state h3 { margin-bottom: 8px; }
.state p { color: var(--dim); margin: 0 auto; max-width: 46ch; }
.state__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.state__code { font: 500 13px/1 var(--mono); color: var(--dim); margin-top: 16px; }

/* ── галерея и бренды ── */
.gallery { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.brands__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .brands__list { grid-template-columns: repeat(5, 1fr); } }
.brands__list li { display: grid; place-items: center; min-height: 84px; border-radius: var(--r-md); background: rgb(255 255 255 / .1); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }

/* ── контакты ── */
.contacts__in { display: grid; gap: 36px; }
@media (min-width: 980px) { .contacts__in { grid-template-columns: 1fr 1fr; align-items: start; } }
.contacts__hd { position: relative; }
.contacts__hd .sticker { position: relative; display: block; margin-top: 30px; width: clamp(180px, 20vw, 280px); --rot: -7deg; }
.stores { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stores > li { position: relative; padding: 22px 22px 22px 74px; border-radius: var(--r-md); background: rgb(255 255 255 / .1); }
.stores .med--num { position: absolute; left: 22px; top: 24px; color: var(--white); }
.stores address { font-style: normal; margin-top: 4px; }
.stores p { color: var(--white); opacity: .92; margin-top: 4px; }
.stores__social { padding-left: 22px !important; }
.social { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.social a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; }
.social a span { opacity: .85; font-weight: 400; }
.social a:hover { text-decoration: underline; text-underline-offset: 4px; }
.map { margin-top: clamp(28px, 4vw, 44px); border-radius: var(--r-md); overflow: hidden; background: var(--white); color: var(--navy); }
.map iframe { display: block; width: 100%; height: clamp(280px, 38vw, 420px); border: 0; }
.map__links { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }

/* ── подвал ── */
.ft { background: var(--navy); color: var(--white); padding-block: 48px; margin-top: var(--tile); }
.ft img { height: 30px; width: auto; margin-bottom: 18px; }
.ft p { margin: 0 0 6px; }
.ft__meta { color: var(--sky); font-size: 15px; }
.ft a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ── плавающий WhatsApp ── */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.fab:hover { background: var(--wa-hover); }
@media (max-width: 900px) { .fab { right: 12px; bottom: 12px; } }

/* ── корзина: панель справа, тёмно-синяя ── */
.cart-scrim, .pv-scrim { position: fixed; inset: 0; z-index: 90; background: rgb(10 12 30 / .55); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.cart-scrim[data-open="true"], .pv-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--navy); color: var(--white); --dim: var(--sky); --border: rgb(163 181 203 / .28); --fg: var(--white); --bg-alt: var(--navy);
  transform: translateX(104%); transition: transform .32s var(--ease); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.cart[data-open="true"] { transform: none; }
.cart__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.cart__hd h3 { font-size: 24px; }
.cart__hd .btn { min-height: 44px; padding: 8px 16px; color: var(--white); }
.cart__body { flex: 1; overflow: auto; padding: 8px 24px; }
.cart__ft { padding: 18px 24px 24px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.cart__total #cart-total { font-weight: var(--w-title); font-size: 26px; font-variant-numeric: tabular-nums; }
.cart__empty { text-align: center; padding: 48px 12px; }
.cart__empty p { color: var(--sky); margin-top: 8px; }
.cart__empty .btn { color: var(--white); }
.cart__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); align-items: start; }
.cart__shot { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--white); overflow: hidden; }
.cart__shot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart__shot .nophoto { min-height: 0; font-size: 0; gap: 0; }
.cart__shot .nophoto .med { width: 46%; }
.cart__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart__name { font-weight: 500; font-size: 15px; line-height: 1.3; }
.cart__name:hover { text-decoration: underline; }
.cart__sku, .cart__unit { font-size: 14px; color: var(--sky); font-variant-numeric: tabular-nums; }
.cart__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart__sum { font-weight: var(--w-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__qty { display: flex; align-items: center; gap: 6px; }
.cart__qty .btn { color: var(--white); border-color: var(--border); }
.cart__del { min-height: 44px; padding: 0 2px; font-size: 14px; color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.cart__del:hover { color: var(--white); }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 450; color: var(--sky); }
.field input, .field textarea { min-height: 48px; padding: 10px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: rgb(255 255 255 / .06); color: var(--white); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--white); }
.field__err { color: #FFB4B0; font-size: 14px; font-weight: 500; min-height: 1.4em; }
#order-form { display: grid; gap: 12px; }
#order-form .btn { width: 100%; }
@media (max-width: 520px) { .cart { border-radius: 0; } }

/* ── карточка товара: окно, на телефоне шторка ── */
.pv-scrim { z-index: 96; }
.pv { position: fixed; z-index: 97; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: min(960px, calc(100vw - 32px)); max-height: min(88vh, 860px); overflow: auto;
  background: var(--white); border-radius: var(--r-lg); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pv[data-open="true"] { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.pv__x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; font-size: 26px; line-height: 1; border-radius: 50%; background: var(--white); border: 1.5px solid var(--border); }
.pv__x:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pv__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; padding: clamp(14px, 2vw, 22px); }
.pv__shot { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-md); background: var(--mist); }
.pv__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px; background: var(--white); }
.pv__b { padding: clamp(10px, 2vw, 22px); display: flex; flex-direction: column; gap: 12px; }
.pv__b .kicker { margin: 0; }
.pv__name { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.pv__specs { display: grid; margin: 4px 0 0; }
.pv__specs div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.pv__specs dt { color: var(--dim); }
.pv__specs dd { margin: 0; font-weight: 500; text-align: right; }
.pv__desc { color: var(--dim); font-size: 15px; line-height: 1.55; }
.pv__price { font-weight: var(--w-title); font-size: clamp(26px, 2.6vw, 36px); font-variant-numeric: tabular-nums; margin-top: auto; }
.pv__qty { display: flex; align-items: center; gap: 8px; }
.pv__qty > span { color: var(--dim); font-size: 15px; margin-right: auto; }
.pv__qtyv { width: 72px; min-height: 44px; padding: 10px; text-align: center; font-weight: 500; border-radius: var(--r-sm); border: 1.5px solid var(--border); background: var(--white); }
.pv__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pv__actions .btn { flex: 1 1 180px; }
html[data-pv-open="true"] body { overflow: hidden; }
@media (max-width: 760px) {
  .pv { top: auto; bottom: 0; left: 0; width: 100vw; max-height: 90vh; transform: translateY(16px); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .pv[data-open="true"] { transform: none; }
  .pv__in { grid-template-columns: 1fr; }
  .pv__shot { aspect-ratio: auto; height: min(32vh, 240px); }
}

/* ── помощник ── */
.ai__fab { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-weight: 500; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ai__fab:hover { background: var(--royal); }
.ai__panel { position: fixed; left: 18px; bottom: 82px; z-index: 96; width: min(420px, calc(100vw - 36px)); max-height: min(72vh, 720px); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--white); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(10,12,20,.25); }
.ai__hd { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 18px; background: var(--navy); color: #fff; }
.ai__hd b { font-size: 16px; font-weight: 500; } .ai__sub { grid-column: 1; font-size: 14px; color: var(--sky); }
.ai__close { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 26px; line-height: 1; color: #fff; }
.ai__log { flex: 1; overflow: auto; padding: 14px; display: grid; gap: 10px; align-content: start; min-height: 160px; }
.ai__msg { max-width: 92%; padding: 10px 14px; font-size: 15px; line-height: 1.45; border-radius: 16px; }
.ai__msg p { margin: 0 0 8px; } .ai__msg p:last-child { margin-bottom: 0; }
.ai__msg--user { justify-self: end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.ai__msg--bot { justify-self: start; background: var(--mist); max-width: 100%; width: 100%; border-bottom-left-radius: 4px; }
.ai__typing { color: var(--dim); font-weight: 600; letter-spacing: .2em; }
.ai__title { margin: 6px 0 8px; font-weight: 500; }
.ai__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ai__card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--white); }
.ai__shot { aspect-ratio: 1; display: grid; place-items: center; background: #fff; }
.ai__shot img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ai__cardb { padding: 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ai__cardb b { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ai__sku, .ai__reason { margin: 0; font-size: 13px; color: var(--dim); }
.ai__row { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.ai__price { font-weight: var(--w-title); font-size: 15px; font-variant-numeric: tabular-nums; }
.ai__card .btn--sm { min-height: 44px; padding: 6px 10px; font-size: 14px; }
.ai__wa, .ai__checkout { margin-top: 8px; }
.ai__checkout { display: grid; gap: 8px; }
.ai__checkout p { margin: 0; color: var(--dim); font-size: 14px; }
.ai__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ai__chips .chip { min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); font-size: 14px; font-weight: 450; }
.ai__chips .chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.ai__form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ai__form input { min-height: 48px; padding: 10px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--white); min-width: 0; }
.ai__form .btn { min-width: 52px; padding: 10px 16px; }
.ai__note { margin: 0; padding: 0 14px 12px; font-size: 13px; color: var(--dim); line-height: 1.4; }
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; border: 1px solid currentColor; }
.badge--warn { color: var(--warn); }
@media (max-width: 600px) {
  .ai__fab span { display: none; } .ai__fab { padding: 12px; width: 52px; justify-content: center; }
  .ai__panel { left: 10px; right: 10px; width: auto; bottom: 76px; max-height: 78vh; }
  .ai__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── появление: контент виден без JS, прячет только работающий скрипт ── */
.rise { opacity: 1; transform: none; }
[data-anim="on"] .rise { opacity: 0; transform: translateY(18px); }
[data-anim="on"] .rise[data-in="true"] { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }
@media (prefers-reduced-motion: reduce) {
  [data-anim="on"] .rise, [data-anim="on"] .rise[data-in="true"] { opacity: 1; transform: none; transition: none; }
  .cart, .cart-scrim, .pv, .pv-scrim { transition: none; }
}

/* ── телефон: категории лентой, корзина одним скроллом ── */
@media (max-width: 979px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
}
/* корзина — один скролл: все позиции видны целиком, форма под ними */
.cart { overflow: auto; overscroll-behavior: contain; }
.cart__body { flex: none; overflow: visible; }
.cart__hd { position: sticky; top: 0; z-index: 1; background: var(--navy); }
.cart :focus-visible { outline-color: var(--white); }
.pv__actions .btn { white-space: nowrap; }
.grain--red { --dim: rgb(255 255 255 / .9); }

/* ══ движение (js/motion.js) ══════════════════════════════════════════ */
:root { --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077 22.2%, 1.088 25%, 1.077 28.1%, 0.998 38.9%, 0.988 44.4%, 1.001 61.1%, 1); }

/* полёт товара в корзину */
.fly { position: fixed; z-index: 120; pointer-events: none; border-radius: 16px; overflow: hidden; background: var(--white);
  box-shadow: 0 12px 30px rgb(10 12 30 / .28); display: grid; place-items: center; will-change: transform, opacity; }
.fly img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.fly .med { width: 50%; color: var(--red); }
.cart-btn.is-bump { animation: bump .5s var(--spring); }
.cart-btn.is-bump .cart-btn__n { animation: ping .5s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(212 35 31 / .6); } 100% { box-shadow: 0 0 0 12px rgb(212 35 31 / 0); } }

/* плашка «Добавлено» — корзина не открывается сама */
.toast { position: fixed; z-index: 110; left: 50%; bottom: 20px; transform: translate(-50%, 140%); width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 20px; border-radius: 20px; background: var(--navy); color: var(--white);
  box-shadow: 0 16px 40px rgb(10 12 30 / .35); transition: transform .45s var(--spring); }
.toast[data-open="true"] { transform: translate(-50%, 0); }
.toast__t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.toast__t b { color: var(--white); font-weight: 600; margin-right: 4px; }
.toast__n { display: block; margin-top: 2px; color: var(--sky); font-weight: 500; }
.toast .btn { flex: none; white-space: nowrap; }
@media (max-width: 520px) { .toast { bottom: 84px; } .toast__t { font-size: 14px; } }

/* кнопка на карточке, когда товар уже в корзине */
.p-card .btn.is-in { background: var(--navy); color: var(--white); border-color: var(--navy); }
.p-card .btn.is-in:hover { background: var(--royal); border-color: var(--royal); }

/* количество в корзине — крупно и отдельным цветом */
.cart__qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cart__n { display: inline-flex; align-items: baseline; gap: 3px; min-width: 64px; justify-content: center; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--white); color: var(--navy); font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cart__n small { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cart__side { justify-content: space-between; align-self: stretch; }
.cart__sum { font-size: 17px; }

/* живые стикеры: можно схватить */
.sticker { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none;
  translate: var(--dx, 0px) var(--dy, 0px); transition: translate .6s var(--spring), scale .2s ease; }
.sticker.is-drag { cursor: grabbing; transition: none; scale: 1.08; filter: drop-shadow(0 16px 24px rgb(10 12 30 / .3)); }
.sticker.is-armed { opacity: 0; scale: 1.6; }
.sticker.is-armed.is-slapped { opacity: 1; scale: 1; animation: slap .7s var(--spring) both; }
@keyframes slap { 0% { opacity: 0; scale: 1.7; rotate: 18deg; } 35% { opacity: 1; } 100% { scale: 1; rotate: 0deg; } }

/* заголовки маской */
h1.mask .w, h2.mask .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
h1.mask .w > span, h2.mask .w > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--wi) * 55ms); }
h1.mask.is-in .w > span, h2.mask.is-in .w > span { transform: none; }
[data-anim="on"] h2.mask.rise, [data-anim="on"] h1.mask { opacity: 1; transform: none; }

/* медиатор-прожектор: раскрывается из острия */
.medslot.is-open { animation: beam 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; transform-origin: 0% 50%; }
@keyframes beam { from { clip-path: inset(48% 100% 48% 0); transform: scale(.6); } to { clip-path: inset(0); transform: none; } }
.medslot img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }

/* живое зерно: градиент медленно перетекает, шум мерцает как плёнка */
.grain::before { inset: -22%; animation: drift 22s ease-in-out infinite alternate; will-change: transform; }
.grain::after { inset: -40px; animation: film .9s steps(4) infinite; }
@keyframes drift { 0% { transform: translate(-4%, -3%) rotate(-3deg) scale(1.02); } 100% { transform: translate(4%, 3%) rotate(3deg) scale(1.08); } }
@keyframes film { 0% { transform: translate(0, 0); } 25% { transform: translate(-14px, 9px); } 50% { transform: translate(11px, -12px); } 75% { transform: translate(-7px, -5px); } 100% { transform: translate(0, 0); } }

/* коды — «колпачки» баллончика */
.codes button { display: grid; gap: 2px; width: 100%; height: 100%; padding: 14px 16px; border-radius: var(--r-md); background: var(--mist); text-align: left; border: 2px solid transparent; transition: border-color .2s, transform .2s var(--spring); }
.codes li { padding: 0; background: none; }
.codes button:hover { transform: translateY(-2px); }
.codes button[aria-pressed="true"] { border-color: var(--navy); background: var(--white); }
.codes button i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(32 37 76 / .25); margin-bottom: 6px; }

/* спрей-холст */
.spray { position: relative; margin-top: 14px; border-radius: var(--r-md); overflow: hidden; background: #B9C0CB; --pigment: var(--red); }
.spray::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 .4 0 0 0 0 .42 0 0 0 0 .46 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.spray canvas { display: block; width: 100%; height: clamp(200px, 26vw, 300px); touch-action: none; cursor: crosshair; }
.spray__hint { position: absolute; inset: 0 0 56px; display: grid; place-items: center; pointer-events: none; color: var(--navy); font-weight: 500; font-size: 18px; opacity: .75; transition: opacity .3s; }
.spray.is-used .spray__hint { opacity: 0; }
.spray__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; }
.spray__bar > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / .85); font-size: 14px; font-weight: 500; }
.spray__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pigment); box-shadow: inset 0 0 0 1px rgb(32 37 76 / .3); }
.spray__bar .btn { background: rgb(255 255 255 / .85); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .grain::before, .grain::after, .medslot.is-open, .sticker.is-armed.is-slapped { animation: none; }
  .sticker.is-armed { opacity: 1; scale: 1; }
  .toast { transition: none; }
}