/* Стили из прототипа miniapp-ui/index.html без изменений; убраны рамка
   браузера, демо-панель и постер видео (этап 14) — в них был хардкод цветов. */
/* Настоящий файл шрифта из прод-проекта: frontend/public/fonts/FixelVariable.woff2 */
@font-face{
  font-family:"Fixel Text";
  src:url('./FixelVariable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Caveat";
  src:url('./Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* Запасное начертание с метриками Fixel (ascent 900, descent 190, line-gap 290
   на 1000 единиц) — дословно typography.css сайта. */
@font-face{
  font-family:"Fixel Text Fallback";
  src:local("Arial");
  size-adjust:95%; ascent-override:90%; descent-override:19%; line-gap-override:29%;
}

/* Токени бренду — в tokens.css. Тут тільки компоненти. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--text);
  font-size:var(--text-body-m-mobile); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Узкое начертание Fixel — проект применяет его к ценам и числам */
.condensed{font-variation-settings:"wdth" var(--font-width-fixel-text)}

/* Саме height, а не min-height. З min-height рамка росла разом із контентом,
   .scroll ніколи не впирався в межу — і скролилась уся сторінка разом із
   таббаром, замість того щоб скролився тільки список. Точну висоту нижче
   проставляє JS із tg.viewportStableHeight; 100dvh — запасний варіант. */
body.tg{overflow:hidden}
body.tg .frame{width:100%;height:100vh;height:100dvh;border:0;border-radius:0}
body.tg .demo{display:none}
.frame{display:flex;flex-direction:column}

/* ── Перемикач теми ──────────────────────────────────────────────────────
   Живе тільки на «Клубі» і тільки В ПОТОЦІ, у рядку з підписом «Рівень».
   Плаваюча кнопка поверх контенту тут не годиться: на решті екранів угорі
   праворуч лежить фото банера, а на вузькому екрані вона наїжджає навіть
   на заголовок. У потоці перекриття неможливе за побудовою, на будь-якій
   ширині. Тап-зона 2.75rem = 44px, мінімум для пальця; іконка менша. */
.themetoggle{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;padding:0;border-radius:var(--pill);flex:none;
  background:var(--surface);border:1px solid var(--line);color:var(--text-mute);
  box-shadow:var(--shadow-card);cursor:pointer;-webkit-tap-highlight-color:transparent}
.themetoggle:active{background:var(--surface-2)}
.themetoggle svg{width:1.125rem;height:1.125rem;flex:none}

/* ── Шапка Telegram (імітація, тільки в браузері) ────────────────────────── */
.tgbar{display:none}
.tgbar .back{width:22px;height:22px;opacity:0;transition:opacity .15s}
.tgbar .back.on{opacity:1}
.tgbar .brandmark{display:inline-flex;align-items:center;gap:.5rem}
.tgbar .brandmark svg{width:1rem;height:1.083rem;fill:var(--color-ink);flex:none}
.tgbar .ttl{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-weight:var(--font-weight-black);font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh)}
.tgbar .dots{margin-left:auto;color:var(--text-mute)}

/* ── Кнопка «На сайт» ─────────────────────────────────────────────────────
   Тон primary: зелений фон, знак SoWhite білий, як текст кнопки. На екранах із шапкою
   стоїть праворуч на лінії заголовка, рукописна підпис іде на всю ширину.
   Де шапки немає (інструкція, товар) — окремим рядком першим у самому
   екрані: прокручується разом із ним, як шапка на інших екранах. */
.site-bar{display:flex;justify-content:flex-end;margin:0 0 var(--space-3)}
.site-bar__link{gap:var(--space-2)}
.site-bar__logo{width:var(--button-icon-size);height:var(--button-icon-size);
  flex:none;fill:currentColor}
.screen-head:has(.site-bar__link){display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-3)}
.screen-head:has(.site-bar__link) > div{display:contents}
.screen-head:has(.site-bar__link) .screen-kicker{grid-column:1/-1}
.screen-head .site-bar__link{grid-column:2}
.screen-head .site-bar__link .arw{display:none}
#p-order .screen-head{margin-bottom:0}
/* Заголовок не вміщається поруч (довгий номер замовлення, вузький екран) —
   кнопка стискається до круга зі знаком. */
.site-bar__link--compact{width:var(--button-height);padding:0;gap:0}
.site-bar__link--compact .site-bar__text,.site-bar__link--compact .arw{display:none}

/* ── Скрол-область ───────────────────────────────────────────────────────── */
.scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.page{display:none;min-width:0;padding:var(--pad) var(--pad) var(--space-6)}
.page.on{display:block}

/* ── Типографіка з проекту ───────────────────────────────────────────────── */
h1,h2,h3{margin:0;text-wrap:balance}
.h-screen{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h2-mobile);line-height:var(--text-h2-mobile--lh);
  font-weight:var(--font-weight-black);margin:var(--space-1) 0 var(--space-4)}
.h-sec{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h6-mobile);line-height:var(--text-h6-mobile--lh);
  font-weight:var(--font-weight-black);color:var(--color-ink);
  margin:var(--space-6) 0 var(--space-3)}
/* Одне слово в заголовку мятним — прийом із home-products / home-care */
.hl{color:var(--color-action-primary)}
.dim{color:var(--text-dim)}
.mute{color:var(--text-mute)}
.small{font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh)}
.tiny{font-size:var(--text-body-xxs);line-height:var(--text-body-xs-mobile--lh)}

/* ── Банер-шапка екрана. Композиція з макета сторінки категорії:
   підкладка з градієнтом, великий заголовок, підзаголовок, фото праворуч. ── */
.hero{position:relative;overflow:hidden;border-radius:var(--card-radius);
  background:var(--grad-surface);box-shadow:var(--shadow-card-s);
  padding:var(--space-5);margin-bottom:var(--space-5);min-height:7.5rem}
.hero h1{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h2-mobile);line-height:var(--text-h2-mobile--lh);
  font-weight:var(--font-weight-black);margin:0;max-width:60%}
.hero p{margin:var(--space-2) 0 0;max-width:58%;color:var(--text-dim);
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-m-mobile--lh)}
.hero img{position:absolute;right:calc(var(--space-4) * -1);bottom:calc(var(--space-4) * -1);
  width:7.5rem;height:7.5rem;object-fit:contain;pointer-events:none}

/* ── Картка: біла, з обведенням і фірмовою тінню (як home-products-card) ── */
.card{position:relative;background:var(--surface);border-radius:var(--card-radius);
  padding:var(--card-padding);margin-bottom:var(--space-2);
  box-shadow:var(--shadow-card-s);
  outline:1px solid var(--color-line);outline-offset:-1px}
.card.plain{box-shadow:none;outline:none;background:var(--surface-2)}
/* Градієнтні картки — з home-care і home-safe-enamel */
.card.mint{background:var(--grad-mint-soft);outline:none;color:var(--on-mint);
  box-shadow:var(--shadow-card-floating)}
.card.mint .perk .dot{background:var(--on-mint-dim)}
.card.neutral{background:var(--card-tone-neutral);outline:none;
  box-shadow:var(--shadow-card-floating)}
.card.neutral .perk .dot{background:var(--color-neutral-500)}
/* Поріг наступного рівня. Ім'я рівня живе в заголовку секції над карткою,
   тому дублювати його всередині немає сенсу — лишається умова доступу. */
.lvl-avail{font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh);
  color:var(--text-dim);margin-bottom:var(--space-3)}
/* Термін дії — рядок тексту, а не картка */
.note{margin:var(--space-4) 0 0;font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-m-desktop--lh);color:var(--text-mute)}
.note b{color:var(--text);font-weight:var(--font-weight-medium)}
.card.pink{background:var(--grad-pink);outline:none;color:var(--on-pink);
  box-shadow:var(--shadow-card-s)}
