/* ══════════════════════════════════════════════════════════════════
   Вкуснофф — компоненты. Только токены из tokens.css.
   Глубина — слоями и тенями фирменного тона, не рамками.
   Движение — одна кривая --ease, только transform и opacity.
   ══════════════════════════════════════════════════════════════════ */

*,*::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; min-height:100%;
  background:var(--grad-page) var(--sur-page) fixed;
  color:var(--ink);
  font-family:var(--ff-ui); font-weight:400; font-size:16px; line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-variant-numeric:lining-nums tabular-nums;
}
img{ display:block; max-width:100%; height:auto }
[hidden]{ display:none !important }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--accent); color:var(--n-0) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs) }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.skip{ position:fixed; top:-80px; left:var(--s-3); z-index:var(--z-modal);
  background:var(--accent); color:var(--n-0); padding:var(--s-3) var(--s-4);
  border-radius:var(--r-sm) }
.skip:focus{ top:var(--s-3) }
.dim{ color:var(--ink-soft) }

/* ── типографика ──────────────────────────────────────────────── */
.h1{ font-family:var(--ff-dsp); font-weight:600; letter-spacing:var(--ls-tight);
  font-size:var(--fs-h1); line-height:var(--lh-tight); text-wrap:balance;
  color:var(--ink-strong) }
.h2{ font-family:var(--ff-dsp); font-weight:600; letter-spacing:var(--ls-tight);
  font-size:var(--fs-h2); line-height:var(--lh-head); text-wrap:balance;
  color:var(--ink-strong) }
.h3{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3);
  line-height:var(--lh-head) }
.acc{ font-style:italic; font-weight:400; color:var(--accent) }
.acc--k{ font-style:italic; font-weight:400; color:var(--khaki-700) }

.tag{ display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--khaki-700) }
.tag::before{ content:''; width:22px; height:2px; border-radius:var(--r-pill);
  background:var(--accent) }

.shead{ margin-bottom:clamp(var(--s-6), 3vw, var(--s-12)) }
.shead .tag{ margin-bottom:var(--s-4) }
.shead p{ margin-top:var(--s-4); color:var(--ink-soft); max-width:60ch; font-size:var(--fs-lg) }
.shead--row{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--gap-l); flex-wrap:wrap }

/* ── секции: цветные блоки, а не один белый лист ──────────────── */
.sec{ position:relative; padding-block:var(--sec); scroll-margin-top:var(--hdr,120px) }
.sec--cream{ background:var(--grad-cream) }
.sec--sand{ background:var(--sur-quiet) }
.sec--deep{ background:var(--grad-deep); color:var(--ink-invert) }
.sec--deep .h2,.sec--deep .h3{ color:var(--n-0) }
.sec--deep .shead p,.sec--deep .dim{ color:var(--khaki-300) }
.sec--deep .tag{ color:var(--ochre-300) }
.sec--deep .tag::before{ background:var(--ochre-500) }
.sec--deep .acc{ color:var(--terra-300) }
/* мягкая линия схода между блоками */
.sec--cream::before,.sec--deep::before{ content:''; position:absolute; inset:0 0 auto 0;
  height:1px; background:var(--edge-soft); opacity:.5 }
.sec--deep::before{ background:var(--n-950) }

/* ── кнопки: варианты, не правки на месте ─────────────────────── */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2); padding:.82em 1.5em; border:0; border-radius:var(--r-pill);
  cursor:pointer; background:var(--grad-brand); color:var(--n-0);
  font-size:var(--fs-base); font-weight:600; line-height:1.2; white-space:nowrap;
  box-shadow:var(--glow-brand-s);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease), color var(--t) var(--ease) }
.btn:hover{ transform:translateY(var(--lift-soft)); box-shadow:var(--glow-brand) }
.btn:active{ transform:translateY(0) scale(.985) }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none }
.btn--lg{ padding:1.02em 1.9em; font-size:var(--fs-md) }
.btn--sm{ padding:.56em 1.05em; font-size:var(--fs-sm) }
.btn--full{ width:100% }
.btn--ghost{ background:var(--sur-raised); color:var(--ink); box-shadow:var(--sh-1) }
.btn--ghost:hover{ background:var(--sur-raised); box-shadow:var(--sh-2); color:var(--ink-brand) }
.btn--out{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--edge) }
.btn--out:hover{ background:var(--sur-raised); box-shadow:inset 0 0 0 1.5px var(--khaki-300), var(--sh-2) }
.sec--deep .btn--out{ color:var(--n-0); box-shadow:inset 0 0 0 1.5px var(--on-deep-5) }
.sec--deep .btn--out:hover{ background:var(--on-deep-2);
  box-shadow:inset 0 0 0 1.5px var(--on-deep-6) }

.iconbtn{ position:relative; display:grid; place-items:center; width:42px; height:42px;
  border-radius:var(--r-pill); border:0; background:var(--sur-raised); color:var(--ink);
  cursor:pointer; box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             color var(--t) var(--ease) }
.iconbtn:hover{ transform:translateY(var(--lift-soft)); box-shadow:var(--sh-2);
  color:var(--ink-brand) }
.link{ color:var(--ink-brand); font-weight:600;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:2px; transition:background-size var(--t) var(--ease) }
.link:hover{ background-size:100% 2px }

/* ── плашка акции ─────────────────────────────────────────────── */
.promo{ position:relative; background:var(--grad-brand); color:var(--n-0) }
.promo__in{ display:flex; align-items:center; justify-content:center; gap:var(--s-2) var(--s-5);
  flex-wrap:wrap; padding:var(--s-3) var(--pad); font-size:var(--fs-sm); text-align:center }
