/* Доповнення до дизайн-системи для елементів, яких не було в прототипі:
   серверні повідомлення, підказки пошуку, лічильник у таббарі.
   Тільки токени з base.css — жодних власних кольорів.
   site.css не чіпаємо, щоб його можна було перегенерувати з redesign/. */

/* ------------------------------------------------- серверні повідомлення */
.note{
  display:flex;align-items:flex-start;gap:10px;
  border-radius:14px;padding:12px 15px;margin-bottom:10px;
  font-size:13.5px;line-height:1.45;
  border-left:4px solid currentColor;
}
.note-success{background:var(--ok-wash);color:var(--ok);}
.note-error  {background:var(--brand-wash);color:var(--brand);}
.note-warning{background:var(--warn-wash);color:var(--warn);}
.note-info   {background:var(--info-wash);color:var(--info);}
.note b,.note strong{font-weight:800;}
.note-text{flex:1;min-width:0;}
/* Кнопка поруч із текстом на телефоні тиснула текст у вузьку колонку
   («mobile-check@example.com» ламався по літерах). Кидаємо її на свій
   рядок і на всю ширину — так у неї ще й нормальна ціль для пальця. */
@media (max-width:559px){
  .note{flex-wrap:wrap;}
  .note-text{flex:1 1 auto;min-width:min(100%,190px);}
  .note>form{flex:1 0 100%;margin-top:6px;}
  .note>form .btn{width:100%;}
}

/* помилка під конкретним полем форми */
.field-err{font-size:12px;color:var(--brand);font-weight:600;}
.input[aria-invalid="true"]{border-color:var(--brand);}
.input[aria-invalid="true"]:focus{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent);
}

/* --------------------------------------------------- підказки пошуку */
.search{position:relative;}
.sugg{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);
  background:var(--raised);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh-3);
  padding:6px;max-height:min(60vh,420px);overflow:auto;
}
.sugg-i{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;
  padding:7px 9px;border-radius:11px;
  transition:background var(--fast) var(--ease);
}
.sugg-i:hover,.sugg-i.on{background:var(--mist);}
.sugg-i .thumb{width:44px;height:44px;border-radius:10px;padding:3px;}
.sugg-t{
  font-size:13.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sugg-i b{font-family:var(--font-d);font-size:13.5px;white-space:nowrap;}
.sugg-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px;}

/* ------------------------------------------- плавний перехід сторінок
   Вибір мови — це звичайний перехід за посиланням, тобто перезавантаження:
   без цього сторінка різко блимає новою мовою. Крос-документні View
   Transitions дають замість блимання коротке перетікання, і працює це
   рівно на тих переходах, які й так відбуваються, — без жодного JS.
   Браузери без підтримки просто ігнорують правило (сайт уже користується
   тим самим API для перемикача теми в site.js).
   Тривалість коротка навмисно: людина вже клацнула й чекає результату. */
@view-transition{navigation:auto;}
::view-transition-old(root),
::view-transition-new(root){animation-duration:180ms;}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
}

/* ---------------------------------------------------- перемикач мови
   Кнопка з кодом мови («UA») + власний список на 6 рядків. Нативний
   <select> тут не підходить: у шапці є місце лише на код, а вибирати
   треба по назві мови — select показує щось одне.
   Основа — <details> (див. base.html), тож стилізуємо <summary> як
   кнопку. Сам список повторює поповер підказок пошуку .sugg вище:
   та сама підкладка, рамка, тінь, радіус і розміри рядків — у шапці
   не має з'явитись другої мови форм.
   .lang у site.css описував пару кнопок-перемикачів із прототипу
   (фон і padding на контейнері, .lang-pin, що їздить під ними) —
   нижче перевизначаємо це повністю. */
.lang{position:relative;display:block;padding:0;background:none;border-radius:0;}

.lang-cur{
  display:grid;place-items:center;
  min-width:38px;height:38px;padding:0 11px;
  border-radius:12px;background:var(--mist);
  font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.03em;
  color:var(--ink);cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
/* Маркер-трикутник <details> малює сам: у Chrome його прибирає будь-який
   display, крім list-item, у Safari — лише webkit-псевдоклас. */
.lang-cur{list-style:none;}
.lang-cur::-webkit-details-marker{display:none;}
.lang-cur::marker{content:"";}
.lang-cur:hover{background:var(--line-soft);color:var(--brand);}
.lang-cur:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.lang[open] .lang-cur{background:var(--ink);color:var(--paper);}

/* Меню — бульбашка, що висить під кнопкою, а не панель, приклеєна до
   шапки. Різницю дають три речі: помітний зазор (10px, а не 2, як
   виходило раніше), хвостик у бік кнопки й тінь, під якою видно, що
   бульбашка лежить ПОВЕРХ сторінки. */
.lang-menu{
  position:absolute;z-index:70;top:calc(100% + 10px);right:0;
  min-width:212px;padding:7px;
  background:var(--raised);border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(20,20,28,.16), 0 2px 8px rgba(20,20,28,.10);
}
/* Хвостик. Повернутий квадрат із рамкою на двох суміжних сторонах —
   так стик із бульбашкою лишається невидимим, а контур не рветься.
   Стоїть під кнопкою, а не по центру меню: показує, звідки воно росте. */
.lang-menu::before{
  content:"";position:absolute;top:-7px;right:15px;
  width:12px;height:12px;
  background:var(--raised);
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  border-top-left-radius:4px;
  transform:rotate(45deg);
}
@media (prefers-color-scheme:dark){
  .lang-menu{box-shadow:0 12px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);}
}
:root[data-theme="dark"] .lang-menu{
  box-shadow:0 12px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
:root[data-theme="light"] .lang-menu{
  box-shadow:0 10px 30px rgba(20,20,28,.16), 0 2px 8px rgba(20,20,28,.10);
}

/* Поява. Бульбашка «випливає» з кнопки: масштаб від 0.92 з опорою в
   правому верхньому куті — там, де хвостик. Пружна крива (легкий
   перельот) читається як щось живе, а не як зсув шару.
   Рядки під'їжджають по черзі — та сама ідея, що .rise у site.css, лише
   швидша: у списку з шести пунктів затримка понад ~30мс на рядок уже
   відчувається як затинання. */
@keyframes lang-in{
  from{opacity:0;transform:translateY(-8px) scale(.92);}
  to{opacity:1;transform:none;}
}
@keyframes lang-row-in{
  from{opacity:0;transform:translateX(8px);}
  to{opacity:1;transform:none;}
}
.lang[open] .lang-menu{
  transform-origin:calc(100% - 21px) 0;
  animation:lang-in 240ms cubic-bezier(.34,1.32,.5,1) both;
}
.lang[open] .lang-i{
  animation:lang-row-in 200ms var(--ease) both;
  animation-delay:calc(var(--i,0) * 26ms + 55ms);
}
/* base.css гасить тривалості анімацій глобально, але НЕ затримки: без
   цього рядки лишались би невидимими до 200мс навіть із вимкненим рухом. */
@media (prefers-reduced-motion:reduce){
  .lang[open] .lang-menu,
  .lang[open] .lang-i{animation-delay:0ms !important;}
}
.lang-i{
  display:grid;grid-template-columns:30px 1fr 8px;align-items:center;gap:10px;
  padding:9px 10px;border-radius:11px;
  font-size:13.5px;color:var(--ink-2);white-space:nowrap;
  transition:background var(--fast) var(--ease);
}
.lang-i b{
  font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.03em;
  color:var(--ink);
}
.lang-i:hover{background:var(--mist);}
.lang-i:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.lang-i.on{background:var(--mist);}
/* Крапка на обраній мові. ::after, а не окремий <i>: у розмітці це був би
   порожній елемент заради вигляду, а озвучує вибір aria-current на самому
   посиланні. Третя колонка в сітці лишається і в невибраних рядках —
   інакше назви мов їздили б по горизонталі. */
.lang-i.on::after{
  content:"";width:8px;height:8px;border-radius:999px;background:var(--brand);
}

/* ------------------------------------------------ лічильник у таббарі */
.tab{position:relative;}
.tab-cnt{
  position:absolute;top:2px;left:calc(50% + 6px);
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;border-radius:999px;
  font-family:var(--font-d);font-size:10.5px;font-weight:800;font-style:normal;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------- порожні стани */
.empty-box{
  text-align:center;padding:clamp(34px,7vw,72px) 20px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-card);
}
.empty-box svg{color:var(--muted);opacity:.5;margin-bottom:14px;}
.empty-box h2{font-size:clamp(18px,2.6vw,24px);font-weight:800;margin-bottom:8px;}
.empty-box p{color:var(--muted);margin:0 0 20px;font-size:14px;}

/* --------------------------------------------------- прибирання з кошика
   Висоту в 0 веде JS (він єдиний знає, з якої саме висоти згортати
   конкретний рядок); тут — усе решта, що має згаснути разом із нею.
   Без padding у переході рядок стрибає останні 30 px, бо відступи
   зникають миттєво, а висота ще їде. */
.line.going{
  overflow:hidden;padding-block:0;border-bottom-color:transparent;
  opacity:0;transform:translateX(-14px);
  transition:height var(--mid) var(--ease), padding var(--mid) var(--ease),
             opacity var(--fast) ease, transform var(--mid) var(--ease);
}
[data-cart-body]{transition:opacity 190ms ease, transform 190ms var(--ease);}
[data-cart-body].going{opacity:0;transform:scale(.985);pointer-events:none;}
@keyframes cart-empty-in{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:none;}
}
[data-cart-empty].came{animation:cart-empty-in 300ms var(--ease) both;}

