/* Aivory, оптовий сайт. «Нічна вітрина»: темна сцена, фігурка у світлі, шовк довкола, золото — гроші, бірюза — ваша різниця.
   Основа — стиль «Г», який обрав власник 25.10.2026 (темне тло, шовк, скло, золото).
   Порядок файлу: шрифти й токени → загальне → перший екран (і його розміри екранів) → каталог → умови й підвал →
   смужка замовлення → вікна замовлення й фото → розміри екранів каталогу → доступність. */

/* ---------- шрифти: власні копії (public/fonts), ті самі підмножини й діапазони, що в Google ---------- */
@font-face { font-family: Unbounded; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/unbounded-hryvnia.v1.woff2) format('woff2'); unicode-range: U+20B4; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/unbounded-cyrillic.v1.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/unbounded-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-hryvnia.v1.woff2) format('woff2'); unicode-range: U+20B4; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic.v1.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin.v1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* поки Unbounded вантажиться, широкий Verdana того самого розміру: рядки заголовка не перескакують, коли шрифт приходить */
@font-face { font-family: 'Unbounded fallback'; src: local('Verdana'); size-adjust: 112.4%; }

:root {
  --ink: #07070c;
  --panel: #0c0b13;                /* вікна замовлення й фото */
  --text: #f6f1e7;                 /* слонова кістка */
  --soft: #dbd5e4;
  --muted: #a7a2bb;
  --glass: rgba(255, 255, 255, .06);
  --glass-hi: rgba(255, 255, 255, .1);
  --edge: rgba(255, 255, 255, .15);
  --gold: #e7c27a;                 /* гроші: оптова ціна, сума */
  --plus: #93f2e3;                 /* ваша різниця */
  --warn: #ff9c8c;
  --silk: linear-gradient(100deg, #f0c27b 0%, #e98bd0 28%, #8f7dff 52%, #3fd0d4 78%, #f0c27b 100%);
  --pad: clamp(16px, 4vw, 56px);
  --r-panel: 24px;                 /* цінник, вікна, блок файлів */
  --r-tile: 18px;                  /* плитки */
  --r-small: 12px;                 /* поля, мініатюри, підказки */
  --display: Unbounded, 'Unbounded fallback', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-bottom: calc(var(--dock-h, 0px) + 14px); }
html, body { margin: 0; background: var(--ink); color: var(--text); }
body { font: 400 16px/1.55 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { display: block; }
::selection { background: rgba(231, 194, 122, .35); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[tabindex='-1']:focus { outline: none; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
button, input, textarea { font-family: inherit; }
.ico { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; pointer-events: none; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: #fff; color: #111;
  font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- шовк на все тло: коли гортаєш, переливається, як шовковий пластик під світлом ---------- */
.silk { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; }
.silk img { position: absolute; inset: -6% -4%; width: 108%; height: 112%; object-fit: cover; object-position: 72% 50%;
  transform-origin: 70% 45%; will-change: transform, filter; filter: saturate(1.25) brightness(1.08) hue-rotate(var(--silk-hue, 0deg)); }
/* у каталозі відтінок міняється від розділу до розділу — плавно */
.in-shop .silk img { transition: filter 1.2s ease; }
.silk::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(4,4,8,.86) 0%, rgba(4,4,8,.5) 34%, rgba(4,4,8,0) 58%),
              linear-gradient(180deg, rgba(4,4,8,.6) 0, rgba(4,4,8,0) 120px),
              linear-gradient(0deg, rgba(4,4,8,.55) 0%, rgba(4,4,8,0) 30%); }
.silk::after { content: ''; position: absolute; inset: -20%; z-index: 2; mix-blend-mode: soft-light; opacity: .6;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.6) 48%, rgba(255,226,170,.3) 52%, transparent 64%);
  animation: glint 12s ease-in-out infinite; }
/* у каталозі шовк майже закритий — відблиск не ганяємо даремно */
.in-shop .silk::after { animation-play-state: paused; }
@keyframes glint { 0% { transform: translateX(-38%); } 60%, 100% { transform: translateX(38%); } }

/* ---------- перший екран: липка сцена, під нею — запас прокручування на друк чотирьох фігурок ---------- */
/* без скриптів запасу нема: інакше людина гортала б порожнечу */
.hero-track { position: relative; z-index: 1; height: 100vh; height: 100svh; }
.js .hero-track { height: 290vh; height: 290svh; }
.js .hero-track.flat { height: 100vh; height: 100svh; }
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
/* вміст першого екрана тримає ту саму сітку 1440, що й каталог; шовк і світло — на всю ширину */
.bar, .stage-grid { width: min(100%, 1440px); margin-inline: auto; }

.bar { display: flex; align-items: center; gap: 32px; padding: 22px var(--pad); }
.mark { font: 500 18px/1 var(--display); letter-spacing: .34em; text-decoration: none; }
.bar .mark { padding-block: 12px; }
/* посилання й кнопка замовлення — однакові скляні «пігулки»: читаються на будь-якому відблиску шовку */
.bar nav { display: flex; gap: 2px; margin-left: auto; padding: 4px; border-radius: 999px; background: rgba(10, 10, 18, .66); border: 1px solid var(--edge);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-weight: 500; font-size: 15px; color: var(--soft); }
.bar nav a { padding: 5px 14px; border-radius: 999px; text-decoration: none; }
.bag { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: rgba(10,10,18,.66); border: 1px solid var(--edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-weight: 600; font-size: 14px; font-family: inherit; color: inherit; cursor: pointer; }
.bag b { font-variant-numeric: tabular-nums; }

.stage-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 72px); padding: 0 var(--pad) clamp(20px, 3.4svh, 40px); }

