/* ==========================================================================
   SHANTI — user.css шаблона сайта
   Пересобран 18.08.2026 вместе с ArtiCart 1.9.41.

   ЧТО ИЗМЕНИЛОСЬ ПРИ ПЕРЕСБОРКЕ (коротко, чтобы не искать глазами):

   1. ОФОРМЛЕНИЕ УГЛОВОГО ШТАМПА (.cart-action-corner-seal*).
      Оно переехало в media/com_articart/css/articart.css — там же и починена
      форма на телефоне. Держать его здесь БОЛЬШЕ НЕЛЬЗЯ: user.css
      подключается ПОСЛЕ стилей компонента и перебил бы исправление.

   2. ЕДИНАЯ ШКАЛА КЕГЛЕЙ (--fs-*). Раньше размеры задавались вперемешку:
      18px, 15px, 13px, 22px, 1.2rem, «0.75 rem» с пробелом (такая строка
      целиком отбрасывается браузером — подпись даты работала не так, как
      написано). Теперь на весь сайт восемь ступеней на clamp(): каждая
      растёт с шириной экрана сама, и отдельные медиазапросы «уменьшить
      шрифт на телефоне» больше не нужны.

   3. ИСПРАВЛЕНЫ ВЗАИМНЫЕ ОТМЕНЫ. Полдесятка правил гасили друг друга:
      разделитель у цены задавался и тут же снимался; .blog получал двойную
      рамку и следом «border: none»; у заголовка карточки стояли и
      «hyphens: auto», и «hyphens: none !important».

   ПОРЯДОК РАЗДЕЛОВ = ПОРЯДОК ЧТЕНИЯ СТРАНИЦЫ: переменные, база, шапка,
   контент, каталог, товар, подвал.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');


/* ==========================================================================
   0. ПЕРЕМЕННЫЕ
   ========================================================================== */

:root {
    /* --- Палитра --- */
    --shanti-maroon:     #8a081d;   /* фирменный бордовый фон */
    --shanti-maroon-alt: #7d1f31;   /* подложка выпадающих меню */
    --shanti-gold:       #dde426;   /* «золото»: рамки, ссылки */
    --shanti-amber:      #fbb53a;   /* основной текст */
    --shanti-amber-soft: #f2ce4b;   /* даты, крошки, второстепенное */
    --shanti-sand:       #f9f6e5;   /* песочный ховер */
    --shanti-accent:     #ca0f32;   /* активный пункт меню */

    /* Совместимость с Cassiopeia: шаблон читает эти имена сам. */
    --cassiopeia-color-primary: var(--shanti-maroon);
    --cassiopeia-color-hover:   var(--shanti-sand);
    --cassiopeia-color-link:    var(--shanti-gold);

    --font-family-headings: 'Philosopher', sans-serif;
    --font-family-base:     'Lora', serif;

    /* ----------------------------------------------------------------------
       ШКАЛА КЕГЛЕЙ

       Восемь ступеней, каждая — clamp() от 360 px до 1280 px ширины экрана.
       Читать так: clamp(МИНИМУМ, наклон, МАКСИМУМ); середина посчитана, а не
       подобрана на глаз, поэтому между ступенями нет ни провалов, ни
       перехлёстов.

       ЗАЧЕМ ЭТО НУЖНО ИМЕННО ЗДЕСЬ. Пока размеры стояли числами в разных
       разделах, они расходились по одному: описание категории 18px, SEO-блок
       15px, заголовок карточки 18px, заголовок каталога 22px — четыре решения
       об одном и том же, принятые в четыре разных дня. Ступень отвечает на
       вопрос «насколько это крупнее обычного текста», а не «сколько тут
       пикселей», и такой ответ переживает смену базового кегля.

       ОТДЕЛЬНЫХ «МОБИЛЬНЫХ» РАЗМЕРОВ БОЛЬШЕ НЕТ И НЕ ДОЛЖНО ПОЯВЛЯТЬСЯ.
       clamp меняется непрерывно; ступенька в медиазапросе — это ровно то
       место, где однажды напишут правило не на тот селектор (так и случилось
       с угловым штампом: на 480 px он превращался в овал).
       ---------------------------------------------------------------------- */
    --fs-xs: clamp(0.75rem,   0.726rem + 0.109vw, 0.8125rem);  /* 12 → 13 px */
    --fs-sm: clamp(0.8125rem, 0.788rem + 0.109vw, 0.875rem);   /* 13 → 14 px */
    --fs-md: clamp(0.9375rem, 0.913rem + 0.109vw, 1rem);       /* 15 → 16 px — базовый текст */
    --fs-lg: clamp(1.0625rem, 1.014rem + 0.217vw, 1.1875rem);  /* 17 → 19 px */
    --fs-xl: clamp(1.1875rem, 1.114rem + 0.326vw, 1.375rem);   /* 19 → 22 px */
    --fs-h3: clamp(1.25rem,   1.152rem + 0.435vw, 1.5rem);     /* 20 → 24 px */
    --fs-h2: clamp(1.5rem,    1.304rem + 0.870vw, 2rem);       /* 24 → 32 px */
    --fs-h1: clamp(1.75rem,   1.457rem + 1.304vw, 2.5rem);     /* 28 → 40 px */

    /* Плотность строки: у заголовков плотнее, у текста свободнее. Тоже
       переменными — чтобы «читаемость» правилась в одном месте. */
    --lh-tight: 1.2;
    --lh-base:  1.55;
}