/* ---------------------------------------------------- карта самовивозу
   Своя мінімальна карта (static/js/map.js) поверх тайлів OSM. Плитки
   лежать у .pbmap-plane і рухаються трансформами — жодних перерахунків
   layout при протягуванні. */
.pick{display:grid;gap:12px;}
@media (min-width:860px){
  .pick{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:start;}
  /* Список магазинів не має тягнути сторінку вниз, коли точок стане більше. */
  .pick .opts{max-height:420px;overflow:auto;padding-right:4px;}
}

.city-pick{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px;}
.city-lbl{font-size:12.5px;color:var(--muted);margin-right:2px;}
.city-pick .chip{padding:6px 13px;font-size:12.5px;}
/* .opt — flex, тож звичайний [hidden] його не ховає. */
.opt[hidden]{display:none;}

.pbmap{
  position:relative;overflow:hidden;
  height:clamp(260px,42vw,420px);
  border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--mist);
  cursor:grab;touch-action:pan-y;  /* вертикальний скрол сторінки лишається пальцю */
  contain:paint;
}
.pbmap.grabbing{cursor:grabbing;}
.pbmap-plane,.pbmap-marks{position:absolute;inset:0;}
.pbmap-marks{pointer-events:none;}
.pbmap-plane img{
  position:absolute;top:0;left:0;width:256px;height:256px;
  user-select:none;-webkit-user-drag:none;
}
/* Тайли OSM світлі завжди. У темній темі інвертуємо й повертаємо тон
   назад — дешевше й чесніше, ніж тримати другий тайл-сервер. */
[data-theme="dark"] .pbmap-plane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pbmap-plane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92);}
}

.pbmap-pin{
  position:absolute;top:0;left:0;pointer-events:auto;
  width:30px;height:38px;margin:-38px 0 0 -15px;  /* вістря — рівно в точці */
  display:grid;place-items:start center;
  filter:drop-shadow(0 3px 6px rgba(20,20,28,.35));
  transition:none;
}
.pbmap-pin i{
  display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;
  background:var(--ink);border:2.5px solid var(--paper);
  transform:rotate(-45deg);
}
.pbmap-pin:hover i{background:var(--brand);}
.pbmap-pin.on i{
  background:var(--brand);
  animation:pin-drop 320ms cubic-bezier(.34,1.32,.5,1) both;
}
@keyframes pin-drop{
  from{transform:rotate(-45deg) translate(6px,-6px) scale(.7);}
  to{transform:rotate(-45deg);}
}

/* Клік по мітці на сторінці магазинів веде до картки — підсвічуємо, щоб
   було видно, куди саме сторінка щойно прокрутилась. */
.store.lit,.opt.lit{border-color:var(--brand);}

.pbmap-zoom{position:absolute;top:10px;right:10px;display:grid;gap:5px;}
.pbmap-zoom button{
  width:32px;height:32px;border-radius:10px;
  background:var(--raised);border:1px solid var(--line);color:var(--ink);
  font-size:17px;font-weight:700;line-height:1;
  box-shadow:0 2px 6px rgba(20,20,28,.14);
}
.pbmap-zoom button:hover{background:var(--brand-wash);color:var(--brand);}
.pbmap-credit{
  position:absolute;right:6px;bottom:5px;
  padding:2px 7px;border-radius:6px;
  background:color-mix(in srgb, var(--raised) 82%, transparent);
  font-size:10px;color:var(--muted);text-decoration:none;
}

/* ------------------------------------------------- полиця під кошиком */
.sec-also{margin-top:clamp(26px,4vw,44px);}
.sec-also .sec-hd{margin-bottom:14px;}

/* ============================================================ Придбайчик
   Голова робота — не картинка, а SVG з класами: та сама розмітка кліпає
   очима в спокої, косить ними вбік, поки думає, і всміхається, коли
   пропозиція готова. Растр цього не вміє, а третій GIF на кожну сторінку
   коштував би більше за весь цей файл. */
.bot{width:26px;height:26px;color:currentColor;overflow:visible;}
.bot-sm{width:22px;height:22px;}