.promo b{ font-weight:700 }
.promo a{ font-weight:600;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  opacity:.85; transition:opacity var(--t) var(--ease) }
.promo a:hover{ opacity:1 }

/* ── шапка ────────────────────────────────────────────────────── */
.hdr{ position:sticky; top:0; z-index:var(--z-sticky); background:var(--sur-raised);
  box-shadow:0 1px 0 var(--edge-soft) }
.hdr__bar{ display:flex; align-items:center; gap:clamp(var(--s-3),1.8vw,var(--s-8));
  padding-block:var(--s-4) }
.logo{ display:flex; align-items:center; gap:var(--s-3); flex:0 0 auto }
.logo__m{ color:var(--accent); filter:drop-shadow(var(--glow-brand-s)) }
.logo__t{ font-family:var(--ff-dsp); font-weight:600; font-size:1.1rem; line-height:1.05;
  color:var(--ink-strong); white-space:nowrap }
.logo__t em{ display:block; font-family:var(--ff-ui); font-style:normal; font-weight:600;
  font-size:.56rem; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--khaki-700); margin-top:4px }

.search{ position:relative; flex:1 1 auto; display:flex; align-items:center; gap:var(--s-3);
  background:var(--sur-sunken); border-radius:var(--r-pill); padding:.6em 1.1em;
  max-width:480px; box-shadow:inset 0 0 0 1.5px transparent;
  transition:box-shadow var(--t) var(--ease), background-color var(--t) var(--ease) }
.search:focus-within{ background:var(--sur-raised);
  box-shadow:inset 0 0 0 1.5px var(--edge-brand), var(--ring-brand) }
.search svg{ color:var(--khaki-700); flex:0 0 auto }
.search input{ border:0; background:none; outline:none; width:100%; font-size:var(--fs-base) }
.search input::placeholder{ color:var(--ink-faint) }
.search__x{ border:0; background:none; cursor:pointer; color:var(--ink-faint);
  font-size:1.35rem; line-height:1; padding:0 2px }
.sug{ position:absolute; left:0; right:0; top:calc(100% + var(--s-3)); z-index:var(--z-raised);
  background:var(--sur-raised); border-radius:var(--r-lg); box-shadow:var(--sh-4);
  overflow:hidden; max-height:min(440px,62vh); overflow-y:auto; padding:var(--s-2) }
.sug a{ display:grid; grid-template-columns:42px 1fr auto; gap:var(--s-3); align-items:center;
  padding:var(--s-2) var(--s-3); border-radius:var(--r-sm);
  transition:background-color var(--t-fast) var(--ease) }
.sug a:hover,.sug a:focus{ background:var(--sur-tint) }
.sug img{ width:42px; height:42px; object-fit:cover; border-radius:var(--r-xs) }
.sug em{ font-style:normal; font-size:var(--fs-base); line-height:1.3 }
.sug b{ font-family:var(--ff-dsp); font-size:var(--fs-md); white-space:nowrap;
  color:var(--ink-brand) }
.sug__no{ padding:var(--s-4); font-size:var(--fs-base); color:var(--ink-soft) }

.hdr__right{ display:flex; align-items:center; gap:var(--s-2); flex:0 0 auto; margin-left:auto }
.tel{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-base);
  font-weight:600; color:var(--ink-strong); white-space:nowrap; padding:.5em .2em;
  transition:color var(--t) var(--ease) }
.tel svg{ color:var(--accent) }
.tel:hover{ color:var(--ink-brand) }
.iconbtn__n{ position:absolute; top:-4px; right:-4px; display:grid; place-items:center;
  min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--n-0); font-size:.68rem; font-weight:700; line-height:1;
  box-shadow:var(--glow-brand-s) }
.cartbtn{ position:relative; display:inline-flex; align-items:center; gap:var(--s-3);
  padding:.7em 1.2em; border:0; border-radius:var(--r-pill); background:var(--grad-brand);
  color:var(--n-0); font-weight:600; font-size:var(--fs-base); cursor:pointer;
  box-shadow:var(--glow-brand-s);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.cartbtn:hover{ transform:translateY(var(--lift-soft)); box-shadow:var(--glow-brand) }
.cartbtn:active{ transform:translateY(0) scale(.985) }
.cartbtn__n{ display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--on-deep-4); font-size:var(--fs-xs);
  font-weight:700 }
.is-bump{ animation:bump 340ms var(--ease) }
@keyframes bump{ 0%,100%{transform:scale(1)} 42%{transform:scale(1.09)} }

.catbar{ position:relative; background:var(--sur-raised) }
.catbar::after{ content:''; position:absolute; inset:0 0 0 auto; width:56px;
  pointer-events:none; background:var(--grad-fade-r) }
.catbar__in{ display:flex; gap:var(--s-1); overflow-x:auto; scrollbar-width:none;
  padding-bottom:2px }
.catbar__in::-webkit-scrollbar{ display:none }
.catbar a{ position:relative; flex:0 0 auto; padding:.78em .95em; font-size:var(--fs-sm);
  font-weight:500; color:var(--ink-soft); white-space:nowrap;
  transition:color var(--t) var(--ease) }
.catbar a::after{ content:''; position:absolute; left:.95em; right:.95em; bottom:0;
  height:2px; border-radius:var(--r-pill); background:var(--accent);
  transform:scaleX(0); transform-origin:50%; transition:transform var(--t) var(--ease) }
.catbar a:hover{ color:var(--ink-brand) }
.catbar a:hover::after{ transform:scaleX(.55) }
.catbar a.is-on{ color:var(--ink-brand); font-weight:600 }
.catbar a.is-on::after{ transform:scaleX(1) }