h1 { margin: 0; font: 300 clamp(36px, min(4.5vw, 8.6svh), 65px)/1.06 var(--display); letter-spacing: -.025em; text-wrap: balance; }
h1 .sheen { display: block; width: fit-content; background: var(--silk); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s ease-in-out infinite alternate; }
@keyframes sheen { to { background-position: 100% 0; } }
.lead { max-width: 31em; margin: 24px 0 0; font-size: clamp(16px, 1.2vw, 18.5px); color: var(--soft); text-wrap: pretty; }
.lead .short { display: none; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px;
  font-weight: 700; font-size: 16px; font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn.main { border: 0; color: #15111f; background: var(--silk); background-size: 200% 100%; box-shadow: 0 12px 40px -12px rgba(233,139,208,.7); }
.btn.ghost { border: 1px solid var(--edge); color: var(--text); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* факти — не кнопки: без рамки, лише тонка риска між ними */
.facts { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 0; margin: 36px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--soft);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.facts li { padding: 2px 0; }
.facts li:nth-child(odd) { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--edge); }
.facts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.narrow { display: none; }

/* ---------- вітрина: фігурка на пластині у світлі; наступна друкується шарами, коли гортаєш ---------- */
.show { position: relative; margin: 0; height: 100%; max-height: 760px; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
/* сцена знає свій розмір: від нього залежать фігурка й мініатюри */
.scene { position: relative; min-height: 0; container: scene / size; }
/* спокійне місце серед шовку: глибокий фіолет, на якому видно й білу, й чорну, й золоту фігурку; згори — світло, що згасає до краю */
.spot { position: absolute; inset: -9% -16% -7%; pointer-events: none;
  background: radial-gradient(40% 20% at 50% 14.4%, rgba(255, 234, 196, .22), rgba(255, 234, 196, 0) 72%),
              radial-gradient(closest-side, rgba(46, 35, 110, .86) 0%, rgba(25, 19, 66, .78) 44%, rgba(7, 7, 12, .44) 72%, rgba(7, 7, 12, 0) 100%); }
/* пластина: овал зі шовковим обідком, на якому стоїть фігурка */
.plinth { position: absolute; left: 50%; bottom: calc(8% - 22px); width: min(88%, 560px); height: 76px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(255, 255, 255, .09) 60%, rgba(255, 255, 255, .04) 100%);
  backdrop-filter: blur(9px) brightness(1.12); -webkit-backdrop-filter: blur(9px) brightness(1.12); }
.plinth::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--silk); opacity: .9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.plinth::after { content: ''; position: absolute; left: 28%; right: 28%; top: 34%; bottom: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); filter: blur(6px); }

.piece { position: absolute; left: 50%; bottom: 8%; height: calc(var(--tall) * 90%); aspect-ratio: var(--ar); --top: 0%;
  transform: translate(-50%, 0); transform-origin: 50% 100%; will-change: opacity, transform; }
/* поки вітрина не взялась за справу, першу фігурку не показуємо: інакше готова фігурка зникла б і почала друкуватись наново */
.js:not(.live) .piece { opacity: 0; }
.piece img { width: 100%; height: 100%; clip-path: inset(var(--top) -14% -14% -14%); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }
/* в оленя знизу шийка пляшки зрізана рівно — розчиняємо її в пластині */
.piece.neck img { -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 99%); mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 99%); }
/* сопло: шовкова лінія на висоті шару, який друкується */
.nozzle { position: absolute; left: -16%; right: -16%; top: calc(var(--top) - 1.5px); height: 3px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(240,194,123,0), #f0c27b 16%, #e98bd0 40%, #8f7dff 62%, #3fd0d4 84%, rgba(63,208,212,0));
  filter: drop-shadow(0 0 9px rgba(233, 139, 208, .95)) drop-shadow(0 0 22px rgba(63, 208, 212, .55)); }
/* щойно надруковані шари: гарячі й смугасті, лише по силуету фігурки, донизу згасають */
.hot { position: absolute; left: 0; right: 0; top: var(--top); height: 9%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
              linear-gradient(180deg, rgba(255, 226, 176, .95), rgba(255, 160, 120, 0));
  -webkit-mask: var(--m) 0 calc(var(--top) / .91) / 100% 1111.11% no-repeat; mask: var(--m) 0 calc(var(--top) / .91) / 100% 1111.11% no-repeat; }
.piece.printing .nozzle, .piece.printing .hot { opacity: 1; }

