/* Демо-пастелариа — стиль по образцу владельца (24.09.2026): кремовый фон, шоколадный цвет,
   засечные заголовки, фото-карточки со скруглением, кнопки-пилюли.
   Токены: surface/*, text/*, border/*, spacing/*, radius/*. */

@font-face { font-family: 'Gloock'; src: url('../fonts/gloock.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --surface-page: #efe8df;
  --surface-card: #f7f2ec;
  --surface-dark: #22150f;
  --surface-brand: #4a2a1d;
  --surface-brand-hover: #63392a;
  --surface-chip: #3a2e28;
  --text-ink: #24160f;
  --text-muted: #6a5345;
  --text-error: #9e2a1c;
  --surface-field: #fffcf8;
  --border-field: #8c786b;
  --text-on-dark: #f6efe7;
  --text-on-dark-muted: #d9c9bb;
  --border-soft: rgb(36 22 15 / 0.14);
  --border-on-dark: rgb(246 239 231 / 0.28);
  --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 24px; --spacing-6: 40px; --spacing-7: 72px;
  --radius-card: 22px;
  --radius-pill: 999px;
  --gutter: max(var(--spacing-4), 3.2vw);
  --font-display: 'Gloock', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shell: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Отступ под липкую шапку — всегда; плавная прокрутка — только если человек не просил меньше движения. */
html { background: var(--surface-page); scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 17px/1.55 var(--font-body); color: var(--text-ink); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
picture { display: block; height: 100%; }  /* фото заполняет рамку фигуры по высоте, а не встаёт своей пропорцией */
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(32px, 3.4vw, 48px); }
h3 { font-size: 26px; margin-top: var(--spacing-6); }
:focus-visible { outline: 3px solid var(--surface-brand); outline-offset: 3px; border-radius: 6px; }
/* На тёмной полосе и тёмном первом экране коричневая рамка не видна — там она светлая. */
.topbar a:focus-visible, .hero :focus-visible { outline-color: var(--text-on-dark); }

/* ---------- верхняя полоса и шапка ---------- */
.topbar {
  margin: 0; display: flex; justify-content: space-between; gap: var(--spacing-4);
  padding: 8px 46px; background: var(--surface-brand); color: var(--text-on-dark); font-size: 14px;
}
/* Ссылка-телефон — 44 px в высоту для пальца; отрицательные поля не дают полосе вырасти. */
.topbar a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-5);
  max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; padding: var(--spacing-4) var(--gutter);
  background: var(--surface-page);
}
.logo { display: flex; align-items: center; gap: var(--spacing-3); min-height: 44px; text-decoration: none; font-family: var(--font-display); font-size: 34px; line-height: 0.9; color: var(--surface-brand); }
.logo picture { height: auto; flex: none; }
.logo__mark { display: block; width: 48px; height: 48px; }
.logo__text { display: grid; }
.logo small { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: var(--spacing-1); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--spacing-3); text-decoration: none; font-weight: 500; font-size: 16px; }
.nav a:hover { color: var(--surface-brand-hover); }
.nav .lang { font-weight: 700; color: var(--surface-brand); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  min-height: 48px; padding: 12px 26px; border-radius: var(--radius-pill);
  font: 600 16px/1 var(--font-body); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease;
}
.pill--dark { background: var(--surface-brand); color: var(--text-on-dark); }
.pill--dark:hover { background: var(--surface-brand-hover); }
.pill--light { background: var(--text-on-dark); color: var(--surface-brand); }
.pill--light:hover { background: #fff; }

main { max-width: calc(var(--shell) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- первый экран ---------- */
/* Фон — витрина, размытая заранее (tools/images.py); главный предмет — бика, повёрнутая к курсору. */
.hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-card);
  min-height: min(640px, 80svh); display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  background: var(--surface-dark); color: var(--text-on-dark);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 12 8 / 0.8) 0%, rgb(20 12 8 / 0.5) 55%, rgb(20 12 8 / 0.3) 100%); }
