/* MonsterLab — вітрина. Кольори, шрифти й розміри зняті з нинішнього сайту
   (monsterlab.com.ua, 15.10.2026), щоб покупець не помітив переїзду. */

:root {
    --ink: #000;
    --text: #090909;
    --muted: #6a6a6a;
    --light: #acacac;
    --line: #e4e4e4;
    --bg-soft: #f0f0f0;
    --menu: #2a2829;
    --menu-hover: #3d3a3b;
    --accent: #ff5c00;
    --accent-dark: #e04f00;
    --red: #be3128;
    --green: #7baf35;
    /* Зелений для тексту (ціна порції, «В наявності»): --green на білому читається погано. */
    --green-text: #4b8012;
    --blue: #3d8af7;
    --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Шрифт сайту — Rubik (крок 136, власниця: «шрифт якийсь старомодний», обрала з чотирьох). Свої файли в /fonts,
   без Google: змінний шрифт, ваги 300–900 одним файлом на абетку; браузер бере лише потрібні абетки. */
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url(/fonts/rubik-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url(/fonts/rubik-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url(/fonts/rubik-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url(/fonts/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 14px/1.4 Rubik, Arial, Helvetica, sans-serif;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
/* Поля — тим самим шрифтом, що й сторінка (без цього браузер бере системний). */
input, select, textarea { font-family: inherit; }
h1 { font-size: 32px; font-weight: 400; margin: 0 0 18px; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 400; }

.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: middle; flex: none; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 30px; }
.muted { color: var(--muted); }
.empty { padding: 30px 0; color: var(--muted); font-size: 16px; }
[hidden] { display: none !important; }

/* ── Кнопки ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 0 22px;
    border: 0; border-radius: var(--radius);
    background: var(--accent); color: #fff;
    font-size: 16px; line-height: 1; white-space: nowrap;
}
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn--buy { font-size: 18px; }
.btn--big { min-height: 44px; padding: 0 36px; font-size: 18px; }
.btn--small { min-height: 30px; padding: 0 12px; font-size: 13px; background: var(--menu); }
.btn--small:hover { background: #000; }
.btn--ghost { background: #fff; color: var(--text); border: 1px solid #a2a2a2; }
.btn--ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn--disabled, .btn--disabled:hover { background: var(--bg-soft); color: var(--muted); cursor: default; }
.link-button { border: 0; background: none; color: var(--text); text-decoration: underline dashed; padding: 0; }

/* ── Стрічка й шапка ────────────────────────────────────────────────── */

/* Шапка в стилі iHerb (крок 60–61): білий верхній рядок зі стрічкою-«пігулкою», темна смуга з назвою,
   круглим пошуком, входом і кошиком, під нею — біле меню жирним, «Знижки» — помаранчевим, як «Deals». */
.header__top { background: #fff; font-size: 13px; color: #333; }
/* Шапка закріплена вгорі, як на iHerb (крок 144): на комп'ютері — уся (верхній рядок, темна смуга, меню), на
   телефоні стрічка зверху відходить разом зі сторінкою, а темна смуга з пошуком лишається. Висоти міряє site.js:
   --header-h — скільки шапки видно (для «липких» блоків нижче й переходів до якорів), --header-hide — стрічка. */
.header { position: sticky; top: calc(-1 * var(--header-hide, 0px)); z-index: 70; }
html { scroll-padding-top: var(--header-h, 0px); }
.header__top-row { display: flex; align-items: center; justify-content: space-between; min-height: 46px; gap: 24px; }
.header__top-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.ribbon {
    display: inline-flex; align-items: center; gap: 4px; flex: none; height: 30px; padding: 0 10px 0 16px;
    border-radius: 15px; background: #ffe5d3; color: #1a1a1a; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.ribbon:hover { background: #ffd4b5; color: #1a1a1a; }
.ribbon__arrow { font-size: 18px; color: var(--accent); }
/* Посилань — скільки влізе в один рядок (решта переноситься й ховається; усі є в підвалі). */
/* Проміжок 16, а не 18: так у рядку вміщаються всі шість посилань разом із «Відгуки про магазин» (власниця, 03.11). */
.top-links { display: flex; flex-wrap: wrap; gap: 0 16px; height: 18px; overflow: hidden; min-width: 0; }
.top-links a, .header__top a { color: #333; }
.top-links a:hover { color: var(--accent); }
.header__top-right { display: flex; align-items: center; gap: 14px; flex: none; }
.top-note { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.top-note .icon { font-size: 20px; color: var(--accent); }
.socials { display: flex; gap: 8px; font-size: 16px; }
.socials a { color: #444; }
.socials--round { gap: 6px; font-size: 14px; }
.socials--round a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #d6d6d6; border-radius: 50%; }
.socials--round a:hover { border-color: var(--accent); color: var(--accent); }
.lang { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid #d6d6d6; border-radius: 15px; }
.lang .icon { font-size: 15px; color: #555; }
.lang a { color: #888; }
.lang a.is-active { color: var(--ink); font-weight: 700; }
.lang__sep { color: #c8c8c8; }

.header__middle { background: #121212; color: #fff; }
.header__middle-row { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.logo { flex: none; }
.logo img { display: block; width: 128px; }
/* Назва замість картинки (крок 61): «Monster» білим, «Lab» помаранчевим, дуже жирно. */
.logo--word { font: 900 30px/1 "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.logo__main { color: #fff; }
.logo__accent { color: var(--accent); }
.burger { display: none; border: 0; background: none; font-size: 28px; padding: 4px; color: #fff; }

/* Пошук у шапці — білий «пігулкою», лупа помаранчева (як зелена в iHerb). На сторінці 404 — звичайний. */
.header__middle .search { max-width: 760px; }
.header__middle .search__input {
    height: 44px; padding: 0 54px 0 20px; border: 2px solid #fff; border-radius: 22px; font-size: 15px;
}
.header__middle .search__input:focus { border-color: var(--accent); }
.header__middle .search__button { width: 54px; height: 44px; color: var(--accent); font-size: 22px; }

.head-action { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.head-action .icon { font-size: 22px; }
.head-action:hover { color: var(--accent); }
.head-action .top-action__count { position: absolute; top: -7px; left: 13px; }

.search { position: relative; flex: 1 1 auto; max-width: 560px; }
.search__input {
    width: 100%; height: 32px; padding: 0 38px 0 12px;
    border: 1px solid #a2a2a2; border-radius: var(--radius);
    font: inherit; font-size: 14px; background: #fff;
}
.search__input:focus { outline: none; border-color: var(--ink); }
.search__button {
    position: absolute; right: 0; top: 0; width: 38px; height: 32px;
    border: 0; background: none; font-size: 18px; color: #555;
}

/* Підказка під полем пошуку (крок 59) — як Multisearch на Хорошопі: ліворуч усі результати й
   розділи, праворуч товари групами за розділом. На телефоні — на всю ширину, розділи — рядком. */
.suggest {
    position: absolute; z-index: 90; top: calc(100% + 6px); left: 0;
    width: min(940px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 150px)); overflow-y: auto;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18); font-size: 14px;
}
.suggest[hidden] { display: none; }
.suggest sup { color: var(--muted); font-size: 11px; }
.suggest__head { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.suggest__head b { color: var(--ink); }
.suggest__note { margin-left: 6px; }
.suggest__empty { padding: 16px; color: var(--muted); }
.suggest__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.suggest__side { padding: 12px 16px; border-right: 1px solid var(--line); background: #fafafa; }
.suggest__all { display: block; margin-bottom: 8px; font-weight: 700; color: var(--ink); }
.suggest__cats { list-style: none; margin: 0; padding: 0; }
.suggest__cats a { display: block; padding: 4px 0; color: var(--text); }
.suggest__cats a:hover, .suggest__all:hover, .suggest__group-title:hover { color: var(--accent); }
.suggest__main { padding: 4px 16px 12px; }
.suggest__group + .suggest__group { border-top: 1px solid var(--line); }
.suggest__group-title { display: block; padding: 10px 0 6px; font-weight: 700; color: var(--ink); }
.suggest__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.suggest__item { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--radius); color: var(--ink); }
.suggest__item:hover { background: var(--bg-soft); }
.suggest__item img { align-self: center; width: 70px; height: 70px; object-fit: contain; }
.suggest__item.is-out img { opacity: .5; }
.suggest__text { display: flex; flex-direction: column; gap: 2px; }
.suggest__name {
    font-size: 13px; line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.suggest__out { font-size: 12px; color: var(--muted); }
.suggest__price { font-size: 13px; white-space: nowrap; }
.suggest__price s { margin-right: 4px; color: var(--muted); font-size: 12px; }
.suggest__price .is-sale { color: var(--red); }
.suggest__more { display: inline-block; margin: 6px 0 2px; font-size: 13px; color: var(--muted); text-decoration: underline; }
.suggest__history { list-style: none; margin: 0; padding: 4px 0; }
.suggest__history a { display: block; padding: 8px 16px; color: var(--ink); }
.suggest__history a:hover { background: var(--bg-soft); }

.phones { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.phones__icon { font-size: 22px; color: var(--accent); }
.phones__list { display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; }
.phones__list a { color: #fff; }
.phones__list a:hover { color: var(--accent); }
.phones__call { font-size: 11px; color: #a8a8a8 !important; }

.cart-link { display: flex; flex: none; align-items: center; gap: 10px; color: #fff; white-space: nowrap; }
.cart-link:hover { color: var(--accent); }
.cart-link__icon { position: relative; font-size: 30px; display: flex; }
.cart-link__count {
    position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.cart-link__text { display: flex; flex-direction: column; }
.cart-link__title { font-weight: 700; font-size: 14px; }
.cart-link__total { font-size: 12px; color: #a8a8a8; }

/* ── Головне меню ───────────────────────────────────────────────────── */

.header__bottom { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .04); }
.header__bottom .wrap { position: relative; }
.menu { position: relative; }
.menu-overlay { display: none; }
.menu__list { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; min-height: 48px; }
.menu__item { flex: 0 1 auto; position: static; }
/* Як в iHerb: жирний темний текст, наведення — помаранчеве підкреслення знизу. */
.menu__link {
    display: flex; align-items: center; justify-content: center; height: 100%; min-height: 48px;
    padding: 0 15px; color: #222; font-weight: 700; font-size: 15px; line-height: 1.15; text-align: center;
    box-shadow: inset 0 -3px 0 transparent;
}
.menu__link:hover, .menu__item:hover > .menu__link { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
/* «Знижки» — як «Deals» в iHerb: помаранчевим курсивом, відділені рискою. */
/* «Комплекти» й «Знижки» (storefront.menu_accent, 03.11) — помаранчевим курсивом, перед першим — риска. */
.menu__item--accent > .menu__link { color: var(--accent); font-style: italic; }
.menu__item:not(.menu__item--accent) + .menu__item--accent { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
/* «Спортивне харчування» (29.10) — довша назва першого розділу: на 1201–1440 px вужчі відступи, щоб меню стало в один рядок. */
@media (min-width: 1201px) and (max-width: 1440px) {
    .menu__link { padding: 0 10px; }
}

/* Підменю — як у Хорошопа (крок 51): колонки по 240 px через 20 px, підрозділи в них
   впритул; ширина — за кількістю колонок (у розмітці), місце — під пунктом (site.js). */
/* Крок 235 (власниця: «при наведенні швидко на каталог — маленьке підвисання»): підменю розкладені й намальовані
   заздалегідь, кожне — окремим шаром; наведення лише робить видимим (було display: none → block — розкладка й малювання
   сотні посилань на кожне наведення). */
.submenu {
    display: block; visibility: hidden; contain: layout style; will-change: opacity;
    position: absolute; left: 0; top: 100%; z-index: 60; max-width: 100%; box-sizing: border-box;
    background: #fff; box-shadow: 0 5px 25px rgba(0, 0, 0, .1); border-radius: 4px; padding: 20px 20px 0;
}
.menu__item:hover > .submenu { visibility: visible; }
.submenu__grid { column-width: 240px; column-gap: 20px; margin: 0; padding: 0; list-style: none; }
.submenu__col { padding-bottom: 20px; break-inside: avoid; }
/* «Усі бренди» (03.11): рядком під колонками, через усю ширину, помаранчевим зі стрілкою. */
.submenu__all { display: flex; align-items: center; gap: 6px; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--line);
    color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.submenu__all .icon { width: 14px; height: 14px; fill: currentColor; }
.submenu__all:hover { background: #fff7f1; }
/* Кроки 68–69 (побажання власниці): без значків; назва підрозділу — чорна жирна (помаранчеві «не
   зайшли»), пункти під нею — темно-сірі без підкреслення; наведення — помаранчеве. */
.submenu__title { display: block; color: var(--text); font-size: 15px; line-height: 1.3; font-weight: 700; }
.submenu__title:hover { color: var(--accent); }
.submenu__list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.4; }
/* Колонка без заголовка (трави без розділів-літер, крок 195) — список з самого верху, урівень із сусідніми. */
.submenu__list:first-child { margin-top: 0; }
.submenu__list li { margin: 0 0 8px; }
.submenu__list a { color: #444; text-decoration: none; }
.submenu__list a:hover { color: var(--accent); }

/* ── Хлібні крихти, сторінки ────────────────────────────────────────── */

.main { padding-bottom: 40px; min-height: 50vh; }
.crumbs { font-size: 11px; color: var(--light); margin: 16px 0 12px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--light); }
.crumbs a { color: var(--light); }
.crumbs a:hover { color: var(--accent); }
.page { padding-top: 4px; }
.page--404 { text-align: center; padding: 40px 30px; }
.search--page { margin: 20px auto; max-width: 480px; }

/* ── Список товарів ─────────────────────────────────────────────────── */

.listing__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.listing__head h1 { margin-bottom: 14px; }
.sorting { display: flex; align-items: center; gap: 2px; font-size: 12px; margin-bottom: 14px; }
.sorting__label { margin-right: 8px; color: var(--ink); }
.sorting__item { padding: 6px 10px; background: var(--bg-soft); color: var(--text); }
.sorting__item:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.sorting__item:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.sorting__item.is-active { background: var(--muted); color: #fff; }

.listing__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }

/* Підрозділи «пігулками» під заголовком (крок 64, «За симптомами»), як в iHerb: по центру,
   з рядка на рядок, під ними — тонка риска. На телефоні — один рядок, гортається пальцем. */
.chips-nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-bottom: 22px; padding: 2px 0 22px; border-bottom: 1px solid var(--line);
}
.chips-nav__item {
    display: inline-flex; align-items: center; height: 34px; padding: 0 15px;
    border: 1px solid #cfcfcf; border-radius: 17px; background: #fff; color: #222; font-size: 14px; white-space: nowrap;
}
.chips-nav__item:hover { border-color: var(--accent); color: var(--accent); }
.listing__main { min-width: 0; }

.sidebar { background: var(--bg-soft); padding: 10px 10px 20px; font-size: 13px; border-radius: var(--radius); }

/* Сторінка пошуку (крок 59): ліворуч розділи з кількістю, як у підказці під полем. */
.search-page__note { margin: -4px 0 14px; color: var(--muted); }
.search-page__note b { color: var(--ink); }
.search-cats { background: var(--bg-soft); padding: 10px; font-size: 13px; border-radius: var(--radius); }
.search-cats sup { color: var(--muted); font-size: 10px; }
.search-cats__all { display: inline-block; margin-bottom: 6px; font-weight: 700; color: var(--text); }
.search-cats__list { list-style: none; margin: 0; padding: 0; }
.search-cats__list li { margin: 6px 0; }
.search-cats__list a { color: var(--text); }
.search-cats a.is-active { display: inline-block; padding: 2px 6px; border-radius: 3px; background: var(--muted); color: #fff; }
.search-cats a.is-active sup { color: #fff; }
.sidebar__close, .filters-open { display: none; }
.side-nav { list-style: none; margin: 0 0 6px; padding: 0; }
.side-nav > li { margin: 6px 0; }
.side-nav > li > a { color: var(--text); }
.side-nav > li.is-active > a {
    display: inline-block; padding: 2px 6px; border-radius: 3px; background: var(--muted); color: #fff;
}
.side-nav ul { list-style: none; margin: 4px 0 8px 12px; padding: 0; font-size: 11px; }
.side-nav ul li { margin: 3px 0; }
.side-nav ul a { text-decoration: underline; text-decoration-color: #c9c9c9; }

.filter { margin-top: 16px; }
.filter__title { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.filter__price { display: flex; align-items: center; gap: 6px; }
.filter__price input {
    width: 70px; height: 30px; padding: 0 6px; border: 1px solid #c9c9c9; border-radius: 3px; font: inherit; font-size: 12px;
}
.filter__reset { display: inline-block; margin-top: 6px; font-size: 12px; text-decoration: underline; }
.filter__search {
    width: 100%; height: 30px; padding: 0 8px; margin-bottom: 6px;
    border: 1px solid #c9c9c9; border-radius: 3px; font: inherit; font-size: 12px; background: #fff;
}
.filter__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.filter__list li { margin: 3px 0; }
.filter__option { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--text); }
.filter__option.is-empty { color: var(--light); pointer-events: none; }
.filter__box {
    flex: none; width: 13px; height: 13px; margin-top: 1px; border: 1px solid #9a9a9a; border-radius: 2px; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
}
.filter__option.is-on .filter__box { background: var(--menu); border-color: var(--menu); }
.filter__count { color: var(--light); font-size: 10px; }
.chosen { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.chosen__item { font-size: 13px; padding: 3px 8px; border: 1px solid var(--line, #ddd); border-radius: 3px; text-decoration: none; }
.chosen__item span { color: var(--light); margin-left: 2px; }
.chosen__reset { font-size: 13px; text-decoration: underline; }

.brand-logo { margin-bottom: 18px; }
.brand-logo img { max-height: 90px; width: auto; }

/* Сітка й картка — за стилями Хорошопа (catalogCard): картки впритул, відступи
   всередині картки; при наведенні — рамка #cbcbcb і тінь, знизу «В бажання». */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.grid--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card { position: relative; padding: 0 0 25px; }
.card__box { position: relative; height: 100%; }
.card__main {
    position: relative; display: flex; flex-direction: column; height: 100%;
    border: 1px solid transparent; border-radius: 4px; background: #fff;
}
.card__image { display: flex; align-items: center; justify-content: center; height: 250px; padding: 15px 15px 0; }
.card__image img { max-height: 100%; width: auto; object-fit: contain; }
.card--out .card__image img { filter: grayscale(1); opacity: .65; transition: all .3s; }
.card__info { display: flex; flex-direction: column; flex: 1; padding: 12px 15px 15px; }
.card__title { font-size: 15px; line-height: 1.2; margin: 0 0 6px; }
.card__title a { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a:hover { color: var(--accent); }
/* Зірки й кількість відгуків під назвою, як на iHerb (крок 97). */
.card__rating { display: flex; align-items: center; height: 18px; margin-bottom: 2px; font-size: 13px; color: var(--blue); }
.card__rating .product-rating__stars { top: 0; margin-right: 6px; }
.card__rating:hover .card__reviews { text-decoration: underline; }
.card__purchase { margin-top: auto; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Кнопка «Купити» на картці: була 25 px, як на Хорошопі; власниця попросила «трохи більшою» (крок 96). */
.card .btn--buy { height: 32px; min-height: 32px; padding: 0 16px; font-size: 15px; font-weight: 400; }
.card__extra {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; margin-top: -2px; padding: 0 15px 16px;
    border: 1px solid #cbcbcb; border-top: 0; border-radius: 0 0 4px 4px; background: #fff;
    box-shadow: 0 7px 15px -5px rgba(59, 55, 43, .25);
}
.card__wish { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #090909; font-size: 12px; }
.card__wish .icon { font-size: 20px; fill: #fff; stroke: #acacac; stroke-width: 1.4px; }
.card__wish-text { line-height: 1.3; border-bottom: 1px dotted rgba(9, 9, 9, .5); }
.card__wish:hover .card__wish-text { color: #878787; border-bottom-color: #878787; }
.card__wish.is-on .icon { fill: var(--accent); stroke: var(--accent); }
.card__wish-on, .card__wish.is-on .card__wish-add { display: none; }
.card__wish.is-on .card__wish-on { display: inline; }

/* Наведення — лише там, де є миша: на телефоні «В бажання» видно завжди. */
@media (hover: hover) {
    .card:hover { z-index: 50; }
    .card:hover .card__main { border-color: #cbcbcb; border-radius: 4px 4px 0 0; box-shadow: 0 7px 15px -5px rgba(59, 55, 43, .25); }
    .card:hover .card__extra { display: block; }
    .card--out:hover .card__image img { filter: none; opacity: 1; }
}
@media (hover: none) {
    .card__box, .card__main { height: auto; }
    .card__extra { display: block; position: static; margin: 0; padding: 0 15px 6px; border: 0; box-shadow: none; background: none; }
}
.card__price { display: flex; flex-direction: column; }
.card__old { color: var(--light); font-size: 14px; text-decoration: line-through; }
.card__current { font-weight: 700; font-size: 15px; color: var(--ink); }
.card__current--sale { color: var(--red); }
.card--out .card__current { color: var(--light); }

.stickers { position: absolute; top: 15px; left: 15px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sticker {
    padding: 5px 13px 5px 10px; border-radius: 0 3px 3px 0; color: #fff; background: #8a8a8a;
    font-size: 11px; line-height: 1; text-transform: uppercase;
}
.sticker--hit { background: var(--green); }
.sticker--sale { background: var(--blue); }
.sticker--new { background: var(--accent); }
.sticker--organic { background: #4c9a2a; }
/* «−23%» і «Залишилося 164 дні» — червоні, як у Хорошопа. */
.sticker--discount, .sticker--countdown { background: #e93f11; }

/* «Подарунок» у картці каталогу — як у Хорошопа: помаранчева рамка, «вушко» з написом, фото подарунка 50×50. */
.card__image { position: relative; }
.card__gift {
    position: absolute; left: 15px; bottom: 0; z-index: 2; width: 60px;
    border: 1px solid #df591d; border-radius: 4px; background: #fff; text-align: center; overflow: hidden;
}
.card__gift-head { display: block; padding: 1px 0 3px; background: #df591d; color: #fff; font-size: 11px; line-height: 14.3px; }
.card__gift-body { display: flex; align-items: center; justify-content: center; height: 58px; }
.card__image .card__gift img { width: 50px; height: 50px; max-height: none; object-fit: contain; }
.card--out .card__image .card__gift img { filter: none; opacity: 1; }

.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 26px 0 10px; flex-wrap: wrap; }
.pager__page, .pager__step, .pager__gap {
    min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: 14px;
}
.pager__gap { border: 0; }
.pager__page.is-active { background: var(--menu); border-color: var(--menu); color: #fff; }
/* «Показати ще» (крок 86) — над сторінками, по центру; поки вантажиться — блідне. */
.more-button { display: flex; width: max-content; min-width: 240px; margin: 26px auto 0; }
.more-button + .pager { margin-top: 14px; }
.more-button.is-loading { opacity: .55; pointer-events: none; }

.seo-text { margin-top: 36px; color: #333; }
/* Опис бренду (крок 32), як на Хорошопі: рамка, логотип ліворуч, текст згорнутий до ~130 px з «Розгорнути». */
.brand-info { display: flex; gap: 0; margin: 0 0 13px; padding: 20px 0; border: 1px solid #d7d7d7; }
.brand-info__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 223px; max-height: 150px; padding: 0 15px; }
.brand-info__logo img { max-width: 180px; max-height: 150px; object-fit: contain; }
.brand-info__desc { flex: 1; min-width: 0; padding-right: 20px; }
.brand-info__txt { position: relative; max-height: 130px; overflow: hidden; font-size: 14px; line-height: 22.4px; }
.brand-info__txt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.brand-info__txt h2 { margin: 0 0 8px; font-size: 21px; line-height: 25.8px; }
.brand-info__desc.is-expanded .brand-info__txt { max-height: none; }
.brand-info__desc.is-expanded .brand-info__txt::after, .brand-info__desc.is-short .brand-info__txt::after { display: none; }
.brand-info__toggle { margin-top: 10px; padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: none; color: #090909; font-size: 14px; cursor: pointer; }
.brand-info__toggle[hidden] { display: none; }
.brand-info__close, .brand-info__desc.is-expanded .brand-info__open { display: none; }
.brand-info__desc.is-expanded .brand-info__close { display: inline; }
@media (max-width: 860px) {
    .brand-info { flex-direction: column; gap: 12px; padding: 16px 0; }
    .brand-info__logo { width: auto; }
    .brand-info__desc { padding: 0 16px; }
}
/* Текст (статті, сторінки, описи) — за стилями Хорошопа (.text): таблиця на всю
   ширину без рамок, сірий кожен непарний рядок, списки з тире, посилання з тонким
   підкресленням. */
.text { line-height: 1.6; overflow-wrap: anywhere; }
.text::after { content: " "; display: table; clear: both; }
.text p, .text ul, .text ol, .text dl, .text table { margin: 0 0 .6em; }
.text p:first-child, .text ul:first-child, .text ol:first-child, .text dl:first-child, .text table:first-child { margin-top: 0; }
.text p:last-child, .text ul:last-child, .text ol:last-child, .text dl:last-child, .text table:last-child { margin-bottom: 0; }
.text h2 { margin: 14px 0 8px; font-size: 21px; line-height: 1.23; font-weight: 700; }
.text h3 { margin: 12px 0 8px; font-size: 16px; line-height: 1.4; }
.text h2:first-child, .text h3:first-child { margin-top: 0; }
.text ul { list-style: none; padding: 0; }
.text ul li { position: relative; padding-left: 24px; }
.text ul li::before { content: "—"; position: absolute; left: 0; }
.text ol { list-style: decimal outside; padding-left: 26px; }
.text li { margin: 0 0 .6em; }
.text table { width: 100%; border: 0; border-collapse: collapse; }
.text th, .text td { padding: 7px 10px; border: 0; vertical-align: top; }
.text thead th { font-size: 12px; font-weight: 400; color: #707070; text-align: left; }
.text tr:nth-child(2n+1) td { background: rgba(0, 0, 0, .05); }
.text img { max-width: 100%; height: auto; margin: 0 0 .6em; }
.text iframe { display: block; max-width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 .6em; border: 0; }
.text a { color: #090909; border-bottom: 1px solid rgba(9, 9, 9, .25); }
.text a:hover { color: #878787; border-bottom-color: #878787; }
/* Графік роботи у вкладці «Доставка» товару — компактний, як був. */
.text table.schedule { width: auto; }
/* Графік у вкладці «Доставка» — як на Хорошопі: таблиця 200 px, сірі рядки звичайного тексту. */
.text .schedule { width: 200px; }
/* Значки у вкладках (галочки, картки, Viber) стоять у рядку з текстом. */
.product__info .text img { margin: 0; vertical-align: middle; }
.text .tab-red { color: #c0392b; }
.text .tab-pic { border-bottom: 0; }

/* ── Картка товару ──────────────────────────────────────────────────── */

.product__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-top: 18px; }
/* Три колонки — в обгортці на всю ширину з тими самими колонками (крок 53): «липка» колонка тримається
   в межах свого блоку, а не всієї сітки — інакше під час гортання наїжджала б на панель опису. */
.product__top { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; }
.gallery__main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 520px; margin: 0 auto; }
/* Усі фото — доріжкою: на комп'ютері видно поточне (мініатюри перемикають), на телефоні гортаються. */
.gallery__track { display: flex; width: 100%; height: 100%; }
.gallery__slide { display: none; flex: 0 0 100%; align-items: center; justify-content: center; height: 100%; }
.gallery__slide.is-active { display: flex; }
.gallery__slide img { max-height: 100%; width: auto; object-fit: contain; }
.gallery__main.is-out .gallery__slide img { filter: grayscale(1); opacity: .7; }
.gallery__dots { display: none; }
/* Логотип бренду в куті фото — як на Хорошопі. */
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; }
.gallery__thumb { width: 80px; height: 80px; padding: 4px; border: 1px solid var(--line); background: #fff; border-radius: 3px; }
.gallery__thumb.is-active { border-color: var(--ink); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Збільшення при наведенні (кроки 33–34, як на iHerb): лупа на фото, праворуч поверх опису —
   вікно, збільшене втричі. Лише комп'ютер з мишею й велике фото (data-zoom). */
.gallery__lens, .gallery__zoom { display: none; }
@media (min-width: 861px) and (hover: hover) {
    .gallery { position: relative; }
    .gallery__slide img[data-zoom] { cursor: crosshair; }
    .product__left.is-zooming { z-index: 5; }
    .gallery__lens { position: absolute; z-index: 3; display: block; border: 1px solid #b3b3b3; background: rgba(255, 255, 255, .45); pointer-events: none; }
    .gallery__zoom {
        position: absolute; top: 0; left: calc(100% + 40px); z-index: 5; display: block; border: 1px solid #d7d7d7;
        background: #fff no-repeat; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); pointer-events: none;
    }
    .gallery__lens[hidden], .gallery__zoom[hidden] { display: none; }
}

.product__right .crumbs { margin-top: 0; }
.product__title { font-size: 20px; line-height: 26px; margin-bottom: 10px; }
.product__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.presence--in { color: var(--green); font-weight: 700; }
.presence--out { color: var(--red); font-weight: 700; }
.product__price { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.product__current { font-size: 26px; }
.product__current--sale { color: var(--red); }
.product__current--out { color: var(--light); }
.product__old { font-size: 18px; color: var(--light); text-decoration: line-through; }

.modifications { margin-bottom: 20px; }
.modifications__title { font-size: 13px; margin-bottom: 8px; }
.modifications__list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 10px; border: 1px solid #d3d3d3; border-radius: 3px; font-size: 12px; color: var(--text); background: #fff; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: #000; border-color: #000; color: #fff; }
.chip--out { color: var(--light); border-style: dashed; }
.chip__price { margin-left: 4px; font-size: 11px; color: #777; }
/* Підпис під ціною: у цьому фасуванні свого смаку немає, відкриється інший. */
.chip__note { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; color: #8a8a8a; }
.chip.is-active .chip__price { color: rgba(255, 255, 255, .75); }
/* Фото смаку й «: Манго» в підписі — лише комп'ютер (крок 31); на телефоні кнопки, як були. */
.chip__thumb, .modifications__current { display: none; }
/* Фасування під смаками — лише комп'ютер (крок 30); на телефоні вони в блоці покупки. */
.modifications--sizes { display: none; }

.product__buy { margin-bottom: 26px; }
.product__short { margin: -8px 0 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Лічильник акції — як у Хорошопа: помаранчева рамка, ліворуч умови, праворуч дні : години : хв : сек. */
.countdown {
    display: flex; align-items: center; gap: 20px; margin: -6px 0 26px; padding: 15px 22px;
    border: 1px solid #df591d; border-radius: 4px; color: #000;
}
.countdown__text { flex: 1 1 50%; min-width: 0; font-size: 16px; line-height: 22px; color: #df591d; overflow-wrap: anywhere; }
.countdown__text p { margin: 0; }
.countdown__clock { flex: 1 1 50%; text-align: center; }
.countdown__title { font-size: 12px; line-height: 15.6px; }
.countdown__timer { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.countdown__part { display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.countdown__value { font-size: 28px; line-height: 36px; }
.countdown__label { font-size: 12px; line-height: 15.6px; }
.countdown__sep { font-size: 28px; line-height: 36px; }

/* «Подарунок» на сторінці товару — як у Хорошопа: рамка #df591d, фото 78×78, «безкоштовно» замість ціни. */
.product-gift {
    display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "img head" "img title" "img prices";
    align-content: start; margin: 0 0 30px; padding: 15px 10px; border: 1px solid #df591d; border-radius: 4px;
}
.product-gift__body, .product-gift__content { display: contents; }
.product-gift__header { grid-area: head; margin: 0 0 3px 10px; color: #df591d; font-size: 16px; line-height: 22.4px; font-weight: 700; }
.product-gift__image { grid-area: img; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; }
.product-gift__image img { width: 78px; height: 78px; object-fit: contain; }
.product-gift__title { grid-area: title; margin: 0 0 2px 10px; font-size: 12px; line-height: 16.8px; }
.product-gift__title a { color: #090909; }
.product-gift__title a:hover { color: var(--accent); }
.product-gift__prices { grid-area: prices; margin: 3px 0 0 10px; font-size: 12px; line-height: 16.8px; }
.product-gift__old { margin-right: 5px; color: #acacac; text-decoration: line-through; }
.product-gift__free { color: #df591d; }

/* «Документація» — файли з картки. */
.product-files { margin: 0; padding: 0; list-style: none; }
.product-files li { margin-bottom: 10px; }
.product-files a { margin-right: 8px; text-decoration: underline; }
/* Лише для телефона: заголовки блоків, «Читати повністю», сірий блок покупки, «До обраного»… */
.product__heading, .product-text__more, .product-reviews__add, .review-panel__head,
.product__buy-presence, .product__buy-price, .product__fav, .crumbs__home { display: none; }
/* Блок покупки (крок 52): знижка, ціна порції, доставка, кількість — лише комп'ютер
   (кількість — через .product__buy: інакше перебиває загальне .qty кошика нижче). */
.product__discount, .product__portion, .product__delivery, .product__buy .product__qty { display: none; }
/* Коли відправка (крок 227): угорі блоку покупки — на телефоні поруч із «В наявності», на комп'ютері над ціною. */
.product__buy-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.product__ship { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--green-text); }
.product__ship .icon { flex: none; width: 18px; height: 18px; }

/* «Інші фасування» — як скрипт ЕРП на Хорошопі. */
.size-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 4px; }
.size-options__label { margin-right: 2px; font-size: 13px; color: #666; }
.size-options__chip {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #222; font-size: 13px; line-height: 1.2;
}
.size-options__chip:hover { border-color: var(--accent); color: #222; }
.size-options__chip.is-current { border-color: var(--accent); background: rgba(255, 92, 0, .08); font-weight: 600; }
.size-options__price { font-size: 12px; font-weight: 400; color: #777; }
/* Відсутнє фасування — як на комп'ютері: сіра рамка, сірий текст і риска навскіс.
   Досі на телефоні воно виглядало так само, як наявне, і людина тиснула в порожнечу. */
.size-options__chip.is-out {
    border-color: #d9d9d9; color: #8a8a8a;
    background: linear-gradient(to top right, transparent calc(50% - .5px), #d9d9d9 calc(50% - .5px), #d9d9d9 calc(50% + .5px), transparent calc(50% + .5px)), #f5f5f5;
}
.size-options__chip.is-out .size-options__price { color: #8a8a8a; }
.size-options__chip.is-out:hover { border-color: var(--accent); }
/* Свого смаку в цьому фасуванні немає — відкриється інший, і плитка про це каже. */
.size-options__chip { flex-wrap: wrap; }
.size-options__note { flex-basis: 100%; font-size: 11px; line-height: 1.2; color: #8a8a8a; }

/* Накопичувальна знижка під кнопкою. */
.user-discount { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.3; }
.user-discount__icon {
    display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.user-discount__text a { border-bottom: 1px dashed currentColor; }

/* «Характеристики». */
.features { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 17.5px; }
.features th { width: 35%; padding: 5px 20px 5px 0; color: #666; font-weight: 400; text-align: left; vertical-align: top; }
.features td { padding: 5px 0; color: #000; }

/* «Дивіться також», «Аксесуари» — стрічка карток, що гортається. */
.related { margin-top: 40px; }
.related__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.related__list { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.related__card { flex: 0 0 160px; min-width: 0; scroll-snap-align: start; }
/* Фото — у квадраті на всю ширину картки, вписане (крок 150): з «max-width: 100%» Safari на iPhone брав
   справжній розмір фото, і картка з вертикальною банкою ставала ширшою й вищою за сусідні. */
.related__image { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden; }
.related__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.related__name {
    display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 13px; line-height: 18.5px; color: #000;
}
.related__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; }
.related__old { font-size: 12px; font-weight: 400; color: #acacac; text-decoration: line-through; }
.related__title-narrow { display: none; }
/* «Часто купують разом» (крок 100): зірки й відгуки під назвою — як на картках каталогу (крок 97). */
.related__rating { display: flex; align-items: center; height: 18px; margin-top: 4px; font-size: 12px; color: var(--blue); }
.related__rating .product-rating__stars { top: 0; margin-right: 6px; }
.related__rating:hover .related__reviews { text-decoration: underline; }
/* Назва — завжди на два рядки: зірки й ціни в стрічці стоять рівно і в коротких назв. */
.related--together .related__name { min-height: 2lh; }

.tabs__head { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs__tab {
    padding: 10px 16px; border: 1px solid transparent; border-bottom: 0; background: none; color: var(--text); font-size: 14px;
    margin-bottom: -1px;
}
.tabs__tab.is-active { border-color: var(--line); background: #fff; color: var(--accent); font-weight: 700; border-radius: var(--radius) var(--radius) 0 0; }
.tabs__pane { display: none; padding: 16px 4px; font-size: 13px; }
.tabs__pane.is-active { display: block; }
.product__description { margin-top: 30px; }
.product__description .tabs__pane { font-size: 14px; }
/* «Сертифікати» (крок 55) — як «Стандарти якості та виробництво» на iHerb: значок, назва, стрілка;
   натиск — вікно з поясненням. На комп'ютері — під характеристиками, на телефоні — у «Характеристиках». */
.certificates { margin-top: 18px; }
.certificates__title { margin: 0 0 8px; color: #000; font-size: 16px; line-height: 20.8px; font-weight: 700; }
.certificates__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.certificates__item {
    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; padding: 4px 0;
    border: 0; background: none; color: #000; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.certificates__item:hover .certificates__label { color: var(--accent); }
.certificates__icon { display: flex; flex: none; width: 38px; height: 38px; }
/* Значок — свій (крок 57), не кружечки iHerb: помаранчевий шестикутник із назвою й галочкою в куті. */
.cert-icon { width: 100%; height: 100%; overflow: visible; }
.cert-icon__shape { fill: #fff3eb; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.cert-icon__name { fill: #1d1d1d; font-family: Arial, Helvetica, sans-serif; font-weight: 700; text-anchor: middle; }
.cert-icon__tick-bg { fill: var(--accent); stroke: #fff; stroke-width: 1.2; }
.cert-icon__tick { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.certificates__more { width: 12px; height: 12px; margin-left: auto; color: #8a8a8a; transform: scaleX(-1); }
.cert-dialog { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.cert-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.cert-dialog__box { position: relative; padding: 26px 28px 28px; text-align: center; }
.cert-dialog__close {
    position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; background: none; color: #000; cursor: pointer;
}
.cert-dialog__close .icon { width: 22px; height: 22px; }
.cert-dialog__icon { display: inline-flex; width: 52px; height: 52px; margin-bottom: 8px; }
.cert-dialog__title { margin: 0 0 14px; color: #000; font-size: 22px; line-height: 1.25; font-weight: 700; }
.cert-dialog__text { margin: 0; color: #222; font-size: 15px; line-height: 1.6; text-align: left; }
/* Вікно з текстом сторінки (крок 117): «Система знижок» у кабінеті; довгий текст гортається всередині. */
.info-dialog { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.info-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.info-dialog__box { position: relative; padding: 26px 28px 24px; }
.info-dialog__close {
    position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; background: none; color: #000; cursor: pointer;
}
.info-dialog__close .icon { width: 22px; height: 22px; }
.info-dialog__title { margin: 0 36px 14px 0; color: #000; font-size: 22px; line-height: 1.25; font-weight: 700; }
.info-dialog__text { color: #222; font-size: 15px; }

/* «Передзвонити вам?» (крок 84) — вікно як у сертифікатів. */
.callback-dialog { width: min(400px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.callback-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.callback-dialog__box { position: relative; padding: 28px 28px 26px; text-align: center; }
.callback-dialog__close {
    position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; background: none; color: #000; cursor: pointer;
}
.callback-dialog__close .icon { width: 22px; height: 22px; }
.callback-dialog__icon { width: 44px; height: 44px; margin-bottom: 6px; color: var(--accent); }
.callback-dialog__title { margin: 0 0 8px; color: #000; font-size: 22px; line-height: 1.25; font-weight: 700; }
.callback-dialog__text { margin: 0 0 16px; color: #222; font-size: 14px; line-height: 1.5; }
.callback-dialog__phone { height: 44px; font-size: 18px; text-align: center; }
.callback-dialog__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.callback-dialog__error { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: #fdecea; color: #a12a1f; font-size: 13px; text-align: left; }
.callback-dialog__submit { width: 100%; min-height: 44px; margin-top: 14px; }
.callback-dialog__done { margin: 6px 0 0; padding: 12px; border-radius: var(--radius); background: #edf7e6; color: #3f6f17; font-size: 15px; line-height: 1.5; }

/* Опис, поділений довкола таблиці складу (крок 53): шматки йдуть підряд, відступ між ними — як між
   абзацами (останній абзац шматка сам відступу не має). */
.product-text__before, .product-text__facts { margin-bottom: .6em; }
/* Лише комп'ютер (див. блок нижче): «Основна інформація», «Усі характеристики» праворуч і стрілки стрічок. */
.product-facts, .product-side-features, .related__nav { display: none; }

/* ── Сторінка товару на комп'ютері — один в один із Хорошопом ───────────
   Розміри зняті з monsterlab.com.ua при ширині 1440 (17.10.2026). Телефон не чіпаємо:
   у нього свій порядок блоків (крок 20). */
@media (min-width: 861px) {
    /* Три колонки (крок 52, як на iHerb): фото — вужче, ніж було, опис і вибір, блок покупки
       240–300 px. Усі «липкі» (top 20 px): коротші тримаються на екрані, поки гортається довша —
       блок покупки лишається на виду. */
    .product__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(240px, 300px); gap: 30px; }
    .product__left, .product__right, .product__aside { position: sticky; top: calc(var(--header-h, 0px) + 20px); align-self: start; }
    .gallery__main { max-height: 440px; }

    /* Рядок під назвою: наявність, артикул, відгуки — чорним, через 15 px. Бренд — лише в «Характеристиках». */
    /* Позначка «В наявності» й артикул — на одній лінії (крок 63). */
    .product__meta { align-items: center; gap: 6px 15px; margin-bottom: 20px; color: #000; }
    /* «В наявності» — окремою позначкою з галочкою, а не словом поруч з артикулом (крок 62). */
    .product__meta .presence {
        display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; margin-right: 8px;
        border-radius: 13px; font-size: 13px; font-weight: 700;
    }
    .product__meta .presence--in { background: #eaf4dc; color: var(--green-text); }
    .product__meta .presence--in::before { content: "✓"; }
    .product__meta .presence--out { background: #fbe9e7; color: var(--red); }
    .product__brand { display: none; }

    /* Ціна — у блоці покупки (крок 52); рядок ціни з сердечком під «Основною інформацією» — ні
       (у ньому лишається розмітка Offer для Google). */
    .product__price { display: none; }

    /* Блок покупки окремим розділом у рамці, як на iHerb (крок 52): ціна (у знижці — червона,
       «(Знижка 61 %)»), рядком нижче стара ціна й ціна порції, безкоштовна доставка, кількість
       «− 1 +» і «Додати в кошик» на всю ширину; під рамкою — «До обраного». */
    .product__buy { margin: 0 0 12px; padding: 16px; border: 1px solid #d3d3d3; border-radius: 8px; background: #fff; }
    .product__buy-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
    .product__buy-price::after { content: ""; order: 3; flex-basis: 100%; }
    .product__buy-price .product__current { order: 1; font-size: 26px; line-height: 32px; font-weight: 700; color: #000; }
    .product__buy-price .product__current--sale { color: var(--red); }
    .product__buy-price .product__current--out { color: var(--light); }
    .product__discount { display: inline; order: 2; color: var(--red); font-size: 14px; }
    .product__buy-price .product__old { order: 4; font-size: 14px; }
    .product__portion { display: inline; order: 5; font-size: 14px; font-weight: 700; color: var(--green-text); }
    .product__delivery { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; line-height: 18px; font-weight: 700; color: #000; white-space: nowrap; }
    /* Кількість і праворуч від неї «Більше немає в наявності» (крок 88), кнопка — на всю ширину під ними. */
    .product__buy .product__order { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 12px; margin-top: 16px; }
    .product__buy .product__order > .btn { grid-column: 1 / -1; }
    .product__buy .product__order .qty-limit { margin: 0; }
    .product__buy .product__qty { display: inline-flex; align-self: flex-start; height: 40px; border-color: #c9c9c9; border-radius: 20px; overflow: hidden; }
    .product__qty button { width: 40px; background: #f2f2f2; font-size: 20px; line-height: 1; cursor: pointer; }
    .product__qty button:hover { background: #e6e6e6; }
    .product__qty input { width: 48px; height: 38px; }
    .product__buy .btn--big { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 16px; border-radius: 6px; font-size: 18px; }
    .product__buy .user-discount { margin: 14px 0 0; font-size: 12px; line-height: 15.6px; }
    .product__buy .user-discount__icon { width: 28px; height: 28px; }
    .product__fav {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px;
        border: 1px solid #b9b9b9; border-radius: 6px; background: #fff; font-size: 16px; color: #000; cursor: pointer;
    }
    .product__fav:hover { border-color: var(--accent); }
    .product__fav .icon { width: 16px; height: 16px; }
    .product__fav.is-on { --heart-fill: currentColor; color: var(--red); }
    .product__fav-on, .product__fav.is-on .product__fav-add { display: none; }
    .product__fav.is-on .product__fav-on { display: inline; }
    /* Фасування — окремим блоком під смаками (крок 30); праворуч від «Купити» їх більше немає. */
    .modifications--sizes { display: block; }
    .product__buy .size-options { display: none; }

    /* Смак і фасування — як на iHerb (крок 31): «Смак: Манго»; картки з фото свого смаку по 3 в ряд;
       фасування — квадратики: розмір зверху, ціна жирним знизу; вибране — помаранчева рамка 2 px. */
    .modifications__title { font-size: 14px; color: #000; }
    .modifications__current { display: inline; }
    .modifications--flavors .modifications__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .modifications--flavors .chip {
        display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 8px 10px;
        border: 1px solid #b9b9b9; border-radius: 8px; background: #fff; color: #000; font-size: 13px; line-height: 17px;
    }
    .modifications--flavors .chip__thumb { display: block; flex: none; width: 48px; height: 48px; object-fit: contain; }
    .modifications--flavors .chip__name { min-width: 0; overflow-wrap: anywhere; }
    .modifications--flavors .chip:hover { border-color: var(--accent); color: #000; }
    .modifications--flavors .chip.is-active { padding: 7px 9px; border: 2px solid var(--accent); background: #fff; color: #000; }
    .modifications--sizes .modifications__list { gap: 8px; }
    .modifications--sizes .chip {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 88px; min-height: 64px;
        padding: 8px 14px; border: 1px solid #b9b9b9; border-radius: 8px; background: #fff; color: #555; font-size: 13px; line-height: 16px;
    }
    .modifications--sizes .chip__price { margin: 0; color: #000; font-size: 14px; font-weight: 700; }
    .modifications--sizes .chip:hover { border-color: var(--accent); }
    .modifications--sizes .chip.is-active { padding: 7px 13px; border: 2px solid var(--accent); background: #fff; color: #555; }
    .modifications--sizes .chip.is-active .chip__price { color: #000; }
    /* Немає в наявності — як на iHerb (крок 39): сіра картка, тонка діагональ з лівого нижнього кута
       в правий верхній, бліде фото, сірий текст; клікабельна; вибрана — з помаранчевою рамкою. */
    .modifications .chip.chip--out {
        border-color: #d9d9d9; color: #8a8a8a;
        background: linear-gradient(to top right, transparent calc(50% - .5px), #d9d9d9 calc(50% - .5px), #d9d9d9 calc(50% + .5px), transparent calc(50% + .5px)), #f5f5f5;
    }
    .modifications .chip.chip--out .chip__thumb { opacity: .45; }
    .modifications .chip.chip--out .chip__price { color: #8a8a8a; }
    .modifications .chip.chip--out:hover, .modifications .chip.chip--out.is-active { border-color: var(--accent); }

    /* Вкладки (Опис/Відгуки, Доставка/Оплата/…): 16 px жирним; активна — помаранчева смужка згори, сірі боки. */
    .product .tabs__head { border-bottom: 1px solid #d7d7d7; }
    .product .tabs__tab {
        position: relative; margin: 0 0 -1px; padding: 15px 20px 10px; border: 0; border-radius: 0; background: none;
        color: #242424; font-size: 16px; line-height: 20.8px; font-weight: 700;
    }
    .product .tabs__tab.is-active { margin: 0 -1px -1px; border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; border-radius: 0; color: var(--accent); }
    .product .tabs__tab.is-active::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--accent); }
    .product .tabs__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; }
    .product .tabs__tab--phone, .product .tabs__pane--phone { display: none; }
    .product .tabs__pane { padding: 20px 0 0; }
    /* Доставка, оплата, повернення, консультація — на комп'ютері прибрано (крок 53): доставка — в блоці покупки. */
    .product__info { display: none; }

    /* Панель опису на всю ширину під колонками (крок 53, як «Product information» на iHerb): рамка,
       сіра смуга з вкладками «Опис», «Документація», «Відгуки». */
    .product__description { grid-column: 1 / -1; margin-top: 10px; border: 1px solid #e4e4e4; }
    /* «Часто купують разом» (крок 100) — стрічкою на всю ширину між колонками й панеллю опису. */
    .product__layout > .related--together { grid-column: 1 / -1; margin-top: 0; }
    .product .product__description .tabs__head { padding: 0 14px; border-bottom-color: #e4e4e4; background: #f7f7f7; }
    .product .product__description .tabs__tab.is-active { background: #fff; }
    .product__description .tabs__body { padding: 0 24px 26px; }
    /* Опис без таблиці складу — не ширше 900 px, щоб рядки читались. З таблицею — текст ліворуч, таблиця
       праворуч (7 : 5, як на iHerb); текст після таблиці — одразу під текстом до неї. */
    .product-text__body { max-width: 900px; }
    .product-text__body--split {
        display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
        grid-template-areas: "before facts" "after facts"; column-gap: 48px; align-items: start; max-width: none;
    }
    .product-text__before { grid-area: before; }
    .product-text__after { grid-area: after; }
    /* Таблиця складу — як «Supplement facts»: заголовок «Склад» на сірому, рамка, рядки через тонку лінію. */
    .product-text__facts { grid-area: facts; margin-bottom: 0; font-size: 13px; line-height: 1.45; }
    .product-text__facts > p:first-child { margin: 0; padding: 10px 12px; border: 1px solid #e4e4e4; border-bottom: 0; background: #f7f7f7; font-size: 15px; }
    .product-text__facts table { width: 100% !important; border: 1px solid #e4e4e4; }
    .product-text__facts th, .product-text__facts td { width: auto; padding: 6px 10px; border-top: 1px solid #e4e4e4; }
    /* Кількість і % — слова не рвуться посередині («Кількість», «1500 мкг»); тисне назва речовини. */
    .product-text__facts td + td, .product-text__facts th + th { overflow-wrap: normal; }
    /* Склад текстом, без таблиці (крок 158) — так само: підпис «Склад» на сірому, рамка, рядки через тонку лінію. */
    .product-text__facts--text { border: 1px solid #e4e4e4; }
    .product-text__facts.product-text__facts--text > *,
    .product-text__facts.product-text__facts--text ul li { margin: 0; padding: 6px 10px; border-top: 1px solid #e4e4e4; }
    .product-text__facts.product-text__facts--text > :first-child { padding: 10px 12px; border: 0; background: #f7f7f7; font-size: 15px; }
    .product-text__facts.product-text__facts--text > ul { padding: 0; border-top: 0; }
    .product-text__facts.product-text__facts--text ul li::before { content: none; }
    .product-text__facts--text > p:has(+ ul) { font-weight: 700; }
    .product-text__facts.product-text__facts--text > table { padding: 0; border: 0 !important; }

    /* «Основна інформація» (крок 29, як на iHerb): чотири головні характеристики сіткою 2×2 між рядком
       наявності й ціною; назва сірим, значення жирним. */
    .product-facts { display: block; margin: 0 0 24px; padding: 16px 0 18px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
    .product-facts__title { margin: 0 0 12px; color: #000; font-size: 16px; line-height: 20.8px; font-weight: 700; }
    .product-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; margin: 0; }
    .product-facts__item dt { margin: 0 0 3px; color: #6f6f6f; font-size: 13px; line-height: 17px; }
    .product-facts__item dd { margin: 0; color: #000; font-size: 15px; line-height: 20px; font-weight: 600; }
    .product-facts__item a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; }
    .product-facts__item a:hover { color: var(--accent); }

    /* Відгуки — окремим блоком між «Дивіться також» і «Аксесуарами» (крок 54): заголовок — як у стрічок,
       лічильник — помаранчевий ярлик із «хвостиком», як був на вкладці «Відгуки». */
    .product-reviews { margin-top: 40px; }
    .product-reviews > .product__heading {
        display: block; margin: 0 0 20px; padding: 15px 0 10px; border-bottom: 1px solid #d7d7d7;
        color: #000; font-size: 16px; line-height: 20.8px; font-weight: 700;
    }
    .product-reviews .product__badge {
        position: relative; display: inline-block; margin: 2px 0 0 5px; padding: 3px 5px 2px; border-radius: 4px;
        background: #ff5c00; color: #fff; font-size: 11px; font-weight: 400; line-height: 1; vertical-align: top;
    }
    .product-reviews .product__badge::before {
        content: ""; position: absolute; top: 100%; right: 5px;
        border-style: solid; border-width: 0 5px 5px 0; border-color: transparent #ff5c00 transparent transparent;
    }

    /* «Усі характеристики» — кнопкою під головними, в тій самій рамці (крок 53; була під вкладками доставки).
       Розгортає решту: назва сірим, значення чорним, 13 px. */
    .product-side-features { display: block; margin-top: 16px; }
    .product-side-features:first-child { margin-top: 0; }
    .product-side-features__title {
        position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 36px 0 14px;
        border: 1px solid #b9b9b9; border-radius: 6px; color: #000; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none;
    }
    .product-side-features__title:hover { border-color: var(--accent); }
    .product-side-features__title::-webkit-details-marker { display: none; }
    .product-side-features__title::after {
        content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
        border-right: 2px solid #000; border-bottom: 2px solid #000; transform: translateY(-70%) rotate(45deg); transition: transform .2s;
    }
    .product-side-features[open] .product-side-features__title { margin-bottom: 14px; }
    .product-side-features[open] .product-side-features__title::after { transform: translateY(-20%) rotate(-135deg); }
    .product-side-features .features { width: auto; font-size: 13px; line-height: 19.5px; }
    .product-side-features .features th { width: auto; padding: 4px 30px 4px 0; color: #acacac; }
    .product-side-features .features td { padding: 4px 0; }

    /* Стрічки «Дивіться також», «Переглянуті»: заголовок із лінією, картки 160 px, стрілки 36×36 по краях. */
    .related__title { margin: 0 0 20px; padding: 15px 0 10px; border-bottom: 1px solid #d7d7d7; font-size: 16px; line-height: 20.8px; }
    .related__body { position: relative; }
    .related__list { padding-bottom: 0; scrollbar-width: none; }
    .related__list::-webkit-scrollbar { display: none; }
    .related__image { margin-bottom: 10px; }
    .related__name {
        font-size: 12px; line-height: 16.8px; color: #090909;
        text-decoration: underline; text-decoration-color: rgba(9, 9, 9, .25); text-underline-offset: 3px;
    }
    .related__name:hover { color: #878787; }
    /* Ціна в стрічках — більша й жирна (власниця, 08.11; було 12 px звичайним, як на Хорошопі); стара ціна лишилась 12 px. */
    .related__price { margin-top: 6px; column-gap: 5px; font-size: 15px; font-weight: 700; color: #000; }
    .related__nav {
        position: absolute; top: 62px; z-index: 2; display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; padding: 0; border: 1px solid #cbcbcb; border-radius: 4px; background: #fff; cursor: pointer;
    }
    .related__nav::before { content: ""; width: 8px; height: 8px; border-top: 2px solid #333; border-right: 2px solid #333; }
    .related__nav--prev { left: -19px; }
    .related__nav--prev::before { transform: translateX(2px) rotate(-135deg); }
    .related__nav--next { right: -19px; }
    .related__nav--next::before { transform: translateX(-2px) rotate(45deg); }
    .related__nav.is-disabled { opacity: .5; cursor: default; }
    .related.is-static .related__nav { display: none; }
}

/* ── Головна ────────────────────────────────────────────────────────── */

.banners { position: relative; margin-top: 24px; }
.banners__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius);
}
.banners__track::-webkit-scrollbar { display: none; }
.banners__slide { flex: 0 0 100%; scroll-snap-align: start; }
.banners__slide img { display: block; width: 100%; aspect-ratio: 1440 / 432; object-fit: cover; }
.banners__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.banners__dot { width: 12px; height: 12px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.banners__dot.is-active { background: var(--accent); }

.benefits { border-bottom: 1px solid var(--line); margin-top: 30px; }
.benefits__list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 20px; padding-bottom: 20px; margin: 0 auto; }
.benefits__item a, .benefits__item { display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: 14px; }
.benefits__icon svg { width: 64px; height: 64px; fill: var(--red); flex: none; }

.front-block { margin-top: 30px; }
.front-block__box { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px 26px; }
.front-block__title { text-align: center; font-size: 20px; margin: 0 0 20px; }
/* «Популярні категорії» — в один рядок, іконки одного стилю на світло-помаранчевому колі (крок 75).
   --cat-bg — колір кола: ним же «папір» іконки (перекриває лінії під капсулою). */
.popular { display: flex; gap: 12px; }
.popular__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text); font-size: 13px; line-height: 1.3; }
.popular__icon {
    --cat-bg: #fff1e8; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px;
    border-radius: 50%; background: var(--cat-bg); transition: background .15s, transform .15s;
}
.popular__item:hover .popular__icon { --cat-bg: #ffe2cf; transform: translateY(-2px); }
.popular__item:hover .popular__title { color: var(--accent); }
.cat-icon {
    width: 46px; height: 46px; overflow: visible;
    fill: none; stroke: #1f1f1f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.cat-icon .ci-fill { fill: var(--accent); stroke: none; }
.cat-icon .ci-accent { stroke: var(--accent); }
.cat-icon .ci-paper { fill: var(--cat-bg, #fff); }
.cat-icon .ci-soft { fill: #ffd2b8; }
.cat-icon .ci-light { stroke: var(--cat-bg, #fff); stroke-width: 1.6; }
.cat-icon .ci-dot { fill: #1f1f1f; stroke: none; }
.cat-icon text { font-family: Arial, "Helvetica Neue", sans-serif; font-weight: 700; stroke: none; }
.cat-icon .ci-sym { fill: var(--accent); }
.cat-icon .ci-num { fill: #1f1f1f; font-size: 6.5px; }
@media (max-width: 860px) {
    /* Телефон: той самий рядок гортається пальцем. */
    .popular { overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scroll-padding: 0 24px; scroll-snap-type: x proximity; scrollbar-width: none; }
    .popular::-webkit-scrollbar { display: none; }
    .popular__item { flex: 0 0 80px; scroll-snap-align: start; font-size: 12px; }
    .popular__icon { width: 72px; height: 72px; }
    .cat-icon { width: 40px; height: 40px; }
}

.front-info { margin-top: 30px; }
.front-info__box { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.front-info__title { font-size: 22px; text-align: center; }
/* Згорнутий: підзаголовки й рядок тексту (крок 236): покупцям не заважає, Google читає весь. */
.front-info__text { max-height: 100px; overflow: hidden; position: relative; }
.front-info__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.front-info__text.is-open { max-height: none; }
.front-info__text.is-open::after { display: none; }

/* «Відгуки про магазин» на головній — розміри з Хорошопа (крок 38): картка 465 px з полями 15,
   рамка #d7d7d7, висота 221; ім'я 15 px жирним, зірки, під ним дата 12 px сірим; текст — 5 рядків. */
.top-reviews { margin-top: 30px; }
.top-reviews__title { margin: 0 0 20px; text-align: center; font-size: 20px; line-height: 24px; font-weight: 700; }
.top-reviews__list { display: flex; margin: 0 -15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.top-reviews__list::-webkit-scrollbar { display: none; }
.top-reviews__item { flex: 0 0 calc(100% / 3); box-sizing: border-box; padding: 0 15px; scroll-snap-align: start; }
.top-reviews__card { box-sizing: content-box; height: 179px; padding: 20px; border: 1px solid #d7d7d7; border-radius: 4px; overflow: hidden; }
.top-reviews__head { display: flex; align-items: flex-start; margin-bottom: 10px; }
.top-reviews__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 11px; color: #acacac; }
.top-reviews__avatar img { width: 32px; height: 32px; object-fit: cover; }
.top-reviews__avatar .icon { width: 32px; height: 32px; }
.top-reviews__who { min-width: 0; }
.top-reviews__name { font-size: 15px; line-height: 15px; font-weight: 700; }
.top-reviews .stars { margin-left: 10px; }
.top-reviews__date { margin-top: 6px; font-size: 12px; line-height: 12px; color: #888; }
.top-reviews__text { height: 105px; overflow: hidden; font-size: 14px; line-height: 21px; }
.top-reviews__more { display: inline-block; margin-top: 10px; font-size: 14px; line-height: 18px; color: #090909; visibility: hidden; }
.top-reviews__more.is-shown { visibility: visible; }
.top-reviews__all { margin-top: 20px; text-align: center; }
.top-reviews .related__nav { top: 92px; }
.top-reviews.is-static .related__nav { display: none; }
@media (max-width: 860px) {
    /* Телефон: картки гортаються пальцем, наступна визирає з краю; стрілок немає. */
    .top-reviews__list { margin: 0 -16px; padding: 0 8px; scroll-snap-type: x proximity; }
    .top-reviews__item { flex-basis: 85%; padding: 0 8px; }
}

/* «Ми в Instagram» на головній (крок 148): ліворуч — текст і кнопка в кольорах Instagram, праворуч — колаж із
   публікацій (перше фото — велике, 2×2). На телефоні — одне під одним, колаж у три колонки, сьоме фото ховається. */
.front-social { margin-top: 30px; }
.front-social__box {
    display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr); gap: 32px; align-items: center;
    padding: 28px; border-radius: 20px; background: linear-gradient(135deg, #fff4ec 0%, #fdeef6 100%);
}
.front-social__handle { display: inline-flex; align-items: center; gap: 8px; color: #c13584; font-size: 15px; font-weight: 700; }
.front-social__handle:hover { color: #8134af; }
.front-social__handle .icon { width: 22px; height: 22px; }
.front-social__title { margin: 10px 0; color: #000; font-size: 28px; line-height: 1.15; font-weight: 800; }
.front-social__text { margin: 0 0 22px; color: #333; font-size: 15px; line-height: 1.5; }
.front-social__btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px;
    background: linear-gradient(45deg, #f58529 0%, #dd2a7b 55%, #8134af 100%); color: #fff; font-size: 16px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(221, 42, 123, .3); transition: transform .15s, box-shadow .15s;
}
.front-social__btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(221, 42, 123, .38); }
.front-social__btn .icon { width: 20px; height: 20px; }
.front-social__more { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: #666; font-size: 13px; }
.front-social__more a {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.front-social__more a:hover { color: var(--accent); }
.front-social__more .icon { width: 18px; height: 18px; }
.front-social__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.front-social__tile { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 14px; background: #eee; }
.front-social__tile--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.front-social__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.front-social__tile::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .28));
    opacity: 0; transition: opacity .2s;
}
.front-social__tile:hover img { transform: scale(1.06); }
.front-social__tile:hover::after { opacity: 1; }
@media (max-width: 860px) {
    /* Телефон: компактно — шість квадратних фото у два ряди, без великого. */
    .front-social__box { grid-template-columns: 1fr; gap: 16px; padding: 18px 14px; border-radius: 16px; text-align: center; }
    .front-social__title { margin: 6px 0 8px; font-size: 21px; }
    .front-social__text { margin-bottom: 14px; font-size: 14px; }
    .front-social__btn { padding: 11px 20px; font-size: 15px; }
    .front-social__more { justify-content: center; margin-top: 12px; }
    .front-social__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .front-social__tile, .front-social__tile--big { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; border-radius: 10px; }
    .front-social__tile:nth-child(n+7) { display: none; }
}

/* «Знижки» на головній — як «Deals» на iHerb (крок 73): фото на сірому тлі (біле тло фото
   зливається з ним — multiply), назва в три рядки, зірки й відгуки, ціна червоним. У куті фото —
   знижка «−40%», як у Хорошопа (крок 74). */
.deals { margin-top: 30px; }
.deals__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.deals__title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; }
.deals__all { font-size: 14px; color: var(--blue); text-decoration: underline; }
/* «i» біля заголовка («Популярне сьогодні», крок 78): ближче до назви, підказка відкривається праворуч. */
.deals__head .hint { align-self: center; margin-left: -8px; }
.hint--right::after { left: -8px; right: auto; }
.deals__all:hover { color: var(--accent); }
.deals__body { position: relative; }
.deals__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.deals__list::-webkit-scrollbar { display: none; }
.deals__card { flex: 0 0 calc((100% - 5 * 14px) / 6); min-width: 0; scroll-snap-align: start; }
.deals__image { position: relative; display: flex; align-items: center; justify-content: center; height: 162px; padding: 12px; border-radius: 8px; background: #f5f5f5; }
.deals__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.deals__discount { position: absolute; top: 10px; left: 0; z-index: 1; }
.deals__name {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    height: 66px; margin-top: 10px; font-size: 14px; line-height: 22px; color: #333;
}
.deals__name:hover { color: var(--accent); }
.deals__rating { display: flex; align-items: center; height: 20px; margin-top: 4px; font-size: 13px; color: var(--blue); }
.deals__rating .product-rating__stars { top: 0; margin-right: 6px; }
.deals__rating:hover .deals__reviews { text-decoration: underline; }
.deals__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin-top: 4px; }
.deals__current { color: var(--red); font-size: 16px; font-weight: 700; }
/* «Топ продажів» (крок 76): без акції ціна чорна. */
.deals__current--plain { color: var(--ink); }
.deals__old { color: #767676; font-size: 13px; text-decoration: line-through; }
.deals__nav {
    position: absolute; top: 63px; z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 1px solid #d7d7d7; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); cursor: pointer;
}
.deals__nav::before { content: ""; width: 8px; height: 8px; border-top: 2px solid #333; border-right: 2px solid #333; }
.deals__nav--prev { left: -18px; }
.deals__nav--prev::before { transform: translateX(2px) rotate(-135deg); }
.deals__nav--next { right: -18px; }
.deals__nav--next::before { transform: translateX(-2px) rotate(45deg); }
.deals__nav.is-disabled { opacity: .4; cursor: default; }
.deals.is-static .deals__nav { display: none; }
@media (max-width: 1100px) {
    .deals__card { flex-basis: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 860px) {
    /* Телефон: гортається пальцем, третя картка визирає з краю; стрілок немає. */
    .deals__list { margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
    .deals__card { flex-basis: 42%; }
    .deals__image { height: 140px; }
    .deals__nav { display: none; }
}

/* Бренди на головній (крок 151) — в одному стилі: плитки однакового розміру, світло-сірі з рамкою, логотип одним
   кольором (маска --logo), під мишкою рамка й логотип помаранчеві — як плашки шапки. Два ряди, по п'ять у ряду;
   стрілки й «Дивитись усі» — від «Знижок» (.deals__head, .deals__nav), гортання — data-related. */
.front-brands { margin-top: 30px; }
.front-brands__list {
    list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.front-brands__list::-webkit-scrollbar { display: none; }
.front-brands__list li { scroll-snap-align: start; }
.front-brands__tile {
    display: flex; align-items: center; justify-content: center; height: 104px; padding: 20px 26px;
    border: 1px solid var(--line); border-radius: 12px; background: #f7f7f7; transition: border-color .15s, background-color .15s;
}
.front-brands__tile:hover { border-color: var(--accent); background: #fff; }
.front-brands__logo {
    display: block; width: 100%; height: 100%; background: var(--menu); transition: background-color .15s;
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.front-brands__tile:hover .front-brands__logo { background: var(--accent); }
/* Без маски — звичайний логотип сірим; білий фон картинки зливається з плиткою. */
.front-brands__tile img { max-width: 100%; max-height: 100%; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.front-brands.is-static .deals__nav { display: none; }

/* ── Каталог, бренди, кошик ─────────────────────────────────────────── */

.catalog-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.catalog-section h2 { font-size: 18px; margin: 0 0 8px; }
.catalog-section ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.catalog-section li { margin: 4px 0; }

.brands-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.brands-letters a { min-width: 30px; padding: 4px 8px; text-align: center; background: var(--bg-soft); border-radius: 3px; }
.brands-index { columns: 4 220px; column-gap: 30px; }
.brands-index__group { break-inside: avoid; margin-bottom: 18px; }
.brands-index__letter { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.brands-index ul { list-style: none; margin: 0; padding: 0; }
.brands-index li { margin: 3px 0; }

.cart { max-width: 960px; }
.cart__row { display: grid; grid-template-columns: 80px 1fr 110px 120px 110px 30px; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart__image img { width: 80px; height: 80px; object-fit: contain; }
.cart__price, .cart__sum { font-weight: 700; }
.cart__remove { border: 0; background: none; font-size: 18px; color: var(--muted); }
.cart__total { text-align: right; font-size: 18px; margin-top: 18px; }
.cart__note { margin-top: 18px; padding: 14px 16px; background: var(--bg-soft); border-radius: var(--radius); color: var(--muted); }
.cart-gift__label { display: inline-block; margin-bottom: 4px; padding: 1px 8px 2px; border-radius: 3px; background: #df591d; color: #fff; font-size: 11px; line-height: 15px; font-weight: 400; }
.cart-gift__old { margin-right: 5px; color: #acacac; font-weight: 400; text-decoration: line-through; }
.cart-gift__free { color: #df591d; }
.cart-gift__qty { justify-self: center; font-size: 14px; color: var(--text); }
.cart__row:has(+ .cart__row--gift) { border-bottom-style: dashed; }
.cart-popup__row + .cart-popup__row--gift { border-top-style: dashed; }
.cart-popup__row--gift .cart-popup__name { text-decoration: none; }
.cart__row--gift .cart__name { color: var(--text); }
.qty { display: inline-flex; border: 1px solid #c9c9c9; border-radius: 3px; }
.qty button { width: 30px; border: 0; background: var(--bg-soft); }
.qty input { width: 46px; height: 32px; border: 0; text-align: center; font: inherit; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* «Більше немає в наявності» (крок 88): на сторінці товару — праворуч від кількості, у кошику — на всю
   ширину рядка, праворуч, під кількістю й сумою. */
.qty-limit { margin: 8px 0 0; color: var(--red); font-size: 13px; line-height: 1.35; }
.cart__row .qty-limit, .cart-popup__row .qty-limit { grid-column: 1 / -1; margin: 0; text-align: right; }
/* Кошик і оформлення (крок 160): «− 1 +» — за своїм розміром посередині колонки, а не розтягнуте на всю (тоді праворуч
   від «+» лишалось порожнє поле в рамці). */
.cart__row .qty { justify-self: center; }

/* ── Блог і текстові сторінки ───────────────────────────────────────── */

.info-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; }
/* Бічне меню «Інформація» — як sideMenu Хорошопа: 17 px, підкреслені посилання,
   поточна сторінка — на сірій плашці. */
.info-sidebar { font-size: 17px; line-height: 1.3; padding-top: 4px; }
.info-sidebar .side-nav { margin: 0; }
.info-sidebar .side-nav > li { margin: 12px 0 0; }
.info-sidebar .side-nav > li:first-child { margin-top: 0; }
.info-sidebar .side-nav a { color: #090909; border-bottom: 1px solid rgba(9, 9, 9, .25); text-decoration: none; }
.info-sidebar .side-nav a:hover { color: #878787; border-bottom-color: #878787; }
.info-sidebar .side-nav > li.is-active > a {
    display: inline-block; margin: -2px -6px; padding: 2px 6px; border: 0; border-radius: 4px; background: #7b7b7b; color: #fff; cursor: default;
}
.info-sidebar .side-nav ul { font-size: 15px; margin: 7px 0 0 15px; }
.info-sidebar .side-nav ul li { margin: 8px 0 0; }
.info-sidebar .side-nav li.is-current > a { font-weight: 700; border-bottom: 0; }

.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.entries__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft); margin-bottom: 10px; }
.entries__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entries__date { font-size: 12px; color: var(--light); margin-bottom: 4px; }
.entries__title { font-size: 15px; line-height: 1.3; color: var(--text); }

.article .crumbs { margin-top: 0; }
.article__date { font-size: 12px; color: var(--light); margin: -8px 0 18px; }
.article__text { font-size: 14px; }
.article__text img { border-radius: var(--radius); }
.article__text .faq-item { border-top: 1px solid var(--line); padding: 10px 0; }
.article__text .faq-question h3 { font-size: 16px; margin: 0 0 6px; }

/* ── Вхід і кабінет ─────────────────────────────────────────────────── */

.auth { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 30px; align-items: start; }
.auth__box { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px 24px; background: #fff; }
.auth__box--single { max-width: 460px; }
.auth__title { font-size: 20px; margin: 0 0 16px; }
/* Одна сторінка входу (крок 101): «Увійти», під ним «Зареєструватися» — реєстрація відкривається на місці
   входу; угорі кожної — «Увійти через Google» (біла, з кольоровою «G», як радить Google) і «або».
   Крок 102 (власниця: «по центру й ліпший дизайн», як на iHerb і Notino): світло-сіре тло на всю ширину,
   біла картка 440 px по центру з тінню, заголовок по центру, поля 44 px, кнопки на всю ширину, «око»
   в паролі; під карткою — що дає кабінет. Так само «Забули пароль?» і «Новий пароль». */
.auth-page { padding-bottom: 56px; background: #f6f6f6; }
.auth-page .auth { display: block; max-width: 440px; margin: 16px auto 0; }
.auth-page .auth__box { padding: 32px 36px 30px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 16px rgba(0, 0, 0, .07); }
.auth-page .auth__title { margin: 0 0 6px; font-size: 26px; font-weight: 700; line-height: 1.25; text-align: center; }
.auth__lead { margin: 0 0 24px; font-size: 14px; line-height: 1.45; color: #6a6a6a; text-align: center; }
.auth-page .field__label { font-weight: 600; }
.auth-page .field__input { height: 44px; border-color: #cfcfcf; border-radius: 8px; font-size: 15px; }
.auth-page .field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 92, 0, .15); }
.auth-page .form__link { color: #555; }
.auth-page .form__link:hover { color: var(--accent); }
.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field__pass { position: relative; display: block; }
.field__pass .field__input { padding-right: 46px; }
.field__eye {
    position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 100%; padding: 0; border: 0; background: none; color: #8a8a8a; cursor: pointer;
}
.field__eye:hover { color: var(--text); }
.field__eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.field__eye-shut, .field__eye.is-shown .field__eye-open { display: none; }
.field__eye.is-shown .field__eye-shut { display: block; }
.auth__submit { width: 100%; min-height: 46px; margin-top: 6px; border-radius: 8px; font-size: 16px; }
.auth__perks { display: flex; justify-content: center; gap: 36px; margin: 26px 0 0; padding: 0; list-style: none; }
.auth__perk { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 120px; font-size: 13px; line-height: 1.3; color: #555; text-align: center; }
.auth__perk-icon {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--accent); box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}
.auth__perk-icon .icon { width: 20px; height: 20px; }
.auth__perk-icon--text { font-size: 18px; font-weight: 700; }
/* Інші способи входу — під «Увійти» (крок 103): Google і «за номером телефону», однакові білі кнопки. */
.auth__providers { display: flex; flex-direction: column; gap: 10px; }
.auth__provider {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px;
    border: 1px solid #c6c6c6; border-radius: 8px; background: #fff; color: #1f1f1f; font-size: 15px; font-weight: 500;
}
.auth__provider:hover { border-color: #8a8a8a; background: #f8f8f8; color: #1f1f1f; }
.auth__provider-icon { flex: none; width: 18px; height: 18px; }
.auth__phone .auth__provider-icon { color: var(--accent); }
/* Вхід через Telegram (крок 113): значок і кнопка — синім Telegram; поки чекаємо «Так, увійти» — блимає крапка. */
.auth__telegram .auth__provider-icon { color: #229ed9; }
.auth__tg-open { gap: 10px; background: #229ed9; }
.auth__tg-open:hover { background: #1b87bb; }
.auth__tg-open .icon { width: 20px; height: 20px; }
/* Веб-версія Telegram — запасним посиланням під кнопкою, що веде в застосунок (крок 224). */
.auth__tg-web { margin: 10px 0 0; font-size: 13px; color: #6a6a6a; text-align: center; }
.auth__tg-web a { color: #229ed9; }
.auth__tg-wait { margin: 16px 0 0; font-size: 14px; color: #6a6a6a; text-align: center; }
.auth__tg-wait::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #229ed9; vertical-align: 1px; animation: tg-wait 1.2s ease-in-out infinite; }
@keyframes tg-wait { 50% { opacity: .2; } }
.auth__tg-end { margin-top: 16px; }
/* Код із СМС (крок 103): великі цифри по центру з проміжками; «Надіслати ще раз» рахує секунди. */
.auth-page .auth__code { height: 54px; font-size: 26px; font-weight: 700; letter-spacing: 12px; text-align: center; }
.auth__resend { margin-top: 14px; text-align: center; }
.auth__resend-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.auth__resend-btn:disabled { color: #8a8a8a; font-weight: 400; cursor: default; }
/* Номер у кабінеті — текстом і «Змінити номер» (крок 111): міняється лише кодом із СМС. */
.profile-phone { display: flex; align-items: center; gap: 10px; }
.profile-phone__value { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 6px; background: #f7f7f7; font-size: 15px; }
.profile-phone__change { flex: none; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.profile-phone__change:hover { background: var(--accent); color: #fff; }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px; color: #8a8a8a; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__switch { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: #6a6a6a; text-align: center; }
.auth__register { width: 100%; min-height: 46px; border: 1px solid var(--accent); border-radius: 8px; background: #fff; color: var(--accent); font-size: 16px; }
.auth__register:hover { background: var(--accent); color: #fff; }
.auth__switch-link { font-weight: 700; color: var(--accent); }
.form .field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 13px; margin-bottom: 5px; color: var(--ink); }
.field__input {
    width: 100%; height: 38px; padding: 0 12px; border: 1px solid #a2a2a2; border-radius: var(--radius);
    font: inherit; font-size: 14px; background: #fff;
}
.field__input:focus { outline: none; border-color: var(--ink); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 14px; }
.form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.form__link { font-size: 13px; text-decoration: underline; }
.form__error { background: #fdecea; color: #a12a1f; border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.form__ok { background: #edf7e6; color: #3f6f17; border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }

.account { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; }
.account__nav { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.account__nav a, .account__nav .link-button { padding: 8px 12px; border-radius: var(--radius); text-align: left; text-decoration: none; }
.account__nav a.is-active { background: var(--bg-soft); font-weight: 700; }
.account__nav .link-button { color: var(--muted); }
.account__forms { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 24px; align-items: start; }

/* ── Оформлення замовлення ─────────────────────────────────────────── */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.checkout__main { min-width: 0; }
.checkout__block { margin-bottom: 26px; }
.checkout__title { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 14px; }
.checkout__step {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--menu); color: #fff; font-size: 14px; font-weight: 700;
}
.checkout .cart { max-width: none; }
.checkout__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.checkout__sub { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__error { display: block; color: #a12a1f; font-size: 12px; margin-top: 4px; }
.field.has-error .field__input { border-color: #c4392d; }
.field__input--area { height: auto; padding: 8px 12px; resize: vertical; min-height: 70px; }
.checkout__hint { grid-column: 1 / -1; color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.checkout__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.options { display: grid; gap: 8px; }
.option {
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer; font-size: 14px; background: #fff;
}
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option input { margin: 2px 0 0; accent-color: var(--accent); }
.option small { display: block; margin-top: 2px; }

.ac { position: relative; }
.ac__list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 280px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0;
    list-style: none; background: #fff; border: 1px solid #a2a2a2; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ac__item { padding: 8px 12px; font-size: 14px; cursor: pointer; }
.ac__item:hover, .ac__item.is-active { background: var(--bg-soft); }

.checkout__side { position: sticky; top: calc(var(--header-h, 0px) + 16px); }
.checkout__summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: #fff; }
.checkout__line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; }
.checkout__line span:last-child { color: var(--muted); text-align: right; }
.checkout__line--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-size: 18px; }
.checkout__line--discount b { color: var(--accent); }
.checkout__loyalty { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.checkout__loyalty a { color: var(--ink); border-bottom: 1px dotted rgba(9, 9, 9, .5); }

.checkout__submit { width: 100%; margin-top: 14px; }
.checkout__submit:disabled { opacity: .6; cursor: progress; }

.order { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.order__pay { padding: 14px 16px; border-radius: var(--radius); background: var(--bg-soft); margin-bottom: 18px; }
.order__pay p { margin: 0 0 12px; }
.order__title { font-size: 20px; margin: 10px 0 12px; }
.order__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order__item img { width: 64px; height: 64px; object-fit: contain; }
.order__item-sum { font-weight: 700; white-space: nowrap; }
.order__total { text-align: right; font-size: 18px; margin-top: 14px; }
.order__subtotal { text-align: right; font-size: 14px; margin-top: 8px; color: var(--muted); }
.order__subtotal--discount { color: var(--accent); }
.loyalty { margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.loyalty__title { font-size: 16px; margin-bottom: 6px; }
.loyalty__title b { color: var(--accent); }
.loyalty__line { color: var(--muted); margin-top: 2px; }
.loyalty__link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--ink); border-bottom: 1px dotted rgba(9, 9, 9, .5); }

.order__side { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.order__facts { margin: 0 0 14px; font-size: 14px; }
.order__facts dt { color: var(--muted); font-size: 12px; margin-top: 10px; }
.order__facts dt:first-child { margin-top: 0; }
.order__facts dd { margin: 2px 0 0; }
.order__comment { white-space: pre-line; }
.order__note { font-size: 13px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--bg-soft); color: var(--muted); font-size: 12px; }
.badge--ok { background: #edf7e6; color: #3f6f17; }

.orders { display: flex; flex-direction: column; }
.orders__row {
    display: grid; grid-template-columns: 90px 120px minmax(0, 1fr) 100px 130px; gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px;
}
.orders__row:hover .orders__number { color: var(--accent); }
.orders__number { font-weight: 700; }
.orders__date { color: var(--muted); }
.orders__items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders__sum { font-weight: 700; text-align: right; }
.orders__state { text-align: right; }

/* Telegram-бот і бонуси (крок 106): запрошення в кабінеті, вкладка «Бонуси», галочка в кошику. */
.tg-invite {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px;
    padding: 14px 16px; border: 1px solid #b9dcf5; border-radius: var(--radius); background: #f1f8fe; font-size: 14px;
}
.tg-invite__text { display: flex; flex-direction: column; gap: 4px; }
.tg-invite__text b { font-size: 16px; }
.tg-invite__text span { color: var(--muted); line-height: 1.45; }
.tg-invite__button { flex-shrink: 0; background: #2aabee; }
.tg-invite__button:hover { background: #229ad8; }
.bonus-balance { margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.bonus-balance__sum { font-size: 18px; }
.bonus-balance__sum b { color: var(--accent); }
.bonus-balance__rules { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
.bonus-history { display: flex; flex-direction: column; }
.bonus-history__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bonus-history__date { color: var(--muted); }
.bonus-history__sum { text-align: right; }
.bonus-history__sum.is-plus { color: var(--green-text); }
.checkout__bonus { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; cursor: pointer; }
.checkout__bonus input { margin-top: 3px; accent-color: var(--accent); }
.checkout__bonus .muted { font-size: 12px; }

/* ── Відгуки (як p-review на Хорошопі) ───────────────────────────────── */
.reviews-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 30px; padding-bottom: 32px; border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.reviews-top__rating { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
.reviews-top__rating b { grid-row: span 2; font-size: 32px; font-weight: 400; line-height: 1; }
.reviews-top__rating .muted { font-size: 12px; color: gray; }
.reviews-top__rating .stars { margin-left: 0; }
.reviews-top__rating .stars__star { width: 14px; height: 14px; }
.reviews-sorting { display: flex; overflow: hidden; border-radius: 4px; background: #f2f2f2; white-space: nowrap; }
.reviews-sorting__item { padding: 7px 10px 8px; font-size: 13px; color: #090909; }
.reviews-sorting__item.is-active { background: #7b7b7b; color: #fff; cursor: default; }
.review { position: relative; padding-left: 45px; }
.reviews > .review { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.reviews > .review:last-child { margin-bottom: 0; border-bottom: 0; }
.review__avatar { position: absolute; left: 0; top: 3px; width: 33px; height: 33px; }
.review__avatar img { width: 33px; height: 33px; border-radius: 3px; object-fit: cover; }
.review__avatar .icon { width: 33px; height: 33px; fill: rgba(0, 0, 0, .5); }
.review__head { margin: -3px 0 5px; }
.review__author { font-weight: 700; color: #000; }
.review__date { margin-left: 5px; font-size: 12px; color: #7d7d7d; }
.stars { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.stars__star { width: 10px; height: 10px; fill: none; stroke: var(--accent); stroke-width: 2px; }
.stars__star.is-on { fill: var(--accent); }
.review__body { overflow: hidden; margin-bottom: 5px; line-height: 1.5; overflow-wrap: anywhere; }
/* Відповідь — нижче відгуку. Пише магазин — ім'я й значок зеленим (p-review-author--admin
   на Хорошопі); відповідь покупця — звичайна. */
.review--reply { margin-top: 25px; }
.review--admin .review__author { color: #48ab11; }
.review--admin > .review__avatar .icon { fill: #48ab11; }
.reviews-more { padding: 35px 0 40px; border-top: 1px solid #e5e5e5; text-align: center; }
/* «↳ Відповісти» під відгуком і форма відповіді, що розкривається під ним. */
.review__reply {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none;
    font-size: 13px; color: #090909; cursor: pointer;
}
.review__reply .icon { width: 14px; height: 14px; }
.review__reply:hover { color: var(--accent); }
.p-review-reply { margin: 8px 0 16px; padding: 16px; border-radius: 6px; background: #f6f6f6; }
.p-review-reply__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.p-review-reply .field__input { width: 100%; }
.p-review-reply__text { height: auto; min-height: 90px; margin-bottom: 10px; padding: 8px 12px; resize: vertical; }
.p-review-reply__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) {
    .p-review-reply__inputs { grid-template-columns: minmax(0, 1fr); }
}

/* Біля артикула: зірки середньої оцінки й «5 відгуків» — як product-rating на Хорошопі. */
.product-rating { display: inline-flex; align-items: baseline; }
.product-rating__stars {
    position: relative; top: 1px; display: inline-block; width: 78px; height: 14px; margin-right: 10px;
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2014%22%20fill%3D%22%23e64300%22%3E%3Cpath%20d%3D%22M2.6%2014l1.7-5.4L0%205.4h5.3L7%200l1.7%205.4H14L9.7%208.6l1.7%205.3L7%2010.7%202.6%2014zm.3-7.7l2.5%201.9-.9%203L7%209.5l2.5%201.9-.9-3%202.5-1.9H7.9L7%203.4l-.9%203-3.2-.1z%22%2F%3E%3C%2Fsvg%3E") 0 0 repeat-x;
}
.product-rating__current {
    position: absolute; top: 0; left: 0; height: 100%;
    background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2014%22%20fill%3D%22%23ff5c00%22%3E%3Cpath%20d%3D%22M7%200l1.7%205.3H14L9.7%208.6l1.7%205.3L7%2010.7%202.7%2014l1.7-5.4L0%205.3h5.3L7%200z%22%2F%3E%3C%2Fsvg%3E") 0 0 repeat-x;
}
.product-rating__link { font-size: 12px; white-space: nowrap; color: #090909; border-bottom: 1px dotted rgba(9, 9, 9, .5); }

/* Значок «i» з підказкою (крок 63): наведення чи дотик — темна плашка з текстом із data-hint. */
.hint { position: relative; display: inline-flex; flex: none; font-size: 16px; color: #8a8a8a; cursor: help; }
.hint:hover, .hint:focus { color: var(--accent); outline: none; }
.hint::after {
    content: attr(data-hint); position: absolute; right: -8px; bottom: calc(100% + 8px); z-index: 30; width: 220px; padding: 8px 10px;
    border-radius: 6px; background: #121212; color: #fff; font-size: 12px; line-height: 1.4; font-weight: 400; white-space: normal; text-align: left;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
.hint:hover::after, .hint:focus::after { opacity: 1; visibility: visible; }
/* Схована підказка не займає місця: «ⓘ» біля «Популярне сьогодні» робила головну на телефоні ширшою за екран
   (441 px на 375 — сторінка зменшувалась і їздила вбік; крок 136). */
.hint:not(:hover):not(:focus)::after { display: none; }
.product-rating__link:hover { color: #878787; border-bottom-color: #878787; }
.product-reviews { font-size: 14px; }
.product__heading + .product-reviews__add + .review-panel .p-review-add { margin-top: 0; padding-top: 0; border-top: 0; }

/* На комп'ютері форма відгуку з'являється лише після «Написати відгук».
   Доти під відгуками висіли порожні поля, які ніхто не просив, і сторінка
   виглядала так, ніби відгук уже починають писати.

   Телефона це не стосується: там панель — шторка на весь екран, і вона має
   власні правила нижче, у медіазапиті до 860 пікселів. */
@media (min-width: 861px) {
    .review-panel { display: none; }
    .review-panel.is-open, .review-panel:target { display: block; }
}
.article__comments { margin-top: 40px; padding-top: 30px; border-top: 1px solid #d7d7d7; }
.article__comments-title { margin-bottom: 24px; font-size: 18px; }

/* «Новий відгук або коментар» — як p-review-add на Хорошопі: два поля в колонку на
   40 % ширини, повідомлення, оцінка зірками. */
.p-review-add { position: relative; margin: 30px 0 10px; padding-top: 30px; border-top: 1px solid #d7d7d7; }
.reviews:empty + .p-review-add, .product-reviews > .p-review-add:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.p-review-add__heading { margin-bottom: 15px; font-size: 16px; font-weight: 700; }
.p-review-add__inputs { display: grid; gap: 20px; width: 40%; min-width: 260px; margin-bottom: 20px; }
.p-review-add__item { display: block; margin-bottom: 20px; }
.p-review-add__inputs .p-review-add__item { margin-bottom: 0; }
.p-review-add .field__input { width: 100%; }
.p-review-add__text { height: auto; min-height: 110px; padding: 8px 12px; resize: vertical; }
.p-rating { display: flex; align-items: center; gap: 15px; }
.rate-input { display: inline-flex; width: 160px; }
.rate-input__star { display: flex; width: 20%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rate-input__star .icon { width: 24px; height: 24px; fill: none; stroke: #acacac; stroke-width: 2px; }
.rate-input__star.is-on .icon, .rate-input:hover .rate-input__star .icon { fill: var(--accent); stroke: var(--accent); }
.rate-input__star:hover ~ .rate-input__star .icon { fill: none; stroke: #acacac; }
/* Пастка для ботів — поза екраном, не display:none (так її обходять). */
.p-review-add__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.p-review-add__errors { margin-bottom: 15px; color: #c4392d; font-size: 13px; }
.p-review-add__done { margin-bottom: 15px; padding: 10px 14px; border-radius: 4px; background: #eef8e8; color: #2f7d0c; font-size: 14px; }
.store-reviews__add .p-review-add { margin-top: 40px; }
@media (max-width: 767px) {
    .p-review-add__inputs { width: 100%; min-width: 0; }
}

/* ── «Контакти» (як на Хорошопі) ───────────────────────────────────── */
.contacts { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 30px; align-items: start; margin-bottom: 26px; }
.contacts__group { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contacts__group:first-child { padding-top: 0; }
.contacts__group .icon { font-size: 20px; color: var(--muted); margin-top: 1px; }
.contacts__group a { color: var(--ink); }
.contacts__phone { display: block; font-size: 16px; font-weight: 700; line-height: 1.7; }
.contacts__title { margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--ink); }
.contacts__address { margin-bottom: 16px; font-size: 15px; font-style: normal; line-height: 1.5; }
.contacts__map iframe { display: block; width: 100%; height: 450px; border: 0; }

/* ── Вікно кошика (як на Хорошопі) ─────────────────────────────────── */
.modal {
    position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center;
    padding: 50px 16px; overflow-y: auto; background: rgba(0, 0, 0, .6);
}
.modal__dialog { position: relative; width: 100%; max-width: 712px; background: #fff; padding: 22px 28px 26px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.cart-popup__close {
    position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 0; background: none; font-size: 24px; color: var(--ink);
}
.cart-popup__title { font-size: 30px; line-height: 1.2; margin: 6px 0 16px; color: var(--ink); }
.cart-popup__row, .cart-popup__head { display: grid; grid-template-columns: 70px minmax(0, 1fr) 118px 100px 20px; align-items: center; gap: 14px; }
.cart-popup__head { padding: 0 16px 6px; font-size: 11px; color: var(--muted); }
.cart-popup__head span:first-child { grid-column: span 2; }
.cart-popup__head span:nth-child(2) { text-align: center; }
.cart-popup__head span:nth-child(3) { text-align: right; }
.cart-popup__box { border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.cart-popup__box + .cart-popup__box { margin-top: 6px; }
.cart-popup__row { padding: 12px 16px; }
.cart-popup__row + .cart-popup__row { border-top: 1px solid var(--line); }
.cart-popup__image img { width: 70px; height: 70px; object-fit: contain; }
.cart-popup__name { color: var(--ink); font-size: 14px; text-decoration: underline dotted; text-underline-offset: 4px; }
.cart-popup__name:hover { color: var(--accent); }
.cart-popup__price { font-size: 14px; margin-top: 6px; }
.cart-popup__qty { justify-self: center; }
.cart-popup__qty button { background: #fff; font-size: 18px; }
.cart-popup__sum { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; }
.cart-popup__remove { display: flex; padding: 0; border: 0; background: none; color: var(--light); font-size: 16px; }
.cart-popup__remove:hover { color: var(--ink); }
.cart-popup__promo { padding: 16px 16px 16px 100px; }
.cart-popup__loyalty { margin-bottom: 10px; font-size: 13px; }
.cart-popup__loyalty:last-child { margin-bottom: 0; }
.cart-popup__loyalty-link { color: var(--ink); border-bottom: 1px dotted rgba(9, 9, 9, .5); }
.cart-popup__loyalty-link:hover { color: #878787; border-bottom-color: #878787; }
.cart-popup__discount { text-align: right; font-size: 13px; margin-bottom: 6px; }
.cart-popup__discount b { margin-left: 8px; color: var(--accent); }
.free-delivery { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px 14px; }
.free-delivery__title { font-weight: 700; font-size: 14px; color: var(--ink); }
.free-delivery__note { font-size: 11px; color: var(--muted); margin: 4px 0 10px; }
.free-delivery__bar { height: 7px; border-radius: 4px; background: #e9e9e9; overflow: hidden; }
.free-delivery__bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.free-delivery__left { font-size: 13px; margin-top: 10px; }
.free-delivery__left b { margin-left: 4px; font-size: 15px; color: var(--accent); }
/* Комп'ютер (крок 155): «Безкоштовна доставка від…» у кошику — посередині блоку, написи й смужка по центру;
   раніше блок мав відступ 100 px зліва (під назвою товару) і віджет стояв зсунутим праворуч. «Увійти для
   відображення накопичувальної знижки» над ним — теж посередині. Телефон — як було. */
@media (min-width: 861px) {
    .cart-popup__promo { padding: 18px 16px; text-align: center; }
    .cart-popup__promo .free-delivery { max-width: 460px; margin: 0 auto; padding: 14px 20px 16px; }
}
.cart-popup__foot { padding: 16px 16px 18px; }
.cart-popup__total { text-align: right; font-size: 13px; }
.cart-popup__total b { margin-left: 12px; font-size: 20px; color: var(--ink); }
.cart-popup__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.cart-popup__actions .btn--big { min-height: 36px; padding: 0 16px; }
.cart-popup__back { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font-size: 17px; color: var(--ink); }
.cart-popup__back .icon { font-size: 20px; }
.cart-popup__back:hover { color: var(--accent); }
.cart-popup__rec { margin-top: 26px; }
.cart-popup__rec-title { margin-bottom: 12px; font-weight: 700; font-size: 15px; color: var(--ink); }
.rec { position: relative; }
.rec__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rec__track::-webkit-scrollbar { display: none; }
.rec__item { display: flex; flex-direction: column; scroll-snap-align: start; font-size: 12px; }
.rec__image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.rec__name {
    margin-top: 8px; color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rec__price { margin: 8px 0 10px; }
.rec__buy { align-self: flex-start; margin-top: auto; min-height: 26px; padding: 0 10px; font-size: 14px; }
.rec__arrow {
    position: absolute; top: 28%; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 26px; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.rec__arrow--prev { left: -16px; }
.rec__arrow--next { right: -16px; }
.rec__arrow:disabled { color: var(--light); box-shadow: none; cursor: default; }

.top-action__count {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff;
    font-size: 10px; line-height: 16px; text-align: center;
}
.logo__text { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: .02em; white-space: nowrap; }

.fav {
    position: absolute; top: 0; right: 0; z-index: 2; width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #c4c4c4; font-size: 18px;
}
.fav:hover { color: var(--red); }
.fav.is-on { color: var(--red); }
.fav--product { position: static; margin-left: auto; width: 38px; height: 38px; border: 1px solid var(--line); background: #fff; font-size: 20px; }

/* ── Підвал ─────────────────────────────────────────────────────────── */

.footer { background: var(--bg-soft); color: #525252; padding: 36px 0 30px; font-size: 12px; }
.footer__columns { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 30px; }
.footer a { color: var(--text); font-size: 12px; }
.footer a:hover { color: var(--accent); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 8px; }
.footer__title { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 14px; }
.footer__title--small { font-size: 13px; margin: 18px 0 8px; }
/* Назва в підвалі — як у шапці, але «Monster» чорним: підвал світлий (крок 71). */
.footer .footer__logo { display: inline-block; margin-bottom: 14px; font-size: 26px; }
.footer__logo .logo__main { color: var(--ink); }
.footer__payments { display: block; }
.footer__muted { color: var(--muted); margin-bottom: 6px; }
/* Іконки соцмереж у підвалі — помітно більші (крок 245, власниця): 32 px замість 12. */
.socials--footer { gap: 16px; }
.socials--footer a { display: flex; }
.socials--footer a:hover { color: var(--accent); }
.footer .socials--footer .icon { width: 32px; height: 32px; }

/* ── Дрібні елементи ────────────────────────────────────────────────── */

/* «Нагору» — над кнопкою «Напишіть нам» (крок 85), по одній осі з нею. */
.up-button {
    position: fixed; right: 28px; bottom: 90px; z-index: 40; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(42, 40, 41, .85); color: #fff; font-size: 22px; display: none;
}
.up-button.is-visible { display: flex; align-items: center; justify-content: center; }

/* «Напишіть нам» у кутку (крок 85): над кнопкою — Viber, Telegram, Instagram, онлайн-чат. Відкрите
   вікно чату KeyCRM кнопку ховає (is-chatting), щоб вона не лягала на вікно. */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat-widget.is-chatting { display: none; }
.chat-widget__toggle {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: 50%;
    background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer;
}
.chat-widget__toggle:hover { background: var(--accent-dark); }
.chat-widget__toggle .icon { width: 26px; height: 26px; }
.chat-widget__close, .chat-widget.is-open .chat-widget__open { display: none; }
.chat-widget.is-open .chat-widget__close { display: block; }
/* Відкрита панель — над шапкою (70), під меню й кошиком (80+); на низькому екрані (телефон лежить) вміщується й гортається сама: хрестик угорі лишається під пальцем. */
.chat-widget.is-open { z-index: 75; }
.chat-widget__panel { position: relative; width: 230px; max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); }
.chat-widget__title { margin: 0 0 8px 6px; color: #000; font-size: 16px; font-weight: 700; }
/* Хрестик у куті панелі: значок маленький, а зона натискання 44×44, щоб на телефоні влучити пальцем. */
.chat-widget__x { position: absolute; top: 3px; right: 3px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: #6f6964; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chat-widget__x:hover { color: #000; }
.chat-widget__x .icon { width: 18px; height: 18px; }
.chat-widget__item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 6px; border: 0; border-radius: 10px;
    background: none; color: #000; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.chat-widget__item:hover { background: #f4f4f4; color: #000; }
.chat-widget__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; }
.chat-widget__icon .icon { width: 22px; height: 22px; }
.chat-widget__item--viber .chat-widget__icon { background: #7360f2; }
.chat-widget__item--telegram .chat-widget__icon { background: #27a7e7; }
.chat-widget__item--instagram .chat-widget__icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.chat-widget__item--chat .chat-widget__icon { background: var(--accent); }
.chat-widget__item--callback .chat-widget__icon { background: #2bb24c; }
/* ШІ-консультант (крок 92): вікно над кнопкою зв'язку, на телефоні — на весь екран. z-index 75 — над закріпленою
   шапкою (70, крок 144), інакше на телефоні вона закриває заголовок і хрестик вікна (крок 145). */
.ai-chat {
    position: fixed; right: 20px; bottom: 20px; z-index: 75; display: flex; flex-direction: column;
    width: 380px; height: min(600px, calc(100vh - 40px)); border-radius: 16px; background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25); overflow: hidden;
}
.ai-chat[hidden] { display: none; }
.ai-chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; background: var(--menu); color: #fff; }
.ai-chat__avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); }
.ai-chat__avatar .icon { width: 22px; height: 22px; }
.ai-chat__titles { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ai-chat__title { font-size: 16px; font-weight: 700; }
.ai-chat__subtitle { color: #c9c9c9; font-size: 12px; }
.ai-chat__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: none; color: #fff; cursor: pointer; }
.ai-chat__close .icon { width: 22px; height: 22px; }
/* Вкладки «ШІ-консультант | Чат з оператором» — після «Під'єднати оператора» (крок 94). */
.ai-chat__tabs { display: flex; gap: 4px; padding: 0 8px 8px; background: var(--menu); }
.ai-chat__tabs[hidden] { display: none; }
.ai-chat__tab { flex: 1; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: #d0d0d0; font: inherit; font-size: 13px; text-align: center; cursor: pointer; }
.ai-chat__tab.is-active { background: #fff; color: #000; font-weight: 700; cursor: default; }
.ai-chat__tab:not(.is-active):hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ai-chat__log { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px; overflow-y: auto; background: #f7f7f7; }
.ai-chat__msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-chat__msg--bot { align-self: flex-start; background: #fff; color: #000; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ai-chat__msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ai-chat__msg--bot a { color: var(--accent-dark); text-decoration: underline; }
.ai-chat__msg--error { background: #fdecea; color: #a12a1f; }
.ai-chat__msg--typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #9a9a9a; animation: ai-typing 1s infinite ease-in-out; }
.ai-chat__msg--typing span:nth-child(2) { animation-delay: .15s; }
.ai-chat__msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line); }
/* Скріпка й прикріплений файл (крок 95). */
.ai-chat__attach { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 40px; border: 0; background: none; color: #6a6a6a; cursor: pointer; }
.ai-chat__attach:hover { color: var(--ink); }
.ai-chat__attach .icon { width: 22px; height: 22px; }
.ai-chat__file { padding: 8px 12px 0; border-top: 1px solid var(--line); }
.ai-chat__file[hidden] { display: none; }
.ai-chat__file:not([hidden]) + .ai-chat__form { border-top: 0; }
.ai-chat__file-pill { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 10px; background: #f2f2f2; font-size: 13px; }
.ai-chat__file-pill .icon { flex: none; width: 16px; height: 16px; color: #6a6a6a; }
.ai-chat__file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat__file-pill button { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: none; color: #6a6a6a; cursor: pointer; }
.ai-chat__input { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; border: 1px solid #c9c9c9; border-radius: 20px; font: inherit; font-size: 14px; resize: none; }
.ai-chat__input:focus { outline: none; border-color: var(--ink); }
.ai-chat__send { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.ai-chat__send .icon { width: 20px; height: 20px; }
.ai-chat.is-busy .ai-chat__send { opacity: .5; pointer-events: none; }
.ai-chat__operator {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 12px 12px; padding: 9px 12px;
    border: 1px solid #c9c9c9; border-radius: 20px; background: #fff; color: #000; font: inherit; font-size: 14px; cursor: pointer;
}
.ai-chat__operator:hover { border-color: var(--ink); }
.ai-chat__operator .icon { width: 18px; height: 18px; }
@media (max-width: 860px) {
    /* Крок 146: на телефоні — віконце знизу (до 560 px), а не весь екран: заголовок і хрестик завжди видно. Над
       клавіатурою висоту й верх підганяє site.js (за видимою частиною екрана); без нього — просто знизу. */
    .ai-chat { inset: auto 8px 8px 8px; width: auto; height: min(560px, calc(100% - 96px)); border-radius: 16px; }
    /* Поля вводу на телефоні — не дрібніше 16 px (крок 145): на iPhone менший шрифт у полі при натиску збільшує
       сторінку, і масштаб лишається збитим («Напишіть нам», «Передзвонити вам?», пошук, оформлення, вхід). */
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), textarea:not([hidden]):not([disabled]), select:not([hidden]):not([disabled]) { font-size: 16px; }
}
/* Підказка консультанта (крок 93) — «бульбашка» ліворуч від кнопки зв'язку, хвостиком до неї («Нагору» над
   кнопкою лишається вільною). */
.ai-teaser {
    position: fixed; right: 88px; bottom: 22px; z-index: 44; display: flex; align-items: flex-start;
    max-width: min(320px, calc(100vw - 108px)); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    animation: ai-teaser-in .3s ease-out;
}
.ai-teaser[hidden] { display: none; }
.ai-teaser::after { content: ""; position: absolute; right: -6px; bottom: 18px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.ai-teaser__body { display: flex; align-items: flex-start; gap: 10px; padding: 12px 4px 12px 12px; border: 0; background: none; color: #000; font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.ai-teaser__avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; }
.ai-teaser__avatar .icon { width: 18px; height: 18px; }
.ai-teaser__close { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 4px 4px 0 0; border: 0; background: none; color: #8a8a8a; cursor: pointer; }
.ai-teaser__close .icon { width: 16px; height: 16px; }
@keyframes ai-teaser-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 861px) {
    .ai-teaser { right: 100px; bottom: 28px; }
}

/* На комп'ютері кнопка зв'язку більша (крок 89, власниця); «Нагору» — над нею, на тій самій осі. */
@media (min-width: 861px) {
    .chat-widget__toggle { width: 68px; height: 68px; }
    .chat-widget__toggle .icon { width: 32px; height: 32px; }
    .chat-widget__panel { width: 260px; padding: 16px; }
    .chat-widget__title { font-size: 17px; }
    .chat-widget__item { padding: 8px 6px; font-size: 16px; }
    .chat-widget__icon { width: 42px; height: 42px; }
    .chat-widget__icon .icon { width: 24px; height: 24px; }
    .up-button { right: 34px; bottom: 102px; }
}

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
    display: flex; align-items: center; gap: 16px; max-width: calc(100% - 32px);
    padding: 14px 18px; background: #fff; border-radius: var(--radius); box-shadow: 0 6px 30px rgba(0, 0, 0, .2);
}
.toast__text { font-size: 14px; }

/* ── Планшет ────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    /* Картка товару у три колонки (крок 52): на вузькому екрані смаки — по два в ряд. */
    .modifications--flavors .modifications__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .front-brands__list { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
    .menu__link { font-size: 14px; padding: 0 9px; }
    .head-action__text { display: none; }
    .benefits__list { grid-template-columns: repeat(3, 1fr); }
}

/* ── Телефон ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .wrap { padding: 0 16px; }
    h1 { font-size: 24px; }

    /* Угорі на телефоні — лише стрічка, по центру. */
    .header__top { display: none; }
    .header__top--ribbon { display: block; }
    .header__top-row { justify-content: center; min-height: 40px; }
    .top-links, .header__top-right { display: none; }
    .ribbon { font-size: 12px; }
    /* ⚠ Лише верх і низ: «padding: 10px 0» з'їдав бічні відступи .wrap — і шапка липла до країв. */
    .header__middle-row { flex-wrap: wrap; gap: 10px 16px; min-height: 0; padding-top: 8px; padding-bottom: 12px; }
    .burger { display: block; }
    .logo img { width: 96px; }
    .logo--word { font-size: 23px; }
    .search { order: 5; flex-basis: 100%; max-width: none; }
    .search__input { height: 38px; }
    .search__button { height: 38px; }
    .header__middle .search__input { height: 42px; }
    .header__middle .search__button { height: 42px; }
    .header__middle .logo { margin-right: auto; }
    .suggest { left: -16px; right: -16px; top: calc(100% + 4px); width: auto; max-height: calc(100vh - 130px); border-radius: 0; border-width: 1px 0; }
    .suggest__body { display: block; }
    .suggest__side { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; }
    .suggest__cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
    .suggest__cats a { white-space: nowrap; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .suggest__items { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .suggest__item { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; }
    .suggest__item img { width: 50px; height: 50px; }
    .suggest__price { display: flex; flex-direction: column; align-items: flex-end; }
    .search-cats { margin-bottom: 14px; }
    .search-cats__list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
    .search-cats__list li { margin: 0; }
    .phones { display: none; }
    .cart-link__text { display: none; }

    /* Каталог на телефоні — у мобільному меню (.mnav), смуги меню немає. */
    .header__bottom { display: none; }
    /* Затемнення під мобільним меню й фільтрами. */
    .menu-overlay.is-open { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .45); }

    .listing__head { display: block; }
    .chips-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 14px; scrollbar-width: none; }
    .chips-nav::-webkit-scrollbar { display: none; }
    .sorting { flex-wrap: wrap; }
    .listing__body { display: block; }
    .sidebar {
        position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(86vw, 340px); overflow-y: auto;
        transform: translateX(100%); transition: transform .2s ease; border-radius: 0; padding: 16px;
    }
    .sidebar.is-open { transform: none; box-shadow: -6px 0 30px rgba(0, 0, 0, .3); }
    .sidebar__close { display: block; margin-left: auto; border: 0; background: none; text-decoration: underline; }
    .filters-open { display: inline-flex; margin-bottom: 14px; }
    .grid, .grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .card { padding-bottom: 12px; }
    .card__image { height: 170px; padding: 10px 10px 0; }
    .card__info { padding: 10px 10px 8px; }
    .card__extra { padding: 0 10px 4px; }
    .stickers { top: 10px; left: 10px; }
    .card__gift { left: 10px; }
    .card .btn--buy { height: 32px; min-height: 32px; padding: 0 12px; }
    .info-layout { grid-template-columns: minmax(0, 1fr); }
    .auth, .account, .account__forms { grid-template-columns: minmax(0, 1fr); }
    .auth-page { padding-bottom: 32px; }
    .auth-page .auth { margin-top: 8px; }
    .auth-page .auth__box { padding: 26px 18px 24px; }
    .auth__perks { gap: 14px; }
    .account__nav { flex-direction: row; flex-wrap: wrap; }
    .info-sidebar { order: 2; border-top: 1px solid var(--line); padding-top: 16px; }
    .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .card__title { font-size: 14px; }
    .btn--buy { font-size: 15px; padding: 0 14px; min-height: 34px; }

    /* Сторінка товару на телефоні — окремим блоком «Сторінка товару на телефоні» нижче. */

    .benefits__list { grid-template-columns: 1fr 1fr; }
    .benefits__icon svg { width: 44px; height: 44px; }
    /* Телефон: гортається пальцем, третя плитка визирає з краю, як у «Знижках». */
    .front-brands__list { grid-auto-columns: 44%; gap: 10px; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
    .front-brands__tile { height: 78px; padding: 14px 16px; }
    .footer__columns { grid-template-columns: 1fr 1fr; }
    .modal { padding: 0; }
    .modal__dialog { min-height: 100%; padding: 16px 16px 24px; }
    .cart-popup__title { font-size: 24px; margin-top: 0; }
    .cart-popup__head { display: none; }
    .cart-popup__row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img info remove" "img qty sum"; gap: 8px 12px; padding: 12px; }
    .cart-popup__image { grid-area: img; }
    .cart-popup__image img { width: 64px; height: 64px; }
    .cart-popup__info { grid-area: info; }
    .cart-popup__qty { grid-area: qty; justify-self: start; }
    .cart-popup__sum { grid-area: sum; }
    .cart-popup__remove { grid-area: remove; align-self: start; }
    .cart-popup__promo { padding: 12px; }
    .cart-popup__actions { flex-direction: column-reverse; align-items: stretch; }
    .cart-popup__actions .btn { width: 100%; }
    .cart-popup__back { justify-content: center; font-size: 15px; }
    .rec__track { grid-auto-columns: 42%; }
    .rec__arrow { display: none; }
    .contacts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .contacts__map iframe { height: 320px; }
    .checkout, .order { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .checkout__side { position: static; }
    .checkout__fields, .checkout__sub { grid-template-columns: minmax(0, 1fr); }
    .orders__row { grid-template-columns: auto 1fr auto; grid-template-areas: "number date sum" "items items state"; gap: 4px 12px; }
    .orders__number { grid-area: number; }
    .orders__date { grid-area: date; }
    .orders__items { grid-area: items; }
    .orders__sum { grid-area: sum; }
    .orders__state { grid-area: state; }
    .tg-invite { flex-direction: column; align-items: stretch; }
    .bonus-history__row { grid-template-columns: auto 1fr; grid-template-areas: "date sum" "what what"; gap: 4px 12px; }
    .bonus-history__date { grid-area: date; }
    .bonus-history__what { grid-area: what; }
    .bonus-history__sum { grid-area: sum; }
    .cart__row { grid-template-columns: 64px 1fr auto; grid-template-areas: "img name remove" "img price sum" "img qty qty"; }
    .cart__image { grid-area: img; }
    .cart__name { grid-area: name; }
    .cart__price { grid-area: price; }
    .cart__sum { grid-area: sum; }
    .cart__row .qty { grid-area: qty; justify-self: start; }
    .cart__row .cart-gift__qty { grid-area: qty; justify-self: start; }
    .cart__remove { grid-area: remove; }
}

/* Лише адміну: «Чернетка» й «Змінити в адмінці» над заголовком сторінки чи статті. */
.admin-edit {
    display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 8px 0 12px; padding: 8px 12px;
    border: 1px dashed #c9cdd3; border-radius: 6px; background: #f8f9fb; color: #555; font-size: 13px;
}
.admin-edit--draft { border-color: #ffb27f; background: #fff4ec; color: #8a3b00; }
.admin-edit a { font-weight: 700; }

/* ── Мобільне меню — як у мобільній версії Хорошопа ─────────────────── */
/* Розміри зняті з неї (телефон 375 px): панель на всю висоту без 40 px праворуч,
   рядки 18/24 з відступом 56 px під значок, «Каталог» — 22 px, роздільники
   rgba(0,0,0,.2). Панелі — шарами: поточна на місці, пройдені зсунуті вліво. */

.mnav { display: none; }

@media (max-width: 860px) {
    .mnav {
        display: block; position: fixed; inset: 0 auto 0 0; z-index: 90; width: calc(100% - 40px); max-width: 420px;
        overflow: hidden; background: #fff; color: var(--text);
        transform: translateX(-100%); visibility: hidden; transition: transform .4s ease, visibility 0s .4s;
    }
    .mnav.is-open { transform: none; visibility: visible; transition: transform .4s ease; }
    .mnav__panel {
        position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff;
        transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
        scrollbar-width: none;
    }
    .mnav__panel::-webkit-scrollbar { display: none; }
    .mnav__panel.is-current { transform: none; visibility: visible; transition: transform .3s ease; }
    .mnav__panel.is-behind { transform: translateX(-30%); }

    .mnav__bar {
        position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        height: 48px; padding: 0 48px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .2);
    }
    .mnav__back {
        position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--text);
    }
    .mnav__back .icon { width: 16px; height: 16px; }
    .mnav__title {
        display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 18px; line-height: 20px; color: #000;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mnav__title--brand { font-weight: 700; }
    .mnav__title-icon { width: 10px; height: 10px; transform: scaleX(-1); }

    .mnav__section { position: relative; margin: 0; padding: 8px 0; }
    .mnav__section + .mnav__section { border-top: 1px solid rgba(0, 0, 0, .2); }
    .mnav__list { list-style: none; }
    .mnav__list--panel { margin: 0; padding: 8px 0; }

    .mnav__link {
        position: relative; display: flex; align-items: center; width: 100%; min-height: 42px; padding: 8px 40px 8px 56px;
        border: 0; background: none; font: inherit; font-size: 18px; line-height: 24px; color: var(--text);
        text-align: left; cursor: pointer;
    }
    .mnav__link:hover { color: var(--text); }
    /* Один лівий край (крок 230): розділи, підрозділи, сторінки, поле пошуку й соцмережі — на 16 px, де й значки входу,
       телефонів і мови; текст при значку — на 56 px. */
    .mnav__list--panel .mnav__link { min-height: 48px; padding-left: 16px; }
    .mnav__list--pages .mnav__link { padding-left: 16px; }
    /* Розділи каталогу — одразу першим списком (крок 228): без відступу під значок, як у панелях. */
    .mnav__list--catalog .mnav__link { min-height: 48px; padding-left: 16px; font-weight: 500; }
    /* Пошук розділу (крок 230): поле над розділами; знайдене — назва й під нею шлях. */
    .mnav__find { position: relative; margin: 12px 16px 4px; }
    .mnav__find-icon { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #8a8a8a; pointer-events: none; }
    .mnav__find-input { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid #d3d3d3; border-radius: 21px; background: #f5f5f5; font: inherit; font-size: 16px; color: var(--text); }
    .mnav__find-input:focus { outline: none; border-color: var(--accent); background: #fff; }
    .mnav__found .mnav__link { flex-direction: column; align-items: flex-start; justify-content: center; }
    .mnav__found-path { font-size: 13px; line-height: 16px; font-weight: 400; color: #8a8a8a; }
    .mnav__found-empty { padding: 12px 16px; color: #8a8a8a; font-size: 15px; }
    .mnav__icon { position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; color: var(--text); }
    .mnav__icon--top { top: 13px; margin-top: 0; }
    .mnav__next { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; transform: scaleX(-1); }

    .mnav__row { padding: 8px 16px 8px 56px; }
    .mnav__button {
        display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid #cbcbcb;
        border-radius: 8px; background: #fff; font-size: 16px; line-height: 24px; color: #000;
    }
    .mnav__button:hover { color: #000; border-color: #a2a2a2; }

    .mnav__caption {
        margin: 8px 0; padding: 0 16px 0 56px; font-size: 13px; font-weight: 700; line-height: 18px;
        letter-spacing: .05em; text-transform: uppercase; color: #acacac;
    }
    .mnav__langs { display: flex; gap: 16px; margin: 8px 0; padding: 0 16px 0 56px; font-size: 18px; line-height: 26px; text-transform: uppercase; }
    .mnav__langs a { color: var(--text); }
    .mnav__langs .is-active { font-weight: 700; color: #000; }

    .mnav__section--social { padding-bottom: 32px; }
    .mnav__socials { display: flex; gap: 16px; padding: 0 16px; }
    .mnav__section--social .mnav__caption { padding-left: 16px; }
    .mnav__social { display: flex; }
    .mnav__social .icon { width: 32px; height: 32px; }
    .mnav__social--instagram { color: #bc2a8d; }
    .mnav__social--tiktok { color: #090909; }
    .mnav__social--telegram { color: #0088cc; }
    .mnav__social--viber { color: #675dac; }
}

/* ── Сторінка товару на телефоні — як мобільна версія Хорошопа ─────── */
/* «Разом дешевше» під «До обраного» (крок 98). Крок 99 — як «Купуйте разом з» на iHerb: одна пара на картці —
   два фото з «+» і зірками під ними, «Купуйте разом з:» і назва партнера, ціна разом, «Додати обидва в кошик»;
   інші пари — стрілками по боках картки, по колу. */
.bundles { margin-top: 16px; padding: 14px 14px 16px; border: 1px solid #d7d7d7; border-radius: 6px; background: #fff; }
.bundles__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bundles__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.bundles__count { flex: none; font-size: 12px; color: #6a6a6a; }
.bundles__note { margin: 2px 0 12px; font-size: 12px; line-height: 1.35; color: #6a6a6a; }
.bundles__track { position: relative; display: flow-root; }
/* Усі пари — в одній клітинці: висота за найвищою, при перемиканні під блоком нічого не стрибає; що
   виїхало за край — не видно (3 px запасу — під рамку фокуса кнопки). */
.bundles__slides { display: grid; overflow: hidden; margin: -3px; padding: 3px; }
.bundle { display: flex; flex-direction: column; grid-area: 1 / 1; text-align: center; transition: visibility 0s .3s; }
.bundle.is-current { z-index: 1; transition: none; }
.bundle:not(.is-current) { visibility: hidden; pointer-events: none; }
/* Перемикання: змінюється лише партнер — його фото (ще й трохи збільшується), назва, ціна. Стара пара
   швидко гасне й їде в інший бік, нова слідом заїжджає з боку стрілки, одне за одним; накладаються вони
   лише на мить, текст не двоїться. Свій товар, «+» і кнопка однакові в усіх парах — стоять на місці.
   Зсув (--bundle-x) ставить скрипт. */
.bundle__pair > :last-child, .bundle__with, .bundle__prices { transition: opacity .35s ease .08s, transform .4s cubic-bezier(.22, .61, .36, 1) .08s; }
.bundle:not(.is-current) :is(.bundle__pair > :last-child, .bundle__with, .bundle__prices) { opacity: 0; transform: translateX(var(--bundle-x, 0)); transition: opacity .2s ease, transform .3s ease-in; }
.bundle:not(.is-current) .bundle__pair > :last-child { transform: translateX(var(--bundle-x, 0)) scale(.92); }
.bundle.is-current > .bundle__with { transition-delay: .13s; }
.bundle.is-current > .bundle__prices { transition-delay: .18s; }
.bundle.is-instant :is(.bundle__pair > :last-child, .bundle__with, .bundle__prices) { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .bundle:not(.is-current) :is(.bundle__pair > :last-child, .bundle__with, .bundle__prices) { transform: none; }
}
.bundle__pair { display: flex; align-items: flex-start; justify-content: center; gap: 4px; }
.bundle__item { display: flex; flex-direction: column; align-items: center; width: 110px; }
.bundle__image { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; }
.bundle__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bundle__plus { width: 16px; margin-top: 34px; font-size: 20px; line-height: 22px; font-weight: 700; color: #8a8a8a; }
.bundle__rating { display: flex; align-items: center; height: 18px; margin-top: 6px; font-size: 12px; color: var(--blue); }
.bundle__rating .product-rating__stars { top: 0; margin-right: 5px; }
.bundle__rating:hover .bundle__reviews { text-decoration: underline; }
.bundle__with { margin-top: 10px; font-size: 13px; line-height: 17px; }
.bundle__with b { display: block; }
.bundle__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--blue); }
.bundle__name:hover { text-decoration: underline; }
.bundle__prices { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; margin: 10px 0 12px; font-size: 13px; }
.bundle__label { font-weight: 700; }
.bundle__old { color: #8a8a8a; }
.bundle__new { color: var(--red); font-size: 16px; font-weight: 700; }
.bundle__badge { padding: 1px 5px; border-radius: 3px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
/* Кнопка — донизу картки: у пар з довшою назвою вона на тому ж місці. */
.bundle__buy { width: 100%; min-height: 38px; margin-top: auto; padding: 0 12px; font-size: 15px; }
/* Стрілки — навпіл за краєм картки (14 px відступу + половина стрілки), на рівні фото. */
.bundles__nav {
    position: absolute; top: 30px; z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 1px solid #cbcbcb; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: pointer;
}
.bundles__nav:hover { border-color: var(--accent); }
.bundles__nav::before { content: ""; width: 7px; height: 7px; border-top: 2px solid #333; border-right: 2px solid #333; }
.bundles__nav--prev { left: -29px; }
.bundles__nav--prev::before { transform: translateX(2px) rotate(-135deg); }
.bundles__nav--next { right: -29px; }
.bundles__nav--next::before { transform: translateX(-2px) rotate(45deg); }

/* Розміри зняті з неї (телефон 375 px). Колонки «розчиняються», блоки стають у її порядку. */

@media (max-width: 860px) {
    /* Крок 156: одна колонка на всю сторінку товару — і блоки з-під колонок (відгуки, «Дивіться також»,
       «Переглянуті») стають у спільний порядок: головне про товар, «Основна інформація», «Опис» і «Склад»,
       комплекти «Разом дешевше», відгуки, далі «Часто купують разом», «Дивіться також», «Переглянуті товари». */
    .wrap.product { display: flex; flex-direction: column; }
    .product__layout { display: contents; }
    .product__left, .product__right, .product__aside { display: contents; }
    .product__top { display: contents; }
    .product__right > .crumbs { order: 1; }
    .product__title { order: 2; }
    .product__meta { order: 3; }
    .gallery { order: 4; }
    .product__price { order: 5; display: none; }
    .modifications { order: 6; }
    .product__buy { order: 7; }
    .countdown { order: 8; }
    .product__fav { order: 9; }
    .bundles { order: 11; margin: 0 0 32px; }
    /* Картка на всю ширину, до краю екрана 16 px — стрілки всередині, обабіч фото. */
    .bundles__nav--prev { left: -6px; }
    .bundles__nav--next { right: -6px; }
    .related--together { order: 13; }
    .product__description { order: 10; }
    .product__info { order: 11; }
    .product-reviews { order: 12; }
    .related--similar { order: 14; }
    .related--accessories { order: 15; }
    .related--seen { order: 16; }
    .product__short { order: 3; margin: -8px 0 16px; }
    .countdown { flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 0; padding: 12px 16px; }
    .countdown__text { text-align: center; }
    .product-gift { order: 5; display: block; margin: 0 0 15px; padding: 0; border: 0; }
    .product-gift__header {
        display: inline-block; margin: 0 0 -8px; padding: 4px 10px 12px; border-radius: 8px 8px 0 0;
        background: #df591d; color: #fff; font-size: 13px; line-height: 18.6px;
    }
    .product-gift__body {
        position: relative; display: flex; align-items: center; padding: 10px;
        border: 1px solid #df591d; border-radius: 8px; background: #fff;
    }
    .product-gift__content { display: block; min-width: 0; }
    .product-gift__image { flex: none; width: 80px; height: 70px; padding-right: 10px; }
    .product-gift__image img { width: 70px; height: 70px; }
    .product-gift__title, .product-gift__prices { margin-left: 0; font-size: 14px; line-height: 20px; }

    /* Крихти — один рядок, що гортається; «Головна» — значком. */
    .crumbs { margin: 8px -16px 0 0; padding-bottom: 8px; font-size: 14px; line-height: 16px; color: #acacac; }
    .product__right .crumbs { margin-top: 8px; }
    .crumbs ol { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-right: 16px; white-space: nowrap; scrollbar-width: none; }
    .crumbs ol::-webkit-scrollbar { display: none; }
    .crumbs li { display: flex; align-items: center; flex: none; }
    .crumbs li + li::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border: solid #acacac; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
    .crumbs a { color: #000; }
    .crumbs__home { display: block; width: 16px; height: 16px; fill: #acacac; }
    .crumbs__home-text { display: none; }

    .product__title { margin: 4px 0 0; font-size: 24px; font-weight: 400; line-height: 1.2; }
    .product__meta { align-items: center; gap: 4px 12px; margin: 8px 0 16px; font-size: 14px; line-height: 20px; color: #000; }
    .product__meta .presence, .product__brand { display: none; }
    .product__sku-name { color: #acacac; }
    .product-rating__stars { margin-right: 12px; }
    .product-rating__link { font-size: 14px; border-bottom: 0; }

    /* Фото на всю ширину гортаються пальцем; під ними крапки. */
    .gallery { margin: 0 -16px 24px; }
    .gallery__main { display: block; aspect-ratio: auto; max-height: none; }
    .gallery__track { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .gallery__track::-webkit-scrollbar { display: none; }
    .gallery__slide { display: flex; height: 70vw; max-height: 420px; scroll-snap-align: center; }
    .gallery__thumbs { display: none; }
    .gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
    .gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: #acacac; }
    .gallery__dot.is-active { background: #000; }
    .gallery .stickers { top: 0; left: 16px; }
    .gallery .sticker { padding: 4px 8px; font-size: 10px; line-height: 10px; }

    /* Смаки — кнопки по 40 px. */
    .modifications { margin-bottom: 24px; }
    .modifications__title { margin-bottom: 8px; font-size: 15px; line-height: 21px; }
    .modifications__list { gap: 8px; }
    .chip { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-color: #cbcbcb; border-radius: 8px; font-size: 16px; color: #000; }
    .chip.is-active { background: #090909; border-color: #090909; color: #fff; }

    /* Сірий блок покупки на всю ширину. */
    .product__buy { margin: 0 -16px; padding: 16px; background: #f2f2f2; }
    .product__buy-presence {
        display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px;
        border-radius: 13px; background: #eaf4dc; color: var(--green-text); font-size: 13px; font-weight: 700;
    }
    .product__buy-presence::before { content: "✓"; }
    .product__buy-presence.is-out { background: #fbe9e7; color: var(--red); }
    .product__buy-presence.is-out::before { content: none; }
    .product__buy-price { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 16px; }
    .product__buy-price .product__current { font-size: 28px; line-height: 40px; }
    /* Безкоштовна доставка — під ціною, як на iHerb (крок 154): жирним, з «i», що на дотик показує умову. */
    .product__delivery { display: flex; align-items: center; gap: 6px; margin: -8px 0 14px; font-size: 15px; line-height: 20px; font-weight: 700; color: #333; }
    .product__delivery .hint { font-size: 18px; }
    .product__buy .btn--big { display: flex; justify-content: center; width: 100%; height: 48px; min-height: 48px; border-radius: 8px; font-size: 18px; }
    .product__fav {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-bottom: 32px;
        border: 0; border-radius: 8px; background: none; font-size: 18px; color: #090909;
    }
    .product__fav .icon { width: 16px; height: 16px; }
    /* Серце контурне, у бажаннях — зафарбоване червоним (заливку бере символ i-heart-line). */
    .product__fav.is-on { --heart-fill: currentColor; color: var(--red); }
    .product__fav-on, .product__fav.is-on .product__fav-add { display: none; }
    .product__fav.is-on .product__fav-on { display: inline; }

    /* Опис і характеристики — підряд, кожен під своїм заголовком; відгуки — окремим блоком після «Дивіться також». */
    .product__description { margin-top: 0; }
    .product__description .tabs__head { display: none; }
    .product__description .tabs__pane { display: block; margin-bottom: 32px; padding: 0; }
    .product__heading { display: flex; align-items: center; margin-bottom: 16px; font-size: 18px; font-weight: 700; line-height: 22.5px; }
    .product__badge {
        min-width: 16px; height: 16px; margin-left: 8px; padding: 0 5px; border-radius: 16px;
        background: var(--accent); color: #fff; font-size: 11px; line-height: 16px; text-align: center;
    }
    .product-text__body { max-height: 300px; overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, .15); }
    .product-text.is-expanded .product-text__body, .product-text.is-short .product-text__body { max-height: none; border-bottom: 0; }
    .product-text__more {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px;
        border: 0; background: none; font-size: 18px; color: #090909;
    }
    .product-text__more[hidden] { display: none; }
    .product-text__more .icon { width: 16px; height: 16px; transform: scaleX(-1); }
    .product-text.is-expanded .product-text__more .icon { transform: rotate(90deg); }
    .product-text__more-close, .product-text.is-expanded .product-text__more-open { display: none; }
    .product-text.is-expanded .product-text__more-close { display: inline; }

    .product-reviews { margin: 0 0 32px; }
    .product-reviews .reviews > .review { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }
    .product-reviews .review { padding-left: 40px; }
    .product-reviews .review__avatar, .product-reviews .review__avatar img, .product-reviews .review__avatar .icon { top: 0; width: 32px; height: 32px; }
    .product-reviews .review__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0 0 4px; }
    .product-reviews .review__author { flex-basis: 100%; margin-bottom: 4px; line-height: 14px; }
    .product-reviews .review__date { margin-left: 0; }
    .product-reviews .stars { margin-left: 0; }
    .product-reviews__add {
        display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 8px;
        border-radius: 8px; background: var(--accent); color: #fff; font-size: 18px;
    }
    .product-reviews__add:hover { color: #fff; }
    /* Форма відгуку — панель на весь екран, як «Новий відгук» на Хорошопі. */
    .review-panel {
        position: fixed; inset: 0; z-index: 95; overflow-y: auto; background: #fff;
        transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
    }
    .review-panel.is-open, .review-panel:target { transform: none; visibility: visible; transition: transform .3s ease; }
    .review-panel__head {
        position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; height: 48px;
        padding: 0 48px; border-bottom: 1px solid rgba(0, 0, 0, .2); background: #fff; font-size: 18px; color: #000;
    }
    .review-panel__close { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--text); font-size: 16px; }
    .review-panel .p-review-add { margin: 0; padding: 16px; border-top: 0; }
    .review-panel .p-review-add__heading { display: none; }

    /* Доставка, оплата, консультація — на телефоні теж прибрано, як на комп'ютері (крок 53):
       блок займав майже екран під характеристиками, а безкоштовна доставка й так
       написана в блоці покупки. */
    .product__info { display: none; }

    .related { margin: 0 0 32px; }
    .related__title { font-size: 18px; line-height: 22.5px; }
    /* scroll-padding — інакше прокрутка «прилипає» першою карткою до краю екрана. */
    .related__list { gap: 16px; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; scrollbar-width: none; }
    .related__list::-webkit-scrollbar { display: none; }
    .related__card { flex: 0 0 119px; width: 119px; }
    .related--seen { margin-top: 32px; }
    .related__title-wide { display: none; }
    .related__title-narrow { display: inline; }
}

/* «Мої замовлення» й замовлення в кабінеті — як у Хорошопа (крок 107): картки з рамкою, стан кольоровим
   значком, «Оплатити замовлення» посиланням; на сторінці замовлення — оплата вгорі, дані рядками, склад у рамці. */
.my-orders { display: flex; flex-direction: column; gap: 10px; }
.my-order { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) auto; gap: 14px 28px; padding: 16px 18px; border: 1px solid #d7d7d7; border-radius: 4px; background: #fff; }
.my-order__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.my-order__number { border-bottom: 1px solid #b9b9b9; color: var(--text); font-size: 16px; text-decoration: none; }
.my-order__number:hover { border-bottom-color: var(--accent); color: var(--accent); }
.my-order__date { margin-top: 6px; color: #9a9a9a; font-size: 13px; }
.my-order__pay { margin-top: 6px; }
.my-order__pay .link-button { border-bottom: 1px solid #b9b9b9; color: var(--text); font-size: 13px; text-decoration: none; cursor: pointer; }
.my-order__pay .link-button:hover { border-bottom-color: var(--accent); color: var(--accent); }
.my-order__label { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.my-order__item { font-size: 13px; line-height: 1.5; }
.my-order__sum { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.my-orders__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid #d7d7d7; border-radius: 4px; font-size: 14px; }
.my-orders__total b { font-size: 18px; }
.order-status { display: inline-block; padding: 0 6px; border-radius: 3px; background: #2f80ed; color: #fff; font-size: 12px; line-height: 18px; white-space: nowrap; }
.order-status--processing { background: #f2994a; }
.order-status--shipping { background: #9b51e0; }
.order-status--done { background: #27ae60; }
.order-status--cancelled { background: #9a9a9a; }
/* «Мої відгуки» (крок 119): товар чи магазин, дата, оцінка, стан, текст, відповідь магазину. */
.my-reviews { display: flex; flex-direction: column; gap: 10px; }
.my-review { padding: 16px 18px; border: 1px solid #d7d7d7; border-radius: 4px; background: #fff; }
.my-review__what { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.my-review__what img { flex: none; width: 48px; height: 48px; object-fit: contain; }
.my-review__icon {
    display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
    background: #fff; color: var(--accent); box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}
.my-review__icon .icon { width: 22px; height: 22px; }
.my-review__name { color: var(--text); font-size: 15px; font-weight: 700; }
a.my-review__name:hover { color: var(--accent); }
.my-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.my-review__head .stars { margin-left: 0; }
.my-review__head .stars__star { width: 14px; height: 14px; }
.my-review__date { color: #9a9a9a; font-size: 13px; }
.my-review__body { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.my-review__answer { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--accent); background: #f7f7f7; font-size: 14px; line-height: 1.5; }
/* Бонуси за відгуки (крок 121): правило над списком і «+50 бонусів» біля нагородженого відгуку. */
.my-reviews__bonus { margin: 0 0 14px; padding: 12px 16px; border: 1px solid #c9e3f4; border-radius: 4px; background: #f0f7fd; font-size: 14px; }
.my-review__reward { color: var(--accent); font-size: 13px; font-weight: 700; white-space: nowrap; }
.review-status { display: inline-block; padding: 0 6px; border-radius: 3px; color: #fff; font-size: 12px; line-height: 18px; white-space: nowrap; }
.review-status--published { background: #27ae60; }
.review-status--pending { background: #f2994a; }
.review-status--hidden { background: #9a9a9a; }
.my-order-page { max-width: 720px; padding: 26px 26px 30px; border: 1px solid #d7d7d7; border-radius: 4px; background: #fff; }
.my-order-page__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px; border: 1px solid #d7d7d7; border-radius: 4px; }
.my-order-page__pay-title { flex: 1; min-width: 160px; font-size: 15px; }
.my-order-page__pay-sum { font-size: 15px; white-space: nowrap; }
.my-order-page__pay form { margin: 0; }
.my-order-page__pay-btn { min-height: 38px; padding: 0 18px; font-size: 16px; }
.my-order-page__pay-note { margin: 8px 0 0; color: var(--red); font-size: 13px; }
/* Знак «plata by mono» — як у способі оплати на Хорошопі. */
.pay-mono { display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: #000; color: #fff; line-height: 1; }
.pay-mono b { font-size: 7px; font-weight: 700; letter-spacing: -.2px; }
.pay-mono small { font-size: 4px; }
.my-order-page__facts { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px 16px; margin: 28px 2px; font-size: 15px; }
.my-order-page__facts:first-child { margin-top: 0; }
.my-order-page__facts dt { color: #9a9a9a; }
.my-order-page__facts dd { margin: 0; overflow-wrap: anywhere; }
.my-order-page__box { border: 1px solid #d7d7d7; border-radius: 4px; }
.my-order-page__box-title { padding: 16px 18px; border-bottom: 1px solid #d7d7d7; font-size: 17px; font-weight: 700; }
.my-order-page__item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #d7d7d7; }
.my-order-page__item img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.my-order-page__item-name { border-bottom: 1px solid #b9b9b9; color: var(--text); font-size: 14px; text-decoration: none; }
a.my-order-page__item-name:hover { border-bottom-color: var(--accent); color: var(--accent); }
.my-order-page__item-price { margin-top: 6px; font-size: 13px; }
.my-order-page__item-price b { margin-left: 8px; }
.my-order-page__row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #d7d7d7; font-size: 14px; }
.my-order-page__row--discount b { color: var(--accent); }
.my-order-page__total { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding: 14px 18px; font-size: 13px; }
.my-order-page__total b { font-size: 18px; }

@media (max-width: 860px) {
    .my-order { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 14px; }
    .my-order__head { grid-column: 1; grid-row: 1; }
    .my-order__sum { grid-column: 2; grid-row: 1; }
    .my-order__items { grid-column: 1 / -1; grid-row: 2; }
    .my-order-page { padding: 14px; }
    .my-order-page__pay form { flex-basis: 100%; }
    .my-order-page__pay-btn { width: 100%; }
    .my-order-page__facts { grid-template-columns: 120px minmax(0, 1fr); gap: 14px 12px; margin: 20px 0; font-size: 14px; }
    .my-order-page__item { padding: 12px; }
}

/* ── Відгуки на сторінці товару (крок 123, власниця: «гарніший», як на iHerb) ──────────────────────────
   Зведення: середня оцінка, скільки яких зірок, «Написати відгук» (без напису про бонуси — крок 125); фото покупців стрічкою; відгуки —
   картками з першою літерою імені й фото; відповіді — всередині картки; фото — на весь екран у вікні.
   Наприкінці файлу: правила кроку 54 для телефона (вище) тут перекриваються. */
.reviews-summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
    margin-bottom: 24px; padding: 22px 26px; border: 1px solid #ececec; border-radius: 12px; background: #fafafa;
}
.reviews-summary--empty { grid-template-columns: minmax(0, 1fr); }
.reviews-summary__score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; }
.reviews-summary__avg { color: #111; font-size: 44px; font-weight: 700; line-height: 1; }
.reviews-summary__score .stars { gap: 3px; margin-left: 0; }
.reviews-summary__score .stars__star { width: 18px; height: 18px; }
.reviews-summary__count { color: #707070; font-size: 13px; }
.reviews-summary__bars { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.reviews-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 10px; color: #555; font-size: 13px; }
.reviews-bar__label { display: inline-flex; align-items: center; gap: 3px; }
.reviews-bar__label .icon { width: 12px; height: 12px; fill: var(--accent); }
.reviews-bar__track { height: 8px; overflow: hidden; border-radius: 4px; background: #e6e6e6; }
.reviews-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.reviews-bar__count { color: #8a8a8a; text-align: right; }
.reviews-summary__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.reviews-summary--empty .reviews-summary__cta { align-items: flex-start; text-align: left; }
.reviews-summary__ask { color: #111; font-size: 15px; font-weight: 700; }
.reviews-summary .product-reviews__add {
    display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 44px; margin: 0; padding: 0 24px;
    border-radius: 8px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700;
}
.reviews-summary .product-reviews__add:hover { background: var(--accent-dark); color: #fff; }

.reviews-photos { margin-bottom: 24px; }
.reviews-photos__title { margin-bottom: 10px; color: #111; font-size: 15px; font-weight: 700; }
.reviews-photos__list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.reviews-photos__item, .review__photo { flex: none; overflow: hidden; padding: 0; border: 0; border-radius: 8px; background: #f2f2f2; cursor: zoom-in; }
.reviews-photos__item img { display: block; width: 96px; height: 96px; object-fit: cover; }
.reviews-photos__item:hover img, .review__photo:hover img { opacity: .85; }

.product-reviews .reviews > .review,
.product-reviews .reviews > .review:last-child {
    margin-bottom: 14px; padding: 18px 20px 18px 74px; border: 1px solid #ececec; border-radius: 12px; background: #fff;
}
.product-reviews .reviews > .review > .review__avatar { left: 20px; top: 18px; width: 40px; height: 40px; }
.review__initial {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: hsl(var(--hue, 20) 70% 92%); color: hsl(var(--hue, 20) 55% 35%); font-size: 17px; font-weight: 700;
}
.product-reviews .review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; }
.product-reviews .review__author { font-size: 15px; }
.product-reviews .review__date { margin-left: 0; }
.product-reviews .review__head .stars { margin-left: 0; }
.product-reviews .review__head .stars__star { width: 14px; height: 14px; }
.product-reviews .review__body { color: #222; font-size: 14px; line-height: 1.6; }
.review__photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.review__photo img { display: block; width: 88px; height: 88px; object-fit: cover; }
.product-reviews .review--reply { margin-top: 14px; padding: 12px 14px 12px 56px; border-left: 3px solid #e6e6e6; border-radius: 0 8px 8px 0; background: #fafafa; }
.product-reviews .review--reply > .review__avatar { left: 14px; top: 12px; width: 32px; height: 32px; }
.product-reviews .review--reply .review__initial { width: 32px; height: 32px; font-size: 14px; }
.product-reviews .review--reply .review__avatar .icon { width: 32px; height: 32px; }
.product-reviews .review--reply.review--admin { border-left-color: #48ab11; background: #f2f9ee; }

/* Фото у формі відгуку: мініатюри вибраних з × і «Додати фото». */
.p-review-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.p-review-photos__list { display: flex; flex-wrap: wrap; gap: 10px; }
.p-review-photos__list:empty { display: none; }
.p-review-photos__item { position: relative; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: #f2f2f2; }
.p-review-photos__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-review-photos__remove {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer;
}
.p-review-photos__add {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 72px; height: 72px; border: 1px dashed #b5b5b5; border-radius: 8px; color: #555; font-size: 11px; line-height: 1.2; text-align: center; cursor: pointer;
}
.p-review-photos__add:hover { border-color: var(--accent); color: var(--accent); }
.p-review-photos__add .icon { width: 22px; height: 22px; }
.p-review-photos__add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.p-review-photos__hint { flex-basis: 100%; color: #8a8a8a; font-size: 12px; }
/* «Ще N символів» під полем відгуку про товар (крок 134). */
.p-review-add__count { margin: -16px 0 16px; color: #8a8a8a; font-size: 12px; }

/* Фото на весь екран. */
.photo-dialog {
    width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: hidden;
    border: 0; border-radius: 12px; background: #111;
}
.photo-dialog[open] { display: flex; align-items: center; justify-content: center; }
.photo-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.photo-dialog__img { display: block; max-width: 100%; max-height: calc(100vh - 32px); margin: 0 auto; object-fit: contain; }
.photo-dialog__close, .photo-dialog__nav {
    position: absolute; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #000; cursor: pointer;
}
.photo-dialog__close { top: 10px; right: 10px; }
.photo-dialog__nav { top: 50%; transform: translateY(-50%); }
.photo-dialog__nav--prev { left: 10px; }
.photo-dialog__nav--next { right: 10px; }
.photo-dialog .icon { width: 22px; height: 22px; }

/* «Мої відгуки» (крок 123): фото, що лишились після перевірки. */
.my-review__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.my-review__photos img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }

@media (max-width: 860px) {
    .reviews-summary { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; padding: 16px; }
    .reviews-summary--empty { grid-template-columns: minmax(0, 1fr); }
    .reviews-summary__cta { grid-column: 1 / -1; }
    .reviews-summary__avg { font-size: 36px; }
    .reviews-summary .product-reviews__add { width: 100%; height: 48px; font-size: 18px; }
    .product-reviews .reviews > .review,
    .product-reviews .reviews > .review:last-child { padding: 14px 14px 14px 62px; }
    .product-reviews .reviews > .review > .review__avatar { left: 12px; top: 14px; }
    .product-reviews .review--reply { padding-left: 48px; }
    .product-reviews .review--reply > .review__avatar { left: 10px; }
    .review__photo img { width: 72px; height: 72px; }
}

/* ── Вкладка «Бонуси» (крок 127, власниця): угорі — число бонусів, далі рух «за що й скільки», внизу — «Як
   працюють бонуси» трьома картками. */
.bonus-total {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 28px; padding: 20px 24px;
    border: 1px solid #f3d3c0; border-radius: 12px; background: #fff7f2;
}
.bonus-total__label { flex-basis: 100%; color: #707070; font-size: 14px; }
.bonus-total__sum { color: var(--accent); font-size: 40px; font-weight: 700; line-height: 1.1; }
.bonus-total__unit { color: #555; font-size: 15px; }
/* Що згорить найближче (крок 128). */
.bonus-total__expire { flex-basis: 100%; margin-top: 6px; color: #b4520f; font-size: 13px; }
.bonus-title { margin: 0 0 12px; font-size: 18px; }
.bonus-history__row--head { padding: 0 0 8px; color: #8a8a8a; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.bonus-history__row--head span:last-child { text-align: right; }
.bonus-rules { margin-top: 36px; }
.bonus-rules__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bonus-rules__card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bonus-rules__card h3 { margin: 0 0 10px; font-size: 15px; }
.bonus-rules__card ul { margin: 0; padding-left: 18px; color: #333; font-size: 14px; line-height: 1.55; }
.bonus-rules__card li + li { margin-top: 6px; }
.bonus-rules__card b { color: var(--accent); }

@media (max-width: 860px) {
    .bonus-total { padding: 16px; }
    .bonus-total__sum { font-size: 34px; }
    /* Рядок на телефоні — дата й сума згори, «за що» під ними (крок 106); шапка таблиці там зайва. */
    .bonus-history__row--head { display: none; }
    .bonus-rules__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── «Особисті дані» (крок 130, власниця: «гарнішою, як розділ бонуси») ──────────────────────────────────
   Знижка — помаранчевою карткою зі шкалою до наступного рівня; особисті дані, адреса доставки й пароль — картками
   з заокругленими кутами. Наприкінці файлу — щоб перекрити загальні .auth__box і .loyalty вище. */
.loyalty { margin-bottom: 24px; padding: 20px 24px; border: 1px solid #f3d3c0; border-radius: 12px; background: #fff7f2; font-size: 14px; }
.loyalty__title { margin-bottom: 4px; color: #555; font-size: 15px; }
.loyalty__title b { color: var(--accent); font-size: 24px; font-weight: 700; }
.loyalty__bar { max-width: 520px; height: 8px; margin: 10px 0; overflow: hidden; border-radius: 4px; background: #f3d3c0; }
.loyalty__bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.account__forms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 940px; }
.account__forms .auth__box { padding: 22px 24px 24px; border: 1px solid #ececec; border-radius: 12px; background: #fff; }
.account__forms .auth__title { margin: 0 0 16px; font-size: 18px; text-align: left; }
.address-card__current { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: #f7f7f7; font-size: 14px; line-height: 1.45; }
.address-card__current b { font-size: 15px; }
.address-card__edit { margin-top: 14px; }
.address-card__toggle {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border: 1px solid var(--accent); border-radius: 8px;
    color: var(--accent); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer;
}
.address-card__toggle::-webkit-details-marker { display: none; }
.address-card__toggle:hover { background: var(--accent); color: #fff; }
.address-card__edit[open] > .address-card__toggle { display: none; }
.address-card__form .options { margin-top: 2px; }

@media (max-width: 860px) {
    .account__forms { grid-template-columns: minmax(0, 1fr); }
    .loyalty { padding: 16px; }
    .account__forms .auth__box { padding: 18px 16px 20px; }
}

/* ── Кабінет сучасніше (крок 136): заголовок напівжирний, меню з помаранчевим активним пунктом, у картках —
   вищі заокруглені поля й кнопки, фокус поля — помаранчевою рамкою. ─────────────────────────────────── */
.page--account h1 { font-weight: 500; letter-spacing: -.01em; }
.page--account .account__nav { gap: 2px; font-size: 15px; }
.page--account .account__nav a, .page--account .account__nav .link-button { padding: 10px 14px; border-radius: 10px; }
.page--account .account__nav a:hover { background: #f6f6f6; color: var(--ink); }
.page--account .account__nav a.is-active { background: #fff1e8; color: var(--accent); font-weight: 500; }
.page--account .loyalty { border-radius: 16px; }
.page--account .account__forms .auth__box { border-color: #eee; border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.page--account .account__forms .auth__title { font-weight: 500; }
.page--account .account__forms .field__label { margin-bottom: 6px; color: #555; font-weight: 500; }
.page--account .account__forms .field__input { border-color: #dcdcdc; border-radius: 10px; }
.page--account .account__forms .field__input:not(textarea) { height: 44px; padding: 0 14px; font-size: 15px; }
.page--account .account__forms .field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 92, 0, .15); }
.page--account .account__forms .btn { min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.page--account .address-card__current { border-radius: 12px; }
.page--account .profile-phone__value, .page--account .profile-phone__change { min-height: 44px; border-radius: 10px; }
.page--account .address-card__toggle { min-height: 44px; border-radius: 10px; }
/* Крок 181 (власниця: проміжок між картками): «Адреса доставки» — праворуч на два рядки, тож «Змінити пароль» стоїть
   одразу під «Особистими даними», а не чекає кінця високої адреси. На телефоні — одна колонка, як була. */
@media (min-width: 861px) {
    .account__forms > .address-card { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── «Мої відгуки»: товари для відгуку (крок 132, власниця: «як на iHerb») ─────────────────────────────
   Фото, назва й «Написати відгук» — під ним тут же розкривається форма: оцінка, текст, фото. */
.review-invites { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.review-invite { border: 1px solid #ececec; border-radius: 12px; background: #fff; }
.review-invite > summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; list-style: none; cursor: pointer; }
.review-invite > summary::-webkit-details-marker { display: none; }
.review-invite__img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.review-invite__name { flex: 1; min-width: 0; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.35; }
.review-invite__open {
    display: inline-flex; flex: none; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 8px;
    color: var(--accent); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.review-invite > summary:hover .review-invite__open { background: var(--accent); color: #fff; }
.review-invite[open] .review-invite__open { display: none; }
.review-invite .p-review-add { margin: 0; padding: 4px 16px 18px 94px; border-top: 0; }

@media (max-width: 860px) {
    .review-invite > summary { flex-wrap: wrap; }
    .review-invite__open { justify-content: center; width: 100%; }
    .review-invite .p-review-add { padding: 4px 16px 16px; }
}

/* «Термін придатності до» (крок 133) — під характеристиками, замість лічильника акції: та сама помаранчева
   рамка, але менша й без лічильника. На комп'ютері — у «Основній інформації», на телефоні — у «Характеристиках». */
.expiry {
    display: inline-block; margin-top: 18px; padding: 9px 16px;
    border: 1px solid #df591d; border-radius: 4px; color: #000; font-size: 15px; line-height: 21px;
}
.expiry__date { color: #df591d; }

/* Термін придатності в кошику (крок 135): під назвою — у вікні кошика й на оформленні. */
.cart-expiry { margin-top: 4px; color: #000; font-size: 13px; line-height: 18px; }
.cart-expiry b { color: #df591d; }
.cart__row > .cart-expiry { grid-column: 2 / -1; margin-top: -10px; }

/* Вікно «Акційний товар з коротким терміном придатності» перед кошиком (крок 135) — як вікно сертифіката. */
.expiry-warn { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.expiry-warn::backdrop { background: rgba(0, 0, 0, .55); }
.expiry-warn__box { position: relative; padding: 30px 28px 26px; text-align: center; }
.expiry-warn__close {
    position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; background: none; color: #000; cursor: pointer;
}
.expiry-warn__close .icon { width: 22px; height: 22px; }
.expiry-warn__title { margin: 0 24px 12px; color: #000; font-size: 20px; line-height: 1.3; font-weight: 700; }
.expiry-warn__text { margin: 0 0 22px; color: #222; font-size: 16px; line-height: 1.5; }
.expiry-warn__text b { color: #df591d; }
.expiry-warn__buy { width: 100%; }

/* ── Телефон: смаки й фасування картками, як на комп’ютері ── */
/* Досі на телефоні смаки були текстовими пігулками без фото, вибраний — чорний,
   а фасування ховались у дрібні пігулки біля кошика. На комп'ютері ті самі
   смаки — картки з фото банки, фасування — картки з ціною.

   Телефон тепер показує те саме, тільки стрічкою, що гортається вбік, — так
   робить iHerb: на вузькому екрані сім карток у сітку не влізуть, а стрічка
   нічого не обрізає й не розтягує сторінку вниз. */
@media (max-width: 860px) {
    .modifications__current { display: inline; }

    .modifications--flavors .modifications__list,
    .modifications--sizes .modifications__list {
        display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
        margin: 0 -16px; padding: 2px 16px 8px;
        scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        /* Без цього «прилипання» вирівнює першу картку по краю смуги, тобто
           впритул до краю екрана, а не по відступу сторінки. */
        scroll-padding-inline: 16px;
    }
    .modifications--flavors .modifications__list::-webkit-scrollbar,
    .modifications--sizes .modifications__list::-webkit-scrollbar { display: none; }

    /* Смак: фото зверху, назва під ним. */
    .modifications--flavors .modifications__list .chip {
        flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        gap: 6px; height: auto; min-height: 0; padding: 8px 6px;
        border: 1px solid #d3d3d3; border-radius: 8px; background: #fff; color: #000;
        font-size: 12px; line-height: 1.25; text-align: center; scroll-snap-align: start;
    }
    .modifications--flavors .modifications__list .chip__thumb { display: block; flex: none; width: 56px; height: 56px; object-fit: contain; }
    .modifications--flavors .modifications__list .chip__name { min-width: 0; overflow-wrap: anywhere; }

    /* Фасування: вага зверху, ціна жирно під нею. */
    .modifications--sizes { display: block; }
    .modifications--sizes .modifications__list .chip {
        flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 2px; height: auto; min-height: 0; padding: 8px 12px;
        border: 1px solid #d3d3d3; border-radius: 8px; background: #fff; color: #555;
        font-size: 13px; line-height: 1.2; scroll-snap-align: start;
    }
    .modifications--sizes .modifications__list .chip__price { margin: 0; color: #000; font-size: 14px; font-weight: 700; }
    .modifications--sizes .modifications__list .chip__note { margin: 0; }

    /* Вибране — біле з помаранчевою рамкою, як на комп'ютері, а не чорна пігулка. */
    .modifications .modifications__list .chip.is-active {
        border: 2px solid var(--accent); background: #fff; color: #000;
    }
    .modifications--flavors .modifications__list .chip.is-active { padding: 7px 5px; }
    .modifications--sizes .modifications__list .chip.is-active { padding: 7px 11px; }
    .modifications .modifications__list .chip.is-active .chip__price { color: #000; }

    /* Чого немає — сіре з рискою навскіс, як на комп'ютері. */
    .modifications .modifications__list .chip.chip--out {
        border-style: solid; border-color: #d9d9d9; color: #8a8a8a;
        background: linear-gradient(to top right, transparent calc(50% - .5px), #d9d9d9 calc(50% - .5px), #d9d9d9 calc(50% + .5px), transparent calc(50% + .5px)), #f5f5f5;
    }
    .modifications .modifications__list .chip.chip--out .chip__thumb { opacity: .45; }
    .modifications .modifications__list .chip.chip--out .chip__price { color: #8a8a8a; }
    .modifications .modifications__list .chip.chip--out.is-active { border-color: var(--accent); }

    /* Пігулки «Інші фасування» біля кошика більше не потрібні: фасування вже
       стоять картками одразу під смаками, як на комп'ютері. */
    .product__buy .size-options { display: none; }
}

/* ── Телефон: «Додати в кошик» закріплена внизу екрана, як на iHerb ── */
/* На iHerb кнопка купівлі на телефоні одна — внизу екрана, поруч з кількістю,
   і видна весь час, від першого екрана до відгуків. Так само й у нас: рядок
   «кількість + Додати в кошик» з блоку покупки прикріплено до низу екрана,
   а ціна лишається на своєму місці на сторінці.

   Це той самий рядок, що й на комп'ютері, а не копія: кількість, межа
   залишку й вікно про короткий термін придатності працюють як раніше. */
@media (max-width: 860px) {
    .product__buy .product__order--buy {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 43;
        display: flex; align-items: center; gap: 10px; margin: 0;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
    }
    .product__buy .product__order--buy .product__qty {
        display: inline-flex; flex: none; height: 48px; border-color: #c9c9c9; border-radius: 8px; overflow: hidden;
    }
    .product__order--buy .product__qty button { width: 36px; background: #f2f2f2; font-size: 20px; line-height: 1; }
    .product__order--buy .product__qty input { width: 40px; height: 46px; font-size: 16px; }
    .product__buy .product__order--buy .btn--big { flex: 1; min-width: 0; width: auto; padding: 0 12px; }
    /* «Більше немає в наявності» — плашкою над смугою, а не між кількістю й кнопкою. */
    .product__order--buy .qty-limit {
        position: absolute; left: 16px; right: 16px; bottom: 100%; margin: 0 0 8px; padding: 8px 12px;
        border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    }

    /* Кружечки чату, «нагору», підказка ШІ й сповіщення — над смугою, а не
       поверх кнопки купівлі. Висота смуги разом з відступами — 64 пікселі. */
    body.has-buybar .chat-widget,
    body.has-buybar .ai-chat { bottom: 84px; }
    body.has-buybar .ai-teaser { bottom: 86px; }
    body.has-buybar .up-button { bottom: 154px; }
    body.has-buybar .toast { bottom: 88px; }

    /* Кінець сторінки — над смугою, а не під нею: інакше останній рядок
       підвалу назавжди ховався б за кнопкою. */
    body.has-buybar { padding-bottom: 64px; }
}

/* ── Каталог на телефоні: картки сходяться по рядку ── */
/* На сенсорних екранах висота картки скидалась на auto (щоб «В бажання» стояло
   під карткою, а не випливало при наведенні). Через це картка не тягнулась на
   висоту ряду, і ціну з кнопкою «Купити» не було до чого притиснути донизу:
   у сусідніх колонках вони стояли на різній висоті, залежно від того, чи є
   в товару рейтинг і скільки рядків займає назва.

   Тепер картка — колонка на всю висоту ряду: назва й рейтинг зверху, ціна,
   кнопка й «В бажання» притиснуті донизу. Рядки в обох колонках сходяться. */
@media (hover: none) {
    .card { display: flex; flex-direction: column; }
    .card__box { display: flex; flex-direction: column; flex: 1; height: auto; }
    .card__main { flex: 1; height: auto; }
}
/* ── Каталог на телефоні: список, як на iHerb ── */
/* Досі на телефоні каталог був сіткою з двох вузьких карток: назва обрізалась
   на двох рядках, а кнопка «Купити» займала окремий рядок. Тепер — список, як
   на iHerb: фото ліворуч, під ним «+ Більше варіантів» (коли є інші смаки чи
   фасування), праворуч назва, «4,8 ★ (84)», ціна й кругла кнопка кошика.
   Те саме в пошуку й у «Бажаннях» — картка там та сама.

   На комп'ютері картка як була: ці частини там сховані. */
.card__more, .card__score, .card__star, .card__buy-icon { display: none; }
@media (max-width: 860px) {
    .grid, .grid--wide { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
    .card { display: block; padding: 0; border-bottom: 1px solid var(--line); }
    .card__box { display: block; height: auto; }
    .card__main {
        display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px;
        height: auto; padding: 16px 0; border: 0; border-radius: 0;
    }
    .card:hover .card__main { border-color: transparent; box-shadow: none; }
    .card__image { grid-column: 1; grid-row: 1; height: 110px; padding: 0; }
    .card__more {
        display: block; grid-column: 1; grid-row: 2; align-self: start; margin-top: 8px;
        color: var(--blue); font-size: 13px; line-height: 1.3; text-align: center; white-space: nowrap;
    }
    .card__info { grid-column: 2; grid-row: 1 / span 2; padding: 0; }
    .card__title { margin: 0 0 4px; font-size: 15px; line-height: 1.4; }
    .card__title a { -webkit-line-clamp: 3; }

    .card__rating { height: auto; gap: 4px; margin: 0 0 2px; color: #555; font-size: 14px; }
    .card__rating .product-rating__stars { display: none; }
    .card__score { display: inline; color: #333; }
    .card__star { display: inline-block; flex: none; width: 16px; height: 16px; fill: #f5a623; }
    .card__reviews::before { content: "("; }
    .card__reviews::after { content: ")"; }

    .card__purchase { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 8px; }
    .card__current { font-size: 19px; }
    .card__old { font-size: 13px; }
    .card__purchase .btn--buy {
        flex: none; width: 46px; height: 46px; min-height: 46px; padding: 0;
        border: 2px solid var(--accent); border-radius: 50%; background: #fff; color: var(--accent);
    }
    .card__purchase .btn--buy:hover, .card__purchase .btn--buy:active { background: var(--accent); color: #fff; }
    .card__buy-icon { display: block; width: 22px; height: 22px; fill: currentColor; }
    .card__buy-text { display: none; }

    /* «В бажання» — серце ліворуч від кошика, без підпису. */
    .card__extra { display: block; position: absolute; right: 58px; bottom: 28px; left: auto; top: auto; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
    .card--out .card__extra { right: 8px; }
    .card__wish .icon { font-size: 22px; }
    .card__wish-text { display: none; }

    /* Ярлики й «Подарунок» — менші, щоб не закривали все фото. */
    .stickers { top: 16px; left: 0; max-width: 120px; }
    .sticker { padding: 3px 7px 3px 5px; font-size: 10px; }
    .card__gift { left: 0; width: 42px; }
    .card__gift-head { padding: 0 0 1px; font-size: 9px; line-height: 12px; }
    .card__gift-body { height: 38px; }
    .card__image .card__gift img { width: 32px; height: 32px; }
}
/* Планшет: два стовпчики рядків — один на всю ширину був би надто розтягнутий. */
@media (min-width: 600px) and (max-width: 860px) {
    .grid, .grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

/* ── Телефон: «Основна інформація» й «Усі характеристики», як на комп’ютері ── */
/* Досі на телефоні під описом стояла вся таблиця характеристик підряд. Тепер —
   як на комп'ютері: чотири головні сіткою 2×2 (назва сірим, значення жирним),
   решта — під кнопкою «Усі характеристики», далі сертифікати й термін
   придатності. Блок стоїть одразу під «До обраного»: головне про товар видно,
   не гортаючи до опису.

   Стара вкладка «Характеристики» на телефоні схована (як і на комп'ютері),
   інакше те саме було б на сторінці двічі. */
@media (max-width: 860px) {
    .product__fav { order: 8; }
    .product-facts { display: block; order: 9; margin: 0 0 32px; padding: 16px 0 18px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
    .product-facts__title { margin: 0 0 12px; color: #000; font-size: 16px; line-height: 20.8px; font-weight: 700; }
    .product-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
    .product-facts__item dt { margin: 0 0 3px; color: #6f6f6f; font-size: 13px; line-height: 17px; }
    .product-facts__item dd { margin: 0; color: #000; font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
    .product-facts__item a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; }

    .product-side-features { display: block; margin-top: 16px; }
    .product-side-features:first-child { margin-top: 0; }
    .product-side-features__title {
        position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 36px 0 14px;
        border: 1px solid #b9b9b9; border-radius: 6px; color: #000; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none;
    }
    .product-side-features__title::-webkit-details-marker { display: none; }
    .product-side-features__title::after {
        content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
        border-right: 2px solid #000; border-bottom: 2px solid #000; transform: translateY(-70%) rotate(45deg);
    }
    .product-side-features[open] .product-side-features__title { margin-bottom: 14px; }
    .product-side-features[open] .product-side-features__title::after { transform: translateY(-20%) rotate(-135deg); }
    .product-side-features .features { width: 100%; font-size: 14px; line-height: 20px; }
    .product-side-features .features th { width: 45%; padding: 5px 16px 5px 0; color: #8a8a8a; font-weight: 400; text-align: left; vertical-align: top; }
    .product-side-features .features td { padding: 5px 0; vertical-align: top; overflow-wrap: anywhere; }

    .product .tabs__tab--phone, .product .tabs__pane--phone { display: none; }
}

/* ── Телефон: «Опис» і «Склад» — рядки, що розгортаються, як на iHerb ── */
/* Як «Огляд» і «Поживна цінність» на iHerb: два рядки на всю ширину з галочкою
   праворуч; натиск розгортає весь текст. «Опис» — лише текст, «Склад» —
   таблиця й під нею «Інші інгредієнти» (з опису вони тоді сховані). */
@media (max-width: 860px) {
    .product__description .product-acc { margin: 0; border-bottom: 1px solid #e4e4e4; }
    .product__description .product-acc:first-child { border-top: 1px solid #e4e4e4; }
    .product__description .tabs__body { margin-bottom: 32px; }
    .product__description .tabs__pane:not(.product-acc) { margin: 24px 0 0; }
    .product__heading--acc {
        position: relative; display: flex; align-items: center; width: 100%; min-height: 60px; margin: 0; padding: 0 36px 0 0;
        border: 0; background: none; color: #222; font: inherit; font-size: 18px; font-weight: 700; line-height: 22.5px; text-align: left; cursor: pointer;
    }
    .product__heading--acc::after {
        content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
        border-right: 2px solid #222; border-bottom: 2px solid #222; transform: translateY(-70%) rotate(45deg);
    }
    .product-acc.is-open .product__heading--acc::after { transform: translateY(-20%) rotate(-135deg); }
    .product-acc > .product-text__body, .product-acc > .product-text__more { display: none; }
    .product-acc.is-open > .product-text__body { display: block; max-height: none; padding: 0 0 20px; border-bottom: 0; }

    /* В «Описі» — без таблиці складу й «Інших інгредієнтів»: вони в «Складі». */
    .product-text__body--split .product-text__facts,
    .product-text__body--own .product-text__after,
    .product-text__body .product-text__other { display: none; }

    /* Таблиця складу — як на комп'ютері: підпис на сірому, рамка, рядки через тонку лінію. */
    .tabs__pane--composition .product-text__facts { margin: 0; font-size: 14px; line-height: 1.45; overflow-x: auto; }
    .tabs__pane--composition .product-text__facts > p:first-child {
        margin: 0; padding: 10px 12px; border: 1px solid #e4e4e4; border-bottom: 0; background: #f7f7f7; font-size: 15px;
    }
    .tabs__pane--composition .product-text__facts table { width: 100% !important; border: 1px solid #e4e4e4; border-collapse: collapse; }
    .tabs__pane--composition .product-text__facts th,
    .tabs__pane--composition .product-text__facts td { width: auto; padding: 7px 10px; border-top: 1px solid #e4e4e4; text-align: left; vertical-align: top; }
    .tabs__pane--composition .product-text__facts td + td,
    .tabs__pane--composition .product-text__facts th + th { overflow-wrap: normal; }
    .tabs__pane--composition .product-text__facts table + p,
    .tabs__pane--composition .product-text__facts table + table { margin-top: 10px; }
    /* Склад текстом (крок 158) — теж рамкою, рядки через тонку лінію; підпис «Склад» тут знято (є заголовок блоку). */
    .tabs__pane--composition .product-text__facts--text { border: 1px solid #e4e4e4; }
    .tabs__pane--composition .product-text__facts.product-text__facts--text > *,
    .tabs__pane--composition .product-text__facts.product-text__facts--text ul li {
        margin: 0; padding: 7px 10px; border: 0; border-top: 1px solid #e4e4e4; background: none; font-size: inherit;
    }
    .tabs__pane--composition .product-text__facts.product-text__facts--text > :first-child,
    .tabs__pane--composition .product-text__facts.product-text__facts--text > ul:first-child > li:first-child { border-top: 0; }
    .tabs__pane--composition .product-text__facts.product-text__facts--text > ul { padding: 0; border-top: 0; }
    .tabs__pane--composition .product-text__facts.product-text__facts--text > p:first-child { border: 0; background: none; font-size: inherit; }
    .tabs__pane--composition .product-text__facts.product-text__facts--text ul li::before { content: none; }
    .tabs__pane--composition .product-text__facts--text > p:has(+ ul) { font-weight: 700; }
    .tabs__pane--composition .product-text__facts.product-text__facts--text > table { padding: 0; border: 0 !important; }
    .product-text__ingredients { margin-top: 16px; }
    .product-text__ingredients:first-child { margin-top: 0; }
}
/* «Інші інгредієнти» в обгортці: на комп'ютері відступ під ними — як під будь-яким абзацом опису. */
.product-text__other:not(:last-child) > :last-child { margin-bottom: .6em; }

/* ── Шапка: темна стіна з графіті замість суцільної чорної смуги ── */
/* Банки протеїну, капсули, шейкер, мірна ложка з порошком, гантель, тег з
   патьоками й плями з балончика — сіре на майже чорному, трохи помаранчевого.
   Малюнок приглушений: логотип, пошук і телефони читаються, як і раніше.
   Плитка 560×120 повторюється вбік, предмети — в середній смузі, тож у шапці
   76 px на комп'ютері нічого не обрізається (public/img/header-graffiti.svg;
   змінили малюнок — підняти ?v=, інакше браузери покажуть старий). */
.header__middle { background: #0e0e0e url("/img/header-graffiti.svg?v=2") 50% 50% / 560px 120px repeat-x; }
@media (max-width: 860px) {
    /* Від лівого краю: під кнопкою меню й логотипом — сірі ложка, таблетки й гантель,
       а не помаранчева капсула (однаково на будь-якій ширині телефона). */
    .header__middle { background-position: -280px 50%; }
}
/* Телефони, «Вхід», «Бажання», «Мій кошик» — темними плашками з рамкою поверх графіті,
   іконки помаранчеві (як у телефону): на малюнку вони не губляться. Рамка
   підсвічується помаранчевим при наведенні. Телефон — лише значки, як і було. */
@media (min-width: 861px) {
    .header__middle-row { gap: 14px; }
    .phones, .head-action, .cart-link {
        padding: 6px 14px; border: 1px solid #303030; border-radius: 12px;
        background: rgba(8, 8, 8, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    }
    .head-action, .cart-link { min-height: 46px; }
    .phones:hover, .head-action:hover, .cart-link:hover { border-color: var(--accent); }
    .head-action .icon, .cart-link__icon { color: var(--accent); }
    /* «Передзвонити вам?» — помаранчевою кнопкою під номерами: видно, що на неї тиснуть. */
    .phones { padding-top: 5px; padding-bottom: 5px; }
    .phones__list { align-items: flex-start; line-height: 1.3; }
    .phones__call {
        display: inline-flex; align-items: center; margin-top: 3px; padding: 2px 9px; border-radius: 10px;
        background: var(--accent); color: #fff !important; font-size: 11px; font-weight: 700; line-height: 15px;
    }
    .phones__call:hover { background: var(--accent-dark); }
    .cart-link__total { color: #cfcfcf; }
    .head-action .top-action__count { top: 2px; left: 28px; }
}

/* ── «Попередження» під описом добавки ── */
/* Як у описах з ЕРП: «Попередження!» жирним, текст курсивом, сірим. */
.product-text__warning { max-width: 900px; margin: 18px 0 0; color: #555; font-size: 13px; line-height: 1.5; font-style: italic; }
.product-text__warning strong { color: #333; font-style: normal; }
@media (max-width: 860px) {
    /* На телефоні — усередині рядка «Опис»: видно, коли його розгорнули. */
    .product-acc > .product-text__warning { display: none; }
    .product-acc.is-open > .product-text__warning { display: block; margin: -6px 0 20px; }
}

/* ── Телефон: «Опис» і «Склад» — помітні картки ── */
/* Тонкі рядки «Опис» і «Склад» губились між стрічками товарів — люди їх не знаходили.
   Тепер це картки: світле тло, помаранчева іконка, підказка, що всередині, і стрілка
   в помаранчевому кружечку. Заголовка над ними немає (крок 156) — одразу після «Основної інформації». */
.product__acc-icon, .product__acc-sub { display: none; }
@media (max-width: 860px) {
    .product__description .product-acc,
    .product__description .product-acc:first-child {
        margin: 0 0 10px; padding: 0 14px; border: 1px solid #e3e3e3; border-radius: 12px; background: #f6f6f6;
    }
    .product__description .product-acc.is-open { border-color: var(--accent); background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
    .product__heading--acc {
        flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
        min-height: 72px; padding: 12px 44px 12px 50px;
    }
    .product__acc-icon {
        display: block; position: absolute; left: 0; top: 50%; width: 38px; height: 38px; padding: 8px; transform: translateY(-50%);
        border-radius: 50%; background: #ffeadd; color: var(--accent);
        fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .product__acc-title { color: #111; font-size: 18px; font-weight: 700; line-height: 22px; }
    .product__acc-sub { display: block; color: #6f6f6f; font-size: 13px; font-weight: 400; line-height: 17px; }
    /* Стрілка — біла в помаранчевому кружечку. */
    .product__heading--acc::before {
        content: ""; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px;
        border-radius: 50%; background: var(--accent);
    }
    .product__heading--acc::after { right: 11px; width: 8px; height: 8px; border-color: #fff; }
    .product-acc.is-open > .product-text__body { padding-top: 4px; }
}

/* ── «Оформити без авторизації» на «Увійти» перед оформленням (кроки 157, 170) ── */
/* Темною кнопкою, як плашки шапки. Вікна поверх оформлення більше немає (крок 170) — окрема сторінка /checkout/login/. */
.auth__guest { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; border-radius: 8px; background: var(--menu); color: #fff; font-size: 16px; }
.auth__guest:hover { background: #000; color: #fff; }

/* ── Сторінка «Кошик» і промокод (крок 159) ─────────────────────────── */
/* Та сама сітка, що на оформленні: товари ліворуч, «Разом» праворуч. Поле «Промокод» з «Застосувати» —
   під сумою, як на iHerb; застосований код — рядком з «Прибрати». */
.cart-promo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-promo__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.cart-promo__row { display: flex; gap: 8px; }
.cart-promo__input { flex: 1; min-width: 0; height: 40px; text-transform: uppercase; }
.cart-promo__input::placeholder { text-transform: none; }
.cart-promo__apply { flex: none; height: 40px; padding: 0 16px; }
.cart-promo__applied { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.cart-promo__remove { flex: none; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.cart-promo__remove:hover { color: var(--accent); }
.cart-promo__note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.cart-promo__error { margin: 8px 0 0; font-size: 13px; color: var(--red); }
.cart-promo__ok { margin: 8px 0 0; font-size: 13px; color: var(--green-text); }
.cart-page__back { display: block; margin-top: 12px; text-align: center; font-size: 14px; color: var(--muted); text-decoration: underline; }

/* ── Стікер «Термін до …» і «−N%» у стрічках ── */
/* Знижка через короткий термін придатності — «Термін до 04.2027» поруч із «−N%» (власниця, 25.10.2026):
   бурштиновий, щоб відрізнявся від червоної знижки й не губився. У стрічках товарів («Дивіться також»,
   «Часто купують разом», «Переглянуті») — «−N%» на фото, як у каталозі. */
.sticker--expiry { background: #a15c07; }
/* Причина уцінки на картці каталогу (04.11) — та сама бурштинова плашка; довга («Частково відклеєна пломба…») — у два рядки. */
.sticker--markdown { max-width: 170px; white-space: normal; line-height: 1.25; }
.related__image { position: relative; }
.related__discount, .related__expiry { position: absolute; left: 0; z-index: 1; padding: 4px 8px 4px 6px; font-size: 10px; }
.related__discount { top: 6px; }
.related__expiry { top: 28px; }
.deals__expiry { position: absolute; top: 34px; left: 0; z-index: 1; }

/* «Очистити кошик» (крок 161) — під товарами праворуч, тихим посиланням зі значком кошика для сміття. */
.cart-page__clear { display: flex; justify-content: flex-end; margin-top: 12px; }
.cart-page__clear button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; }
.cart-page__clear button:hover { color: var(--red); }
.cart-page__clear .icon { width: 18px; height: 18px; fill: currentColor; }

/* ── «Причина уцінки» ── */
/* Та сама рамка, що й «Термін придатності до» (власниця, 25.10.2026), — окремим рядком під ним. */
.expiry--markdown { display: table; }
.expiry + .expiry--markdown { margin-top: 8px; }

/* ── Сторінка «Кошик»: «Товари зі знижкою» й «Рекомендуємо для вас» (крок 162) ── */
/* Зверху над товарами — сірий блок з маленькими картками, як «Time-limited offer» на iHerb: фото ліворуч, назва
   у два рядки, ціна червоним і закреслена стара, оранжева кнопка кошика; три картки в ряд, стрілки по краях. */
.cart-offers { margin-bottom: 20px; padding: 14px 16px 16px; border-radius: 8px; background: #f5f5f5; }
.cart-offers__title { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.cart-offers__title .icon { width: 18px; height: 18px; fill: currentColor; }
.cart-offers__body { position: relative; }
.cart-offers__list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.cart-offers__list::-webkit-scrollbar { display: none; }
.cart-offers__card {
    display: flex; gap: 10px; flex: 0 0 calc((100% - 2 * 10px) / 3); min-width: 0; padding: 10px;
    border-radius: 6px; background: #fff; scroll-snap-align: start;
}
.cart-offers__image { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; }
.cart-offers__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cart-offers__info { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0; }
.cart-offers__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--ink); font-size: 13px; line-height: 1.35;
}
.cart-offers__name:hover { color: var(--accent); }
.cart-offers__bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.cart-offers__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.cart-offers__price b { color: var(--red); font-size: 14px; }
/* Без старої ціни (таблетниця, крок 176) — ціна звичайним кольором: червоний тут — знак знижки. */
.cart-offers__price b:only-child { color: var(--ink); }
.cart-offers__price s { color: #767676; font-size: 12px; }
.cart-offers__buy {
    display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer;
}
.cart-offers__buy:hover { background: var(--accent-dark); }
.cart-offers__buy:disabled { opacity: .6; cursor: progress; }
.cart-offers__buy .icon { width: 17px; height: 17px; }
.cart-offers .deals__nav { top: 50%; transform: translateY(-50%); }
.cart-offers .deals__nav--prev { left: -12px; }
.cart-offers .deals__nav--next { right: -12px; }
.cart-offers.is-static .deals__nav { display: none; }
/* Знизу — стрічка карток, як «Знижки» на головній, з кнопкою «До кошика». */
.deals--cart { margin-bottom: 40px; }
.deals__buy { width: 100%; min-height: 34px; margin-top: 8px; padding: 0 10px; font-size: 14px; }
@media (max-width: 1100px) {
    .cart-offers__card { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 860px) {
    .cart-offers { margin: 0 -16px 16px; padding: 12px 16px 14px; border-radius: 0; }
    .cart-offers__list { margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
    .cart-offers__card { flex-basis: 82%; }
    .cart-offers .deals__nav { display: none; }
}

/* Під «Перейти до оформлення» (крок 164): накопичувальна знижка й кешбек бота — два короткі рядки зі значками. */
.cart-perks { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; color: var(--muted); }
.cart-perks li { display: flex; align-items: center; gap: 8px; }
.cart-perks .icon { flex: none; width: 16px; height: 16px; color: var(--accent); }
.cart-perks a { color: var(--ink); border-bottom: 1px dotted rgba(9, 9, 9, .5); }
.cart-perks a:hover { color: var(--accent); }

/* Вікно «Увійти» на оформленні (крок 166): що дає вхід — кожне з нового рядка, на світло-оранжевому, значки оранжеві. */
.auth__benefits { display: grid; gap: 8px; margin: 0 0 22px; padding: 12px 14px; border-radius: 8px; background: #fff3ea; list-style: none; }
.auth__benefits li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.auth__benefits .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }

/* Оформлення (крок 168): «Є промокод?» і «Увійдіть…» — на світло-оранжевому, зі значком, жирніше; як плашка у вікні «Увійти». */
.checkout__perk { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: #fff3ea; font-size: 13px; font-weight: 600; line-height: 1.35; }
.checkout__perk + .checkout__perk { margin-top: 6px; }
.checkout__perk .icon { flex: none; width: 16px; height: 16px; fill: currentColor; color: var(--accent); }
.checkout__perk a { border-bottom-color: var(--accent); }
.checkout__perk a:hover { color: var(--accent); }

/* «Рекомендуємо для вас» у кошику (крок 169): картки однієї висоти, «До кошика» — внизу кожної; ціна — на одному рівні, хоч із
   зірками, хоч без (без них — відступ на висоту рядка зірок). */
.deals--cart .deals__card { display: flex; flex-direction: column; }
.deals--cart .deals__name + .deals__price { margin-top: 28px; }
.deals--cart .deals__price { margin-bottom: 8px; }
.deals--cart .deals__buy { margin-top: auto; }

/* ── Оформлення сучасніше (крок 179, власниця: «трохи гарніше, дуже сиро виглядає») ─────────────────────────────
   Розділи — білими картками, номери кроків — помаранчевими кружечками, поля — вищі й заокруглені, як у кабінеті
   (крок 136); доставка й оплата — картки з іконкою, вибрана — помаранчевою рамкою. Ті самі картки варіантів — і в
   «Адресі доставки» кабінету. Підсумок справа (і в «Кошику») — карткою. */
.checkout .checkout__block { margin-bottom: 18px; padding: 22px 24px 24px; border: 1px solid #eee; border-radius: 16px; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.checkout .checkout__title { margin-bottom: 18px; font-size: 19px; font-weight: 500; }
.checkout .checkout__step { width: 30px; height: 30px; background: #fff1e8; color: var(--accent); font-size: 15px; }
.checkout .field__label { margin-bottom: 6px; color: #555; font-weight: 500; }
.checkout .field__input { border-color: #dcdcdc; border-radius: 10px; }
.checkout .field__input:not(textarea) { height: 44px; padding: 0 14px; font-size: 15px; }
.checkout .field__input--area { padding: 10px 14px; font-size: 15px; }
.checkout .field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 92, 0, .15); }
.checkout .field.has-error .field__input { border-color: #c4392d; }
.checkout .checkout__hint { margin-top: 14px; }
.checkout .options, .address-card__form .options { gap: 10px; }
.checkout .option, .address-card__form .option { align-items: center; gap: 12px; padding: 14px 16px; border-color: #e6e6e6; border-radius: 12px;
    font-size: 15px; transition: border-color .15s, background-color .15s; }
.checkout .option:hover, .address-card__form .option:hover { border-color: #c8c8c8; }
.checkout .option:has(input:checked), .address-card__form .option:has(input:checked) { border-color: var(--accent); background: #fff7f2;
    box-shadow: inset 0 0 0 1px var(--accent); }
.checkout .option input, .address-card__form .option input { flex: none; width: 18px; height: 18px; margin: 0; }
.checkout .option small { font-size: 12px; }
.option__icon { flex: none; width: 24px; height: 24px; fill: #9a9a9a; }
/* Логотип перевізника (крок 180) — в однаковій рамці, щоб назви способів стояли рівно. */
.option__logo { flex: none; width: 90px; height: 26px; object-fit: contain; object-position: left center; }
.option:has(input:checked) .option__icon { fill: var(--accent); }
.checkout__summary { padding: 20px 22px; border-color: #eee; border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.checkout__summary .checkout__submit { min-height: 52px; border-radius: 12px; font-weight: 500; }

@media (max-width: 860px) {
    .option__logo { width: 64px; height: 22px; }
    .checkout .checkout__block { padding: 18px 16px 20px; }
    .checkout .checkout__title { margin-bottom: 14px; font-size: 18px; }
}

/* ── Сторінка товару: оцінка біля артикула (крок 182, список доробок, п. 5) ──────────────────────────────────────
   Число, зірки й «N відгуків»; наведення (на телефоні — дотик) відкриває віконце: середня, на скількох оцінках, частка
   кожної зірки й «Переглянути відгуки покупців». Артикул — того ж розміру, що й позначка наявності; «Усі характеристики» —
   по центру, без рамки, стрілка поруч із написом. */
.product-rating { position: relative; align-items: center; gap: 6px; }
.product-rating__value { color: var(--ink); font-size: 14px; font-weight: 700; }
.product-rating[data-rating-pop] .product-rating__stars { margin-right: 2px; }
.product-rating[data-rating-pop] { cursor: pointer; outline: none; }
.rating-pop {
    position: absolute; top: 100%; left: -16px; z-index: 40; display: none; width: 320px; padding: 18px 18px 14px;
    border: 1px solid #ececec; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); color: var(--ink); cursor: default;
}
.rating-pop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
.product-rating[data-rating-pop] .rating-pop { margin-top: 10px; }
.product-rating[data-rating-pop]:hover .rating-pop, .product-rating[data-rating-pop]:focus-within .rating-pop { display: block; }
.rating-pop__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rating-pop__avg { font-size: 34px; line-height: 1; font-weight: 700; }
.rating-pop__meta { display: flex; flex-direction: column; gap: 4px; }
.rating-pop__based { color: var(--muted); font-size: 12px; }
.rating-pop__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 38px; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.rating-pop__star { display: inline-flex; align-items: center; gap: 2px; color: #555; }
.rating-pop__star .icon { width: 12px; height: 12px; fill: var(--accent); }
.rating-pop__track { height: 8px; overflow: hidden; border-radius: 4px; background: #eee; }
.rating-pop__fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rating-pop__share { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rating-pop__all { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid #eee; color: var(--accent); font-size: 14px; font-weight: 500; }
.rating-pop__all .icon { width: 14px; height: 14px; fill: currentColor; }
.rating-pop__all:hover { color: var(--accent-dark); }
@media (min-width: 861px) {
    .product__meta { font-size: 13px; }
    .product-rating__link { font-size: 13px; }
}
@media (max-width: 860px) {
    .rating-pop { left: 0; width: min(320px, calc(100vw - 32px)); }
}
.product-side-features__title { display: flex; justify-content: center; gap: 10px; width: 100%; padding: 0; border: 0; }
.product-side-features__title:hover { color: var(--accent); }
.product-side-features__title::after { position: static; transform: translateY(-25%) rotate(45deg); }
.product-side-features[open] .product-side-features__title::after { transform: translateY(25%) rotate(-135deg); }

/* ── Сортування каталогу — список, що розгортається (крок 183, список доробок, п. 3) ───────────────────────────── */
.sorting { position: relative; display: block; margin-bottom: 14px; font-size: 13px; }
.sorting__current { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 36px 0 14px;
    border: 1px solid #dcdcdc; border-radius: 10px; background: #fff; list-style: none; white-space: nowrap; cursor: pointer; }
.sorting__current::-webkit-details-marker { display: none; }
.sorting__current::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.sorting[open] .sorting__current { border-color: var(--accent); }
.sorting[open] .sorting__current::after { transform: translateY(-20%) rotate(-135deg); }
.sorting .sorting__label { margin: 0; color: var(--muted); }
.sorting__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; min-width: 230px; padding: 6px;
    border: 1px solid #ececec; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.sorting .sorting__item { padding: 9px 12px; border-radius: 8px; background: none; color: var(--ink); white-space: nowrap; }
.sorting .sorting__item:hover { background: #f6f6f6; color: var(--ink); }
.sorting .sorting__item.is-active { background: #fff1e8; color: var(--accent); font-weight: 500; }
@media (max-width: 860px) {
    .sorting__list { right: auto; left: 0; }
}

/* ── Фільтр ціни: шаблони й повзунок (крок 184, список доробок, п. 4) ───────────────────────────────────────── */
.filter__list--presets { margin-bottom: 10px; }
.price-slider { position: relative; height: 28px; margin: 8px 6px 2px; }
.price-slider__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #e4e4e4; }
.price-slider__fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); }
.price-slider input[type="range"] { position: absolute; left: -6px; top: 0; width: calc(100% + 12px); height: 28px; margin: 0; background: none;
    pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-slider input[type="range"]::-webkit-slider-runnable-track { background: none; }
.price-slider input[type="range"]::-moz-range-track { background: none; }
.price-slider input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid var(--accent); border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; }
.price-slider input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: auto; }
.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 92, 0, .2); }

/* ── Відгуки: «Купівля підтверджена», галочка «Показувати прізвище» (крок 185, список доробок, п. 6) ───────────── */
.review__verified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: #eaf4dc;
    color: var(--green-text); font-size: 12px; font-weight: 500; white-space: nowrap; }
.review__verified .icon { width: 12px; height: 12px; fill: currentColor; }
.p-review-add__surname { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.p-review-add__surname input { margin: 0; accent-color: var(--accent); }

/* ── Відгуки: «Корисно» / «Не корисно», «Найкращий відгук», сортування (крок 186, список доробок, п. 6) ──────── */
.reviews-order { display: flex; gap: 6px; margin: 0 0 14px; }
.reviews-order__item { height: 32px; padding: 0 14px; border: 1px solid #e2e2e2; border-radius: 16px; background: #fff; color: var(--ink); font-size: 13px; }
.reviews-order__item:hover { border-color: #bbb; }
.reviews-order__item.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
/* Сторінки відгуків товару (крок 191): «Показати ще» й сторінки — як у каталозі, лише кнопками; гортання — до
   початку відгуків, під липку шапку. */
.reviews-pages .pager button { background: #fff; font: inherit; cursor: pointer; }
.reviews-order, .reviews { scroll-margin-top: calc(var(--header-h, 0px) + 16px); }
.review__votes { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.review__vote { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid #e2e2e2; border-radius: 16px;
    background: #fff; color: #555; font-size: 13px; }
.review__vote .icon { width: 16px; height: 16px; fill: currentColor; }
.review__vote b { font-weight: 500; }
.review__vote:hover { border-color: #bbb; color: var(--ink); }
.review__vote.is-on { border-color: var(--accent); background: #fff1e8; color: var(--accent); }
.review__vote:disabled { opacity: .6; cursor: progress; }
.review--best { padding: 16px; border: 1px solid #f3d3c0; border-radius: 14px; background: #fffaf6; }
.review__best { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 10px; background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ── Фото покупців — каруселлю великими плитками (крок 187, список доробок, п. 6) ─────────────────────────────── */
.reviews-photos__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.reviews-photos__head .reviews-photos__title { margin: 0; font-size: 17px; }
.reviews-photos__all { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--accent);
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.reviews-photos__all .icon { width: 14px; height: 14px; fill: currentColor; }
.reviews-photos__all:hover { color: var(--accent-dark); }
.reviews-photos__body { position: relative; }
.reviews-photos .reviews-photos__list { gap: 12px; padding-bottom: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews-photos .reviews-photos__list::-webkit-scrollbar { display: none; }
.reviews-photos .reviews-photos__item { border-radius: 14px; scroll-snap-align: start; }
.reviews-photos .reviews-photos__item img { width: 150px; height: 150px; }
.reviews-photos .deals__nav { top: 57px; }
.reviews-photos.is-static .deals__nav { display: none; }
@media (max-width: 860px) {
    .reviews-photos .reviews-photos__item img { width: 116px; height: 116px; }
    .reviews-photos .deals__nav { display: none; }
}

/* ── Фото профілю (крок 188, список доробок, п. 2) ───────────────────────────────────────────────────────────── */
.profile-avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.profile-avatar__img { flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; background: #f2f2f2; }
.profile-avatar__img img { display: block; width: 72px; height: 72px; object-fit: cover; }
.profile-avatar__img .review__initial { width: 72px; height: 72px; font-size: 28px; }
.profile-avatar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.profile-avatar__pick { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; overflow: hidden;
    border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-size: 14px; font-weight: 500; cursor: pointer; }
.profile-avatar__pick:hover { background: #fff1e8; }
.profile-avatar__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profile-avatar__remove { padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.profile-avatar__error { flex-basis: 100%; }

/* Реквізити оплати на рахунок IBAN. */
.iban { margin-bottom: 20px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 8px; background: #fff7f2; }
.iban__title { margin-bottom: 10px; font-weight: 700; }
.iban__rows { margin: 0; }
.iban__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.iban__row:first-child { border-top: 0; }
.iban__row dt { color: #777; }
.iban__row dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; }
.iban__value { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.iban__copy { padding: 3px 10px; border: 1px solid #cfcfcf; border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.iban__copy:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) {
    .iban__row { grid-template-columns: minmax(0, 1fr); }
}

/* Короткий підпис «що це за товар» під назвою (власниця, 02.11): сірим, до двох рядків — «одним рядком не влазить». */
.card__sub { margin: -2px 0 6px; font-size: 13px; line-height: 1.3; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product__subtitle { margin: -4px 0 12px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.suggest__sub { font-size: 12px; line-height: 1.3; color: var(--muted); }
@media (max-width: 860px) {
    .card__sub { margin: 0 0 4px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .product__subtitle { order: 2; margin: 4px 0 0; }
}

/* ── Картинки для Instagram і підбірка — лише кабінету менеджерки (03.11) ── */
.share-photo {
    position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); cursor: pointer;
}
.share-photo .icon { width: 22px; height: 22px; fill: currentColor; }
.share-photo.is-busy, .btn.is-busy { opacity: .6; pointer-events: none; }
.share-toggle .share-toggle__on, .share-toggle.is-on .share-toggle__add { display: none; }
.share-toggle.is-on .share-toggle__on { display: inline; }
.share-toggle.is-on { background: #2f9e44; }
.product__order--share .share-toggle { flex: 1; }
.share-pill {
    position: fixed; left: 16px; bottom: 16px; z-index: 44; padding: 10px 16px; border-radius: 22px;
    background: #121212; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.share-pill[hidden] { display: none; }
body.has-buybar .share-pill { bottom: 84px; }
.share-list__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.share-list { list-style: none; margin: 0; padding: 0; }
.share-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.share-list__item img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.share-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.share-list__sub { color: var(--muted); font-size: 13px; }
.share-list__price { white-space: nowrap; }
.share-list__remove { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.share-list__remove .icon { width: 16px; height: 16px; fill: currentColor; }
/* Вікно з готовими картинками: «Поділитися» — окремим натисканням (iPhone дозволяє його лише одразу після дотику). */
.share-preview { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(0, 0, 0, .85); }
.share-preview__images { flex: 1; display: flex; gap: 12px; overflow-x: auto; padding: 16px; }
.share-preview__images img { height: 100%; max-height: 70vh; width: auto; border-radius: 8px; background: #fff; }
.share-preview__bar { display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
.share-preview__bar .btn { flex: 1; }

/* ── Фото товару на весь екран (власниця, 05.11: «як на iHerb») ── */
.gallery__slide img { cursor: zoom-in; }
html.has-lightbox, html.has-lightbox body { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #fff; }
.lightbox[hidden] { display: none; }
.lightbox__top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(6px + env(safe-area-inset-top)) 6px 6px 16px; }
.lightbox__count { font-size: 15px; color: #555; }
.lightbox__close { width: 48px; height: 48px; border: 0; background: none; color: #121212; font-size: 38px; line-height: 1; cursor: pointer; }
.lightbox__track { flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__track.is-locked { overflow: hidden; }
.lightbox__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; scroll-snap-align: center; }
.lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.lightbox__slide.is-zoomed { display: block; overflow: auto; }
.lightbox__slide.is-zoomed img { max-width: none; max-height: none; width: 250%; height: auto; cursor: zoom-out; }
.lightbox__thumbs { flex: none; display: flex; justify-content: safe center; gap: 8px; overflow-x: auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.lightbox__thumbs[hidden] { display: none; }
.lightbox__thumb { flex: none; width: 60px; height: 60px; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; }
.lightbox__thumb.is-active { border-color: #121212; }
.lightbox__thumb img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__nav {
    position: absolute; top: 50%; z-index: 1; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); color: #121212; font-size: 32px; line-height: 1; cursor: pointer;
}
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__nav[hidden] { display: none; }
@media (hover: none) { .lightbox__nav { display: none; } }

/* Кабінет менеджерки (05.11): поруч «+ До підбірки» і «Купити». */
.product__order--share { gap: 10px; }
.product__order--share .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.product__order--share .share-toggle:not(.is-on) { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* «До підбірки» в картці каталогу — менеджерці замість «В бажання» (06.11): кружечок «+», у підбірці — зелений «✓». */
.card__share-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 16px; font-weight: 700; line-height: 1; }
.card__share-mark::before { content: "+"; }
.card__share.is-on .card__share-mark { border-color: #2f9e44; background: #2f9e44; color: #fff; font-size: 13px; }
.card__share.is-on .card__share-mark::before { content: "\2713"; }
@media (max-width: 860px) {
    .card__share-mark { width: 30px; height: 30px; font-size: 20px; }
    .card__share.is-on .card__share-mark { font-size: 16px; }
    .card__share.is-on .card__wish-on { display: none; }
}

/* «Повідомити про наявність» (07.11): кнопка на місці «Додати в кошик» і віконце (як «Передзвонити вам?»). */
.stock-alert-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.stock-alert-open .icon { width: 20px; height: 20px; }
.stock-alert__email { height: 44px; font-size: 16px; text-align: center; }
.stock-alert__or { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: #8a8a8a; font-size: 13px; }
.stock-alert__or::before, .stock-alert__or::after { content: ""; flex: 1; height: 1px; background: #e2e2e2; }
.stock-alert__tg { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 14px; }
.stock-alert__tg .icon { width: 20px; height: 20px; color: #229ed9; }
/* Менеджерці (07.11): «Повідомити про наявність» поруч із «+ До підбірки» — у пів ширини, тож без значка й у два рядки, якщо треба. */
.product__order--share .stock-alert-open { white-space: normal; line-height: 1.15; }
.product__order--share .stock-alert-open .icon { display: none; }

/* Кнопка кошика в стрічках товарів (власниця, 08.11). Комп'ютер — «Додати в кошик» при наведенні поверх низу фото;
   телефон (наведення немає) — під ціною, як на iHerb: значок кошика з плюсом і «Додати». */
.related__card { position: relative; }
.related__buy-zone { display: none; }
.related__buy-icon, .related__buy-short { display: none; }
@media (hover: hover) {
    .related__buy-zone {
        display: flex; align-items: flex-end; position: absolute; top: 0; left: 0; z-index: 2;
        width: 100%; aspect-ratio: 1; padding: 0 6px 6px; pointer-events: none;
    }
    .related__buy {
        width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--radius);
        background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
        cursor: pointer; pointer-events: auto; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s;
    }
    .related__card:hover .related__buy, .related__buy:focus-visible { opacity: 1; transform: none; }
    .related__buy:hover { background: var(--accent-dark); }
}
@media (hover: none) {
    .related__buy-zone { display: block; margin-top: 8px; }
    .related__buy {
        display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 6px;
        background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
    }
    .related__buy:disabled { opacity: .6; }
    .related__buy-icon { display: block; width: 18px; height: 18px; }
    .related__buy-short { display: inline; }
    .related__buy-long { display: none; }
}