/* ── первый экран ─────────────────────────────────────────────── */
.hero{ padding-block:clamp(var(--s-10), 5vw, var(--s-24)) clamp(var(--s-12), 6vw, var(--s-24)) }
.hero__in{ display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(var(--s-8), 5vw, var(--s-24)); align-items:center }
.hero__sub{ margin-top:var(--s-6); color:var(--ink-soft); max-width:46ch; font-size:var(--fs-lg) }
.hero__cta{ display:flex; gap:var(--s-5); flex-wrap:wrap; margin-top:var(--s-10);
  align-items:center }
.hero__tel{ font-family:var(--ff-dsp); font-size:1.24rem; font-weight:600; white-space:nowrap;
  color:var(--ink-strong); transition:color var(--t) var(--ease) }
.hero__tel:hover{ color:var(--ink-brand) }

.rate{ display:inline-flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6);
  background:var(--sur-raised); border-radius:var(--r-pill);
  padding:.45em 1.1em .45em .45em; box-shadow:var(--sh-2), var(--ring-ochre) }
.rate__n{ display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-pill);
  background:var(--accent-2-lo); font-family:var(--ff-dsp); font-weight:600; font-size:1rem;
  color:var(--ochre-700) }
.rate__s{ color:var(--accent-2); letter-spacing:.1em; font-size:var(--fs-base) }
.rate__t{ font-size:var(--fs-xs); line-height:1.35; color:var(--ink-soft) }

/* фото первого экрана: слои и перекрытие, не ровная сетка */
.hero__pics{ position:relative; display:grid; grid-template-columns:1.4fr 1fr;
  gap:var(--gap); padding-bottom:var(--s-10) }
.hero__pics img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-xl) }
.hero__a{ grid-row:1 / span 2; aspect-ratio:4/5; box-shadow:var(--sh-4) }
.hero__b{ aspect-ratio:1; box-shadow:var(--sh-3) }
.hero__c{ aspect-ratio:1; box-shadow:var(--sh-3); transform:translateY(calc(-1 * var(--s-4))) }
.hero__pics::after{ content:''; position:absolute; inset:auto -6% -4% 18%; height:56%;
  border-radius:var(--r-2xl); background:var(--accent-lo); z-index:-1; opacity:.9 }

/* ── три шага ─────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-l) }
.step{ position:relative; background:var(--sur-raised); border-radius:var(--r-lg);
  padding:clamp(var(--s-6), 2.4vw, var(--s-10)); box-shadow:var(--sh-2);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.step:hover{ transform:translateY(var(--lift-soft)); box-shadow:var(--sh-3) }
.step__i{ display:grid; place-items:center; width:56px; height:56px;
  border-radius:var(--r-pill); background:var(--accent-lo); color:var(--accent);
  margin-bottom:var(--s-5); box-shadow:var(--ring-brand) }
.step__n{ font-family:var(--ff-dsp); font-size:var(--fs-xs); font-weight:600;
  color:var(--khaki-700); letter-spacing:var(--ls-wide); text-transform:uppercase }
.step h3{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3);
  margin:var(--s-2) 0 var(--s-3) }
.step p{ font-size:var(--fs-base); color:var(--ink-soft) }

/* ── карточка товара ──────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:var(--gap) }
.card{ position:relative; display:flex; flex-direction:column; background:var(--sur-raised);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  content-visibility:auto; contain-intrinsic-size:auto 400px;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.card:hover{ transform:translateY(var(--lift)); box-shadow:var(--sh-3) }
.card.is-in{ box-shadow:var(--sh-2), inset 0 0 0 1.5px var(--edge-brand) }
.card__l{ display:block; color:inherit }
.card__pic{ position:relative; flex:0 0 auto; aspect-ratio:1;
  background:var(--sur-sunken); overflow:hidden }
.card__pic img{ width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform var(--t-slow) var(--ease) }
.card:hover .card__pic img{ transform:scale(1.045) }

/* фирменная плитка — там, где у клиента нет снимка позиции.
   Подложка: обложка раздела, размытая до фактуры. */
.tile{ position:absolute; inset:0; display:grid; place-items:center; padding:var(--s-5);
  overflow:hidden; background-image:var(--grad-tile), var(--tile);
  background-size:cover; background-position:center; background-color:var(--sur-sunken) }
.tile::before{ content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(52deg,
    var(--tile-hatch) 0 1px, transparent 1px 12px) }
.tile__m{ width:46%; max-width:132px; color:var(--khaki-500); opacity:.34;
  filter:drop-shadow(0 1px 0 var(--sheen-1)) }
.tile__cat{ position:absolute; left:var(--s-5); top:var(--s-5); max-width:calc(100% - var(--s-10));
  font-size:.6rem; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--khaki-800); text-shadow:0 1px 0 var(--sheen-2) }
.card:hover .tile__m{ transform:scale(1.06); transition:transform var(--t-slow) var(--ease) }
/* варианты: сдвиг фактуры и размер знака — ряд плиток перестаёт быть копипастом */
.tile--a{ background-position:22% 26% }
.tile--b{ background-position:76% 34%; background-size:150% }
.tile--c{ background-position:44% 78%; background-size:130% }
.tile--d{ background-position:88% 82%; background-size:165% }
.tile--b .tile__m{ width:38%; opacity:.28 }
.tile--c .tile__m{ width:54%; opacity:.24 }
.tile--d .tile__m{ width:42%; opacity:.32 }

.badges{ position:absolute; left:var(--s-3); top:var(--s-3); display:flex;
  flex-direction:column; align-items:flex-start; gap:var(--s-1); z-index:2 }