/* ==========================================================================
   1. БАЗА И ТИПОГРАФИКА
   ========================================================================== */

html {
    /* Размер корня НЕ переопределяем: от него считаются все rem, включая
       системные настройки крупного шрифта у слабовидящих. */
    scroll-behavior: smooth;

    /* Отступ для якорных ссылок под липкой шапкой (--hdr-h ставит
       smart-header.js). Без него ссылка из письма или из корзины
       прокручивает страницу так, что плашка товара прячется под шапкой. */
    scroll-padding-top: var(--hdr-h, 0px);
}

/* Плавную прокрутку просят выключать не из вкусовых соображений: она
   вызывает укачивание. Отдельным правилом, потому что smooth задан выше. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background-color: var(--shanti-maroon);
    color: var(--shanti-amber);
    font-family: var(--font-family-base), system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: var(--fs-md);
    line-height: var(--lh-base);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ЗАГОЛОВКИ — ОДИН БЛОК НА ВСЕ ШЕСТЬ УРОВНЕЙ.
   Раньше их было два: в первом задавались размеры, в третьем разделе — шрифт,
   цвет и капитель. Разделённые, они читались как разные предметы, и правка
   цвета уезжала в конец файла. */
h1, h2, h3, h4, h5, h6,
.page-header h1, .page-header h2,
.moduletable h3, .card-title {
    font-family: var(--font-family-headings);
    color: var(--shanti-amber);
    text-transform: uppercase;
    font-weight: 700;
    line-height: var(--lh-tight);
    margin-top: 0;
    margin-bottom: .5em;

    /* Длинное слово в заголовке на узком экране раздвигает страницу вбок.
       Правило было только в медиазапросе ≤480px, хотя ломается и на 600px
       в узкой колонке каталога. */
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 {
    font-size: var(--fs-h1);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.01em;
}

h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

/* Первый заголовок второго уровня в теле статьи отбивается от плавающей
   картинки вступления. */
.com-content-article__body h2:first-of-type {
    display: block;
    clear: both;
    margin-top: 4rem;
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Лид-абзац: первый абзац статьи крупнее обычного. */
p.lead {
    font-size: var(--fs-lg);
}

/* На узких экранах абзацы стоят плотнее — это отступы, а не кегль, и
   поэтому осталось медиазапросом: кегль своё возьмёт из clamp. */
@media (max-width: 480px) {
    p { margin-bottom: 1rem; }
}

.left.item-image img {
    padding-right: 2em;
}


/* ==========================================================================
   2. ССЫЛКИ, ХЛЕБНЫЕ КРОШКИ, МЕНЮ
   ========================================================================== */

a, .header a, .mod-menu a {
    color: var(--shanti-gold) !important;
    text-decoration: none !important;
}

a:hover, .header a:hover, .mod-menu a:hover {
    color: var(--shanti-sand) !important;
    text-decoration: none !important;
}

/*
 * ИСКЛЮЧЕНИЯ ИЗ ГЛОБАЛЬНОГО ЦВЕТА ССЫЛОК.
 *
 * Правило выше написано на голый селектор `a` с !important, то есть побеждает
 * ЛЮБОЕ правило компонента без !important — включая те, где цвет ссылки несёт
 * смысл: золотая ссылка внутри тултипа корзины, приглушённая «повернутися до
 * покупок» рядом с яркой кнопкой заказа. Без этих четырёх строк они все
 * становились одинаково жёлто-зелёными, и «второстепенное действие»
 * переставало читаться как второстепенное.
 *
 * Селекторы по классу (0,1,0) сильнее селектора по тегу (0,0,1), поэтому
 * порядок в файле здесь роли не играет — эти правила победят в любом месте.
 */
.header-cart-tooltip-link       { color: #e6b94a !important; }
.header-cart-tooltip-link:hover { color: #ffd700 !important; }

.ac-link { color: rgba(212, 175, 100, .72) !important; }
.ac-link:hover,
.ac-link:focus-visible { color: rgb(212, 175, 100) !important; }

.header {
    background: var(--shanti-maroon) !important;
}

.breadcrumb {
    color: var(--shanti-amber) !important;
    font-size: var(--fs-md);
    background: none;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--shanti-amber) !important;
}

.breadcrumb-item a:hover {
    color: var(--shanti-sand) !important;
}

/* Разделитель крошек — двойная стрелка вместо дефолтного слеша. */
.breadcrumb-item + .breadcrumb-item::before {
    content: "»" !important;
    color: var(--shanti-amber-soft) !important;
    font-weight: bold !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Значок геопозиции и кастомные тире шаблона в крошках лишние. */
.breadcrumb span.divider,
.breadcrumb .divider-container {
    display: none !important;
}

/* Контейнер-изолятор для иконки домика: создаёт отступ до текста. */
.shanti-breadcrumbs-icon-wrap {
    display: inline-block !important;
    position: relative !important;
    width: 33px !important;   /* 25px иконка + 8px отступ до текста */
    height: 25px !important;
    vertical-align: middle !important;
}

.shanti-breadcrumbs-icon {
    position: absolute !important;
    width: 25px !important;
    height: 25px !important;
    left: 0 !important;
    top: -4px !important;     /* этой цифрой двигать домик вверх/вниз */
}

/* --- Главное меню --- */
.container-nav, .navbar, .navbar-nav {
    background: transparent !important;
}

.navbar-nav .nav-link {
    color: var(--shanti-gold) !important;
    font-family: var(--font-family-headings) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: var(--shanti-accent) !important;
}

.navbar-nav .dropdown-menu {
    background-color: var(--shanti-maroon-alt) !important;
    border: 1px solid var(--shanti-gold) !important;
}

.navbar-nav .dropdown-item {
    color: var(--shanti-gold) !important;
}

.navbar-nav .dropdown-item:hover {
    background-color: transparent !important;
    color: var(--shanti-accent) !important;
}


/* ==========================================================================
   3. РАМКИ БЛОКОВ И КАРТОЧКИ МОДУЛЕЙ
   ========================================================================== */

/*
 * ДВОЙНАЯ РАМКА ТОЛЬКО ВОКРУГ СТАТЬИ.
 *
 * Раньше здесь стояло «.com-content-article, .blog», а в разделе каталога —
 * «.blog { border: none !important }». То есть рамка вокруг блога задавалась
 * и тут же снималась, и понять по первому правилу, что происходит на
 * странице категории, было нельзя. Блог рамки не получает вовсе: её несут
 * карточки товаров внутри него.
 */
.com-content-article {
    border: 4px double var(--shanti-gold) !important;
    border-radius: 6px !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
    background-color: rgba(138, 8, 29, 0.4) !important;
    box-shadow: inset 0 0 15px rgba(251, 181, 58, 0.15);
}

/* Правые модули (меню, вход) — та же рамка чуть компактнее. */
.card {
    border: 4px double var(--shanti-gold) !important;
    background-color: rgba(138, 8, 29, 0.5) !important;
    color: var(--shanti-amber) !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    border-radius: 6px !important;
}

/* Точечный разделитель под заголовком модуля. */
.card-header, .card-title, .card h3 {
    background-color: transparent !important;
    color: var(--shanti-amber) !important;
    border-bottom: 3px dotted var(--shanti-gold) !important;
    padding-bottom: 8px !important;
    text-align: center !important;
    text-transform: uppercase !important;
}


/* ==========================================================================
   4. ФОРМА АВТОРИЗАЦИИ
   ========================================================================== */

.card .btn-primary {
    background-color: var(--shanti-accent) !important;
    border: 1px solid var(--shanti-gold) !important;
    color: var(--shanti-gold) !important;
    font-family: var(--font-family-headings) !important;
}

.card .btn-primary:hover {
    background-color: var(--shanti-sand) !important;
    color: var(--shanti-maroon) !important;
}

.card .form-control,
#mod-login-username,
#mod-login-password,
.card input {
    background-color: #580310 !important;
    border: 1px solid var(--shanti-gold) !important;
    color: var(--shanti-sand) !important;
}

.card .input-group-text {
    background-color: #580310 !important;
    border: 1px solid var(--shanti-gold) !important;
    color: var(--shanti-amber) !important;
}

.card .form-check-label,
.card .login-links a {
    color: var(--shanti-amber) !important;
}

.card .login-links a:hover {
    color: var(--shanti-sand) !important;
}

.card .webauthn-btn,
.w3c-webauthn-btn,
.card .btn-outline-secondary {
    background-color: #580310 !important;
    border: 1px solid var(--shanti-gold) !important;
    color: var(--shanti-amber) !important;
}


/* ==========================================================================
   5. СЛУЖЕБНЫЕ ЭЛЕМЕНТЫ СТАТЬИ: ДАТА, READ MORE, ПАГИНАЦИЯ, «ВВЕРХ»
   ========================================================================== */

.article-info {
    color: var(--shanti-amber-soft) !important;
}

.article-info dd i,
.article-info dd span[class^="icon-"] {
    color: var(--shanti-amber-soft) !important;
}

/* Пустой значок календаря шаблона убираем — свой значок ставится разметкой. */
.published span.icon-calendar,
.modified span.icon-calendar,
.published i,
.modified i {
    display: none !important;
}

.shanti-date-icon {
    font-size: var(--fs-md) !important;
    display: inline-block !important;
}

/*
 * ЗДЕСЬ БЫЛО «font-size: 0.75 rem» — С ПРОБЕЛОМ.
 * Такое значение недопустимо, и браузер отбрасывает ВСЮ строку целиком: дата
 * всё это время выводилась базовым кеглем, а не уменьшенным. Ошибка из тех,
 * что не находятся чтением — правило выглядит написанным, просто не работает.
 */
.published,
.modified,
.com-content-category-blog__item-published {
    font-size: var(--fs-xs) !important;
    font-weight: normal !important;
    color: var(--shanti-amber-soft) !important;
    opacity: 0.85 !important;
    margin-top: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* --- Кнопка «Читати далі» --- */
.readmore .btn-secondary {
    background-color: transparent !important;
    background-image: none !important;
    border-color: #f7ec7d !important;
    color: #f7ec7d !important;
}

.readmore .btn-secondary:hover {
    background-color: #f7ec7d !important;
    color: #7b0012 !important;
    border-color: #f7ec7d !important;
}

/* --- Пагинация ---
   Одно правило на все состояния сразу: ссылки-стрелки, номера страниц,
   активная и отключённая. Раньше их было два блока с одинаковыми телами —
   один на .pagination a, второй на .pagination .page-link. */
.pagination a,
.pagenav a,
a.btn.btn-secondary,
.pagination .page-link {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--shanti-gold) !important;
    color: var(--shanti-gold) !important;
}

.pagination a:hover,
.pagenav a:hover,
a.btn.btn-secondary:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: var(--shanti-gold) !important;
    color: #7b0012 !important;
    border-color: var(--shanti-gold) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--shanti-gold) !important;
    color: #7b0012 !important;
    border-color: var(--shanti-gold) !important;
}

.pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    color: var(--shanti-gold) !important;
    border-color: var(--shanti-gold) !important;
    opacity: 0.4 !important;
}

/* --- Кнопка «Вверх» --- */
#back-top.back-to-top-link {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--shanti-gold) !important;
    color: var(--shanti-gold) !important;
}