.card.pink .mute,.card.pink .small{color:var(--on-pink-dim)}
.card.pink .thumb{background:rgb(255 255 255 / .7)}
.card.brand{background:var(--grad-brand);outline:none;color:var(--color-surface);
  box-shadow:var(--shadow-card)}
.card.brand .small,.card.brand .tiny{color:rgb(255 255 255 / .82)}
.row{display:flex;align-items:center;gap:var(--space-3)}
.row.top{align-items:flex-start}
.grow{flex:1;min-width:0}
.chev{display:inline-block;inline-size:var(--miniapp-chevron-size);block-size:var(--miniapp-chevron-size);
  color:var(--text-mute);background:currentColor;flex:none;
  mask:url('/icons/caret-right-bold.svg') center / contain no-repeat;
  -webkit-mask:url('/icons/caret-right-bold.svg') center / contain no-repeat}

/* Картка-посилання: вся картка веде на екран деталей. Шеврон праворуч по
   центру висоти — не сперечається зі статусом у правому верхньому куті.
   Кнопки всередині картки (ТТН, інструкція) лишаються окремими діями. */
.card--link{cursor:pointer;padding-right:calc(var(--card-padding) + var(--miniapp-chevron-size) + var(--space-2));
  background:var(--grad-guide-surface);outline:none}
.order-items{display:grid;gap:var(--space-1);margin:var(--space-2) 0 .125rem}
.card--link:active{background:var(--grad-mint-soft);color:var(--on-mint)}
.card--link:active .mute{color:var(--on-mint-dim)}
.card--link:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}
.card--link > .card__chev{position:absolute;right:var(--card-padding);top:50%;transform:translateY(-50%);
  width:var(--miniapp-chevron-size);height:var(--miniapp-chevron-size)}

/* Рядок «підпис — значення» в картці деталей (суми, доставка, характеристики) */
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv > dt{color:var(--text-dim);font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh)}
.kv > dd{margin:0;text-align:right;font-weight:var(--font-weight-medium)}
.kv--total > dt,.kv--total > dd{color:var(--color-ink);font-weight:var(--font-weight-bold)}
dl{margin:0}

/* Фото товару: квадрат, товар цілком, без обрізання */
.product-photo{aspect-ratio:1;max-height:22rem;margin:0 auto var(--space-4);
  border-radius:var(--miniapp-product-image-radius);background:var(--color-surface-muted);overflow:hidden;display:grid;place-items:center}
.product-photo img{width:100%;height:100%;object-fit:contain;padding:var(--space-4)}
.product-brand{margin:calc(var(--space-3) * -1) 0 var(--space-4)}

/* Шапка товару в картці догляду й блоці інструкції: превʼю, повна назва, шеврон.
   Веде в картку товару. Назва переноситься, не обрізається. */
.product-head{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;
  font-weight:var(--font-weight-medium);overflow-wrap:anywhere}
.product-head > .grow{flex:1;min-width:0}
.thumb--lg{width:5.5rem;height:5.5rem}
.thumb--lg img{padding:var(--space-1)}

#p-care #care-overdue-body,#p-care #care-current-body{display:flex;flex-direction:column;gap:var(--space-4);padding-block:var(--card-padding)}

/* ТТН на екрані замовлення: кнопка «копіювати» і номер зі стрілкою відстеження */
.kv--center{align-items:center}
.ttn{display:inline-flex;align-items:center;gap:0}
.ttn__link{display:inline-flex;align-items:center;gap:var(--space-1);
  font-weight:var(--font-weight-medium)}
.ttn__link .arw{width:var(--button-icon-size);height:var(--button-icon-size);flex:none;fill:currentColor}
/* У рядку ТТН тап-зона 44px заходить у поля рядка, а висоту рядка задає текст */
.ttn > .icon-btn{margin-block:calc((var(--button-height) - var(--text-body-m-mobile) * 1.5) / -2)}
.ttn__link:focus-visible,.product-head:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px;border-radius:var(--radius-inner)}

/* ── Бейдж: темна плашка зверху зліва (як у картці товару) ──────────────── */
.badges{position:absolute;left:var(--badge-offset);top:var(--badge-offset);z-index:10;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--badge-gap)}
.badge{display:inline-block;border-radius:var(--badge-radius);
  padding:var(--badge-padding-block) var(--badge-padding-inline);
  font-size:var(--text-body-xxs);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-medium);
  background:var(--color-ink);color:var(--color-surface);box-shadow:var(--shadow-card)}
.badge--soft{background:var(--color-surface-muted);color:var(--text-dim);box-shadow:none}
.badge--mint{background:var(--color-success-soft);color:var(--color-success);box-shadow:none}
.badge--warn{background:var(--color-warning-soft);color:var(--color-warning);box-shadow:none}
.badge--danger{background:var(--color-error-soft);color:var(--color-error);box-shadow:none}
.badge.inline{position:static;box-shadow:none}
#p-care .badge.inline{padding:0;background:transparent;border-radius:0;
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-bold)}
#p-care .badge--danger{color:var(--color-care-danger)}
#p-care .badge--warn{color:var(--color-care-warning)}
#p-care .badge--mint{color:var(--color-care-success)}
@media (hover:hover){
  #p-care .list-cell--hoverable:hover .badge.inline{color:var(--on-mint)}
}
#p-care .list-cell--hoverable:is(:focus-visible,:active) .badge.inline{color:var(--on-mint)}
#p-orders .badge.inline{padding:0;background:transparent;border-radius:0;
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-bold)}
#p-orders .badge--danger{color:var(--color-care-danger)}
#p-orders .badge--warn{color:var(--color-care-warning)}
#p-orders .badge--mint{color:var(--color-care-success)}
#p-orders .badge--soft{color:var(--text-dim)}
#p-orders .card--link:active .badge.inline{color:var(--on-mint)}
#p-order .card{background:var(--grad-guide-surface);box-shadow:none;outline:none}
#p-order .badge.inline{padding:0;background:transparent;border-radius:0;
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-bold)}
#p-order .badge--danger{color:var(--color-care-danger)}
#p-order .badge--warn{color:var(--color-care-warning)}
#p-order .badge--mint{color:var(--color-brand-600)}
#p-order .badge--soft{color:var(--text-dim)}
#p-order .item .thumb{width:5.5rem;height:5.5rem;border-radius:var(--miniapp-product-image-radius);background:transparent}
#p-order .item .thumb img{padding:0}

/* ── Знижка: пігулка (як home-products discount) ────────────────────────── */
.off{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--discount-min-width);height:var(--discount-height);
  padding:0 var(--discount-padding-inline);border-radius:var(--radius-pill);
  background:var(--color-ink);color:var(--color-surface);
  font-size:var(--text-price-old);line-height:var(--text-price-old--lh);
  font-weight:var(--price-weight)}

/* ── Рейтинг: зірки + значення в темній пігулці ─────────────────────────── */
.rating{display:flex;align-items:center;gap:var(--rating-gap);
  font-size:var(--text-body-xs-mobile)}
.rating .stars{display:flex;gap:.125rem;color:var(--color-rating-star)}
.rating .stars svg{width:var(--rating-star-size);height:var(--rating-star-size);fill:currentColor}
.rating .val{display:inline-flex;align-items:center;height:var(--rating-value-height);
  padding:0 var(--rating-value-padding-inline);border-radius:var(--radius-pill);
  background:var(--color-ink);color:var(--color-surface);
  font-weight:var(--font-weight-medium)}
.rating .div{width:1px;height:var(--rating-value-height);background:var(--color-ink-faint)}

/* ── Цінова плашка (як home-products price box) ─────────────────────────── */
.pricebox{position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:.125rem;min-height:var(--price-box-min-height);
  border-radius:var(--price-box-radius);background:var(--color-surface-muted);
  padding:var(--price-box-padding-block) var(--price-box-padding-inline)}