.bdg{ padding:.32em .7em; border-radius:var(--r-pill); font-size:var(--fs-xs);
  font-weight:700; line-height:1.3; background:var(--sur-raised); color:var(--ink-strong);
  box-shadow:var(--sh-1) }
.bdg--hit{ background:var(--accent-2); color:var(--ochre-700) }
.bdg--set{ background:var(--grad-brand); color:var(--n-0); box-shadow:var(--glow-brand-s) }

.fav{ position:absolute; right:var(--s-3); top:var(--s-3); z-index:2; display:grid;
  place-items:center; width:36px; height:36px; border-radius:var(--r-pill); border:0;
  cursor:pointer; background:var(--sur-raised); color:var(--ink-faint); box-shadow:var(--sh-1);
  transition:color var(--t) var(--ease), transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease) }
.fav:hover{ color:var(--accent); box-shadow:var(--sh-2) }
.fav:active{ transform:scale(.88) }
.fav.is-on{ color:var(--accent); box-shadow:var(--glow-brand-s) }
.fav.is-on svg{ fill:currentColor }

.card__b{ padding:var(--s-5) var(--s-5) var(--s-5); display:flex; flex-direction:column;
  gap:var(--s-2); flex:1 }
.card__n{ font-weight:500; font-size:var(--fs-base); line-height:1.34;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--t) var(--ease) }
.card__l:hover .card__n{ color:var(--ink-brand) }
.card__w{ font-size:var(--fs-xs); color:var(--ink-faint) }
.card__pr{ display:flex; align-items:baseline; gap:var(--s-2); margin-top:auto;
  padding-top:var(--s-3); flex-wrap:wrap }
.card__p{ font-family:var(--ff-dsp); font-weight:600; font-size:1.32rem; line-height:1;
  color:var(--ink-brand) }
.card__u{ font-size:var(--fs-xs); color:var(--ink-faint) }
.card__act{ margin-top:var(--s-3) }
.add{ width:100%; padding:.72em 1em; border:0; border-radius:var(--r-pill);
  background:var(--accent-lo); color:var(--ink-brand); font-size:var(--fs-sm); font-weight:600;
  cursor:pointer; transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
    box-shadow var(--t) var(--ease) }
.add:hover{ background:var(--grad-brand); color:var(--n-0); box-shadow:var(--glow-brand-s) }
.step-q{ display:grid; grid-template-columns:38px 1fr 38px; align-items:center;
  border-radius:var(--r-pill); overflow:hidden; background:var(--accent-lo);
  box-shadow:inset 0 0 0 1.5px var(--edge-brand) }
.step-q button{ height:38px; border:0; background:none; cursor:pointer;
  color:var(--ink-brand); font-size:1.2rem; line-height:1;
  transition:background-color var(--t-fast) var(--ease) }
.step-q button:hover{ background:var(--terra-200) }
.step-q b{ text-align:center; font-size:var(--fs-sm); font-weight:600; color:var(--ink-brand) }
.grid__empty{ padding:var(--s-16) 0; color:var(--ink-soft); font-size:var(--fs-lg) }

/* ── карточка набора ──────────────────────────────────────────── */
.sets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:var(--gap) }
.setc{ display:flex; flex-direction:column; background:var(--sur-raised);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.setc:hover{ transform:translateY(var(--lift)); box-shadow:var(--sh-4) }
.setc__pic{ position:relative; flex:0 0 auto; aspect-ratio:4/3;
  background:var(--sur-sunken); overflow:hidden }
.setc__pic img{ width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease) }
.setc:hover .setc__pic img{ transform:scale(1.04) }
.setc__b{ padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1 }
.setc__n{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3); line-height:1.22 }
.setc__m{ font-size:var(--fs-sm); color:var(--ink-faint) }
.setc__s{ font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.setc__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  margin-top:auto; padding-top:var(--s-2) }
.setc__p{ font-family:var(--ff-dsp); font-weight:600; font-size:1.5rem; line-height:1.05;
  color:var(--ink-brand); white-space:nowrap }
.setc__p small{ display:block; font-family:var(--ff-ui); font-size:.6rem; font-weight:600;
  color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase; margin-top:2px }

/* ── плитка разделов ──────────────────────────────────────────── */
.cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:var(--gap) }
.catc{ display:block; background:var(--sur-raised); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.catc:hover{ transform:translateY(var(--lift)); box-shadow:var(--sh-3) }
.catc__p{ position:relative; overflow:hidden }
.catc img{ width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform var(--t-slow) var(--ease) }
.catc:hover img{ transform:scale(1.05) }
.catc__b{ padding:var(--s-4) var(--s-5) var(--s-5) }
.catc__t{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-md); line-height:1.24 }
.catc__m{ margin-top:var(--s-2); font-size:var(--fs-xs); color:var(--ink-faint) }
.catc__m b{ color:var(--ink-brand); font-weight:700 }

/* ── круглые поводы ───────────────────────────────────────────── */
.occ{ display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(var(--s-6),2.6vw,var(--s-10)) var(--gap) }
.occ a{ display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  text-align:center }
.occ img{ width:100%; max-width:132px; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-pill); box-shadow:var(--sh-2);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.occ a:hover img{ transform:translateY(var(--lift)) scale(1.03);
  box-shadow:var(--sh-3), var(--ring-brand) }
.occ span{ font-size:var(--fs-base); font-weight:500; line-height:1.3;
  transition:color var(--t) var(--ease) }
.occ a:hover span{ color:var(--ink-brand) }

