/* «Зёрна» — прототип редизайна.
   Идея: все пачки «Зёрна» одинаковые, крафт с пурпурной этикеткой, поэтому различает их вкус.
   Цвет плитки = вкусовая группа сорта, и тот же цвет работает в фильтрах, подборе и корзине. */

:root {
  --bg: #ffffff;
  --surface: #f4f2f1;
  --surface-2: #ebe7e5;
  --ink: #2b1a14;
  --ink-soft: #6b5a52;
  --field-line: rgba(43, 26, 20, 0.18);
  --accent: #23694c;
  --accent-strong: #1a5139;
  --accent-soft: #e3efe8;
  --espresso: #2b1a14;
  --espresso-2: #3a2620;
  --kraft: #e8d7ba;
  --bean: #be3822;
  --ok: #2c7a4b;
  --err: #b8322a;

  --f-choc: #e6cbb6;
  --f-nut: #f4d592;
  --f-berry: #f7b6c7;
  --f-fruit: #f6e37e;
  --f-floral: #d9e5b0;
  --f-spice: #f4b597;
  --f-kraft: #efe4d2;
  --f-tea: #e7e0d4;
  --f-syrup: #f1e7dc;

  --font: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Sofia Sans Extra Condensed', 'Sofia Sans', 'Arial Narrow', sans-serif;

  --s-small: 0.875rem;
  --s-body: 1.0625rem;
  --s-lead: 1.25rem;
  --s-name: 1.625rem;
  --s-head: clamp(2.375rem, 1.3rem + 3.6vw, 4.5rem);
  --s-display: clamp(3.75rem, 1.6rem + 7.2vw, 8.5rem);

  --gut: clamp(16px, 2.8vw, 40px);
  --maxw: 1480px;
  --sec: clamp(88px, 10vw, 168px);
  --hdr-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: light;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--s-body)/1.5 var(--font); letter-spacing: -0.003em;
  font-feature-settings: 'kern', 'liga'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
small { font-size: 0.875rem; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input, textarea, select { caret-color: var(--accent); accent-color: var(--accent); }
html { scrollbar-color: #cbbfb9 transparent; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.num, .tnum { font-variant-numeric: tabular-nums lining-nums; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { top: 12px; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.h-display { font: 800 var(--s-display)/0.9 var(--display); letter-spacing: -0.012em; }
.h-sec { font: 800 var(--s-head)/0.95 var(--display); letter-spacing: -0.01em; }
.h-sub { font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--display); letter-spacing: -0.005em; }
.lead { font-size: var(--s-lead); line-height: 1.45; max-width: 46ch; }
.soft { color: var(--ink-soft); }
.small { font-size: var(--s-small); }

/* ---------- Кнопки и элементы управления ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: var(--s-body); line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s var(--ease), color 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); }
.btn--ghost { background: var(--surface); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: var(--s-small); }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { background: var(--surface-2); color: var(--ink-soft); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-strong); }
  .btn--ink:hover { background: #000; }
  .btn--ghost:hover, .btn--light:hover { background: var(--surface-2); }
  a:hover { text-decoration-color: currentColor; }
}
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(43,26,20,.3); }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.link-btn:hover { text-decoration-color: currentColor; }

.seg { display: inline-flex; padding: 3px; background: var(--surface); border-radius: 999px; gap: 2px; }
.seg__b { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: var(--s-small); font-weight: 600; color: var(--ink-soft); transition: background-color .2s, color .2s; font-variant-numeric: tabular-nums; }
.seg__b.is-on { background: var(--ink); color: #fff; }
.seg__b:not(.is-on):hover { color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--s-small);
  text-decoration: none; transition: background-color .2s, color .2s, transform .15s var(--ease);
}
.chip:active { transform: scale(0.97); }
.chip .sw { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.chip[aria-pressed='true'], .chip.is-on { background: var(--ink); color: #fff; }
.chip .ico { width: 20px; height: 20px; }
.chip .cnt { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip[aria-pressed='true'] .cnt { color: #d9cfca; }
@media (hover: hover) { .chip:not([aria-pressed='true']):not(.is-on):hover { background: var(--surface-2); } }

.tag { display: inline-block; padding: 3px 10px 4px; border-radius: 999px; background: var(--surface); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.tag--sp { background: var(--accent-soft); color: var(--accent-strong); }
.tag--ok { background: #e2f1e7; color: var(--ok); }

.badge { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 13px/20px var(--font); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.badge[hidden] { display: none; }

/* поля форм */
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--s-small); font-weight: 600; }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid transparent; border-radius: 0;
  background: var(--surface); font-size: var(--s-body); transition: border-color .2s, background-color .2s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--ink); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #8d7d75; }
.field.is-err input { border-color: var(--err); background: #fff6f5; }
.field .err { color: var(--err); font-size: var(--s-small); }
.field .hint { color: var(--ink-soft); font-size: var(--s-small); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--s-small); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }

/* ---------- Полоса и шапка ---------- */
.strip { background: var(--espresso); color: #f3e9e4; font-size: var(--s-small); }
.strip__in { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.strip .ico { width: 18px; height: 18px; color: var(--f-nut); }
.strip__gift { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.strip__gift .ico { color: var(--f-berry); }

.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.97); transition: box-shadow .25s ease; } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
.hdr.is-stuck { box-shadow: 0 6px 20px -12px rgba(43, 26, 20, 0.35); } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
.hdr__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--hdr-h); }
.hdr__logo img { width: 156px; height: auto; }
.hdr__nav { display: flex; gap: clamp(14px, 1.6vw, 26px); font-weight: 500; }
.hdr__nav a { padding: 6px 0; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: text-decoration-color .2s ease; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { text-decoration-color: var(--accent); }
.hdr__search { position: relative; flex: 1; max-width: 360px; margin-left: auto; display: flex; align-items: center; }
.hdr__search > .ico { position: absolute; left: 14px; color: var(--ink-soft); pointer-events: none; }
.hdr__search input { width: 100%; height: 44px; padding: 0 16px 0 44px; border: 1.5px solid transparent; border-radius: 999px; background: var(--surface); font-size: var(--s-small); }
.hdr__search input:focus { outline: none; border-color: var(--ink); background: #fff; }
.hdr__acts { display: flex; align-items: center; gap: 6px; }
.hdr__act { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; text-decoration: none; border-radius: 999px; font-size: var(--s-small); white-space: nowrap; }
.hdr__act:hover { background: var(--surface); }
.hdr__act .badge { top: 2px; right: 0; }
.hdr__acc b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hdr__cart [data-sum] { font-weight: 700; font-variant-numeric: tabular-nums; }
.hdr__cart [data-sum]:empty { display: none; }
.bump { animation: bump .5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.15); } 100% { transform: none; } }