.pricebox.has-off{padding-right:calc(var(--discount-min-width) + var(--discount-offset-inline) + var(--price-box-padding-inline))}
.pricebox .old{font-size:var(--text-price-old);line-height:var(--text-price-old--lh);
  color:var(--text-mute);text-decoration:line-through}
.pricebox .cur{display:flex;align-items:baseline;gap:.375rem;
  font-size:var(--text-price-current);line-height:var(--text-price-current--lh);
  font-weight:var(--price-weight);color:var(--color-ink)}
.pricebox .off{position:absolute;right:var(--discount-offset-inline);top:50%;transform:translateY(-50%)}

/* ── Списки ──────────────────────────────────────────────────────────────── */
.item{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;
  border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
/* Крайні рядки списку: поле картки вже є, свій відступ зверху й знизу не додаємо */
.card > .item:first-child,dl > .kv:first-child{padding-top:0}
.card > .item:last-child,dl > .kv:last-child{padding-bottom:0}
/* Однакова комірка в бібліотеці й догляді: вся площа відкриває деталі;
   окремі дії догляду стоять під нею. */
.list-cell{display:flex;align-items:center;gap:var(--space-3);
  min-height:calc(5.5rem + var(--space-3) + var(--space-3));
  padding:var(--space-3) 0;margin:0;border:0;border-radius:var(--card-radius);overflow:hidden;
  background:var(--grad-guide-surface);box-shadow:none;outline:none;
  transition:background var(--transition-base),color var(--transition-base)}
.list-cell--interactive{width:100%;text-align:left}
.list-cell__media{position:relative;display:block;align-self:center;flex:none;width:5.5rem;
  height:5.5rem;min-height:5.5rem;padding:0;border:0;border-radius:var(--miniapp-product-image-radius);overflow:hidden;
  background:transparent;line-height:0}
.list-cell__media > .thumb--lg{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.list-cell__media img{position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:var(--space-1);object-fit:contain}
.list-cell[data-guide] .list-cell__media img{padding:0}
.list-cell__content{display:block;align-self:flex-start;min-width:0;
  padding:var(--space-2) 0 0}
#p-care .list-cell__content{display:flex;flex-direction:column;align-self:stretch;padding:0}
.list-cell__status{display:block;margin-bottom:var(--space-1)}
.list-cell__title{margin:0;font-weight:var(--font-weight-medium);overflow-wrap:anywhere}
.list-cell__description{display:block;margin-top:var(--space-1)}
.list-cell__title-action{display:block;width:100%;padding:0;border:0;background:transparent;
  color:inherit;font-weight:var(--font-weight-medium);text-align:left;overflow-wrap:anywhere}
.list-cell__meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  margin-top:var(--space-1)}
#p-care .list-cell__meta{flex:1;gap:var(--space-3);padding-top:var(--space-2)}
#p-care .list-cell__meta > .btn{width:100%;margin-top:auto;padding-inline:var(--space-4)}
@media (hover:hover){
  .list-cell--hoverable:hover{background:var(--grad-mint-soft);color:var(--on-mint)}
  .list-cell--hoverable:hover :is(.mute,.dim,.chev){color:var(--on-mint-dim)}
}
.list-cell--hoverable:is(:focus-visible,:active){background:var(--grad-mint-soft);color:var(--on-mint)}
.list-cell--hoverable:is(:focus-visible,:active) :is(.mute,.dim,.chev){color:var(--on-mint-dim)}
/* Бібліотека інструкцій: список зливається з фоном екрана. */
#p-guides .card:not(.plain){display:flex;flex-direction:column;gap:var(--space-4);
  padding-inline:0;background:transparent;box-shadow:none;outline:none}
.guide-formats{display:inline-flex;align-items:center;gap:var(--space-2);
  margin-inline-start:var(--space-2);vertical-align:middle}
.guide-format{display:inline-flex;align-items:center;color:var(--accent-ink)}
.guide-format svg{width:var(--button-icon-size);height:var(--button-icon-size);flex:none}
.list-cell .guide-chevron{margin-right:var(--space-2);
  mask:url('/icons/caret-right-bold.svg') center / contain no-repeat;
  -webkit-mask:url('/icons/caret-right-bold.svg') center / contain no-repeat}
/* Дія всередині картки (як home-care-step-card__cta) */
.card-cta{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:var(--space-2);margin-top:var(--space-1);padding:var(--space-3) 0 var(--space-1);
  min-height:3rem;border-top:1px solid var(--line);background:transparent;cursor:pointer;
  color:var(--color-ink);font-size:var(--text-body-m-mobile);
  line-height:var(--text-body-m-mobile--lh);font-weight:var(--font-weight-medium);
  text-align:left}
.card-cta:hover{color:var(--color-brand-700)}
.card-cta svg{width:var(--button-icon-size);height:var(--button-icon-size);
  flex:none;color:var(--text-mute)}
.card-cta:hover svg{color:var(--color-brand-700)}
.thumb{width:3.5rem;height:3.5rem;border-radius:var(--miniapp-product-image-radius);flex:none;
  background:var(--color-surface-muted);display:grid;place-items:center;
  font-size:var(--text-h6-mobile);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;padding:.25rem}
.tile .ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:var(--space-5)}

/* ── Екран «Клуб» ────────────────────────────────────────────────────────── */
/* Надрядок над назвою рівня. Верхнє поле зменшено з --space-5 до --space-4,
   щоб блок не став вищим, ніж був до появи підпису. */
.level-hero{padding:var(--space-4) 0 var(--space-1);
  display:flex;align-items:flex-start;gap:var(--space-3)}
.level-hero__text{min-width:0;flex:1}
/* Рядок заголовка екрана: назва ліворуч, місце під перемикач теми праворуч.
   Перемикач один на застосунок і переїжджає в той екран, який стартовий. */
.screen-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-3)}
.screen-head .h-screen{flex:1;min-width:0}
.level-kicker{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-body-xxs);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-medium);
  /* --text-mute (neutral-700) дає 3.69:1 на білому при порозі 4.5:1 для
     тексту 12px. --text-dim (neutral-800) дає 8.06:1. Від великого імені
     підпис відрізняється розміром і кольором, без капслока. */
  color:var(--text-dim);margin-bottom:var(--space-1)}
.level-name{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h1-mobile);font-weight:var(--font-weight-black);
  line-height:var(--text-h1-mobile--lh);letter-spacing:var(--text-h1-mobile--ls)}
.level-sub{color:var(--text-dim);margin-top:var(--space-2)}
.progress{margin:var(--space-5) 0 var(--space-2)}
.progress__label{display:flex;align-items:center;justify-content:center;
  gap:var(--space-2);margin-top:var(--space-3);
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-medium);color:var(--color-ink);text-align:center}
.progress--max .progress__label{margin-top:0}
.progress__label svg{width:1.125rem;height:1.125rem;flex:none;color:var(--color-brand-600)}
/* Назва рівня в підписі виділяється насиченістю, а не капслоком */
.progress__label em{font-style:normal;font-weight:var(--font-weight-black)}
.bar{display:block;width:100%;height:var(--progress-height);border-radius:var(--radius-pill);
  background:var(--progress-track);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:inherit;
  background:var(--progress-fill);transition:width var(--progress-transition-duration) ease}
@media (prefers-reduced-motion:reduce){.bar > span{transition:none}}
.perks{display:flex;flex-direction:column;gap:var(--space-2)}
.perk{display:flex;gap:var(--space-2);align-items:baseline}
.perk .dot{width:.375rem;height:.375rem;border-radius:var(--radius-pill);
  background:var(--color-action-primary);flex:none;transform:translateY(-.125rem)}
.card.next{background:var(--grad-surface);outline:none;
  box-shadow:var(--shadow-card-s)}