/* ── крупная типографика разделов ─────────────────────────────── */
.bigwords{ padding-block:clamp(var(--s-10),4vw,var(--s-20)) }
.bigwords__row{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.14em clamp(var(--s-5),2.4vw,var(--s-12)); font-family:var(--ff-dsp); font-weight:600;
  font-size:var(--fs-mega); line-height:1.1; letter-spacing:var(--ls-tight);
  color:var(--n-200) }
.bigwords__row a{ transition:color var(--t) var(--ease) }
.bigwords__row a:hover{ color:var(--accent) }
.bigwords__row sup{ font-family:var(--ff-ui); font-size:.24em; font-weight:700;
  color:var(--khaki-500); vertical-align:super; margin-left:.16em }

/* ── мозаика ──────────────────────────────────────────────────── */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap) }
.mosaic figure{ overflow:hidden; border-radius:var(--r-lg); background:var(--n-950);
  box-shadow:var(--sh-3) }
.mosaic img{ width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease) }
.mosaic figure:hover img{ transform:scale(1.05) }
.mosaic .m1{ grid-column:span 2; grid-row:span 2; aspect-ratio:1 }
.mosaic .m2,.mosaic .m3,.mosaic .m5,.mosaic .m6{ aspect-ratio:1 }
.mosaic .m4,.mosaic .m7{ grid-column:span 2; aspect-ratio:2/1 }
.mosaic__cap{ margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--khaki-300) }

/* ── парный блок с фото ───────────────────────────────────────── */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s-8),4vw,var(--s-20));
  align-items:center }
.duo img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-xl);
  box-shadow:var(--sh-3) }
.duo__ul{ margin-top:var(--s-6); display:grid; gap:var(--s-4) }
.duo__ul li{ position:relative; padding-left:var(--s-8); color:var(--ink-soft);
  font-size:var(--fs-md) }
.duo__ul li::before{ content:''; position:absolute; left:0; top:.3em; width:20px; height:20px;
  border-radius:var(--r-pill); background:var(--accent-lo) no-repeat center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M5.5 10.4l3 3 6.2-6.4' fill='none' stroke='%23C2562E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.duo__ul b{ color:var(--ink-strong); font-weight:600 }
.sec--deep .duo__ul li{ color:var(--khaki-300) }
.sec--deep .duo__ul b{ color:var(--n-0) }
.sec--deep .duo__ul li::before{ background-color:var(--brand-wash) }

/* ── факты ────────────────────────────────────────────────────── */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.fact{ position:relative; background:var(--sur-raised); border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-6) var(--s-8); box-shadow:var(--sh-1); overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.fact::after{ content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-slow) var(--ease) }
.fact:hover{ transform:translateY(var(--lift-soft)); box-shadow:var(--sh-2) }
.fact:hover::after{ transform:scaleX(1) }
.fact b{ display:block; font-family:var(--ff-dsp); font-weight:600;
  font-size:clamp(1.35rem, 1.5vw, 1.75rem); line-height:1.1; color:var(--ink-brand);
  overflow-wrap:anywhere }
.fact span{ display:block; margin-top:var(--s-3); font-size:var(--fs-base); color:var(--ink-soft) }
.sec--deep .fact{ background:var(--on-deep-1); box-shadow:none }
.sec--deep .fact b{ color:var(--ochre-300) }
.sec--deep .fact span{ color:var(--khaki-300) }

/* ── отзывы ───────────────────────────────────────────────────── */
.revs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(276px,1fr)); gap:var(--gap) }
.rev{ position:relative; background:var(--sur-raised); border-radius:var(--r-lg);
  padding:var(--s-8); display:flex; flex-direction:column; gap:var(--s-5);
  box-shadow:var(--sh-2) }
.rev::before{ content:'«'; position:absolute; right:var(--s-5); top:var(--s-1);
  font-family:var(--ff-dsp); font-size:5rem; line-height:1; color:var(--accent-lo) }
.rev__s{ color:var(--accent-2); letter-spacing:.12em; font-size:var(--fs-base) }
.rev p{ position:relative; font-family:var(--ff-dsp); font-size:var(--fs-md); line-height:1.5 }
.rev footer{ font-size:var(--fs-sm); color:var(--ink-faint); margin-top:auto }

/* ── вопросы ──────────────────────────────────────────────────── */
.faq{ display:grid; gap:var(--s-3) }
.faq details{ background:var(--sur-raised); border-radius:var(--r-md);
  box-shadow:var(--sh-1); overflow:hidden;
  transition:box-shadow var(--t) var(--ease) }
.faq details[open]{ box-shadow:var(--sh-2) }
.faq summary{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-6); padding:var(--s-5) var(--s-6); cursor:pointer; list-style:none;
  font-weight:600; font-size:var(--fs-md) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary i{ position:relative; flex:0 0 auto; width:20px; height:20px }
.faq summary i::before,.faq summary i::after{ content:''; position:absolute; inset:50% 0 auto 0;
  height:2px; border-radius:var(--r-pill); background:var(--accent);
  transition:transform var(--t) var(--ease) }
.faq summary i::after{ transform:rotate(90deg) }
.faq details[open] summary i::after{ transform:rotate(0) }
.faq details p{ padding:0 var(--s-6) var(--s-6); color:var(--ink-soft);
  font-size:var(--fs-base); max-width:84ch }

/* ── формы ────────────────────────────────────────────────────── */
.f{ display:block }
.f > span{ display:block; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--khaki-700);
  margin-bottom:var(--s-2) }
.f input,.f select,.f textarea{ width:100%; padding:.76em 1em; border:0;
  border-radius:var(--r-md); background:var(--sur-sunken); outline:none;
  font-size:var(--fs-base); box-shadow:inset 0 0 0 1.5px transparent;
  transition:box-shadow var(--t) var(--ease), background-color var(--t) var(--ease) }