/* Кліпання: різке заплющення й спокійне розплющення — так читається як
   живе. Рівна синусоїда виглядає механічно. */
@keyframes bot-blink{
  0%,92%,100%{transform:scaleY(1);}
  95%{transform:scaleY(.08);}
}
.bot-eyes{
  transform-box:fill-box;transform-origin:center;
  animation:bot-blink 5.2s ease-in-out infinite;
}
@keyframes bot-spark{
  0%,100%{opacity:.55;transform:scale(.86);}
  50%{opacity:1;transform:scale(1.1);}
}
.bot-spark{
  transform-box:fill-box;transform-origin:center;
  animation:bot-spark 2.6s ease-in-out infinite;
}

/* Думає: очі бігають, антена частішає. Стан вмикає JS на #pbai. */
@keyframes bot-scan{
  0%,100%{transform:translateX(-1.6px);}
  50%{transform:translateX(1.6px);}
}
.thinking .bot-eyes{animation:bot-scan .9s ease-in-out infinite;}
.thinking .bot-spark{animation-duration:.7s;}

.pbai{position:fixed;right:16px;bottom:16px;z-index:80;}
@media (max-width:759px){
  /* Над таббаром, а не під ним: інакше кнопка ховається за меню. */
  .pbai{right:12px;bottom:calc(64px + env(safe-area-inset-bottom));}
}

.pbai-fab{
  display:flex;align-items:center;gap:9px;
  height:48px;padding:0 17px 0 14px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  box-shadow:0 8px 24px rgba(20,20,28,.24);
  font-size:13.5px;font-weight:700;
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pbai-fab:hover{transform:translateY(-2px);background:var(--brand);}
.pbai-fab:active{transform:scale(.97);}
.pbai.on .pbai-fab{background:var(--brand);}
@media (max-width:479px){
  /* На вузькому екрані підпис з'їдає пів рядка — лишаємо саму голову. */
  .pbai-fab{width:48px;padding:0;justify-content:center;}
  .pbai-fab-t{display:none;}
}

@keyframes pbai-in{
  from{opacity:0;transform:translateY(14px) scale(.96);}
  to{opacity:1;transform:none;}
}
.pbai-panel{
  position:absolute;right:0;bottom:60px;
  /* Ширше й вище за початкові 384×560. Придбайчик тепер повертає не
     чотири рядки тексту, а добірку товарів із фото, ціною та підставою
     під кожним — у вузькій бульбашці назва товару лізла у два рядки й
     список з восьми позицій доводилось гортати весь. */
  width:min(460px,calc(100vw - 24px));
  max-height:min(680px,calc(100vh - 120px));
  display:flex;flex-direction:column;
  background:var(--raised);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;
  box-shadow:0 18px 48px rgba(20,20,28,.22), 0 3px 10px rgba(20,20,28,.12);
  animation:pbai-in 220ms cubic-bezier(.34,1.28,.5,1) both;
  transform-origin:100% 100%;
}
@media (max-width:559px){
  /* Телефон: не бульбашка, а лист знизу — на 390 px вужче просто нема куди. */
  .pbai-panel{
    position:fixed;right:8px;left:8px;bottom:calc(72px + env(safe-area-inset-bottom));
    width:auto;
    /* Було 70vh: із клавіатурою на екрані під саму розмову лишалось
       кілька рядків. 84vh майже на весь екран — розмову з помічником
       усе одно читають, а не позирають на неї збоку. */
    max-height:min(84vh,720px);
  }
  /* Відкритий лист і так на пів екрана — кнопка під ним лише визирає
     з-за краю й виглядає як недомальована. */
  .pbai.on .pbai-fab{display:none;}
}

.pbai-hd{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:12px 12px 11px 14px;border-bottom:1px solid var(--line-soft);
}
.pbai-ava{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--brand-wash);color:var(--brand);
}
.pbai-hd b{display:block;font-size:14px;}
.pbai-sub{display:block;font-size:11.5px;color:var(--muted);}
.pbai-x{width:30px;height:30px;border-radius:9px;color:var(--muted);}
.pbai-x:hover{background:var(--mist);color:var(--ink);}

.pbai-body{flex:1;overflow-y:auto;padding:13px 14px;display:flex;flex-direction:column;gap:11px;}
.pbai-say{font-size:13.5px;line-height:1.45;color:var(--ink-2);}
.pbai-say b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px;}
.pbai-me{
  display:inline-block;padding:7px 12px;border-radius:14px 14px 4px 14px;
  background:var(--brand);color:#fff;font-weight:600;
}
.pbai-hints{display:flex;flex-wrap:wrap;gap:6px;}
.pbai-hints .chip{font-size:12px;padding:6px 11px;white-space:normal;text-align:left;}

/* Три крапки, поки сервер думає. */
@keyframes pbai-dot{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.pbai-wait{display:flex;gap:5px;padding:4px 2px;}
.pbai-wait i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:pbai-dot 1.1s ease-in-out infinite;
}
.pbai-wait i:nth-child(2){animation-delay:.15s;}
.pbai-wait i:nth-child(3){animation-delay:.3s;}

@keyframes pbai-row{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
.pbai-list{display:flex;flex-direction:column;gap:2px;}
.pbai-i{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;
  align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-soft);
  animation:pbai-row 260ms var(--ease) both;
  animation-delay:calc(var(--i,0) * 40ms);
}
.pbai-i:last-child{border-bottom:0;}
.pbai-th img{width:46px;height:46px;object-fit:contain;border-radius:9px;background:var(--mist);}
.pbai-t{min-width:0;}
/* Повна назва тут не потрібна: людина вирішує за брендом і типом засобу,
   а «700 мл Pink Soul» у четвертому рядку робить із восьми позицій
   нескінченний список. Уся назва лишається за посиланням. */