/* цінник: три числа, заради яких приходить закупівельник */
.tag { justify-self: center; position: relative; z-index: 2; width: min(100%, 480px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 10px; padding: 14px 20px 15px; border-radius: var(--r-panel); background: rgba(12, 11, 20, .74); border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.tag .name { grid-column: 1 / 3; grid-row: 1; font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--soft); }
.tag .min { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--glass-hi); border: 1px solid var(--edge); }
.tag .cell { display: grid; gap: 3px; min-width: 0; }
.tag .cell + .cell { padding-left: 16px; border-left: 1px solid var(--edge); }
.tag b { font: 400 clamp(19px, 1.75vw, 25px)/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag .opt { color: var(--gold); }
.tag .diff { color: var(--plus); }
.tag small { font-size: 12.5px; color: #c4bfd3; }
.tag.swap { animation: swap .45s ease; }
@keyframes swap { from { opacity: .2; transform: translateY(6px); } }

/* мініатюри фігурок: видно весь ряд, натиснув — прогорнуло до потрібної; ніколи не більші за сцену */
.rail { position: absolute; right: 0; top: 46%; z-index: 3; display: grid; gap: 6px; padding: 7px; border-radius: 999px; transform: translateY(-50%);
  background: rgba(10, 10, 18, .5); border: 1px solid var(--edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.rail:empty { display: none; }
.rail button { position: relative; width: 52px; height: 52px; width: clamp(30px, calc((100cqh - 56px) / 5), 52px); height: clamp(30px, calc((100cqh - 56px) / 5), 52px);
  padding: 7px; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); }
.rail button img { width: 100%; height: 100%; object-fit: contain; opacity: .78; transition: opacity .2s ease, transform .2s ease; }
.rail button[aria-current='true'] { background: radial-gradient(closest-side, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1)); }
.rail button[aria-current='true']::after { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--silk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.rail button[aria-current='true'] img { opacity: 1; transform: scale(1.08); }
@container scene (max-height: 176px) { .rail { display: none; } }

.hint { position: absolute; left: 0; top: 46%; z-index: 3; width: 10.5em; margin: 0; padding: 10px 12px; transform: translateY(-50%); border-radius: var(--r-small);
  background: rgba(10, 10, 18, .4); font-size: 13px; line-height: 1.35; color: var(--soft); transition: opacity .4s ease; }
.hint::before { content: ''; display: block; width: 1.5px; height: 30px; margin-bottom: 10px; background: var(--silk); animation: drip 2.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(14px); opacity: 0; } }
.hint.off { opacity: 0; }

/* ----- перший екран: два стовпці (від 901 px) ----- */
@media (min-width: 901px) {
  /* фігурка ніколи не заходить під мініатюри й не вилазить зі свого стовпця */
  .piece { height: min(calc(var(--tall) * 90%), calc((100cqw - 152px) / (var(--ar)))); }
  /* вузька висока сцена (вікно браузера на півекрана, вертикальний планшет): мініатюри — рядком під пластиною */
  @container scene (max-aspect-ratio: 21 / 25) {
    .rail { top: auto; bottom: 0; right: 50%; transform: translateX(50%); grid-auto-flow: column; }
    .rail button { width: clamp(30px, calc((100cqw - 56px) / 5), 52px); height: clamp(30px, calc((100cqw - 56px) / 5), 52px); }
    .piece { bottom: calc(8% + 78px); height: min(calc(var(--tall) * (90% - 78px)), calc((100cqw - 16px) / (var(--ar)))); }
    .plinth { bottom: calc(8% + 56px); }
  }
}
@media (max-width: 1180px) { .hint { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) {
  .wide { display: none; }
  .narrow { display: inline; }
  .facts li:nth-child(odd) { padding-right: 12px; margin-right: 12px; }
}
/* низький екран ноутбука: усе на один екран, без обрізаного цінника */
@media (min-width: 901px) and (max-height: 700px) {
  .bar { padding-block: 12px; }
  .stage-grid { padding-bottom: 14px; }
  .lead { margin-top: 14px; }
  .cta { margin-top: 20px; }
  .btn { min-height: 48px; }
  .facts { margin-top: 18px; }
  .show { gap: 10px; }
  .tag { padding: 10px 18px 11px; row-gap: 6px; }
  .hint { display: none; }
}
@media (min-width: 901px) and (max-height: 560px) {
  .lead { display: none; }
  .tag .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 901px) and (max-height: 470px) { .facts { display: none; } }

/* ----- телефон і невеликий планшет, вертикально (до 900 px) ----- */
@media (max-width: 900px) {
  .bar { gap: 14px; padding: 10px var(--pad); }
  .bar nav { display: none; }
  .bag { margin-left: auto; padding: 8px 14px; }
  .mark { font-size: 15px; }
  .stage-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: 14px; padding-bottom: 16px; }
  .show { order: -1; max-height: none; gap: 8px; }
  .spot { inset: -6% -10% -4%; }
  .silk::before { background: linear-gradient(0deg, rgba(4,4,8,.92) 0%, rgba(4,4,8,.7) 34%, rgba(4,4,8,.2) 60%, rgba(4,4,8,.45) 100%); }
  .plinth { height: 50px; bottom: calc(8% - 14px); }
  /* назва — на весь рядок (з місцем для «від 10 шт»), щоб не обрізалась */
  .tag { width: 100%; padding: 10px 14px 11px; border-radius: 18px; row-gap: 6px; }
  .tag .name { grid-column: 1 / -1; padding-right: 76px; font-size: 13px; }
  .tag .min { font-size: 11.5px; padding: 1px 8px; }
  .tag .cell + .cell { padding-left: 12px; }
  .tag b { font-size: 18px; }
  .tag small { font-size: 12px; }
  .rail { right: -4px; top: 50%; gap: 0; padding: 2px; }
  /* 44 px на дотик, а видимий кружок менший */
  .rail button { width: 44px; height: 44px; width: clamp(30px, calc((100cqh - 16px) / 5), 44px); height: clamp(30px, calc((100cqh - 16px) / 5), 44px);
    padding: 5px; border: 3px solid transparent; background-clip: padding-box; }
  .wide { display: none; }
  .narrow { display: inline; }
  h1 { font-size: clamp(27px, 7.6vw, 40px); }
  h1 .sheen { display: inline; }
  .lead { margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
  .lead .full { display: none; }
  .lead .short { display: inline; }
  .cta { flex-wrap: nowrap; margin-top: 14px; gap: 8px; }
  .btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
  .cta .btn { flex: none; padding: 0 18px; }
  .facts { margin-top: 12px; gap: 6px 0; font-size: 12.5px; }
  .facts li:nth-child(odd) { padding-right: 10px; margin-right: 10px; }
  /* на телефоні менше розмиття під склом: шовк рухається, а слабкий телефон має гортати плавно */
  .btn.ghost { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 13, 22, .74); }
}
/* планшет: посилання на умови лишаються вгорі */
@media (min-width: 621px) and (max-width: 900px) {
  .bar nav { display: flex; font-size: 14px; }
  .bar nav a { padding: 5px 12px; }
  .bag { margin-left: 0; }
}
/* високий вертикальний планшет: є місце і для повного опису, і для більших цифр */
@media (min-width: 640px) and (max-width: 900px) and (min-height: 900px) and (orientation: portrait) {
  .lead { max-width: 40em; margin-top: 12px; font-size: 16px; }
  .lead .full, .facts .wide { display: inline; }
  .lead .short, .facts .narrow { display: none; }
  .tag b { font-size: 22px; }
  .rail { right: 0; gap: 4px; padding: 6px; }
}
@media (max-width: 380px) {
  .facts { font-size: 12px; }
  .facts li:nth-child(odd) { padding-right: 8px; margin-right: 8px; }
  .cta .btn { padding: 0 14px; }
  .tag .name { font-size: 12px; }
}
@media (max-width: 350px) {
  .cta .btn { padding: 0 11px; font-size: 14px; }
  .tag small { font-size: 11.5px; }
}
/* невисокий телефон (iPhone SE з панелями, малі Android): фігурці лишаємо місце */
@media (max-width: 900px) and (max-height: 650px) and (orientation: portrait) {
  .facts li { white-space: nowrap; }
  .facts li:nth-child(n+3) { display: none; }
}
@media (max-width: 900px) and (max-height: 580px) and (orientation: portrait) {
  .facts, .lead { display: none; }
}

/* ----- телефон чи планшет, покладений на бік: два стовпці, як на комп'ютері, і все в один екран ----- */
@media (orientation: landscape) and (max-width: 900px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .bar { padding-block: 6px; }
  .bar nav { display: none; }
  .bag { margin-left: auto; }
  .stage-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 24px; padding-bottom: 10px; }
  .show { order: 0; height: 100%; max-height: none; gap: 6px; }
  .silk::before { background: linear-gradient(90deg, rgba(4,4,8,.86) 0%, rgba(4,4,8,.5) 34%, rgba(4,4,8,0) 58%), linear-gradient(0deg, rgba(4,4,8,.55) 0%, rgba(4,4,8,0) 30%); }
  h1 { font-size: clamp(22px, min(3.6vw, 8svh), 34px); }
  .lead, .facts, .hint { display: none; }
  .cta { margin-top: 14px; gap: 8px; flex-wrap: wrap; }
  .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .tag { width: 100%; padding: 7px 14px 8px; border-radius: 14px; row-gap: 3px; }
  .tag .name { padding-right: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tag b { font-size: 16px; }
  .plinth { height: 40px; bottom: calc(8% - 12px); }
  .rail { right: 0; top: 46%; gap: 2px; padding: 3px; }
}
@media (orientation: landscape) and (max-width: 900px) and (min-height: 560px) {
  .lead { display: block; margin-top: 12px; font-size: 15px; }
  .facts { display: grid; margin-top: 12px; }
}

/* ================= каталог, кошик, заявка: суворо й швидко, як прайс ================= */
main { position: relative; z-index: 1; display: block; }
.wrap { width: min(100%, 1440px); margin-inline: auto; padding-inline: var(--pad); }

.shop { position: relative; }
.shop-head { padding: clamp(56px, 8vw, 104px) 0 26px; background: linear-gradient(180deg, rgba(7, 7, 12, 0), rgba(7, 7, 12, .93) 62%); }
.shop-head h2, .terms h2 { margin: 0; font: 300 clamp(30px, 3.6vw, 52px)/1.1 var(--display); letter-spacing: -.02em; }
.shop-head p { margin: 14px 0 0; max-width: 40em; color: var(--soft); text-wrap: pretty; }
.noscript { padding-block: 40px; color: var(--soft); }
/* поки каталог вантажиться — спокійне тло з підписом, а не порожня діра в шовку */
#sections:empty { min-height: 70vh; background: rgba(7, 7, 12, .93); }
#sections:empty::before { content: 'Завантажуємо каталог…'; display: block; width: min(100%, 1440px); margin-inline: auto; padding: 40px var(--pad); color: var(--muted); }
.fail { padding-block: 40px 60px; color: var(--soft); }
.fail p { margin: 0 0 18px; }
.fail .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fail .file { margin-top: 0; }

/* вкладки розділів тримаються вгорі, поки гортаєш каталог */
.tabs-bar { position: sticky; top: 0; z-index: 10; background: rgba(9, 9, 15, .93); border-block: 1px solid var(--edge);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tabs-bar:has(.tabs:empty) .only-hits { visibility: hidden; }
.tabs-in { display: flex; align-items: center; gap: 16px; min-height: 58px; }
/* рядок вкладок прокручується; край, за яким є ще вкладки, м'яко згасає */
.tabs { display: flex; gap: 2px; min-width: 0; margin: -6px; padding: 6px; overflow-x: auto; scroll-padding-inline: 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0,0,0,0)); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0,0,0,0)); }
.tabs.more-l { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 44px); mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 44px); }
.tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 44px, #000 calc(100% - 44px), rgba(0,0,0,0));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 44px, #000 calc(100% - 44px), rgba(0,0,0,0)); }
.tabs a { position: relative; flex: none; padding: 8px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-weight: 600; font-size: 14.5px; color: var(--soft); }
.tabs a::after { content: ''; position: absolute; inset: -6px 0; }       /* ціль для пальця — на всю висоту смуги */
.tabs a span { margin-left: 3px; font-weight: 500; opacity: .6; }
.tabs a[aria-current='true'] { background: var(--text); color: #14121c; }
/* «Умови» — окремо від розділів каталогу, через тонку риску */
.tabs a.to-terms { margin-left: 8px; color: var(--muted); }
.tabs a.to-terms::before { content: ''; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 1px; background: var(--edge); }
.tabs .hits-n { display: none; }
.tabs.hits .all-n { display: none; }
.tabs.hits .hits-n { display: inline; }
.tabs.hits a[data-hit='0'] { display: none; }
.only-hits { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; font-weight: 600; font-size: 14.5px; color: var(--soft); cursor: pointer; }
.only-hits input { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); cursor: pointer; }
.only-hits input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.only-hits input:checked { background: var(--silk); }
.only-hits input:checked::after { transform: translateX(16px); }
/* на комп'ютері всі розділи мають вміститись в один рядок: лічильники є в заголовках розділів, тут їх не дублюємо */
@media (min-width: 1181px) {
  .tabs a { padding: 8px 11px; }
  .tabs a span { display: none; }
}
@media (min-width: 1181px) and (max-width: 1360px) { .tabs a { padding: 8px 7px; font-size: 13.5px; } .tabs-in { gap: 10px; } }

