/* ---- Тёмная тема: несколько CSS-переменных для внутренней согласованности
   нового блока (см. подробный блок [data-theme="dark"] в самом конце файла) —
   при этом ВСЯ светлая тема ниже остаётся как есть, литеральными цветами, без
   переписывания на переменные (риск регрессии на уже отлаженной вёрстке того
   не стоит). --card-bg используется card_payment.html/card_payment_result.html
   в их собственных инлайновых <style> — там уже был var(--card-bg,#fff), но
   сама переменная нигде не была определена; определяем её здесь. */
:root{--card-bg:#fff}
:root[data-theme="dark"]{
  --dark-bg:#121212;
  --dark-surface:#1c1c1c;
  --dark-surface-soft:#262626;
  --dark-text:#f0ede9;
  --dark-muted:#a39d97;
  --dark-border:#333333;
  --card-bg:#1c1c1c;
}
*{box-sizing:border-box}
/* Сброс нативного вида <button> — на iOS Safari кнопка без явного
   -webkit-appearance:none иногда рисуется системным (нативным) видом ПОВЕРХ
   нашего фона/цвета текста — снаружи это выглядит как пустая (белая) кнопка
   без текста, который «появляется» только когда система перерисовывает
   кнопку в момент нажатия (тач/:active). Все кнопки на сайте и так задают
   свой background/border/color в собственных классах (.button, .btn-add-cart,
   .qty-btn и т.д.) — этот сброс им не мешает, только убирает нативный слой
   iOS, который иногда перекрывает их. font/color:inherit — чтобы <button>
   по умолчанию наследовал шрифт и цвет текста страницы, как обычный текст,
   а не системный цвет системной кнопки (в браузерах кнопки НЕ наследуют
   color/font от родителя по умолчанию, если это не задано явно). */
button{margin:0;padding:0;font:inherit;color:inherit;background:none;border:0;-webkit-appearance:none;appearance:none;cursor:pointer}
/* Важно: overflow-x:hidden стоит только на body, не на html. Если он стоит
   на ОБОИХ сразу, браузер перестаёт "пробрасывать" overflow body наверх, на
   реальный скролл страницы, и создаёт два отдельных скролл-контейнера
   (html и body) — из-за этого весь sticky-позиционинг на сайте (плавающие
   при скролле категории слева от каталога, блок "Итого" в корзине) просто
   переставал работать. Как только на html остаётся только scroll-behavior,
   а overflow-x:hidden только на body — всё возвращается к нормальной схеме
   с одним скролл-контейнером, и sticky снова работает.

   scroll-behavior намеренно auto, а не smooth: переход по ссылке с якорем
   при ПОЛНОЙ загрузке страницы (например пагинация, или "Косметика" в шапке
   с других страниц — оба ведут на {% url 'home' %}#product-grid-top) — это
   переход браузера к якорю уже ПОСЛЕ полной загрузки страницы; будь тут
   smooth, он показывал бы это как
   заметную анимацию («страница появляется наверху и затем едет вниз к
   товарам» — то, на что жаловался пользователь, «прыгает, а не сразу
   открывает 2 страницу»). Пробовали переключать smooth только для кликов
   уже на открытой странице через JS-класс — не сработало: браузер
   доскролливает к якорю сам, в момент, который не поймать из JS настолько
   рано, чтобы гарантированно успеть выключить smooth заранее. С auto переход
   происходит одним кадром, без видимой прокрутки — именно то, что нужно. */
html{scroll-behavior:auto}
body{margin:0;font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#1a1a1a;background:#fff9f7;overflow-x:hidden;max-width:100vw}

/* ---- Плавающая кнопка "Связаться": снизу слева, разворачивается в WhatsApp/Telegram/Instagram ---- */
.fab-contact{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;align-items:center}
/* pointer-events:none — иначе invisible-контейнер с закрытыми (opacity:0)
   кнопками всё равно занимает место в flex-колонке и перехватывает клики/тапы
   по контенту под ним (например, по заголовку «Популярные средства»), даже
   когда сам виджет визуально свёрнут в одну круглую кнопку внизу. Каждая
   .fab-option сама включает себе pointer-events:auto при открытии — см. ниже. */
.fab-options{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:12px;pointer-events:none}
.fab-option{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.22);opacity:0;transform:translateY(14px) scale(.7);pointer-events:none;transition:opacity .18s,transform .18s}
.fab-whatsapp{background:#25d366}
.fab-telegram{background:#229ed9}
.fab-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7)}
.fab-toggle{position:relative;width:58px;height:58px;border-radius:50%;border:0;background:#1a1a1a;color:#fff;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:background .15s,transform .15s}
.fab-toggle:hover{background:#000;transform:translateY(-1px)}
.fab-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .18s,transform .18s}
.fab-icon-close{opacity:0;transform:translate(-50%,-50%) rotate(-45deg)}
.fab-contact.is-open .fab-option{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.fab-contact.is-open .fab-option:nth-child(1){transition-delay:.02s}
.fab-contact.is-open .fab-option:nth-child(2){transition-delay:.06s}
.fab-contact.is-open .fab-option:nth-child(3){transition-delay:.1s}
.fab-contact.is-open .fab-icon-chat{opacity:0;transform:translate(-50%,-50%) rotate(45deg)}
.fab-contact.is-open .fab-icon-close{opacity:1;transform:translate(-50%,-50%) rotate(0)}
h1,h2,h3,.brand-word{font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:0}
a{text-decoration:none;color:inherit}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:92px;background:rgba(253,204,208,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 38px;color:#1a1a1a;border-bottom:1px solid rgba(0,0,0,.06);transform:translateZ(0);will-change:transform}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{height:38px;width:auto;flex:0 0 auto;object-fit:contain}
.brand-word{font-size:23px;font-weight:700;letter-spacing:.01em;color:#1a1a1a}
nav{display:flex;align-items:center;gap:36px;font-size:16px;min-width:0}
nav a{color:#1a1a1a;opacity:.75;font-weight:600}
nav a:hover{opacity:1}
.header-right{display:flex;align-items:center;gap:18px}
.nav-cta{padding:13px 26px;border-radius:30px;background:#1a1a1a;color:#fff;font-weight:700;font-size:14px;transition:background .15s}
.nav-cta:hover{background:#000}
.cart-icon,.wishlist-icon{position:relative;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;color:#1a1a1a;transition:background .15s,transform .15s}
.cart-icon:hover,.wishlist-icon:hover{background:rgba(0,0,0,.08);transform:translateY(-1px)}
.cart-icon svg,.wishlist-icon svg{width:34px;height:34px}
.cart-badge,.wishlist-badge{position:absolute;top:-4px;right:-4px;min-width:26px;height:26px;padding:0 6px;border-radius:50%;background:#ff4d6d;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;border:3px solid #faf7f4;box-shadow:0 2px 8px rgba(255,77,109,.5)}

/* ---- Переключатель языка сайта (RU/KK/EN) в шапке — обычный select,
   отправляет форму сам по onchange, без отдельной кнопки "применить". ---- */
.lang-switch{margin:0;flex:0 0 auto}
.lang-select{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.12);border-radius:30px;background:rgba(255,255,255,.5);color:#1a1a1a;font-size:13px;font-weight:700;font-family:inherit;padding:9px 14px;cursor:pointer;transition:background .15s}
.lang-select:hover{background:rgba(255,255,255,.8)}
.lang-select:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:1px}

/* ---- Поиск по каталогу: иконка-лупа в шапке разворачивает строку поиска.
   .site-header стоит position:fixed, поэтому сам становится containing
   block для .search-bar (position:absolute) — строка поиска аккуратно
   выпадает прямо под шапкой на всю её ширину, без лишней обёртки. ---- */
.search-toggle{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:#1a1a1a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex:0 0 auto}
.search-toggle:hover{background:rgba(0,0,0,.06)}
.search-bar{position:absolute;top:100%;left:0;right:0;display:flex;gap:10px;padding:14px 38px;background:rgba(253,204,208,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.search-bar[hidden]{display:none}
.search-input{flex:1;min-width:0;padding:12px 16px;border:1px solid rgba(0,0,0,.12);border-radius:12px;font-size:15px;background:#fff;font-family:inherit}
.search-input:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:1px}
.search-submit{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:0;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-submit:hover{background:#000}

/* ---- Переключатель темы (светлая/тёмная) ----
   Десктоп (>1450px, там же где виден обычный текстовый nav, не гамбургер —
   см. пояснение про порог 1450px у самого nav ниже по файлу) — отдельная
   круглая кнопка-иконка солнце/луна в .header-right, как и остальные иконки
   шапки. Телефон/планшет/ноутбук (≤1450px, там же, где nav прячется за ☰) —
   вместо иконки в шапке пункт списка ВНУТРИ существующего выпадающего
   гамбургер-меню (см. .nav-theme-toggle ниже и разметку в шаблонах —
   специально выбор пользователя, не отдельная иконка "3 точки"). Обе кнопки
   шлют клик в один и тот же обработчик (script.js, атрибут data-theme-toggle)
   — на странице в любой момент видна только ОДНА из них благодаря
   противоположным медиа-запросам ниже, но обе синхронно переключают
   <html data-theme="dark|light">. */
.theme-toggle{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:#1a1a1a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex:0 0 auto}
.theme-toggle:hover{background:rgba(0,0,0,.06)}
.theme-toggle-icon-moon{display:none}
[data-theme="dark"] .theme-toggle-icon-sun{display:none}
[data-theme="dark"] .theme-toggle-icon-moon{display:block}
@media(max-width:1450px){.theme-toggle{display:none}}

.nav-theme-toggle{display:none;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;font-weight:600;font-size:16px;color:#1a1a1a;opacity:.75;cursor:pointer;text-align:left}
.nav-theme-toggle:hover{opacity:1}
.nav-theme-toggle-icon-sun,.nav-theme-toggle-text-light{display:none}
[data-theme="dark"] .nav-theme-toggle-icon-moon,[data-theme="dark"] .nav-theme-toggle-text-dark{display:none}
[data-theme="dark"] .nav-theme-toggle-icon-sun,[data-theme="dark"] .nav-theme-toggle-text-light{display:inline}
@media(max-width:1450px){.nav-theme-toggle{display:flex}}

/* ---- Тост «Добавлено в корзину» — фиксирован снизу, поднят над кнопкой
   связи (.fab-contact), чтобы не наезжать друг на друга ---- */
.cart-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,12px);z-index:60;display:flex;align-items:center;gap:14px;background:#1a1a1a;color:#fff;padding:14px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.28);font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw}
.cart-toast[hidden]{display:none}
.cart-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cart-toast-text{white-space:nowrap}
.cart-toast-link{color:#ffd8c2;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;flex:0 0 auto}
@media(max-width:520px){
  .cart-toast{left:16px;right:16px;bottom:86px;transform:translateY(12px);max-width:none;justify-content:space-between}
  .cart-toast.show{transform:translateY(0)}
  .cart-toast-text{overflow:hidden;text-overflow:ellipsis}
}
.menu{display:none;background:none;border:0;font-size:24px;color:#1a1a1a}
.results-swiper{position:relative;width:100%;height:56vw;min-height:460px;max-height:640px;overflow:hidden;background:#d9d9d9;touch-action:pan-y;margin-top:92px}
.swiper-track{display:flex;width:100%;height:100%;transition:transform .45s ease}
.swiper-slide{position:relative;flex:0 0 100%;width:100%;height:100%}
.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.slide-caption{position:absolute;left:0;right:0;bottom:0;padding:56px 6vw 46px;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.18) 75%,transparent 100%);color:#fff;z-index:3}
.slide-caption .eyebrow{color:#ffd7c2;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.slide-caption h2{font-size:34px;line-height:1.15;margin:0 0 18px;color:#fff;max-width:640px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.swiper-dots{position:absolute;right:24px;top:24px;display:flex;gap:8px;z-index:5}
.swiper-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(0,0,0,.3);padding:0;cursor:pointer}
.swiper-dots button.active{background:#1a1a1a}
.results-swiper:has(.swiper-slide:only-child) .swiper-dots{display:none}
.catalog{padding:90px 6vw 60px;background:#fff9f7}
/* Главная: категории слева, а справа — уменьшенный слайдер над карточками
   товаров (как в референсе), поэтому сверху нужно чуть больше отступа под
   фиксированную шапку, чем на обычном каталоге. */
.catalog-with-hero{padding-top:92px}
.catalog-head{text-align:center;margin-bottom:55px}
.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:800;margin:0 0 12px;text-transform:uppercase;color:#c9915f}
.catalog-head h2{font-size:44px;line-height:1.1;margin:0 0 14px}
.catalog-head>p:last-child{font-size:17px;color:#777;margin:0}

/* Промо-баннер под шапкой сайта — на всех страницах, обычный блок в потоке
   (не фиксированный), поэтому просто прокручивается вместе со страницей. */
.promo-banner{margin:0 0 32px;padding:18px 28px;border-radius:18px;background:#fdeef0;color:#c9915f;font-size:18px;font-weight:800;text-align:center;line-height:1.4}
/* 3 товара в ряд — и на главной («Все товары»), и на страницах отдельных
   категорий: раньше на страницах категорий было по 2, теперь везде одинаково. */
.product-grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:64px 32px;align-items:stretch}
/* scroll-margin-top: переход по пагинации (?page=2#product-grid-top)
   ставит верхний край #product-grid-top ровно в верх окна браузера — а
   .site-header зафиксирован (position:fixed) поверх контента и перекрывает
   собой эти же 92px (56px на мобильном, см. медиа-запрос ниже), из-за чего
   верх первого ряда карточек (картинки) оказывался наполовину "съеден"
   шапкой. scroll-margin-top говорит браузеру оставить сверху это же
   расстояние свободным при прокрутке к якорю — тогда сетка товаров
   останавливается сразу под шапкой, а не под ней. */
#product-grid-top{scroll-margin-top:112px}
.product{display:flex;flex-direction:column;text-align:center;background:#fff;border-radius:26px;padding:32px 24px 28px;transition:transform .2s,box-shadow .2s;cursor:pointer}
.product:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(26,26,26,.08)}
/* Раньше здесь был розовый фон (#fdeef0) + mix-blend-mode:multiply — приём,
   который «прячет» белую подложку студийного фото и красиво сливает её с
   розовым фоном карточки. Но если у самого фото уже СВОЙ фон (не белый —
   например, снято на цветной/розовой поверхности), multiply накладывает на
   него ещё и розовый оттенок карточки — получается некрасивый шов/рамка
   вокруг фото, где два разных фона стыкуются. Убрали и фон, и блендинг —
   фото показывается как есть, без наложений, конфликтов больше нет
   независимо от того, какой фон был у исходной картинки. */
.product-image{position:relative;height:270px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;border-radius:18px}
.product-image img{max-width:100%;max-height:100%;object-fit:contain}
.product-badge{position:absolute;top:12px;left:12px;background:#ff4d6d;color:#fff;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;letter-spacing:.02em;box-shadow:0 4px 12px rgba(255,77,109,.35)}
/* ---- Сердечко «В избранное» на карточке товара — поверх фото, справа
   сверху (зеркально .product-badge, который слева) ---- */
.wishlist-form{position:absolute;top:10px;right:10px;z-index:2;margin:0}
.wishlist-toggle{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#1a1a1a;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(26,10,12,.12);transition:background .15s,transform .15s,color .15s}
.wishlist-toggle:hover{background:#fff;transform:scale(1.06)}
.wishlist-toggle.is-active{color:#ff4d6d}
.product-info{flex:0 0 auto}
/* И название, и описание всегда занимают ровно высоту в 2 строки (min-height
   ==max-height от line-clamp) — раньше короткие названия/описания просто
   были ниже, из-за чего объём/цена/кнопка у карточек в одном ряду съезжали
   на разную высоту («каждая карточка живёт своей жизнью»). Теперь у всех
   карточек в ряду одинаковый внутренний ритм независимо от длины текста. */
.product h3{font-size:18px;line-height:1.32;margin:0 0 10px;font-weight:700;min-height:2.64em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product p{font-size:14px;line-height:1.55;color:#777;max-width:290px;margin:0 auto;text-align:center;min-height:3.1em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product span{font-size:14px;font-weight:700}
.product-footer{margin-top:auto;padding-top:16px}
/* Объём/вес товара (необязательное поле в админке) — маленькая серая
   строка над ценой, например «230 г». Пусто, если объём не заполнен. */
.product-volume{display:block;font-size:12px;font-weight:600;color:#999;letter-spacing:.02em;margin-bottom:4px}
.price-row{display:flex;flex-direction:column;gap:1px;justify-content:center;align-items:center}
.price-old{font-size:12px;font-weight:500;color:#aaa;text-decoration:line-through}
.price-new{font-size:20px;font-weight:800;color:#c9915f}
/* Когда есть скидка: новая цена чуть крупнее обычной, старая — заметно мельче */
.price-row .price-new{font-size:24px;line-height:1.1}
.price-row .price-old{font-size:12px}
.catalog-loading{grid-column:1/-1;text-align:center;color:#999;font-size:14px}

/* ---- Категории каталога: колонка слева, "прилипает" и едет вниз вместе с товарами ---- */
.category-page{padding-top:92px}
.catalog-layout{max-width:1240px;margin:0 auto;display:flex;align-items:flex-start;gap:48px}
.category-nav{flex:0 0 236px;display:flex;flex-direction:column;gap:6px;position:sticky;top:116px}
.category-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid transparent;background:transparent;font-size:14px;font-weight:700;color:#777;white-space:normal;text-align:left;transition:background .15s,color .15s,border-color .15s}
.category-chip-icon{flex:0 0 auto;font-size:15px;line-height:1}
.category-chip:hover{background:#fff;border-color:#eee;color:#1a1a1a}
.category-chip.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}

/* Главная: справа от категорий — уменьшенный слайдер, затем заголовок и сетка
   товаров, всё в одной колонке. */
.catalog-main{flex:1;min-width:0}

/* ---- Постраничная навигация каталога: 12 товаров (3 колонки × 4 ряда) на
   страницу, дальше — переключение страниц номерами снизу. Используется на
   главной, в категориях, бестселлерах и в результатах поиска (общий
   _pagination.html, переиспользует product-grid тех же страниц). ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pagination-page,.pagination-arrow{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 6px;border-radius:12px;color:#1a1a1a;font-size:14px;font-weight:700;transition:background .15s,color .15s}
.pagination-page:hover,.pagination-arrow:hover{background:rgba(0,0,0,.06)}
.pagination-page.is-active{background:#1a1a1a;color:#fff}
.pagination-arrow.is-disabled{color:#ccc;pointer-events:none}
.pagination-ellipsis{display:flex;align-items:center;justify-content:center;min-width:24px;height:40px;color:#999;font-weight:700}
.results-swiper.results-swiper-inline{width:100%;height:380px;min-height:240px;max-height:420px;margin-top:0;border-radius:24px;margin-bottom:50px}

/* Главная: слайдер и категории — прямые дети .catalog-layout (не вложены друг в друга),
   поэтому порядок на мобильных задаём через grid-template-areas, а на десктопе
   расставляем их в те же места, что и раньше (категории слева на всю высоту). */
.catalog-with-hero .catalog-layout{display:grid;grid-template-columns:236px 1fr;grid-template-areas:"nav hero" "nav main";align-items:start;gap:0 48px}
.catalog-with-hero .catalog-layout>.category-nav{grid-area:nav}
.catalog-with-hero .catalog-layout>.results-swiper{grid-area:hero}
.catalog-with-hero .catalog-layout>.catalog-main{grid-area:main}

/* ---- Модальное окно товара (полное описание) ---- */
.product-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.product-modal[hidden]{display:none}
.product-modal-backdrop{position:absolute;inset:0;background:rgba(20,12,13,.55);backdrop-filter:blur(2px)}
.product-modal-card{position:relative;z-index:1;background:#fff;border-radius:26px;max-width:840px;width:100%;max-height:88vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.product-modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.06);font-size:16px;cursor:pointer;z-index:2;transition:background .15s}
.product-modal-close:hover{background:rgba(0,0,0,.12)}
/* Тот же розовый фон + mix-blend-mode:multiply, что и на карточке в каталоге
   (см. комментарий у .product-image выше) — и та же проблема с фото,
   у которых уже есть свой (не белый) фон. Убрано по той же причине.
   .product-modal-image, как обычный grid-item, растягивается
   (align-items:stretch по умолчанию у .product-modal-card) на всю высоту
   строки грида, то есть подстраивается под высоту СОСЕДНЕЙ ячейки с
   текстом — это НАМЕРЕННО (см. 24 сентября ниже): при длинном описании
   картинка остаётся визуально ПО ЦЕНТРУ всей левой колонки, а не
   прилипает к верху с пустым местом снизу.
   23 сентября здесь стоял align-self:start (ограничивал высоту блока
   его собственным содержимым) — решал драйф сердечка от фото (см. ниже),
   но ценой того, что при длинном описании картинка сама оказывалась
   прижатой к верху колонки, а под ней пустовало место на всю оставшуюся
   высоту (пожаловался пользователь 24 сентября: "картинки не по середине
   карточки товара"). 24 сентября align-self:start убран обратно, а вместо
   него сердечко перенесено внутрь .product-modal-gallery (см. ниже) —
   так обе проблемы решены одновременно: колонка тянется и центрирует
   картинку по всей своей высоте, а сердечко сидит на самой картинке
   (фиксированной, некотором положении 340px), а не на растянутом блоке
   вокруг неё, и поэтому никогда не отрывается от неё, на какую бы высоту
   ни растянулась колонка. */
.product-modal-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px;padding:32px}
.product-modal-image img{max-width:100%;max-height:340px;object-fit:contain}
/* ---- Карусель из нескольких фото товара (быстрый просмотр) ----
   Слайды и точки строятся в JS (script.js, buildGallery) — здесь только
   контейнер. Высота ФИКСИРОВАННАЯ (в отличие от одиночного фото раньше,
   которое просто подстраивалось под свою естественную высоту) — это
   обязательное условие для карусели: если бы высота "прыгала" в
   зависимости от пропорций текущего слайда, при автопрокрутке/свайпе
   модалка бы дёргалась по высоте на каждом переключении. touch-action:
   pan-y — чтобы вертикальный скролл страницы/модалки пальцем по-прежнему
   работал как обычно, а наш JS перехватывает только горизонтальные жесты
   (см. pointerdown/pointermove в script.js). */
.product-modal-gallery{position:relative;width:100%;height:340px;overflow:hidden;touch-action:pan-y}
.product-modal-gallery[hidden]{display:none}
.product-modal-gallery .swiper-track{cursor:grab}
.product-modal-gallery .swiper-slide{display:flex;align-items:center;justify-content:center}
/* Точки — свои цвета, не как у слайдера "Реальные результаты" (там тёмное
   фото за полупрозрачными белыми точками), здесь фон карточки товара
   белый — нужен контраст в обратную сторону, тёмные точки на светлом. */
.swiper-dots.product-modal-gallery-dots{top:auto;right:auto;left:50%;bottom:10px;transform:translateX(-50%)}
.swiper-dots.product-modal-gallery-dots button{background:rgba(0,0,0,.18)}
.swiper-dots.product-modal-gallery-dots button.active{background:#1a1a1a}
/* Только одно фото у товара — точки ни к чему, как и у слайдера на главной. */
.product-modal-gallery:has(.swiper-slide:only-child) .product-modal-gallery-dots{display:none}
/* Сердечко «В избранное» — поверх фото, справа сверху, как на карточке
   товара в каталоге (см. .wishlist-form на карточке). Раньше (до 24
   сентября) лежало внутри .product-modal-image — блока ВОКРУГ фото,
   который при длинном описании растягивается на всю высоту соседней
   текстовой колонки; сердечко в нём "уезжало" далеко от самой картинки
   (см. комментарий у .product-modal-image выше). Перенесено СЮДА, внутрь
   .product-modal-gallery — а у неё высота всегда фиксированная (340px /
   260px на мобильном, см. выше), не зависит от длины текста рядом, — то
   есть верхний правый угол этого блока это буквально угол настоящей
   видимой картинки, и сердечко теперь ВСЕГДА сидит на ней, какой бы
   длинной ни была соседняя колонка. На широких экранах картинка —
   отдельная колонка слева, крестик «Закрыть» — у правого края всей
   модалки (далеко от фото), конфликта нет. На узких экранах (≤700px,
   картинка и текст в один столбец) оба оказались бы в одном верхнем
   углу — поэтому там крестик уходит в левый верхний угол, см.
   медиа-запрос ниже. Размер (38px) и отступ (16px) — те же, что и у
   .product-modal-close, по просьбе пользователя: раньше здесь было
   34px/10px — чуть мельче и чуть ниже, чем крестик, из-за чего на
   десктопе они были не на одной высоте и разного размера, хотя визуально
   воспринимаются как парные кнопки. */
.product-modal-gallery .wishlist-toggle{position:absolute;top:16px;right:16px;width:38px;height:38px;z-index:2}
/* У длинного описания своя прокрутка (max-height + overflow-y на самом
   .product-modal-body, min-height:0 — чтобы grid-ячейка реально могла сжаться
   и включить скролл, а не растягивать всю карточку). Картинка при этом
   находится в СОСЕДНЕЙ grid-ячейке, не участвует в этой прокрутке вообще —
   она просто растягивается на высоту строки (см. .product-modal-image, там
   уже стоит центрирование по флексу) и остаётся визуально по центру,
   сколько бы ни листали текст. */
.product-modal-body{padding:40px 36px;display:flex;flex-direction:column;max-height:88vh;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
/* Прокрутка здесь относится ко ВСЕЙ правой колонке модалки (заголовок, цена,
   количество, кнопка «В корзину» — не только к абзацу описания, overflow-y
   стоит на .product-modal-body целиком, см. комментарий выше) — просто
   раньше это было незаметно из-за толстого системного скроллбара браузера
   по умолчанию, из-за которого казалось, что скроллится только узкая полоска
   текста. Свой тонкий скроллбар (Firefox — scrollbar-width/-color выше;
   остальные браузеры — ::-webkit-scrollbar ниже) визуально ближе к общей
   стилистике сайта и убирает это впечатление. */
.product-modal-body::-webkit-scrollbar{width:6px}
.product-modal-body::-webkit-scrollbar-track{background:transparent}
.product-modal-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:999px}
.product-modal-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32)}
.product-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.product-modal-body h3{font-size:26px;margin:0 0 16px;line-height:1.2}
.product-modal-body p{font-size:15px;line-height:1.75;color:#666;margin:0 0 24px;white-space:pre-line}
.product-modal-body p+.product-modal-volume{margin-top:-14px}
.product-modal-volume{font-size:13px;font-weight:600;color:#999;letter-spacing:.02em;margin:0 0 14px}
.product-modal-volume:empty{display:none}
.product-modal-price{font-size:22px;font-weight:800;color:#c9915f;margin-bottom:22px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.product-modal-price .price-new{font-size:26px;line-height:1.1}
.product-modal-price .price-old{font-size:13px;font-weight:500;color:#aaa;text-decoration:line-through}
.product-modal-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.product-modal-actions .catalog-qty{margin:0;flex:0 0 auto}
.product-modal-add{border:0;cursor:pointer}
@media(max-width:520px){.product-modal-actions{width:100%}.product-modal-add{flex:1}}
@media(max-width:700px){
  /* На узком экране картинка и текст идут друг под другом одним потоком
     (не двумя колонками) — там нет смысла в отдельной прокрутке текста,
     листаем всю карточку целиком, как раньше. */
  .product-modal-card{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}
  .product-modal-image{min-height:220px;padding:24px}
  .product-modal-gallery{height:260px}
  .product-modal-body{padding:28px 24px 32px;max-height:none;overflow-y:visible}
  .product-modal-body h3{font-size:22px}
  /* Один столбец: картинка теперь первая, крестик «Закрыть» (top:16/right:16
     от всей карточки) и сердечко избранного (по умолчанию — top:10/right:10
     от фото) оказались бы в одном и том же верхнем углу фото. Раньше отсюда
     уводили крестик влево — по просьбе пользователя поменяли местами: крестик
     остаётся на привычном месте (верхний правый угол, как и на десктопе),
     а сердечко переезжает в левый верхний угол. Оба теперь одного размера
     (38px) и на практически одной высоте: у сердечка top:16px от
     .product-modal-gallery (см. выше, 24 сентября — перенесено сюда, чтобы
     всегда сидеть на самой картинке, а не на блоке вокруг неё), а картинка
     на мобильном идёт первой и начинается вплотную к верху карточки (нет
     соседней колонки, которая могла бы её растянуть) — так что визуально
     это по-прежнему та же линия, что и top:16px крестика. */
  .product-modal-gallery .wishlist-toggle{top:16px;left:16px;right:auto;width:38px;height:38px}
}
.button{display:inline-flex;padding:17px 32px;border-radius:999px;background:#1a1a1a;color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;transition:background .15s,transform .15s}
.button:hover{background:#000;transform:translateY(-1px)}
.site-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:65px 6vw 150px;background:#161616;color:#fff}
.footer-col h4{margin:0 0 16px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#ff8fa3}
.footer-col p{margin:0;font-size:15px;line-height:1.8;color:#d8d5d3;font-family:'Manrope',sans-serif}
.footer-col a{color:#d8d5d3}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-col-link{display:block;transition:opacity .15s}
.footer-col-link:hover{opacity:.75}
.footer-col-link:hover h4{text-decoration:underline}
.footer-col-link p{text-decoration:none}
/* ---- Планшеты (и узкие окна десктопа): начиная с добавления в шапку
   иконки избранного и переключателя языка, правая часть шапки (.header-right)
   стала заметно шире, чем раньше, и на ширинах экрана примерно 800–1180px
   центрированное меню начало наезжать на неё и на бренд-блок слева (особенно
   на казахском — там пункты меню длиннее всего). Раньше единственный порог
   был 800px (полностью мобильная шапка), и между ним и десктопом
   промежуточных ширин никто не обрабатывал. Здесь — тот же гамбургер-переход,
   что и на телефоне, но БЕЗ сжатия высоты шапки/иконок: на планшете шапка
   визуально остаётся десктопной, только текстовое меню прячется за ☰. Порог
   тогда подобрали как 1180px — с запасом. Позже (тёмная тема, 21 сентября)
   порог был временно поднят до 1550px — см. следующий абзац, почему.

   ⚠️ 23 сентября (раунд 22) — устранена САМА ПРИЧИНА наложения, а не только
   подобран более широкий порог. Раньше `nav` был `position:absolute;left:50%;
   transform:translate(-50%,-50%)` — то есть центрировался по ВСЕЙ ширине
   шапки, а не по остатку места между брендом и .header-right (и вообще не
   участвовал в `display:flex` шапки как обычный элемент потока). Из-за этого
   рост .header-right всего на ~60px (добавление иконки-переключателя темы)
   сдвигал реальную границу наложения не на те же ~60px, а сразу почти на
   220px — порог пришлось поднимать до 1550px "с запасом", вслепую гадая,
   хватит ли его при следующем изменении ширины шапки. Теперь `nav` — самый
   обычный элемент внутри `display:flex;justify-content:space-between` у
   `.site-header` (третий, между `.brand` и `.header-right`): при трёх
   flex-элементах `justify-content:space-between` математически ставит
   средний ровно по центру ОСТАТКА пространства между первым и третьим —
   это ТО ЖЕ самое место, где раньше пытались центрировать nav вручную через
   left:50%, только теперь без переменного "множителя" и без position:
   absolute/transform. Наложение между nav и `.header-right` (или брендом)
   теперь структурно невозможно — при нехватке места элементы сжимаются
   (flex-shrink по умолчанию) или текст переносится, а не наезжает друг на
   друга.

   ⚠️ 23 сентября (раунд 23) — сам порог 1550px пересчитан вниз до 1450px.
   Пользователь заметил, что на его обычной ширине окна меню стало прятаться
   за ☰ раньше, чем ожидалось — раньше (до раунда 22) он текстового меню на
   этой ширине не видел ни разу. Причина в том, что 1550px был подобран как
   защитная мера "на глаз" для СТАРОГО наложения (см. абзац выше) — с трёхкратным
   запасом сверх реально нужной ширины, просто чтобы наверняка не словить
   баг ещё раз. Теперь, когда наложение структурно исключено (см. выше),
   в такой защите на вырост нет смысла — Playwright-замером (`bounding_box`
   `.brand`/`nav`/`.header-right` при принудительно включённом nav) найдена
   РЕАЛЬНАЯ ширина, на которой пункты меню перестают переноситься на вторую
   строку на самом длинном языке (kk): последний перенос — 1380px, первая
   чистая однострочная раскладка — 1390px (ru/en укладываются даже раньше).
   Порог поставлен в 1450px — около 60-70px запаса сверх измеренного минимума
   (ru/kk/en), этого достаточно, чтобы не подбирать ширину впритык, но уже
   без прежнего трёхкратного "на всякий случай". Если в .header-right в
   будущем добавится ещё один элемент — порог, скорее всего, снова надо будет
   немного поднять (тем же методом bounding_box), но подниматься он должен
   на РЕАЛЬНУЮ выросшую ширину плюс небольшой запас, а не рефлекторно на
   несколько сотен пикселей "с запасом", как раньше — теперь худший исход
   при заниженном пороге — тесное меню, а не наложение, и это не требует
   такой большой подстраховки. Порог у .theme-toggle/.nav-theme-toggle
   (см. выше) по-прежнему должен совпадать с порогом у nav/.menu ниже, чтобы
   не образовалась "мёртвая зона". */
@media(max-width:1450px){
  nav{display:none}
  .menu{display:block;font-size:20px;padding:2px 2px 2px 10px;flex:0 0 auto}
}
@media(max-width:800px){
  .site-header{height:56px;padding:0 14px}
  #product-grid-top{scroll-margin-top:70px}
  nav{display:none}
  .menu{display:block;font-size:20px;padding:2px 2px 2px 10px;flex:0 0 auto}
  .brand{min-width:0}
  .brand-word{font-size:16px;white-space:nowrap}
  /* Раньше здесь была фиксированная квадратная рамка 32×32 для широкого
     (не квадратного) файла логотипа — из-за object-fit:contain картинка
     вписывалась по ширине и оставалась только ~13px высотой с пустыми
     полями сверху/снизу, отсюда и «слишком мелкий, нечитаемый» логотип.
     Задаём только высоту (как на десктопе) — ширина сама подстроится по
     реальным пропорциям файла, без обрезки и без расплывчатости. */
  .brand-mark{height:36px;width:auto;flex:0 0 auto}
  .nav-cta{padding:9px 16px;font-size:12px}
  .header-right{gap:6px}
  .lang-select{padding:7px 10px;font-size:12px}
  .cart-icon,.wishlist-icon{width:46px;height:46px;flex:0 0 auto;background:rgba(0,0,0,.06)}
  .cart-icon svg,.wishlist-icon svg{width:23px;height:23px}
  .cart-badge,.wishlist-badge{min-width:20px;height:20px;font-size:11px;border-width:2px}
  .search-toggle{width:38px;height:38px}
  .search-toggle svg{width:18px;height:18px}
  .search-bar{padding:10px 14px;gap:8px}
  .search-input{padding:10px 14px;font-size:14px}
  .search-submit{width:38px;height:38px;border-radius:10px}
  .fab-contact{right:14px;bottom:14px}
  .fab-toggle{width:50px;height:50px}
  .fab-option{width:40px;height:40px}
  .fab-icon-chat{width:21px;height:21px}
  .fab-icon-close{width:19px;height:19px}
  .results-swiper{margin-top:56px;height:58vw;min-height:230px;max-height:320px}
  .slide-caption{padding:30px 18px 22px}
  .slide-caption h2{font-size:19px;margin-bottom:10px;line-height:1.2}
  .slide-caption .eyebrow{font-size:12px}
  .slide-caption .button{padding:10px 18px;font-size:13px}
  .catalog{padding:55px 18px 70px}
  .category-page{padding-top:56px}
  .catalog-with-hero{padding-top:56px}
  .promo-banner{font-size:14px;padding:13px 16px;border-radius:14px;margin-bottom:24px}
  .about-us.about-standalone{padding-top:90px}
  .catalog-head h2{font-size:32px}
  .catalog-head>p:last-child{font-size:15px}
  .catalog-layout{flex-direction:column;gap:0}
  /* Категории на мобильном — горизонтальная лента чипсов-кнопок (как
     фильтры в мобильном приложении), а не перенос мелкого текста в
     несколько строк: одна строка, скролл пальцем вбок, свою полосу
     прокрутки прячем. */
  .category-nav{position:static;flex:0 0 auto;width:100%;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:10px;margin-bottom:28px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .category-nav::-webkit-scrollbar{display:none}
  .results-swiper.results-swiper-inline{height:58vw;min-height:190px;max-height:280px;border-radius:18px;margin-bottom:30px}
  /* Главная (мобильная): сначала слайдер с лицами, потом категории, потом товары */
  .catalog-with-hero .catalog-layout{display:grid;grid-template-columns:1fr;grid-template-areas:"hero" "nav" "main"}
  .category-chip{flex:0 0 auto;padding:11px 18px;font-size:13px;border-radius:999px;text-align:center;white-space:nowrap;background:#fff;border-color:#f0e6e3;color:#555;box-shadow:0 1px 5px rgba(60,34,38,.06)}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:50px 20px}
  .pagination{margin-top:32px;gap:4px}
  .pagination-page,.pagination-arrow{min-width:36px;height:36px;font-size:13px;border-radius:10px}
  .product{padding:24px 18px 22px}
  .product-image{height:210px}
  .product h3{font-size:16px}
  .product p{font-size:13px}
  .site-footer{grid-template-columns:repeat(2,1fr);gap:36px 20px;padding:45px 18px 130px}
}
@media(max-width:520px){
  .product-grid{grid-template-columns:1fr}
  .product-image{height:250px}
  .nav-cta{display:none}
  .site-footer{grid-template-columns:1fr}
}
/* Раньше слово «Cosmetics» рядом с логотипом пряталось только на ширинах
   ≤400px — но переключатель языка (.lang-select) вместе с иконками
   избранного/корзины и гамбургером занимает в сумме больше места, чем
   раньше (см. заметку про адаптив шапки выше), и уже на ширинах примерно
   401–420px, а с очень маленьким запасом — вплоть до ~439px, слово
   «Cosmetics» и кружок «RU» физически перекрываются (проверено Playwright
   bounding-box'ами). Это ОЧЕНЬ частые реальные ширины телефонов (например,
   412px — один из самых распространённых Android-экранов), поэтому баг был
   легко воспроизводим не только в DevTools, но и на настоящих устройствах.
   Порог поднят с 400px до 460px — с запасом выше самой широкой ширины,
   на которой ещё оставалось перекрытие. */
@media(max-width:460px){
  .brand-word{display:none}
  .header-right{gap:4px}
  .cart-icon,.wishlist-icon{width:42px;height:42px}
  .cart-icon svg,.wishlist-icon svg{width:21px;height:21px}
  .lang-select{padding:6px 8px;font-size:11px}
}

/* ---- Каталог: количество перед добавлением в корзину ---- */
.catalog-qty{display:flex;align-items:center;justify-content:center;width:fit-content;margin:10px auto 0;border:1px solid #eee;border-radius:30px;overflow:hidden}
.catalog-qty .qty-btn{width:32px;height:32px;border:0;background:#faf6f5;font-size:16px;line-height:1;cursor:pointer;color:#171717}
.catalog-qty .qty-btn:hover{background:#f0e5e2}
.catalog-qty input{width:38px;height:32px;border:0;text-align:center;font-size:14px;-moz-appearance:textfield;background:#fff}
.catalog-qty input::-webkit-outer-spin-button,.catalog-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.catalog-qty[hidden]{display:none}

/* ---- Корзина ---- */
.btn-add-cart{display:block;box-sizing:border-box;width:100%;margin-top:12px;padding:13px;border:1px solid #171717;border-radius:30px;background:#fff;color:#171717;font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center;cursor:pointer;transition:background .15s,color .15s}
.btn-add-cart:hover{background:#171717;color:#fff}
.btn-add-cart:disabled,.btn-add-cart.is-disabled{cursor:not-allowed;opacity:.6;background:#f2f2f2;color:#999;border-color:#e6e6e6}
.btn-add-cart:disabled:hover,.btn-add-cart.is-disabled:hover{background:#f2f2f2;color:#999}
.add-to-cart-form{max-width:220px;margin:0 auto}

/* ---- Товар закончился: приглушённое фото + серая пометка вместо цены/скидки ---- */
.product.out-of-stock .product-image img{opacity:.5;filter:grayscale(.4)}
.out-of-stock-badge{background:#8a8a8a;box-shadow:none}
.product-modal-add:disabled{cursor:not-allowed;opacity:.55;background:#1a1a1a}
.product-modal-add:disabled:hover{background:#1a1a1a;transform:none}

body:has(.cart-page){background:#fff9f7}
/* На странице корзины/оформления плавающая кнопка «Связаться» только мешает —
   перекрывает строки товара и поля формы адреса на телефоне. Здесь у
   покупателя и так есть прямое действие (оформить заказ), поэтому саму
   кнопку на этой странице не показываем. */
body:has(.cart-page) .fab-contact{display:none}
.cart-page{max-width:1100px;margin:0 auto;padding:150px 24px 90px}
.cart-page h1{font-size:38px;margin:0 0 40px}
.cart-empty{color:#777;font-size:16px}
.cart-empty a{color:#c9915f;font-weight:700}

.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}

.cart-items{display:flex;flex-direction:column;gap:18px;min-width:0}
.cart-row{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:22px;padding:20px;border-radius:18px;background:#fff;box-shadow:0 6px 28px rgba(60,34,38,.07);min-width:0}
.cart-row-image{width:104px;height:104px;border-radius:14px;overflow:hidden;background:#faf6f5}
.cart-row-image img{width:100%;height:100%;object-fit:contain}
.cart-row-info h3{font-size:18px;margin:0 0 8px;font-weight:700}
.cart-row-price{font-size:14px;color:#999}
/* Кол-во (-/1/+) и итоговая цена товара — всегда в одной строке: слева
   счётчик, справа цена. На десктопе это просто последняя колонка грида
   (счётчик и цена рядом друг с другом), на мобильном — на всю ширину
   карточки с ценой, прижатой вправо, см. медиа-запрос ниже. */
.cart-row-footer{display:flex;align-items:center;gap:22px}
.qty-form{display:flex;align-items:center;border:1px solid #eee;border-radius:30px;overflow:hidden}
.qty-btn{width:36px;height:36px;border:0;background:#faf6f5;font-size:17px;line-height:1;cursor:pointer;color:#171717}
.qty-btn:hover{background:#f0e5e2}
.qty-form input{width:44px;height:36px;border:0;text-align:center;font-size:15px;-moz-appearance:textfield;background:#fff}
.qty-form input::-webkit-outer-spin-button,.qty-form input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-row-end{display:flex;flex-direction:row;align-items:center;gap:18px}
.cart-row-total{font-weight:800;font-size:17px}

/* ---- Товар в корзине закончился/скрыт после того как его туда положили —
   раньше такая позиция спокойно оформлялась и оплачивалась, хотя купить её
   уже нельзя. Теперь она отмечается пометкой, не считается в сумме заказа
   (см. Cart.subtotal()) и не даёт оформить заказ, пока её не уберут (см.
   Cart.has_unavailable_items() и проверку в checkout()). ---- */
.cart-unavailable-notice{margin:0 0 4px;padding:13px 16px;border-radius:12px;background:#fff4e6;color:#a56a1f;font-size:13.5px;font-weight:600;line-height:1.5}
.cart-row-unavailable{opacity:.75}
.cart-row-unavailable .cart-row-image{filter:grayscale(.5)}
.cart-row-unavailable-badge{display:inline-flex;align-items:center;background:#8a8a8a;color:#fff;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}
.cart-row-remove-form{margin:0}
.cart-row-remove{border:1px solid #e2a4a4;color:#c0392b;background:#fff;padding:9px 16px;border-radius:30px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.cart-row-remove:hover{background:#c0392b;color:#fff}
.cart-row-total-muted{font-weight:600;font-size:13px;color:#999}
.error-text{margin:0 0 14px;padding:11px 14px;border-radius:10px;background:#fdeaea;color:#c0392b;font-size:13.5px;font-weight:600;line-height:1.5}

.cart-summary{position:sticky;top:96px;background:#fff;border-radius:18px;padding:30px;box-shadow:0 6px 28px rgba(60,34,38,.07)}
.cart-summary h2{font-size:22px;margin:0 0 22px}
.summary-row{display:flex;justify-content:space-between;font-size:15px;color:#888;margin-bottom:12px}
.summary-total{font-size:19px;font-weight:800;color:#171717;border-top:1px solid #f1e9e7;padding-top:16px;margin-top:6px}

.bulk-discount-hint{margin:0 0 14px;padding:11px 14px;border-radius:10px;background:#fdeef0;font-size:13px;font-weight:700;color:#c9915f;line-height:1.5}

.promo-block{margin:4px 0 14px}
.promo-form{display:flex;gap:8px}
.promo-form input{flex:1;min-width:0;padding:11px 13px;border:1px solid #eee;border-radius:10px;font-size:14px;text-transform:uppercase}
.promo-form input::placeholder{text-transform:none}
.promo-form button{flex:0 0 auto;padding:11px 18px;border:0;border-radius:10px;background:#1a1a1a;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
.promo-form button:hover{background:#000}
.promo-error{margin:8px 0 0;font-size:13px;color:#d0004b}
.promo-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:10px;background:#fdeef0;font-size:13px;color:#5a3a20;line-height:1.5}
.promo-applied strong{color:#c9915f}
.promo-remove{border:0;background:none;padding:0;color:#c9899a;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;flex:0 0 auto}
.promo-remove:hover{color:#d0004b}

.checkout-form{display:flex;flex-direction:column;gap:14px}
.checkout-form label{font-size:13px;color:#555}
.checkout-form .form-row{display:flex;gap:12px}
.checkout-form .form-row label{flex:1}
.checkout-form input{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid #eee;border-radius:10px;font-size:15px}
.cart-totals{margin-top:28px;padding-top:24px;border-top:1px solid #f1e9e7}
.cart-totals h2{margin-top:0}
.checkout-btn{width:100%;justify-content:center;border:0;cursor:pointer;margin-top:4px}
.checkout-terms{font-size:12px;line-height:1.5;color:#999;text-align:center;margin:10px 0 0}
.checkout-terms a{color:#999;text-decoration:underline}
.checkout-terms a:hover{color:#777}

.pay-block{border:1px solid #f1e0e3;border-radius:14px;padding:16px}
.pay-label{margin:0 0 12px;font-size:13px;font-weight:700;color:#555}
.pay-tabs{display:flex;gap:8px;margin-bottom:14px}
.pay-tab{flex:1;padding:10px;border-radius:30px;border:1px solid #eee;background:#fff;font-size:13px;font-weight:700;color:#888;cursor:pointer;transition:background .15s,color .15s}
.pay-tab.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.pay-panel{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pay-panel label{width:100%;text-align:left}
.pay-qr{width:130px;height:130px;border-radius:10px;border:1px solid #eee;padding:6px;background:#fff}
.pay-hint{font-size:12px;color:#999;margin:0;line-height:1.6}
.pay-mock-note{display:block;color:#c9915f;font-weight:600;margin-top:4px}

@media(max-width:900px){
  .cart-layout{grid-template-columns:minmax(0,1fr)}
  .cart-summary{position:static}
}
@media(max-width:640px){
  /* На узком экране блок кол-ва (-/1/+) раньше делил строку с ценой в
     колонке шириной всего 64px и наезжал на неё — теперь у количества и
     итога/удаления своя отдельная строка на всю ширину карточки. */
  .cart-page{padding:110px 16px 60px}
  .cart-page h1{font-size:28px;margin:0 0 24px}
  .cart-row{grid-template-columns:64px 1fr;grid-template-areas:"img info" "footer footer";gap:14px 16px;padding:16px}
  .cart-row-image{grid-area:img;width:64px;height:64px}
  .cart-row-info{grid-area:info;min-width:0}
  .cart-row-info h3{font-size:16px}
  .cart-row-footer{grid-area:footer;justify-content:space-between}
  .cart-row-end{justify-content:flex-end}
  .cart-summary{padding:20px}
  .checkout-form .form-row{flex-direction:column;gap:14px}
}

/* ---- Страница документов (оферта) ---- */
.doc-page{max-width:760px;margin:0 auto;padding:150px 24px 90px}
.doc-page h1{font-size:36px;margin:0 0 8px}
.doc-subtitle{color:#999;font-size:15px;margin:0 0 40px}
.doc-page h2{font-size:21px;margin:36px 0 14px}
.doc-page h3{font-size:17px;margin:24px 0 10px}
.doc-page p{font-size:16px;line-height:1.8;color:#333;margin:0 0 12px}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0 24px}
.doc-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid #f1e0e3;transition:box-shadow .15s,transform .15s}
.doc-card:hover{box-shadow:0 10px 30px rgba(60,34,38,.08);transform:translateY(-2px)}
.doc-card-text h3{margin:0 0 6px;font-size:17px;font-weight:700;font-family:'Manrope',sans-serif}
.doc-card-text span{font-size:13px;color:#999}
.doc-download{width:38px;height:38px;border-radius:50%;background:#fdeef0;color:#c9915f;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.doc-note{font-size:13px;color:#999;line-height:1.7}
.doc-note a{color:#c9915f;text-decoration:underline}
@media(max-width:640px){.doc-grid{grid-template-columns:1fr}}

/* ---- Страница "Сертификаты и партнёры" ---- */
.cert-page p{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
.cert-page .doc-note,.cert-page .doc-subtitle{text-align:left}
.cert-card{margin:28px 0 8px;padding:24px;border-radius:16px;background:#fff;border:1px solid #f1e0e3;text-align:center}
.cert-image-link{display:block}
.cert-image{max-width:100%;width:340px;border-radius:10px;box-shadow:0 10px 30px rgba(60,34,38,.1)}
.cert-card .cert-caption{margin:16px 0 0;font-size:13px;color:#999;line-height:1.6;text-align:center}
/* Разделение "Сертификаты" и "Партнёры" на отдельные подразделы одной страницы
   (раньше партнёр упоминался одним абзацем внутри блока сертификатов). */
.cert-section{margin:0 0 56px}
.cert-section:last-of-type{margin-bottom:36px}
.cert-section-title{margin-top:0;font-size:28px}
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.partner-card{padding:24px;border-radius:16px;background:#fdeef0}
.partner-card h3{margin:0 0 10px;font-size:17px;line-height:1.3;text-align:left}
.partner-card p{margin:0;font-size:14px;line-height:1.7;color:#666;text-align:left}
@media(max-width:700px){
  .partner-grid{grid-template-columns:1fr}
}

/* ---- Страница "Заказ оформлен" ---- */
.success-page{max-width:560px;margin:0 auto;padding:154px 24px 100px;text-align:center}
.success-icon{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:#e9f7ec;color:#2e9e52;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center}
.success-page h1{font-size:28px;margin:0 0 10px}
.success-sub{font-size:14px;color:#999;margin:0 0 40px}
.success-card{background:#fff;border-radius:16px;padding:24px;margin-bottom:20px;text-align:left;box-shadow:0 6px 24px rgba(60,34,38,.06)}
.success-card h2{font-size:16px;margin:0 0 14px}
.success-card p{font-size:14px;color:#555;margin:0 0 4px}
.success-row{display:flex;justify-content:space-between;font-size:14px;color:#555;padding:6px 0}
.success-row-total{border-top:1px solid #f1e0e3;margin-top:8px;padding-top:12px;font-weight:800;color:#1a1a1a;font-size:17px}
.success-page .button{margin-top:12px}
.success-contact{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.success-contact .button{margin-top:0;justify-content:center;width:100%}
.button-whatsapp{background:#25d366}
.button-whatsapp:hover{background:#1fb857}
.button-telegram{background:#229ed9}
.button-telegram:hover{background:#1c88ba}
.success-continue{background:transparent;color:#1a1a1a;border:1px solid #ddd}
.success-continue:hover{background:#f6f0ee}
.success-redirect-note{font-size:12px;color:#aaa;margin:-6px 0 20px;text-align:center}

/* ---- Блок доверия ---- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:60px 6vw;background:#fff9f7;max-width:940px;margin:0 auto}
.trust-item{text-align:center}
.trust-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto 18px;border-radius:50%;background:#fdeef0;color:#c9915f}
.trust-icon svg{display:block;width:32px;height:32px;flex:0 0 auto}
.trust-item h4{margin:0 0 9px;font-size:16px;font-weight:700;font-family:'Manrope',sans-serif}
.trust-item p{margin:0;font-size:14px;line-height:1.6;color:#777}

/* ---- Главная: «Часто задаваемые вопросы» — аккордеон. Белые закруглённые
   плашки-вопросы лежат на светло-сером фоне секции; открывается только один
   вопрос за раз, стрелка справа разворачивается на 180°. Раскрытие анимируем
   через grid-template-rows (0fr → 1fr) — плавно, без расчёта высоты в JS. ---- */
.faq{max-width:860px;margin:0 auto;padding:60px 6vw 70px;background:#f4f1ef;border-radius:28px}
.faq-head{text-align:center;margin-bottom:28px}
.faq-head h2{margin:0;font-size:32px}
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border-radius:16px;box-shadow:0 1px 4px rgba(60,34,38,.05)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border:0;background:transparent;text-align:left;font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;color:#1a1a1a;cursor:pointer;border-radius:16px}
.faq-question:hover{background:rgba(0,0,0,.02)}
.faq-arrow{flex:0 0 auto;color:#8a8a8a;transition:transform .25s}
.faq-item.is-open .faq-arrow{transform:rotate(180deg);color:#1a1a1a}
.faq-answer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-item.is-open .faq-answer-wrap{grid-template-rows:1fr}
.faq-answer{overflow:hidden}
.faq-answer p{margin:0 24px 20px;font-size:14.5px;line-height:1.65;color:#666}
.faq-answer p a{text-decoration:underline;text-underline-offset:2px;color:#1a1a1a;font-weight:700}

/* ---- Кнопка с иконкой WhatsApp и пульсацией ---- */
.button{align-items:center;gap:8px}
.button-pulse{position:relative}
.button-pulse::after{content:'';position:absolute;inset:0;border-radius:999px;background:#1a1a1a;opacity:.5;animation:btn-pulse 1.8s ease-out infinite;animation-play-state:paused;z-index:-1}
.button-pulse.pulse-active::after{animation-play-state:running}
@keyframes btn-pulse{
  0%{transform:scale(1);opacity:.45}
  100%{transform:scale(1.35);opacity:0}
}

/* ---- Блок "О нас" ---- */
.about-us{padding:60px 6vw 100px;background:#fff9f7}
/* "О нас" теперь отдельная страница — сверху нужен отступ под фиксированную
   шапку сайта, как на остальных отдельных страницах (документы, категории). */
.about-us.about-standalone{padding-top:150px}
.about-intro{max-width:760px;margin:0 auto 90px;text-align:center}
.about-intro .eyebrow{color:#c9915f}
.about-intro h2{font-size:46px;line-height:1.15;margin:0 0 22px}
.about-lead{font-size:19px;line-height:1.75;color:#555;margin:0}
.about-pillars{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.about-pillar{border-top:2px solid #1a1a1a;padding-top:24px}
.about-pillar-num{display:block;font-family:'Playfair Display',Georgia,serif;font-size:16px;font-weight:700;color:#c9915f;margin-bottom:16px}
.about-pillar h3{font-size:21px;margin:0 0 12px;line-height:1.3}
.about-pillar p{font-size:15px;line-height:1.75;color:#666;margin:0}

/* ---- "О нас": миссия/видение, ценности, партнёры (расширенный текст) ---- */
.about-split{max-width:1000px;margin:0 auto 90px;display:grid;grid-template-columns:1fr 1fr;gap:52px}
.about-split-item h3{font-size:22px;margin:0 0 14px;line-height:1.3}
.about-split-item p{font-size:15px;line-height:1.8;color:#666;margin:0}
.about-values{max-width:1100px;margin:0 auto 90px}
.about-values h2{text-align:center;font-size:32px;line-height:1.2;margin:0 0 50px}
.about-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.about-value{border-top:2px solid #1a1a1a;padding-top:22px}
.about-value h3{font-size:17px;margin:0 0 10px;line-height:1.35}
.about-value p{font-size:14px;line-height:1.7;color:#666;margin:0}
/* Инфо про конкретных партнёров (БЦК, Minh Ha) теперь ТОЛЬКО на странице
   «Сертификаты и партнёры» (certificates.html) — здесь, на «О нас», вместо
   дублирующего блока остаётся только ссылка туда, чтобы не рассказывать
   об одном и том же в двух разных местах по-разному. */
.about-partners-link{max-width:700px;margin:0 auto 70px;text-align:center;font-size:15px;color:#777}
.about-partners-link a{color:#c9915f;text-decoration:underline}
.about-tagline{max-width:700px;margin:0 auto;text-align:center;font-size:19px;font-weight:700;line-height:1.6;color:#1a1a1a}

@media(max-width:800px){
  .trust{grid-template-columns:1fr;gap:32px;padding:50px 24px}
  .faq{padding:40px 16px 46px;border-radius:20px;margin:0 4px}
  .faq-head h2{font-size:24px}
  .faq-question{padding:16px 18px;font-size:14.5px;gap:10px}
  .faq-answer p{margin:0 18px 16px;font-size:13.5px}
  .about-us{padding:60px 18px 70px}
  .about-intro{margin-bottom:56px}
  .about-intro h2{font-size:30px}
  .about-lead{font-size:16px}
  .about-pillars{grid-template-columns:1fr;gap:38px}
  .about-split{grid-template-columns:1fr;gap:32px;margin-bottom:56px}
  .about-values{margin-bottom:56px}
  .about-values h2{font-size:24px;margin-bottom:34px}
  .about-values-grid{grid-template-columns:1fr 1fr;gap:28px}
  .about-partners-link{margin-bottom:56px;font-size:14px}
  .about-tagline{font-size:16px}
}

/* =====================================================================
   ТЁМНАЯ ТЕМА — [data-theme="dark"] переопределения
   =====================================================================
   Вся светлая тема выше остаётся БЕЗ ИЗМЕНЕНИЙ — ни один литеральный цвет
   там не тронут. Вместо переписывания всего файла на CSS-переменные (риск
   регрессии на уже отлаженной вёрстке слишком велик для файла, где каждая
   вторая строчка — результат отдельного разбора бага), тёмная тема
   реализована отдельным блоком в конце файла: селекторы с префиксом
   [data-theme="dark"] .selector{...}. У атрибутного селектора та же "цена"
   специфичности, что у класса, поэтому даже без !important эти правила
   гарантированно перебивают одноимённые светлые селекторы выше.

   [data-theme="dark"] ставится на <html> инлайновым скриптом в <head> каждой
   страницы (до отрисовки — чтобы не было "мигания" неправильной темой) и
   переключается кликом по .theme-toggle (десктоп) или .nav-theme-toggle
   (телефон/планшет внутри гамбургер-меню) — оба используют один обработчик
   в script.js. Выбор сохраняется в localStorage; если пользователь ещё
   ничего не выбирал вручную — используется системная настройка устройства
   (prefers-color-scheme), как и просил пользователь.

   Что НЕ трогаем и почему (чтобы не переоткрывать этот вопрос при
   следующей правке):
   - .site-footer и его содержимое — уже тёмные (#161616) в светлой теме,
     одинаково хорошо смотрятся при любой теме сайта.
   - .swiper-dots (все варианты) и .wishlist-toggle — лежат поверх реальных
     фотографий (не фона страницы), их контраст зависит от самого фото, а
     не от темы сайта; фото при смене темы не меняются.
   - .pay-qr — QR-код должен остаться на светлой подложке, иначе часть
     сканеров его не прочитает.
   - WhatsApp/Telegram/Instagram-цвета, розовый акцент (#ff8fa3), золотой
     акцент (#c9915f), красный бейдж скидки (#ff4d6d) — уже достаточно
     контрастны на тёмном фоне, не меняем, чтобы не плодить лишние правила.
   - Реальные фото товаров — как правило, сняты на светлом/белом фоне;
     это нормально и для тёмной темы (так же выглядит, например, у
     маркетплейсов) — перекрашивать сами фотографии не пытаемся. */

[data-theme="dark"] body{background:var(--dark-bg);color:var(--dark-text)}
/* body:has(.cart-page) объявлен ВЫШЕ как body:has(.cart-page){background:#fff9f7}
   — у :has() та же "цена" специфичности, что у класса, поэтому этот светлый
   селектор (0,1,1) имеет ровно такую же специфичность, как и обычный
   [data-theme="dark"] body (тоже 0,1,1). Не полагаемся на порядок объявления
   в спорном edge-case — переопределяем явно, тем же селектором. */
[data-theme="dark"] body:has(.cart-page){background:var(--dark-bg)}

/* ---- Шапка сайта ---- */
[data-theme="dark"] .site-header{background:rgba(28,24,25,.9);border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .brand-word{color:var(--dark-text)}
[data-theme="dark"] nav a{color:var(--dark-text)}
[data-theme="dark"] .nav-cta{background:var(--dark-text);color:#121212}
[data-theme="dark"] .nav-cta:hover{background:#fff}
[data-theme="dark"] .cart-icon,[data-theme="dark"] .wishlist-icon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--dark-text)}
[data-theme="dark"] .cart-icon:hover,[data-theme="dark"] .wishlist-icon:hover{background:rgba(255,255,255,.12)}
[data-theme="dark"] .cart-badge,[data-theme="dark"] .wishlist-badge{border-color:#1c1c1c}
[data-theme="dark"] .lang-select{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--dark-text)}
[data-theme="dark"] .lang-select:hover{background:rgba(255,255,255,.16)}
[data-theme="dark"] .lang-select:focus{outline-color:rgba(255,255,255,.35)}
[data-theme="dark"] .search-toggle{color:var(--dark-text)}
[data-theme="dark"] .search-toggle:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .theme-toggle{color:var(--dark-text)}
[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .nav-theme-toggle{color:var(--dark-text)}
[data-theme="dark"] .search-bar{background:rgba(28,24,25,.97);border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .search-input{border-color:rgba(255,255,255,.16);background:var(--dark-surface-soft);color:var(--dark-text)}
[data-theme="dark"] .search-input:focus{outline-color:rgba(255,255,255,.3)}
[data-theme="dark"] .search-submit{background:var(--dark-text);color:#121212}
[data-theme="dark"] .search-submit:hover{background:#fff}
[data-theme="dark"] .menu{color:var(--dark-text)}
[data-theme="dark"] input::placeholder{color:#8a8580}

/* ---- Плавающая кнопка связи и тост "Добавлено в корзину" — уже тёмные,
   чуть осветляем, чтобы не сливались с таким же тёмным фоном страницы. ---- */
[data-theme="dark"] .fab-toggle{background:var(--dark-surface-soft);border:1px solid rgba(255,255,255,.14)}
[data-theme="dark"] .fab-toggle:hover{background:#2f2f2f}
[data-theme="dark"] .cart-toast{background:var(--dark-surface-soft);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---- Слайдер на главной, каталог, карточки товара ---- */
[data-theme="dark"] .results-swiper{background:#2a2a2a}
[data-theme="dark"] .catalog{background:var(--dark-bg)}
[data-theme="dark"] .catalog-head>p:last-child{color:var(--dark-muted)}
[data-theme="dark"] .promo-banner{background:#2a211c;color:#e3a874}
[data-theme="dark"] .product{background:var(--dark-surface)}
[data-theme="dark"] .product:hover{box-shadow:0 16px 40px rgba(0,0,0,.4)}
/* Реальные фото товаров почти все сфотографированы на собственном белом (реже
   цветном) фоне, а сама .product-image в разметке — прозрачная, без своего
   фона (в светлой теме это незаметно, потому что карточка `.product` и так
   белая — фото просто "сливается" с ней). В тёмной же теме карточка стала
   тёмной, и у каждого фото проступает СВОЙ кусок белого/цветного фона разного
   размера (зависит от пропорций конкретного фото) — вперемешку с фото без
   такого шва получается неряшливо и вразнобой. Возвращаем единый светлый
   "постамент" под фото независимо от темы сайта — так все карточки в сетке
   выглядят одинаково, а не как попало в зависимости от фона исходного фото. */
[data-theme="dark"] .product-image{background:#fff}
[data-theme="dark"] .product p{color:var(--dark-muted)}
[data-theme="dark"] .product-volume{color:#9a948e}
[data-theme="dark"] .price-old{color:#8a8580}
[data-theme="dark"] .catalog-loading{color:var(--dark-muted)}
[data-theme="dark"] .category-chip{color:var(--dark-muted)}
[data-theme="dark"] .category-chip:hover{background:var(--dark-surface-soft);border-color:var(--dark-border);color:var(--dark-text)}
[data-theme="dark"] .category-chip.active{background:var(--dark-text);color:#121212;border-color:var(--dark-text)}
[data-theme="dark"] .pagination-page,[data-theme="dark"] .pagination-arrow{color:var(--dark-text)}
[data-theme="dark"] .pagination-page:hover,[data-theme="dark"] .pagination-arrow:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .pagination-page.is-active{background:var(--dark-text);color:#121212}
[data-theme="dark"] .pagination-arrow.is-disabled{color:#4a4a4a}
[data-theme="dark"] .pagination-ellipsis{color:var(--dark-muted)}

/* ---- Модальное окно товара ---- */
[data-theme="dark"] .product-modal-card{background:var(--dark-surface)}
[data-theme="dark"] .product-modal-close{background:rgba(255,255,255,.08)}
[data-theme="dark"] .product-modal-close:hover{background:rgba(255,255,255,.15)}
/* Тот же светлый "постамент" под фото, что и у .product-image в каталоге
   (см. комментарий там) — и по той же причине здесь НЕ переопределяем точки
   карусели (.product-modal-gallery-dots): они лежат поверх этого же светлого
   фона в ЛЮБОЙ теме сайта, поэтому их обычная светлая раскраска (тёмные точки
   на светлом, см. правило без [data-theme] выше) подходит без изменений. */
[data-theme="dark"] .product-modal-image{background:#fff}
[data-theme="dark"] .product-modal-body{scrollbar-color:rgba(255,255,255,.22) transparent}
[data-theme="dark"] .product-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
[data-theme="dark"] .product-modal-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38)}
[data-theme="dark"] .product-modal-body p{color:var(--dark-muted)}
[data-theme="dark"] .product-modal-volume{color:#9a948e}

/* ---- Кнопки: инвертируем тёмную (#1a1a1a) заливку в светлую — на тёмном
   фоне это даёт лучший контраст и читается как обычный приём тёмных
   интерфейсов (главное действие — светлым пятном на тёмном фоне). ---- */
[data-theme="dark"] .button{background:var(--dark-text);color:#121212}
[data-theme="dark"] .button:hover{background:#fff}
[data-theme="dark"] .button-pulse::after{background:var(--dark-text)}
[data-theme="dark"] .success-continue{color:var(--dark-text);border-color:#3a3a3a;background:transparent}
[data-theme="dark"] .success-continue:hover{background:#242424}

/* ---- Футер и FAQ ---- */
[data-theme="dark"] .faq{background:#181818}
[data-theme="dark"] .faq-item{background:var(--dark-surface-soft);box-shadow:0 1px 4px rgba(0,0,0,.3)}
[data-theme="dark"] .faq-question{color:var(--dark-text)}
[data-theme="dark"] .faq-question:hover{background:rgba(255,255,255,.04)}
[data-theme="dark"] .faq-arrow{color:#8a8580}
[data-theme="dark"] .faq-item.is-open .faq-arrow{color:var(--dark-text)}
[data-theme="dark"] .faq-answer p{color:var(--dark-muted)}
[data-theme="dark"] .faq-answer p a{color:var(--dark-text)}

/* ---- О нас ---- */
[data-theme="dark"] .about-us{background:var(--dark-bg)}
[data-theme="dark"] .about-lead{color:var(--dark-muted)}
[data-theme="dark"] .about-pillar{border-top-color:var(--dark-text)}
[data-theme="dark"] .about-pillar p{color:var(--dark-muted)}
[data-theme="dark"] .about-split-item p{color:var(--dark-muted)}
[data-theme="dark"] .about-value{border-top-color:var(--dark-text)}
[data-theme="dark"] .about-value p{color:var(--dark-muted)}
[data-theme="dark"] .about-partners-link{color:var(--dark-muted)}
[data-theme="dark"] .about-tagline{color:var(--dark-text)}

/* ---- Документы / сертификаты и партнёры ---- */
[data-theme="dark"] .doc-page p{color:var(--dark-text)}
[data-theme="dark"] .doc-subtitle{color:var(--dark-muted)}
[data-theme="dark"] .doc-card{background:var(--dark-surface);border-color:var(--dark-border)}
[data-theme="dark"] .doc-card-text span{color:var(--dark-muted)}
[data-theme="dark"] .doc-download{background:#2a211c;color:#e3a874}
[data-theme="dark"] .doc-note{color:var(--dark-muted)}
[data-theme="dark"] .cert-card{background:var(--dark-surface);border-color:var(--dark-border)}
[data-theme="dark"] .cert-card .cert-caption{color:var(--dark-muted)}
[data-theme="dark"] .partner-card{background:#2a211c}
[data-theme="dark"] .partner-card p{color:var(--dark-muted)}

/* ---- Заказ оформлен ---- */
[data-theme="dark"] .success-sub{color:var(--dark-muted)}
[data-theme="dark"] .success-card{background:var(--dark-surface)}
[data-theme="dark"] .success-card p{color:var(--dark-muted)}
[data-theme="dark"] .success-row{color:var(--dark-muted)}
[data-theme="dark"] .success-row-total{border-top-color:var(--dark-border);color:var(--dark-text)}
[data-theme="dark"] .success-redirect-note{color:#8a8580}

/* ---- Блок доверия ---- */
[data-theme="dark"] .trust{background:var(--dark-bg)}
[data-theme="dark"] .trust-icon{background:#2a211c;color:#e3a874}
[data-theme="dark"] .trust-item p{color:var(--dark-muted)}

/* ---- Корзина и оформление заказа ---- */
[data-theme="dark"] .cart-empty{color:var(--dark-muted)}
[data-theme="dark"] .cart-row{background:var(--dark-surface)}
/* Тот же светлый "постамент" под фото, что и у .product-image/.product-modal-image
   (см. подробный комментарий там) — без него получился бы такой же неровный
   шов от собственного (обычно белого) фона фотографии товара. */
[data-theme="dark"] .cart-row-image{background:#fff}
[data-theme="dark"] .cart-row-price{color:var(--dark-muted)}
[data-theme="dark"] .qty-form{border-color:var(--dark-border)}
[data-theme="dark"] .qty-btn{background:var(--dark-surface-soft);color:var(--dark-text)}
[data-theme="dark"] .qty-btn:hover{background:#2e2e2e}
[data-theme="dark"] .qty-form input{background:var(--dark-surface-soft);color:var(--dark-text)}
[data-theme="dark"] .catalog-qty .qty-btn{background:var(--dark-surface-soft);color:var(--dark-text)}
[data-theme="dark"] .catalog-qty .qty-btn:hover{background:#2e2e2e}
[data-theme="dark"] .catalog-qty input{background:var(--dark-surface-soft);color:var(--dark-text)}
[data-theme="dark"] .cart-unavailable-notice{background:#2e2416;color:#e0a668}
[data-theme="dark"] .cart-row-remove{background:transparent;border-color:#6b3838;color:#e0655a}
[data-theme="dark"] .cart-row-remove:hover{background:#c0392b;color:#fff}
[data-theme="dark"] .cart-row-total-muted{color:var(--dark-muted)}
[data-theme="dark"] .error-text{background:#301c1c;color:#e0655a}
[data-theme="dark"] .cart-summary{background:var(--dark-surface)}
[data-theme="dark"] .summary-row{color:var(--dark-muted)}
[data-theme="dark"] .summary-total{color:var(--dark-text);border-top-color:var(--dark-border)}
[data-theme="dark"] .bulk-discount-hint{background:#2a211c;color:#e3a874}
[data-theme="dark"] .promo-form input{background:var(--dark-surface-soft);color:var(--dark-text);border-color:var(--dark-border)}
[data-theme="dark"] .promo-form button{background:var(--dark-text);color:#121212}
[data-theme="dark"] .promo-form button:hover{background:#fff}
[data-theme="dark"] .promo-error{color:#ff5c85}
[data-theme="dark"] .promo-applied{background:#2a211c;color:#e3c2a0}
[data-theme="dark"] .promo-remove{color:#d9a7b5}
[data-theme="dark"] .promo-remove:hover{color:#ff5c85}
[data-theme="dark"] .checkout-form label{color:var(--dark-muted)}
[data-theme="dark"] .checkout-form input{background:var(--dark-surface-soft);color:var(--dark-text);border-color:var(--dark-border)}
[data-theme="dark"] .cart-totals{border-top-color:var(--dark-border)}
[data-theme="dark"] .checkout-terms{color:var(--dark-muted)}
[data-theme="dark"] .checkout-terms a{color:var(--dark-muted)}
[data-theme="dark"] .checkout-terms a:hover{color:#cfc9c3}

/* ---- Оплата (кроме .pay-qr — см. пояснение в шапке этого блока) ---- */
[data-theme="dark"] .pay-block{border-color:var(--dark-border)}
[data-theme="dark"] .pay-label{color:var(--dark-muted)}
[data-theme="dark"] .pay-tab{background:var(--dark-surface-soft);border-color:var(--dark-border);color:var(--dark-muted)}
[data-theme="dark"] .pay-tab.active{background:var(--dark-text);color:#121212;border-color:var(--dark-text)}
[data-theme="dark"] .pay-hint{color:var(--dark-muted)}