@font-face {
  font-family: Dela;
  src: url('assets/fonts/DelaGothicOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Ekaterina;
  src: url('assets/fonts/ekaterinavelikayatwo.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --forest: #313d2a;
  --tea: #bbd6b5;
  --paper: #f1f1f1;
  --muted: #c5cfbd;
  --line: #6b7d5e;
  --display: Dela, Arial, sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --radius: 22px;
  --section-space: 88px;
  --panel-gutter: 16px;
  --panel-inset: 14px;
  --hero-gutter: calc(var(--panel-gutter) + var(--panel-inset));
  /* Layers: header 10, keyboard skip link 20. */
  --header-layer: 10;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 32px; }
body {
  margin: 0;
  background: var(--forest);
  color: var(--paper);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a, select, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, select, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.5vw, 49px); line-height: 1.28; letter-spacing: -.028em; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: var(--tea); color: var(--forest); }
:where(button, a, select, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 20; left: 24px; top: 12px;
  padding: 12px 20px; border-radius: 24px; background: var(--paper);
  color: var(--forest); transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.container { width: min(1184px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.light-section { color-scheme: light; background: var(--tea); color: var(--forest); }
.about, .menu, .boxes, .order { position: relative; isolation: isolate; }
.about, .order {
  --surface-pattern-opacity: .3;
  --surface-pattern-filter: brightness(.55) saturate(.9);
}
.menu, .boxes {
  --surface-pattern-opacity: .2;
  --surface-pattern-filter: none;
}
.about::before, .menu::before, .boxes::before, .order::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Cover wide screens without leaving the 1500px tile's side edges visible. */
  background: url('assets/brand-extra-01.png') center top / max(100%, 1500px) auto repeat-y;
  opacity: var(--surface-pattern-opacity);
  filter: var(--surface-pattern-filter);
}
.about > *, .menu > *, .boxes > *, .order > * { position: relative; z-index: 1; }
.script { font-family: Ekaterina, Georgia, serif; font-weight: 400; letter-spacing: 0; }
.eyebrow { font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* One icon family, independent of text-font metrics. Source: Tabler, MIT. */
.icon {
  display: inline-block; width: 20px; height: 20px; flex: 0 0 20px;
  background: currentColor; vertical-align: middle; pointer-events: none;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.icon-arrow-up-right { --icon: url('assets/icons/arrow-up-right.svg'); }
.icon-arrow-down { --icon: url('assets/icons/arrow-down.svg'); }
.icon-arrow-up { --icon: url('assets/icons/arrow-up.svg'); }
.icon-menu { --icon: url('assets/icons/menu-2.svg'); }
.icon-plus { --icon: url('assets/icons/plus.svg'); }
.icon-chevron-down { --icon: url('assets/icons/chevron-down.svg'); }

.button {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 52px; padding: 15px 24px;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 14px/20px var(--body); white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.button-light { background: var(--tea); color: var(--forest); }
.button-outline { background: transparent; color: var(--tea); border-color: var(--line); }
.button:active, .tabs button:active, .nav-vk:active { transform: translateY(1px); }
.text-link, .price-link, .footer-price, .footer-bottom > a {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 44px; font-size: 14px; line-height: 1.3;
}
.text-link, .price-link { border-bottom: 1px solid currentColor; }
.text-link { font-weight: 600; padding-block: 10px; }
.text-link .icon, .price-link .icon, .footer-price .icon {
  width: 18px; height: 18px; flex-basis: 18px;
}
.button .icon, .text-link .icon, .price-link .icon {
  transition: transform .2s;
}

/* Navigation: one line on desktop, a deliberate disclosure on small screens. */
.header {
  position: absolute; z-index: var(--header-layer); top: 16px; left: 50%;
  transform: translateX(-50%); width: calc(100% - 2 * var(--panel-gutter));
  min-height: 72px; padding: 10px 12px 10px var(--panel-inset);
  display: flex; align-items: center; gap: 26px;
  background: var(--paper); color: var(--forest); color-scheme: light;
  border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; }
.brand > img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; }
.brand strong { display: block; font-size: 14px; line-height: 1.35; }
.brand small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.4; color: #596551; }
.navigation { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.navigation > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; white-space: nowrap; }
.nav-vk {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 44px; padding: 11px 17px; border: 1px solid #879c7e;
  border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 20px;
  white-space: nowrap; transition: background-color .2s, transform .2s;
}
.nav-vk .icon { width: 18px; height: 18px; flex-basis: 18px; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 6px; border: 0; background: none;
  color: var(--forest); font-size: 13px; font-weight: 600; line-height: 20px;
}
.nav-toggle[aria-expanded="true"] .icon { --icon: url('assets/icons/x.svg'); }

/* The original lettering is cropped into a reference-led two-line lockup. */
.hero { position: relative; isolation: isolate; min-height: 100dvh; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/brand-extra-01.png') center 48% / 1500px; opacity: .2;
}
.hero-inner {
  --hero-edge-space: clamp(112px, 13dvh, 152px);
  width: calc(100% - 2 * var(--hero-gutter)); margin-inline: auto;
  min-height: inherit; display: grid; grid-template-rows: auto auto;
  align-content: center; justify-items: start;
  gap: clamp(34px, 5dvh, 48px); text-align: left;
  padding-block: var(--hero-edge-space);
  padding-block-end: max(var(--hero-edge-space), env(safe-area-inset-bottom));
}
.hero-brand {
  display: grid; justify-items: start;
  gap: clamp(4px, .8dvh, 9px); width: min(92vw, 125dvh, 1500px); min-width: 0;
}
.hero-lockup { width: 100%; min-width: 0; }
.hero-wordmark {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: clamp(12px, 2.1vw, 32px); width: 100%;
}
/* Exact alpha bounds in the existing 2000 x 2000 PNG, not page coordinates.
   The calligraphy is baked into the first fragment and remains untouched. */
.hero-word.hero-word-code {
  --source-x: 167; --source-y: 671; --source-width: 696; --source-height: 393;
  width: 41.75%;
}
.hero-word.hero-word-taste {
  --source-x: 631; --source-y: 1106; --source-width: 1203; --source-height: 225;
  width: 72.17%; margin-inline-start: 27.83%;
}
.hero-word { display: block; position: relative; width: 100%; aspect-ratio: var(--source-width) / var(--source-height); overflow: hidden; }
.hero-word img {
  position: absolute; width: calc(2000 / var(--source-width) * 100%); max-width: none;
  left: calc(-1 * var(--source-x) / var(--source-width) * 100%);
  top: calc(-1 * var(--source-y) / var(--source-height) * 100%);
}
.hero-cta {
  --hero-cta-optical-offset: clamp(8px, 1.2dvh, 12px);
  justify-self: center; min-width: 226px; min-height: 56px;
  translate: 0 var(--hero-cta-optical-offset);
}

@media (max-width: 850px) {
  .hero-brand { width: min(100%, 108dvh); }
  .hero-wordmark { gap: clamp(12px, 2.4vw, 18px); }
  .hero-word.hero-word-code { width: 55%; }
  .hero-word.hero-word-taste { width: 92%; margin-inline-start: 8%; }
}

/* An airy brand introduction with a stable, straight photo edge. */
.about { padding-block: 80px 84px; }
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: center; }
.about h2 { font-size: clamp(29px, 3vw, 42px); line-height: 1.32; }
.about h2 .script { display: block; font-size: 1.55em; line-height: 1.12; margin: 6px 0 0 0; }
.about-copy > p { max-width: 420px; margin-top: 25px; line-height: 1.75; }
.about .text-link { margin-top: 24px; }
.about-photo { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--forest); }
.about-photo img { width: 100%; height: 100%; object-fit: contain; }

.section-heading { margin-bottom: 34px; }
.section-heading > p { color: var(--muted); margin-top: 18px; max-width: 500px; }
.menu { padding-bottom: 56px; }
.menu-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 46px; padding: 12px 21px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--tea); background: transparent;
  font-size: 14px; line-height: 20px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.tabs button[aria-selected="true"] { background: var(--tea); border-color: var(--tea); color: var(--forest); }
.tabs button > span { font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.price-link { font-size: 13px; white-space: nowrap; color: var(--tea); }
/* Four portrait columns keep the full dish visible without turning each image into a poster. */
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; }
.product { display: grid; grid-template-rows: subgrid; grid-row: span 7; margin-bottom: 40px; }
.product-copy { display: contents; }
.product-photo { aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #35432e; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; }
/* Фото наборов из прайса снято в ландшафте и на сплошном фоне, поэтому заполняет рамку, а не вписывается в неё. */
.product-photo-cover img { object-fit: cover; }
.product h3 { padding: 20px 1px 12px; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; text-wrap: pretty; }
.product-desc { padding: 0 1px 12px; color: var(--muted); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.product-desc:empty { padding: 0; }
.portion { padding-bottom: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.product-facts { padding-bottom: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; }
.price-amount {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  font-family: var(--display); font-size: 23px; line-height: 1.35;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--tea);
}
.currency { display: inline-block; margin-left: .24em; font: 500 .88em/1 var(--body); letter-spacing: 0; }
.price-unit { font: 12px/1.4 var(--body); color: var(--muted); }
.product-action, .box-add {
  display: inline-flex; align-items: center; justify-content: center; align-self: end;
  min-height: 46px; margin-top: 18px; padding: 11px 18px; border: 1px solid var(--tea);
  border-radius: 999px; background: transparent; color: var(--tea); font-size: 13px; font-weight: 700;
  transition: background-color .2s, color .2s, transform .2s;
}
.show-more { display: flex; margin: 0 auto; min-width: 208px; }
.menu-note { margin: 24px auto 0; max-width: 680px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }

/* Natural portrait media sits beside the data, so it is neither cropped nor letterboxed. */
.boxes { padding-top: 40px; }
.box-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.box-card {
  display: grid; grid-template-columns: clamp(240px, 28vw, 340px) minmax(0, 1fr);
  align-items: start; border: 1px solid #607153; border-radius: var(--radius);
  overflow: hidden; background: #35432e;
}
.box-photo {
  display: block; align-self: start; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: contain; background: #293622;
}
.box-copy { display: flex; flex-direction: column; flex: 1; padding: 28px; min-width: 0; }
.box-card h3 { font-size: 22px; line-height: 1.4; letter-spacing: -.02em; text-wrap: pretty; }
.box-card p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 14px; }
.box-size-table-wrap { margin-top: auto; padding-top: 24px; }
.box-size-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.box-size-table th, .box-size-table td { padding: 9px 8px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.35; transition: background-color .16s, color .16s; }
.box-size-table thead th { padding-top: 0; padding-bottom: 8px; border-top: 0; color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.box-size-table th:first-child { width: 25%; padding-left: 10px; text-align: left; }
.box-size-table th:nth-child(2) { width: 31%; }
.box-size-table th:nth-child(3) { width: 27%; }
.box-size-table th:last-child, .box-size-table td:last-child { width: 17%; padding-right: 10px; }
.box-size-table tbody th { font-weight: 400; }
.box-size-table tbody label { display: flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; color: inherit; }
.box-size-radio { width: 15px; height: 15px; margin: 0; accent-color: var(--tea); cursor: pointer; }
.box-size-table tbody tr.is-selected > * { background: var(--forest); color: var(--tea); }
.box-size-table tbody tr.is-selected > :first-child { border-radius: 10px 0 0 10px; }
.box-size-table tbody tr.is-selected > :last-child { border-radius: 0 10px 10px 0; }
.box-size-radio:focus-visible { outline: 2px solid var(--tea); outline-offset: 3px; }
.box-add { width: 100%; margin-top: 18px; }
.box-price-fallback { display: inline-flex; margin-top: 24px; color: var(--tea); }
.sets-link { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 30px; }
.sets-link p { color: var(--muted); font-size: 14px; max-width: 550px; }
.sets-link .text-link { flex-shrink: 0; color: var(--tea); }

/* Intentional inverse surface: reading the terms and making contact. */
.order { background: var(--tea); color: var(--forest); --muted: #45513e; --line: #94ad8b; --order-title-size: clamp(30px, 3vw, 43px); }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.order h2 { font-size: var(--order-title-size); line-height: 1.3; }
.order-heading > p { max-width: 370px; margin-top: 24px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.order .button { margin-top: 28px; min-width: 202px; background: var(--forest); color: var(--tea); }
.order-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.order-facts strong { display: block; font: 400 22px/1.45 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.order-facts > div > span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
details { border-top: 1px solid var(--line); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 21px 0; font-size: 15px; line-height: 1.5; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary .icon { width: 18px; height: 18px; flex-basis: 18px; transition: transform .2s; }
details[open] summary .icon { transform: rotate(45deg); }
details > div { padding: 0 32px 25px 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
details p + p { margin-top: 14px; }

/* Contact typography has its own line box; swashes never carry a button baseline. */
.footer { position: relative; isolation: isolate; padding: 74px 0 24px; background: #293622; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('assets/brand-extra-01.png') center / 1300px; opacity: .25; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer-top h2 { font-size: clamp(28px, 3.1vw, 39px); }
.footer-top .script { display: inline-block; margin-left: .12em; padding-bottom: 15px; color: var(--tea); font-size: 1.6em; line-height: 1.15; white-space: nowrap; }
.footer .eyebrow { margin-bottom: 22px; color: var(--muted); }
.footer-vk { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 80px; height: 80px; flex-shrink: 0; border: 1px solid #859a77; border-radius: 50%; font-size: 19px; line-height: 1; transition: background-color .2s, color .2s; }
.contact-row { display: flex; align-items: center; gap: 48px; padding: 30px 0 42px; }
.contact-row > a { font-size: 21px; line-height: 1.4; letter-spacing: -.02em; }
.contact-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; letter-spacing: 0; margin-top: 7px; }
.contact-row .footer-price { margin-left: auto; font-size: 13px; letter-spacing: 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #596a4e; padding-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.footer-bottom > a { font-size: 12px; gap: 12px; }
.footer-bottom .icon { width: 16px; height: 16px; flex-basis: 16px; }

@media (hover: hover) {
  .button-light:hover { border-color: currentColor; }
  .button-outline:hover { background: var(--tea); border-color: var(--tea); color: var(--forest); }
  .button:hover .icon-arrow-up-right, .text-link:hover .icon-arrow-up-right, .price-link:hover .icon { transform: translate(2px, -2px); }
  .nav-vk:hover { background: var(--forest); color: var(--tea); border-color: var(--forest); }
  .nav-toggle:hover, summary:hover { color: #0c0c0b; }
  .navigation > a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .tabs button:not([aria-selected="true"]):hover { background: #415036; border-color: var(--tea); }
  .product-action:hover, .box-add:hover { background: var(--tea); color: var(--forest); }
  .box-size-table tbody tr:hover > * { background: #2b3625; }
  .box-size-table tbody tr.is-selected:hover > * { background: var(--forest); }
  .order .button:hover { background: #263220; color: var(--tea); }
  .footer-vk:hover { background: var(--tea); color: var(--forest); }
  .contact-row > a:hover, .footer-bottom > a:hover { color: var(--tea); }
}
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .header { gap: 20px; }
  .navigation { gap: 16px; }
  .navigation > a, .nav-vk { font-size: 12px; }
  .brand small { font-size: 9px; }
  .about-grid { gap: 48px; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .box-card { grid-template-columns: clamp(270px, 32vw, 300px) minmax(0, 1fr); }
  .box-copy { padding: 24px; }
  .box-card p { margin-top: 10px; line-height: 1.55; }
  .box-size-table-wrap { padding-top: 18px; }
  .box-size-table th, .box-size-table td { padding-block: 7px; }
  .box-size-table tbody label { min-height: 40px; }
  .box-add { min-height: 44px; margin-top: 14px; }
  .order-grid { gap: 60px; }
  .contact-row { gap: 32px; }
  .contact-row > a { font-size: 20px; }
}
@media (max-width: 850px) {
  :root { --section-space: 72px; --panel-inset: 10px; }
  .header { top: 16px; gap: 14px; min-height: 66px; padding: 8px 10px 8px var(--panel-inset); }
  .brand > img { width: 42px; height: 42px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 9px; }
  .navigation { gap: 12px; }
  .navigation > a, .nav-vk { font-size: 11px; }
  .nav-vk { padding-inline: 13px; gap: 10px; }
  .about { padding-block: 66px; }
  .about-grid { gap: 32px; grid-template-columns: 1.15fr .85fr; }
  .about h2 { font-size: 30px; }
  .about-copy > p { font-size: 15px; }
  .products { gap: 0 18px; }
  .product h3 { font-size: 14px; }
  .price { flex-direction: column; gap: 5px; }
  .price-amount { font-size: 22px; }
  .order-grid { grid-template-columns: 1fr; gap: 42px; }
  .order-heading > p { max-width: 480px; }
  .order-facts { max-width: 530px; }
  .contact-row { flex-wrap: wrap; }
  .contact-row .footer-price { margin-left: 0; }
  .footer-top .script { display: block; margin: 8px 0 0; padding-bottom: 5px; }
}
@media (max-width: 700px) {
  :root { --section-space: 62px; }
  .container { width: calc(100% - 40px); }
  .header { flex-wrap: wrap; gap: 10px; min-height: 64px; border-radius: 32px; }
  .brand { gap: 8px; }
  .nav-toggle { margin-left: auto; }
  .nav-vk { font-size: 11px; min-height: 44px; padding: 10px 12px; gap: 9px; }
  .nav-vk .icon { width: 16px; height: 16px; flex-basis: 16px; }
  .navigation { order: 4; width: 100%; margin: 0; padding: 4px 10px 8px; justify-content: center; flex-wrap: wrap; gap: 0 22px; }
  .navigation > a { font-size: 13px; }
  .navigation.is-collapsed { display: none; }
  .hero-inner { --hero-edge-space: clamp(104px, 14dvh, 124px); }
  .hero-brand { width: 100%; }
  .hero-cta { min-width: 214px; }
  .hero::before { background-size: 1050px; }
  .about::before, .menu::before, .boxes::before, .order::before { background-size: 1050px; }
  .about { padding-block: 52px 58px; }
  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .about h2 { font-size: clamp(29px, 5.8vw, 37px); max-width: 470px; }
  .about h2 .script { font-size: 1.45em; margin-left: 0; }
  .about-copy > p { max-width: 480px; margin-top: 20px; font-size: 16px; }
  .about .text-link { margin-top: 18px; }
  .about-photo { width: 100%; aspect-ratio: 3 / 4; }
  .section-heading { margin-bottom: 27px; }
  .section-heading > p { font-size: 15px; line-height: 1.6; margin-top: 17px; }
  .menu { padding-bottom: 35px; }
  .menu-toolbar { flex-direction: column; align-items: flex-start; gap: 13px; margin-bottom: 26px; }
  .tabs { width: 100%; gap: 6px; }
  .tabs button { min-height: 44px; padding: 11px 15px; font-size: 13px; gap: 9px; }
  .tabs button > span { font-size: 10px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .product { margin-bottom: 32px; }
  .product-photo { aspect-ratio: 3 / 4; border-radius: 16px; }
  .product h3 { font-size: 13px; line-height: 1.6; letter-spacing: 0; padding: 16px 0 10px; }
  .portion { font-size: 11px; padding-bottom: 10px; }
  .price-amount { font-size: 20px; }
  .price-unit { font-size: 11px; }
  .product-action { min-height: 44px; margin-top: 14px; padding-inline: 12px; font-size: 12px; }
  .menu-note { margin-top: 21px; font-size: 11px; max-width: 400px; }
  .boxes { padding-top: 35px; }
  .box-grid { gap: 18px; }
  .box-card { grid-template-columns: clamp(220px, 34vw, 260px) minmax(0, 1fr); }
  .box-copy { padding: 24px; }
  .box-card h3 { font-size: 22px; }
  .box-card p { font-size: 14px; }
  .sets-link { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 24px; }
  .sets-link p { font-size: 14px; }
  .order { --order-title-size: 30px; }
  .order-heading > p { font-size: 15px; margin-top: 20px; }
  .order-facts { gap: 18px; margin-bottom: 28px; }
  .order-facts strong { font-size: 21px; }
  .order-facts > div > span { font-size: 11px; }
  summary { font-size: 14px; min-height: 66px; padding-block: 20px; }
  details > div { padding-right: 15px; font-size: 14px; }
  .footer { padding-top: 58px; }
  .footer-top { gap: 20px; align-items: flex-start; }
  .footer-top h2 { font-size: 27px; line-height: 1.35; }
  .footer-top .script { font-size: 1.65em; margin-top: 9px; }
  .footer-vk { width: 62px; height: 62px; gap: 7px; font-size: 16px; margin-top: 38px; }
  .footer-vk .icon { width: 17px; height: 17px; flex-basis: 17px; }
  .contact-row { display: grid; grid-template-columns: 1fr; gap: 25px; padding-block: 28px 30px; }
  .contact-row > a { font-size: 25px; }
  .contact-row .footer-price { font-size: 14px; justify-content: flex-start; margin-top: 2px; }
  .footer-bottom { flex-wrap: wrap; gap: 5px 16px; font-size: 11px; padding-bottom: env(safe-area-inset-bottom); }
  .footer-bottom > span:first-child { width: 100%; }
  .footer-bottom > a { margin-left: auto; font-size: 11px; }
}
@media (max-width: 620px) {
  .box-card { grid-template-columns: 1fr; }
  .box-photo { width: 100%; }
}
@media (max-width: 450px) {
  .brand small { display: none; }
  .brand > img { width: 38px; height: 38px; }
  .header { column-gap: 8px; }
  .nav-toggle { font-size: 12px; padding-inline: 4px; }
  .nav-toggle .icon { width: 18px; height: 18px; flex-basis: 18px; }
  .nav-vk { font-size: 10px; padding-inline: 11px; }
}
@media (max-width: 370px) {
  .container { width: calc(100% - 32px); }
  :root { --panel-gutter: 12px; }
  .brand > img { width: 34px; height: 34px; }
  .brand strong { font-size: 11px; }
  .nav-vk { font-size: 10px; padding-inline: 9px; gap: 6px; }
  .nav-vk-verb { display: none; }
  .nav-toggle { gap: 5px; font-size: 11px; }
  .tabs { gap: 5px; }
  .tabs button { padding-inline: 12px; gap: 7px; font-size: 12px; }
  .products { gap: 0 13px; }
  .product h3 { font-size: 12px; }
  .price-amount { font-size: 19px; }
  .box-size-table th, .box-size-table td { padding-inline: 5px; font-size: 11px; }
  .order-facts strong { font-size: 18px; }
  .footer-top h2 { font-size: 24px; }
}
/* Compact heights keep the complete message and action above the fold. */
@media (max-height: 700px) and (min-width: 701px) {
  .hero-inner { --hero-edge-space: 100px; gap: 20px; }
  .hero-brand { width: min(92vw, 112dvh, 1500px); gap: 2px; }
  .hero-wordmark { gap: clamp(10px, 1.8vw, 22px); }
  .hero-cta { min-height: 52px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .hero-inner { --hero-edge-space: 92px; gap: 14px; }
  .hero-brand { width: min(80vw, 72dvh, 560px); }
  .hero-wordmark { gap: 8px; }
  .hero-cta { min-width: 210px; min-height: 48px; padding-block: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-inner { animation: hero-enter .6s cubic-bezier(.2, .7, .3, 1) both; }
  .reveal { transition: opacity .5s, transform .5s; }
  .reveal.is-pending { opacity: 0; transform: translateY(16px); }
  @keyframes hero-enter { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.is-pending { opacity: 1; transform: none; }
}
@media print {
  .header, .hero-cta, .nav-toggle, .tabs, .show-more { display: none; }
  body { background: white; color: black; }
  .hero, .hero-inner { min-height: 0; }
  .hero-inner { padding: 30px; }
  .section { padding-block: 30px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .product, .box-card { break-inside: avoid; }
}