/* Режим «Станция» карточки 2026 (station_mode, миграция 225) — блок станции поверх «Кейтеринг меню».
   Перенесено из макета 127.0.0.1:8028 (вариант Г + плашка «Готовим на месте» + «дополнительно» списком), 12.11.2026.
   Префикс html body — категория Арта сбрасывает шрифты [data-aacat] div {font-size:100%}; классы st-* — свои,
   скрипты карточки вешают обработчики на .size-btn/.extra-btn. Разметку строит js/2024/station26.js. */
:root {
  --st-accent: #705ABF; --st-accent-l: rgba(112, 90, 191, .1); --st-accent-ll: rgba(112, 90, 191, .05);
  --st-t1: #1d1d1f; --st-t2: #58585d; --st-t3: #6e6e73; --st-bg2: #f5f5f7; --st-line: rgba(0, 0, 0, .15);
  --st-green: #047a30; --st-green-bg: rgba(52, 199, 89, .12);
  --st-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
html body .st26-mode .product__right > .config-step:not(.config-step--desc),
html body .st26-mode .product__sidebar .price-card,
html body .st26-mode .price-card-mobile,
/* режим «Кейтеринг меню» (9 карточек): его «Варианты» (порция / боксы) и своя карточка цены — это «Привозим готовое»,
   у станции он скрыт, как и у остальных станций; данные товара не трогаем */
html body .st26-mode .cfg-menu,
html body .st26-mode .cfg-sidebar-card { display: none !important; }
html body .st-cfg { display: flex; flex-direction: column; gap: 22px; margin: 18px 0 22px; font-family: var(--st-font); color: var(--st-t1); }
html body .st-step { display: flex; flex-direction: column; gap: 12px; }
html body .st-step__h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small, 14px); color: var(--st-t2); line-height: 1.45; }
html body .st-step__h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e3def3; flex-shrink: 0; }
html body .st-pills { display: flex; flex-wrap: wrap; gap: 8px; }
html body .st26-mode .st-pill, html body .st26-mode .st-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 980px; border: 1.5px solid var(--st-line);
  background: #fff; color: var(--st-t1); font: 400 var(--fs-small, 14px)/1.4 var(--st-font); letter-spacing: -.006em; cursor: pointer;
  white-space: nowrap; transition: border-color .2s, background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
html body .st26-mode .st-pill.is-on, html body .st26-mode .st-opt.is-on { border-color: var(--st-accent); background: var(--st-accent-l); color: var(--st-accent); }
@media (hover: hover) {
  html body .st26-mode .st-pill:hover, html body .st26-mode .st-opt:hover { border-color: var(--st-accent); }
}
html body .st26-mode .st-pill--in { padding: 0 12px 0 4px; cursor: text; color: var(--st-t3); }
html body .st26-mode .st-pill--in input { width: 46px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--st-t1); text-align: center; padding: 6px 0; }
html body .st26-mode .st-pill--in input:focus::placeholder { color: transparent; }
html body .st-pill--in.is-on input { color: var(--st-accent); font-weight: 600; }
html body .st26-mode .st-opt { padding-left: 6px; border-width: 1px; }
html body .st26-mode .st-opt img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
html body .st26-mode .st-opt small { font-size: 12px; color: var(--st-t3); }
html body .st26-mode .st-opt.is-on small { color: inherit; }
html body .st-note { font-size: 13px; color: var(--st-t3); line-height: 1.4; }
html body .st-note:empty { display: none; }
html body .st-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html body .st-chips__h { font-size: 13px; color: var(--st-t3); margin-right: 2px; }
html body .st-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 980px; background: var(--st-bg2);
  font: 400 13px/1.3 var(--st-font); color: var(--st-t1); white-space: nowrap; }
html body .st-chip svg { color: var(--st-accent); flex-shrink: 0; }
html body .st-chip--free { background: var(--st-green-bg); color: var(--st-green); font-weight: 600; }
html body .st-chip--free svg { color: var(--st-green); }
html body .st-own { display: inline-flex; flex-shrink: 0; color: var(--st-accent); }
/* варианты по одному в корзину (как комплекты): добавленный — с галочкой */
html body .st26-mode .st-pill.is-added::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .st26-mode .st-pill.is-added:not(.is-on) { color: var(--st-green); }
/* кнопка корзины как родная .btn-cart-qty: после добавления слева выезжает серый счётчик, кнопка — иконка и стрелка */
html body .st-cartrow { display: flex; align-items: stretch; height: 48px; }
html body .st-cartrow .st-qty { display: flex; align-items: center; height: 100%; max-width: 0; opacity: 0; overflow: hidden; background: var(--st-bg2);
  border: 1.5px solid var(--st-line); border-right: 0; border-radius: 12px 0 0 12px; transition: max-width .3s ease, opacity .25s ease; }
