/*! ISHOD — конструктор сайтів ishod.studio. Код і шаблони — лише для сайтів на платформі ISHOD; копіювання й використання поза нею заборонено: https://ishod.studio/umovy/#p6 */
/* Витрина магазина. Цвета приходят из темы магазина через CSS-переменные в base.html. */
:root {
  --bg: #fff; --surface: #f5f5f4; --text: #1c1917; --muted: #6b6560; --line: #e7e5e4; --accent: #1f6f5c; --accent-ink: var(--accent);
  --radius: 14px; --btn-radius: 999px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font-body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; font-family: var(--font-head); font-weight: 700; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.h3 { font-size: 1.05rem; margin-top: 1.4em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.main { padding-top: 24px; padding-bottom: 64px; min-height: 60vh; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.right { text-align: right; }
.ok { color: #15803d; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--btn-radius);
  padding: 11px 22px; min-height: 44px; font: 600 .95rem var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--big { padding: 14px 28px; font-size: 1rem; }
.btn--wide { width: 100%; margin-top: 16px; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* шапка */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__row { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.15rem; min-width: 0; font-family: var(--font-head); }
.brand__logo { height: 36px; width: auto; border-radius: 8px; }
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__nav { display: flex; gap: 18px; margin-left: auto; }
.top__nav a { text-decoration: none; color: var(--muted); font-size: .95rem; }
.top__nav a:hover { color: var(--text); }
.cart-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 14px; border-radius: 999px; background: var(--surface); font-size: .92rem; }
.cart-btn__n { background: var(--accent); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: .8125rem; padding: 0 6px; }
.cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats a { flex: none; text-decoration: none; padding: 6px 14px; border-radius: 999px; background: var(--surface); font-size: .9rem; color: var(--muted); }
.cats a:hover, .cats a.is-active { color: #fff; background: var(--accent); }
.cats__page, .cats--pages { display: none; }

.flash { margin: 16px 0 0; padding: 10px 16px; border-radius: 10px; background: var(--surface); }
.flash--error { background: #fde8e8; color: #9b1c1c; }
.flash--success { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }

/* каталог */
.section { margin-bottom: 48px; }
.section__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section__head h2 { margin: 0; }
.tools { display: flex; gap: 8px; }
.tools input, .tools select { font: inherit; font-size: .9rem; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; }
.card__img { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__img img { transform: scale(1.04); }
.card--out .card__img { opacity: .55; }
.card__body { padding: 10px 2px 0; display: grid; gap: 2px; }
.card__name { text-decoration: none; font-weight: 500; }
.card__name:hover { color: var(--accent); }
.card__price { display: flex; gap: 8px; align-items: baseline; }
.card__price s, .pdp__price s { color: var(--muted); font-size: .9em; }
.badge { position: absolute; top: 10px; left: 10px; background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge--inline { position: static; margin-left: 6px; }
.empty { padding: 40px 0; color: var(--muted); }

/* заглушка вместо фото */
.ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); }
.ph__icon { position: absolute; top: 12px; right: 14px; font-size: 1.4rem; opacity: .8; }
.ph__letter { font-size: 4.5rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 55%, var(--text)); opacity: .35; }
.ph--big { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); }
.ph--big .ph__letter { font-size: 9rem; }
.ph--sm { position: relative; width: 100%; height: 100%; }
.ph--sm .ph__letter { font-size: 1.6rem; }

/* карточка товара */
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 48px; }
.pdp__img img { width: 100%; border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; }
.pdp__price { font-size: 1.6rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.buy { margin: 20px 0; display: grid; gap: 16px; }
.buy__row { display: flex; gap: 12px; align-items: center; }
.variants { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.variants legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); cursor: pointer; font-size: .92rem; }
.chip input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip--off span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.qty input { width: 72px; font: inherit; padding: 11px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); text-align: center; }
.prose { color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.prose p { margin: 0 0 .8em; }

/* корзина */
.cart { display: grid; gap: 0; }
.cart__line { display: grid; grid-template-columns: 72px 1fr auto auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart__img { width: 72px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--surface); }
.cart__img img { width: 100%; height: 100%; object-fit: cover; }
.cart__name { display: grid; gap: 2px; }
.cart__name a { text-decoration: none; font-weight: 500; }
.cart__foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.cart__total { font-size: 1.1rem; }

/* оформление */
.box { background: var(--surface); border-radius: var(--radius); padding: 20px; border: 0; margin: 0 0 16px; }
.box legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.box legend + * { clear: both; }
.box legend .small { font-weight: 400; }
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.checkout__sum { position: sticky; top: 84px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: .88rem; font-weight: 600; }
.field input:not([type=radio]):not([type=checkbox]), .field select, .field textarea {
  font: inherit; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%;
}
.field textarea { resize: vertical; }
.field--err input, .field--err select, .field--err textarea { border-color: #dc2626; }
.field__err { color: #dc2626; font-size: .85rem; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radio, .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radio { padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); }
.radio:has(input:checked) { border-color: var(--accent); }
.radio input, .check input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sum__line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .95rem; }
.sum__line span { color: var(--muted); }
.sum__total { font-size: 1.15rem; padding-top: 10px; }
.sum__total span { color: var(--text); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

.thanks { max-width: 560px; margin: 24px auto; text-align: center; padding: 36px 28px; }
.thanks__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 2rem; display: grid; place-items: center; margin: 0 auto 16px; }
.thanks__sum { text-align: left; margin: 20px 0; }
.note { background: var(--bg); border-radius: 10px; padding: 12px; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.info-grid .h3 { margin-top: 0; }
.list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* --- секции главной (редактор 2.0) ------------------------------------- */
.main--home { padding: 0 0 24px; }
.sx { position: relative; padding: var(--sx-pad) 0; background: var(--sx-bg, transparent); color: var(--sx-text, inherit); }
.sx--pad-s { --sx-pad: 20px; }
.sx--pad-m { --sx-pad: 44px; }
.sx--pad-l { --sx-pad: 64px; }
.sx--pad-0 { --sx-pad: 0px; }
/* сусідні секції з однаковим фоном межі не мають — між ними один відступ (низ попередньої),
   а не два (низ + верх), інакше між блоками зяє порожнеча */
.sx--scheme-default:not(.sx--pad-0) + .sx--scheme-default,
.sx--scheme-soft:not(.sx--pad-0) + .sx--scheme-soft,
.sx--scheme-accent:not(.sx--pad-0) + .sx--scheme-accent,
.sx--scheme-dark:not(.sx--pad-0) + .sx--scheme-dark { padding-top: 0; }
/* смуга-оголошення своїх відступів не має — блок після неї зберігає верхній відступ */
.sx--announcement + .sx.sx.sx { padding-top: var(--sx-pad); }
.sx--bleed > .wrap { max-width: none; padding: 0; }
.sx--bleed { overflow-x: clip; }
html.is-editing, html.is-editing body { overflow-x: clip; }
/* сайт відвідувача теж: елементи з анімацією «збоку» (.fx--right/left до появи) не розширюють сторінку на телефоні */
.sx { overflow-x: clip; }
.sx--scheme-soft { --sx-bg: var(--surface); }
.sx--scheme-accent { --sx-bg: var(--accent); --sx-text: #fff; }
.sx--scheme-dark { --sx-bg: #121216; --sx-text: #f4f4f5; }
.sx--scheme-accent .muted, .sx--scheme-dark .muted { color: inherit; opacity: .78; }
.sx--scheme-accent .btn { background: #fff; color: var(--accent); }
.sx--scheme-accent .benefit, .sx--scheme-accent .review, .sx--scheme-accent .contact { background: rgba(255,255,255,.14); }
.sx--scheme-dark .benefit, .sx--scheme-dark .review, .sx--scheme-dark .contact, .sx--scheme-dark .card__img { background: #1e1e24; }
.sx--scheme-soft .benefit, .sx--scheme-soft .review, .sx--scheme-soft .contact { background: var(--bg); }
.sx--align-center { text-align: center; }
.sx--align-center .sx-head { justify-content: center; }
.sx--align-center .benefits--row .benefit { justify-items: center; }
.sx--announcement { padding: 0 !important; }
.sx-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.sx-head h2 { margin: 0; }
.link-more { text-decoration: none; font-weight: 600; color: var(--accent-ink); }
/* на темній секції акцент може не читатися — колір тексту секції й підкреслення */
.sx--scheme-dark .link-more { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sx--scheme-accent .link-more { color: #fff; }
/* на фоні кольору акценту цифри й значки акцентного кольору зливаються з фоном — робимо їх білими */
.sx--scheme-accent .el-stat__n, .sx--scheme-accent .el-stat__t { color: #fff; }
/* тёмна схема: тёмний акцент на #121216 не читається — цифра світлішим відтінком акценту */
.sx--scheme-dark .el-stat__n { color: color-mix(in srgb, var(--accent) 45%, #fff); }
.pre { white-space: pre-line; }

/* смуга-оголошення — від краю до краю екрана, а не плашка всередині контейнера з порожнечею по боках */
.sx-announce { margin: 0; background: var(--accent); color: #fff; text-align: center; padding: 10px 16px; font-weight: 600; font-size: .95rem; border-radius: 0; }
.sx-announce a { color: #fff; text-decoration: none; }
.sx-announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx--announcement > .wrap { max-width: none; padding: 0; }

.hero2 { display: grid; gap: 32px; align-items: center; min-height: 340px; }
.hero2 h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: .35em; }
.hero2__lead { font-size: 1.12rem; color: var(--muted); max-width: 52ch; margin: 0 0 26px; }
.hero2--split { grid-template-columns: 1.1fr 1fr; }
.hero2__media img, .hero2__media .ph--big { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--radius) * 1.4); }
.hero2__media .ph--big { position: relative; }
.hero2--center { text-align: center; justify-items: center; }
.hero2--center .hero2__lead { margin-left: auto; margin-right: auto; }
.hero2--cover { padding: 56px 40px; border-radius: calc(var(--radius) * 1.4); color: #fff; min-height: 420px;
  background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.12)), var(--hero-img, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #000))) center / cover no-repeat; }
.hero2--cover .hero2__lead { color: rgba(255,255,255,.88); }
.sx--align-center .hero2--split { text-align: left; }
.sx--align-center .hero2--cover { text-align: center; justify-items: center; }
.sx--align-center .hero2--cover .hero2__lead { margin-left: auto; margin-right: auto; }

.grid--c2 { grid-template-columns: repeat(2, 1fr); }
.grid--c3 { grid-template-columns: repeat(3, 1fr); }
.grid--c4 { grid-template-columns: repeat(4, 1fr); }
.grid--c5 { grid-template-columns: repeat(5, 1fr); }
.grid--rail { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 60px) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.grid--rail.grid--c2 { grid-auto-columns: calc((100% - 20px) / 2); }
.grid--rail.grid--c3 { grid-auto-columns: calc((100% - 40px) / 3); }
.grid--rail.grid--c5 { grid-auto-columns: calc((100% - 80px) / 5); }
.grid--rail > * { scroll-snap-align: start; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tile { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface); text-decoration: none; }
.tile__img, .tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile:hover img { transform: scale(1.05); transition: transform .4s ease; }
.tile .tile__name { position: absolute; left: 12px; bottom: 12px; background: var(--bg); color: var(--text); padding: 6px 14px; border-radius: var(--btn-radius); font-weight: 600; font-size: .95rem; }
.circles { display: flex; flex-wrap: wrap; gap: 22px; }
.sx--align-center .circles { justify-content: center; }
.circle { display: grid; justify-items: center; gap: 10px; text-decoration: none; width: 116px; text-align: center; }
.circle__img { position: relative; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--surface); display: block; }
.circle__img img { width: 100%; height: 100%; object-fit: cover; }
.circle .tile__name { font-weight: 600; font-size: .92rem; }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.benefit { background: var(--surface); border-radius: var(--radius); padding: 20px; display: grid; gap: 4px; align-content: start; }
.benefit__icon { font-size: 1.8rem; margin-bottom: 4px; }
.benefit__icon:empty { display: none; }  /* значка немає — немає й порожнього місця */
.benefits--row .benefit { background: transparent !important; padding: 8px 0; }

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review { margin: 0; background: var(--surface); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.review blockquote { margin: 0; font-size: 1.02rem; white-space: pre-line; }
.review figcaption { opacity: .7; font-weight: 600; }
.reviews--quote { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.reviews--quote .review { background: transparent !important; padding: 8px 0 18px; }
.reviews--quote blockquote { font-family: var(--font-head); font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.35; }
.reviews--quote blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .6; color: var(--accent); }

.faq { max-width: 780px; }
.sx--align-center .faq { margin: 0 auto; text-align: left; }
/* натискається весь рядок питання (≥ 48 px), а не лише смужка тексту */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; min-height: 48px; }
.faq .prose { margin: -4px 0 0; padding-bottom: 16px; }

.sx-text { max-width: 760px; }
.sx--align-center .sx-text { margin: 0 auto; }
.sx-text .prose { margin: 0; font-size: 1.05rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split--right .split__img { order: 2; }
.split__img img, .split__img .ph--big { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.split__img .ph--big { position: relative; }
.split__text .prose { margin: 0 0 18px; }

.video { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--empty { display: grid; place-items: center; background: var(--surface); color: var(--muted); }

.cta2 { text-align: center; padding: 44px 24px; border-radius: calc(var(--radius) * 1.6); color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.cta2 p { opacity: .9; max-width: 56ch; margin: 0 auto 22px; }
.cta2 .btn { background: #fff; color: var(--accent); }
.sx--scheme-accent .cta2 { background: rgba(255,255,255,.12); }

.contacts { display: flex; flex-wrap: wrap; gap: 10px; }
.sx--align-center .contacts { justify-content: center; }
.contact { display: inline-flex; gap: 8px; align-items: center; background: var(--surface); padding: 10px 16px; border-radius: var(--btn-radius); text-decoration: none; }
.contacts2--map { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.map { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.map iframe { width: 100%; height: 100%; border: 0; }

.card__edit { position: absolute; right: 10px; bottom: 10px; background: rgba(11, 11, 12, .9); color: #fffb44; font: 600 12px/1 system-ui, sans-serif;
  padding: 7px 10px; border-radius: 8px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.card--off .card__img, .card--off .card__body { opacity: .45; filter: grayscale(1); }

/* --- полотно: сітка 12 колонок × крок 8 px (builder/elements.py) ---------- */
.cv { --gap: 10px; position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: minmax(8px, auto);
  column-gap: var(--gap); align-content: start; min-height: var(--h, 320px); }
.cv__el { grid-column: var(--c) / span var(--s); grid-row: var(--r) / span var(--rs); z-index: var(--z, 1); min-width: 0; position: relative; }
/* великі написи підлаштовуються під ширину елемента (cqi), щоб у вузькій колонці слова не рвалися */
.cv__el--heading, .cv__el--banner, .cv__el--stat { container-type: inline-size; }
.el-h { margin: 0; font-size: max(1rem, min(calc(clamp(1.6rem, 3.4vw, 2.7rem) * var(--fs, 1) * (0.75 + var(--k, 1) * 0.25)), 13cqi)); line-height: 1.2; letter-spacing: -.02em; overflow-wrap: break-word; }
.el-fs--s { --fs: .8; } .el-fs--m { --fs: 1; } .el-fs--l { --fs: 1.3; } .el-fs--xl { --fs: 1.7; } .el-fs--xxl { --fs: 2.25; }
.el-t { margin: 0; font-size: calc(1.05rem * var(--fs, 1) * (0.85 + var(--k, 1) * 0.15)); line-height: 1.6; overflow-wrap: anywhere; }
.el--center { text-align: center; justify-content: center; }
.el--right { text-align: right; justify-content: flex-end; }
.el-media { position: relative; height: 100%; min-height: 48px; }
.el-media > img, .el-media > a > img, .el-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); display: block; }
.el-img--cover { object-fit: cover; }
.el-img--contain { object-fit: contain; }
.el-ph { height: 100%; min-height: 48px; display: grid; place-content: center; gap: 4px; text-align: center; padding: 12px; border: 2px dashed rgba(255, 251, 68, .6);
  background: #131315; color: #e4ffa0; border-radius: var(--radius); font: 600 13px/1.35 system-ui, sans-serif; }
.el-ph span { font-size: 26px; }
.el-ph small { font-weight: 500; color: #a3a3a0; }
.el-ph--line { display: inline-flex; height: auto; padding: 10px 14px; border-radius: 999px; }
.el-row { display: flex; align-items: center; height: 100%; }
/* контур: текст — кольору тексту секції (акцент на темних і акцентних фонах не читається), рамка — акцент */
.el-btn--outline { background: transparent; color: var(--sx-text, var(--text)); box-shadow: inset 0 0 0 2px var(--accent); }
.sx--scheme-accent .el-btn--outline, .sx--scheme-dark .el-btn--outline { box-shadow: inset 0 0 0 2px currentColor; }
.sx--scheme-accent .el-btn--outline { background: transparent; color: #fff; }
.cv__el--on-dark .el-btn--outline { color: var(--bg); box-shadow: inset 0 0 0 2px currentColor; }
.cv__el--on-accent .el-btn--outline { color: #fff; box-shadow: inset 0 0 0 2px currentColor; }
/* текст, заголовок і цифра на темній / акцентній фігурі — світлі (як біжучий рядок і лічильник на таких кольорах) */
.cv__el--on-dark :is(.el-h, .el-t, .el-stat__n, .el-stat__t) { color: var(--bg); }
.cv__el--on-accent :is(.el-h, .el-t, .el-stat__n, .el-stat__t) { color: #fff; }
.el-btn--soft { background: var(--surface); color: var(--text); }
/* кольори месенджерів, затемнені до контрасту ≥ 4,5 з білим текстом */
.el-btn--viber { background: #665cac; color: #fff; }
.el-btn--telegram { background: #167ab0; color: #fff; }
.el-chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; height: 100%; }
.el-chips a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: .95rem; }
.el-chips a:hover { background: var(--accent); color: #fff; }
.el-box { height: 100%; padding: calc(20px * var(--k, 1)); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.el-box .h3 { margin: 0 0 10px; }
.el-box .list { margin: 0; }
.el-card { height: 100%; }
.el-muted { color: var(--muted); font-size: .92rem; }
.el-shape { height: 100%; }
.el-r--m { border-radius: var(--radius); } .el-r--0 { border-radius: 0; } .el-r--full { border-radius: 999px; }
.cv__el--line { display: flex; align-items: center; }
.el-line { width: 100%; height: 2px; margin: 0; border: 0; }
.el-c--accent { background: var(--accent); } .el-c--soft { background: var(--surface); } .el-c--dark { background: var(--text); }
.el-c--light { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } .el-c--line { background: var(--line); }
.cv__el--product .card { height: 100%; }
/* банер: фото на все поле, текст і кнопка поверх */
.el-banner { position: relative; height: 100%; min-height: 160px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; background: var(--surface); }
.sx--bleed .el-banner { border-radius: 0; }
.el-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.el-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.el-banner--dark::after { background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18)); }
.el-banner--light::after { background: linear-gradient(90deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .25)); }
.el-banner__body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; padding: clamp(24px, 5vw, 64px); max-width: min(760px, 100%); min-width: 0; box-sizing: border-box; }
.el-banner.el--center { justify-content: center; } .el-banner.el--center .el-banner__body { justify-items: center; text-align: center; }
.el-banner.el--right { justify-content: flex-end; } .el-banner.el--right .el-banner__body { justify-items: end; text-align: right; }
.el-banner--dark .el-banner__body { color: #fff; }
.el-banner--light .el-banner__body { color: #111; }
.el-banner__t { margin: 0; font-size: min(calc(clamp(2rem, 5vw, 4rem) * var(--fs, 1)), 11cqi); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: break-word; }
.el-banner__s { margin: 0; font-size: 1.15rem; opacity: .9; }
.el-banner__ph { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 8px 12px; border-radius: 999px; background: #131315; color: #e4ffa0; font: 600 13px system-ui, sans-serif; border: 2px dashed rgba(255, 251, 68, .6); }
.el-banner--dark .btn { background: #fff; color: #111; }
.el-banner--light .btn { background: #111; color: #fff; }
/* таймер, цифра, цитата, соцмережі, карта */
.el-count { height: 100%; display: grid; align-content: center; gap: 10px; padding: 16px 20px; border-radius: var(--radius); }
.el-count.el-c--accent { color: #fff; } .el-count.el-c--dark { color: var(--bg); }
.el-count.el--center { justify-items: center; text-align: center; }
.el-count__t { font-size: 1.05rem; }
.el-count__n { display: flex; gap: 12px; }
.el-count__n span { display: grid; justify-items: center; min-width: 58px; }
.el-count__n i { font-style: normal; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--font-head); font-variant-numeric: tabular-nums; }
.el-count__n small { font-size: .8125rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.el-stat { height: 100%; display: grid; align-content: center; gap: 4px; }
.el-stat.el--center { justify-items: center; text-align: center; }
.el-stat__n { font: 800 min(clamp(2.2rem, 5vw, 3.6rem), 22cqi)/1 var(--font-head); color: var(--accent); font-variant-numeric: tabular-nums; }
.el-stat__t { color: var(--muted); }
.el-quote { margin: 0; height: 100%; display: grid; align-content: center; gap: 10px; padding-left: 22px; border-left: 4px solid var(--accent); }
.el-quote.el--center { border-left: 0; padding-left: 0; text-align: center; }
.el-quote blockquote { margin: 0; font: italic 500 clamp(1.15rem, 2.2vw, 1.6rem)/1.45 var(--font-head); }
.el-quote figcaption { color: var(--muted); font-size: .95rem; }
.el-socials { gap: 8px; flex-wrap: wrap; }
.el-soc { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: var(--btn-radius, 999px); text-decoration: none; font-weight: 700; font-size: .92rem; color: #fff; }
.el-soc--instagram { background: linear-gradient(45deg, #c2410c, #c13584, #833ab4); } .el-soc--telegram { background: #167ab0; }
.el-soc--tiktok { background: #111; } .el-soc--youtube { background: #e62117; } .el-soc--facebook { background: #166fe5; }
.el-map { height: 100%; min-height: 160px; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--surface); }
.el-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* у магазину немає адреси — на сайті карти не видно зовсім (у редакторі — підказка вказати адресу) */
.cv__el:has(.el-map--none), .el-map--none { display: none; }
/* анімація появи (store-fx.js додає .fx-in, коли елемент видно) */
.fx { transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.fx-on .fx:not(.fx-in) { opacity: 0; }
.is-editing .cv__el:not(.fx) { opacity: 1; }
.fx-on .fx--up:not(.fx-in) { transform: translateY(36px); }
.fx-on .fx--zoom:not(.fx-in) { transform: scale(.9); }
.fx-on .fx--left:not(.fx-in) { transform: translateX(-48px); }
.fx-on .fx--right:not(.fx-in) { transform: translateX(48px); }
@media (prefers-reduced-motion: reduce) { .fx { transition: none; } .fx-on .fx:not(.fx-in) { opacity: 1; transform: none; } }
@media (max-width: 760px) { .cv__el--map { aspect-ratio: 4 / 3; } }
/* біжучий рядок */
.el-marquee { height: 100%; display: flex; align-items: center; overflow: hidden; border-radius: var(--radius); position: relative; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sx--bleed .el-marquee { border-radius: 0; }
.el-marquee.el-c--accent { color: #fff; } .el-marquee.el-c--dark { color: var(--bg); }
.el-marquee__track { display: flex; gap: 48px; white-space: nowrap; animation: el-run 22s linear infinite; padding-left: 24px; }
.el-marquee__track span::after { content: "•"; margin-left: 48px; opacity: .6; }
@keyframes el-run { to { transform: translateX(-50%); } }
.el-marquee__edit { display: none; }
.is-editing .el-marquee__edit:focus, .is-editing .el-marquee__edit.vt-editing { display: block; position: absolute; inset: 0; background: inherit; padding: 0 16px; line-height: 48px; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .el-marquee__track { animation: none; } }
.el-spacer { height: 100%; }
@media (max-width: 760px) {
  .cv { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 14px; column-gap: 12px; min-height: 0; }
  /* місце, ширина й пропорція — з розрахунку storefront/mobile_layout.py (XY-розріз, пари, підкладки) */
  .cv__el { grid-column: var(--mc, 1) / span var(--ms, 6); grid-row: var(--mr, auto) / span var(--mrs, 1); }
  /* вирівнювання праворуч на вузькому екрані дає рваний лівий край — читаємо зліва */
  .cv .el--right { text-align: left; justify-content: flex-start; }
  .cv .el-banner.el--right { justify-content: flex-start; }
  .cv .el-banner.el--right .el-banner__body { justify-items: start; text-align: left; }
  .cv__el--mval { text-align: right; align-self: center; }
  /* половина ширини (~170 px): заголовок менший, щоб широкі шрифти не рвали слова, але не дрібніший за 15 px */
  .cv__el--mhalf .el-h { font-size: max(15px, min(calc(1.15rem * (1 + (var(--fs, 1) - 1) * .35)), 11cqi)); hyphens: auto; overflow-wrap: break-word; }
  .cv__el--mval .el-t, .cv__el--mval .el-h { text-align: right; white-space: nowrap; }  /* ціна не рветься посеред числа */
  .cv__el--mgone, .cv__el--mhide, .cv__el--spacer { display: none; }
  .cv__el--mar { aspect-ratio: var(--mar); height: auto; max-height: none; }
  /* банер: пропорція — лише нижня межа висоти (100cqw — ширина самого елемента), вміст може розсунути вниз */
  .cv__el--banner.cv__el--mar { aspect-ratio: auto; }
  .cv__el--banner .el-banner { height: auto; min-height: calc(100cqw / var(--mar, 1)); }
  .cv__el--banner .el-banner__body { padding: 26px 22px; }
  .cv__el--shape.cv__el--mbox { aspect-ratio: auto; height: auto; z-index: 0; }
  .cv__el--shape.cv__el--mbox.cv__el--mhide { display: block; }  /* підкладка-група тримає свій вміст разом */
  /* …але схована на телефоні — вона невидима: без фону й тіні */
  .cv__el--shape.cv__el--mhide .el-shape { background: none; box-shadow: none; }
  .cv__el--inbox { z-index: 2; margin-inline: 18px; }
  .cv__el--mfirst, .cv__el--monly { margin-top: 22px; }
  .cv__el--mlast, .cv__el--monly { margin-bottom: 22px; }
  /* підкладку не видно (схована чи кольору секції) — вміст іде по краю, як звичайний текст */
  .cv__el--inbox.cv__el--inbare { margin: 0; }
  .cv__el--line { height: 16px; }
  /* шрифти: плавна шкала від базового розміру телефона, а не пропорційне зменшення з комп'ютера;
     крок між S / M / L помітний, щоб розміри заголовків розрізнялися */
  .el-h { font-size: max(15px, min(var(--mfs, 1.45rem), 13cqi)); line-height: 1.25; }  /* короткий заголовок у вузькій колонці — не дрібніше тексту */
  .el-fs--s { --mfs: 1.2rem; } .el-fs--m { --mfs: 1.45rem; } .el-fs--l { --mfs: 1.75rem; } .el-fs--xl { --mfs: 2.05rem; } .el-fs--xxl { --mfs: 2.4rem; }
  .el-t { font-size: max(15px, calc(1rem * (1 + (var(--fs, 1) - 1) * .35))); }
  .el-banner__t { font-size: min(calc(1.9rem * (1 + (var(--fs, 1) - 1) * .5)), 11cqi); line-height: 1.15; }
  .el-stat__n { font-size: min(2.4rem, 22cqi); }
  /* цифри з підписом в 1 і 2 рядки — по верхньому краю, щоб сусідні не з'їжджали */
  .el-stat { align-content: start; }
  /* банер: текст на всю ширину лежить і на світлій частині фото — затемнення згори вниз, а не збоку */
  .el-banner--dark::after { background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .72)); }
  .el-banner--light::after { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .66) 55%, rgba(255, 255, 255, .5)); }
  /* кнопки на телефоні — не нижчі за 48 px */
  .btn, .el-soc { min-height: 48px; }
  .el-banner .btn { max-width: 100%; text-align: center; }
  .sx--pad-m { --sx-pad: 28px; }
  .sx--pad-s { --sx-pad: 14px; }
  .is-editing .cv { min-height: 120px; }
}

/* --- размер блоков секции (S / M / L / XL) ------------------------------ */
.sx { --k: 1; }
.sx--size-s { --k: .78; }
.sx--size-l { --k: 1.3; }
.sx--size-xl { --k: 1.65; }
.sx .tiles { grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--k)), 1fr)); }
.sx .circle { width: calc(116px * var(--k)); }
.sx .circle__img { width: calc(104px * var(--k)); height: calc(104px * var(--k)); }
/* плитки категорій: та сама картинка (circle__img tile__img) — на всю плитку, а не круг 104 px у кутку */
.sx .tile .circle__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.sx .grid:not([class*="grid--c"]) { grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--k)), 1fr)); }
.sx .grid { gap: calc(20px * var(--k)); }
.sx .card__name, .sx .card__price { font-size: calc(1rem * (0.85 + var(--k) * 0.15)); }
.sx .hero2 { min-height: calc(340px * var(--k)); }
.sx .hero2 h1 { font-size: calc(clamp(2rem, 5vw, 3.6rem) * (0.6 + var(--k) * 0.4)); }
.sx .hero2--cover { min-height: calc(420px * var(--k)); }
.sx .benefits, .sx .reviews { grid-template-columns: repeat(auto-fit, minmax(calc(220px * var(--k)), 1fr)); }
.sx .benefit, .sx .review { padding: calc(20px * var(--k)); font-size: calc(1rem * (0.85 + var(--k) * 0.15)); }
.sx .benefit__icon { font-size: calc(1.8rem * var(--k)); }
.sx .sx-text .prose, .sx .faq, .sx .split__text { font-size: calc(1rem * (0.85 + var(--k) * 0.15)); }
.sx .sx-head h2 { font-size: calc(clamp(1.25rem, 2.6vw, 1.6rem) * (0.75 + var(--k) * 0.25)); }
.sx .cta2 { padding: calc(44px * var(--k)) 24px; }
@media (max-width: 560px) {
  .sx .grid:not([class*="grid--c"]), .sx .tiles { grid-template-columns: repeat(2, 1fr); }
  .sx--size-xl .grid:not([class*="grid--c"]), .sx--size-xl .tiles { grid-template-columns: 1fr; }
}
.sx .video, .sx .map { max-width: calc(100% * min(1, 0.55 + var(--k) * 0.3)); margin-left: auto; margin-right: auto; }

/* --- режим редактора (витрина во фрейме кабинета) ----------------------- */
.is-editing .sx, .is-editing [data-chrome] { cursor: pointer; }
.is-editing .sx::after, .is-editing [data-chrome]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .12s; z-index: 6; }
.is-editing [data-chrome] { position: relative; }
.is-editing .top[data-chrome] { position: sticky; }
.is-editing .vt-hover::after { outline-color: rgba(255, 251, 68, .85); box-shadow: inset 0 0 0 3px rgba(11, 11, 12, .45); }
.is-editing .vt-sel::after { outline: 2px solid #fffb44; box-shadow: inset 0 0 0 3px #0b0b0c; }
.is-editing .sx--hidden > .wrap { opacity: .35; filter: grayscale(1); }
.is-editing .sx--hidden::before { content: "Сховано з сайту"; position: absolute; top: 10px; right: 12px; z-index: 7; background: #0b0b0c; color: #f2f2ee;
  font: 600 12px system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 251, 68, .45); }
.is-editing .card[data-pid]:hover .card__edit { opacity: 1; }
.is-editing .card[data-pid]:hover .card__img { outline: 2px solid #fffb44; outline-offset: 2px; box-shadow: 0 0 0 2px #0b0b0c; }
.is-editing [data-ed] { cursor: text; border-radius: 4px; }
.is-editing .vt-sel [data-ed]:hover { box-shadow: 0 0 0 1px rgba(11, 11, 12, .55), 0 0 0 2px rgba(255, 251, 68, .9); }
.is-editing [data-ed]:empty::before { content: attr(data-ph); opacity: .4; }
.is-editing .vt-editing { outline: 2px solid #fffb44; outline-offset: 2px; box-shadow: 0 0 0 2px #0b0b0c; background: color-mix(in srgb, #fffb44 10%, transparent); }
/* полотно в редакторі */
.is-editing .cv { min-height: max(var(--h, 320px), 160px); border-radius: 12px; transition: background-color .15s, box-shadow .15s; }
.is-editing .sx:hover .cv, .is-editing .sx.vt-sel .cv { box-shadow: 0 0 0 1px rgba(120, 160, 10, .35); }
.is-editing .cv.cv--grid { background: linear-gradient(90deg, rgba(150, 200, 20, .1) calc(100% - var(--gap)), transparent 0) 0 0 / calc((100% + var(--gap)) / 24) 100%; }
.is-editing .cv.cv--drop { box-shadow: 0 0 0 2px #fffb44, 0 0 0 4px rgba(11, 11, 12, .55); background-color: rgba(255, 251, 68, .07); }
.is-editing .sx:has(.fe-sel) > .vt-bar { display: none; }
.is-editing .cv--locked .cv__el { cursor: pointer; }
.is-editing .cv--locked::before { content: "🔒 Полотно заблоковане"; position: absolute; top: -26px; right: 0; z-index: 30; font: 600 12px/1 system-ui, sans-serif;
  background: #0b0b0c; color: #f2f2ee; padding: 5px 10px; border-radius: 999px; transform: scale(var(--vt-ui, 1)); transform-origin: bottom right; }
.is-editing .cv__el { cursor: grab; touch-action: none; border-radius: 6px; }
.is-editing .cv__el::after { content: ""; position: absolute; inset: -3px; border-radius: 8px; pointer-events: none; outline: 1.5px solid transparent; transition: outline-color .12s; z-index: 30; }
.is-editing .cv__el:hover::after { outline-color: rgba(255, 251, 68, .9); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .5); }
.is-editing .cv__el.fe-sel::after { outline: calc(2px * var(--vt-ui, 1)) solid #fffb44; box-shadow: inset 0 0 0 1px #0b0b0c, 0 0 0 calc(3px * var(--vt-ui, 1)) #0b0b0c; }
.is-editing .cv__el.fe-moving { cursor: grabbing; opacity: .92; z-index: 50; }
.is-editing .cv__el.fe-moving::after { outline: 2px solid #fffb44; box-shadow: inset 0 0 0 1px #0b0b0c, 0 0 0 3px #0b0b0c; }
/* сховано на телефоні: пунктирна рамка й маленька позначка над елементом (не перекриває текст і не схожа на «видалити») */
.is-editing .cv__el--mhide { outline: 1px dashed rgba(120, 120, 130, .55); outline-offset: 2px; }
.is-editing .cv__el--mhide::before { content: "сховано на телефоні"; position: absolute; right: 0; top: -18px; z-index: 31; font: 600 10px/1 system-ui, sans-serif; background: rgba(11, 11, 12, .72); color: #f2f2ee; padding: 3px 6px; border-radius: 5px; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.is-editing .cv__el--mhide:hover::before, .is-editing .cv__el--mhide.fe-sel::before { opacity: 1; }
.is-editing .cv__el a, .is-editing .cv__el img { -webkit-user-drag: none; user-select: none; }
.fe-h { position: absolute; z-index: 40; width: calc(12px * var(--vt-ui, 1)); height: calc(12px * var(--vt-ui, 1)); margin: calc(-6px * var(--vt-ui, 1)); background: #fffb44; border: 2px solid #0b0b0c; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); touch-action: none; }
.fe-h::after { content: ""; position: absolute; inset: -8px; }
.fe-h--nw { left: -3px; top: -3px; cursor: nwse-resize; } .fe-h--se { left: calc(100% + 3px); top: calc(100% + 3px); cursor: nwse-resize; }
.fe-h--ne { left: calc(100% + 3px); top: -3px; cursor: nesw-resize; } .fe-h--sw { left: -3px; top: calc(100% + 3px); cursor: nesw-resize; }
.fe-h--n { left: 50%; top: -3px; cursor: ns-resize; } .fe-h--s { left: 50%; top: calc(100% + 3px); cursor: ns-resize; }
.fe-h--e { left: calc(100% + 3px); top: 50%; cursor: ew-resize; } .fe-h--w { left: -3px; top: 50%; cursor: ew-resize; }
@media (pointer: coarse) { .fe-h { width: 18px; height: 18px; margin: -9px; } }
.fe-size { position: absolute; left: 50%; top: calc(100% + 12px * var(--vt-ui, 1)); transform: translateX(-50%) scale(var(--vt-ui, 1)); transform-origin: top center; z-index: 41; padding: 3px 8px; border-radius: 6px;
  background: #0b0b0c; color: #fffb44; font: 600 12px/1.3 system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.fe-tools { position: absolute; right: 0; bottom: calc(100% + 12px * var(--vt-ui, 1)); transform: scale(var(--vt-ui, 1)); transform-origin: bottom right; z-index: 42; display: flex; gap: 2px; padding: 3px;
  background: #131315; border-radius: 999px; box-shadow: 0 8px 20px -4px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12); font: 600 12.5px/1 system-ui, sans-serif; white-space: nowrap; }
.fe-tools button { border: 0; background: none; padding: 6px 9px; border-radius: 999px; cursor: pointer; color: #f2f2ee; font: inherit; }
.fe-tools button:hover, .fe-tools button:focus-visible { background: #fffb44; color: #0b0b0c; outline: none; }
.fe-tools .fe-del:hover { background: #ff6b5e; color: #0b0b0c; }
.fe-tools.fe-tools--left { right: auto; left: 0; transform-origin: bottom left; }
.cv__el.fe-near-top .fe-tools.fe-tools--left { transform-origin: top left; }
.cv__el.fe-near-top .fe-tools { bottom: auto; top: calc(100% + 40px * var(--vt-ui, 1)); transform-origin: top right; }
.fe-guide { position: absolute; z-index: 45; background: #ec4899; pointer-events: none; }
.fe-guide--v { width: calc(1px * var(--vt-ui, 1)); top: 0; bottom: 0; }
.fe-guide--h { height: calc(1px * var(--vt-ui, 1)); left: 0; right: 0; }
.fe-guide--c { background: none; border-left: 1px dashed #ec4899; }
.cv__ghost { grid-column: var(--c) / span var(--s); grid-row: var(--r) / span var(--rs); z-index: 44; border: 2px dashed #0b0b0c; border-radius: 10px;
  background: rgba(255, 251, 68, .6); pointer-events: none; display: grid; place-items: center; color: #0b0b0c; font: 600 13px/1.2 system-ui, sans-serif; }
.cv__hint { grid-column: 1 / -1; grid-row: 2 / span 36; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 28px 16px; text-align: center;
  border: 2px dashed rgba(255, 251, 68, .55); border-radius: 20px; background: #131315; color: #fffb44; font-family: system-ui, sans-serif; cursor: default; }
.cv__hint svg { width: 110px; height: 88px; }
.vt-empty { padding: 32px 0; }
.vt-empty .cv__hint { min-height: 52vh; }
.cv__hint b { color: #f2f2ee; font-size: 1.2rem; }
.cv__hint > span { color: #a3a3a0; font-size: .95rem; }
.cv__quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.cv--drop .cv__hint { border-color: #fffb44; border-style: solid; background: #20200a; }
.cv__grow { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 64px; height: 16px; cursor: ns-resize; z-index: 35; touch-action: none; display: grid; place-items: center; }
.cv__grow::before { content: ""; width: 44px; height: 6px; border-radius: 99px; background: rgba(255, 251, 68, .55); box-shadow: 0 0 0 1px rgba(11, 11, 12, .45); transition: background .12s; }
.cv__grow:hover::before, .cv__grow.on::before { background: #fffb44; box-shadow: 0 0 0 1.5px #0b0b0c; }
.cv__grow::after { content: "↕ висота полотна"; position: absolute; top: 18px; background: #0b0b0c; color: #fffb44; font: 600 11px/1 system-ui, sans-serif;
  padding: 4px 8px; border-radius: 999px; opacity: 0; transition: opacity .15s; white-space: nowrap; pointer-events: none; }
.cv__grow:hover::after, .cv__grow.on::after { opacity: 1; }
.vt-insert { position: absolute; left: 24px; right: 24px; height: 4px; margin-top: -2px; background: #fffb44; border-radius: 2px; box-shadow: 0 0 0 1px #0b0b0c; z-index: 60; pointer-events: none; }
.vt-insert::before, .vt-insert::after { content: ""; position: absolute; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #0b0b0c; border: 3px solid #fffb44; box-sizing: border-box; }
.vt-insert::before { left: -6px; } .vt-insert::after { right: -6px; }
.vt-insert span { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) scale(var(--vt-ui, 1)); transform-origin: top center; background: #fffb44; color: #0b0b0c; font: 700 12px/1 system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; box-shadow: 0 0 0 1px #0b0b0c; white-space: nowrap; }
.vt-menu { position: fixed; z-index: 100; transform: scale(var(--vt-ui, 1)); transform-origin: top left; min-width: 210px; padding: 6px; background: #131315; border-radius: 14px; box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12);
  font: 500 14px/1.2 system-ui, sans-serif; color: #f2f2ee; }
.vt-menu button { display: flex; justify-content: space-between; gap: 18px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.vt-menu button:hover, .vt-menu button:focus-visible { background: #24242a; outline: none; }
.vt-menu button kbd { font: 12px system-ui, sans-serif; color: #8a8a86; }
.vt-menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .09); margin: 4px 0; }
.vt-menu .danger { color: #ff6b5e; }
.vt-menu .danger:hover { background: rgba(255, 107, 94, .16); }
@keyframes vt-land { from { opacity: 0; transform: scale(.94); } }
.cv__el.fe-landed { animation: vt-land .22s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .cv__el.fe-landed { animation: none; } }
/* шапка в редакторі: «✕» біля кожного пункту */
.hdr-i { position: relative; display: inline-flex; align-items: center; }
.hdr-x { display: none; }
.is-editing .hdr-x { display: inline-grid; place-items: center; position: absolute; top: -10px; right: -12px; z-index: 20; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: #ff6b5e; color: #0b0b0c; font: 700 11px/1 system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .12s;
  transform: scale(var(--vt-ui, 1)); }
.is-editing .hdr-i:hover > .hdr-x, .is-editing [data-chrome].vt-sel .hdr-x { opacity: 1; }
.is-editing .hdr-x--strip { position: static; width: auto; height: auto; padding: 4px 10px; border-radius: 999px; opacity: .0; align-self: center; }
.is-editing .cats:hover .hdr-x--strip, .is-editing [data-chrome].vt-sel .hdr-x--strip { opacity: 1; }
.is-editing .cats a[data-cat-id] { cursor: pointer; }
.is-editing .cats a[data-cat-id]:hover { outline: 2px solid #fffb44; outline-offset: 2px; box-shadow: 0 0 0 2px #0b0b0c; }
.vt-act { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed rgba(255, 251, 68, .6); background: #0b0b0c; color: #fffb44;
  border-radius: 999px; padding: 7px 14px; font: 600 13px/1.2 system-ui, sans-serif; cursor: pointer; vertical-align: middle; }
.vt-act:hover { background: #fffb44; color: #0b0b0c; border-style: solid; border-color: #0b0b0c; }
.vt-hint { color: var(--muted); padding: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vt-new { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.tile.vt-new { border: 2px dashed rgba(255, 251, 68, .6); background: #131315; }
.vt-new__ph { display: grid !important; place-items: center; background: #131315 !important; color: #fffb44; font: 300 44px/1 system-ui, sans-serif; }
.circle.vt-new .circle__img { border: 2px dashed rgba(255, 251, 68, .6); }
.tile.vt-new .tile__name { background: #fffb44; color: #0b0b0c; }
.vt-bar { position: absolute; top: 8px; left: 8px; z-index: 8; transform: scale(var(--vt-ui, 1)); transform-origin: top left; display: flex; align-items: center; gap: 2px; background: #131315; color: #f2f2ee;
  border-radius: 999px; padding: 3px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12); font: 500 13px/1 system-ui, sans-serif; }
.vt-bar__name { padding: 6px 10px; font-weight: 700; color: #fffb44; }
.vt-bar .vt-size { font-weight: 700; min-width: 30px; }
.vt-bar__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .14); margin: 0 2px; }
.vt-bar button { border: 0; background: none; padding: 7px 9px; border-radius: 999px; cursor: pointer; font: inherit; color: #d2d2cd; }
.vt-bar button:hover, .vt-bar button:focus-visible { background: #fffb44; color: #0b0b0c; outline: none; }
.vt-bar .vt-bar__del:hover { background: #ff6b5e; color: #0b0b0c; }
.vt-plus { position: absolute; left: 50%; transform: translate(-50%, -50%) scale(.6); z-index: 9; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: #fffb44; color: #0b0b0c; font: 700 20px/1 system-ui, sans-serif; cursor: pointer; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 2px #0b0b0c, 0 0 0 6px rgba(255, 251, 68, .25); transition: opacity .12s, transform .12s; display: grid; place-items: center; }
.vt-plus.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.vt-plus::before { content: ""; position: absolute; top: 50%; left: -46vw; right: -46vw; height: 2px; background: rgba(255, 251, 68, .8); box-shadow: 0 0 0 1px rgba(11, 11, 12, .3); z-index: -1; }

.center-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }

/* подвал */
.foot { border-top: 1px solid var(--line); padding: 32px 0; font-size: .92rem; }
.foot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot p { margin: 0 0 4px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }

@media (max-width: 860px) {
  .hero2--split, .split, .contacts2--map { grid-template-columns: 1fr; }
  .split--right .split__img { order: 0; }
  .hero2--cover { padding: 40px 22px; min-height: 320px; }
  .grid--c3, .grid--c4, .grid--c5 { grid-template-columns: repeat(2, 1fr); }
  .grid--rail, .grid--rail.grid--c2, .grid--rail.grid--c3, .grid--rail.grid--c5 { grid-auto-columns: 46%; grid-template-columns: none; }
  .sx--hide-mobile { display: none; }
  .is-editing .sx--hide-mobile { display: block; }
  .sx--pad-l { --sx-pad: 40px; }
  .top__nav { display: none; }
  .cats--pages { display: flex; }
  .cats a.cats__page { display: inline-block; }
  .cart-btn { margin-left: auto; }
  .pdp, .checkout, .sx-split { grid-template-columns: 1fr; gap: 20px; }
  .sx-split--right .sx-split__img { order: 0; }
  .ed-bar { opacity: 1; pointer-events: auto; position: static; transform: none; margin: 0 auto 8px; width: max-content; max-width: 100%; overflow-x: auto; }
  .checkout__sum { position: static; }
  .foot__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cart__line { grid-template-columns: 56px 1fr auto; }
  .cart__img { width: 56px; height: 68px; }
  .cart__sum { grid-column: 2; }
  .row2 { grid-template-columns: 1fr; }
  .cart-btn span:not(.cart-btn__n) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* редактор на телефоні: полотно за висотою вмісту (правило після .is-editing .cv) */
@media (max-width: 760px) { .is-editing .cv { min-height: 120px; } }

/* папка сторінок */
.folder h1 { margin: 24px 0 16px; }
.folder__list { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 10px; max-width: 640px; }
.folder__list a { display: flex; justify-content: space-between; padding: 16px 20px; border-radius: var(--radius); background: var(--surface); text-decoration: none; font-weight: 600; }
.folder__list a:hover { color: var(--accent); }
.is-fit { overflow-wrap: normal !important; }
.el-vph { height: 100%; min-height: 160px; display: grid; place-items: center; border-radius: var(--radius); background: linear-gradient(135deg, var(--surface), var(--text)); }
.el-vph span { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 26px; padding-left: 4px; }

/* ===== кошик-шторка, швидке замовлення, оформлення (store-cart.js) ===== */
.cart-btn__sum { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.cart__go { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.drw-lock, .drw-lock body { overflow: hidden; }
.drw { position: fixed; inset: 0; z-index: 1000; }
.drw__bg { position: absolute; inset: 0; background: rgba(15, 15, 18, .45); opacity: 0; transition: opacity .2s ease; }
.drw__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; box-shadow: -12px 0 40px rgba(0,0,0,.14);
  transform: translateX(100%); transition: transform .22s ease; outline: none; }
.drw.is-open .drw__bg { opacity: 1; }
.drw.is-open .drw__panel { transform: none; }
.drw__panel.is-busy { cursor: progress; }
.drw__panel.is-busy .drw__lines, .drw__panel.is-busy .drw__foot { opacity: .6; pointer-events: none; }
.drw__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.drw__title { margin: 0; font-size: 1.2rem; }
.drw__title .muted { font-weight: 400; font-size: .95rem; }
.drw__x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.drw__x:hover { background: var(--surface); }
.drw__lines { padding: 0 20px; }
.drw__line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.drw__img { width: 76px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--surface); display: block; }
.drw__img img { width: 100%; height: 100%; object-fit: cover; }
.drw__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.drw__name { text-decoration: none; font-weight: 600; line-height: 1.3; }
.drw__name:hover { color: var(--accent); }
.drw__price { font-size: .9rem; }
.drw__price s { font-size: .85rem; }
.drw__row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.drw__sum { margin-left: auto; white-space: nowrap; }
.drw__del { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); cursor: pointer; flex: none; }
.drw__del:hover { color: #dc2626; border-color: currentColor; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper button { width: 34px; height: 34px; border: 0; background: var(--bg); color: var(--text); font: 600 1.05rem var(--font-body); cursor: pointer; }
.stepper button:hover:not(:disabled) { background: var(--surface); }
.stepper button:disabled { color: var(--line); cursor: default; }
.stepper output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.drw__foot { padding: 18px 20px 4px; }
.drw__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; }
.drw__total span { color: var(--muted); font-size: 1rem; }
.drw__back { margin-top: 10px; }
.drw__rec { padding: 20px; }
.drw__rec h3 { font-size: 1rem; margin: 0 0 12px; }
.drw__recs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rec { display: grid; gap: 4px; align-content: start; font-size: .88rem; }
.rec__img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface); display: block; position: relative; }
.rec__img img { width: 100%; height: 100%; object-fit: cover; }
.rec__name { text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec__btn { padding: 8px 14px; font-size: .85rem; width: 100%; margin-top: 4px; }
.drw__empty { padding: 20px; text-align: center; }

/* «Замовити швидко» */
.buy__row { flex-wrap: wrap; }
.qdlg { border: 0; border-radius: var(--radius); padding: 0; width: min(440px, calc(100% - 32px)); background: var(--bg); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.qdlg::backdrop { background: rgba(15, 15, 18, .45); }
.qdlg:not(:modal) { position: static; width: auto; max-width: 480px; margin: 0 0 24px; box-shadow: none; border: 1px solid var(--line); }
.qdlg:not(:modal) [data-quick-close] { display: none; }
.qdlg__form { padding: 20px 22px 18px; }
.qdlg__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.qdlg__head h2 { margin: 0; font-size: 1.25rem; }
.qdlg__item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface); margin-bottom: 16px; }
.qdlg__item img { width: 48px; height: 56px; object-fit: cover; border-radius: 8px; }
.qdlg__item div { display: grid; gap: 2px; }
.qdlg__hint { margin: 10px 0 0; text-align: center; }

/* поля: префікс +380, підказка формату */
.tel { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.tel:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.tel__cc { display: grid; place-items: center; padding: 0 4px 0 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.field .tel input:not([type=radio]):not([type=checkbox]) { border: 0; border-radius: 0; padding-left: 6px; outline: none; }
.field--err .tel { border-color: #dc2626; }
.field__hint { color: var(--muted); font-size: .82rem; }

/* оформлення: спрощена шапка */
.co-top { position: static; backdrop-filter: none; background: var(--bg); }
.co-top__row { display: flex; align-items: center; gap: 24px; height: 64px; }
.co-top__back { color: var(--muted); text-decoration: none; font-size: .92rem; }
.co-top__back:hover { color: var(--text); }
.co-top__tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.foot--co { padding: 20px 0; }
.foot--co p { margin: 0; }

/* вкладки й кроки */
.co-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.co-tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 600; font-size: .95rem; }
.co-tabs a[aria-current] { color: var(--text); border-color: var(--text); }
.co-tabs .muted { font-weight: 400; }
.co-steps { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 8px; flex-wrap: wrap; counter-reset: none; }
.co-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.co-steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--line); margin-right: 2px; }
.co-steps li.is-current, .co-steps li.is-done { color: var(--text); }
.co-steps li.is-current { font-weight: 600; }
.co-n { position: relative; display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font: 700 .82rem/1 var(--font-body); vertical-align: middle; }
.box .co-n { background: var(--bg); }
.is-current > .co-n { box-shadow: none; background: var(--text); color: var(--bg); }
.is-done > .co-n, .is-done > legend > .co-n, .is-done > .co-sum__title > .co-n { box-shadow: none; background: #65A362; color: transparent; }
.is-done > .co-n::after, .is-done > legend > .co-n::after, .is-done > .co-sum__title > .co-n::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .9rem; }
.box legend .co-n { margin-right: 6px; }
.co-block { transition: opacity .2s ease; }
.co-block.is-dim { opacity: .55; }
.is-checkout .checkout__sum { top: 16px; }
.co-sum__title { font-size: 1.1rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.co-comment { margin-top: 8px; }
.co-comment summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .92rem; list-style: none; width: max-content; }
.co-comment summary::-webkit-details-marker { display: none; }
.co-comment[open] summary { margin-bottom: 10px; }
.co-terms { margin: 10px 0 0; text-align: center; }
.co-mini, .co-sticky { display: none; }

@media (min-width: 861px) {
  .checkout--quick .checkout__form { max-width: 560px; }
}
@media (max-width: 860px) {
  .cart-btn__sum { display: none; }
  .drw__panel { width: 100%; }
  .co-top__row { gap: 12px; }
  .co-top__tel span { display: none; }
  .co-top .brand { min-width: 0; flex: 0 1 auto; }
  .co-top__back { font-size: .85rem; white-space: nowrap; padding: 12px 0; }
  .co-top__tel { width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: var(--surface); }
  .co-mini { display: block; background: var(--surface); border-radius: var(--radius); padding: 0 16px; margin: 0 0 16px; }
  .co-mini summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; cursor: pointer; font-weight: 600; list-style: none; }
  .co-mini summary::-webkit-details-marker { display: none; }
  .co-mini summary span::after { content: " ⌄"; color: var(--muted); }
  .co-mini[open] summary span::after { content: " ⌃"; }
  .is-checkout .main { padding-bottom: 110px; }
  .co-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
  .co-sticky .btn--wide { margin: 0; }
  .checkout__sum .co-submit { display: none; }
  .buy__quick { width: 100%; }
}
@media (max-width: 560px) {
  .co-steps { gap: 6px; font-size: .85rem; }
  .co-steps li > span:not(.co-n) { display: none; }
  .co-steps li.is-current > span:not(.co-n) { display: inline; }
  .co-steps li + li::before { width: 14px; }
}

/* --- телефон: компактна версія (менше гортати) ------------------------------------------------
   підбірки товарів і відгуки — стрічка вбік (дві картки в кадрі), а не сітка на кілька екранів;
   відступи блоків і між елементами — менші */
@media (max-width: 760px) {
  .sx--products .grid, .sx--products .grid.grid--rail {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .sx--products .grid > * { scroll-snap-align: start; }
  .sx--products .grid::-webkit-scrollbar { display: none; }
  .sx .reviews:not(.reviews--quote) {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sx .reviews:not(.reviews--quote) > * { scroll-snap-align: start; }
  .sx .reviews::-webkit-scrollbar { display: none; }
  .sx--pad-s { --sx-pad: 10px; }
  .sx--pad-m { --sx-pad: 20px; }
  .sx--pad-l { --sx-pad: 28px; }
  .cv { row-gap: 10px; }
  /* блок, схований на телефоні, не рахується сусідом: наступний видимий блок зберігає свій верхній відступ
     (правило «однаковий фон — один відступ» вище бачить лише сусіда в розмітці) */
  .sx--hide-mobile + .sx.sx.sx { padding-top: var(--sx-pad); }
  .foot .ft__cols { gap: 22px 20px; padding-top: 28px; padding-bottom: 20px; }
  .foot.ft--big .ft__cols { padding-top: 28px; padding-bottom: 20px; }
  /* заголовки блоків (FAQ, відгуки, полотна) — не дрібніші за заголовки M на полотнах */
  .sx .sx-head h2 { font-size: calc(1.55rem * (0.85 + var(--k, 1) * 0.15)); line-height: 1.2; }
  /* категорії-кружечки: стрічка вбік, а не по 2 великі кола в ряд на кілька екранів */
  .circles, .sx--align-center .circles { flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px; }
  .circles::-webkit-scrollbar { display: none; }
  .sx .circle { flex: none; width: 96px; scroll-snap-align: start; }
  .sx .circle__img { width: 88px; height: 88px; }
}

/* телефон: кнопки полотна на всю ширину — дві поспіль не стоять «драбинкою» різної ширини */
@media (max-width: 760px) {
  .cv__el .el-row > .el-btn { width: 100%; justify-content: center; }
}
/* остання темна (чи акцентна) секція — впритул до темного підвалу, без світлої смужки */
.main--home:has(> .sx:last-child:is(.sx--scheme-dark, .sx--scheme-accent)) { padding-bottom: 0; }
.el-btn__ico { width: 18px; height: 18px; flex: none; }

/* елемент «Форма заявки» (templates/store/elements/form.html) */
.el-form { display: grid; gap: 10px; align-content: start; scroll-margin-top: 96px; }  /* «Дякуємо!» після відправки — не під липкою шапкою */
.el-form__lead { margin: 0; color: var(--muted); }
.el-form__f { display: grid; gap: 10px; }
.el-form__fld { display: grid; gap: 5px; font-size: .88rem; font-weight: 600; }
.el-form__fld input, .el-form__fld textarea { font: inherit; font-weight: 400; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; min-height: 44px; }
.el-form__fld textarea { resize: vertical; }
.el-form__btn { justify-self: start; min-height: 44px; }
.el-form--ok { align-content: center; text-align: center; }  /* після відправки: подяка посередині блоку, а не над порожнечею */
.el-form__ok { margin: 0; padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); font-weight: 600; }
.el-form__err { margin: 0; color: #dc2626; font-size: .9rem; }
.el-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }