/* Missis Norris — 14_STORE, store.css
   Базова частина (@font-face, :root, .sc-*) — ТОЧНА КОПІЯ stage1/showcase.css, візуальний еталон,
   затверджений власником. Не редагувати вище лінії "/* ==== M. МЕХАНІКА ==== */".
   Нижче — розділ М: стилі робочої механіки index.html/onepage.js/shop.js/app.js (лист вибору,
   кошик/оформлення, плитки розміру, чипи палітри, шапка/меню/футер) — написані НА ТИХ САМИХ
   ТОКЕНАХ, що й еталон вище, БЕЗ перейменування класів (id/класи механіки й _qa/stage2/checks.js
   лишаються ті самі: #expand-slot, .expand__scroll, .expand__sticky, .side-panel, .line__remove,
   #price-now, #add-to-cart, #to-checkout, #header-cart, .variant-tile, [data-palette], mn_*). */

@font-face {
  font-family: "KyivType Serif";
  src: url("assets/fonts/KyivTypeSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: url("assets/fonts/FixelText-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: url("assets/fonts/FixelText-Medium.subset.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --paper: #FAF9F6;
  --ink: #111110;
  --ink-2: #454440;
  --ink-3: #6B6A66;
  --line: #E4E1D8;
  --line-ink: #D8D5CC;
  --serif: "KyivType Serif", Georgia, serif;
  --sans: "Fixel Text", -apple-system, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 2px;
  --header-h: 48px; /* фаза A: шапка лише з текстом (еталон .sc-topbar ≈ 40px) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-total, 92px) + 8px); } /* stage9: --header-total ставить onepage.js:mountSiteNav (фактична висота двох рядів шапки) */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); }
button { font-family: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 999; }

.section { padding-block: clamp(2.2rem, 4vw, 3.6rem); border-bottom: 1px solid var(--line); }
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.06; letter-spacing: -.02em; margin: 0 0 .5rem;
}
.h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 .6rem; }
.display { font-family: var(--serif); font-weight: 400; }
.lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 1.4rem; font-size: .98rem; }
.eyebrow {
  display: inline-block; font-weight: 500; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem;
}
.small { font-size: .84rem; }
.muted { color: var(--ink-3); }
.num { font-family: var(--serif); color: var(--ink-3); font-size: .82rem; margin-right: .3rem; }
.link { color: var(--ink); text-decoration: underline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* лінк-дії (усе, крім двох головних кнопок) — текст із підкресленням 1px, без чорної заливки */
.arrow-link {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  font-weight: 500; font-size: .88rem; text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px;
  cursor: pointer; border: none; padding: 0; font-family: inherit;
}
.link-back { border: none; background: none; color: var(--ink-2); font-size: .86rem; min-height: 44px; padding: 0; cursor: pointer; font-family: inherit; text-decoration: underline; }

/* два головних чорних кнопки: hero-CTA і «Додати в кошик» / «Оформити» */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--line-ink); background: transparent; color: var(--ink);
  min-height: 44px; padding: .7rem 1.3rem; font-weight: 500; font-size: .9rem;
  text-decoration: none; border-radius: var(--radius); cursor: pointer;
}
.btn--primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn--full { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }

.badge {
  display: inline-block; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid var(--line-ink); padding: .2rem .5rem; color: var(--ink-2); border-radius: var(--radius);
}
.badge--demo, .cmp-card--demo .badge { border-color: var(--ink); color: var(--ink); }
.price { font-weight: 500; }
.live-signal { font-size: .72rem; color: var(--ink-3); }

/* чипи (палітра, слоти доставки, канал фото) — рамка 1px, вибраний = 2px ink + ✓ */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 1px solid var(--line-ink); background: var(--paper); color: var(--ink);
  font-size: .82rem; padding: .5rem .8rem; min-height: 44px; border-radius: var(--radius);
  cursor: pointer; font-family: inherit;
}
.chip.is-selected { border: 2px solid var(--ink); font-weight: 500; padding: calc(.5rem - 1px) calc(.8rem - 1px); }
.chip.is-selected::before { content: "✓ "; }

.disclosure { border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .9rem; margin: .8rem 0; }
.disclosure summary { cursor: pointer; padding: .7rem 0; font-weight: 500; font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
.disclosure--small { padding: .1rem .7rem; }
.check-list { list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--ink-2); display: flex; flex-direction: column; gap: .3rem; }
.check-list li::before { content: "· "; color: var(--ink-3); }

/* ===== ШАПКА / МЕНЮ / ФУТЕР ===== */
.header {
  position: sticky; top: 0; z-index: 40; background: var(--paper);
  border-bottom: 1px solid var(--line); height: auto; /* stage9: два ряди — ряд 1 (--header-h) + .site-nav */
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }
/* фаза A (index.html, data-page=onepage): текстова шапка за еталоном .sc-topbar — назва serif 1rem
   ліворуч, праворуч «Кошик · N» (.82rem) і контакт (.82rem, --ink-2; на <1024 схований) */