#back-top.back-to-top-link .icon-arrow-up {
    color: var(--shanti-gold) !important;
}

#back-top.back-to-top-link:hover,
#back-top.back-to-top-link:focus {
    background-color: var(--shanti-gold) !important;
    border-color: var(--shanti-gold) !important;
}

#back-top.back-to-top-link:hover .icon-arrow-up,
#back-top.back-to-top-link:focus .icon-arrow-up {
    color: #7b0012 !important;
}

/*
 * УДАЛЕНО: отладочная красная рамка вокруг .pseo-score__content и красный
 * текст у ключевых слов PWT SEO. Это была временная разметка, чтобы найти
 * блок в вёрстке; на боевом сайте она видна редактору как поломка.
 */


/* ==========================================================================
   6. КАТЕГОРИИ: ОПИСАНИЯ И СЕТКА КАТАЛОГА
   ========================================================================== */

.desc-intro-img { margin: 0 auto; }

/* --- Верхнее описание категории --- */
.category-desc {
    margin-bottom: 40px !important;
    padding: 24px !important;
    background-color: transparent !important;
    border: 1px solid var(--shanti-gold) !important;
    border-radius: 6px !important;
    color: var(--shanti-amber) !important;
    font-size: var(--fs-lg) !important;
    line-height: var(--lh-base) !important;
}