.sugg { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 380px; background: #fff; box-shadow: 0 18px 50px -12px rgba(43,26,20,.35); padding: 8px; z-index: 50; } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
.sugg__i { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px; text-decoration: none; }
.sugg__i:hover, .sugg__i:focus { background: var(--surface); outline: none; }
.sugg__i b { display: block; font-weight: 600; font-size: var(--s-small); }
.sugg__i small { display: block; color: var(--ink-soft); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.sugg__t { display: grid; place-items: center; width: 40px; height: 48px; background: var(--fc, var(--f-kraft)); }
.sugg__t img { mix-blend-mode: multiply; height: 42px; width: auto; }
.sugg__p { font-weight: 600; font-size: var(--s-small); font-variant-numeric: tabular-nums; }
.sugg__all { display: block; padding: 12px 8px 6px; font-weight: 600; color: var(--accent); }
.sugg__none { padding: 12px; font-size: var(--s-small); color: var(--ink-soft); }

.tabbar { display: none; }

/* ---------- Цвета вкусов ---------- */
.spec--choc, .sugg__t--choc, [data-fam='choc'] { --fc: var(--f-choc); }
.spec--nut, .sugg__t--nut, [data-fam='nut'] { --fc: var(--f-nut); }
.spec--berry, .sugg__t--berry, [data-fam='berry'] { --fc: var(--f-berry); }
.spec--fruit, .sugg__t--fruit, [data-fam='fruit'] { --fc: var(--f-fruit); }
.spec--floral, .sugg__t--floral, [data-fam='floral'] { --fc: var(--f-floral); }
.spec--spice, .sugg__t--spice, [data-fam='spice'] { --fc: var(--f-spice); }
.spec--kraft, .sugg__t--kraft { --fc: var(--f-kraft); }
.spec--tea, .sugg__t--tea { --fc: var(--f-tea); }
.spec--syrup, .sugg__t--syrup { --fc: var(--f-syrup); }

/* ---------- Плитка-образец ---------- */
.spec { position: relative; display: flex; flex-direction: column; min-width: 0; }
.spec__tile { position: relative; aspect-ratio: 4 / 5; background: var(--fc); overflow: hidden; }
.spec__img { position: absolute; inset: 0; display: grid; place-items: center; }
.spec__img img { height: 84%; width: auto; max-width: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.spec--tea .spec__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: normal; }
.spec--syrup .spec__img img { height: 88%; }
@media (hover: hover) and (pointer: fine) { .spec__tile:hover img { transform: translateY(-2%) rotate(-1.5deg); } }
.spec__fav { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.72); color: var(--ink); transition: background-color .2s, transform .15s var(--ease); }
.spec__fav:active { transform: scale(.9); }
.spec__fav.is-on { color: var(--accent); }
.spec__fav.is-on .ico { fill: currentColor; }
.spec__body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; flex: 1; }
.spec__tags { display: flex; flex-wrap: wrap; gap: 6px; order: 3; }
.spec__name { order: 1; } .spec__meta { order: 2; } .spec__notes { order: 4; } .spec__scales { order: 5; } .spec__fresh { order: 6; } .spec__buy { order: 7; } .spec__cmp { order: 8; }
.spec__name { font: 800 var(--s-name)/1 var(--display); letter-spacing: -0.005em; }
.spec__name a { text-decoration: none; }
.spec__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.spec__meta { font-size: var(--s-small); color: var(--ink-soft); }
.spec__notes { font-size: 1rem; line-height: 1.4; }
.spec__scales { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 2px; }
.dots { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--ink-soft); }
.dots__l { margin-right: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(43, 26, 20, 0.16); }
.dots i.on { background: var(--ink); }
.spec__fresh { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink-soft); }
.spec__fresh .ico { width: 16px; height: 16px; }
.spec__buy { margin-top: auto; padding-top: 10px; display: grid; gap: 10px; }
.spec__w { font-size: var(--s-small); color: var(--ink-soft); }
.spec__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spec__price { font-weight: 700; font-size: var(--s-lead); font-variant-numeric: tabular-nums; position: relative; }
.spec__price[data-save]:not([data-save=''])::after { content: attr(data-save); display: block; font-size: 0.75rem; font-weight: 600; color: var(--ok); }
.btn--add { min-height: 44px; padding: 0 16px 0 14px; font-size: var(--s-small); }
.btn--add .ico { width: 20px; height: 20px; }
.btn--add.is-done { background: var(--ok); }
.spec__cmp { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-soft); cursor: pointer; margin-top: 2px; }
.spec__cmp input { width: 16px; height: 16px; margin: 0; }
.spec--big { grid-column: span 2; }
.spec--big .spec__tile { aspect-ratio: 8 / 5; }
.spec--big .spec__img img { height: 92%; }
.spec--big .spec__name { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); }

.grid-spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 44px 16px; }

/* ---------- Появление ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rv].rv-init { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-rv].rv-init.is-in { opacity: 1; transform: none; }
  .js .shutter { animation: shutter 1.1s var(--ease-io) both; animation-delay: calc(var(--d, 0) * 90ms + 150ms); }
  .js .shutter img { animation: settle 1.5s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 150ms); }
  @keyframes shutter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
}

/* вход элементов на страницах магазина: карточки, строки, заказы */
@media (prefers-reduced-motion: no-preference) {
  .js .grid-spec > .spec, .js .rail > .spec, .js .lines > .line, .js .order, .js .sub, .js .stage, .js .addr__c, .js .co-step, .js .summary, .js .fgroup, .js .pd__info > *, .js .goal, .js .wopt, .js .gopt, .js .hello > *, .js .panel, .js .lp-me > *, .js .lcalc__out > div, .js .optc, .js .slot, .js .acc__nav > a, .js .cat-kinds > a, .js .cat-quick > button, .js .page-h > * { animation: rise .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 55ms); }
  .js .pd__tile { animation: shutter 1.1s var(--ease-io) both; }
  .js .pd__tile img { animation: settle 1.5s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}

/* после первой отрисовки перерисовки страницы не анимируются заново */
.no-anim, .no-anim * { animation: none !important; }

/* ---------- Тост ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 14px;
  max-width: min(560px, calc(100vw - 24px)); padding: 12px 14px 12px 16px; background: var(--ink); color: #fff;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.5); font-size: var(--s-small); /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
  transform: translate(-50%, 140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast img { width: 36px; height: 48px; object-fit: contain; background: var(--f-kraft); mix-blend-mode: normal; }
.toast small { color: #d8ccc6; }
.toast a { color: #fff; }
.toast .btn { background: #fff; color: var(--ink); margin-left: auto; }
.toast [data-undo] { margin-left: auto; color: var(--f-nut); background: none; border: 0; font-weight: 700; text-decoration: underline; }

/* ---------- Главная: первый экран ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--hdr-h) - 40px); }
.hero__text { display: flex; flex-direction: column; padding: clamp(40px, 6vw, 96px) var(--gut) clamp(40px, 4vw, 64px); padding-left: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); }
.hero__text h1 { max-width: 7.5em; }
.hero__sub { margin-top: 28px; font-size: var(--s-lead); line-height: 1.45; max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.hero__legend { margin-top: auto; padding-top: 48px; }
.hero__legend p { font-size: var(--s-small); color: var(--ink-soft); margin-bottom: 12px; }
.hero__legend .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__field { position: relative; background: var(--surface-2); overflow: hidden; }
.mosaic { position: absolute; top: 50%; left: 0; right: -18%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 0 0 clamp(20px, 3vw, 48px); }
.mosaic__t { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--fc); text-decoration: none; overflow: hidden; }
.mosaic__t img { position: absolute; inset: 0; margin: auto; height: 84%; width: auto; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.mosaic__t span { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: 0.8125rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ease); }
.mosaic__t:hover span, .mosaic__t:focus-visible span { opacity: 1; transform: none; }
.mosaic__t:hover img { transform: translateY(-3%); }
.mosaic__t--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mosaic__t--big img { height: 88%; }
.mosaic__gap { aspect-ratio: 3 / 4; }

/* подбор по вкусу */
.compass { background: var(--kraft); padding: var(--sec) 0; }
.compass__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.compass__ctrl { position: sticky; top: calc(var(--hdr-h) + 24px); }
.compass__ctrl > p { margin-top: 18px; max-width: 40ch; }
.compass__q { margin-top: 36px; }
.compass__q h3 { font: 700 var(--s-body)/1.3 var(--font); margin-bottom: 12px; }
.compass__q .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.compass .chip { background: rgba(255, 255, 255, 0.62); }
.compass .chip[aria-pressed='true'] { background: var(--ink); }
.chip--fam { padding-left: 8px; }
.chip--fam .sw { width: 26px; height: 26px; }
.compass__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.compass__res .spec__body { background: transparent; }
.compass__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.compass__head p { font-size: var(--s-lead); font-weight: 600; }
.match { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 12px 6px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }

/* два полюса */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo__p { position: relative; min-height: 92svh; background: var(--fc); overflow: hidden; display: grid; grid-template-rows: minmax(120px, auto) 1fr auto; padding: 36px var(--gut) 28px; }
.duo__top { min-height: 0; }
.duo__img { position: relative; overflow: hidden; margin: 12px calc(-1 * var(--gut)) 24px; min-height: 340px; }
.duo__img img { position: absolute; bottom: 0; left: 50%; height: 128%; width: auto; max-width: none; transform: translateX(-50%) rotate(-4deg); transform-origin: 50% 100%; mix-blend-mode: multiply; pointer-events: none; }
.duo__p:nth-child(2) .duo__img img { transform: translateX(-50%) rotate(4deg); }
.duo__h { max-width: 7em; }
.duo__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.duo__name { font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--display); }
.duo__fact { margin-top: 6px; font-size: var(--s-body); max-width: 34ch; }
.duo__acts { display: flex; gap: 8px; }

/* больше пачка — дешевле чашка */
.grow { padding: var(--sec) 0; }
.grow__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; }
.grow__head { grid-column: 1 / 8; grid-row: 1; align-self: start; padding-bottom: 32px; }
.grow__head p { margin-top: 18px; max-width: 44ch; }
.grow__head .seg { margin-top: 24px; }
.grow__t { display: flex; flex-direction: column; }
.grow__t--0 { grid-column: 1 / 4; grid-row: 2; }
.grow__t--1 { grid-column: 4 / 8; grid-row: 2; }
.grow__t--2 { grid-column: 8 / 13; grid-row: 1 / 3; }
.grow__tile { position: relative; background: var(--fc); display: grid; place-items: center; overflow: hidden; }
.grow__t--0 .grow__tile { height: 30vh; min-height: 220px; }
.grow__t--1 .grow__tile { height: 44vh; min-height: 300px; }
.grow__t--2 .grow__tile { height: 64vh; min-height: 420px; }
.grow__tile img { height: 84%; width: auto; mix-blend-mode: multiply; }
.grow__cap { padding-top: 14px; }
.grow__cap b { display: block; font: 800 var(--s-name)/1 var(--display); }
.grow__cap p { font-size: var(--s-body); margin-top: 4px; }
.grow__cap .per { font-weight: 700; font-variant-numeric: tabular-nums; }
.grow__cap .save { color: var(--ok); font-weight: 600; }