.pbai-t a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;line-height:1.3;
}
.pbai-why{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.pbai-i .tnum{font-size:12.5px;white-space:nowrap;}
.pbai-add{
  width:28px;height:28px;border-radius:9px;
  background:var(--mist);color:var(--ink);font-size:17px;font-weight:700;line-height:1;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pbai-add:hover{background:var(--brand);color:#fff;}
.pbai-i.added{opacity:.55;}
.pbai-i.added .pbai-add{background:var(--brand);color:#fff;}

.pbai-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:4px;font-size:13px;
}

/* --------------------------------------------------- фото в Придбайчику
   Дві кнопки ліворуч від поля: «прикріпити» й «зняти». На телефоні
   файловий діалог сам пропонує камеру, на комп'ютері — ні, тому камера
   винесена окремо й показується лише там, де getUserMedia справді є. */
.pbai-ask{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:7px;
  padding:10px 12px;border-top:1px solid var(--line-soft);background:var(--paper);
}
/* Прихована кнопка камери не має лишати по собі порожню колонку. */
.pbai-ask [data-pbai-cam][hidden]{display:none;}
.pbai-ico{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;color:var(--muted);
  background:var(--mist);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pbai-ico:hover{background:var(--line-soft);color:var(--ink);}
.pbai-ask .input{height:40px;font-size:13.5px;min-width:0;}

/* Прев'ю перед відправкою — щоб було видно, що саме поїде, і де передумати. */
.pbai-shot{
  display:flex;align-items:center;gap:9px;position:relative;
  margin:0 12px;padding:8px 10px;border-radius:12px;
  background:var(--mist);font-size:12px;color:var(--muted);
  animation:pbai-row 200ms var(--ease) both;
}
.pbai-shot img{
  width:42px;height:42px;object-fit:cover;border-radius:9px;flex:none;
  background:var(--line-soft);
}
.pbai-shot-x{
  margin-left:auto;width:26px;height:26px;border-radius:8px;flex:none;
  display:grid;place-items:center;color:var(--muted);
}
.pbai-shot-x:hover{background:var(--line-soft);color:var(--ink);}

/* Своє фото в стрічці розмови — поруч із власною реплікою. */
.pbai-mine{
  width:104px;height:104px;object-fit:cover;border-radius:12px;
  margin-bottom:6px;background:var(--mist);
}
/* Що помічник розпізнав. Окремим рядком над добіркою: без нього
   пропозиція після знімка виглядає як вгадування навмання. */
.pbai-seen{
  font-size:12px;color:var(--muted);
  padding:7px 10px;border-radius:10px;background:var(--brand-wash);
}
.pbai-seen b{color:var(--brand);}

/* Видошукач. Усередині панелі, а не окремим вікном поверх неї. */
.pbai-cam{
  position:absolute;inset:0;z-index:3;
  background:#000;display:flex;flex-direction:column;
  animation:pbai-in 160ms var(--ease) both;
}
.pbai-cam video{flex:1;width:100%;min-height:0;object-fit:cover;}
.pbai-cam-btns{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.55);
}
.pbai-cam-btns .btn-ghost{background:rgba(255,255,255,.16);color:#fff;}
/* Кругла кнопка спуску — така сама, як у камері телефона: людина впізнає
   її без підпису, а підпис тут довелося б ще й перекладати. */
.pbai-cam-go{
  width:58px;height:58px;border-radius:50%;flex:none;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28);
  transition:transform var(--fast) var(--ease);
}
.pbai-cam-go:active{transform:scale(.92);}
.pbai-send{
  width:40px;height:40px;border-radius:12px;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;
}
.pbai-send:hover{background:var(--brand);}

/* ------------------------------------------------- полиці приводів у розділі
   Ряд кнопок «навіщо», а не другий фільтр: підпис — те, як каже покупець
   («Помити вікна»), а не те, як зветься підкатегорія. */
.errands{
  display:flex;gap:7px;flex-wrap:wrap;
  margin:0 0 clamp(16px,2.4vw,24px);
}
@media (max-width:559px){
  /* На телефоні перенос з'їдає три рядки — краще один із прокруткою. */
  .errands{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad,16px) * -1);padding-inline:var(--pad,16px);
  }
  .errands::-webkit-scrollbar{display:none;}
  .errands>*{flex:none;}
}
.errand{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:var(--r-chip);
  background:var(--raised);border:1.5px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:border-color var(--fast) var(--ease),
             background var(--fast) var(--ease),
             color var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.errand:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px);}
.errand.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.errand-off{background:transparent;border-style:dashed;}

/* Полиця всередині сторінки розділу: та сама картка, але в один ряд
   із горизонтальним прокручуванням — щоб не витісняти саму сітку. */
.shelf{margin-bottom:clamp(20px,3vw,32px);}
.shelf .sec-hd{margin-bottom:12px;}
.shelf-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.shelf-row>*{scroll-snap-align:start;}
@media (min-width:1100px){.shelf-row{grid-auto-columns:minmax(210px,1fr);}}

/* ------------------------------------------------------------ пагінація */
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:28px 0 8px;}
.pager a,.pager span{
  min-width:40px;height:40px;padding:0 12px;
  display:grid;place-items:center;border-radius:11px;
  font-family:var(--font-d);font-weight:700;font-size:13.5px;
  border:1.5px solid var(--line);background:var(--raised);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.pager a:hover{border-color:var(--ink);}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff;}
.pager .gap{border:0;background:none;color:var(--muted);min-width:20px;padding:0;}

/* ------------------------------------------------------- сітка кабінету */
.acc-grid{display:grid;gap:clamp(14px,2.4vw,24px);align-items:start;}
@media (min-width:860px){.acc-grid{grid-template-columns:236px 1fr;}}
.acc-nav{display:flex;flex-direction:column;gap:2px;}
.acc-nav a{
  padding:11px 14px;border-radius:12px;font-size:14px;font-weight:600;
  transition:background var(--fast) var(--ease);
}
.acc-nav a:hover{background:var(--mist);}
.acc-nav a.on{background:var(--brand-wash);color:var(--brand);font-weight:800;}
@media (max-width:859px){
  .acc-nav{flex-direction:row;overflow:auto;gap:6px;padding-bottom:4px;}
  .acc-nav a{white-space:nowrap;background:var(--mist);}
}

/* ---------------------------------------------- таймлайн статусів у деталях */
.tline{display:flex;flex-direction:column;gap:0;}
.tline-i{display:grid;grid-template-columns:22px 1fr;gap:12px;position:relative;padding-bottom:18px;}
.tline-i:last-child{padding-bottom:0;}
.tline-i::before{
  content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line);
}
.tline-i:last-child::before{display:none;}
.tline-d{
  width:22px;height:22px;border-radius:50%;background:var(--mist);
  border:2px solid var(--line);display:grid;place-items:center;z-index:1;
}
.tline-i.done .tline-d{background:var(--ok);border-color:var(--ok);}
.tline-i.now .tline-d{background:var(--brand);border-color:var(--brand);}
.tline-t{font-family:var(--font-d);font-weight:700;font-size:14px;}
.tline-s{font-size:12px;color:var(--muted);}

/* ----------------------------------------------------- статус замовлення */
.st{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
    font-family:var(--font-d);font-weight:700;font-size:11.5px;white-space:nowrap;}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.st-wait{background:var(--warn-wash);color:var(--warn);}
.st-paid{background:var(--ok-wash);color:var(--ok);}
.st-work{background:var(--info-wash);color:var(--info);}
.st-done{background:var(--mist);color:var(--muted);}
.st-bad {background:var(--brand-wash);color:var(--brand);}

/* --------------------------------------------- бейдж свіжості залишків */
.stale{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--muted);
}

.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;
}


/* ---------------------------------------------- вміст без JavaScript
   .rise стартує з opacity:0 і проявляється спостерігачем. Якщо JS не
   виконався — вимкнений, помилка, старий бот — сторінка лишилась би
   порожньою. Тому без JS показуємо все одразу. */