.next .perk .dot{background:var(--color-neutral-400)}
.notice{border-radius:var(--card-radius);padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-2);font-size:var(--text-body-m-mobile);
  line-height:var(--text-body-m-desktop--lh)}
.notice.warn{background:var(--color-warning-soft);border:1px solid var(--color-warning-border)}
.notice.mint{background:var(--color-success-soft);border:1px solid var(--color-success-border)}

/* ── Порожній стан і помилка ─────────────────────────────────────────────
   Компонент EmptyState сайта: заголовок h5 по центру, під ним — тёмна
   пігулка по ширині тексту. Замінює .card.plain з кнопкою .btn--neutral:
   фон кнопки і картки там збігався, і кнопки не було видно. */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--state-gap);padding:var(--state-padding-block-start) 0 var(--state-padding-block-end)}
/* Порожній екран займає доступну висоту; шапка і зовнішні дії лишаються
   в потоці, а стан центрується між ними. Довгий вміст може прокручуватися. */
.page.on:has(> .state),.page.on:has(> :not([hidden]) > .state){
  display:flex;flex-direction:column;flex:1 0 auto}
.page.on > .state,.page.on > :not([hidden]):has(> .state){
  flex:1;display:flex;flex-direction:column;justify-content:center}
.page.on > :not([hidden]):has(> .state) > .state{padding-block:var(--state-gap)}
.spinner{flex:none;inline-size:var(--button-icon-size);block-size:var(--button-icon-size);border:2px solid var(--line);border-block-start-color:var(--color-action-primary);border-radius:var(--radius-pill);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state__title{margin:0;color:var(--color-ink);font-size:var(--state-title-size);
  line-height:var(--state-title-lh);font-weight:var(--font-weight-black);text-wrap:balance}
.state__text{margin:0;color:var(--text-dim);font-size:var(--text-body-m-mobile);
  line-height:var(--text-body-m-desktop--lh)}
/* Код для підтримки: розмір h5, жирний */
.state__code{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h5-mobile);line-height:var(--text-h5-mobile--lh);
  font-weight:var(--font-weight-bold);color:var(--color-ink)}

/* ── Інструкції: медіа ──────────────────────────────────────────────────── */
.media{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-4) 0 0}
.media .btn svg{width:var(--button-lg-icon-size);height:var(--button-lg-icon-size);flex:none}

/* ── Інструкція: шапка, кроки й період курсу ─────────────────────────────── */
.instruction-hero{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);
  margin-bottom:var(--space-4)}
.instruction-hero__media{position:relative;display:flex;width:100%;padding:0;overflow:hidden;
  border-radius:var(--miniapp-product-image-radius);background:transparent}
.instruction-hero--with-image .instruction-hero__media{aspect-ratio:var(--instruction-hero-photo-ratio)}
.instruction-hero__thumb{flex:none;background:transparent}
.instruction-hero--with-image .instruction-hero__thumb{position:absolute;inset:0;width:100%;height:100%;
  border-radius:inherit}
.instruction-hero--with-image .instruction-hero__thumb img{width:100%;height:100%;object-fit:cover;padding:0}
.instruction-hero--with-image:not(.product-hero) .instruction-hero__thumb img{object-fit:contain}
.instruction-hero__thumb-action{padding:0;cursor:pointer}
.instruction-hero__thumb-action:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}
.instruction-hero__copy{width:100%;min-width:0;text-align:start}
.instruction-hero--with-image .instruction-hero__copy{position:static;width:100%;padding:0;pointer-events:auto}
.instruction-hero__eyebrow{margin-bottom:var(--space-2);color:var(--text-dim);
  font-size:var(--text-body-xxs);line-height:var(--text-body-xs-mobile--lh)}
.instruction-hero__title{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h6-mobile);line-height:var(--text-h6-mobile--lh);
  font-weight:var(--font-weight-black);overflow-wrap:anywhere}
.instruction-brand{color:var(--color-brand-500)}
/* Назва товару заповнює рядок до краю, а не вирівнюється по довжині рядків. */
.instruction-hero__title{text-wrap:wrap}
.instruction-hero--with-image .instruction-hero__title{overflow:visible;color:var(--text);
  font-size:var(--text-h5-mobile);line-height:var(--text-h5-mobile--lh);
  white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
.instruction-hero__product{margin-top:var(--space-1);font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh);color:var(--text-dim);overflow-wrap:anywhere}
.instruction-hero__meta{margin-top:var(--space-2);font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh);font-weight:var(--font-weight-medium)}
.instruction-hero__note{margin-top:var(--space-1);font-size:var(--text-body-xxs);
  line-height:var(--text-body-xs-mobile--lh);color:var(--text-dim)}
/* Картка товару використовує геометрію фото й типографіку шапки інструкції.
   Повна назва стоїть під фото, щоб її не обрізати поверх зображення. */
.product-hero{margin-bottom:var(--space-6)}
.product-hero.instruction-hero--with-image .instruction-hero__copy{position:static;width:100%;pointer-events:auto}
.product-hero.instruction-hero--with-image .instruction-hero__title{overflow:visible;white-space:normal;text-overflow:clip}
.product-hero .instruction-hero__title{font-size:var(--text-h5-mobile);line-height:var(--text-h5-mobile--lh)}
.product-hero .instruction-hero__media{border-radius:var(--miniapp-product-image-radius)}
.product-hero .instruction-hero__thumb img{object-fit:cover}
.product-detail__section{margin-bottom:var(--space-6)}
#p-product .product-detail__price{gap:var(--space-3);padding:var(--space-4);
  min-height:var(--product-price-min-height);border-radius:var(--card-radius)}
#p-product .product-detail__price.has-off{padding-right:calc(var(--product-price-discount-width) + var(--discount-offset-inline) + var(--space-4))}
#p-product .product-detail__price .old{font-size:var(--text-body-m-desktop);
  line-height:var(--text-body-m-desktop--lh);color:var(--text-dim)}
#p-product .product-detail__price .cur{gap:var(--space-2);font-weight:var(--font-weight-medium)}
#p-product .product-detail__price .cur span{font-size:var(--text-body-m-desktop);
  line-height:var(--text-body-m-desktop--lh)}
#p-product .product-detail__price .cur strong{font-size:var(--text-h5-mobile);
  line-height:var(--text-h5-mobile--lh);font-weight:var(--font-weight-black)}
#p-product .product-detail__price .off{min-width:var(--product-price-discount-width);
  height:var(--space-10);font-size:var(--text-body-m-desktop);
  line-height:var(--text-body-m-desktop--lh);transform:translateY(-50%) rotate(-3deg)}
.product-detail__care .badge.inline{padding:0;border-radius:0;background:transparent;box-shadow:none;
  font-size:var(--product-care-status-size);line-height:var(--text-body-m-mobile--lh);
  font-weight:var(--font-weight-black)}
.product-detail__care .badge--mint{color:var(--text-mute)}
.product-detail__care .badge--warn{color:var(--color-care-warning)}
.product-detail__care .badge--danger{color:var(--color-care-danger)}
.product-detail__care .badge--soft{color:var(--text-dim)}
.product-detail__care p{margin:var(--space-2) 0 0}
.product-detail__actions{margin-top:var(--space-6)}
.product-detail__actions .btn{margin-top:var(--space-3)}
/* ── Сегмент-контрол: вибір одного варіанта (тривалість курсу) ──────────── */
.segmented{--segmented-count:2;--segmented-index:0;position:relative;isolation:isolate;
  display:flex;gap:var(--space-1);margin-bottom:var(--space-5);padding:var(--space-1);
  border-radius:var(--radius-pill);background:var(--surface-2)}