.brand--text { gap: 0; }
.brand--text .brand__name { font-family: var(--serif); font-size: 1rem; }
.header__cart { font-size: .82rem; font-weight: 500; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.header__contact { font-size: .82rem; color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
body[data-page="onepage"] .header__tools { gap: 1.4rem; }
@media (max-width: 1023px) { .header__contact { display: none; } }
.testline { margin: 0; font-size: .74rem; color: var(--ink-3); line-height: 1.3; }
.testline .wrap { display: block; padding-block: .35rem; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.brand__name { font-family: var(--serif); font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__tag { font-size: .68rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav__list { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
  .nav__link { text-decoration: none; color: var(--ink-2); font-size: .88rem; font-weight: 500; }
  .nav__link[aria-current="page"] { color: var(--ink); text-decoration: underline; }
}
.header__tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.header__cta { min-height: 40px; padding: .5rem 1rem; font-size: .84rem; }
.burger { width: 40px; height: 40px; min-width: 44px; min-height: 44px; border: 1px solid var(--line-ink); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border-radius: var(--radius); }
.burger span { display: block; width: 18px; height: 1px; background: var(--ink); }

.menu { position: fixed; inset: 0; top: var(--header-h); background: var(--paper); z-index: 39; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; overflow-y: auto; }
.menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu__list { list-style: none; margin: 0; padding: 1.4rem 0; display: flex; flex-direction: column; }
.menu__link { display: flex; justify-content: space-between; padding: .9rem var(--gutter); text-decoration: none; color: var(--ink); font-size: 1rem; border-bottom: 1px solid var(--line); min-height: 44px; align-items: center; }
.menu__foot { padding: 1rem var(--gutter); }

.footer { padding: 1.6rem 0 2.4rem; /* stage4 п.2: бічні відступи дає .wrap усередині, без подвійного gutter */ font-size: .82rem; color: var(--ink-3); border-top: 1px solid var(--line); }
.colophon { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.colophon__mark { width: 40px; height: 40px; }
.colophon__cols { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; flex: 1; }
.colophon__col { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; }
.colophon__col a { text-decoration: none; color: var(--ink-2); }
.footer__ask { margin: 1rem 0; }
.footer__ask-row { display: flex; gap: .5rem; margin-top: .4rem; }
.footer__ask-row input { flex: 1; border: 1px solid var(--line-ink); padding: .55rem .7rem; font-family: var(--sans); background: var(--paper); border-radius: var(--radius); }
.footer__bottom { margin-top: .5rem; }
.footer__testband { color: var(--ink-3); font-size: .74rem; }

/* ===== 1. ГЕРОЙ (візуал sc-hero, механіка oh-hero) — числа з REFERENCE_STAGE1/showcase.css ===== */
.oh-hero { padding-block: 0; }
.oh-hero__grid {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 780px);
  align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.oh-hero__text { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.oh-hero .eyebrow { margin-bottom: 0; }
.oh-hero__h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.03; letter-spacing: -.02em; margin: 0; max-width: 18ch; }
.oh-hero .lede { font-size: .98rem; max-width: 42ch; margin: 0; }
.oh-hero .btn { align-self: flex-start; min-height: 48px; padding: .8rem 1.5rem; font-size: .92rem; border-radius: 0; }
/* вторинна дія — тихе текстове посилання під кнопкою (еталон .sc-facts__link) */
.oh-hero__individual {
  display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 500;
  text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px;
}
.oh-hero__media { position: relative; height: 560px; max-height: 560px; overflow: hidden; border: 1px solid var(--line); margin: 0; }
/* явна висота рамки — щоб object-position 50% 38% працював (без неї рамка ріже кадр зверху) */
.oh-hero__media .frame, .oh-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; max-height: 560px; }
.oh-hero__media .frame--honest { max-width: none !important; }
#hero-caption { display: none; }
/* рядок фактів (еталон .sc-facts): .82rem, тонка лінія знизу */
.oh-hero__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.5rem;
  padding-block: .9rem; margin: 0 auto; font-size: .82rem; color: var(--ink-2); /* stage4 п.2: margin auto — той самий контейнер, що .wrap */
  border-bottom: 1px solid var(--line);
}
.oh-hero__facts b { color: var(--ink); font-weight: 500; }
@media (max-width: 1023px) {
  .oh-hero__grid { grid-template-columns: 1fr; gap: 0; padding-block: 0 1.2rem; align-items: stretch; }
  /* як в еталоні: фото в межах gutter (не full-bleed), текст із додатковим внутрішнім gutter */
  .oh-hero__media { order: -1; height: 45vh; max-height: 45vh; margin: 0; border: none; border-bottom: 1px solid var(--line); }
  .oh-hero__media .frame, .oh-hero__media img { max-height: 45vh; }
  .oh-hero__text { padding-top: 1.2rem; padding-inline: var(--gutter); gap: .8rem; }
  .oh-hero__individual { min-height: 40px; }
  .oh-hero__facts { padding-block: .6rem .8rem; gap: .2rem 1rem; }
}

/* ===== 2. НАВІГАЦІЯ ФОРМАТІВ (sc-nav візуал, .fmt-nav механіка — sticky, активний чип) ===== */
.fmt-nav {
  position: sticky; top: var(--header-h); z-index: 30; background: var(--paper);
  border-bottom: 1px solid var(--line); padding-block: .5rem;
}
.fmt-nav__row { display: flex; gap: .5rem; overflow-x: auto; list-style: none; margin: 0; padding: 0 var(--gutter); scrollbar-width: none; }
.fmt-nav__row::-webkit-scrollbar { display: none; }
.fmt-nav__chip {
  flex: none; white-space: nowrap; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-ink); border-radius: 0;
  padding: .55rem .9rem; min-height: 44px; display: inline-flex; align-items: center;
  font-size: .82rem; line-height: 1.15;
}
.fmt-nav__chip[aria-current="true"] { border: 2px solid var(--ink); color: var(--ink); font-weight: 500; padding: calc(.55rem - 1px) calc(.9rem - 1px); }
/* ≥1024: звичайна (не липка) строка на всю ширину, як .sc-nav еталону (рівні комірки) */
@media (min-width: 1024px) {
  .fmt-nav { position: static; padding-block: 1rem; border-bottom: none; }
  .fmt-nav__row { max-width: 1240px; margin: 0 auto; gap: .4rem; overflow: visible; }
  .fmt-nav__chip { flex: 1 1 0; min-width: 0; white-space: normal; padding: .5rem .55rem; font-size: .76rem; }
  .fmt-nav__chip[aria-current="true"] { padding: calc(.5rem - 1px) calc(.55rem - 1px); }
}

/* ===== 3. КАРТКИ ФОРМАТІВ (sc-card візуал, .cmp-card механіка) ===== */
.mob-section .wrap, .desk-section .wrap { }
.section-head { margin-bottom: 1rem; }
/* stage4 п.2: номер над заголовком, а не перед ним — лівий край h2 = лівий край контейнера */
.section-head__row { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.section-head__aside { color: var(--ink-2); font-size: .9rem; margin: .3rem 0 0; }
.cmp-slot, .lane { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.lane { display: flex; overflow-x: auto; gap: .8rem; padding-bottom: .3rem; }
.lane > * { flex: 0 0 auto; width: 220px; }
/* stage4 п.4: «Готово зараз» — сітка в загальному контейнері: 2 колонки на телефоні, 4 на ≥1024 */
.ready-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 561px) { .ready-grid { gap: 1rem 1.1rem; } }
@media (min-width: 1024px) { .ready-grid { grid-template-columns: repeat(4, 1fr); } }
.ready-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ready-card__note { margin: 0; }
.cmp-slot--catalog { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.1rem; position: relative; }
@media (max-width: 560px) {
  .cmp-slot { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .cmp-slot--catalog { gap: .6rem; }
}
/* ≥1024 (фаза A, еталон .sc-grid--4): 4 колонки; якорі-роздільники рядів (#basket/#other, span з
   inline display:block) виводимо з потоку сітки — вони лишаються цілями якорів (верх каталогу) */
@media (min-width: 1024px) {
  .cmp-slot--catalog { grid-template-columns: repeat(4, 1fr); }
  .cmp-slot--catalog > span[aria-hidden] { position: absolute !important; top: 0; left: 0; height: 0 !important; }
}
.section-head--mob .eyebrow { margin-bottom: .5rem; }
.section-head--mob .h2 { margin-bottom: .5rem; }
.section-head--mob .lede { margin-bottom: 0; }
.section-head--mob { margin-bottom: 1.4rem; }
.cmp-slot__note { margin: .8rem 0 0; font-size: .8rem; }
/* картка каталогу (catalogCard без обгортки .cmp-card__body): відступи тіла як .sc-card__body,
   телефон — .55rem .6rem .65rem */
.cmp-slot--catalog .cmp-card { padding-bottom: 1rem; }
.cmp-slot--catalog .cmp-card > :not(.cmp-card__media) { margin-left: .9rem; margin-right: .9rem; }
.cmp-slot--catalog .cmp-card__title { margin-top: .8rem; }
.cmp-slot--catalog .cmp-card__price { margin-top: .35rem; }
.cmp-slot--catalog .cmp-card__price .badge { margin-left: .5rem; vertical-align: middle; }
.cmp-slot--catalog .cmp-card__cta { margin-top: auto; padding-top: .3rem; }
@media (max-width: 560px) {
  .cmp-slot--catalog .cmp-card { padding-bottom: .65rem; }
  .cmp-slot--catalog .cmp-card > :not(.cmp-card__media) { margin-left: .6rem; margin-right: .6rem; }
  .cmp-slot--catalog .cmp-card__title { margin-top: .55rem; }
  .cmp-slot--catalog .cmp-card__cta { font-size: .78rem; } /* min-height 44 лишається (тап-ціль, T6) */
}
/* коло 2: ступені розміру одним рядком тексту, розмір шрифту як .sc-card__note (.82rem),
   перенос лише між ступенями (кожна ступінь — nowrap-одиниця) */
.cmp-card__steps { font-size: .82rem; color: var(--ink-3); margin: .2rem 0 0; line-height: 1.4; }
.cmp-card__step { white-space: nowrap; }

.cmp-card, .format-card, .ready-card, .mono-week-card, .now-mono {
  border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column;
  border-radius: var(--radius);
}
.cmp-card--mini { flex-direction: column; }
.cmp-card__media, .format-card__media, .ready-card__media, .mono-week-card__media, .now-mono__media {
  position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--line);
  border: none; padding: 0; width: 100%; display: block; cursor: pointer;
}
.cmp-card__media .frame, .cmp-card__media img,
.ready-card__media .frame, .ready-card__media img,
.mono-week-card__media .frame, .mono-week-card__media img,
.now-mono__media .frame, .now-mono__media img { width: 100%; height: 100%; object-fit: cover; }
.frame--plate { display: flex; align-items: center; justify-content: center; background: var(--line); color: var(--ink-3); font-family: var(--serif); font-size: 1.4rem; }
.cmp-card__body, .ready-card__body, .mono-week-card__body, .now-mono__body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.cmp-card--mini .cmp-card__body { padding: .6rem .7rem .75rem; gap: .2rem; }
/* stage4 п.3/п.4: міні-картки без .cmp-card__body (живі квіти) — ті самі внутрішні відступи */
.cmp-card--mini > :not(.cmp-card__media):not(.cmp-card__body) { margin-left: .7rem; margin-right: .7rem; }
.cmp-card--mini > .cmp-card__title { margin-top: .6rem; }
.cmp-card--mini > .cmp-card__cta { margin-bottom: .75rem; }
.ready-card__body { padding: .6rem .7rem .75rem; gap: .2rem; }
.vases-more-row { margin: 1rem 0 0; }
.vases-grid--rest { margin-top: 1.1rem; }
.vases-grid--rest[hidden] { display: none; }
@media (max-width: 560px) { .vases-grid--rest { margin-top: .6rem; } }
.cmp-card__title, .format-card__title, .ready-card__title, .now-mono__title { font-family: var(--serif); font-size: 1.05rem; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.line__title, .expand__title, .checkout__mini-summary { overflow-wrap: anywhere; }
/* довгі назви (C20): назва картки ≤3 рядки, рядок кошика ≤2 (повний текст — у title/ліст), ціна одним рядком */
.cmp-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.line__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.summary-line > span:first-child { min-width: 0; }
.summary-line .price { white-space: nowrap; flex: none; align-self: flex-start; }
.cmp-card--mini .cmp-card__title { font-size: .92rem; }
.cmp-card__price, .ready-card .price { font-weight: 500; font-size: .95rem; margin: 0; }
.cmp-card__range { margin: 0; font-size: .82rem; }
.cmp-card__note { color: var(--ink-3); font-size: .82rem; margin: 0; }

/* ступені розміру — ОДНИМ рядком, текстом, без коробок (механіка .size-pill лишається,
   але клацабельна лінія, а не заливні пілюлі; вибрана = підкреслена ink) */
.cmp-card__sizes, .format-card__pills, .mono-week-card__pills, .now-mono__pills {
  display: flex !important; flex-wrap: wrap; gap: 0; margin: .2rem 0 .1rem;
  grid-template-columns: none !important;
}
.size-pill {
  border: none; background: none; padding: .3rem .5rem .3rem 0; margin: 0;
  font-size: .82rem; color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; gap: .25rem;
  cursor: pointer; font-family: inherit;
}
.size-pill:not(:last-child)::after { content: "·"; color: var(--ink-3); margin-left: .5rem; }
.size-pill__name { color: var(--ink-2); }
.size-pill__price { color: var(--ink); font-weight: 500; }
.size-pill.is-selected .size-pill__name, .size-pill:focus .size-pill__name { color: var(--ink); text-decoration: underline; }

.cmp-card__cta, .ready-card__cta, .mono-week-card__cta { margin-top: .3rem; align-self: flex-start; }
.cmp-card__more, .format-card__more { border: none; margin-top: .3rem; }
.cmp-card__more summary, .format-card__more summary { font-size: .82rem; }
.cmp-card__more-cols, .stays-changes__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .5rem; }
@media (max-width: 480px) { .cmp-card__more-cols, .stays-changes__cols { grid-template-columns: 1fr; } }
.expand__label { font-weight: 500; font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .3rem; }

.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.format-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .format-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .format-grid { grid-template-columns: 1fr; } }
.format-quiet-bar { font-size: .82rem; color: var(--ink-3); margin-top: 1rem; }

.ready-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ready-card__mini { font-size: .82rem; color: var(--ink-3); margin: 0; }

.now__sub { font-weight: 500; font-size: .95rem; margin: .6rem 0; display: flex; align-items: center; gap: .5rem; }
#now-mono-head { margin-top: 1.6rem; }
/* stage4 п.5: монобукет тижня — фото 4:5 з фіксованою пропорцією поруч з інформацією; ніколи не на всю ширину */
.now-mono { flex-direction: row; align-items: stretch; gap: 0; }
.now-mono__media { flex: 0 0 min(45vw, 200px); width: auto; align-self: flex-start; }
.now-mono__body { min-width: 0; }
.now-mono__cta { align-self: flex-start; margin-top: .2rem; }
@media (min-width: 1024px) { .now-mono { max-width: 860px; } .now-mono__media { flex-basis: 420px; } }
.now__season { margin-top: .8rem; }

/* ===== 4. ЛИСТ ВИБОРУ (.expand — sc-eталон: рамка/скролл/липкий низ) ===== */
#expand-slot:not([hidden]) { position: fixed; inset: 0; z-index: 60; }
.expand {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  max-height: 92vh; background: var(--paper); border-top: 1px solid var(--line-ink);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; flex-direction: column;
  box-shadow: none;
}
@media (min-width: 1024px) {
  .expand { left: 50%; right: auto; bottom: 4vh; top: 4vh; width: min(720px, 90vw); max-height: 92vh; transform: translateX(-50%); border: 1px solid var(--line-ink); border-radius: var(--radius); }
}
.expand__handle { width: 36px; height: 4px; background: var(--line-ink); border-radius: 2px; margin: .6rem auto .2rem; flex: none; }
.expand__close {
  position: absolute; top: .6rem; right: .6rem; width: 40px; height: 40px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--line-ink); background: var(--paper); border-radius: var(--radius); cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.expand__scroll { overflow-y: auto; padding: .6rem var(--gutter) 1.4rem; flex: 1; min-height: 0; }
.expand__grid { display: grid; gap: 1rem; }
.expand__media { border: 1px solid var(--line); aspect-ratio: 4/5; overflow: hidden; max-width: 260px; }
.expand__media .frame, .expand__media img { width: 100%; height: 100%; object-fit: cover; }
/* stage4 п.3 (власник): у панелі покупки фото компактніше, ніж у вітрині — на телефоні висота ≤28vh
   (на 360×640 ≈180 px), щоб розмір, ціна і «Додати» були видні без прокрутки; кроп 4:5 зберігається. */
@media (max-width: 767px) {
  .expand__media { height: min(28vh, 220px); width: auto; aspect-ratio: 4/5; max-width: none; }
}
.product-thumbs { display: flex; gap: .4rem; margin-top: .4rem; }
.product-thumb { border: 1px solid var(--line-ink); width: 44px; height: 44px; padding: 0; overflow: hidden; cursor: pointer; background: none; border-radius: var(--radius); }
.expand__title { margin: .2rem 0 .3rem; }
.expand__body .lede, .product-inactive { font-size: .88rem; color: var(--ink-2); }

.variants-grid { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0 .8rem; }
.variant-tile {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: .3rem .6rem;
  border: 1px solid var(--line-ink); border-radius: var(--radius); padding: .6rem .8rem; min-height: 44px;
  cursor: pointer; font-size: .88rem;
}
.variant-tile input[type="radio"] { grid-row: 1 / 3; accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.variant-tile__name { font-weight: 500; }
.variant-tile__price { font-weight: 500; text-align: right; }
.variant-tile__note { grid-column: 2 / 4; }
.variant-tile:has(input:checked) { border: 2px solid var(--ink); padding: calc(.6rem - 1px) calc(.8rem - 1px); }
.variant-tile:has(input:checked) .variant-tile__name::before { content: "✓ "; }

.expand__sticky {
  border-top: 1px solid var(--line); background: var(--paper); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: .6rem .8rem; flex: none; flex-wrap: nowrap;
}
.expand__sticky .price--now { font-size: 1rem; font-weight: 500; flex: none; }
.expand__sticky .btn-row { flex-wrap: nowrap; gap: .5rem; align-items: center; min-width: 0; }
.expand__sticky #product-consult-link { display: none; } /* дублює .expand__consult-mob у прокручуваній зоні — у липкому низі лише ціна + «Додати» */
.price--now { font-size: 1.1rem; font-weight: 500; }
.expand__consult-mob { align-self: flex-start; }

#sheet-overlay:not([hidden]) { position: fixed; inset: 0; background: rgba(17,17,16,.32); z-index: 55; }

/* ===== 5. КОШИК / ОФОРМЛЕННЯ / КОНСУЛЬТАЦІЯ (.side-panel) ===== */
#side-overlay:not([hidden]) { position: fixed; inset: 0; background: rgba(17,17,16,.32); z-index: 65; }
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--paper); border-left: 1px solid var(--line-ink); z-index: 70;
  display: flex; flex-direction: column; box-shadow: none;
  transform: translateX(100%); transition: transform .28s ease;
}
.side-panel.is-open { transform: translateX(0); }
.side-panel--wide, .side-panel--consult { width: min(480px, 100vw); }
@media (max-width: 1023px) {
  /* мобільний — нижній лист 92vh (як .expand), а не повноекранна панель: над ним лишається
     смуга оверлею, по якій закривають тапом поза межами (як у еталонного .expand) */
  .side-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92vh; max-height: 92vh; border-left: 0; border-top: 1px solid var(--line-ink); transform: translateY(100%); }
  .side-panel.is-open { transform: translateY(0); }
  .side-panel--wide, .side-panel--consult { width: 100%; }
  /* кошик — панель за вмістом (без порожнечі під списком), оформлення/консультація — 92vh */
  .side-panel:not(.side-panel--wide):not(.side-panel--consult) { height: auto; }
  /* MOBILE_SPEC §6.4: екранна клавіатура (html.kb-open) — лист/панель на всю видиму висоту, липкий низ оформлення одним рядком */
  .side-panel, .expand { max-height: min(92vh, calc(var(--vvh, 100vh) - 24px)); }
  html.kb-open .side-panel--wide, html.kb-open .expand { height: var(--vvh, 100vh); max-height: var(--vvh, 100vh); }
  html.kb-open .checkout__sticky { padding-block: .3rem; }
}
.side-panel__inner { display: flex; flex-direction: column; height: 100%; padding: 1rem var(--gutter) 0; position: relative; }
.side-panel__handle { width: 36px; height: 4px; background: var(--line-ink); border-radius: 2px; margin: 0 auto .6rem; }
.side-panel__close {
  position: absolute; top: .8rem; right: var(--gutter); width: 40px; height: 40px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--line-ink); background: var(--paper); border-radius: var(--radius); cursor: pointer;
}
.side-panel__head-row { margin-bottom: .3rem; }