/* розділ: смуга з назвою — «вікно» до шовку свого відтінку, далі плитки на спокійному тлі */
.sec { scroll-margin-top: 58px; }
.sec-h { padding: 34px 0 30px; background: linear-gradient(180deg, rgba(7, 7, 12, .93) 0%, rgba(7, 7, 12, .42) 36%, rgba(7, 7, 12, .42) 64%, rgba(7, 7, 12, .93) 100%); }
.sec-h-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: clamp(92px, 11vw, 160px); }
.sec-h h3 { margin: 0; font: 300 clamp(26px, 3.2vw, 46px)/1.08 var(--display); letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); text-wrap: balance; }
.sec-h p { margin: 10px 0 0; color: var(--soft); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.sec-star { flex: none; width: auto; height: clamp(92px, 11vw, 160px); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.sec-body { padding: 12px 0 60px; background: rgba(7, 7, 12, .93); }
.hits .sec:not(.has-hit), .hits .card:not(.is-hit) { display: none; }
.sec-h .hits-n { display: none; }
.hits .sec-h .all-n { display: none; }
.hits .sec-h .hits-n { display: inline; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 22px; margin-block: 0; padding-block: 0; list-style: none; }
.card { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 84px; }
.ph { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-tile); overflow: hidden; background: #17151f; cursor: zoom-in; }
.ph::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; transition: box-shadow .2s ease; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card.on .ph::after { box-shadow: inset 0 0 0 2px var(--gold); }
.card.low .ph::after { box-shadow: inset 0 0 0 2px var(--warn); }
.flag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 2px 10px 3px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--silk); color: #15111f; }
.flag.gold { background: var(--gold); }
/* «тренд» стоїть на половині плиток — тихіше за «хіт»: темне скло з бірюзовим написом */
.flag.trend { background: rgba(7, 7, 12, .72); color: var(--plus); box-shadow: inset 0 0 0 1px rgba(147, 242, 227, .45); }
.nm { margin: 12px 0 0; font: 600 15.5px/1.3 Manrope, system-ui, sans-serif; text-wrap: pretty; }
.sold { margin: 3px 0 12px; font-size: 13px; color: var(--muted); }

/* три числа: опт, у роздробі, різниця */
.nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: end; gap: 6px 10px; margin: auto 0 0; }
.nums .n { display: grid; gap: 2px; align-content: end; }
.nums b { font: 400 15.5px/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nums .opt b { font-size: 19px; line-height: 1.05; color: var(--gold); }
.nums .diff b { color: var(--plus); }
.nums small { font-size: 12px; line-height: 1.3; color: var(--muted); }
/* у ряду з чотирьох плиток три числа — одна купка на плитку, а не рівномірно на всю ширину (інакше «різниця» лягає біля чужого «опт») */
@media (min-width: 1181px) { .card .nums { grid-template-columns: 67px auto auto; justify-content: start; column-gap: 22px; } }

/* кількість: «Додати 3 шт» → мінус, число, плюс; місце під суму зарезервовано, щоб плитки не стрибали */
.buy { margin-top: 12px; min-height: 71px; }
.add { width: 100%; min-height: 44px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass); color: var(--text); font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: background-color .2s ease, transform .1s ease; }
.qty { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 44px; border-radius: 999px;
  background: rgba(231, 194, 122, .12); box-shadow: inset 0 0 0 1px rgba(231, 194, 122, .65); }