.segmented[data-count="3"]{--segmented-count:3}
.segmented[data-count="4"]{--segmented-count:4}
.segmented[data-index="1"]{--segmented-index:1}
.segmented[data-index="2"]{--segmented-index:2}
.segmented[data-index="3"]{--segmented-index:3}
/* Плашка выбранного — как .nav__indicator: плавно переезжает между пунктами. */
.segmented__indicator{position:absolute;z-index:0;top:var(--space-1);bottom:var(--space-1);
  left:var(--space-1);
  width:calc((100% - var(--space-2) - (var(--segmented-count) - 1)*var(--space-1))/var(--segmented-count));
  border-radius:var(--radius-pill);background:var(--color-brand-500);box-shadow:var(--shadow-card-s);
  transform:translateX(calc(var(--segmented-index)*(100% + var(--space-1))));
  transition:transform var(--miniapp-nav-transition-duration) ease;pointer-events:none}
.segmented__item{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:var(--button-height);
  border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-dim);
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh);
  font-weight:var(--font-weight-medium);white-space:nowrap;cursor:pointer;
  transition:color var(--miniapp-nav-transition-duration) ease}
.segmented__item[aria-pressed="true"]{background:transparent;color:var(--color-brand-900);
  font-weight:var(--font-weight-bold)}
.segmented__item:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}
:root[data-theme="dark"] .segmented__indicator{box-shadow:none}
.instruction-section{margin:0 0 var(--space-8)}
.instruction-course{margin-bottom:var(--space-8);color:var(--text)}
.instruction-course__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.instruction-course__item{display:flex;align-items:center;gap:var(--space-3);min-width:0;
  padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-action-primary-subtle)}
.instruction-course__icon{display:grid;place-items:center;width:var(--instruction-visual-size);
  height:var(--instruction-visual-size);flex:none;border-radius:var(--radius-pill);
  background:var(--color-surface);color:var(--color-success)}
.instruction-course__icon svg,.instruction-alert__icon svg{display:block;width:var(--instruction-icon-size);height:var(--instruction-icon-size)}
.instruction-course__title{font-size:var(--text-h6-mobile);line-height:var(--text-h6-mobile--lh);
  font-weight:var(--font-weight-black);margin:0 0 var(--space-3)}
.instruction-course__summary{min-width:0;margin:0;line-height:var(--text-body-m-mobile--lh);font-weight:var(--font-weight-bold)}
.instruction-steps{padding:0;background:transparent;box-shadow:none;outline:none}
.instruction-steps__list{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none}
.instruction-step{display:grid;grid-template-columns:var(--instruction-visual-size) minmax(0,1fr);
  align-items:center;gap:var(--space-1);min-width:0;padding:var(--space-3);
  border-radius:var(--card-radius);background:var(--grad-instruction-step);color:var(--instruction-step-ink)}
.instruction-step__marker{display:grid;place-items:center;width:var(--instruction-visual-size);
  height:var(--instruction-visual-size);background:transparent;color:var(--color-neutral-500);
  font-size:var(--text-h3-mobile);line-height:var(--text-h3-mobile--lh);
  font-weight:var(--font-weight-bold);white-space:nowrap}
.instruction-step__body{min-width:0}
.instruction-step__title{font-size:var(--text-body-m-mobile);line-height:var(--text-body-m-mobile--lh);
  font-weight:var(--font-weight-bold);overflow-wrap:anywhere;margin:0 0 var(--space-1)}
.instruction-step__schedule{margin:0 0 var(--space-2);color:var(--text-dim);
  font-size:var(--text-body-xs-mobile);line-height:var(--text-body-xs-mobile--lh)}
.instruction-product+.instruction-product{margin-top:var(--space-6);padding-top:var(--space-5)}
.instruction-product__header{display:flex;align-items:center;gap:var(--space-3);min-width:0;
  margin-bottom:var(--space-2)}
.instruction-product__image{width:var(--miniapp-thumb-size);height:var(--miniapp-thumb-size)}
.instruction-product__image img{padding:0;object-fit:contain}
.instruction-product__title{min-width:0;margin:0;font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh);font-weight:var(--font-weight-bold);overflow-wrap:anywhere}
.instruction-step__product{display:flex;align-items:center;gap:var(--space-2);width:100%;
  margin-top:var(--space-2);text-align:left;font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh);font-weight:var(--font-weight-medium)}
.instruction-step__product .thumb{width:2.75rem;height:2.75rem}
.instruction-step__copy p{margin:0;line-height:var(--text-body-m-mobile--lh)}
.instruction-alert{display:grid;grid-template-columns:var(--instruction-visual-size) minmax(0,1fr);
  align-items:center;gap:var(--space-3);margin:var(--space-4) 0;padding:var(--space-3);
  border:var(--instruction-outline-width) solid var(--color-warning-border);border-radius:var(--radius-md);
  background:var(--color-warning-soft);color:var(--text)}
.instruction-alert__icon{display:grid;place-items:center;width:var(--instruction-visual-size);
  height:var(--instruction-visual-size);border-radius:var(--radius-pill);
  background:var(--color-warning-border);color:var(--color-warning)}
.instruction-alert:not(.instruction-alert--aftercare){display:block}
.instruction-alert__header{display:flex;align-items:center;gap:var(--space-3);
  min-width:0;margin-bottom:var(--space-2)}
.instruction-alert__heading{min-width:0}
.instruction-alert__header .instruction-alert__title{margin:0}
.instruction-alert--aftercare{grid-template-columns:max-content minmax(0,1fr);
  border:0;border-radius:var(--radius-md);background:var(--grad-error-soft);
  box-shadow:none;padding:var(--space-3)}
.instruction-alert--aftercare .instruction-alert__copy{font-weight:var(--font-weight-bold)}
.instruction-alert__restrictions{display:flex;align-items:center;gap:var(--space-1);justify-self:start}
.instruction-alert__restriction{display:grid;place-items:center;width:var(--instruction-icon-size);
  height:var(--instruction-icon-size);flex:none;color:var(--color-warning)}
.instruction-alert--aftercare .instruction-alert__restriction{color:var(--color-error)}
.instruction-alert__restriction svg{display:block;width:100%;height:100%}
.instruction-aftercare{margin:var(--space-8) 0}
.instruction-aftercare__title{margin:0 0 var(--space-2);font-size:var(--text-h6-mobile);
  line-height:var(--text-h6-mobile--lh);font-weight:var(--font-weight-black);color:var(--text)}
.instruction-aftercare .instruction-alert{margin:0}
.instruction-alert__body{min-width:0}
.instruction-alert__title{margin:0 0 var(--space-1);font-size:var(--text-body-m-mobile);
  line-height:var(--text-body-m-mobile--lh);font-weight:var(--font-weight-bold)}
.instruction-alert__copy p{margin:0;line-height:var(--text-body-m-mobile--lh)}
.instruction-alert--order .instruction-alert__title{font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh)}
.instruction-alert--order .instruction-alert__copy p{font-size:var(--miniapp-guide-step-copy-size);
  line-height:var(--text-body-xs-mobile--lh)}
.instruction-alert--order .instruction-alert__icon{background:transparent}
@media (max-width:42rem){.instruction-course__items{grid-template-columns:minmax(0,1fr)}}
/* ── Пошук ───────────────────────────────────────────────────────────────── */
.search{width:100%;min-height:2.75rem;padding:0 var(--space-4);
  border-radius:var(--radius-pill);background:var(--color-surface-muted);
  border:1px solid transparent;color:var(--text);font:inherit;margin-bottom:var(--space-1)}
.search:focus{outline:none;border-color:var(--color-line-strong)}

/* ── Акції: картка товару (структура product-card.tsx, мобільний вигляд) ── */
.grid{display:flex;flex-direction:column;gap:var(--space-3)}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--card-gap);
  background:var(--surface);border-radius:var(--card-radius);padding:var(--card-padding);
  box-shadow:var(--shadow-card-s);outline:1px solid var(--color-line);outline-offset:-1px}