.f textarea{ resize:vertical }
.f input:focus,.f select:focus,.f textarea:focus{ background:var(--sur-raised);
  box-shadow:inset 0 0 0 1.5px var(--edge-brand), var(--ring-brand) }
.f input[aria-invalid="true"]{ box-shadow:inset 0 0 0 1.5px var(--accent) }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) }
.status{ font-size:var(--fs-base); color:var(--ok-500); font-weight:600; min-height:1.2em }

.event{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s-8),4vw,var(--s-20));
  align-items:start }
.event__form{ display:grid; gap:var(--s-4); background:var(--sur-raised);
  border-radius:var(--r-xl); padding:clamp(var(--s-6),2.4vw,var(--s-10));
  box-shadow:var(--sh-3) }

/* ── подвал ───────────────────────────────────────────────────── */
.foot{ background:var(--grad-deep); color:var(--khaki-300);
  padding-block:clamp(var(--s-16),5vw,var(--s-24)) var(--s-6) }
.foot__in{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--gap-l) }
.foot__logo{ font-family:var(--ff-dsp); font-weight:600; font-size:1.4rem;
  color:var(--n-0) }
.foot__h{ font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--ochre-300); margin-bottom:var(--s-4) }
.foot__t{ font-size:var(--fs-base); color:var(--khaki-300); margin-top:var(--s-3) }
.foot__t b{ color:var(--n-0) }
.foot__t a{ transition:color var(--t) var(--ease) }
.foot__t a:hover{ color:var(--terra-300) }
.foot__nav{ display:grid; gap:var(--s-3); font-size:var(--fs-base) }
.foot__nav a{ transition:color var(--t) var(--ease) }
.foot__nav a:hover{ color:var(--terra-300) }
.foot__tel{ font-family:var(--ff-dsp); font-weight:600; font-size:1.3rem; white-space:nowrap;
  color:var(--n-0); transition:color var(--t) var(--ease) }
.foot__tel:hover{ color:var(--terra-300) }
.foot__note{ margin-top:clamp(var(--s-8),3vw,var(--s-16)); padding-top:var(--s-6);
  border-top:1px solid var(--on-deep-3); font-size:var(--fs-sm);
  color:var(--n-500); max-width:98ch }
.foot__note b{ color:var(--khaki-300) }
.foot__note code{ font-family:ui-monospace,monospace; font-size:.94em }
.foot__bot{ display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--on-deep-3); font-size:var(--fs-xs); color:var(--n-500) }

/* ── шторка корзины ───────────────────────────────────────────── */
.drawer{ border:0; padding:0; margin:0 0 0 auto; height:100dvh; max-height:100dvh;
  width:min(468px,100vw); max-width:100vw; background:var(--sur-raised); color:var(--ink);
  box-shadow:var(--sh-4) }
.drawer::backdrop{ background:var(--scrim) }
.drawer__in{ display:flex; flex-direction:column; height:100% }
.drawer__top{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:var(--s-5) var(--pad); flex:0 0 auto;
  box-shadow:0 1px 0 var(--edge-soft) }
.drawer__top h2{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3) }
.drawer__top span{ color:var(--ink-faint); font-weight:400; font-size:var(--fs-sm) }
.drawer__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-2) var(--pad) var(--s-4) }
.drawer__foot{ flex:0 0 auto; background:var(--grad-cream);
  padding:var(--s-5) var(--pad) calc(var(--s-5) + env(safe-area-inset-bottom));
  box-shadow:0 -1px 0 var(--edge-soft) }

.empty{ padding:var(--s-24) 0; text-align:center; color:var(--ink-soft) }
.empty b{ display:block; font-family:var(--ff-dsp); font-size:var(--fs-h3);
  color:var(--ink-strong); margin-bottom:var(--s-2) }

.ci{ display:grid; grid-template-columns:64px 1fr auto; gap:var(--s-4);
  padding:var(--s-4) 0; box-shadow:0 1px 0 var(--edge-soft) }
.ci__pic{ width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--sur-sunken); box-shadow:var(--sh-1) }
.ci__pic img{ width:100%; height:100%; object-fit:cover }
.ci__pic span{ display:grid; place-items:center; width:100%; height:100%;
  font-family:var(--ff-dsp); font-size:1.2rem; color:var(--khaki-700) }
.ci__n{ font-size:var(--fs-base); font-weight:500; line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ci__m{ margin-top:var(--s-1); font-size:var(--fs-xs); color:var(--ink-faint) }
.ci__right{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-2) }
.ci__p{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-md); white-space:nowrap }
.ci .step-q{ display:inline-grid; grid-template-columns:32px minmax(58px,auto) 32px }
.ci .step-q button{ height:32px; font-size:1.05rem }
.ci__x{ border:0; background:none; cursor:pointer; color:var(--ink-faint);
  font-size:var(--fs-xs); padding:0; text-decoration:underline; text-underline-offset:3px;
  transition:color var(--t) var(--ease) }
.ci__x:hover{ color:var(--ink-brand) }

.opts{ display:grid; gap:var(--s-2); margin-bottom:var(--s-4) }
.opt{ display:flex; align-items:center; gap:var(--s-3); cursor:pointer;
  font-size:var(--fs-base) }
.opt input{ position:absolute; opacity:0; width:0; height:0 }
.opt i{ flex:0 0 auto; width:20px; height:20px; border-radius:var(--r-xs);
  background:var(--sur-raised); position:relative;
  box-shadow:inset 0 0 0 1.5px var(--edge);
  transition:background-color var(--t) var(--ease), box-shadow var(--t) var(--ease) }