.hero__text { max-width: 620px; padding: var(--spacing-7) 0 var(--spacing-7) clamp(24px, 5vw, 64px); }
.hero__product { margin: 0; display: grid; justify-items: center; gap: var(--spacing-5); padding: var(--spacing-6) clamp(24px, 4vw, 56px) var(--spacing-6) 0; }
.hero__product .spin { width: min(100%, 440px); }
.price-tag { display: inline-flex; align-items: baseline; gap: var(--spacing-3); padding: 8px 18px; border-radius: var(--radius-pill); background: var(--surface-chip); font-size: 15px; }
.price-tag b { font-variant-numeric: tabular-nums; }
.tag { display: inline-block; margin: 0 0 var(--spacing-5); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-chip); font-size: 14px; font-weight: 600; }
.hero h1 { font-size: clamp(44px, 6vw, 84px); }
.lead { margin: var(--spacing-5) 0 0; max-width: 46ch; color: var(--text-on-dark-muted); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-5); margin: var(--spacing-6) 0 0; }
.link-light, .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- полоса карточек ---------- */
.strip { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; gap: var(--spacing-4); margin-top: var(--spacing-5); align-items: stretch; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4); }
/* В полосе карточка берёт высоту ряда и ширину колонки. Растяжение по обеим осям отключает aspect-ratio:
   иначе высота ряда (в EN заголовок «From the counter» в две строки) раздувала ширину, и карточки налезали друг на друга. */
.strip .pcard { align-self: stretch; justify-self: stretch; }
/* Карточка продукта: тёмное поле, предмет вращается в центре, подпись с ценой снизу. */
.pcard {
  position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-dark);
  aspect-ratio: 3 / 4; display: grid; place-items: center; padding: var(--spacing-4) var(--spacing-4) 72px;
}
.pcard .spin { width: 100%; }
.pcard figcaption {
  position: absolute; inset: auto 10px 10px 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--spacing-2);
  padding: 10px 14px; border-radius: 14px; background: rgb(247 242 236 / 0.94); color: var(--text-ink); font-size: 15px;
}
.pcard figcaption b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Вращение: картинка держит размер и видна без JS, холст ложится поверх и заменяет её (js/spin.js).
   Подпись для экранного диктора — у самого .spin (role="img" aria-label), картинка после старта холста прячется. */
.spin {
  position: relative; isolation: isolate;
  touch-action: pan-y; touch-action: pan-y pinch-zoom;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.spin img { width: 100%; height: auto; object-fit: contain; }
.spin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spin.is-live img { visibility: hidden; }  /* подпись — у самого .spin (role=img) */
/* Тень касания: вырезанный предмет без неё висит в воздухе. Под холстом, внутри .spin (isolation). */
.spin::after {
  content: ''; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: -3%; height: 9%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent);
}
.wide { margin: 0; border-radius: var(--radius-card); overflow: hidden; min-height: 260px; }
.side { padding: var(--spacing-3) var(--spacing-2); align-self: center; }
.rows { list-style: none; margin: var(--spacing-4) 0 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: var(--spacing-4); padding: 10px 0; border-top: 1px solid var(--border-soft); }
.rows li:last-child { border-bottom: 1px solid var(--border-soft); }
.rows b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- о кафе и заказы ---------- */
.about { display: grid; grid-template-columns: 1fr 1.05fr 0.95fr; gap: var(--spacing-6); margin-top: var(--spacing-7); align-items: center; }
.about figure { margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 4.4; }
.about__dark { background: var(--surface-dark); }
.about .pcard { padding-bottom: 76px; }
.about__text p { color: var(--text-muted); margin: var(--spacing-4) 0 0; }
.rating a { display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: 44px; text-decoration: none; color: var(--text-ink); font-weight: 600; }
.stars { position: relative; display: inline-flex; }
.stars__off, .stars__on { display: inline-flex; gap: 2px; }
.stars__on { position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; }
.stars svg { flex: 0 0 22px; width: 22px; height: 22px; }
.stars__off svg { fill: var(--border-soft); }
.stars__on svg { fill: var(--surface-brand); }