.category-desc h1,
.category-desc h2 {
    color: var(--shanti-amber) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: var(--fs-h3) !important;
    text-transform: uppercase !important;
}

/* --- Нижнее SEO-описание --- */
.category-bottom-field {
    margin-top: 50px !important;
    padding: 24px !important;
    background-color: transparent !important;
    border: 1px solid var(--shanti-gold) !important;
    border-radius: 6px !important;
    color: var(--shanti-amber) !important;
    font-size: var(--fs-md) !important;
    line-height: var(--lh-base) !important;
}

.category-bottom-field h2,
.category-bottom-field h3 {
    color: var(--shanti-amber) !important;
    font-size: var(--fs-lg) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-transform: none !important;   /* заголовок SEO-блока не кричит */
    letter-spacing: 0.5px !important;
}

.category-bottom-field ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

.category-bottom-field ul li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 8px !important;
    color: var(--shanti-amber) !important;
}

.category-bottom-field ul li::before {
    content: "•" !important;
    color: var(--shanti-gold) !important;
    font-size: var(--fs-lg) !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
}

.category-bottom-field ul li strong {
    color: var(--shanti-amber) !important;
    font-weight: 600 !important;
}

/* --- Каталог товаров сеткой ---
   Рамка вокруг .blog снята здесь и НЕ задаётся в разделе 3: каждая карточка
   товара имеет свою, и внешняя рамка вокруг сетки выглядела бы как рамка
   вокруг рамок. */
