/* base.css — Lakres demo, build P6 (04.10.2026). Design system of S01 «Три сестры» (refs/s01/DESIGN.md) in the client's
   palette. One unit --px: 1px at 1440 → 1.5px at 2560 (ADAPTIVE.md §2); every size is the S01 number × --px.
   Palette — five colours (PLAN.md §Палитра): white · lilac · powder · violet · magenta; ink, ink-2, line, pill are shades. */
:root {
  --px: clamp(1px, 0.0446429vw + 0.357143px, 1.5px);
  --white: #ffffff;
  --lilac: #ddd3eb;      /* surface 1 — R10 Lilac Breeze (#DACDE6 from the frame), a step lighter */
  --powder: #fbe4ea;     /* surface 2 — R10 Powder Pink (#FEE4EA from the frame) */
  --violet: #5d2191;     /* the client's violet — main button, links, active filter */
  --magenta: #c427c4;    /* the client's magenta — the single accent: [01], overlines, labels, FAQ plus */
  --ink: #2a1e33;        /* text — the client's violet taken to near-black (S01 #1f1b1b role) */
  --ink-2: #625a69;      /* secondary text — same hue, lighter */
  --line: #e7e0ec;       /* hairlines, 1px frames (S01 #dedede role) */
  --pill: #f3eef6;       /* counter, inputs (S01 #ecedf2 role) */
  --violet-dk: #4a1a75;  /* hover of the main button */
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-text: "Mulish", system-ui, sans-serif;
  --pad: calc(75 * var(--px));
  --gap: calc(30 * var(--px));
  --r: calc(8 * var(--px));
  --sec: calc(120 * var(--px));
  --hdr: calc(64 * var(--px));
  --util: calc(38 * var(--px));
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 calc(16 * var(--px))/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { padding-inline: var(--pad); }

/* ---------- type: «моно-капс говорит, гротеск объясняет» (S01 DESIGN §3) ---------- */
.mono { font-family: var(--f-mono); font-weight: 300; text-transform: uppercase; letter-spacing: .01em; }
.h1 { font: 300 calc(60 * var(--px))/1.04 var(--f-mono); text-transform: uppercase; letter-spacing: 0; }
.h2 { font: 300 calc(52 * var(--px))/1.05 var(--f-mono); text-transform: uppercase; letter-spacing: 0; }
.h3 { font: 300 calc(30 * var(--px))/1.12 var(--f-mono); text-transform: uppercase; }
.h4 { font: 400 calc(20 * var(--px))/1.2 var(--f-mono); text-transform: uppercase; }
.tag { font: 400 calc(13 * var(--px))/1 var(--f-mono); color: var(--magenta); letter-spacing: .02em; }
.over { font: 400 calc(18 * var(--px))/1.2 var(--f-mono); color: var(--magenta); text-transform: uppercase; letter-spacing: .02em; }
.lead { font-size: calc(18 * var(--px)); line-height: 1.5; color: var(--ink-2); }
.small { font-size: calc(14 * var(--px)); color: var(--ink-2); }
.micro { font-size: calc(13 * var(--px)); color: var(--ink-2); }
.sec { padding-top: var(--sec); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); margin-bottom: calc(52 * var(--px)); }
.more { font: 400 calc(15 * var(--px))/1 var(--f-mono); text-transform: uppercase; color: var(--violet); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5em; }
.more::after { content: "→"; transition: transform .3s var(--ease); }
.more:hover::after { transform: translateX(4px); }