.opt i::after{ content:''; position:absolute; left:6px; top:2px; width:5px; height:11px;
  border:solid var(--n-0); border-width:0 2px 2px 0; transform:rotate(42deg) scale(.5);
  opacity:0; transition:transform var(--t) var(--ease), opacity var(--t-fast) linear }
.opt input:checked + i{ background:var(--grad-brand); box-shadow:var(--glow-brand-s) }
.opt input:checked + i::after{ transform:rotate(42deg) scale(1); opacity:1 }
.opt input:focus-visible + i{ box-shadow:var(--ring-brand) }

.sum{ display:grid; gap:var(--s-2); margin-bottom:var(--s-4) }
.sum div{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4);
  font-size:var(--fs-base); color:var(--ink-soft) }
.sum div b{ font-weight:600; color:var(--ink-strong) }
.sum .minus b{ color:var(--ok-500) }
.sum .total{ margin-top:var(--s-2); padding-top:var(--s-4);
  border-top:1px solid var(--edge); font-size:var(--fs-md); color:var(--ink-strong) }
.sum .total b{ font-family:var(--ff-dsp); font-size:1.6rem; color:var(--ink-brand) }
.warn{ margin-bottom:var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:var(--accent-lo); color:var(--terra-700); font-size:var(--fs-sm) }

.checkout{ flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:var(--s-5) var(--pad) calc(var(--s-6) + env(safe-area-inset-bottom));
  display:grid; gap:var(--s-4); align-content:start }
.checkout h3{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3) }
.back{ justify-self:start; border:0; background:none; cursor:pointer; color:var(--ink-faint);
  font-size:var(--fs-sm); padding:0; transition:color var(--t) var(--ease) }
.back:hover{ color:var(--ink-brand) }
.co__sum{ padding:var(--s-4); border-radius:var(--r-md); background:var(--sur-sunken);
  font-size:var(--fs-base) }
.co__sum b{ font-family:var(--ff-dsp); font-size:var(--fs-h3); color:var(--ink-brand) }
.legal{ font-size:var(--fs-xs); color:var(--ink-faint) }

/* ── модалка входа ────────────────────────────────────────────── */
.modal{ border:0; padding:0; border-radius:var(--r-xl); width:min(408px,92vw);
  background:var(--sur-raised); color:var(--ink); box-shadow:var(--sh-4) }
.modal::backdrop{ background:var(--scrim) }
.modal__in{ padding:clamp(var(--s-6),2.4vw,var(--s-10)); display:grid; gap:var(--s-4) }
.modal__top{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-4) }
.modal h2{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3) }
.modal__t{ font-size:var(--fs-base); color:var(--ink-soft) }
.tabs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-1);
  background:var(--sur-sunken); border-radius:var(--r-pill); padding:var(--s-1) }
.tabs button{ padding:.6em; border:0; border-radius:var(--r-pill); background:none;
  cursor:pointer; font-size:var(--fs-base); font-weight:600; color:var(--ink-faint);
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             box-shadow var(--t) var(--ease) }
.tabs button.is-on{ background:var(--sur-raised); color:var(--ink-strong);
  box-shadow:var(--sh-1) }

/* ── страница товара ──────────────────────────────────────────── */
.crumbs{ display:flex; flex-wrap:wrap; gap:var(--s-2); font-size:var(--fs-sm);
  color:var(--ink-faint); padding-block:var(--s-5) 0 }
.crumbs a{ transition:color var(--t) var(--ease) }
.crumbs a:hover{ color:var(--ink-brand) }
.crumbs i{ font-style:normal; color:var(--n-300) }
.prod{ display:grid; grid-template-columns:1.02fr 1fr;
  gap:clamp(var(--s-8),4vw,var(--s-20)); align-items:start;
  padding-block:clamp(var(--s-6),2.6vw,var(--s-12)) }
.prod__pic{ position:relative; border-radius:var(--r-2xl); overflow:hidden;
  background:var(--sur-sunken); box-shadow:var(--sh-4) }
.prod__pic img{ width:100%; aspect-ratio:1; object-fit:cover }
.prod__pic .tile{ position:relative; aspect-ratio:1; padding:var(--s-10) }
.prod__pic .tile__n{ font-size:var(--fs-h2); -webkit-line-clamp:6 }
.prod__pic .tile__cat{ font-size:var(--fs-xs) }
.prod h1{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h1);
  line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--ink-strong) }
.prod__meta{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5) }
.chip{ padding:.42em .9em; border-radius:var(--r-pill); background:var(--sur-sunken);
  font-size:var(--fs-sm) }
.chip b{ font-weight:600 }
.prod__d{ margin-top:var(--s-6); color:var(--ink-soft); font-size:var(--fs-lg);
  line-height:var(--lh-body) }
.prod__buy{ margin-top:var(--s-8); padding:clamp(var(--s-5),2vw,var(--s-8));
  border-radius:var(--r-xl); background:var(--sur-raised); box-shadow:var(--sh-3) }
.prod__price{ display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap }
.prod__price b{ font-family:var(--ff-dsp); font-weight:600;
  font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; color:var(--ink-brand) }
.prod__price span{ font-size:var(--fs-base); color:var(--ink-soft) }
.prod__act{ display:flex; gap:var(--s-3); margin-top:var(--s-5); align-items:center }
.prod__act .step-q{ min-width:150px; background:var(--sur-sunken) }
.prod__act .btn{ flex:1 1 auto }
.prod__s{ margin-top:var(--s-8) }
.prod__s h2{ font-family:var(--ff-dsp); font-weight:600; font-size:var(--fs-h3);
  margin-bottom:var(--s-4) }