.blog {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.com-content-category-blog__items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

.com-content-category-blog__item {
    background-color: rgba(138, 8, 29, 0.3) !important;
    border: 1px solid rgba(222, 228, 38, 0.3) !important;
    border-radius: 6px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.com-content-category-blog__item:hover {
    border-color: var(--shanti-gold) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

.com-content-category-blog__item .page-header h2 {
    font-size: var(--fs-lg) !important;
    margin-bottom: 10px !important;
}

.com-content-category-blog__item img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 15px !important;
    border-radius: 4px !important;
}


/* ==========================================================================
   7. ПЛАШКА ЗАКАЗА ТОВАРА (.cart-action-*)

   ЗДЕСЬ ТОЛЬКО ТО, ЧЕГО НЕТ В КОМПОНЕНТЕ, И ТО, ЧТО КОМПОНЕНТУ НАДО
   ПЕРЕОПРЕДЕЛИТЬ. Базовое оформление плашки (рамка, фон, кнопка, поле
   количества, маркеры, лента, угловой штамп) живёт в
   media/com_articart/css/articart.css и обновляется вместе с расширением.

   ЧТО ОТСЮДА УБРАНО И ПОЧЕМУ:

   * .cart-action-corner-seal* — ПЕРЕЕХАЛО В КОМПОНЕНТ вместе с исправлением
     формы на телефоне. Возвращать сюда нельзя ни в каком виде: user.css
     подключается позже и перебьёт исправление.
   * .cart-action-price-label, .cart-action-price-value, .cart-action-count,
     .cart-action-button:hover, .cart-action-count:disabled — совпадали с
     компонентом слово в слово.
   * .cart-action-button.jlcc-added, .jlcc-in-cart, .cart-action-button.added —
     этих классов в разметке нет: подтверждение добавления ставится классом
     .ac-added (см. 02-Грабли, «Совместимость с Content Cart»).
   * .cart-action-stock — в разметке .cart-action-stock-info, правило не
     совпадало ни с чем.
   * @media (max-width: 500px) { .cart-action-price { white-space: collapse } } —
     недопустимое значение свойства, строка отбрасывалась браузером.
   ========================================================================== */

/* Раскладка плашки: слева название на всю ширину своей колонки, справа
   цена с кнопкой. Флекс и рамка приходят из компонента, здесь — пропорции. */
.cart-action-info {
    width: 40%;
    flex-direction: column;
}

.cart-action-buyblock {
    width: 60%;
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    border-left: 1px solid rgba(214, 164, 46, 0.3);
}

.cart-action-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: #f5eed7;
    width: 100%;
    text-align: center;
    margin-top: 0.5em;
}

.cart-action-brand,
.cart-action-pack {
    width: 100%;
    text-align: center;
}

.cart-action-pack {
    font-size: var(--fs-sm);
    color: #bfa38a;
}

/*
 * РАЗДЕЛИТЕЛЬ У ЦЕНЫ СНЯТ ОДИН РАЗ, А НЕ ЗАДАН И СНЯТ.
 * Раньше .cart-action-price получал «border-left: 1px solid», потом ещё раз
 * «border-left: none», и третий раз «none» в медиазапросе. Итог был всегда
 * один — черты нет; при этом первое правило создавало впечатление, что она
 * есть, и её искали в браузере. Черта теперь стоит слева у всего блока
 * покупки (.cart-action-buyblock выше) — там она и была задумана.
 */
.cart-action-price {
    border-left: none;
    padding-left: 0;
}

.cart-action-stock-info {
    flex-basis: 100%;
    padding-left: 20px;
}

.cart-action-marks {
    display: flex;
    width: 60%;
    justify-content: space-evenly;
    margin: 0 auto;
}

.cart-action-buttons {
    width: 100%;
    padding-left: 20px;
    display: flex;
    justify-content: space-evenly;
}

.cart-action-button {
    width: 100%;
    margin-left: 15px;
}

/*
 * ТЕГ АКЦИИ МЕЖДУ СТАРОЙ И НОВОЙ ЦЕНОЙ (.cart-action-price-sale-tag)
 * ПЕРЕЕХАЛ В КОМПОНЕНТ вместе с двумя исправлениями: цвет брался из
 * несуществующих переменных --badge-bg/--badge-fg, а у хвостика-стрелки
 * стояло «border-left-color: 8px solid …» — цвет не может быть размером, и
 * строка отбрасывалась браузером, поэтому стрелки не было ни разу.
 * Возвращать правило сюда нельзя: user.css подключается позже и перебьёт
 * исправление.
 */

/* --- Плашка на планшетах и телефонах --- */
@media (max-width: 767px) {
    .cart-action-info,
    .cart-action-buyblock {
        width: 100%;
    }

    .cart-action-buyblock {
        border-left: none;
    }

    .cart-action-buttons,
    .cart-action-stock-info {
        padding-left: 0;
    }

    .cart-action-button {
        margin-left: 15px;
    }
}

/*
 * ЦЕНА ПЕРЕНОСИТСЯ НА УЗКОМ ЭКРАНЕ.
 *
 * У .cart-action-price в компоненте стоит white-space: nowrap — и правильно
 * стоит: «440.00 грн» разрывать между числом и валютой нельзя. Но строка
 * целиком — это подпись «Рекомендоване пожертвування:», тег акции и сумма, и
 * втроём они не помещаются в 360 px: сумма уезжала за правый край плашки.
 *
 * Здесь раньше стояло «white-space: collapse» — попытка починить ровно это.
 * Такого значения у свойства нет, строка отбрасывалась браузером, и цена
 * продолжала уезжать. Правильное лечение: переносить разрешено всей строке,
 * а неразрывной остаётся только сама сумма.
 */
@media (max-width: 560px) {
    .cart-action-buyblock .cart-action-price {
        white-space: normal;
        text-align: center;
        width: 100%;
    }

    .cart-action-price-value {
        white-space: nowrap;
    }
}


/* ==========================================================================
   8. КОРЗИНА В ШАПКЕ

   ОТСЮДА УБРАН ВЕСЬ ТУЛТИП ЦЕЛИКОМ (около четырёхсот строк): двадцать три
   правила совпадали с articart.css слово в слово, а ещё девять — для
   .header-cart-items / .header-cart-item* / .header-cart-total* /
   .header-cart-checkout / .header-cart-empty / .header-cart-messenger-label —
   написаны для разметки, которой не существует: тултип корзины товаров не
   перечисляет, это блок мессенджеров.

   Осталось ровно три отличия от компонента — и каждое здесь потому, что это
   решение САЙТА, а не расширения.
   ========================================================================== */

/* Всё содержимое плашки корзины по центру. */
#header-cart-root * {
    text-align: center;
}

.header-cart-wrapper {
    margin-top: 0;
}