.no-js .rise{opacity:1 !important;transform:none !important;}
.no-js .sugg{display:none;}

/* ------------------------------------------------------- поля сторінки
   У прототипі --gut максимум 28px, а --maxw 1240px. На екрані 1280
   контейнер упирається в краї і лишається ~20px — текст «приклеєний».
   Звужуємо контейнер і даємо більше повітря з боків; на мобільному
   лишаємо компактно, там кожен піксель ширини потрібен товару. */
:root{
  --gut: clamp(16px, 4vw, 44px);
  --maxw: 1200px;
}

/* Вертикальний ритм: секції в прототипі стояли впритул одна до одної. */
main > .wrap:first-child{padding-top:clamp(14px,2vw,22px);}
.sec{padding-block:clamp(26px,4vw,46px);}
.crumbs{margin-bottom:clamp(10px,1.6vw,16px);}
.page-h1{margin-bottom:6px;}

@media (min-width:1400px){
  :root{--maxw:1280px;}
}

/* Вертикальні поля сторінки. Раніше це стояло інлайном у кожному шаблоні
   як style="padding: 20px 0 90px" — і той нуль посередині зносив бічні
   поля, успадковані від .wrap. На десктопі не видно (контейнер вужчий за
   екран), на телефоні текст лягав впритул до країв.
   Нижні 90px — місце під нижню панель навігації. */
.page{padding-block:clamp(15px,2.5vw,25px) 90px;}
.page-center{padding-block:clamp(40px,8vw,90px);}


/* ═══════════════════════════════════════════════════ ТЕЛЕФОН
   Прототип малювався під десктоп: кілька місць на вузькому екрані
   ламаються. Правимо тут, site.css лишається чистим. */

/* --- поля вводу. Safari на iPhone автоматично наближає сторінку, коли
       людина тицяє в поле з розміром шрифту меншим за 16px: верстка
       стрибає, і назад доводиться відщипувати пальцями. 16px це вимикає. */
@media (max-width:759px){
  .input,textarea.input,select,.search input{font-size:16px;}
}

/* --- бічні поля сторінки.
       Два різні приводи для одного правила:
       1) .hero має власний короткий padding, який затирав padding-inline
          від .wrap — на телефоні текст лягав впритул до країв;
       2) безпечні зони iPhone: разом із viewport-fit=cover у <meta> це
          тримає текст подалі від «чубчика» в горизонтальній орієнтації. */
.wrap,.hero{
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
}
@media (max-width:759px){
  .page{padding-bottom:calc(90px + env(safe-area-inset-bottom));}
  .ftr-btm{padding-bottom:calc(84px + 19px + env(safe-area-inset-bottom));}
}

/* --- цілі для пальця. Перемикачі мови й теми в шапці були заввишки
       27 і 34px — пальцем у них влучаєш через раз. Підтягуємо, не
       розганяючи шапку: пошук на телефоні й так на власному рядку.
       Мова свої 38px тримає вже у власному блоці (.lang-cur). */
@media (max-width:759px){
  .theme{width:38px;height:38px;}
  .sec-more{padding-block:6px;}
  /* Посилання у футері стояли рядками по 16px — сусідні тицяються
     замість потрібного. Той самий проміжок, але вже всередині цілі. */
  .ftr ul{gap:0;}
  .ftr ul a{display:inline-block;padding-block:7px;}
}

/* --- кроки оформлення: три чіпи не влазили в 390px, «3 Оплата» лишався
       за краєм. Формально там є горизонтальне прокручування, але людина
       його не бачить і думає, що кроків два. Тиснемо чіпи, щоб влізли всі. */
@media (max-width:479px){
  .steps ol{gap:4px;}
  .steps li{gap:4px;}
  .steps span,.steps button{padding:6px 9px;font-size:11.5px;gap:6px;}
  .steps i{width:17px;height:17px;font-size:10px;}
}

/* --- хлібні крихти: ланцюг «Головна / Каталог / Розділ / Підрозділ / Назва
       товару» займав на телефоні три рядки. Кладемо в один рядок із
       горизонтальним прокручуванням — назва все одно дублюється в H1. */
@media (max-width:559px){
  .crumbs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
  .crumbs::-webkit-scrollbar{display:none;}
  .crumbs>*{flex:none;}
}

/* --- хлібні крихти: 19 px заввишки — це менше за мінімум WCAG 2.2
       (24 px) і просто незручно пальцем. Ростимо саму зону натискання
       вертикальними відступами, не чіпаючи ні шрифт, ні висоту рядка:
       вигляд той самий, влучити можна. */
@media (pointer:coarse){
  .crumbs a,.crumbs span,.sec-more,.ftr a{
    display:inline-flex;align-items:center;min-height:26px;
  }
}

/* ================================ ФІЛЬТРИ Й СОРТУВАННЯ КАТАЛОГУ
   Дві кнопки замість рядка селектів. Панель — <details>, тож без JS
   вона просто розкривається, а не зникає разом зі скриптом.

   Обидва <details> мають однаковий name, тому браузер сам закриває
   сусідню при відкритті: два розгорнуті меню поруч перекривали б
   товар і одне одного.
   ============================================================ */
.fdrop{position:relative;}
.fbtn{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 15px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--raised);color:var(--ink);
  font-family:var(--font-d);font-weight:700;font-size:13.5px;
  cursor:pointer;list-style:none;user-select:none;white-space:nowrap;
  transition:border-color var(--fast) var(--ease),
             background var(--fast) var(--ease),
             color var(--fast) var(--ease);
}
.fbtn::-webkit-details-marker{display:none;}
.fbtn:hover{border-color:var(--muted);}
.fdrop[open] .fbtn{border-color:var(--brand);color:var(--brand);background:var(--brand-wash);}
/* Скільки фільтрів увімкнено — видно, не відкриваючи панель. */
.fbtn-n{
  display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:11px;font-style:normal;font-weight:800;
}
.fdrop[open] .fbtn .fbtn-n{background:var(--brand);color:#fff;}

.fdrop-p{
  position:absolute;z-index:20;top:calc(100% + 8px);left:0;
  min-width:min(268px,86vw);
  background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh-3);
  padding:14px 16px 15px;
  animation:fdrop-in 190ms var(--ease);
}
@keyframes fdrop-in{from{opacity:0;transform:translateY(-8px) scale(.98);}}
.fdrop-p h4{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;font-weight:700;
}
.fdrop-p h4~h4{margin-top:15px;}
.fdrop-p .sortbox select{width:100%;min-width:0;}