.tile .ph{position:relative;aspect-ratio:1;border-radius:var(--miniapp-product-image-radius);
  background:var(--color-surface-muted);overflow:hidden}
.tile .nm{font-size:var(--text-body-m-mobile);line-height:var(--text-body-m-mobile--lh);
  font-weight:var(--font-weight-medium)}
.tile .feats{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  color:var(--text-dim);font-size:var(--text-body-xs-mobile)}
.tile .feats span{display:inline-flex;align-items:center;gap:.375rem}
.tile .feats svg{width:1rem;height:1rem;flex:none;color:var(--text-mute)}

/* ── Нижня навігація ─────────────────────────────────────────────────────── */
.nav{display:block;background:var(--surface);flex:none;
  padding-bottom:env(safe-area-inset-bottom)}
.nav__dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.nav button{padding:.5rem 0 .6875rem;display:flex;flex-direction:column;
  align-items:center;gap:.1875rem;color:var(--text-mute);
  font-size:var(--text-body-xxs);line-height:var(--text-body-xxs--lh);
  font-weight:var(--font-weight-medium)}
.nav button.on{color:var(--text)}
.nav button.on svg{color:var(--color-action-primary)}


/* ── Екран запрошення ────────────────────────────────────────────────────── */
#p-gate.on{display:flex;flex:1 0 auto;padding:0}
.gate{padding:var(--pad);display:flex;flex-direction:column;flex:1;width:100%;
  gap:var(--space-6)}
.gate-hero{background:var(--grad-brand);border-radius:var(--card-radius);
  padding:var(--space-6) var(--space-5) var(--space-8);color:var(--color-surface);
  box-shadow:var(--shadow-card)}
.hl-light{color:var(--color-brand-900)}
.gate .mark{width:3rem;height:3rem;border-radius:var(--radius-inner);
  background:rgb(255 255 255 / .22);display:grid;place-items:center;
  margin-bottom:var(--space-5)}
.gate .mark svg{width:1.375rem;height:1.49rem;fill:var(--color-surface)}
.gate h1{font-variation-settings:"wdth" var(--font-width-fixel-text);
  font-size:var(--text-h3-mobile);line-height:var(--text-h3-mobile--lh);
  font-weight:var(--font-weight-black);margin:0}
.gate ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.gate li{display:flex;gap:var(--space-3);align-items:flex-start}
.gate li .dot{width:.4375rem;height:.4375rem;border-radius:var(--radius-pill);
  background:var(--color-action-primary);flex:none;margin-top:.5rem}
/* У тёмной теми тіні карток не працюють: сірий ореол на темному тлі виглядає
   брудно. Картку відділяють тло й обведення. */
:root[data-theme="dark"] .gate-hero,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .hero{box-shadow:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px;border-radius:var(--radius-xs)}

/* ── Светлый редизайн Mini App по референсу заказчика ────────────────────── */
.screen-kicker{margin:0;color:var(--color-brand-600);font-family:var(--font-handwritten);
  font-size:var(--miniapp-script-size);font-weight:700;line-height:1}
.screen-head{margin-bottom:var(--space-4)}
.screen-head .h-screen{margin:var(--space-2) 0 0;font-size:var(--miniapp-screen-title-size)}
.h-sec{margin:var(--space-6) 0 var(--space-3);font-size:var(--text-body-m-mobile);line-height:1.25}
.card{border-radius:var(--miniapp-card-radius)}
.nav{padding:var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom))}
.nav__dock{position:relative;isolation:isolate;padding:var(--space-1);background:var(--color-surface-muted);
  border-radius:var(--miniapp-card-radius)}
.nav__indicator{position:absolute;z-index:0;top:var(--space-1);bottom:var(--space-1);
  left:var(--space-1);width:calc((100% - var(--space-2))/3);
  border-radius:var(--miniapp-card-radius-sm);background:var(--color-brand-500);
  transform:translateX(0);transition:transform var(--miniapp-nav-transition-duration) ease;
  pointer-events:none}
.nav__dock[data-active="care"] .nav__indicator{transform:translateX(100%)}
.nav__dock[data-active="guides"] .nav__indicator{transform:translateX(200%)}
.nav button{width:100%;min-height:var(--button-lg-height);padding:var(--space-2) var(--space-1);
  border-radius:var(--miniapp-card-radius-sm);color:var(--text-dim);gap:var(--space-1);
  line-height:var(--text-body-xs-mobile--lh);position:relative;z-index:1;background:transparent;
  transition:color var(--miniapp-nav-transition-duration) ease}
.nav button svg{width:var(--button-icon-size);height:var(--button-icon-size)}
.nav button.on{background:transparent;color:var(--color-surface);
  font-weight:var(--font-weight-bold)}
.nav button.on svg{background:transparent;color:currentColor}

/* Поиск, быстрые фильтры и компактные строки инструкций. */
.guides-search{display:flex;align-items:center;gap:var(--space-2);width:100%;
  padding-inline:var(--space-4);background:var(--color-surface-muted);
  border-radius:var(--radius-pill);color:var(--text-dim)}
.guides-search svg{width:var(--button-icon-size);height:var(--button-icon-size);flex:none}
.guides-search .search{min-width:0;margin:0;padding:0;border:0;background:transparent;
  caret-color:var(--color-brand-500);
  font-size:var(--text-body-xs-mobile)}
.guides-search .search::placeholder{color:var(--text-dim);opacity:1}
.guides-search .search::-webkit-search-cancel-button{display:none}
.guides-search__clear{margin-inline-end:calc((var(--button-icon-size) - var(--button-height)) / 2)}
.guides-search .search:placeholder-shown + .guides-search__clear{display:none}
.guides-search:focus-within{outline:2px solid var(--color-line-strong)}
.guide-filters{display:flex;gap:var(--space-2);margin:var(--space-3) 0;
  overflow-x:auto;scrollbar-width:none}
.guide-filters::-webkit-scrollbar{display:none}
.guide-filter{flex:none;min-height:var(--miniapp-pill-height);padding:0 var(--space-3);
  border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--color-ink);font-size:var(--text-body-xxs);
  font-weight:var(--font-weight-bold)}
.guide-filter[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);
  color:var(--color-surface)}
.guides-empty{margin:var(--space-5) 0;color:var(--text-dim)}
#p-guides .h-sec{margin-top:var(--space-4)}
#p-guides .card:not(.plain){gap:0;margin:0;padding:0}
#p-guides .list-cell{min-height:4.5rem;padding:var(--space-2) 0;
  border-radius:0;border-bottom:1px solid var(--color-line);background:transparent}
#p-guides .list-cell__media{width:var(--miniapp-thumb-size);height:var(--miniapp-thumb-size);
  min-height:var(--miniapp-thumb-size);border-radius:var(--miniapp-product-image-radius);
  background:var(--color-surface-muted)}
#p-guides .list-cell__media > .thumb--lg{width:100%;height:100%;border-radius:inherit}
#p-guides .list-cell__media img{object-fit:contain;padding:0}
#p-guides .list-cell__content{align-self:center;padding:0;margin:0}
#p-guides .guide-filters + #guides-mine .h-sec{margin-top:var(--space-3)}
#p-guides .list-cell__title{display:block;font-size:var(--text-body-xs-mobile);
  font-weight:var(--font-weight-bold);line-height:1.2}
#p-guides .list-cell__description{margin-top:var(--space-1);font-size:var(--text-body-xxs);
  color:var(--text-dim);line-height:1.25}
#p-guides .list-cell .guide-chevron{margin-right:0;color:var(--color-ink)}
#p-guides .list-cell:is(:hover,:focus-visible,:active){background:var(--color-surface-muted)}
#p-guides .list-cell:is(:hover,:focus-visible,:active) .mute{color:var(--text-dim)}
#p-guides .list-cell[hidden]{display:none}