/* ---------- buttons (S01 DESIGN §8) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; height: calc(48 * var(--px));
  padding: 0 calc(34 * var(--px)); border-radius: 999px; font: 600 calc(13 * var(--px))/1 var(--f-text); text-transform: uppercase;
  letter-spacing: .12em; white-space: nowrap; transition: transform .25s var(--ease); }
.btn--dark { background: var(--violet); color: var(--white); }
.btn--dark:hover { background: var(--violet-dk); }
.btn--line { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.btn--line:hover { border-color: var(--violet); color: var(--violet); }
.btn--accent { background: var(--magenta); color: var(--white); border-radius: calc(6 * var(--px)); height: calc(54 * var(--px)); }
.btn--accent:hover { background: #a91fa9; }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { color: var(--violet); }
.btn--big { height: calc(56 * var(--px)); padding: 0 calc(46 * var(--px)); font-size: calc(14 * var(--px)); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--violet); border-bottom: 1px solid rgba(93, 33, 145, .25);  }
.link:hover { border-color: var(--violet); }
.ico { width: calc(22 * var(--px)); height: calc(22 * var(--px)); flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.mask-ico { display: inline-block; width: calc(22 * var(--px)); height: calc(22 * var(--px)); flex: none; background: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---------- utility line + header strip (S01 П1, П7) ---------- */
.util { height: var(--util); border-bottom: 1px solid var(--line); background: var(--white); position: relative; z-index: 31; }
.util__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  font-size: calc(13 * var(--px)); color: var(--ink-2); white-space: nowrap; }
.util__l { display: flex; align-items: center; gap: calc(22 * var(--px)); }
.util__l b { font-weight: 600; color: var(--ink); }
.util__r { display: flex; align-items: center; gap: calc(18 * var(--px)); }
.util__tel { font: 700 calc(16 * var(--px))/1 var(--f-text); color: var(--ink); letter-spacing: .01em; }
.util__wa { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-weight: 600; }
.util__cb { color: var(--violet); border-bottom: 1px dashed rgba(93, 33, 145, .4); font-size: calc(13 * var(--px)); }
.util__cart { height: calc(30 * var(--px)); background: var(--powder); color: var(--ink); font-size: calc(13 * var(--px)); }
.util__cart .ico { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.hdr { position: sticky; top: 0; z-index: 30; background: var(--lilac); height: var(--hdr); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: calc(34 * var(--px)); }
.logo { display: block; flex: none; width: calc(150 * var(--px)); }
.logo img { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: calc(28 * var(--px)); font-size: calc(15 * var(--px)); }
.nav > li { position: relative; }
.nav a, .nav button { display: inline-flex; align-items: center; gap: 6px; height: var(--hdr); white-space: nowrap;  }
.nav a:hover, .nav button:hover, .nav [aria-expanded="true"] { color: var(--violet); }
.nav .chev { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.nav [aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr__tools { margin-left: auto; display: flex; align-items: center; gap: calc(20 * var(--px)); }
.tool { display: inline-flex; align-items: center; gap: 8px; height: calc(40 * var(--px));  }
.tool:hover { color: var(--violet); }
.cartbtn { padding: 0 calc(16 * var(--px)); border-radius: 999px; background: var(--white); font-weight: 600; font-size: calc(14 * var(--px)); white-space: nowrap; }
.cartbtn__n { min-width: calc(20 * var(--px)); height: calc(20 * var(--px)); border-radius: 999px; background: var(--magenta); color: #fff;
  font: 700 calc(11 * var(--px))/calc(20 * var(--px)) var(--f-text); text-align: center; display: none; }
.cartbtn.has .cartbtn__n { display: inline-block; }
.cartbtn:not(.has) [data-cartsum] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cartbtn:not(.has) { padding: 0; width: calc(40 * var(--px)); justify-content: center; }
.cartbtn.bump { animation: bump .5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.08); } 60% { transform: scale(.97); } }
.search { position: relative; display: flex; align-items: center; }
.search__in { width: calc(240 * var(--px)); height: calc(40 * var(--px)); border-radius: 999px; border: 1px solid transparent; background: var(--white);
  padding: 0 calc(16 * var(--px)) 0 calc(40 * var(--px)); font-size: calc(14 * var(--px)); outline: none;  }
.search__in:focus { border-color: var(--violet); }
.search .ico { position: absolute; left: calc(13 * var(--px)); pointer-events: none; width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.sugg { position: absolute; top: calc(100% + 8px); right: 0; width: calc(420 * var(--px)); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px; display: none; z-index: 40; max-height: min(70svh, calc(520 * var(--px))); overflow: auto; }
.sugg.open { display: block; }
.sugg a { display: grid; grid-template-columns: calc(56 * var(--px)) 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; }
.sugg a:hover, .sugg a.on { background: var(--pill); }
.sugg img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--powder); }
.sugg b { font-weight: 600; white-space: nowrap; }
.sugg__all { display: block !important; text-align: center; color: var(--violet); padding: 10px !important; font-weight: 600; }
.sugg__none { padding: 14px; color: var(--ink-2); font-size: calc(14 * var(--px)); }