html body .st-cartrow.is-in .st-qty { max-width: 130px; opacity: 1; }
html body .st26-mode .st-cartrow .st-qty button { display: flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 100%; padding: 0;
  border: 0; background: none; color: var(--st-t3); cursor: pointer; transition: color .15s, background .15s; }
html body .st26-mode .st-cartrow .st-qty input { width: 40px; min-width: 36px; padding: 0; border: 0; background: none; outline: 0; text-align: center;
  font: 600 var(--fs-body, 15px)/1 var(--st-font); color: var(--st-t1); }
html body .st26-mode .st-cartrow .st-price__btn { flex: 1; min-width: 0; height: 100%; white-space: nowrap; overflow: hidden; transition: border-radius .3s ease; }
html body .st26-mode .st-cartrow.is-in .st-price__btn { border-radius: 0 12px 12px 0; }
html body .st-cartrow.is-in [data-st="cartlbl"] { display: none; } /* сворачивается — подпись сразу, едет вместе с кнопкой, как у родной .btn-cart-qty */
html body .st-price__arr { display: none; }
html body .st-cartrow.is-in .st-price__arr { display: block; }
@media (hover: hover) {
  html body .st26-mode .st-cartrow .st-qty button:hover { color: var(--st-t1); background: rgba(0, 0, 0, .05); }
}
html body .st-own svg { width: 100%; height: 100%; }
html body .st-check__it--free .st-own, html body .st-chip--free .st-own { color: var(--st-green); }
@media (min-width: 761px) { /* окно «Как готовим»: «Уже в цене» одной строкой; не влезло — прокрутка вбок, не перенос */
  html body .st-how .st-chips { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  html body .st-how .st-chips::-webkit-scrollbar { display: none; }
  html body .st-how .st-chips__h { flex-shrink: 0; }
  html body .st-how .st-chip { flex-shrink: 0; font-size: 12.5px; padding: 4px 9px 4px 6px; gap: 4px; }
}
html body .st-price { background: var(--st-bg2); border-radius: 24px; padding: clamp(1rem, .75rem + 1vw, 1.25rem); display: flex; flex-direction: column;
  gap: 12px; font-family: var(--st-font); color: var(--st-t1); }
html body .st-price__top { display: contents; } /* обёртка верха карточки (перерисовывается), строка кнопки — отдельно */
html body .st-price__main { display: flex; flex-direction: column; gap: 3px; }
html body .st-price__sum { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.625rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .st-price__sub { font-size: 13px; color: var(--st-t2); }
html body .st-psub { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-height: calc(2.7em + 2px); }
html body .st-psub__l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .st-psub__l--off { color: var(--st-t3); }
html body .st26-mode .st-psub__tg { padding: 0; margin: 0; font: inherit; color: var(--st-accent); text-align: left; cursor: pointer; max-width: 100%; }
html body .st26-mode .st-psub__tg { display: flex; align-items: center; gap: 6px; overflow: visible; }
html body .st-psub__ar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; margin: -1px 0; box-sizing: border-box; border-radius: 50%; background: rgba(112,90,191,.14); color: var(--st-accent); transition: transform .2s; }
html body .st-psub__ar svg { display: block; }
html body .st-psub__ar.is-on { transform: rotate(180deg); }
html body .st26-mode .st-psub__tg:hover .st-psub__ar { background: rgba(112,90,191,.24); }
html body .st-psub__wrap { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -2px; transition: grid-template-rows .3s ease, opacity .25s ease; }
html body .st-psub__wrap.is-on { grid-template-rows: 1fr; opacity: 1; }
html body .st-psub__clip { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html body .st-psub__wrap, html body .st-psub__ar { transition: none; }
}
html body .st-psub__list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--st-line); }
html body .st-psub__list div { display: flex; justify-content: space-between; gap: 8px; }
html body .st-psub__list em { font-style: normal; color: var(--st-t1); white-space: nowrap; }
html body .st-psub__list .st-psub__sum { margin-top: 2px; padding-top: 4px; border-top: 1px dashed var(--st-line); font-weight: 600; color: var(--st-t1); }
html body .st26-mode .st-price__btn { height: 48px; border: 0; border-radius: 12px; background: var(--st-accent); color: #fff; font: 600 var(--fs-body, 15px)/1 var(--st-font);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .2s; }
@media (hover: hover) {
  html body .st26-mode .st-price__btn:hover { background: #6350ad; }
}
html body .st-free { display: flex; align-items: center; gap: 6px; margin: 4px 0 1px; font-size: 13px; font-weight: 600; color: var(--st-green); }
html body .st-free svg { flex-shrink: 0; }
html body .st-only-m { display: none; }
html body .st-check { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); }
html body .st-check__h { font-size: 13px; color: var(--st-t3); }
html body .st-check__it { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; }
html body .st-check__it svg { color: var(--st-accent); flex-shrink: 0; }
html body .st-check__it em { margin-left: auto; font-style: normal; color: var(--st-t3); white-space: nowrap; padding-left: 8px; }
html body .st-check__it--free, html body .st-check__it--free svg { color: var(--st-green); font-weight: 600; }
html body .st-check__it--free em { color: var(--st-green); font-weight: 700; }
html body .st-check__it--add svg { color: var(--st-t3); }
html body .st-check__it--add em { color: var(--st-t1); }
html body .st-check-wrap .st-check { background: var(--st-bg2); border: 0; border-radius: 16px; padding: 14px; }
html body .st-pbadge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 3px 10px; border-radius: 999px;
  background: #facc15; color: #1a1a1a; font: 700 12px/1 var(--st-font); letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
html body .st-show { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--st-accent-ll);
  border: 1px solid rgba(112, 90, 191, .18); font-family: var(--st-font); }