.qty button { display: grid; place-items: center; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--text); cursor: pointer; }
.qty input { align-self: stretch; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: center; font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.qty input:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.line { margin: 6px 0 0; min-height: 21px; font-size: 13.5px; line-height: 21px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; }
.low .line { color: #ffb4a8; }
.low .qty { background: rgba(255, 120, 100, .1); box-shadow: inset 0 0 0 1px var(--warn); }
button:disabled, input:disabled { cursor: not-allowed; opacity: .55; }

/* файл для завантаження */
.file { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--edge);
  background: var(--glass); text-decoration: none; font-weight: 700; font-size: 14.5px; transition: background-color .2s ease; }
.file small { font-weight: 500; color: var(--muted); }

/* ---------- умови, як замовити, файли ---------- */
.terms { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px); background: rgba(7, 7, 12, .94); scroll-margin-top: 0; }
.cond { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); margin: 30px 0 0; }
.cond div { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--edge); }
.cond dt { font-weight: 700; }
.cond dd { margin: 0; color: var(--soft); text-wrap: pretty; }
.how { margin-top: clamp(48px, 6vw, 84px); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-rows: auto minmax(2.6em, auto) auto; gap: 6px; align-content: start; padding-top: 14px; border-top: 1.5px solid rgba(231, 194, 122, .7); counter-increment: step; }
.steps li::before { content: counter(step); font: 300 30px/1 var(--display); color: var(--gold); }
.steps b { font-size: 15.5px; line-height: 1.3; }
.steps span { font-size: 14.5px; color: var(--soft); text-wrap: pretty; }
.more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: clamp(48px, 6vw, 84px); padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-panel); border: 1px solid var(--edge); background: var(--glass); }
.more h2 { font-size: clamp(22px, 2.4vw, 32px); }
.more p { max-width: 34em; margin: 12px 0 0; color: var(--soft); text-wrap: pretty; }
.files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.files .file { width: 100%; margin-top: 0; justify-content: space-between; }