.fopts{display:grid;gap:2px;}
.fopt{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:8px 10px;border-radius:10px;font-size:13.5px;
  transition:background var(--fast) var(--ease);
  /* both — щоб рядок стояв невидимим до своєї черги, а не блимав
     повністю видимим у перший кадр і лише потім починав виїзд. */
  animation:fopt-in 220ms var(--ease) both;
  animation-delay:var(--d,0ms);
}
@keyframes fopt-in{from{opacity:0;transform:translateX(-7px);}}
.fopt:hover{background:var(--mist);}
.fopt input{position:absolute;opacity:0;width:0;height:0;}
.fopt span{flex:1;}
/* Галочка тільки в обраного — вона ж і єдина позначка вибору. */
.fopt svg{opacity:0;color:var(--brand);flex:none;
          transition:opacity var(--fast) var(--ease);}
.fopt:has(input:checked){background:var(--brand-wash);font-weight:700;}
.fopt:has(input:checked) svg{opacity:1;}
.fopt:has(input:focus-visible){outline:2.5px solid var(--brand);outline-offset:1px;}

.fclear{
  align-self:center;font-size:13px;font-weight:700;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--fast) var(--ease);
}
.fclear:hover{color:var(--brand);}

/* На телефоні кнопки стають на всю ширину порівну, а панель — під ними
   на всю ширину форми: панель на 268px, прив'язана до лівого краю
   другої кнопки, вилазила за екран. */
@media (max-width:559px){
  .filters{gap:8px;}
  .fdrop{flex:1 1 0;min-width:0;}
  .fbtn{width:100%;justify-content:center;padding:0 10px;font-size:12.5px;}
  .fdrop-p{
    left:0;right:auto;width:calc(100vw - var(--gut) * 2);
    min-width:0;max-width:none;
  }
  .fdrop-r .fdrop-p{left:auto;right:0;}
  .fclear{flex:1 0 100%;text-align:center;}
}

/* ==================================== УМОВИ ДОСТАВКИ В ГЕРО
   Підпис «Доставка по Україні на наступний день» став кнопкою: під ним
   умови зі старого сайту. Обидва пороги — з конфігу, не текстом, щоб
   зміна ціни не лишала на головній стару обіцянку.
   ============================================================ */
.hero-dlv{position:relative;display:inline-block;}
.hero-dlv>summary{
  cursor:pointer;list-style:none;user-select:none;
  transition:background var(--fast) var(--ease);
}
/* Стрілку малює наша svg — рідний трикутник Safari прибираємо окремо. */
.hero-dlv>summary::-webkit-details-marker{display:none;}
.hero-dlv>summary:hover{background:#DCF0E6;}
.hero-dlv>summary svg{transition:transform var(--mid) var(--ease);}
.hero-dlv[open]>summary svg{transform:rotate(180deg);}

.hero-dlv-p{
  position:absolute;z-index:20;top:calc(100% + 9px);left:0;
  width:max(300px,min(370px,88vw));
  background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh-3);
  padding:16px 18px 14px;
  animation:dlv-in 200ms var(--ease);
}
@keyframes dlv-in{from{opacity:0;transform:translateY(-7px) scale(.985);}}
.hero-dlv-p h3{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px;
}
.hero-dlv-p h3+ul+h3{margin-top:14px;}
.hero-dlv-p ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
.hero-dlv-p li{
  font-size:13.5px;line-height:1.4;color:var(--ink-2);
  padding-left:16px;position:relative;
}
.hero-dlv-p li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--brand);
}
.hero-dlv-p li b{color:var(--ink);}
.hero-dlv-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-family:var(--font-d);font-weight:700;font-size:13px;color:var(--brand);
}
.hero-dlv-more:hover{gap:9px;}
.hero-dlv-more svg{transition:transform var(--fast) var(--ease);}

/* На вузькому екрані панель вилазила за правий край: вона прив'язана до
   лівого краю кнопки, а кнопка з довгим підписом сама майже на всю
   ширину. Розтягуємо на батька й даємо їй жити в його полях. */
@media (max-width:559px){
  .hero-dlv{display:block;}
  .hero-dlv-p{width:100%;left:0;right:0;}
}

/* ============================================ СІТКА 3×3 НА ГОЛОВНІЙ
   Дев'ять входів у каталог замість чотирьох: шість найбільших розділів
   і три дії — акції, хімчистка, новинки.

   Чому сітка під текстом, а не збоку від нього, як були чотири плитки:
   у правій колонці .hero-grid на 1240px виходить ~600px, тобто ~195px
   на плитку. Туди не влазить ні «Господарські товари» в один рядок, ні
   іконка поруч із назвою. Повна ширина дає ~400px — і те, й те.

   Правила .cat/.cats у site.css лишились без розмітки: шаблон більше
   їх не використовує. Не чіпаю їх звідси свідомо — site.css спільний
   із рештою дизайн-системи, все своє живе тут.
   ============================================================ */
.hero-lede{max-width:min(100%,720px);}

.tiles9{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,15px);
  margin-top:clamp(22px,3vw,34px);
}
.tile9{
  position:relative;overflow:hidden;min-height:112px;
  border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--raised);
  /* Праве поле більше за іконку: у .tile9 стоїть overflow:hidden, і
     назва, доїхавши до картинки, лізла б просто на неї. */
  padding:16px 112px 16px 17px;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  transition:transform var(--mid) var(--ease),
             box-shadow var(--mid) var(--ease),
             border-color var(--mid) var(--ease);
}
.tile9:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:transparent;}
.tile9-name{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(14px,1.5vw,15.5px);letter-spacing:-.02em;line-height:1.2;
  overflow-wrap:break-word;position:relative;z-index:3;
}
.tile9-note{font-size:12.5px;color:var(--muted);font-weight:600;position:relative;z-index:3;}

/* М'яка кольорова пляма під іконкою — щоб розділи розрізнялись боковим
   зором. Тон фіксований у hex, а не токеном: у темній темі --brand-wash
   стає майже чорним, і кремова іконка на ньому пропадає. */