/* ---------- заказ торта ---------- */
.order {
  margin-top: var(--spacing-7); padding: 56px; border-radius: var(--radius-card); background: var(--surface-card);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--spacing-6); align-items: start;
}
.order__intro p { color: var(--text-muted); margin: var(--spacing-4) 0 0; }
.order__intro .note { margin-top: var(--spacing-5); }
.order__alt a { color: var(--text-ink); font-weight: 600; text-underline-offset: 3px; padding-block: 13px; overflow-wrap: anywhere; }
.order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4) var(--spacing-5); }
.f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.f[hidden] { display: none; }
.f--wide { grid-column: 1 / -1; }
.f label { font-weight: 600; font-size: 15px; }
.f__req { color: var(--text-error); }
.f input:not([type=checkbox]), .f select, .f textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-field); border-radius: 12px;
  background: var(--surface-field); color: var(--text-ink); font: 400 16px/1.4 var(--font-body);
}
.f select { appearance: none; padding-right: 40px;
  background: var(--surface-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a2a1d' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
.f textarea { resize: vertical; min-height: 96px; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline-offset: 1px; border-radius: 12px; }
.f.is-bad input, .f.is-bad select, .f.is-bad textarea { border-color: var(--text-error); border-width: 2px; }
.f__hint { margin: 0; font-size: 14px; color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--spacing-3); }
.f__count { font-variant-numeric: tabular-nums; }
.f__err { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-error); }
.f--check { grid-template-columns: 28px 1fr; column-gap: 0; align-items: start; }
.f--check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--surface-brand); }
/* Подпись закрывает промежуток у галочки и даёт зону нажатия не меньше 44 px. */
.f--check label { font-weight: 400; font-size: 15px; padding: 11px 0 11px 12px; margin-block: -11px; }
.f--check .f__link, .f--check .f__err { grid-column: 2; }
.f__link { display: inline-flex; align-items: center; min-height: 44px; width: max-content; font-weight: 600; font-size: 15px; text-underline-offset: 4px; }
.hp { display: none; }
.order__status { margin: var(--spacing-4) 0 0; font-weight: 600; }
.order__status:empty { margin: 0; }  /* пустая, но в дереве: диктор услышит первое сообщение */
.f ::placeholder { color: var(--text-muted); opacity: 1; }
.order__status.is-bad { color: var(--text-error); }
.order__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); margin-top: var(--spacing-5); }
.pill:disabled { opacity: 0.6; cursor: progress; }
.pill--line { background: transparent; color: var(--surface-brand); border: 2px solid var(--surface-brand); cursor: pointer; }
.pill--line:hover { background: var(--surface-brand); color: var(--text-on-dark); }
button.pill { border: 0; cursor: pointer; }
button.pill--line { border: 2px solid var(--surface-brand); }
.order__done { grid-column: 2; padding: var(--spacing-5); border-radius: 18px; background: var(--surface-field); border: 1px solid var(--border-soft); }
.order__done h3 { margin: 0; font-size: 30px; }
.order__done > p { margin: var(--spacing-3) 0 0; color: var(--text-muted); }
.order__summary { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--spacing-5); margin: var(--spacing-5) 0 0; font-size: 15px; }
.order__summary dt { color: var(--text-muted); }
.order__summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- страницы-документы: приватность, «заказ получен» ---------- */
.page { padding-top: var(--spacing-5); }
.doc { max-width: 68ch; margin: var(--spacing-6) auto 0; padding: 56px; border-radius: var(--radius-card); background: var(--surface-card); }
.doc h1 { font-size: clamp(36px, 4.4vw, 56px); }
.doc h2 { font-size: 24px; margin-top: var(--spacing-6); }
.doc p { color: var(--text-muted); margin: var(--spacing-3) 0 0; }
.doc a:not(.pill) { color: var(--text-ink); font-weight: 600; }
.doc p a { padding-block: 13px; overflow-wrap: anywhere; }  /* ссылка в тексте — зона нажатия 44 px без сдвига строк */
.doc__back { margin-top: var(--spacing-6) !important; }
.doc--done { text-align: center; }
.doc--done .doc__back { display: flex; justify-content: center; }

/* WhatsApp в шапке — только на телефоне и только если номер задан (иначе элемента нет в HTML). */
.head__wa { display: none; }

/* ---------- меню ---------- */
.menu { margin-top: var(--spacing-7); padding: 56px; border-radius: var(--radius-card); background: var(--surface-card); }
.menu__cols { columns: 3 260px; column-gap: 48px; margin-top: var(--spacing-5); }
.mgroup { break-inside: avoid; margin-bottom: var(--spacing-6); }
.mgroup h3 { margin: 0 0 var(--spacing-2); font-size: 24px; }
.mgroup ul { list-style: none; margin: 0; padding: 0; }
.mgroup li { display: flex; justify-content: space-between; gap: var(--spacing-3); padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 16px; }
.mgroup b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { max-width: 60ch; color: var(--text-muted); font-size: 14px; margin: 0; }