/* Заказы: активный заказ выделен Flint, полученные сгруппированы ниже. */
#p-orders .order-card{margin-bottom:var(--miniapp-list-gap);padding:var(--space-4);
  background:var(--color-surface-muted);border-radius:var(--miniapp-card-radius)}
#p-orders .order-card--active{background:var(--color-ink);color:var(--color-surface)}
.order-card__main{display:block;width:100%;padding:0;text-align:left;color:inherit}
.order-card__main:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:var(--space-1)}
#p-orders .order-card__head{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;width:100%;gap:var(--space-2);
  font-size:var(--text-body-xs-mobile)}
#p-orders .order-card__head b{font-weight:var(--font-weight-black)}
.order-card__number{color:var(--color-brand-600)}
.order-card--active .order-card__number{color:var(--color-brand-500)}
#p-orders .order-card__head > span{justify-self:end;color:var(--text-dim);
  font-size:var(--text-body-xxs);text-align:right;white-space:nowrap}
#p-orders .order-card--active .order-card__head > span{color:var(--color-neutral-400)}
.order-preview{display:flex;align-items:center;gap:var(--space-3);min-width:0;margin:var(--space-4) 0}
.order-preview__images{display:flex;flex:none;padding-left:var(--space-2)}
.order-preview__image{width:var(--miniapp-thumb-size);height:var(--miniapp-thumb-size);
  margin-left:calc(var(--space-2) * -1);overflow:hidden;border:2px solid var(--color-surface);
  border-radius:var(--miniapp-product-image-radius);background:var(--color-surface-muted)}
.order-preview__image img{display:block;width:100%;height:100%;object-fit:contain}
.order-preview__summary{min-width:0;flex:1;display:block;overflow-wrap:anywhere;
  font-size:var(--text-body-xxs);line-height:1.25}
#p-orders .order-card--active .order-preview__summary{color:var(--color-neutral-400)}
.order-card__status{margin:0 0 var(--space-3);padding-top:var(--space-2);
  border-top:2px solid var(--color-brand-500);font-size:var(--text-body-xxs);
  color:var(--color-brand-400)}
.order-card__progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-1);margin:var(--space-3) 0 var(--space-4)}
.order-card__progress-step{height:var(--space-1);border-radius:var(--radius-pill);
  background:var(--color-neutral-800)}
.order-card__progress-step.on{background:var(--color-brand-500)}
.order-card__progress-labels{grid-column:1/-1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;
  gap:var(--space-1);color:var(--color-neutral-400);font-size:var(--text-body-xxs);
  line-height:1.1}
.order-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.order-card__foot strong{font-size:var(--miniapp-order-price-size);
  font-weight:var(--font-weight-black);line-height:1}
.order-card__instruction{margin-top:var(--space-4)}

/* Детали заказа: номер, статус, компактные товары и сумма. */
#p-order .h-screen{margin:var(--space-2) 0 var(--space-2);font-size:var(--miniapp-screen-title-size)}
.order-detail__status{display:block;padding:0}
#p-order .order-detail__status .badge.inline{font-size:var(--text-body-m-mobile);
  line-height:var(--text-body-m-mobile--lh);
  font-weight:var(--font-weight-black)}
#p-order .card{padding:var(--space-3);background:var(--color-surface-muted)}
#p-order .item{min-height:4rem;gap:var(--space-2)}
#p-order .item .thumb{width:var(--miniapp-thumb-size);height:var(--miniapp-thumb-size);
  border-radius:var(--miniapp-product-image-radius)}
.order-detail__name{display:flex;flex-direction:column;gap:var(--space-1);
  font-size:var(--text-body-xs-mobile);line-height:1.15}
.order-detail__name strong{font-weight:var(--font-weight-bold)}
.order-detail__name .mute{color:var(--text-dim)}
#p-order .item > .condensed{font-size:var(--text-body-xs-mobile);
  font-weight:var(--font-weight-bold);white-space:nowrap}
#p-order .item .chev{display:none}
.order-detail__total{display:flex;justify-content:space-between;gap:var(--space-3);
  margin-top:var(--space-5);font-size:var(--text-h6-mobile);font-weight:var(--font-weight-black)}
.order-detail__breakdown{margin-top:var(--space-2)}
/* Уход: просроченные товары отделены цветом, дальнейшие — светлыми карточками. */
#p-care .h-sec{margin-top:var(--space-6)}
#p-care #care-overdue-body,#p-care #care-current-body{gap:var(--miniapp-list-gap);padding:0}
#p-care .care-entry{display:flex;flex-direction:column;gap:var(--space-2)}
#p-care .list-cell{min-height:0;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3);border:1px solid var(--color-line-strong);
  border-radius:var(--miniapp-card-radius);background:var(--color-surface)}
#p-care .list-cell--overdue{border-color:var(--color-error-border);
  background:var(--color-error-soft)}
#p-care .list-cell__media{width:var(--miniapp-thumb-size);height:var(--miniapp-thumb-size);
  min-height:var(--miniapp-thumb-size);border-radius:var(--miniapp-product-image-radius)}
#p-care .list-cell__media .thumb--lg{width:100%;height:100%}
#p-care .list-cell__media img{padding:0}
#p-care .list-cell__content{min-width:0;margin:0;padding:0}
#p-care .list-cell__status{order:0;margin:0 0 var(--space-2)}
#p-care .list-cell__status .badge--warn{color:var(--color-ink)}
#p-care .list-cell__meta{order:2;gap:var(--space-2);margin-top:var(--space-3);padding:0}
#p-care .care-actions,#p-product .care-actions{display:flex;align-items:center;gap:var(--space-2)}
#p-care .care-actions .btn,#p-product .care-actions .btn{flex:1;min-width:0;margin:0;padding-inline:var(--space-4);
  border-radius:var(--radius-pill)}
/* Вікно підтвердження (dialog): по центру, фон за ним затемнюється й
   розмивається. Затемнення й розмиття — backdrop-filter (brightness), без
   нових кольорів. Кнопки — спільні .btn--lg: «Залишити» зелена (заохочуємо лишити
   нагадування), «Так, прибрати» сіра. */
.confirm-dialog{box-sizing:border-box;width:min(22rem,calc(100vw - var(--space-8)));margin:auto;
  padding:var(--space-6) var(--space-4);border:0;border-radius:var(--miniapp-card-radius);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-pop)}
.confirm-dialog::backdrop{background:transparent;backdrop-filter:blur(var(--space-1)) brightness(.5)}
.confirm-dialog[open]{display:grid;gap:var(--space-3)}
/* Розмір 1.5rem — найближчий існуючий токен (--miniapp-order-price-size); окремого токена заголовка такого розміру немає. */
.confirm-dialog__title{margin:0;text-align:center;font-size:var(--miniapp-order-price-size);line-height:1.1}
.confirm-dialog__text{margin:0;color:var(--text-dim);font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh)}
.confirm-dialog__body{display:grid;gap:var(--space-3)}
.confirm-dialog__actions{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
/* Кошик «прибрати» — сіре коло --button-height в кінці рядка дій. */
#p-care .care-remove{flex:none;background:var(--color-surface-muted);color:var(--text-dim)}
#p-product .product-detail__care .care-actions{margin-top:var(--space-3)}
#p-care .list-cell__meta .mute{color:var(--text-dim);font-size:var(--text-body-xxs)}
#p-care .list-cell .guide-chevron{width:var(--miniapp-chevron-size);height:var(--miniapp-chevron-size);
  align-self:center;margin:0;color:var(--color-ink)}