/* Иконки мессенджеров разнесены по ширине тултипа, а не прижаты влево. */
#articart-cart-tooltip .header-cart-tooltip-messengers {
    justify-content: space-around;
}

/*
 * ЦВЕТ СИЛУЭТОВ МЕССЕНДЖЕРОВ.
 * Компонент красит их в золото шаблона (#dde426); на этом сайте они мягче —
 * тёплый белый. Правило нужно ДВОЙНОЕ (на <svg> и на «svg *»): у Viber
 * атрибут fill стоит на вложенном <g>, на уровень глубже, чем у Telegram и
 * WhatsApp, и правило на самом <svg> туда не докатывается.
 */
.header-cart-messenger-icon svg,
.header-cart-messenger-icon svg * {
    fill: rgba(245, 236, 224, 0.85);
}


/* ==========================================================================
   9. ПОИСК
   ========================================================================== */

/*
 * ПРАВИЛО БЫЛО НАПИСАНО НА #mod-articart-search-117 — НА НОМЕР МОДУЛЯ.
 * Номер выдаётся при создании модуля и меняется при переносе сайта,
 * копировании модуля или переустановке: оформление отвалилось бы молча, а
 * причину искали бы в расширении. Теперь правило по классу, который модуль
 * ставит всегда.
 */
.articart-search {
    border: 3px solid #ffef00;
    border-radius: 12px;
}


/* ==========================================================================
   10. ГЛАВНАЯ: РЯДЫ КАРТОЧЕК-РАЗДЕЛОВ (.m1row / .last)
   ========================================================================== */

.m1row, .last {
    display: grid;
    /* Всегда три колонки одинаковой максимальной ширины — даже если карточка
       в ряду одна: иначе одиночная растягивалась бы на весь ряд. */
    grid-template-columns: repeat(3, minmax(0, 18.75rem));
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    padding: clamp(1.5rem, 5vw, 5rem);
}

.m1row {
    margin-bottom: clamp(1.5rem, 5vw, 5rem);
}

.m1row > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-width: 0;   /* иначе длинный текст раздвигает колонку */
}