.prod__s ul{ display:grid; gap:0 }
.prod__s li{ display:flex; justify-content:space-between; gap:var(--s-4);
  font-size:var(--fs-base); color:var(--ink-soft); padding:var(--s-3) 0;
  box-shadow:0 1px 0 var(--edge-soft) }
.prod__s li b{ color:var(--ink-strong); font-weight:600; text-align:right; white-space:nowrap }

/* ── фильтры ──────────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6); align-items:center;
  padding:var(--s-5) 0 var(--s-2) }
.fgroup{ display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap }
.fgroup > b{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--khaki-700) }
.fchip{ padding:.54em 1.1em; border:0; border-radius:var(--r-pill); background:var(--sur-raised);
  font-size:var(--fs-sm); font-weight:600; cursor:pointer; color:var(--ink);
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease), color var(--t) var(--ease) }
.fchip:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); color:var(--ink-brand) }
.fchip.is-on{ background:var(--grad-brand); color:var(--n-0); box-shadow:var(--glow-brand-s) }
.fclear{ border:0; background:none; cursor:pointer; color:var(--ink-brand);
  font-size:var(--fs-sm); font-weight:600; text-decoration:underline;
  text-underline-offset:3px }
.sort{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm);
  color:var(--ink-faint) }
.sort select{ border:0; border-radius:var(--r-pill); padding:.56em 2.2em .56em 1.1em;
  background:var(--sur-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236F6353' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1em center;
  appearance:none; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  box-shadow:var(--sh-1); color:var(--ink) }

/* ── подсказка и нижняя панель ────────────────────────────────── */
.toast{ position:fixed; left:50%; bottom:var(--s-6); z-index:var(--z-over);
  transform:translate(-50%,var(--s-3)); background:var(--sur-deep); color:var(--ink-invert);
  padding:.8em 1.3em; border-radius:var(--r-pill); font-size:var(--fs-base);
  box-shadow:var(--sh-4); opacity:0; pointer-events:none; max-width:min(92vw,440px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease) }
.toast.is-on{ opacity:1; transform:translate(-50%,0) }
body.has-bar .toast{ bottom:calc(84px + env(safe-area-inset-bottom)) }
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar); display:none;
  align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-3) var(--pad) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--sur-raised); box-shadow:0 -1px 0 var(--edge-soft), var(--sh-3) }
.bar span{ flex:1 1 auto; min-width:0; font-size:var(--fs-sm); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bar span b{ font-family:var(--ff-dsp); font-size:var(--fs-md); color:var(--ink-brand) }
.bar .btn{ flex:0 0 auto }

/* ── появление ──────────────────────────────────────────────────
   Лесенка только в декоративных блоках главной. Сетка каталога и цены
   не ждут ничего: они рисуются сразу, без [data-rv]. */
html.js [data-rv]{ opacity:0; transform:translateY(18px) }
html.js [data-rv].is-vis{ opacity:1; transform:none;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease) }

html.js [data-rv] :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *{
  opacity:0; transform:translateY(12px) }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *{
  opacity:1; transform:none;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease) }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *:nth-child(1){ transition-delay:40ms }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *:nth-child(2){ transition-delay:80ms }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *:nth-child(3){ transition-delay:120ms }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *:nth-child(4){ transition-delay:160ms }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *:nth-child(5){ transition-delay:200ms }
html.js [data-rv].is-vis :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *:nth-child(n+6){ transition-delay:240ms }

/* ── адаптив ──────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hero__in{ grid-template-columns:1fr }
  .hero__pics{ grid-template-columns:1.25fr 1fr; padding-bottom:0 }
  .hero__a{ aspect-ratio:4/3 }
  .hero__pics::after{ display:none }
  .duo,.event,.prod{ grid-template-columns:1fr }
  .occ{ grid-template-columns:repeat(4,1fr) }
  .foot__in{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  .hdr{ transition:transform var(--t) var(--ease) }
  .hdr.is-min{ transform:translateY(calc(-1 * var(--barH, 0px))) }
  .search{ order:3; flex-basis:100%; max-width:none }
  .hdr__bar{ flex-wrap:wrap; gap:var(--s-3) }
  .tel span{ display:none }
  .cartbtn__t{ display:none }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) }
  .cats{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
  .sets{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
  .steps{ grid-template-columns:1fr }
  .mosaic{ grid-template-columns:repeat(2,1fr) }
  .facts{ grid-template-columns:repeat(2,1fr) }
  .mosaic .m4,.mosaic .m7{ grid-column:span 2 }
  .bar{ display:flex }
  body.has-bar{ padding-bottom:76px }
  .drawer{ width:100vw }
  .foot__in{ grid-template-columns:1fr }
  .occ{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:560px){
  .hero__cta{ gap:var(--s-4) }
  .hero__cta .btn{ flex:1 1 100% }
  .f-row{ grid-template-columns:1fr }
  .card__b{ padding:var(--s-4) }
  .setc__b{ padding:var(--s-5) }
  .rev{ padding:var(--s-6) }
  .facts{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important;
    transition-duration:.001ms !important }
  html.js [data-rv],
  html.js [data-rv] :is(.sets,.cats,.occ,.steps,.revs,.facts,.mosaic) > *{
    opacity:1 !important; transform:none !important; transition-delay:0s !important }
  .card:hover,.catc:hover,.setc:hover,.step:hover,.fact:hover,.fchip:hover,
  .btn:hover,.cartbtn:hover,.iconbtn:hover{ transform:none }
  .card:hover .card__pic img,.setc:hover .setc__pic img,.catc:hover img,
  .occ a:hover img,.mosaic figure:hover img,.card:hover .tile{ transform:none }
}