/* меню по вкусам */
.menu { background: var(--surface); padding: var(--sec) 0; }
.menu__nav .chip { flex: none; white-space: nowrap; }
.menu__nav { position: sticky; top: var(--hdr-h); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; margin-top: 28px; background: var(--surface); scrollbar-width: none; }
.menu__nav::-webkit-scrollbar { display: none; }
.menu__cat { padding-top: 104px; }
.menu__cat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 36px; }
.menu__cat-h h3 { display: flex; align-items: center; gap: 16px; font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--display); }
.menu__cat-h h3 i { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--fc); flex: none; }
.menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; list-style: none; }
.menu__i { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.menu__ph { display: grid; place-items: center; width: 64px; height: 80px; background: var(--fc); }
.menu__ph img { height: 70px; width: auto; mix-blend-mode: multiply; }
.menu__t { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.menu__t a { font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.menu__t a:hover { text-decoration: underline; }
.menu__t span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__i p { font-size: 0.9375rem; color: var(--ink-soft); max-width: 42ch; margin-top: 4px; }
.menu__i .fresh { color: var(--accent-strong); font-size: var(--s-small); }
.menu__more { margin-top: 28px; }

/* подписка и бонусы */
.club { background: var(--espresso); color: #f6eee9; padding: var(--sec) 0; }
.club a:not(.btn) { color: #fff; }
.club__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 112px clamp(40px, 6vw, 112px); }
.club .soft { color: #cdbdb4; }
.club__sub p { margin-top: 18px; max-width: 42ch; }
.club__plan { margin-top: 32px; background: var(--espresso-2); padding: 24px; }
.club__plan h3 { font: 700 var(--s-body)/1.3 var(--font); margin-bottom: 12px; }
.club__plan .seg { background: rgba(255,255,255,.08); }
.club__plan .seg__b { color: #cdbdb4; }
.club__plan .seg__b.is-on { background: #fff; color: var(--ink); }
.club__calc { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.club__calc b { font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.club__calc s { color: #a8968c; }
.roast { margin-top: 32px; }
.roast__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.roast__s { height: 64px; background: var(--c); position: relative; }
.roast__s span { position: absolute; left: 10px; bottom: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--t, #2b1a14); }
.roast__lv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 14px; }
.roast__lv div b { display: block; font: 800 1.5rem/1 var(--display); }
.roast__lv div p { font-size: var(--s-small); color: #cdbdb4; margin-top: 4px; }

/* о производстве */
.about { padding: var(--sec) 0; }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px clamp(32px, 6vw, 112px); align-items: start; }
.about__lead { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.4; max-width: 34ch; margin-top: 24px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; list-style: none; }
.facts li b { display: block; font: 800 clamp(2.5rem, 1.8rem + 2.4vw, 4rem)/0.95 var(--display); font-variant-numeric: lining-nums; }
.facts li p { margin-top: 10px; max-width: 34ch; }
.about__fig { margin: 40px 0 0; }
.about__vid { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--espresso); }
.about__fig figcaption { margin-top: 10px; font-size: var(--s-small); color: var(--ink-soft); }

/* частые вопросы — карточки с вкладками */
.faq { padding: var(--sec) 0; }
.faq__head { max-width: 900px; margin: 0 auto 40px; }
.cards { max-width: 900px; margin: 0 auto; }
.fcard { position: relative; margin-top: -8px; }
.fcard__tab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 46px 28px 22px; border: 0; text-align: left;
  background: var(--fc); clip-path: polygon(calc(var(--i) * 13%) 0, calc(var(--i) * 13% + 190px) 0, calc(var(--i) * 13% + 214px) 30px, 100% 30px, 100% 100%, 0 100%, 0 30px, calc(var(--i) * 13% - 0px) 30px);
  font: 600 var(--s-lead)/1.3 var(--font);
}
.fcard__tab small { position: absolute; top: 6px; left: calc(var(--i) * 13% + 18px); font-size: var(--s-small); font-weight: 700; }
.fcard__tab .ico { transition: transform .3s var(--ease); }
.fcard__tab[aria-expanded='true'] .ico { transform: rotate(45deg); }
.fcard__body { background: var(--fc); padding: 0 28px 32px; }
.fcard__body p { max-width: 62ch; }
.fcard__body p + p { margin-top: 10px; }
.fcard__body ul { margin: 10px 0 0 20px; max-width: 62ch; }
.fcard__body li + li { margin-top: 6px; }

/* самовывоз и связь */
.visit { background: var(--accent); color: #fff; padding: 48px 0 var(--sec); overflow: hidden; }
.visit a:not(.btn) { color: #fff; }
.marq { display: flex; gap: 8px; width: max-content; animation: marq 60s linear infinite; }
.marq__i { height: 150px; width: 112px; display: grid; place-items: center; background: var(--fc); flex: none; }
.marq__i img { height: 132px; width: auto; mix-blend-mode: multiply; }
@keyframes marq { to { transform: translateX(-50%); } }
.visit:hover .marq { animation-play-state: paused; }
.visit__h { margin-top: 72px; }
.visit__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 40px; }
.visit__c { background: rgba(255,255,255,.12); padding: 24px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; }
.visit__c b { font: 800 var(--s-name)/1 var(--display); }
.visit__c p { color: #fbe6f7; }
.visit__c .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Подвал ---------- */
.ftr { padding: 96px 0 32px; }
.ftr__mark { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 200px; max-height: 360px; }
.ftr__b { flex: 1; display: grid; place-items: center; color: #fff; font: 800 clamp(2.5rem, 1rem + 6vw, 8.5rem)/1 var(--display); background: var(--fc); min-width: 0; overflow: hidden; }
.ftr__b--choc { --fc: #8d5a3b; } .ftr__b--nut { --fc: #c98f2e; } .ftr__b--berry { --fc: #c23a66; } .ftr__b--fruit { --fc: #d9a316; } .ftr__b--floral { --fc: #6f8a3a; } .ftr__b--spice { --fc: #c85a2c; }
.ftr__b--bean { --fc: var(--bean); }
.ftr__b--bean .ico { width: 58%; height: 58%; stroke-width: 1.4; }
.ftr__grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr; gap: 32px; margin-top: 56px; }
.ftr__grid h2 { font: 700 var(--s-body)/1.3 var(--font); margin-bottom: 14px; }
.ftr__grid nav a { display: block; padding: 4px 0; font-size: 0.9375rem; text-decoration: none; }
.ftr__grid nav a:hover { text-decoration: underline; }
.ftr__contacts p { font-size: 0.9375rem; }
.ftr__contacts p + p { margin-top: 12px; }
.ftr__contacts small { color: var(--ink-soft); }
.ftr__last { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; font-size: var(--s-small); color: var(--ink-soft); }

/* ---------- Общие заголовки страниц ---------- */
.page-h { padding-top: clamp(28px, 3.5vw, 56px); padding-bottom: clamp(20px, 2.5vw, 36px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--s-small); color: var(--ink-soft); margin-bottom: 18px; }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ---------- Каталог ---------- */
.cat-kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-top: 24px; }
.cat-kinds::-webkit-scrollbar { display: none; }
.cat-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cat-kinds .chip, .cat-quick .chip { flex: none; white-space: nowrap; }
.cat { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); padding-bottom: var(--sec); }
.filters { position: sticky; top: calc(var(--hdr-h) + 16px); max-height: calc(100vh - var(--hdr-h) - 32px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.fgroup { padding: 18px 0; }
.fgroup + .fgroup { border-top: 0; background: none; }
.fgroup h3 { display: flex; justify-content: space-between; align-items: center; font: 700 var(--s-body)/1.3 var(--font); margin-bottom: 12px; }
.fgroup .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fgroup .chip { min-height: 36px; padding: 0 12px; }
.fgroup .chip--fam { padding-left: 6px; }
.fgroup .chip--fam .sw { width: 22px; height: 22px; }
.flist { display: grid; gap: 2px; list-style: none; }
.flist label { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; cursor: pointer; font-size: 0.9375rem; }
.flist label:hover { background: var(--surface); }
.flist input { width: 18px; height: 18px; margin: 0; flex: none; }
.flist .cnt { margin-left: auto; color: var(--ink-soft); font-size: var(--s-small); font-variant-numeric: tabular-nums; }
.flist label.is-zero { color: #a99a92; }
.range { display: grid; gap: 8px; }
.range input[type='range'] { width: 100%; }
.range output { font-weight: 700; font-variant-numeric: tabular-nums; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; cursor: pointer; font-size: 0.9375rem; }
.toggle input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--surface-2); position: relative; margin: 0; flex: none; transition: background-color .2s; cursor: pointer; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.toggle input:checked { background: var(--ink); }
.toggle input:checked::after { transform: translateX(18px); }
.cat__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cat__count { font-weight: 600; }
.cat__sort { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--s-small); }
.cat__sort select { min-height: 42px; padding: 0 36px 0 14px; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1a14' stroke-width='1.8'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; appearance: none; font-weight: 600; }
.cat__fbtn { display: none; }
.active-f { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.active-f:empty { display: none; }
.active-f .chip { background: var(--ink); color: #fff; padding-right: 10px; }
.active-f .chip .ico { width: 16px; height: 16px; }
.active-f .link-btn { font-size: var(--s-small); margin-left: 6px; }
.empty { padding: 64px 0; max-width: 520px; }
.empty h2 { font: 800 var(--s-name)/1.1 var(--display); }
.empty p { margin-top: 10px; }
.empty .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sheet-close, .sheet-foot { display: none; }

/* сравнение */
.cmpbar { position: fixed; left: 50%; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; background: var(--ink); color: #fff; transform: translate(-50%, 160%); transition: transform .45s var(--ease); box-shadow: 0 20px 50px -16px rgba(0,0,0,.5); } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
.cmpbar.is-on { transform: translate(-50%, 0); }
.cmpbar:not(.is-on) { visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
.cmpbar__th { display: flex; gap: 6px; }
.cmpbar__th span { width: 36px; height: 44px; display: grid; place-items: center; background: var(--fc); }
.cmpbar__th img { height: 38px; width: auto; mix-blend-mode: multiply; }
.cmpbar .btn { background: #fff; color: var(--ink); }
.cmpbar .link-btn { color: #e8d9d2; }
dialog { border: 0; padding: 0; max-width: min(1100px, calc(100vw - 24px)); width: 100%; max-height: calc(100svh - 48px); background: #fff; color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
dialog::backdrop { background: rgba(43, 26, 20, 0.55); }
dialog[open] { animation: dlg .4s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(24px); } }
.dlg__h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; position: sticky; top: 0; background: #fff; z-index: 2; }
.dlg__h h2 { font: 800 var(--s-name)/1 var(--display); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--field-line); }
.cmp th { width: 160px; font-weight: 600; color: var(--ink-soft); }
.cmp td .spec__tile { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.cmp td .spec__name { font-size: 1.5rem; }

/* ---------- Карточка товара ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding-bottom: 72px; }
.pd__media { position: sticky; top: calc(var(--hdr-h) + 16px); }
.pd__tile { position: relative; aspect-ratio: 1 / 1.05; background: var(--fc); overflow: hidden; display: grid; place-items: center; }
.pd__tile img { position: absolute; inset: 0; margin: auto; height: 86%; width: auto; max-width: 86%; object-fit: contain; mix-blend-mode: multiply; }
.spec--tea .pd__tile img, .pd__tile.is-tea img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.pd__tile .spec__fav { top: 16px; right: 16px; }
.pd__notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pd__notes .chip { background: var(--surface); cursor: default; }
.pd__title { font: 800 clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem)/0.92 var(--display); letter-spacing: -0.01em; margin-top: 10px; }
.pd__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; color: var(--ink-soft); }
.pd__descr { margin-top: 18px; font-size: var(--s-lead); line-height: 1.45; max-width: 40ch; }
.pd__fresh { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; }
.pd__fresh .ico { color: var(--accent); }
.pd__fresh small { font-weight: 400; color: var(--ink-soft); }
.opt { margin-top: 28px; }
.opt__h { font: 700 var(--s-body)/1.3 var(--font); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; }
.opt__h small { font-weight: 400; color: var(--ink-soft); font-size: var(--s-small); }
.wopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wopt { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 2px solid transparent; background: var(--surface); text-align: left; transition: border-color .2s, background-color .2s; }
.wopt b { font-weight: 700; font-size: var(--s-lead); }
.wopt span { font-size: var(--s-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wopt em { font-style: normal; font-size: 0.8125rem; font-weight: 700; color: var(--ok); }
.wopt[aria-pressed='true'] { border-color: var(--ink); background: #fff; }
.gopts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gopt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 2px solid transparent; background: var(--surface); text-align: center; font-size: 0.8125rem; line-height: 1.25; transition: border-color .2s, background-color .2s; }
.gopt b { font-size: var(--s-small); }
.gopt .ico { width: 26px; height: 26px; }
.gopt .gdot { display: flex; gap: 3px; height: 26px; align-items: center; }
.gopt .gdot i { border-radius: 50%; background: var(--ink); }
.gopt[aria-pressed='true'] { border-color: var(--ink); background: #fff; }
.mode { display: grid; gap: 8px; }
.mode label { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); cursor: pointer; border: 2px solid transparent; }
.mode label:has(input:checked) { border-color: var(--ink); background: #fff; }
.mode input { width: 20px; height: 20px; margin: 0; }
.mode b { display: block; }
.mode small { color: var(--ink-soft); }
.mode .pr { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.mode .pr s { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--s-small); }
.mode .every { display: none; margin-top: 10px; }
.mode label:has(input:checked) .every { display: flex; }
.buy { display: flex; gap: 10px; margin-top: 24px; align-items: stretch; }
.qty { display: inline-flex; align-items: center; background: var(--surface); border-radius: 999px; padding: 4px; }
.qty button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; }
.qty button:hover { background: #fff; }
.qty input { width: 36px; border: 0; background: transparent; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy .btn { flex: 1; min-height: 56px; font-size: var(--s-lead); }
.buy__total { font-variant-numeric: tabular-nums; }
.perks { display: grid; gap: 12px; margin-top: 24px; padding: 20px; background: var(--surface); font-size: 0.9375rem; }
.perks div { display: flex; gap: 12px; align-items: flex-start; }
.perks .ico { color: var(--accent); margin-top: 1px; }
.perks b { font-weight: 700; }
.pd-sec { padding: 72px 0; }
.pd-sec + .pd-sec { padding-top: 24px; }
.pd-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); }
.pd-text p { max-width: 64ch; }
.pd-text p + p { margin-top: 14px; }
.pd-text ul { margin: 14px 0 0 20px; max-width: 64ch; }
.profile { display: grid; gap: 22px; margin-top: 28px; max-width: 520px; }
.bar { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.bar > span { font-weight: 600; }
.bar__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bar__track i { height: 14px; background: var(--surface-2); }
.bar__track i.on { background: var(--ink); }
.bar small { grid-column: 2; color: var(--ink-soft); font-size: var(--s-small); margin-top: -10px; }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { text-align: left; padding: 12px 0; border-top: 1px solid var(--field-line); vertical-align: top; }
.specs th { width: 42%; font-weight: 400; color: var(--ink-soft); padding-right: 16px; }
.methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.brew { background: var(--kraft); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.brew__m { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.brew .chip { background: rgba(255,255,255,.6); }
.brew .chip[aria-pressed='true'] { background: var(--ink); }
.brew__cups { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.brew__out { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; }
.brew__out div { background: rgba(255,255,255,.55); padding: 18px; }
.brew__out b { display: block; font: 800 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.brew__out span { font-size: var(--s-small); color: var(--ink-soft); }
.brew__steps { grid-column: 1 / -1; margin: 4px 0 0 20px; display: grid; gap: 6px; max-width: 70ch; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.sticky-buy { display: none; }

/* отзывы под товаром */
.pd__rating { margin-top: 12px; }
.pd__rating a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.pd__rating a:hover { text-decoration: underline; }
.pd__rating .ico { color: var(--accent); }
.rstars { display: inline-flex; gap: 1px; }
.rstar { width: 18px; height: 18px; fill: none; stroke: #c9b8ae; stroke-width: 1.6; }
.rstar.on { fill: #e2a12b; stroke: #e2a12b; }
.rev { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.rev__side { position: sticky; top: calc(var(--hdr-h) + 24px); }
.rev__n { color: var(--ink-soft); }
.rev__sum { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.rev__sum b { font: 800 4rem/0.9 var(--display); }
.rev__sum .rstar { width: 24px; height: 24px; }
.rev__dist { list-style: none; display: grid; gap: 6px; margin-top: 20px; max-width: 340px; }
.rev__dist li { display: grid; grid-template-columns: 16px 1fr 24px; gap: 10px; align-items: center; font-size: var(--s-small); font-variant-numeric: tabular-nums; }
.rev__dist i { height: 8px; background: var(--surface-2); overflow: hidden; }
.rev__dist i b { display: block; height: 100%; background: #e2a12b; transform-origin: 0 50%; }
.rev__empty { margin-top: 16px; max-width: 36ch; }
.rev__form { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); background: var(--surface); }
.rev__form h3 { font: 800 1.75rem/1 var(--display); }
.rev__stars { border: 0; padding: 0; margin: 0; min-width: 0; }
.rev__stars legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.rev__pick { display: inline-flex; gap: 4px; }
.rev__pick label { cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; background: #fff; }
.rev__pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rev__pick .rstar { width: 30px; height: 30px; transition: transform .15s var(--ease); }
.rev__pick label:hover .rstar { transform: scale(1.12); }
.rev__pick:hover .rstar { fill: none; stroke: #c9b8ae; }
.rev__pick:hover label:has(~ label:hover) .rstar, .rev__pick label:hover .rstar { fill: #e2a12b; stroke: #e2a12b; }
.rev__pick input:focus-visible + .sr + .rstar { outline: 3px solid var(--accent); outline-offset: 4px; }
.rev__hint { display: block; margin-top: 8px; color: var(--ink-soft); }
.rev__stars.is-err .rev__pick label { background: #fff6f5; outline: 1.5px solid var(--err); }
.rev__stars .err { display: block; color: var(--err); font-size: var(--s-small); margin-top: 6px; }
.rev__form .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rev__form .chip { background: #fff; }
.rev__form .chip[aria-pressed='true'] { background: var(--ink); }
.rev__form .field textarea, .rev__form .field input { background: #fff; }
.rev__note { align-self: end; font-size: var(--s-small); color: var(--ink-soft); padding-bottom: 14px; }
.rev__form .btn { justify-self: start; }
.rev__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 32px 0 8px; }
.rev__bar p { font-weight: 700; }
.rev__list { list-style: none; display: grid; gap: 4px; }
.rev__i { padding: 22px 0; display: grid; gap: 10px; }
.rev__i + .rev__i { background: none; }
.rev__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rev__h time { margin-left: auto; color: var(--ink-soft); font-size: var(--s-small); }
.rev__m { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: var(--s-small); }
.rev__m .ico { width: 18px; height: 18px; }
.rev__t { max-width: 70ch; white-space: pre-line; }
.rev__acts { display: flex; gap: 16px; align-items: center; }
.rev__acts .link-btn[aria-pressed='true'] { color: var(--ok); }
@media (max-width: 1000px) { .rev { grid-template-columns: minmax(0, 1fr); } .rev__side { position: static; } }

/* ---------- Корзина ---------- */
.cart-l { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: var(--sec); }
.goals { display: grid; gap: 10px; margin-bottom: 28px; }
.goal { padding: 16px 18px; background: var(--surface); }
.goal p { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
.goal p b { font-weight: 700; }
.goal__track { height: 8px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.goal__track i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.goal.is-done { background: #e6f2ea; }
.goal.is-done .goal__track i { background: var(--ok); }
.lines { list-style: none; display: grid; gap: 4px; }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 44px; gap: 20px; align-items: center; padding: 16px 0; }
.line + .line { margin-top: 4px; }
.line { background: var(--surface); padding: 16px; }
.line__ph { width: 96px; height: 116px; display: grid; place-items: center; background: var(--fc); }
.line__ph img { height: 100px; width: auto; mix-blend-mode: multiply; }
.line__ph.is-tea img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.line__name { font: 800 1.5rem/1 var(--display); text-decoration: none; }
.line__name:hover { text-decoration: underline; }
.line__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.line__opts select { min-height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1a14' stroke-width='1.8'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; appearance: none; font-size: var(--s-small); font-weight: 600; }
.line__sum { font-weight: 700; font-size: var(--s-lead); font-variant-numeric: tabular-nums; text-align: right; min-width: 100px; }
.line__sum small { display: block; font-weight: 400; font-size: var(--s-small); color: var(--ink-soft); }
.summary { position: sticky; top: calc(var(--hdr-h) + 16px); background: var(--surface); padding: 28px; display: grid; gap: 14px; }
.summary h2 { font: 800 var(--s-name)/1 var(--display); }
.summary dl { display: grid; gap: 10px; margin: 0; }
.summary dl div { display: flex; justify-content: space-between; gap: 16px; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.summary .total { padding-top: 16px; margin-top: 6px; }
.summary .total dt { color: var(--ink); font-weight: 700; }
.summary .total dd { font: 800 2rem/1 var(--display); }
.summary .note { font-size: var(--s-small); color: var(--ink-soft); }
.promo { display: flex; gap: 8px; }
.promo input { flex: 1; min-height: 46px; padding: 0 14px; border: 1.5px solid transparent; background: #fff; }
.promo input:focus { outline: none; border-color: var(--ink); }
.bonus-use { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; }
.bonus-use b { display: block; }
.bonus-use small { color: var(--ink-soft); }
.upsell { margin-top: 56px; }
.upsell h2 { margin-bottom: 24px; }
.cart-empty { padding-block: 48px var(--sec); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cart-empty p { margin-top: 16px; max-width: 40ch; }
.cart-empty .hero__cta { margin-top: 28px; }

/* ---------- Оформление ---------- */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: var(--sec); }
.co-step { padding: 32px 0; }
.co-step + .co-step { padding-top: 48px; }
.co-step h2 { font: 800 clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem)/1 var(--display); margin-bottom: 20px; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-grid .full { grid-column: 1 / -1; }
.opts { display: grid; gap: 8px; }
.optc { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: start; padding: 16px 18px; background: var(--surface); border: 2px solid transparent; cursor: pointer; transition: border-color .2s, background-color .2s; }
.optc:has(input:checked) { border-color: var(--ink); background: #fff; }
.optc input { width: 20px; height: 20px; margin: 2px 0 0; }
.optc b { display: block; font-weight: 700; }
.optc small { display: block; color: var(--ink-soft); font-size: 0.9375rem; margin-top: 2px; }
.optc .pr { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.optc .ico { width: 26px; height: 26px; }
.zone { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; margin-top: 16px; padding: 20px; background: var(--surface); }
.zone svg { width: 100%; height: auto; }
.zone p { font-size: 0.9375rem; }
.slots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.slot { flex: none; min-width: 112px; padding: 12px 14px; background: var(--surface); border: 2px solid transparent; text-align: left; }
.slot b { display: block; font-weight: 700; }
.slot small { color: var(--ink-soft); font-size: var(--s-small); }
.slot[aria-pressed='true'] { border-color: var(--ink); background: #fff; }
.slot[disabled] { opacity: .45; cursor: not-allowed; }
.co-items { display: grid; gap: 12px; list-style: none; max-height: 340px; overflow: auto; }
.co-items li { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; font-size: 0.9375rem; }
.co-items .line__ph { width: 52px; height: 64px; }
.co-items .line__ph img { height: 56px; }
.co-items small { display: block; color: var(--ink-soft); font-size: var(--s-small); }
.co-items span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.done { padding-block: clamp(40px, 6vw, 96px) var(--sec); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.done__no { font-variant-numeric: tabular-nums; }
.done__card { background: var(--surface); padding: 28px; display: grid; gap: 14px; }
.done__steps { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.done__steps li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.done__steps .ico { color: var(--accent); }

/* ---------- Кабинет ---------- */
.acc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: var(--sec); }
.acc__nav { position: sticky; top: calc(var(--hdr-h) + 16px); display: grid; gap: 2px; }
.acc__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; font-weight: 500; }
.acc__nav a:hover { background: var(--surface); }
.acc__nav a[aria-current='page'] { background: var(--ink); color: #fff; }
.acc__nav .cnt { margin-left: auto; font-size: var(--s-small); opacity: .7; font-variant-numeric: tabular-nums; }
.acc__nav .acc__sp { display: block; height: 12px; }
.acc__nav .link-btn { padding: 12px 14px; text-align: left; color: var(--ink-soft); font-weight: 500; }
.acc-pane[hidden] { display: none; }
.acc-pane > h2 { font: 800 var(--s-head)/0.95 var(--display); margin-bottom: 28px; }
.hello { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.hello__lv { background: var(--espresso); color: #fff; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.hello__lv .soft { color: #cdbdb4; }
.hello__lv b.big { font: 800 clamp(3rem, 2rem + 3vw, 4.5rem)/0.9 var(--display); font-variant-numeric: tabular-nums; }
.lvbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: auto; }
.lvbar i { height: 10px; background: var(--c); opacity: .35; position: relative; }
.lvbar i.on { opacity: 1; }
.lvbar i.cur::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--p); background: var(--c); opacity: 1; }
.lvbar i.cur { opacity: .35; }
.lvbar i.cur { background: color-mix(in srgb, var(--c) 35%, transparent); opacity: 1; }
.hello__next { background: var(--f-berry); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.hello__next b { font: 800 var(--s-name)/1 var(--display); }
.panel { background: var(--surface); padding: 24px; }
.panel + .panel { margin-top: 8px; }
.panel h3 { font: 800 1.5rem/1 var(--display); margin-bottom: 12px; }
.order { background: var(--surface); padding: 22px 24px; }
.order + .order { margin-top: 8px; }
.order__h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.order__h b { font: 800 1.5rem/1 var(--display); }
.order__th { display: flex; gap: 6px; margin: 16px 0; flex-wrap: wrap; }
.order__th a { width: 56px; height: 68px; display: grid; place-items: center; background: var(--fc); }
.order__th img { height: 60px; width: auto; mix-blend-mode: multiply; }
.order__th a.is-tea img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.order__list { font-size: 1rem; }
.order__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.order__acts .sum { margin-left: auto; font-weight: 700; font-size: var(--s-lead); font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--s-small); font-weight: 600; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status--way::before { background: #d39b1c; }
.status--new::before { background: var(--accent); }
.sub { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; background: var(--surface); padding: 24px; }
.sub + .sub { margin-top: 8px; }
.sub__ph { aspect-ratio: 4 / 5; background: var(--fc); display: grid; place-items: center; }
.sub__ph img { height: 86%; width: auto; mix-blend-mode: multiply; }
.sub__next { display: flex; align-items: center; gap: 10px; font-size: var(--s-lead); font-weight: 700; margin-top: 12px; }
.sub__next .ico { color: var(--accent); }
.sub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 18px; }
.sub__grid label { display: grid; gap: 6px; font-size: var(--s-small); font-weight: 600; }
.sub__grid select { min-height: 44px; padding: 0 12px; border: 0; background: #fff; font-weight: 500; }
.sub__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sub.is-paused .sub__ph { filter: grayscale(.8); opacity: .7; }
.calc { margin-top: 8px; background: var(--kraft); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.calc output { font: 800 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--display); }
.addr { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.addr__c { background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.addr__c b { font: 800 1.5rem/1 var(--display); }
.addr__c .acts { margin-top: auto; display: flex; gap: 14px; }
.addr__new { border: 2px dashed var(--field-line); background: transparent; align-items: center; justify-content: center; color: var(--ink-soft); font-weight: 600; }
.prefs { display: grid; gap: 24px; max-width: 720px; }
.prefs .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-note { margin-top: 32px; font-size: var(--s-small); color: var(--ink-soft); }

/* ---------- Бонусная программа ---------- */
.lp-hero { background: var(--espresso); color: #f6eee9; padding: clamp(48px, 7vw, 120px) 0 0; overflow: hidden; }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.lp-hero p.lead { margin-top: 24px; color: #e6d8d0; }
.lp-me { background: var(--espresso-2); padding: 28px; display: grid; gap: 10px; margin-bottom: clamp(32px, 4vw, 64px); }
.lp-me .soft { color: #cdbdb4; }
.lp-me b.big { font: 800 clamp(3rem, 2rem + 3vw, 4.75rem)/0.9 var(--display); font-variant-numeric: tabular-nums; }
.lp-me .btn { justify-self: start; margin-top: 8px; }
.stages { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; margin-top: clamp(40px, 5vw, 72px); }
.stage { background: var(--c); color: var(--t); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.stage:nth-child(1) { grid-column: span 3; min-height: 440px; }
.stage:nth-child(2) { grid-column: span 3; min-height: 500px; }
.stage:nth-child(3) { grid-column: span 3; min-height: 560px; }
.stage:nth-child(4) { grid-column: span 3; min-height: 620px; }
.stage h3 { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/0.95 var(--display); }
.stage__ph { margin: -24px -22px 8px; aspect-ratio: 16 / 10; overflow: hidden; }
.stage__ph img { width: 100%; height: 100%; object-fit: cover; }
.stages__credit { grid-column: 1 / -1; font-size: var(--s-small); color: #cdbdb4; padding: 14px 0 28px; }
.stages__credit a { color: #e6d8d0; }
.stage .rate { font: 800 clamp(3rem, 2.2rem + 3vw, 5rem)/0.85 var(--display); }
.stage .from { font-size: 1rem; font-weight: 600; }
.stage ul { list-style: none; display: grid; gap: 6px; font-size: 1rem; margin-top: auto; }
.stage.is-me { outline: 4px solid #fff; outline-offset: -4px; }
.stage .me { align-self: flex-start; background: #fff; color: var(--ink); padding: 4px 12px 5px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
.ways { padding: var(--sec) 0; }
.ways__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); }
.ways ul { list-style: none; margin-top: 28px; display: grid; gap: 0; }
.ways li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 18px 0; align-items: baseline; }
.ways li:nth-child(odd) { background: var(--surface); }
.ways li { padding-left: 16px; padding-right: 16px; }
.ways li b { font-weight: 700; }
.ways li p { font-size: 1rem; margin-top: 2px; }
.ways li span { font: 800 1.75rem/1 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lcalc { background: var(--f-nut); padding: var(--sec) 0; }
.lcalc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.lcalc input[type='range'] { width: 100%; margin-top: 24px; }
.lcalc .val { font: 800 clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem)/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 12px; }
.lcalc__out { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lcalc__out div { background: rgba(255,255,255,.55); padding: 18px; display: flex; flex-direction: column; gap: 6px; min-height: 160px; }
.lcalc__out div.is-cur { background: var(--ink); color: #fff; }
.lcalc__out b { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.lcalc__out .lv { font: 800 1.375rem/1.05 var(--display); }
.lcalc__out b { margin-top: auto; }
.lcalc__out small { font-size: 1rem; }
.hist { padding: var(--sec) 0 0; }
.hist table { width: 100%; border-collapse: collapse; margin-top: 28px; }
.hist th, .hist td { text-align: left; padding: 14px 12px 14px 0; border-top: 1px solid var(--field-line); }
.hist th { font-weight: 600; color: var(--ink-soft); font-size: var(--s-small); }
.hist td.amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist td.amt.plus { color: var(--ok); }
.draft { margin-top: 20px; padding: 14px 18px; background: var(--accent-soft); color: var(--accent-strong); font-size: 1rem; max-width: 70ch; }

/* ---------- Планшет ---------- */
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__acc span { display: none; }
  .strip__gift { display: none; }
  .compass__res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compass__res .spec:nth-child(n + 4) { display: none; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__field { height: 72svh; min-height: 480px; }
  .mosaic { inset: 0 -30% 0 0; }
  .compass__in, .about__grid, .club__grid, .ways__grid, .lcalc__grid, .lp-hero__grid, .pd-cols { grid-template-columns: minmax(0, 1fr); }
  .compass__ctrl { position: static; }
  .cat { grid-template-columns: minmax(0, 1fr); }
  .filters { position: fixed; inset: auto 0 0 0; top: 10svh; z-index: 80; max-height: none; background: #fff; padding: 0 20px; transform: translateY(105%); transition: transform .45s var(--ease); box-shadow: 0 -20px 60px -10px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
  .filters.is-open { transform: none; }
  .filters__scroll { overflow-y: auto; flex: 1; }
  .sheet-close { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 8px; }
  .sheet-close h2 { font: 800 var(--s-name)/1 var(--display); }
  .sheet-foot { display: flex; gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .sheet-foot .btn { flex: 1; }
  .cat__fbtn { display: inline-flex; }
  .pd { grid-template-columns: minmax(0, 1fr); }
  .pd__media { position: static; }
  .pd__tile { aspect-ratio: 16 / 10; }
  .pd__notes { display: none; }
  .brew__cups { margin-bottom: 56px; }
  .cart-l, .co { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .acc { grid-template-columns: minmax(0, 1fr); }
  .acc__nav { position: static; display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .acc__nav a { flex: none; background: var(--surface); border-radius: 999px; padding: 10px 16px; }
  .acc__nav .acc__sp, .acc__nav .link-btn { display: none; }
  .stages .stage { grid-column: span 6 !important; min-height: 280px !important; }
  .lcalc__out { grid-template-columns: repeat(2, 1fr); }
  .done, .cart-empty { grid-template-columns: minmax(0, 1fr); }
  .brew { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Телефон ---------- */
@media (max-width: 720px) {
  :root { --hdr-h: 60px; --s-body: 1rem; --s-lead: 1.125rem; --s-name: 1.5rem; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .strip__in { min-height: 36px; font-size: 0.8125rem; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
  .hdr__in { gap: 10px; }
  .hdr__logo img { width: 128px; }
  .hdr__search { max-width: none; }
  .hdr__search input { height: 40px; }
  .hdr__acts .hdr__act:not(.hdr__cart) { display: none; }
  .hdr__cart [data-sum] { display: none; }
  .sugg { position: fixed; left: 8px; right: 8px; top: calc(var(--hdr-h) + 40px); min-width: 0; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; box-shadow: 0 -8px 24px -12px rgba(43,26,20,.3); padding-bottom: env(safe-area-inset-bottom); } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--ink-soft); }
  .tabbar a[aria-current] { color: var(--accent); }
  .tabbar .badge { top: 2px; right: calc(50% - 22px); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cmpbar { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .hero__text { padding-top: 32px; }
  .hero__text h1 { font-size: 13.4vw; }
  .hero__sub { margin-top: 18px; }
  .hero__legend { padding-top: 32px; }
  .hero__field { height: auto; min-height: 0; }
  .mosaic { position: relative; inset: auto; transform: none; grid-template-columns: 1fr 1fr; padding: 20px; gap: 10px; }
  .mosaic__gap { display: none; }
  .mosaic__t:nth-child(even) { transform: translateY(40px); }
  .mosaic__t--big { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; transform: none !important; }
  .mosaic__t:nth-child(n + 8) { display: none; }
  .mosaic { padding-bottom: 60px; }
  .compass__res { grid-template-columns: 1fr 1fr; gap: 10px; }
  .compass__res .spec:nth-child(n + 4) { display: flex; }
  .compass__res .spec:nth-child(2) { grid-column: 1 / -1; }
  .duo { grid-template-columns: 1fr; }
  .duo__p { min-height: 0; grid-template-rows: auto auto auto; padding-top: 28px; }
  .duo__p:nth-child(2) .duo__top { display: none; }
  .duo__img { min-height: 0; height: 62vw; max-height: 420px; }
  .duo__row { flex-direction: column; align-items: stretch; }
  .duo__acts .btn { flex: 1; }
  .grow__grid { grid-template-columns: 1fr; gap: 28px; }
  .grow__head, .grow__t--0, .grow__t--1, .grow__t--2 { grid-column: 1; grid-row: auto; }
  .grow__t--0 .grow__tile { height: 34vw; min-height: 180px; }
  .grow__t--1 .grow__tile { height: 46vw; min-height: 240px; }
  .grow__t--2 .grow__tile { height: 62vw; min-height: 300px; }
  .menu__list { grid-template-columns: 1fr; gap: 24px; }
  .menu__i { grid-template-columns: 52px 1fr; gap: 14px; }
  .menu__ph { width: 52px; height: 66px; }
  .menu__ph img { height: 58px; }
  .roast__lv div p { display: none; }
  .facts { grid-template-columns: 1fr; gap: 28px; }
  .fcard__tab { clip-path: polygon(calc(var(--i) * 9%) 0, calc(var(--i) * 9% + 130px) 0, calc(var(--i) * 9% + 148px) 30px, 100% 30px, 100% 100%, 0 100%, 0 30px, calc(var(--i) * 9%) 30px); padding: 44px 20px 20px; font-size: 1.0625rem; }
  .fcard__tab small { left: calc(var(--i) * 9% + 14px); }
  .fcard__body { padding: 0 20px 24px; }
  .visit__bar { grid-template-columns: 1fr; }
  .marq__i { height: 110px; width: 82px; }
  .marq__i img { height: 96px; }
  .ftr__mark { height: 22svh; min-height: 130px; }
  .ftr__b { font-size: 9vw; }
  .ftr__b--bean .ico { width: 84%; height: 84%; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .ftr__contacts { grid-column: 1 / -1; }
  .ftr__last { flex-direction: row; }
  .grid-spec { grid-template-columns: 1fr 1fr; gap: 32px 10px; }
  .spec--big { grid-column: span 2; }
  .spec__name { font-size: 1.375rem; }
  .spec__scales { display: none; }
  .spec__fav { width: 36px; height: 36px; top: 6px; right: 6px; }
  .seg--w .seg__b { padding: 0 8px; min-height: 32px; font-size: 0.8125rem; }
  .spec__row { flex-wrap: wrap; }
  .btn--add { width: 100%; }
  .spec__cmp { display: none; }
  .cat__sort span { display: none; }
  .cat-kinds, .cat-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); }
  .cat-quick::-webkit-scrollbar { display: none; }
  .cat__count { order: 3; flex-basis: 100%; font-size: var(--s-small); color: var(--ink-soft); font-weight: 500; }
  .cat__bar { gap: 10px; }
  .cmpbar { gap: 8px; padding: 8px 8px 8px 14px; font-size: var(--s-small); }
  .cmpbar__th { display: none; }
  .cmpbar > span { flex: 1; }
  .wopts { grid-template-columns: repeat(3, 1fr); }
  .wopt { padding: 12px 10px; }
  .gopts { grid-template-columns: repeat(3, 1fr); }
  .buy { flex-wrap: wrap; }
  .buy .btn { flex-basis: 100%; }
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 65; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; box-shadow: 0 -8px 24px -12px rgba(43,26,20,.3); transform: translateY(150%); transition: transform .35s var(--ease); } /* taste-skill-ignore: плавающий слой (меню, тост, диалог, липкая панель) */
  .sticky-buy.is-on { transform: none; }
  .sticky-buy b { font-weight: 700; font-variant-numeric: tabular-nums; }
  .sticky-buy small { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
  .sticky-buy .btn { margin-left: auto; }
  .bar { grid-template-columns: 100px 1fr; }
  .brew__out { grid-template-columns: 1fr 1fr; }
  .line { grid-template-columns: 72px minmax(0, 1fr) 36px; gap: 12px 14px; align-items: start; }
  .line__ph { width: 72px; height: 90px; }
  .line__ph img { height: 78px; }
  .line .qty { grid-column: 2; grid-row: 2; justify-self: start; }
  .line__sum { grid-column: 2 / 4; grid-row: 2; align-self: center; }
  .line .icon-btn { grid-column: 3; grid-row: 1; width: 36px; height: 36px; }
  .co-grid { grid-template-columns: 1fr; }
  .zone { grid-template-columns: 1fr; }
  .zone svg { max-width: 240px; }
  .sub { grid-template-columns: 1fr; }
  .sub__ph { aspect-ratio: 16 / 9; }
  .pd__tile { aspect-ratio: 4 / 3; }
  .sub__grid { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .hello { grid-template-columns: 1fr; }
  .stages .stage { grid-column: span 12 !important; min-height: 0 !important; }
  .lcalc__out { grid-template-columns: 1fr 1fr; }
  .hist th:nth-child(3), .hist td:nth-child(3) { display: none; }
  .cmp th { width: 96px; padding: 10px 8px; }
  .cmp td { padding: 10px 8px; }
  dialog { max-height: calc(100svh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marq { animation: none; }
}

/* Вырезанные пачки (прозрачный WebP): без наложения «умножением», с мягкой тенью по контуру упаковки */
img[src*="img/p/"][src$=".webp"] {
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 14px 12px rgba(43, 26, 20, 0.22)) drop-shadow(0 3px 3px rgba(43, 26, 20, 0.12));
}
.toast img[src$=".webp"], .sugg__t img[src$=".webp"], .cmpbar__th img[src$=".webp"] { filter: none; }
.line__ph img[src$=".webp"], .order__th img[src$=".webp"], .co-items img[src$=".webp"], .menu__ph img[src$=".webp"], .acc3__w img[src$=".webp"], .marq__i img[src$=".webp"] { filter: drop-shadow(0 4px 4px rgba(43, 26, 20, 0.2)); }