.cart-panel__scroll, .checkout__scroll, .consult-panel__scroll { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 1rem; }
.checkout__scroll { padding-bottom: 5rem; }
.cart-empty { color: var(--ink-2); font-size: .92rem; margin: 1rem 0; }
#cart-lines { display: flex; flex-direction: column; gap: .9rem; }
/* коло 2: рядок товару — мініатюра 72px зліва | назва+варіант+палітра | ціна справа (1 ряд);
   під ним другим рядком — «− 1 +» (44×44, рамка 1px) і текстова лінк-дія «Видалити» */
.line {
  display: grid; grid-template-columns: 72px 1fr auto; grid-template-rows: auto auto;
  column-gap: .8rem; row-gap: .4rem; align-items: start;
  border-bottom: 1px solid var(--line); padding-bottom: .9rem; position: relative;
}
.line__thumb { grid-row: 1 / 3; width: 72px; height: 72px; }
.line__thumb, .line__thumb img, .line img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); display: block; }
.line__info { grid-column: 2; grid-row: 1; min-width: 0; }
.line__title { font-size: .9rem; margin: 0 0 .15rem; font-weight: 500; }
.line__price { grid-column: 3; grid-row: 1; margin: 0; font-weight: 500; font-size: .9rem; white-space: nowrap; }
.line__qty { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: .5rem; }
.line__remove {
  grid-column: 3; grid-row: 2; justify-self: end; align-self: center;
  min-height: 44px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--ink); font-size: .84rem; text-decoration: underline; font-family: inherit;
}
.qty-btn {
  width: 44px; height: 44px; border: 1px solid var(--line-ink); background: var(--paper);
  cursor: pointer; border-radius: var(--radius); font-size: 1rem;
}
.qty-val { min-width: 1.4em; text-align: center; font-size: .92rem; }
.cart-summary { border-top: 1px solid var(--line); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); margin-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: nowrap; }
.cart-summary .summary-line--total { margin: 0; flex: none; font-size: .92rem; }
.cart-summary #to-checkout { flex: none; width: auto; min-height: 40px; padding: .5rem 1.1rem; font-size: .84rem; }
.checkout__totals { border-top: 1px solid var(--line); padding-top: .8rem; }
.summary-line { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; margin-bottom: .4rem; }
.summary-line span:first-child::after { content: " ·"; }
.header__cart-count::before { content: " · "; }
.summary-line--total { font-size: 1rem; font-weight: 500; }