/* підвал: знак, хто продає, і шлях назад до розділів */
.foot { position: relative; z-index: 1; padding: 30px 0 calc(124px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge); background: var(--ink); font-size: 14px; color: var(--muted); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.foot p { margin: 0; }
.foot .mark { display: inline-block; margin-right: 14px; font-size: 13px; color: var(--text); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot nav a { padding-block: 10px; text-decoration: none; color: var(--soft); }

/* ---------- смужка замовлення внизу екрана ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: env(safe-area-inset-bottom); transform: translateY(105%);
  background: rgba(12, 11, 20, .92); border-top: 1px solid var(--edge); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: transform .35s ease; }
.dock.on { transform: none; }
.meter { position: relative; height: 3px; background: rgba(255, 255, 255, .12); }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--silk); transition: width .35s ease; }
.meter span { position: absolute; top: -3px; width: 1.5px; height: 9px; background: rgba(255, 255, 255, .6); }
.dock-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding-block: 10px; }
.dock-sum { display: grid; margin: 0; min-width: 0; }
.dock-sum b { font: 400 22px/1.15 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock-sum span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-hint { margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--soft); }
.dock .btn { min-height: 46px; padding-inline: 24px; font-size: 15px; }
.dock:not(.ready) .btn { background: var(--glass-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--edge); }

/* ---------- вікна: замовлення збоку, фото посередині ---------- */
dialog { color: var(--text); }
/* поки відкрите замовлення чи фото, сторінка під ним не гортається; місце смуги прокрутки лишається — сторінка не сіпається вбік */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
dialog::backdrop { background: rgba(3, 3, 8, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--edge); border-radius: 50%; background: rgba(20, 18, 30, .8); color: var(--text); cursor: pointer; }
.sheet { inset: 0 0 0 auto; width: min(560px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--edge); background: var(--panel); overflow: hidden; }
.sheet-in { display: flex; flex-direction: column; height: 100%; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--edge); }
.sheet-h h2 { margin: 0; font: 400 20px/1.2 var(--display); }
.sheet-body { flex: 1; min-height: 0; padding: 18px 22px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.sheet-body, .peek { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
/* порожнє замовлення й «заявку надіслано» — посередині, з дією, а не три рядки в кутку */
.empty, .done { display: flex; flex-direction: column; align-items: flex-start; }
.empty { margin: 8px 0 0; padding: 28px 0; color: var(--soft); }
.empty p { margin: 0; max-width: 26em; }
.empty .btn { margin-top: 20px; }
.lines { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ln { display: grid; grid-template-columns: 56px minmax(0, 1fr) 128px 44px; align-items: center; gap: 12px; }
.th { position: relative; display: block; width: 56px; height: 56px; border-radius: var(--r-small); overflow: hidden; background: #17151f; }
.th img { width: 100%; height: 100%; object-fit: cover; }
.ln-n { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.3; }
.ln .line { margin: 2px 0 0; min-height: 0; line-height: 1.4; text-align: left; }
.ln .qty { grid-template-columns: 38px minmax(0, 1fr) 38px; min-height: 40px; }
.ln .qty button { height: 40px; }
.rm { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.totals { display: grid; gap: 8px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--edge); }
.totals div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--soft); }
.totals dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.totals .pay { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--edge); font-size: 16px; font-weight: 700; color: var(--text); }
.totals .pay dd { font: 400 24px/1 var(--display); color: var(--gold); }
.totals .gain dd { color: var(--plus); font-weight: 700; }
.needs { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.needs li { padding: 10px 14px; border-radius: var(--r-small); font-size: 14.5px; background: rgba(255, 120, 100, .1); box-shadow: inset 0 0 0 1px rgba(255, 156, 140, .5); }
.needs li.tip { background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge); color: var(--soft); }
#orderForm { display: grid; gap: 12px; margin-top: 28px; }
#orderForm h3, .done h3 { margin: 0 0 2px; font: 400 18px/1.25 var(--display); }
#orderForm .req-note { margin: -4px 0 2px; font-size: 13.5px; color: var(--muted); }
#orderForm label { display: grid; gap: 6px; font-size: 13.5px; color: var(--soft); }
#orderForm label i { font-style: normal; color: var(--gold); }
#orderForm input, #orderForm textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-small); border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .05); color: var(--text);
  font-weight: 500; font-size: 16px; line-height: 1.4; }
#orderForm input::placeholder, #orderForm textarea::placeholder { color: #9e99b3; }
#orderForm textarea { resize: vertical; }
#orderForm input:focus-visible, #orderForm textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
#orderForm [aria-invalid='true'] { border-color: var(--warn); background: rgba(255, 120, 100, .08); }
.field-err { margin: 0; font-size: 13.5px; color: #ffc2b8; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-err { margin: 0; padding: 10px 14px; border-radius: var(--r-small); font-size: 14.5px; background: rgba(255, 120, 100, .1); box-shadow: inset 0 0 0 1px rgba(255, 156, 140, .5); color: #ffd3cb; }
.form-err a { font-weight: 700; white-space: nowrap; }
#sendBtn { width: 100%; }
/* «Надіслати» нижче мінімуму — те саме нейтральне скло, що й «Замовлення» в смужці, а не напівпрозорий шовк */
#sendBtn.wait { background: var(--glass-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--edge); cursor: not-allowed; }
.fine { margin: 0; font-size: 13px; color: var(--muted); }
.done { flex: 1; justify-content: center; padding: 28px 22px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; }
.done h3::before { content: ''; display: block; width: 56px; height: 3px; margin-bottom: 18px; border-radius: 2px; background: var(--silk); }
.done p { margin: 12px 0 0; color: var(--soft); max-width: 28em; }
.done .done-id b { font: 400 22px/1.2 var(--display); color: var(--gold); white-space: nowrap; }
.done .btn { margin-top: 24px; }
.sheet[open] { animation: sheet-in .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }

/* ---------- фото крупніше ---------- */
.peek { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--edge); border-radius: var(--r-panel);
  background: var(--panel); overflow: hidden auto; }
.peek[open] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); animation: peek-in .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes peek-in { from { transform: scale(.97); opacity: 0; } }
.peek > .x { position: absolute; right: 14px; top: 14px; z-index: 2; }
.peek-ph { position: relative; aspect-ratio: 1; width: 100%; max-height: calc(100dvh - 34px); background: var(--panel); }
.peek-ph img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.peek-ph.loading img { opacity: .55; }
.peek-b { display: flex; flex-direction: column; min-width: 0; padding: 64px 28px 26px; }
.peek-b .flags { display: flex; gap: 6px; margin: 0 0 10px; }
.peek-b .flags .flag { position: static; }
.peek-b h3 { margin: 0; padding-right: 40px; font: 400 clamp(19px, 2vw, 25px)/1.25 var(--display); }
.peek-b .sold { margin: 8px 0 18px; font-size: 14px; }
.peek-b .nums { margin: 0; grid-template-columns: repeat(3, auto); justify-content: flex-start; gap: 6px 26px; }
.peek-b .nums b { font-size: 19px; }
.peek-b .nums .opt b { font-size: 26px; }
.peek-b .buy { max-width: 300px; margin-top: 22px; }
.peek-nav { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; }
.peek-nav .btn { flex: 1; min-height: 46px; padding-inline: 12px; font-size: 14.5px; }