/* ---------- подвал ---------- */
.foot {
  max-width: calc(var(--shell) + 2 * var(--gutter)); margin: var(--spacing-7) auto 0; padding: var(--spacing-6) var(--gutter) var(--spacing-5);
  display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-6); border-top: 1px solid var(--border-soft);
}
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-5); }
.foot .foot__h { margin: 0 0 var(--spacing-2); font: 700 16px/1.3 var(--font-body); letter-spacing: 0; }  /* h2 по смыслу (разделы подвала), вид — подпись */
.foot p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.foot a { text-decoration: none; }
.foot__list { list-style: none; margin: 0; padding: 0; color: var(--text-muted); font-size: 15px; line-height: 1.4; }
.foot__list a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.foot__cols > div { min-width: 0; }
.foot a:hover { text-decoration: underline; }
.foot__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-4); }
.social { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-brand); }
.social svg { width: 24px; height: 24px; fill: none; stroke: var(--text-on-dark); stroke-width: 1.8; }
.social .dot { fill: var(--text-on-dark); stroke: none; }
.legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-5); margin: 0; font-size: 13px; color: var(--text-muted); }
.legal a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- планшет и телефон ---------- */
@media (max-width: 1020px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .cards { grid-column: 1 / -1; }
  .pcard { aspect-ratio: 4 / 3.6; }
  /* Фото и торт — в ряд, текст под ними на всю ширину (dense: торт встаёт в пустую клетку первого ряда). */
  .about { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .order { grid-template-columns: 1fr; }
  .order__done { grid-column: 1; }
  .about__text { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .topbar { padding: 8px 16px; }
  .menu { padding: 28px; }
  .topbar span { display: none; }
  .head { padding: var(--spacing-3) var(--gutter); gap: var(--spacing-2); }
  .head .pill { padding: 12px 18px; }
  .nav { margin-left: auto; }
  .nav a:not(.lang) { display: none; }
  .head__wa { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-brand); flex: none; }
  .head__wa svg { width: 24px; height: 24px; fill: none; stroke: var(--text-on-dark); stroke-width: 1.6; }
  .head__wa .wa-tail { fill: var(--text-on-dark); stroke: none; }
  .order { padding: 28px 20px; margin-top: var(--spacing-6); }
  .order__grid { grid-template-columns: 1fr; }
  .order__actions .pill { width: 100%; }
  .order__summary { grid-template-columns: 1fr; gap: 2px; }
  .order__summary dd { margin-bottom: 8px; }
  .doc { padding: 28px 20px; }
  .logo { font-size: 28px; }
  .logo { gap: var(--spacing-2); }
  .logo__mark { width: 38px; height: 38px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__bg::after { background: linear-gradient(180deg, rgb(20 12 8 / 0.82) 0%, rgb(20 12 8 / 0.6) 55%, rgb(20 12 8 / 0.42) 100%); }
  .hero__text { padding: var(--spacing-6) var(--spacing-5) 0; }
  .hero__product { padding: var(--spacing-5) var(--spacing-5) var(--spacing-6); }
  .hero__product .spin { width: min(80%, 340px); }
  .strip { grid-template-columns: 1fr; }
  .cards { gap: var(--spacing-3); }
  .pcard { aspect-ratio: 3 / 4.3; padding: var(--spacing-3) var(--spacing-3) 76px; }
  .pcard figcaption { inset: auto 8px 8px 8px; padding: 8px 12px; font-size: 14px; }
  .wide { min-height: 220px; aspect-ratio: 4 / 3; }
  .about { grid-template-columns: 1fr; gap: var(--spacing-5); }
  .foot { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__side { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 400px) {
  .logo { font-size: 24px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo small { font-size: 11px; }
}
/* Самые узкие экраны (320 px, крупный шрифт в системе): шапка с WhatsApp и «Ligar» помещается. */
@media (max-width: 340px) {
  .head { gap: 4px; }
  .head .pill { padding: 12px 14px; }
  .logo { gap: 6px; }
  .logo__mark { width: 30px; height: 30px; }
}