.tile9-ph{
  position:absolute;right:-14px;bottom:-18px;width:118px;aspect-ratio:1;
  border-radius:50%;background:#F1F3F7;
  transition:transform var(--mid) var(--ease);
}
.tile9:hover .tile9-ph{transform:scale(1.1) rotate(-5deg);}
.tile9[data-icon="krasa"]       .tile9-ph{background:#FDECEF;}
.tile9[data-icon="hosp"]        .tile9-ph{background:#EAF6EE;}
.tile9[data-icon="prybyrannia"] .tile9-ph{background:#E9F1FC;}
.tile9[data-icon="prannia"]     .tile9-ph{background:#E7F5F8;}
.tile9[data-icon="odiah"]       .tile9-ph{background:#FBF0E4;}
.tile9[data-icon="podarunky"]   .tile9-ph{background:#F2EDFA;}

/* По центру висоти, а не від низу: назва в один рядок і в два дають
   різну висоту картки, і прив'язана до низу іконка стрибала б у ряду.
   height обов'язково явно — у <img> є атрибути 256×256, і без цього
   вони перебивають ширину з CSS. */
.tile9-img{
  position:absolute;right:8px;top:50%;translate:0 -50%;
  width:92px;height:92px;object-fit:contain;z-index:2;
  transition:transform var(--mid) var(--ease);
}
.tile9:hover .tile9-img{transform:translateY(-50%) scale(1.07) rotate(3deg);}

/* Акції, хімчистка, новинки — не розділи каталогу, а інший тип входу.
   Темна підкладка каже це без жодного підпису.

   Червона рамка потрібна саме в темній темі: там --slab і --raised це
   один і той самий #17171F, тобто без неї три нижні плитки нічим не
   відрізнялись би від шести верхніх. У світлій вона просто акцент.
   Тому рамка, а не окремий колір фону під кожну тему — одне правило
   замість трьох блоків (media + два data-theme). */
.tile9-act{background:var(--slab);border-color:rgba(237,28,36,.5);}
.tile9-act .tile9-name{color:#fff;}
.tile9-act .tile9-note{color:var(--slab-ink);}
.tile9-act .tile9-ph{background:rgba(237,28,36,.22);}

/* --- телефон: та сама сітка 3×3, але картка стає вертикальною.
   Іконка переїжджає з-під правого краю нагору, підпис — під неї.

   Горизонтальна картка тут не працює в жодному вигляді: у двох
   колонках на 390px під назву лишається ~90px, і «Господарські товари»
   налазить на іконку; в одну колонку дев'ять плиток дають екран із
   гаком гортання до першого товару. Вертикальна лишає три в ряд навіть
   на 320px — і форма 3×3 зберігається на всіх ширинах. */
@media (max-width:719px){
  .tiles9{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.8vw,10px);}
  .tile9{
    min-height:0;padding:13px 7px 12px;border-radius:16px;
    align-items:center;text-align:center;gap:7px;
  }
  /* Місце рівно під два рядки, навіть коли назва в один: інакше «Одяг»
     піднімає свій лічильник вище за сусідів, і рядок цифр під картками
     йде хвилею. */
  .tile9-name{
    font-size:11.5px;line-height:1.18;
    min-height:2.36em;display:flex;align-items:center;justify-content:center;
  }
  .tile9-note{font-size:10.5px;}
  /* Іконка тепер у потоці, а не абсолютом: висота картки має рахуватись
     разом з нею, інакше підпис ліг би просто на картинку. */
  .tile9-img{
    position:static;translate:none;order:-1;
    width:clamp(48px,15vw,62px);height:clamp(48px,15vw,62px);
  }
  .tile9:hover .tile9-img{transform:scale(1.06);}
  /* Кольорове коло під іконкою — теж по центру, а не з кута картки. */
  .tile9-ph{
    top:11px;bottom:auto;right:auto;left:50%;translate:-50% 0;
    width:clamp(54px,17vw,70px);
  }
}

/* ------------------------------------------------ СОЦМЕРЕЖІ В ШАПЦІ
   Ті самі три посилання, що й у футері, тільки нагорі. Зібрані в одну
   плитку навмисно: поруч стоять кошик, кабінет і замовлення — дії
   всередині магазину. Три однакові іконки без підкладки читались би
   як четверта, п'ята й шоста дія. Спільний фон каже «це одна група,
   і веде вона назовні», а розмір 32px проти 42px у .iconbtn лишає
   кошику головну вагу.

   Ховер повторює футер (заливка брендом, білий значок) — щоб та сама
   кнопка в двох місцях сторінки поводилась однаково. */
.hdr-social{
  display:none;align-items:center;gap:2px;flex:none;
  padding:3px;border-radius:14px;background:var(--mist);
}
.hdr-social a{
  width:32px;height:32px;border-radius:11px;
  display:grid;place-items:center;color:var(--ink-2);
  transition:background var(--fast) var(--ease),
             color var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.hdr-social a:hover{background:var(--brand);color:#fff;}
.hdr-social a:active{transform:scale(.9);}
.hdr-social svg{display:block;}

/* Від 760px шапка вже в один рядок, і місце для плитки береться з
   поля пошуку. Воно тут гумове (flex:1), тож перевірено окремо: на
   768px під пошук лишається 244px — рядок «Шукати гель для прання…»
   обрізається трьома крапками, але вводити в нього не тісно. */
@media (min-width:760px){.hdr-social{display:flex;}}

/* На телефоні шапка переносить пошук у другий рядок, і в першому
   лишається порожнє місце праворуч від логотипа — туди й ставимо.
   Плитка без власного фону: на 375px три підкладки поспіль (плитка,
   мова, тема) виглядають як смуга сірого. */
@media (max-width:759px){
  .hdr-social{display:flex;background:none;padding:0;gap:0;}
  .hdr-social a{width:34px;height:34px;border-radius:10px;}
}

/* Вужче за 375px перший рядок шапки вже не тримає все: логотип,
   три іконки, мова, тема й кошик просять 330px там, де є 288 — і
   кошик з'їжджав у власний рядок сам-один зліва. Лишаємо Telegram:
   це єдина з трьох, яка щось РОБИТЬ (чек після покупки, Mini App),
   а Instagram і TikTok нікуди не діваються — вони в футері. */
@media (max-width:374px){
  .hdr-social a:not(.hdr-tg){display:none;}
}

/* ------------------------------------------------------------ СЕРДЕЧКА
   Сама кнопка вже описана в site.css (.fav) — прототип її передбачив.
   Тут лише те, чого там не було: обгортка-форма, велике сердечко на
   картці товару й відгук на натиск.

   display:contents — щоб <form> зникла з розкладки. .card-media — це
   grid з одним центрованим елементом; форма стала б другим рядком і
   зсунула б фото вгору, а .fav усередині неї рахував би абсолютні
   координати вже не від картинки. Той самий прийом, що й у .card-add. */
.fav-form{display:contents;}

/* Натиск має відгукуватись до відповіді сервера: сердечко ставлять
   мимохідь, і півсекунди тиші читаються як «не спрацювало». */
@keyframes fav-pop{
  0%{transform:scale(1);}
  40%{transform:scale(1.32);}
  70%{transform:scale(.94);}
  100%{transform:scale(1);}
}
.fav.pop svg{animation:fav-pop 340ms var(--ease);}

/* На картці товару сердечко не ховається при наведенні — воно там
   повноцінна дія поруч із «В кошик», а не дрібниця в кутку фото. */
.fav-lg{
  position:static;width:46px;height:46px;flex:none;
  opacity:1;transform:none;
  background:var(--mist);color:var(--ink-2);
  border:1px solid var(--line);
}
.fav-lg:hover{background:var(--brand-wash);color:var(--brand);border-color:transparent;}
.fav-lg.on{background:var(--brand-wash);border-color:transparent;}

/* Ряд «купити + зберегти». Сердечко не може жити всередині .pd-buy:
   вкладену <form> браузер не збирає, і без JS вона сабмітила б кошик.
   Тому дві сусідні форми в одній обгортці. */
.pd-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.pd-actions .pd-buy{flex:1 1 260px;}
/* Сердечко забирає 57px ширини, і при 210px мінімуму кнопка «Додати в
   кошик» переставала вміщатись поруч зі степером — злітала на власний
   рядок уже на планшеті. Знижуємо мінімум: рости кнопка все одно росте,
   а от ламати ряд через кнопку, яка й так широка, нема за що. */
.pd-actions .pd-buy .btn{flex:1 1 140px;}

/* Таббар став на п'ять вкладок: «Збережене» між каталогом і кошиком.
   У site.css сітка жорстко на чотири колонки. */
.tabbar{grid-template-columns:repeat(5,1fr);}
/* На 320px п'ять підписів по 10.5px уже стикаються один з одним. */
@media (max-width:359px){.tab span{font-size:9.5px;letter-spacing:-.01em;}}

/* ---------------------------------------------- позначка «подарунок» (34)
   Каркас: розмітка й вигляд готові, ознака Product.is_gift поки читається
   з attributes і на живому каталозі не спрацьовує ніде — даних немає.

   Праворуч угорі, навпроти бейджа знижки зліва: два бейджі в одному кутку
   накладаються, а знижка важливіша й historically стоїть саме там.

   Кольори — токенами. У темній темі --brand світлішає сам (base.css), тож
   окремого правила під prefers-color-scheme тут не треба: інакше довелося
   б тримати два джерела правди про один колір. */
.giftmark{
  position:absolute; top:10px; right:10px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  color:var(--brand);
  background:var(--card,#fff);
  border:1px solid var(--line);
  /* Тінь м'яка й коротка: позначка має читатись на світлому фото товару,
     але не перетягувати на себе увагу з самої картки. */
  box-shadow:0 1px 3px rgba(20,20,28,.10);
  pointer-events:none;
}
.giftmark svg{display:block;}

/* Сердечко вже стоїть праворуч угорі — зсуваємо позначку нижче, інакше
   вони перекривають одне одного рівно на тих картках, де є обидва. */
.card-media .giftmark{top:auto; bottom:10px; right:10px;}

/* На сторінці товару позначка стоїть у рядку з назвою, а не поверх фото:
   там немає тісного кута, і поруч із заголовком її видно краще. */
.pd-title .giftmark{position:static; width:26px; height:26px; margin-left:8px;}

@media (max-width:719px){
  .giftmark{width:24px; height:24px; top:8px; right:8px;}
  .card-media .giftmark{bottom:8px; right:8px;}
}

/* ------------------------------------------------- щільніші картки (30)
   Заміряно на 375px: картка була 385px заввишки — 47% екрана, тобто дві
   картки з'їдали його цілком. Причому ТІЛО картки (195px) виявилось вище
   за саме фото (188px): бренд, назва, наявність, ціна й кнопка стояли з
   відступами 8px і полями 12/13/14.

   Тому тиснемо тіло, а не колонки: третя колонка на 375px дала б картку
   завширшки 107px, де ні ціну, ні кнопку вже не поставити.

   Фото не ріжеться: у нього object-fit:contain, тож нижча коробка просто
   показує товар трохи меншим. Поле навколо зменшуємо з 12 до 8 — частину
   висоти повертаємо самому товару.

   Правки тут, а не в site.css: site.css — дизайн-система, її не чіпаємо. */
.grid .card-media{aspect-ratio:7/6; padding:8px;}
.grid .card-body{padding:9px 10px 10px; gap:5px;}
.grid .card-title{line-height:1.24;}
.grid .card-add .btn,
.grid .card-add button{min-height:34px; padding-block:7px;}

@media (max-width:619px){
  /* Розділ товару в сітці розділу — це та сама назва розділу, що у
     хлібних крихтах над сіткою. На телефоні цей рядок коштує 16px висоти
     на КОЖНІЙ картці й не додає нічого. */
  .grid .card-cat{display:none;}
  .grid .card-title{font-size:12.5px;}
  .grid .card-stock{font-size:11px;}
}

/* --------------------------------- герой у дві колонки: текст + плитки
   Плитки стоять ПРАВОРУЧ від «Більше за менше», а не під ним.

   Горизонтальна форма плитки («назва зліва, іконка справа») у вузькій
   колонці не живе: там на плитку лишається 100–190px, і «Господарські
   товари» налазило б на картинку. Тому в другій колонці плитка бере
   ВЕРТИКАЛЬНУ форму — ту саму, що на телефоні: іконка згори, назва під
   нею по центру.

   Поріг 680px, а не 1060: вікно браузера цілком буває 700–950px (панель
   поруч із редактором, половина екрана), і на такій ширині права колонка
   мусить працювати, а не відкладатись «до десктопа».

   Розміри всередині — clamp від vw, а не фіксовані числа під брейкпойнт.
   Діапазон тут майже втричі (680 → 1900px), і будь-яке одне число на
   одному краю виглядає дрібним, а на другому — розпухлим. Заодно це
   знімає конфлікт із телефонним блоком: між 680 і 719 діють обидва, і
   clamp дає той самий результат, що й правило для телефона. */
@media (min-width:680px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    gap:clamp(18px,3.2vw,56px);
    /* По центру висоти: дев'ять плиток вищі за текст, і притиснутий
       догори текст лишав би під собою порожню діру. */
    align-items:center;
  }
  .hero .tiles9{
    margin-top:0;
    gap:clamp(7px,1vw,15px);
  }
  .hero .tile9{
    min-height:0;
    padding:clamp(11px,1.1vw,16px) clamp(7px,.8vw,12px) clamp(10px,1vw,15px);
    align-items:center;text-align:center;gap:clamp(6px,.7vw,9px);
  }
  /* Місце рівно під два рядки, навіть коли назва в один: інакше «Одяг»
     піднімає свій лічильник вище за сусідів, і рядок цифр іде хвилею. */
  .hero .tile9-name{
    font-size:clamp(11px,1.02vw,13.5px);line-height:1.2;
    min-height:2.4em;display:flex;align-items:center;justify-content:center;
  }
  .hero .tile9-note{font-size:clamp(10px,.85vw,11.5px);}
  /* Іконка в потоці, а не абсолютом: висота плитки має рахуватись разом
     з нею, інакше підпис ліг би просто на картинку. */
  .hero .tile9-img{
    position:static;translate:none;order:-1;
    width:clamp(44px,4.4vw,72px);height:clamp(44px,4.4vw,72px);
  }
  .hero .tile9:hover .tile9-img{transform:scale(1.06);}
  .hero .tile9-ph{
    top:clamp(8px,.9vw,12px);bottom:auto;right:auto;left:50%;translate:-50% 0;
    width:clamp(52px,5.2vw,84px);
  }
}