/* mega menus «Каталог ▾ · Кому ▾ · Повод ▾» (sketch 1.B1, RECHECK artishok) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  z-index: 29; display: none; max-height: calc(100svh - var(--hdr) - var(--util)); overflow: auto; }
.mega.open { display: block; animation: megaIn .28s var(--ease); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__in { padding-block: calc(40 * var(--px)) calc(34 * var(--px)); display: grid; gap: calc(40 * var(--px)); }
.mega--cat .mega__in { grid-template-columns: 2.2fr 1fr 1fr; }
/* sections packed in three newspaper columns, not a grid of rows (r1: the grid ran the menu past the bottom of 1440x900) */
.mega__cols { columns: 3; column-gap: calc(32 * var(--px)); }
.mega__col { break-inside: avoid; padding-bottom: calc(22 * var(--px)); }
@media (max-height: 760px) {   /* 1536x730: the whole catalog menu with its footer row in the window */
  .mega__in { padding-block: calc(22 * var(--px)) calc(18 * var(--px)); gap: calc(22 * var(--px)); }
  .mega__col { padding-bottom: calc(12 * var(--px)); }
  .mega__sub a { padding: 1px 0; }
  .mega__foot { padding-top: calc(12 * var(--px)); }
}
.mega__col h4, .mega__h { font: 400 calc(13 * var(--px))/1 var(--f-mono); color: var(--magenta); text-transform: uppercase; margin-bottom: calc(14 * var(--px)); letter-spacing: .02em; }
.mega__root { display: block; font: 300 calc(17 * var(--px))/1.25 var(--f-mono); text-transform: uppercase; margin-bottom: 8px; }
.mega__root:hover, .mega__sub a:hover { color: var(--violet); }
.mega__root small { font: 400 calc(12 * var(--px)) var(--f-mono); color: var(--ink-2); margin-left: 6px; }
.mega__sub a { display: block; font-size: calc(14 * var(--px)); color: var(--ink-2); padding: 3px 0; }
.chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.chip { display: inline-flex; align-items: center; height: calc(36 * var(--px)); padding: 0 calc(16 * var(--px)); border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); font-size: calc(14 * var(--px)); white-space: nowrap;  }
.chip:hover { border-color: var(--violet); color: var(--violet); }
.chip.on, .chip[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--white); }
.chip--lg { height: calc(46 * var(--px)); padding: 0 calc(22 * var(--px)); font-size: calc(16 * var(--px)); }
.promises { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--px)) calc(28 * var(--px)); font-size: calc(14 * var(--px)); }
.promises li { display: inline-flex; align-items: center; gap: 8px; }
.promises .mask-ico { color: var(--magenta); width: calc(20 * var(--px)); height: calc(20 * var(--px)); }
.mega__foot { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: calc(20 * var(--px)); display: flex; justify-content: space-between; align-items: center; gap: var(--gap); }
.mega--list .mega__in { grid-template-columns: repeat(3, 1fr); }
.mega--list a.chip { margin: 0; }