@media (hover:hover){
  #p-care .list-cell:hover{background:var(--color-surface-muted);color:var(--color-ink)}
  #p-care .list-cell--overdue:hover{background:var(--color-error-soft)}
}
#p-care .list-cell:is(:focus-visible,:active){background:var(--color-surface-muted);color:var(--color-ink)}
#p-care .list-cell--overdue:is(:focus-visible,:active){background:var(--color-error-soft)}
.care-note{margin:var(--space-6) 0;color:var(--text-dim);font-family:var(--font-sans);
  font-size:var(--text-body-m-mobile);line-height:1.45}
.care-note__lead{margin-right:var(--space-1);color:var(--color-brand-600);font-family:var(--font-handwritten);
  font-size:var(--miniapp-script-size);font-weight:var(--font-weight-bold);line-height:1}
.screen-kicker::first-letter,.care-note__lead::first-letter,
.instruction-hero__eyebrow::first-letter,.instruction-guide-note__lead::first-letter,
#p-product .product-detail__care-note::first-letter{text-transform:lowercase}

/* Товар: светлое фото, фирменный штамп скидки и одна главная покупка. */
#p-product .product-hero{margin-bottom:var(--space-4)}
#p-product .product-hero .instruction-hero__media{background:transparent;
  border-radius:0;aspect-ratio:1}
#p-product .product-hero .instruction-hero__thumb{border-radius:var(--miniapp-product-image-radius)}
#p-product .product-hero .instruction-hero__thumb img{object-fit:cover;padding:0;border-radius:inherit}
#p-product .product-hero .instruction-hero__title{font-size:var(--miniapp-product-title-size);
  line-height:1.05;font-weight:var(--font-weight-black)}
#p-product .instruction-hero__copy{margin-top:var(--space-3)}
.product-discount-stamp{position:absolute;right:var(--space-4);top:var(--space-4);
  z-index:2;display:grid;place-items:center;width:4rem;height:4rem;
  border-radius:var(--radius-pill);background:var(--color-action-primary);
  color:var(--color-action-primary-text);font-size:var(--text-h6-mobile);
  font-weight:var(--font-weight-black);transform:rotate(-12deg)}
#p-product .product-detail__care{padding:var(--space-4);border-radius:var(--miniapp-card-radius);
  background:var(--color-surface-muted)}
#p-product .product-detail__care-resource{margin-top:var(--space-2)}
#p-product .product-detail__care-days{display:block;color:var(--text-dim);
  font-size:var(--text-body-xxs);line-height:var(--text-body-xs-mobile--lh)}
#p-product .product-detail__care-resource .bar{margin-top:var(--space-2)}
#p-product .product-detail__care-note{margin:var(--space-3) 0 0;
  font-family:var(--font-handwritten);font-size:var(--product-care-note-size);
  font-weight:var(--product-care-note-weight);line-height:var(--text-body-m-mobile--lh);
  color:var(--color-brand-600)}
#p-product .product-detail__price{min-height:0;padding:0;border:0;background:transparent;
  box-shadow:none;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start}
#p-product .product-detail__price.has-off{padding-right:0}
#p-product .product-detail__price .old{order:0}
#p-product .product-detail__price .cur{order:1}
#p-product .product-detail__price .cur{display:flex;flex-direction:row;gap:var(--space-3);
  justify-content:flex-start;align-items:baseline}
#p-product .product-detail__price .cur > span{display:none}
#p-product .product-detail__price strong{font-size:var(--miniapp-order-price-size);
  font-weight:var(--font-weight-black)}
#p-product .product-detail__price .off{display:none}
/* Инструкция: фото, выбор курса, три факта и нумерованные шаги. */
:is(#p-guide,.nozzle-screen) .instruction-hero{gap:var(--space-3);margin-bottom:var(--space-4)}
:is(#p-guide,.nozzle-screen) .instruction-hero__media{border-radius:var(--miniapp-product-image-radius);
  background:var(--color-surface-muted);aspect-ratio:var(--instruction-hero-photo-ratio)}
:is(#p-guide,.nozzle-screen) .instruction-hero__thumb img{object-fit:contain}
:is(#p-guide,.nozzle-screen) .instruction-hero--with-image .instruction-hero__copy{position:static;
  width:100%;pointer-events:auto}
:is(#p-guide,.nozzle-screen) .instruction-hero--with-image .instruction-hero__title,
:is(#p-guide,.nozzle-screen) .instruction-hero__title{font-size:var(--miniapp-product-title-size);
  line-height:1.05;white-space:normal;overflow:visible;text-overflow:clip}
:is(#p-guide,.nozzle-screen) .instruction-hero__eyebrow{margin:0 0 var(--space-2);
  font-family:var(--font-handwritten);font-size:var(--miniapp-script-size);
  font-weight:700;line-height:1;color:var(--color-brand-600)}
/* Шапка й перемикач під фото: інструкція й екран насадок (.nozzle-screen)
   оформлені однаково — тривалість курсу й вид насадок, вибраний залитий
   --color-ink. */
:is(#p-guide,#p-product) .segmented{margin:0;padding:var(--space-1);background:var(--color-surface-muted)}
:is(#p-guide,#p-product) .segmented__indicator{background:var(--color-ink);box-shadow:none}
:is(#p-guide,#p-product) .segmented__item[aria-pressed="true"]{color:var(--color-surface)}
#p-guide .instruction-course{margin-bottom:var(--space-6)}
#p-guide .instruction-course__title{display:none}
#p-guide .instruction-course__items{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
#p-guide .instruction-course__item{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  gap:var(--space-2);padding:var(--space-3);border-radius:var(--miniapp-card-radius-sm);
  background:var(--color-surface-muted)}
#p-guide .instruction-course__icon{width:2rem;height:2rem;
  background:var(--color-brand-500);color:var(--color-surface)}
#p-guide .instruction-course__icon svg{width:1.25rem;height:1.25rem}
#p-guide .instruction-course__summary{font-size:var(--text-body-xs-mobile);line-height:1.15}
#p-guide .instruction-course__sub{display:block;margin-top:var(--space-1);
  font-size:var(--text-body-xxs);font-weight:var(--font-weight-regular);
  color:var(--text-dim)}
#p-guide .instruction-section .h-sec{margin-bottom:var(--space-3)}
#p-guide .instruction-steps__list{gap:0}
#p-guide .instruction-step{grid-template-columns:2rem minmax(0,1fr);
  align-items:flex-start;gap:var(--space-3);padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-line);border-radius:0;background:transparent}
#p-guide .instruction-step__marker{width:2rem;height:2rem;
  border:var(--instruction-outline-width) solid var(--color-ink);
  border-radius:var(--radius-pill);background:var(--color-surface);
  color:var(--color-ink);font-size:var(--text-body-xxs);
  font-weight:var(--font-weight-bold)}
#p-guide .instruction-step__body{min-height:var(--space-8);display:flex;
  flex-direction:column;justify-content:center}
#p-guide .instruction-step__title{font-size:var(--text-body-xs-mobile);
  line-height:var(--text-body-xs-mobile--lh);margin-bottom:var(--space-1)}
#p-guide .instruction-step__copy p{font-size:var(--miniapp-guide-step-copy-size);line-height:1.4}
#p-guide .instruction-guide-note{margin:0 0 var(--space-4);font-size:var(--miniapp-guide-note-size);
  line-height:1.5;color:var(--text-dim)}
#p-guide .instruction-guide-note__lead{font-family:var(--font-handwritten);
  font-size:var(--miniapp-guide-note-script-size);font-weight:600;color:var(--color-brand-600)}
/* Атрибут hidden сильнее компонентных display: без этого .nav и .btn его перебивают. */
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.spinner{animation:spin 2.4s linear infinite!important}}

/* Равные ячейки цифр без подмены начертания шрифтом. */
.stat-digit{display:inline-block;width:1ch;text-align:center}

.instruction-course__summary{overflow-wrap:anywhere}