.m1row > a > div {
    background: none;
    padding: 1.5rem;
    border-radius: 0.8rem;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid rgba(222, 228, 38, 0.3) !important;
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.m1row > a:hover > div {
    border-color: var(--shanti-gold) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Квадратный контейнер под иконку. */
.m1row p {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding-top: 100%;
    overflow: hidden;
}

.m1row img,
.last img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/*
 * ЗДЕСЬ СТОЯЛО «hyphens: auto» И СЛЕДОМ «hyphens: none !important».
 * Правило спорило само с собой в двух соседних строках; работала вторая
 * половина. Оставлен перенос по границе слова без расстановки дефисов:
 * названия разделов короткие, дефис в них читается как опечатка.
 */
.m1row h3 {
    margin: 1rem 0 0 0;
    font-size: var(--fs-sm) !important;
    overflow-wrap: break-word;
    hyphens: none;
    -webkit-hyphens: none;
}

/* --- ≤650px: два в ряд --- */
@media (max-width: 650px) {
    /* Один блок вместо четырёх: раньше .m1row объявлялся здесь четырежды
       подряд, и margin-bottom задавался в двух из них разными значениями. */
    .m1row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap !important;
        gap: clamp(1rem, 3vw, 1.5rem);
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .m1row > a {
        flex-basis: calc(50% - 1rem);
        flex-grow: 0;   /* третья карточка не растягивается на всю ширину */
    }

    .m1row > a,
    .last > a {
        width: 100%;
        max-width: 13rem;
    }

    /* На тач-экране наведения нет — рамка подсвечена сразу. */
    .m1row > a > div {
        border-color: var(--shanti-gold) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
    }
}

/* --- ≤420px: по одной в ряд --- */
@media (max-width: 420px) {
    .m1row > a,
    .last > a {
        flex-basis: 100%;
        max-width: 12rem;
    }

    /*
     * ЗДЕСЬ БЫЛО «font-size: 0.7em !important» — то есть около 10 пикселей.
     * Так гасили длинный заголовок каталога, ломавший вёрстку на телефоне.
     * Перенос длинных слов теперь включён у всех заголовков (раздел 1),
     * поэтому ломать нечему, и заголовок опущен до обычной крупной ступени,
     * а не до нечитаемого размера.
     */
    .page-header h1 {
        font-size: var(--fs-lg) !important;
    }
}


/* ==========================================================================
   11. ШАПКА: ЛОГО | ПОИСК | КОРЗИНА + «умная» липкая шапка

   Разметка, под которую написано (в HTML менять ничего не нужно):
   <header class="header container-header full-width position-sticky sticky-top">
     <div class="grid-child">               <- лого
       <div class="navbar-brand"><a class="brand-logo"><img ...></a></div>
     </div>
     <div class="grid-child container-nav"> <- поиск + корзина
       <div class="articart-search">...</div>
       <div id="header-cart-root" class="header-cart-root">...</div>
     </div>
   </header>
   ========================================================================== */

/* --- Переменные шапки: крутить только здесь --- */
.header.container-header {
    --hdr-gap:             1rem;                     /* зазор лого/поиск/корзина */
    --hdr-pad-y:           .5rem;
    --hdr-pad-y-collapsed: .25rem;
    --hdr-pad-x:           1rem;
    --logo-h:              clamp(48px, 8vw, 110px);  /* лого 412×120 */
    --search-max:          560px;
    --hdr-anim:            .30s;
    --hdr-ease:            cubic-bezier(.4, 0, .2, 1);
    --hdr-z:               1040;

    /* Раскладка: лого по содержимому, поиск тянется, корзина справа. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: var(--hdr-gap);
    padding: var(--hdr-pad-y) var(--hdr-pad-x);

    /* НИКАКОГО overflow: hidden/clip НА САМОЙ ШАПКЕ — иначе она обрежет
       выпадашку подсказок поиска (.articart-search__panel) и тултип корзины
       (.header-cart-tooltip): оба лежат ВНУТРИ шапки. Уезжающие лого и поиск
       обрезают сами себя (см. блок «умной» шапки ниже). */
    overflow: visible;

    /* Липкость — на всех разрешениях, включая мобильные. */
    position: sticky;
    top: 0;
    z-index: var(--hdr-z);
    background-color: inherit;   /* без фона контент просвечивал бы насквозь */

    transition: padding var(--hdr-anim) var(--hdr-ease),
                box-shadow .25s ease;
}

/* Классы шаблона не должны отменять липкость. */
.header.container-header.position-sticky,
.header.container-header.sticky-top {
    position: sticky !important;
    top: 0 !important;
}

/* Ячейка лого — ровно по содержимому. */
.header.container-header > .grid-child {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-inline: 0;
}

/* Ячейка с поиском и корзиной забирает остаток строки. */
.header.container-header > .grid-child.container-nav {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: var(--hdr-gap);
    min-width: 0;
}

/* Сброс правил шаблона: там flex-basis:100% и margin-inline-end:auto,
   из-за них лого занимало всю строку. */
.header.container-header .navbar-brand {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.header .navbar-brand .brand-logo {
    display: block;
    line-height: 0;
}

.header .navbar-brand .brand-logo img {
    display: block;
    height: var(--logo-h);
    width: auto;
    max-width: 100%;
    aspect-ratio: 412 / 120;   /* нативные пропорции — без «скачка» вёрстки */
    object-fit: contain;
    transition: height var(--hdr-anim) var(--hdr-ease);
}

/* --- Модуль поиска в шапке --- */
.header .articart-search {
    flex: 1 1 auto;
    min-width: 0;              /* иначе input не даст флексу сжаться */
    max-width: var(--search-max);
    overflow: visible;         /* выпускает выпадашку подсказок наружу */
}

.header .articart-search input[type="text"],
.header .articart-search input[type="search"] {
    min-width: 8rem;
}

/* Модуль задаёт ширину инлайновой переменной (--articart-search-width),
   поэтому ширину поля берём под контроль здесь. */
.header .articart-search form,
.header .articart-search .articart-search__form,
.header .articart-search input[type="text"],
.header .articart-search input[type="search"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* --- Модуль корзины в шапке --- */
.header .header-cart-root {
    flex: 0 0 auto;
    margin-inline-start: auto;   /* всегда прижата к правому краю */
    display: flex;
    align-items: center;
    overflow: visible;           /* выпускает тултип наружу */
}

/* Попапы всегда поверх шапки и никем не обрезаны. */
.header .articart-search__panel,
.header .header-cart-tooltip,
.header [id$="-listbox"] {
    z-index: calc(var(--hdr-z) + 10);
}

/* --- «Умная» шапка: класс .is-collapsed навешивает smart-header.js.
       Скролл вниз — лого и поиск уезжают вверх, остаётся плашка корзины. --- */

/* Ячейка лого попапов не содержит — её можно резать всегда. */
.header.container-header > .grid-child:not(.container-nav) {
    overflow: hidden;
}

.header.container-header > .grid-child:not(.container-nav),
.header.container-header .articart-search {
    max-height: 12rem;   /* стартовое значение для анимации высоты */
    transition:
        transform  var(--hdr-anim) var(--hdr-ease),
        max-height var(--hdr-anim) var(--hdr-ease),
        margin     var(--hdr-anim) var(--hdr-ease),
        padding    var(--hdr-anim) var(--hdr-ease),
        flex-basis var(--hdr-anim) var(--hdr-ease),
        opacity    calc(var(--hdr-anim) * .6) linear,
        visibility var(--hdr-anim) linear;
    /* will-change здесь НЕ нужен: max-height не композитится, а лишний слой
       заставляет браузер перерисовывать всю шапку и «моргать» соседями. */
}

.header.container-header.is-collapsed {
    padding-block: var(--hdr-pad-y-collapsed);
}

.header.container-header.is-collapsed > .grid-child:not(.container-nav),
.header.container-header.is-collapsed .articart-search {
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;            /* убирает из tab-навигации и скринридеров */
    max-height: 0;
    margin-block: 0;
    padding-block: 0;
    overflow: hidden !important;   /* режет содержимое в момент ухода вверх */
    pointer-events: none;
}

/* Ячейка лого при сворачивании обнуляет ширину, чтобы плашка корзины заняла
   всю строку. */
.header.container-header.is-collapsed > .grid-child:not(.container-nav) {
    flex-basis: 0;
    width: 0;
    min-width: 0;
    margin-inline: 0;
    column-gap: 0;
}

/* --- Адаптив: лого уменьшается вместе с экраном --- */
@media (max-width: 1199.98px) {
    .header.container-header { --logo-h: clamp(46px, 7.5vw, 92px); }
}

@media (max-width: 991.98px) {
    .header.container-header {
        --logo-h: clamp(42px, 9vw, 76px);
        --hdr-gap: .75rem;
        --search-max: 100%;
    }
}

@media (max-width: 767.98px) {
    .header.container-header {
        --logo-h: clamp(36px, 11vw, 58px);
        --hdr-gap: .5rem;
        --hdr-pad-x: .75rem;
        --hdr-pad-y: .375rem;
    }
}

/* Телефоны: поиск переносится во вторую строку.
   Строка 1 — лого и корзина, строка 2 — поиск на всю ширину. */
@media (max-width: 575.98px) {
    .header.container-header {
        /* 8.5vw по высоте ≈ 29vw по ширине (пропорции 412×120): лого
           остаётся читаемым и не выдавливает поиск с корзиной. */
        --logo-h: clamp(26px, 8.5vw, 40px);
        --hdr-gap: .375rem;
        --hdr-pad-x: .5rem;
    }

    .header .navbar-brand .brand-logo img { max-width: 38vw; }

    .header.container-header > .grid-child.container-nav {
        flex-wrap: wrap;
        row-gap: .375rem;
    }

    .header .articart-search {
        flex: 1 0 100%;
        order: 2;
        max-width: 100%;
    }

    .header .header-cart-root {
        order: 1;
        margin-inline-start: auto;
    }
}

/* --- «Шапка оторвалась от своего места и плавает» ---
   Класс .is-stuck навешивает smart-header.js, когда страница проскроллена.
   На месте (scrollY = 0) эффекта нет вовсе — шапка часть страницы.

   ПРО ПАЛИТРУ: фон шапки и фон страницы одинаковый бордовый, поэтому чёрная
   тень вида rgba(0,0,0,.03) физически не видна — нужна тонкая золотая кромка
   плюс заметно более плотная тень. */
.header.container-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;              /* тень живёт ПОД шапкой, вне её потока */
    height: 18px;
    pointer-events: none;   /* не перехватывает клики по контенту */
    opacity: 0;
    transition: opacity .25s ease, height var(--hdr-anim) var(--hdr-ease);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0));
}

.header.container-header.is-stuck::after { opacity: 1; }
.header.container-header.is-collapsed::after { height: 22px; }

.header.container-header.is-stuck {
    box-shadow: inset 0 -1px 0 rgba(251, 181, 58, .40);
}

@media (prefers-reduced-motion: reduce) {
    .header.container-header,
    .header.container-header::after,
    .header.container-header > .grid-child,
    .header.container-header .articart-search,
    .header .navbar-brand .brand-logo img {
        transition: none !important;
    }
}


/* ==========================================================================
   12. ПОДВАЛ
   ========================================================================== */

.footer {
    background-image: none;
    color: var(--shanti-amber) !important;
}

.shanti-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 40px;
    width: 100%;
    gap: 20px;
}