/* ---------- product card (S01 PRIEMY §Совмещение, sketch 2.B4) ---------- */
.card { position: relative; display: flex; flex-direction: column; }
.card__ph { position: relative; display: block; aspect-ratio: 8 / 9; border-radius: var(--r); overflow: hidden; background: var(--powder); isolation: isolate; }
.card__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card__ph.w img { object-fit: contain; padding: 7%; mix-blend-mode: multiply; }   /* client photo on white: the white becomes the plate */
.card__ph.k { background: #1b1418; }
.card__ph.k img { object-fit: contain; }
.card:hover .card__ph img { transform: scale(1.035); }
.card__labels { position: absolute; left: calc(12 * var(--px)); top: calc(12 * var(--px)); display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.lbl { display: inline-flex; align-items: center; height: calc(24 * var(--px)); padding: 0 calc(10 * var(--px)); border-radius: 999px;
  font: 600 calc(11.5 * var(--px))/1 var(--f-text); letter-spacing: .02em; background: var(--white); color: var(--ink); }
.lbl--a { background: var(--magenta); color: var(--white); }
.lbl--n { background: var(--violet); color: var(--white); }
.lbl--s { background: var(--white); color: var(--violet); }
.card__name { margin-top: calc(18 * var(--px)); font: 300 calc(18 * var(--px))/1.25 var(--f-mono); text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.card__name a:hover { color: var(--violet); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.price b { font: 700 calc(20 * var(--px))/1.2 var(--f-text); letter-spacing: .01em; white-space: nowrap; }
.price s { font-size: calc(15 * var(--px)); color: var(--ink-2); white-space: nowrap; }
.card .price { margin-top: calc(10 * var(--px)); }
.card__dl { margin-top: 2px; font-size: calc(13 * var(--px)); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.card__dl .mask-ico { width: calc(15 * var(--px)); height: calc(15 * var(--px)); color: var(--magenta); }
.card__buy { margin-top: calc(14 * var(--px)); display: flex; align-items: center; gap: calc(14 * var(--px)); flex-wrap: wrap; }
.card__buy .btn { height: calc(42 * var(--px)); padding: 0 calc(22 * var(--px)); font-size: calc(12 * var(--px)); }
.card__one { font-size: calc(14 * var(--px)); color: var(--violet); border-bottom: 1px dashed rgba(93, 33, 145, .45); white-space: nowrap; }
.card__one:hover { border-bottom-style: solid; }
.card__na { font-size: calc(14 * var(--px)); color: var(--ink-2); }
.btn.in { background: var(--powder); color: var(--violet); }

/* ---------- banners S01 П6/П8 with white silhouettes ---------- */
.sil { position: absolute; pointer-events: none; background: var(--white); -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.offer { position: relative; overflow: hidden; border-radius: var(--r); padding: calc(34 * var(--px)) calc(32 * var(--px)) calc(32 * var(--px));
  display: flex; flex-direction: column; min-height: calc(360 * var(--px)); }
.offer--lilac { background: var(--lilac); }
.offer--powder { background: var(--powder); }
.offer .tag { margin-bottom: calc(16 * var(--px)); }
.offer h2, .offer h3 { position: relative; z-index: 1; }
.offer h3 { max-width: 60%; }
.offer p { max-width: 52%; margin-top: calc(20 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.5; position: relative; z-index: 1; }
.offer .offer__btns { margin-top: auto; padding-top: calc(28 * var(--px)); display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.offer .sil { right: -6%; top: -8%; width: 52%; height: 120%; }
.offer ul { margin-top: calc(18 * var(--px)); position: relative; z-index: 1; font-size: calc(15 * var(--px)); }
.offer ul li { display: flex; gap: 10px; align-items: center; padding: 3px 0; }
.offer ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--magenta); flex: none; }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: calc(12.5 * var(--px)); color: var(--ink-2); padding-top: calc(22 * var(--px)); }
.crumbs a:hover { color: var(--violet); }
.crumbs span[aria-current] { color: #a39aa9; }
.crumbs i { font-style: normal; color: #b9b1be; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: calc(13 * var(--px)); color: var(--ink-2); }
.inp { height: calc(50 * var(--px)); border-radius: calc(12 * var(--px)); border: 1px solid var(--line); background: var(--white); padding: 0 calc(16 * var(--px));
  font-size: calc(15 * var(--px)); outline: none;  width: 100%; }
textarea.inp { height: auto; min-height: calc(110 * var(--px)); padding-top: calc(14 * var(--px)); resize: vertical; line-height: 1.5; }
.inp:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(93, 33, 145, .12); }
.field.err .inp { border-color: #c2185b; }
.field__err { display: none; font-size: calc(13 * var(--px)); color: #b0124f; line-height: 1.35; }
.field.err .field__err { display: block; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: calc(14 * var(--px)); line-height: 1.45; cursor: pointer; }
.check input { appearance: none; flex: none; width: calc(20 * var(--px)); height: calc(20 * var(--px)); border-radius: 50%; border: 1.5px solid var(--lilac);
  background: var(--white); margin: 1px 0 0; display: grid; place-items: center; cursor: pointer;  }
.check input::after { content: ""; width: 40%; height: 22%; border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--violet); border-color: var(--violet); }
.check input:checked::after { opacity: 1; }
.check.err input { border-color: #c2185b; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; height: calc(40 * var(--px)); padding: 0 calc(16 * var(--px)); border-radius: 999px; border: 1px solid var(--line);
  font-size: calc(14 * var(--px));  }
.seg input:checked + span { background: var(--violet); border-color: var(--violet); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* ---------- layers: one-click, call-back, toast «Добавлено» ---------- */
.layer { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 4vh 16px; }
.layer.open { display: flex; }
.layer__bg { position: absolute; inset: 0; background: rgba(42, 30, 51, .38); animation: fadeIn .25s var(--ease); }
.layer__box { position: relative; width: min(calc(540 * var(--px)), 92vw); max-height: 90svh; overflow: auto; background: var(--white); border-radius: calc(18 * var(--px));
  padding: calc(38 * var(--px)) calc(40 * var(--px)) calc(34 * var(--px)); animation: layerIn .32s var(--ease); }
@keyframes layerIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.layer__x { position: absolute; right: calc(16 * var(--px)); top: calc(16 * var(--px)); width: calc(38 * var(--px)); height: calc(38 * var(--px)); border-radius: 50%;
  background: var(--pill); display: grid; place-items: center;  }
.layer__x:hover { background: var(--lilac); }
.layer h2 { font: 300 calc(30 * var(--px))/1.1 var(--f-mono); text-transform: uppercase; margin-bottom: calc(22 * var(--px)); padding-right: 40px; }
.layer form { display: grid; gap: calc(14 * var(--px)); }
.layer__prod { display: grid; grid-template-columns: calc(84 * var(--px)) 1fr; gap: 16px; align-items: center; padding: 12px; border-radius: 12px; background: var(--pill); margin-bottom: 6px; }
.layer__prod .card__ph { aspect-ratio: 1; border-radius: 8px; }
.layer__prod b { display: block; font-weight: 700; margin-top: 4px; }
.layer__note { font-size: calc(13 * var(--px)); color: var(--ink-2); }
.layer__ok { text-align: center; padding: 10px 0; }
.layer__ok h2 { padding-right: 0; }
.toast { position: fixed; z-index: 55; top: calc(var(--hdr) + 10px); right: var(--pad); width: min(calc(400 * var(--px)), 92vw); background: var(--white);
  border: 1px solid var(--line); border-radius: calc(16 * var(--px)); padding: calc(18 * var(--px)); box-shadow: 0 18px 48px -24px rgba(42, 30, 51, .35);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.open { opacity: 1; transform: none; pointer-events: auto; }
.toast__h { font: 400 calc(13 * var(--px))/1 var(--f-mono); color: var(--magenta); text-transform: uppercase; margin-bottom: 12px; display: flex; justify-content: space-between; }
.toast__p { display: grid; grid-template-columns: calc(64 * var(--px)) 1fr; gap: 14px; align-items: center; }
.toast__p .card__ph { aspect-ratio: 1; border-radius: 8px; }
.toast__p b { display: block; margin-top: 2px; }
.toast__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.toast__btns .btn { height: calc(42 * var(--px)); padding: 0 12px; font-size: calc(11.5 * var(--px)); }
.toast__add { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.toast__add p { font-size: calc(13 * var(--px)); color: var(--ink-2); margin-bottom: 8px; }
.toast__add ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.toast__add li { display: grid; gap: 4px; font-size: calc(12 * var(--px)); }
.toast__add .card__ph { aspect-ratio: 1; border-radius: 6px; }
.toast__add button { font-size: calc(12 * var(--px)); color: var(--violet); text-align: left; font-weight: 700; }

/* ---------- footer (S01 П9) ---------- */
.ftr { margin-top: var(--sec); padding-block: calc(54 * var(--px)) calc(40 * var(--px)); border-top: 1px solid var(--line); }
.ftr__in { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1.1fr; gap: var(--gap); }
.ftr__brand .logo { width: calc(170 * var(--px)); }
.ftr__brand p { margin-top: calc(14 * var(--px)); font: 400 calc(12 * var(--px))/1.4 var(--f-mono); letter-spacing: .02em; color: var(--ink-2); }
.ftr__brand .ftr__tag { font: 400 calc(13.5 * var(--px))/1.5 var(--f-text); letter-spacing: 0; max-width: 30ch; }
.ftr h4 { font: 400 calc(17 * var(--px))/1 var(--f-mono); text-transform: uppercase; margin-bottom: calc(18 * var(--px)); }
.ftr li a { display: inline-block; padding: 4px 0; font-size: calc(15 * var(--px)); color: var(--ink-2);  }
.ftr li a:hover { color: var(--violet); }
.ftr__tel { font: 700 calc(18 * var(--px))/1.3 var(--f-text); display: block; }
.ftr__tel + .micro { margin-bottom: 10px; }
.soc { display: flex; gap: 10px; margin-top: calc(14 * var(--px)); }
.soc a { width: calc(38 * var(--px)); height: calc(38 * var(--px)); border-radius: 50%; background: var(--magenta); color: #fff; display: grid; place-items: center;
  font: 700 calc(11 * var(--px))/1 var(--f-text); transition: transform .2s; }
.soc a:hover { background: var(--violet); }
.soc .mask-ico { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.ftr__bot { margin-top: calc(46 * var(--px)); display: flex; justify-content: space-between; align-items: center; gap: var(--gap); font-size: calc(13 * var(--px)); color: var(--ink-2); }
.up { display: inline-flex; align-items: center; gap: 6px; height: calc(30 * var(--px)); padding: 0 calc(14 * var(--px)); border-radius: 999px; border: 1px solid var(--line);
  font-size: calc(13 * var(--px));  }
.up:hover { border-color: var(--violet); color: var(--violet); }

/* ---------- motion: transform/opacity only, calm; off for reduced motion and screenshots ---------- */
.js [data-rv] { opacity: 0; transform: translateY(18px); }
.rm [data-rv], .shot [data-rv] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js [data-rv] { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .btn--dark:active { transform: scale(.98); }
}

/* three cards in a row: «Рекомендуем» of the card and the corporate shelf (r1: it lived in product.css, the corporate page
   showed one huge card per row) */
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(36 * var(--px)); }