/* ---------- вигляд під мишкою і під пальцем ---------- */
@media (hover: hover) {
  .bar nav a:hover, .tabs a:hover { color: #fff; }
  .bar nav a:hover { background: rgba(255, 255, 255, .08); }
  .bag:hover { background: rgba(28, 26, 42, .8); }
  .btn.main:hover { transform: translateY(-1px); box-shadow: 0 16px 48px -12px rgba(143,125,255,.8); }
  .btn.ghost:hover, .add:hover, .file:hover { background-color: var(--glass-hi); }
  .rail button:hover img { opacity: 1; }
  .ph:hover img { transform: scale(1.03); }
  .ph:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
  .qty button:hover, .rm:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
  .x:hover { background: rgba(40, 36, 58, .9); }
  .foot nav a:hover { color: #fff; }
}
.btn:active, .add:active, .bag:active, .file:active { transform: scale(.98); }
.qty button:active, .rm:active, .x:active { background: rgba(255, 255, 255, .14); }

/* ---------- планшет і телефон: каталог, умови, вікна ---------- */
@media (max-width: 999px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .cond { grid-template-columns: minmax(0, 1fr); }
  .cond dd { max-width: 44em; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  /* п'ять кроків: три в першому ряду, два — у другому, без порожньої клітинки */
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; }
  .steps li { grid-column: span 2; }
  .steps li:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 860px) {
  .more { grid-template-columns: minmax(0, 1fr); }
}
/* вертикальний планшет: фото на всю ширину вікна */
@media (min-width: 761px) and (max-width: 1023px) and (orientation: portrait) {
  .peek { width: min(760px, calc(100vw - 32px)); }
  .peek[open] { grid-template-columns: minmax(0, 1fr); }
  .peek-ph { max-height: 56dvh; }
  .peek-b { padding: 20px 24px 22px; }
}
@media (max-width: 760px) {
  /* смужка замовлення й вкладки лежать поверх каталогу, що рухається: на телефоні без розмиття, щоб гортати плавно */
  .dock, .tabs-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 10, 18, .98); }
  .tabs-in { gap: 10px; min-height: 52px; }
  .tabs a { padding: 7px 11px; font-size: 14px; }
  .only-hits { font-size: 13.5px; }
  .sec { scroll-margin-top: 52px; }
  .sec-h { padding: 24px 0 22px; }
  .sec-h-in { min-height: 84px; }
  .sec-star { height: 84px; }
  .sec-body { padding: 10px 0 44px; }
  .ph { border-radius: 14px; }
  .nm { font-size: 14.5px; }
  .nums { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 5px 14px; }
  .nums .opt { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 6px; }
  .nums b { font-size: 14px; }
  .nums .opt b { font-size: 19px; }
  .cond div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: none; column-gap: 10px; padding: 14px 0; border-top: 1px solid var(--edge); }
  .steps li::before { grid-row: 1 / 3; font-size: 24px; }
  .files .file { flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 18px; border-radius: 18px; }
  .dock-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'sum btn' 'hint btn'; gap: 2px 14px; padding-block: 9px; }
  .dock-sum { grid-area: sum; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; }
  .dock-sum b { font-size: 18px; }
  .dock-hint { grid-area: hint; font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .dock .btn { grid-area: btn; min-height: 44px; padding-inline: 16px; font-size: 14.5px; }
  /* поки нічого не додано — лише одна підказка, без нуля й кнопки */
  .dock.is-empty .dock-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'hint'; padding-block: 10px; }
  .dock.is-empty .dock-sum, .dock.is-empty .btn { display: none; }
  .foot { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .sheet { border-left: 0; }
  .sheet-h, .sheet-body, .done { padding-inline: 16px; }
  .ln { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 8px 10px; }
  .th { width: 48px; height: 48px; }
  .ln .qty { grid-column: 2 / 3; grid-template-columns: 44px minmax(0, 1fr) 44px; min-height: 44px; max-width: 164px; }
  .ln .qty button { height: 44px; }
  .ln .rm { grid-column: 3; grid-row: 1; }
  .peek { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .peek[open] { grid-template-columns: minmax(0, 1fr); }
  .peek-ph { aspect-ratio: auto; height: min(calc(100vw - 18px), max(38dvh, calc(100dvh - 390px))); max-height: none; }
  .peek-b { padding: 18px 16px 16px; }
  .peek-b h3 { padding-right: 0; }
  .peek-b .nums { grid-template-columns: repeat(3, auto); gap: 6px 18px; }
  .peek-b .nums .opt { grid-column: auto; grid-template-columns: auto; gap: 1px; }
  .peek-b .buy { max-width: none; }
  /* «Попередній / Наступний» завжди під рукою внизу вікна */
  .peek-nav { position: sticky; bottom: 0; z-index: 1; margin: auto -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); }
  .peek-nav::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background: linear-gradient(0deg, var(--panel), rgba(12, 11, 19, 0)); pointer-events: none; }
}
/* планшет 600–760 px: три плитки в ряд, умови з підписом збоку, замовлення — як на комп'ютері */
@media (min-width: 600px) and (max-width: 760px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; }
  .cond div { grid-template-columns: 11.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .sheet { border-left: 1px solid var(--edge); }
  .sheet-h, .sheet-body, .done { padding-inline: 22px; }
  .ln { grid-template-columns: 56px minmax(0, 1fr) 128px 44px; gap: 12px; }
  .th { width: 56px; height: 56px; }
  .ln .qty { grid-column: auto; grid-template-columns: 38px minmax(0, 1fr) 38px; min-height: 40px; max-width: none; }
  .ln .qty button { height: 40px; }
  .ln .rm { grid-column: auto; grid-row: auto; }
}
@media (max-width: 599px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
}
@media (max-width: 380px) {
  .peek-b .nums { gap: 6px 12px; }
  .peek-b .nums b { font-size: 16px; }
  .peek-b .nums .opt b { font-size: 21px; }
}
/* низький екран (телефон на боці): вкладки не липнуть, смужка нижча, фото й текст — поруч */
@media (max-height: 520px) and (min-width: 600px) {
  .tabs-bar { position: static; }
  .sec { scroll-margin-top: 0; }
  .card { scroll-margin-top: 12px; }
  .dock-in { padding-block: 5px; }
  .dock-sum b { font-size: 19px; }
  .dock-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .dock .btn { min-height: 40px; }
  .peek { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: none; border-radius: 20px; overflow: hidden; }
  .peek[open] { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .peek-ph { aspect-ratio: auto; height: 100%; max-height: none; }
  .peek-b { min-height: 0; overflow-y: auto; padding: 16px 62px 14px 20px; }
  .peek-b .sold { margin: 6px 0 12px; }
  .peek-b .nums { grid-template-columns: repeat(3, auto); gap: 5px 14px; }
  .peek-b .nums .opt { grid-column: auto; grid-template-columns: auto; gap: 1px; }
  .peek-b .nums b { font-size: 16px; }
  .peek-b .nums .opt b { font-size: 21px; }
  .peek-b .buy { margin-top: 14px; max-width: 300px; }
  .peek-nav { position: static; margin: auto 0 0; padding: 14px 0 0; background: none; }
  .peek-nav::before { display: none; }
}
/* телефон на боці: вирізи екрана збоку не ховають вміст */
@media (orientation: landscape) {
  .bar, .stage-grid, .wrap { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
}

/* ---------- без руху ---------- */
@media (prefers-reduced-motion: reduce) {
  .silk::after, h1 .sheen, .hint::before { animation: none; }
  .tag.swap, .sheet[open], .peek[open] { animation: none; }
  .btn, .hint, .add, .file, .dock, .meter i, .only-hits input::after, .rail button img, .ph img, .ph::after, .peek-ph img, .in-shop .silk img { transition: none; }
  .btn:active, .add:active, .bag:active, .file:active { transform: none; }
}

/* ---------- контрастний режим Windows: межі, які трималися лише на кольорі ---------- */
@media (forced-colors: active) {
  .only-hits input { border: 1px solid CanvasText; }
  .only-hits input::after { background: CanvasText; }
  .only-hits input:checked::after { background: Highlight; }
  .tabs a[aria-current='true'] { outline: 2px solid Highlight; }
  .btn, .add, .qty, .file, .x, .rm { border: 1px solid ButtonText; }
  .flag { border: 1px solid CanvasText; }
  .meter i { background: Highlight; }
}