.shanti-footer .copyright {
    flex: 1;
    min-width: 250px;
}

.shanti-footer .foter-messengers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 200px;
}

.shanti-footer .header-cart-messenger-link {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.shanti-footer .header-cart-messenger-link:hover {
    transform: scale(1.1);
}

.shanti-footer .oplata-dostavka {
    flex: 1;
    min-width: 250px;
    text-align: right;
    white-space: nowrap;
}

.shanti-footer .oplata-dostavka p {
    margin: 1em 0 0 0;
}

/*
 * ЗДЕСЬ БЫЛА ВЛОЖЕННОСТЬ МЕДИАЗАПРОСОВ.
 * Блок @media (max-width: 867px) не закрывался, и @media (max-width: 650px)
 * оказывался ВНУТРИ него. Работало это по случайности — 650 и так меньше
 * 867, — но читалось как ошибка, и любая правка первого блока молча меняла
 * второй. Теперь два соседних блока, как и задумано.
 */
@media (max-width: 867px) {
    .shanti-footer .oplata-dostavka {
        display: flex;
        justify-content: space-between;
        min-width: max-content;
        margin-top: 2em;
    }

    .shanti-footer .foter-messengers {
        justify-content: space-between;
    }

    .shanti-footer .oplata-dostavka p {
        margin: 0;
    }
}

@media (max-width: 650px) {
    .shanti-footer {
        flex-direction: column;
        text-align: center;
    }

    .shanti-footer .oplata-dostavka {
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .shanti-footer .oplata-dostavka p {
        margin: 1em;
    }

    .shanti-footer .foter-messengers {
        margin-top: 2em;
    }

    .footer .grid-child {
        padding: 0;
    }
}

.container-header .container-nav {
    padding-bottom: 0;
}

/*
 * БЫЛО «width: 350px» — фиксированная ширина.
 * На экране 320px блок вылезал за край и тянул страницу вбок. max-width
 * делает ровно то же на широком экране и не ломает узкий: это тот же случай,
 * что с логотипом в шапке, где ширина задана долей, а не числом.
 */
.how-to-order {
    max-width: 350px;
    width: 100%;
    margin: auto;
}