html body .st-show svg { flex-shrink: 0; color: var(--st-accent); background: #fff; border-radius: 50%; padding: 7px; box-sizing: content-box; }
html body .st-show b { display: block; font-size: 14px; font-weight: 600; color: var(--st-t1); line-height: 1.3; }
html body .st-show span { display: block; margin-top: 3px; font-size: 13px; color: var(--st-t2); line-height: 1.4; }
html body .st-show:has(.st-show__ph) { align-items: stretch; }
html body .st-show:has(.st-show__ph) > div { display: flex; flex-direction: column; }
html body .st-show__ph { position: relative; flex-shrink: 0; align-self: stretch; width: 132px; min-height: 99px; padding: 0; border: 0; border-radius: 12px;
  overflow: hidden; background: var(--st-bg2); cursor: zoom-in; }
html body .st-show__ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
html body .st-show__more { display: block; width: max-content; margin-top: auto; padding: 6px 0 0; border: 0; background: none; color: var(--st-accent);
  font: 600 13px/1.3 var(--st-font); cursor: pointer; }
html body .st-how { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body .st-how.is-on { display: flex; }
html body .st-how__box { position: relative; width: 100%; max-width: 920px; max-height: calc(100vh - 48px); overflow: auto; padding: 24px; border-radius: 24px;
  background: #fff; font-family: var(--st-font); color: var(--st-t1); }
html body .st-how__x { position: absolute; top: 19px; right: 18px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 50%; background: var(--st-bg2); color: var(--st-t1); cursor: pointer; }
html body .st-how__h { font-size: 22px; font-weight: 700; letter-spacing: -.02em; padding-right: 44px; }
html body .st-how__sub { margin: 2px 0 18px; font-size: 14px; color: var(--st-t3); }
html body .st-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
html body .st-how__st { margin: 0; }
html body .st-how__ph { overflow: hidden; border-radius: 16px; background: var(--st-bg2); }
html body .st-how__st img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: hover) {
  html body .st-how__x:hover { background: #e8e8ed; }
}
html body .st-how__st figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--st-t2); }
html body .st-how__st b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: var(--st-t1); }
html body .st-how__st b span { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--st-accent); color: #fff; font-size: 12px; }
@media (max-width: 768px) {
  html body .st-cfg { gap: 18px; margin: 14px 0 18px; }
  html body .st-only-m { display: block; }
  html body .st-only-d, html body .st-price__sub { display: none !important; }
  html body .st-price { flex-direction: row; align-items: center; gap: 12px; border-radius: 16px 16px 0 0; background: #fff; padding: 10px 16px; }
  html body .st-price__main { flex: 1; min-width: 0; gap: 1px; }
  html body .st-price__sum { font-size: 20px; }
  html body .st-free { font-size: 12px; margin: 1px 0 0; }
  html body .st-free svg { width: 16px; height: 16px; }
  html body .st26-mode .st-price__btn { height: 44px; padding: 0 16px; flex: 0 0 auto; font-size: 14px; }
  html body .st-pbadge { left: 3%; transform: none; }
  html body .st-show__ph { width: 96px; min-height: 72px; }
  html body .st-how { padding: 0; align-items: flex-end; }
  html body .st-how__box { max-height: 92vh; border-radius: 20px 20px 0 0; padding: 18px 16px 24px; }
  html body .st-how__steps { grid-template-columns: 1fr; gap: 14px; }
  html body .st-how__h { font-size: 19px; }
}