.checkout__mini-summary { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: 1rem; font-size: .88rem; }
.checkout__section { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; font-size: .86rem; color: var(--ink-2); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line-ink); background: var(--paper); padding: .6rem .7rem;
  font-family: var(--sans); font-size: .92rem; color: var(--ink); border-radius: var(--radius); min-height: 44px;
}
.field textarea { min-height: 60px; }
.field[aria-invalid], .field:has(input[aria-invalid="true"]) input { border-color: #B3261E; }
.field__error { color: #B3261E; font-size: .78rem; margin: .2rem 0 0; }
.field-row { display: flex; gap: .6rem; }
.field--narrow { max-width: 110px; }
.method-row, .radio-row-group { display: flex; flex-direction: column; gap: .5rem; }
.radio-row { display: flex; align-items: center; gap: .6rem; font-size: .88rem; min-height: 44px; }
.radio-row input { width: 18px; height: 18px; accent-color: var(--ink); }
.zone-note { color: var(--ink-3); margin-top: .3rem; }

.checkout__sticky { border-top: 1px solid var(--line); background: var(--paper); padding: .4rem var(--gutter) calc(.4rem + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex: none; flex-wrap: nowrap; }
.checkout__sticky .summary-line--total { margin: 0; flex: none; font-size: .9rem; }
.checkout__sticky #to-pay { flex: none; min-height: 44px; padding: .4rem 1rem; font-size: .82rem; }
.checkout__sticky #form-error-summary { flex-basis: 100%; order: -1; margin: 0 0 .3rem; }
.form-error-summary { color: #B3261E; margin: 0 0 .4rem; }

.consult-form { display: flex; flex-direction: column; gap: .8rem; }
.consult__after { margin-top: 1rem; }
.consult__summary { border: 1px solid var(--line); padding: .7rem .9rem; font-size: .86rem; }
.consult-panel__sticky { border-top: 1px solid var(--line); background: var(--paper); padding: .8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom)); }

/* ===== 6. ІНДИВІДУАЛЬНО / ДОВІРА / КОНТАКТИ (візуал sc) ===== */
.oh-individual__grid { display: grid; grid-template-columns: minmax(280px,1fr) minmax(320px,780px); gap: 1.4rem; align-items: center; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.oh-individual__media { border: 1px solid var(--line); aspect-ratio: 4/5; overflow: hidden; margin: 0; }
.oh-individual__media .frame, .oh-individual__media img { width: 100%; height: 100%; object-fit: cover; }
.oh-individual__list { list-style: none; margin: .8rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.oh-individual__list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.oh-individual__list-title { font-weight: 500; }
/* stage4 п.2: без індивідуального зсуву — фото в тому самому контейнері, що й усе інше */
@media (max-width: 1023px) { .oh-individual__grid { grid-template-columns: 1fr; } .oh-individual__media { order: -1; margin: 0; } }
.oh-process { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: .6rem; }
.oh-process li { border: 1px solid var(--line); padding: .7rem .8rem; font-size: .84rem; display: flex; flex-direction: column; gap: .2rem; }
@media (max-width: 700px) { .oh-process { grid-template-columns: repeat(2,1fr); } }

.trust-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
@media (max-width: 900px) { .trust-cols { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .trust-cols { grid-template-columns: 1fr; } }
.oh-contacts p { margin: .4rem 0; font-size: .92rem; }

/* галерея */
/* stage4 п.6: галерея всередині .wrap; прокрутка лише в межах стрічки, snap по кадрах, крайні кадри доступні повністю */
.gallery { overflow: hidden; }
.gallery__track { display: flex; gap: .8rem; padding-bottom: .3rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 0; overscroll-behavior-x: contain; scrollbar-width: thin; }
.gallery__track.is-dragging { scroll-snap-type: none; }
.gallery__item { flex: 0 0 auto; width: 220px; margin: 0; border: 1px solid var(--line); aspect-ratio: 4/5; overflow: hidden; scroll-snap-align: start; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__arrow { width: 40px; height: 40px; min-width: 44px; min-height: 44px; border: 1px solid var(--line-ink); background: var(--paper); cursor: pointer; border-radius: var(--radius); }
.gallery-head-aside { display: flex; align-items: center; gap: 1rem; }
.gallery-arrows { display: flex; gap: .4rem; }

/* ===== M-9. Живі квіти / Вази — статичні секції (2 колонки, sc-card) ===== */
.flowers-grid, .vases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.1rem; }
@media (max-width: 900px) { .flowers-grid, .vases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flowers-grid, .vases-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }

/* блокування прокрутки тіла під час відкритого листа/панелі (лист/кошик/оформлення керують
   position через JS style.top = -scrollY; без position:fixed тут координати миші/тапу і
   getBoundingClientRect розходяться з реальним скролом сторінки) */
body.no-scroll { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.no-scroll .fmt-nav, body.sheet-open .fmt-nav { visibility: hidden; }

/* ===== M-10. Тап-цілі й дрібні прибирання ===== */
.side-panel__close, .expand__close, .qty-btn, .line__remove, .burger, .gallery__arrow { min-width: 44px; min-height: 44px; }
.cmp-card__cta, .arrow-link, .size-pill { min-height: 44px; }
.skip-link { min-height: 44px; display: flex; align-items: center; }
.brand { min-height: 44px; }
.header__cta { min-height: 44px; }
.oh-hero__contact { min-height: 44px; display: inline-flex; align-items: center; }
.colophon__col a, .footer__ask button { min-height: 44px; display: inline-flex; align-items: center; }
/* інлайн-посилання в тексті (довіра, контакти, «Зараз у студії»): тап-зона ≥44 через вертикальний padding — на розкладку рядка не впливає */
.link, .oh-contacts a, .now__season a { padding-block: 1rem; }

/* MOBILE_SPEC: desk-секції (десктопна розкладка «Усі формати», «Є зараз» тощо) — приховані на
   телефоні; мобільні секції (mob-section, .fmt-nav, факти під героєм) — приховані на десктопі. */
@media (max-width: 1023px) { .desk-section, #format-quiet-bar { display: none !important; } }
/* фаза A (рішення за чек-листом власника: «початок каталогу — 4 колонки на 1440, перший ряд
   Авторський букет | Композиція в кошику»): на ≥1024 показуємо той самий каталог #author і ряд
   навігації форматів; дубльовані десктопні секції #formats/#ready/#mono-week (їх зміст є в
   #author/#now) — сховані. ASSUMPTION: власник не заперечує проти єдиної структури на обох екранах. */
@media (min-width: 1024px) { #formats, #ready, #mono-week { display: none !important; } }

/* ===== stage6 (SPEC §4) — нові правила лише з наявних токенів/компонентів; нових кольорів, шрифтів, ефектів немає ===== */
/* Шапка: на ≥768 праворуч адреса → карта, телефон, Instagram, «Кошик · N» (усі .header__contact, .82rem);
   на <768 контакти — компактний рядок #header-sub під шапкою (інлайн-посилання, тап-зона ≥44 через padding-block, як .link) */
@media (min-width: 768px) { .header__contact { display: inline-flex; } .header-sub { display: none; } }
@media (max-width: 1023px) { body[data-page="onepage"] .header__tools { gap: 1rem; } }
.header__addr, .header__phone, .header__ig { white-space: nowrap; }
.header-sub { margin: 0; font-size: .78rem; color: var(--ink-2); line-height: 1.3; }
.header-sub__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .45rem; padding-block: .3rem; border-bottom: 1px solid var(--line); min-width: 0; }
.header-sub__link { color: var(--ink); text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px; padding-block: .8rem; white-space: nowrap; }
.header-sub__dot { color: var(--ink-3); }
/* Плейсхолдер 4:5 замість фото (plants photo:null) — рамка й текст у токенах */
.frame--placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; aspect-ratio: 4/5; background: var(--paper); border: 1px dashed var(--line-ink); color: var(--ink-3); text-align: center; padding: .8rem; box-sizing: border-box; }
.frame--placeholder__text { font-size: .78rem; line-height: 1.35; }
/* Готові роботи: бейдж «Зарезервовано» в тілі картки */
.ready-card__note .badge { margin-right: .2rem; }
/* Лист stem: лічильник стебел (той самий .qty-btn 44×44, що в кошику) */
.stem-qty { display: flex; align-items: center; gap: .6rem; margin: .3rem 0 .5rem; }
.stem-qty__val { min-width: 2.2rem; text-align: center; font-weight: 500; }
.qty-btn:disabled { opacity: .4; cursor: default; }
.line__qty-fixed { min-height: 44px; display: inline-flex; align-items: center; }
/* Крок «Додати вазу?» у листі: 2 колонки міні-карток (як .vases-grid) */
.vase-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .5rem; }
@media (min-width: 768px) { .vase-pick { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
.expand__media[hidden] { display: none; }
/* Лист mono: правило «вид не замінюється» — під ціною/плитками, кольором тексту (не muted) */
.mono-rule { color: var(--ink-2); margin: .2rem 0 .6rem; }
/* Оформлення: повідомлення (409 / перевірка наявності / сервер недоступний) і статус доставки */
.checkout__notice { margin: 0 0 .8rem; padding: .5rem .7rem; border: 1px solid var(--line-ink); border-radius: var(--radius); color: var(--ink-2); }
.checkout__notice[data-kind="warn"] { border-color: var(--ink); color: var(--ink); }
.delivery-status { margin: .5rem 0 .2rem; color: var(--ink); font-weight: 500; }
#calc-delivery { margin-top: .6rem; min-height: 44px; }
#address-fields[hidden], #pickup-note[hidden], #delivery-status[hidden], #calc-delivery[hidden], .checkout__notice[hidden] { display: none; }
/* Портфоліо: «Показати ще» — текстова дія в тому ж рядку, що стрілки */
#gallery-more { min-height: 44px; }
/* Монобукети/інші: картки в тій самій сітці, що каталог (.cmp-slot--catalog) */
#mono-lane .cmp-card__steps + .cmp-card__steps { margin-top: .1rem; }
/* Рослини: розкриття «Догляд» усередині картки */
.cmp-card--mini .cmp-card__more { margin: .2rem 0 0; padding: .1rem .6rem; }
.cmp-card--mini .cmp-card__more summary { min-height: 44px; display: flex; align-items: center; }
/* Липкий низ оформлення: «Разом N ₴ + доставка» довший за старе «Разом N ₴» — на 360 px рядок
   підсумку стискається і переноситься, кнопка «Перейти до оплати» лишається у вьюпорті */
.checkout__sticky .summary-line--total { flex: 1 1 auto; min-width: 0; }
.checkout__sticky .summary-line--total .price { white-space: nowrap; }
@media (max-width: 479px) {
  .checkout__sticky { flex-wrap: wrap; row-gap: .3rem; }
  .checkout__sticky .summary-line--total { flex-basis: 100%; }
  .checkout__sticky #to-pay { flex-basis: 100%; }
}
/* CRITIQUE_STAGE6 п.4: у липкому низі оформлення «Разом» без висячої крапки « ·» (роздільник потрібен
   лише в списку підсумку); на <480 рядок і кнопка — двома рядками (правило вище) */
.checkout__sticky .summary-line--total > span:first-child::after { content: none; }
/* CRITIQUE_STAGE6 п.5: «Кошик · N» — .header__cart є inline-flex, тому текстовий пробіл між «Кошик» і
   лічильником випадав («Кошик· 1»); відступи задаємо gap, роздільник — без пробілів у content */
.header__cart { gap: .3em; }
.header__cart-count::before { content: "·"; margin-right: .3em; }

/* stage6: pay/confirm/cart/checkout на store.css — розкладка сторінок шляху покупки в токенах (замість styles.css) */
.pay, .confirm { max-width: 640px; padding-block: clamp(1.6rem, 4vw, 2.8rem); display: grid; gap: 1rem; }
.pay__actions { flex-direction: column; align-items: stretch; }
@media (min-width: 640px) { .pay__actions { flex-direction: row; } }
.confirm__summary { border-top: 1px solid var(--line); padding-top: .8rem; display: grid; gap: .4rem; }
.confirm__summary p { margin: 0; }
.orders-list { display: grid; gap: .4rem; }
.orders-list__row { display: flex; justify-content: space-between; gap: .6rem; text-decoration: none; border-bottom: 1px solid var(--line); padding: .6rem 0; min-height: 44px; align-items: center; }
body[data-page="cart"] main .wrap, body[data-page="checkout"] main .wrap { padding-block: 1.4rem; }
.checkout { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .checkout { grid-template-columns: 1fr 340px; align-items: start; } }
.checkout__summary { border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius); }
.checkbox-row { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
/* stage6: атрибут hidden має перемагати класи з display (btn/flex/grid) — як у styles.css; потрібно для pay/confirm (retry, pay__actions) */
[hidden] { display: none !important; }

/* stage7: механіка «Продано»/409/альтернативи (ті самі токени; візуал не змінюється) */
.ready-card--sold .ready-card__media { position: relative; cursor: pointer; }
.ready-card--sold .ready-card__media .frame img { opacity: .55; }
.badge--status { position: absolute; top: .5rem; left: .5rem; background: var(--paper); z-index: 2; }
.ready-card__media .frame, .alt-card .frame, .frame--status { position: relative; }
.sold-notice { border: 1px solid var(--ink); border-radius: var(--radius); padding: .8rem .9rem; display: grid; gap: .6rem; }
.sold-notice__title { margin: 0; font-weight: 500; }
.sold-notice__alt-title { margin: .2rem 0 0; }
.alt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.alt-card { display: flex; flex-direction: column; gap: .3rem; color: inherit; text-decoration: none; min-width: 0; }
.alt-card .frame { aspect-ratio: 4 / 5; overflow: hidden; }
.alt-card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alt-card__title { font-size: .85rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.alt-card__price { font-size: .85rem; }

/* ===== stage8: «Каталог» (підрозділ монобукетів), «Оформлення та декор» ===== */
.catalog-sub { margin-top: 2.2rem; }
.catalog-sub .h3 { margin-bottom: .4rem; }
@media (min-width: 1024px) { .cmp-slot--decor { grid-template-columns: repeat(3, 1fr); } }
.cmp-card--text { padding: 1rem .9rem 1rem; justify-content: flex-start; }
.cmp-card--text > * { margin-left: 0 !important; margin-right: 0 !important; }
.cmp-card--text .cmp-card__title { margin-top: .3rem; white-space: normal; }
.cmp-card--text .oh-individual__list li { flex-direction: column; gap: .1rem; }
@media (max-width: 560px) { .cmp-card--text { padding: .75rem .6rem .75rem; } }

/* ===== stage9: багатосторінкова структура (TZ_STAGE9) — ті самі токени, нових кольорів/шрифтів немає ===== */
/* Шапка, ряд 2: посилання розділів (.site-nav). Телефон — горизонтальна прокрутка без переносу, тап-ціль 44;
   ≥1024 — рівний ряд у контейнері. Разом із рядом 1 — рівно 2 рядки на 360/390. */
.site-nav { border-top: 1px solid var(--line); }
.site-nav__row { display: flex; flex-wrap: wrap; gap: 0 .8rem; overflow: visible; }
/* <768: короткі підписи (data-short), без горизонтального переповнення (заборона власника); на 360 допускається перенос ТІЛЬКИ всередині ряду 2 */
@media (max-width: 767px) {
  .site-nav__row { gap: 0 .7rem; }
  .site-nav__full { display: none; }
  .site-nav__link::before { content: attr(data-short); }
}
@media (max-width: 399px) { .site-nav__row { gap: 0 .5rem; } .site-nav__link { font-size: .8rem; } }
@media (max-width: 375px) { .site-nav__row { gap: 0 .4rem; } .site-nav__link { font-size: .78rem; letter-spacing: -.01em; } }
.site-nav__link {
  flex: none; white-space: nowrap; text-decoration: none; color: var(--ink-2); min-width: 0;
  font-size: .82rem; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.site-nav__link[aria-current="true"], .site-nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 1024px) { .site-nav__row { gap: 1.8rem; overflow: visible; } .site-nav__link { font-size: .84rem; } }
/* Сторінки розділів: заголовок сторінки */
.page-head { padding-block: clamp(1.4rem, 3vw, 2.4rem) 0; }
.page-head .h2 { margin-bottom: .4rem; }
.page-head .lede { margin-bottom: 0; }
.page-section { padding-block: clamp(1.4rem, 3vw, 2.4rem); }
.flowers-vases-note { margin: 1rem 0 0; }
/* Лист квітки: «своя кількість» (режим stem) поруч із плитками tiers (режим tier) */
.stem-own { border: 1px solid var(--line-ink); border-radius: var(--radius); padding: .5rem .8rem .2rem; margin: .2rem 0 .8rem; }
.stem-own.is-active { border: 2px solid var(--ink); padding: calc(.5rem - 1px) calc(.8rem - 1px) calc(.2rem - 1px); }
.stem-own__label { margin: 0 0 .2rem; font-weight: 500; }
.stem-own.is-active .stem-own__label::before { content: "✓ "; }
/* Візард підбору (лист .expand--custom): кроки, дії у липкому низі */
.wizard { display: flex; flex-direction: column; gap: .4rem; }
.wizard .field { margin-bottom: .4rem; }
.wizard .chips { margin-bottom: .6rem; }
.wizard .chip:disabled { opacity: .45; cursor: default; }
#wizard-format.is-error .variant-tile { border-color: #B3261E; }
.wizard__actions { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
.wizard__actions .btn { flex: 1 1 0; }
.expand__sticky .wizard__actions { gap: .6rem; }
/* product.html на store.css (розкладка з styles.css у токенах store.css) */
.product-back { margin: 1rem 0 0; }
.product-back a { color: var(--ink-2); text-decoration: none; font-size: .86rem; min-height: 44px; display: inline-flex; align-items: center; }
.product { display: grid; gap: 1.2rem; margin-top: .6rem; padding-bottom: 2.4rem; }
.product__head { display: grid; gap: .4rem; }
.product__head .lede { margin-bottom: 0; }
@media (min-width: 1024px) {
  .product { grid-template-columns: 7fr 5fr; column-gap: 2.4rem; row-gap: 1rem; align-items: start; }
  .product__head { grid-column: 2; grid-row: 1; }
  .product__media { grid-column: 1; grid-row: 1 / 3; }
  .product__body { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-total, 92px) + 16px); }
}
.product__media .frame { aspect-ratio: 4 / 5; max-width: 480px; overflow: hidden; border: 1px solid var(--line); }
.product__media .frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .product__media .frame { max-width: 350px; margin-inline: auto; } }
.product .product-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: nowrap; }
.product .product-thumb { width: 84px; height: auto; max-width: 84px; flex: 1 1 84px; min-width: 0; border: 1px solid transparent; }
.product .product-thumb .frame { aspect-ratio: 4 / 5; }
.product .product-thumb:hover, .product .product-thumb:focus-visible { border-color: var(--ink); }
@media (max-width: 389px) { .product .product-thumb { max-width: 78px; } }
.product__body { display: grid; gap: .8rem; align-content: start; }
.product__body .field { max-width: 26rem; }
.product .stays-changes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; border-top: 1px solid var(--line); padding-block: .8rem; }
@media (max-width: 480px) { .product .stays-changes { grid-template-columns: 1fr; } }
.product-terms { margin-top: .5rem; max-width: 60ch; }
.product-inactive { border: 1px solid var(--line-ink); padding: .6rem .9rem; margin-top: 1rem; }
.addons { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }
.addon-row { display: flex; align-items: center; gap: .8rem; padding-block: .5rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.addon-row__title { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .9rem; cursor: pointer; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.product-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--paper); border-top: 1px solid var(--line-ink); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); }
.product-sticky__price { white-space: nowrap; flex: none; }
.product-sticky button { flex: 1; }
@media (min-width: 1024px) { .product-sticky { display: none !important; } }
body[data-page="product"] main { padding-bottom: 4.5rem; }
/* consult.html */
.consult { display: grid; gap: 1.6rem; padding-block: 1.4rem 2.4rem; }
@media (min-width: 1024px) { .consult { grid-template-columns: 5fr 7fr; align-items: start; } }
.consult__media .frame { aspect-ratio: 4 / 5; max-width: 480px; overflow: hidden; border: 1px solid var(--line); }
.consult__media .frame img { width: 100%; height: 100%; object-fit: cover; }
.consult__body { display: grid; gap: .8rem; align-content: start; }
.consult__body .btn { justify-self: start; }
/* delivery.html (колишній info.html) */
.info { max-width: 760px; padding-block: 1.4rem 2.4rem; display: grid; gap: 1.2rem; }
.info__toc { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; border-block: 1px solid var(--line-ink); padding-block: .4rem; }
.info__toc a { font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.info__section { border-top: 1px solid var(--line); padding-top: 1rem; scroll-margin-top: calc(var(--header-total, 92px) + 16px); display: grid; gap: .5rem; align-content: start; }
.info .check-list { font-size: .92rem; color: var(--ink); }
.prose { max-width: 62ch; }
/* portfolio.html: список напрямів під стрічкою */
.dir-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .2rem; }
.dir-list__item { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: center; border-top: 1px solid var(--line); padding-block: .5rem; }
.dir-list__title { font-family: var(--serif); font-size: 1.05rem; }
.dir-list__intro { grid-column: 1; }
.dir-list__item .arrow-link { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 560px) { .dir-list__item { grid-template-columns: 1fr; } .dir-list__item .arrow-link { grid-column: 1; grid-row: auto; } }
/* лист квітки: фото — приклад виду, компактніше (лічильник/плитки видно без прокрутки на 390) */
@media (max-width: 767px) {
  /* фото обтікається текстом (eyebrow, назва, рядок стану), решта — під ним: лічильник і плитки видно без прокрутки навіть на 360×640 */
  .expand__grid--flower { display: block; }
  .expand__media--flower { float: left; width: 100px; height: 125px; margin: 0 .8rem .3rem 0; }
  .expand__grid--flower .expand__label, .expand__grid--flower .stem-own, .expand__grid--flower .chips { clear: both; }
}
/* лист квітки: «своя кількість» одним рядком (підпис · лічильник · сума), плитки монобукета — в один ряд */
.stem-own { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .6rem; padding: .4rem .7rem; }
.stem-own.is-active { padding: calc(.4rem - 1px) calc(.7rem - 1px); }
.stem-own__label { grid-column: 1; margin: 0; }
.stem-own .stem-qty { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.stem-own #stem-sum { grid-column: 1; margin: 0; }
.stem-tiers__label { margin: .2rem 0 .3rem; }
.variants-grid--tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0 0 .6rem; }
.variants-grid--tiers .variant-tile { grid-template-columns: 1fr; text-align: center; padding: .45rem .3rem; gap: .1rem; }
.variants-grid--tiers .variant-tile input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.variants-grid--tiers .variant-tile { position: relative; }
.variants-grid--tiers .variant-tile__price { text-align: center; }
.variants-grid--tiers .variant-tile:has(input:checked) { padding: calc(.45rem - 1px) calc(.3rem - 1px); }
.expand__media--flower + .expand__body .eyebrow { margin-bottom: .2rem; }
/* критика stage9 §3: контактний рядок #header-sub одним рядком і на 360/375 — менший шрифт і відступи,
   «(карта)» сховано на <400; без висячого роздільника */
@media (max-width: 399px) {
  .header-sub { font-size: .74rem; }
  .header-sub__row { gap: 0 .35rem; flex-wrap: nowrap; }
  .header-sub__link { white-space: nowrap; }
  .header-sub__link .muted { display: none; }
}
/* візард: «Почати заново» праворуч від номера кроку */
.wizard__head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.wizard__reset { border: none; background: none; padding: 0; min-height: 44px; font-family: inherit; font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.dir-list__count { grid-column: 2; grid-row: 1 / 3; white-space: nowrap; }
@media (max-width: 560px) { .dir-list__count { grid-column: 1; grid-row: auto; } }