/* © 2026 Seganiko - https://seganiko.com */
/* ============================================================================
   Ohot Promysel - современный слой оформления
   Подключается ПОСЛЕ style.css и переопределяет его.
   Чтобы полностью откатить редизайн - снять подключение в functions.php.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   Палитра выведена из фирменных материалов: оливково-зелёный #5d7e0b из темы
   и янтарный #d07000 с полосы доставки в шапке. Нейтральные - тёплые,
   чтобы не спорить с зелёным.
   --------------------------------------------------------------------------- */
:root {
    /* Зелёный - основной */
    --op-green-50:  #f4f8e9;
    --op-green-100: #e7f0d2;
    --op-green-200: #d0e1a6;
    --op-green-300: #aecb63;
    --op-green-400: #85a52e;
    --op-green-500: #5d7e0b;   /* фирменный */
    --op-green-600: #4c6709;
    --op-green-700: #3a4f07;
    --op-green-800: #2b3a10;
    --op-green-900: #1d2610;

    /* Янтарный - акцент (из полосы доставки).
       Важно: фирменный #d07000 даёт с белым текстом контраст 3.50 -
       ниже порога WCAG AA (4.5). Поэтому для кнопок и бейджей с белым
       текстом берётся --op-accent (#b05e00, контраст 4.72), а фирменный
       оттенок остаётся для декоративных ролей: полосы, иконки на тёмном. */
    --op-amber-50:  #fdf6ec;
    --op-amber-100: #fbe8cf;
    --op-amber-200: #f6cd99;
    --op-amber-400: #f59331;
    --op-amber-500: #d07000;   /* фирменный, декоративный */
    --op-amber-600: #b05e00;   /* интерактивный: 4.72 с белым */
    --op-amber-700: #9e5400;   /* его наведение: 5.64 */

    /* Нейтральные тёплые */
    --op-n-0:   #ffffff;
    --op-n-25:  #fbfaf8;
    --op-n-50:  #f6f5f2;
    --op-n-100: #eceae5;
    --op-n-200: #ddd9d2;
    --op-n-300: #c3bdb2;
    --op-n-400: #767068;   /* 4.90 на белом - годится для текста */
    --op-n-500: #6f6a61;
    --op-n-600: #56524b;
    --op-n-700: #3d3a35;
    --op-n-800: #2a2825;
    --op-n-900: #1c1a17;

    /* Семантические */
    --op-success:     #2a7d37;   /* 5.14 на белом */
    --op-success-bg:  #eaf6ec;
    --op-danger:      #c0392b;
    --op-danger-bg:   #fbeceb;
    --op-info:        #1e6f85;

    /* Роли */
    --op-primary:        var(--op-green-500);
    --op-primary-hover:  var(--op-green-600);
    --op-primary-dark:   var(--op-green-800);
    --op-accent:         var(--op-amber-600);   /* интерактивный янтарь */
    --op-accent-hover:   var(--op-amber-700);
    --op-accent-brand:   var(--op-amber-500);   /* декоративный, без текста поверх */
    --op-text:           var(--op-n-900);
    --op-text-muted:     var(--op-n-500);
    --op-text-soft:      var(--op-n-400);
    --op-border:         var(--op-n-200);
    --op-border-soft:    var(--op-n-100);
    --op-border-field:   #8f8880;   /* 3.50 - граница полей, WCAG 1.4.11 */
    --op-surface:        var(--op-n-0);
    --op-surface-alt:    var(--op-n-50);
    --op-link:           var(--op-green-600);

    /* Скругления */
    --op-r-xs: 6px;
    --op-r-sm: 10px;
    --op-r-md: 14px;
    --op-r-lg: 20px;
    --op-r-pill: 999px;

    /* Тени - мягкие, тёплые, без синевы */
    --op-sh-xs: 0 1px 2px rgba(28, 26, 23, .06);
    --op-sh-sm: 0 2px 6px rgba(28, 26, 23, .07);
    --op-sh-md: 0 6px 18px rgba(28, 26, 23, .09);
    --op-sh-lg: 0 14px 38px rgba(28, 26, 23, .13);
    --op-sh-focus: 0 0 0 3px rgba(93, 126, 11, .28);

    /* Отступы (шаг 4px) */
    --op-s-1: 4px;
    --op-s-2: 8px;
    --op-s-3: 12px;
    --op-s-4: 16px;
    --op-s-5: 20px;
    --op-s-6: 24px;
    --op-s-8: 32px;
    --op-s-10: 40px;
    --op-s-12: 48px;
    --op-s-16: 64px;
    --op-s-20: 80px;

    /* Типографика */
    --op-font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    /* Onest - вариативный гротеск с родной кириллицей (не адаптация латиницы).
       Заменил Montserrat: тот геометрический, его кириллица широкая и в мелком
       кегле читается хуже. Вернуть прежний вид - поменять здесь на 'Montserrat'. */
    --op-font-display: 'Onest', 'Inter', system-ui, sans-serif;

    /* Анимация */
    --op-ease: cubic-bezier(.22, .61, .36, 1);
    --op-t-fast: 140ms;
    --op-t-base: 220ms;

    /* Служебное */
    --op-header-h: 76px;
    --op-container: 1320px;
}

/* ---------------------------------------------------------------------------
   2. НЕЙТРАЛИЗАЦИЯ ВРЕДНЫХ ГЛОБАЛЬНЫХ ПРАВИЛ style.css

   В ресете темы стояло `transition: 0.5s !important` и `outline: none !important`
   на КАЖДОМ элементе. Первое заставляло анимироваться вообще все свойства
   (включая layout) по полсекунды - сайт ощущался вязким. Второе полностью
   убирало индикатор фокуса, то есть ломало навигацию с клавиатуры.

   Селектор ниже повторяет исходный один в один, чтобы иметь равную
   специфичность и победить за счёт более позднего положения в каскаде.
   --------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    transition: none !important;
    outline: revert !important;
}

/* Точечные переходы там, где они уместны - только на дешёвых свойствах */
a,
button,
input,
select,
textarea,
.button,
.op-card,
.op-cat-tile,
.op-chip,
.woocommerce ul.products li.product,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    transition:
        color var(--op-t-fast) var(--op-ease),
        background-color var(--op-t-fast) var(--op-ease),
        border-color var(--op-t-fast) var(--op-ease),
        box-shadow var(--op-t-base) var(--op-ease),
        transform var(--op-t-base) var(--op-ease),
        opacity var(--op-t-fast) var(--op-ease) !important;
}

/* Видимый фокус - обязателен для доступности.
   :focus-visible срабатывает только при навигации с клавиатуры,
   поэтому мышью кольцо не мешает. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--op-green-400) !important;
    outline-offset: 2px !important;
    border-radius: var(--op-r-xs);
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   3. БАЗОВАЯ ТИПОГРАФИКА
   В style.css стояло line-height 1.35 - слишком плотно для чтения,
   и запрашивался Open Sans, у которого грузилось только начертание 700.
   --------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Чинит нативные скроллбары, поля автозаполнения и системные
       контролы у пользователей с тёмной темой ОС. Полноценную тёмную
       тему не делаем - для магазина она не оправдана. */
    color-scheme: light;
}

html, body {
    font-family: var(--op-font-ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--op-text);
    background: var(--op-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga' 1, 'kern' 1;
}

h1, h2, h3, h4, h5, h6,
.heading,
.page-title,
.widget-title,
.woocommerce div.product .product_title {
    font-family: var(--op-font-display);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--op-text);
    padding: 0;
    margin: 0 0 var(--op-s-4);
    text-wrap: balance;
}

h1, .page-title,
.woocommerce div.product .product_title {
    font-size: clamp(28px, 2.2vw + 18px, 42px);
    margin-bottom: var(--op-s-5);
}

h2, .heading {
    font-size: clamp(23px, 1.4vw + 16px, 32px);
}

h3 { font-size: clamp(19px, .8vw + 15px, 24px); }
h4 { font-size: clamp(17px, .5vw + 14px, 20px); }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

p {
    margin: 0 0 var(--op-s-4);
}

p:last-child { margin-bottom: 0; }

.content ul,
.content ol,
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
    padding-left: var(--op-s-6);
    margin: 0 0 var(--op-s-4);
}

.content li,
.woocommerce-Tabs-panel li {
    margin-bottom: var(--op-s-2);
}

/* Ссылки в тексте: фирменный зелёный вместо прежнего бирюзового #1e8199,
   который не имел отношения к палитре магазина. */
a {
    color: var(--op-link);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

/* Подчёркиваем только ссылки внутри связного текста.
   Раньше правило цепляло и названия категорий, и новости в сайдбаре. */
.content p > a:not(.button):not(.op-btn),
.index-text a:not(.button):not(.op-btn),
.woocommerce-Tabs-panel p > a,
.woocommerce-Tabs-panel li > a,
.woocommerce-product-details__short-description a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--op-link) 35%, transparent);
}

a:hover,
a:focus {
    color: var(--op-green-700);
}

.content p > a:not(.button):not(.op-btn):hover,
.index-text a:not(.button):not(.op-btn):hover,
.woocommerce-Tabs-panel a:hover {
    text-decoration-color: currentColor;
}

/* Ссылки-обёртки карточек и списков не подчёркиваем никогда */
.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.aside-right a,
.side.widget a,
.footer a,
.topmenu a,
.op-cat-tile,
.op-tabbar a { text-decoration: none !important; }

strong, b { font-weight: 700; }

::selection {
    background: var(--op-green-200);
    color: var(--op-green-900);
}

/* Денежные суммы: моноширинные цифры и плотный разделитель разрядов.
   Разделитель - узкий неразрывный пробел (U+202F), он задан в functions.php. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.woocommerce-Price-currencySymbol {
    margin-left: .16em;
    font-weight: inherit;
}

/* Скроллбар в тон палитре */
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--op-n-50); }
::-webkit-scrollbar-thumb {
    width: 10px;
    background: var(--op-n-300);
    border-radius: var(--op-r-pill);
    border: 2px solid var(--op-n-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--op-green-400); }

/* ---------------------------------------------------------------------------
   4. КОНТЕЙНЕР И РИТМ СТРАНИЦЫ
   --------------------------------------------------------------------------- */
.container {
    max-width: var(--op-container);
    padding-left: var(--op-s-5);
    padding-right: var(--op-s-5);
}

.content {
    padding-bottom: var(--op-s-16);
    min-height: 50vh;
}

#breadcrumbs {
    font-size: 13px;
    color: var(--op-text-soft);
    margin: var(--op-s-5) 0 var(--op-s-4);
    line-height: 1.5;
}

#breadcrumbs a {
    color: var(--op-text-muted);
    text-decoration: none;
}

#breadcrumbs a:hover { color: var(--op-primary); }
/* ---------------------------------------------------------------------------
   5. ВЕРХНЯЯ ПОЛОСА (заменяет растровый баннер с вшитым текстом)
   Прежняя шапка была картинкой 1920x150 с текстом внутри: не масштабировалась,
   не читалась поисковиками и на телефоне просто пряталась (display:none).
   --------------------------------------------------------------------------- */
.op-topbar {
    background: linear-gradient(100deg, var(--op-green-800) 0%, var(--op-green-700) 55%, var(--op-green-600) 100%);
    color: var(--op-green-100);
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    z-index: 996;
}

.op-topbar::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--op-amber-600), var(--op-amber-400), var(--op-amber-600));
}

.op-topbar__inner {
    max-width: var(--op-container);
    margin: 0 auto;
    padding: 9px var(--op-s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-s-4);
    flex-wrap: wrap;
}

.op-topbar__msg {
    display: inline-flex;
    align-items: center;
    gap: var(--op-s-2);
    font-weight: 500;
}

.op-topbar__msg svg { flex: none; opacity: .85; }

.op-topbar__links {
    display: flex;
    align-items: center;
    gap: var(--op-s-5);
}

.op-topbar a {
    color: var(--op-green-100);
    text-decoration: none;
    white-space: nowrap;
}

.op-topbar a:hover { color: #fff; }

/* Прежний растровый баннер больше не нужен */
.top-header-img { display: none !important; }

/* ---------------------------------------------------------------------------
   6. ШАПКА - липкая, с поиском
   --------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    padding: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--op-border-soft);
    box-shadow: none;
    z-index: 995;
}

.admin-bar .header { top: 32px; }

.header.is-stuck {
    box-shadow: var(--op-sh-md);
    border-bottom-color: transparent;
}

.header > .container {
    display: flex;
    align-items: center;
    gap: var(--op-s-5);
    min-height: var(--op-header-h);
    float: none;
}

/* Bootstrap-колонки внутри шапки больше не нужны - переходим на flex */
.header .logo,
.header .topmenu,
.header .head-contacts {
    float: none;
    width: auto;
    padding: 0;
}

.header .logo {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--op-s-3);
}

.header .logo img {
    height: 44px;
    width: auto;
    display: block;
}

.op-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.op-logo-text b {
    font-family: var(--op-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
    color: var(--op-green-800);
    white-space: nowrap;
}

.op-logo-text span {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--op-amber-600);
    font-weight: 600;
}

/* --- Меню --- */
.header .topmenu {
    flex: 1 1 auto;
    min-width: 0;
}

.topmenu ul {
    min-height: 0;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.topmenu ul li { margin: 0; }

.topmenu ul li a {
    display: block;
    padding: 8px 11px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--op-n-700);
    border-bottom: 0;
    border-radius: var(--op-r-sm);
    white-space: nowrap;
}

.topmenu ul li a:hover {
    border-bottom: 0;
    color: var(--op-green-700);
    background: var(--op-green-50);
}

.topmenu ul li.current-menu-item > a,
.topmenu ul li.current_page_item > a,
.topmenu ul li.current-menu-parent > a,
.topmenu ul li.current-product-ancestor > a {
    border-bottom: 0;
    color: var(--op-green-700);
    background: var(--op-green-100);
}

/* Выпадающее подменю */
ul.sub-menu {
    padding: var(--op-s-2);
    margin-top: 6px;
    margin-left: 0;
    min-width: 240px;
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    box-shadow: var(--op-sh-lg);
    overflow: hidden;
}

ul.sub-menu li { margin: 0; }

ul.sub-menu li a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    padding: 9px 12px;
    border-radius: var(--op-r-xs);
    white-space: normal;
    line-height: 1.35;
}

ul.sub-menu li a:hover { background: var(--op-green-50); }

/* --- Правая группа: телефон, поиск, корзина --- */
.header .head-contacts {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--op-s-2);
}

.top-contacts {
    width: auto;
    float: none;
    text-align: right;
    line-height: 1.25;
}

.top-contacts a {
    font-family: var(--op-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--op-text);
    margin: 0;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.top-contacts a:hover { color: var(--op-primary); }

.top-contacts a.header-mail {
    font-family: var(--op-font-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-text-muted);
    margin: 1px 0 0;
}

/* Кнопка поиска в шапке */
.op-search-toggle {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-sm);
    background: var(--op-surface);
    color: var(--op-n-700);
    cursor: pointer;
}

.op-search-toggle:hover {
    border-color: var(--op-green-300);
    color: var(--op-green-700);
    background: var(--op-green-50);
}

/* Корзина */
.header .head-contacts > a[href="/cart/"] { flex: none; }

.header-cart {
    width: auto;
    float: none;
    min-height: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--op-s-2);
    height: 44px;
    padding: 0 var(--op-s-4);
    border-radius: var(--op-r-sm);
    background: var(--op-primary);
    color: #fff;
    box-shadow: var(--op-sh-xs);
}

.header-cart:hover { background: var(--op-primary-hover); }

.header-cart img,
.header-cart svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.header-cart img { filter: brightness(0) invert(1); }

.op-cart-link { display: inline-flex; text-decoration: none; }

/* Иконки бургера */
.close-menu .active-img { display: none; }
.close-menu.active .no-active-img { display: none; }
.close-menu.active .active-img { display: block; }

.basket-btn__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--op-r-pill);
    background: var(--op-amber-500);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* --- Выдвижная строка поиска --- */
.op-searchbar {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--op-t-base) var(--op-ease) !important;
    border-top: 0 solid var(--op-border-soft);
    background: var(--op-n-25);
}

.op-searchbar.is-open {
    grid-template-rows: 1fr;
    border-top-width: 1px;
}

.op-searchbar__inner { overflow: hidden; }

.op-searchbar form {
    max-width: var(--op-container);
    margin: 0 auto;
    padding: var(--op-s-4) var(--op-s-5);
    display: flex;
    gap: var(--op-s-2);
}

.op-searchbar input[type="search"],
.op-searchbar input[type="text"] {
    flex: 1 1 auto;
    height: 48px;
    margin: 0;
}

.op-searchbar button {
    flex: none;
    height: 48px;
    padding: 0 var(--op-s-6);
}

/* --- Бургер --- */
.close-menu {
    flex: none;
    width: 46px;
    height: 46px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-sm);
    background: var(--op-surface);
    cursor: pointer;
    position: static;
    margin: 0;
    padding: 0;
}

.close-menu img { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------
   7. КНОПКИ
   Прежние: прямоугольные, padding 18px, font-weight 300, hover в чёрный.
   Новые: скруглённые, плотный текст, зелёный/янтарный, мягкая тень.
   --------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.woocommerce div.product form.cart .button,
.op-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--op-s-2);
    min-height: 48px;
    padding: 12px var(--op-s-6);
    border: 1px solid transparent;
    border-radius: var(--op-r-sm);
    background: var(--op-primary);
    color: #fff;
    font-family: var(--op-font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--op-sh-xs);
    -webkit-appearance: none;
    appearance: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
#add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover,
.woocommerce div.product form.cart .button:hover,
.op-btn:hover {
    background: var(--op-primary-hover);
    color: #fff;
    box-shadow: var(--op-sh-sm);
    transform: translateY(-1px);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce div.product form.cart .button:active,
.op-btn:active {
    transform: translateY(0);
    box-shadow: var(--op-sh-xs);
}

/* Главная покупка - янтарная, чтобы её нельзя было не заметить */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order,
.op-btn--accent {
    background: var(--op-accent);
    box-shadow: 0 2px 10px rgba(208, 112, 0, .28);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover,
.op-btn--accent:hover {
    background: var(--op-accent-hover);
    box-shadow: 0 4px 16px rgba(208, 112, 0, .34);
}

/* Второстепенная кнопка */
.op-btn--ghost,
.woocommerce .cart .button button[name="update_cart"],
.woocommerce button[name="update_cart"] {
    background: var(--op-surface);
    color: var(--op-n-700);
    border-color: var(--op-border);
    box-shadow: none;
}

.op-btn--ghost:hover,
.woocommerce button[name="update_cart"]:hover {
    background: var(--op-green-50);
    color: var(--op-green-800);
    border-color: var(--op-green-300);
}

.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"][disabled] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ---------------------------------------------------------------------------
   8. ПОЛЯ ФОРМ
   --------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
    width: 100%;
    min-height: 48px;
    padding: 12px var(--op-s-4);
    border: 1px solid var(--op-border-field);
    border-radius: var(--op-r-sm);
    background: var(--op-surface);
    color: var(--op-text);
    font-family: var(--op-font-ui);
    /* Ровно 16px: при меньшем размере Safari на iOS принудительно
       увеличивает страницу при фокусе на поле - на оформлении заказа
       это выглядит как «прыжок» вёрстки. */
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

textarea,
.woocommerce form .form-row textarea {
    min-height: 128px;
    padding-top: var(--op-s-3);
    resize: vertical;
}

input::placeholder,
textarea::placeholder { color: var(--op-text-soft); }

input:hover,
select:hover,
textarea:hover { border-color: var(--op-n-300); }

input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--op-green-400);
    box-shadow: var(--op-sh-focus);
    outline: none !important;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%236f6a61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--op-s-4) center;
    padding-right: var(--op-s-10);
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--op-n-700);
}

/* Поиск по товарам (виджет) */
.woocommerce-product-search {
    position: relative;
    display: flex;
    gap: var(--op-s-2);
}

.woocommerce-product-search input.search-field {
    flex: 1 1 auto;
    margin: 0;
}

.woocommerce-product-search button[type="submit"] {
    flex: none;
    margin: 0 !important;
    height: 48px !important;
    padding: 0 var(--op-s-5) !important;
    margin-top: 0 !important;
}
/* ---------------------------------------------------------------------------
   9. СЕТКА КАТАЛОГА
   Было: float-раскладка, из-за разной высоты карточек между рядами
   образовывались огромные пустоты. Стало: CSS Grid - ряды выравниваются
   автоматически, пустот нет.
   --------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--op-s-5);
    margin: 0 0 var(--op-s-10);
    padding: 0;
    list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product-category {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
   10. КАРТОЧКА ТОВАРА
   Было: без контейнера, название 14px/300, цена того же размера что название.
   Стало: настоящая карточка, цена - самый заметный элемент.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
    position: relative;
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    padding: var(--op-s-3) var(--op-s-3) var(--op-s-4);
    overflow: hidden;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--op-green-200);
    box-shadow: var(--op-sh-md);
    transform: translateY(-3px);
}

/* WooCommerce оборачивает картинку, название, цену и наличие в одну ссылку
   .woocommerce-LoopProduct-link - поэтому выравнивание нужно задавать внутри неё,
   иначе цена и кнопка в соседних карточках стоят на разной высоте. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 0 var(--op-s-3);
    text-decoration: none;
}

/* Картинка: единое соотношение сторон решает проблему «рваной» сетки.
   Товары сняты по-разному (фото на снегу и белые схемы), поэтому contain,
   а не cover - иначе часть товаров обрежется. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
    width: 100%;
    flex: none;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--op-n-25);
    border-radius: var(--op-r-sm);
    margin: 0 0 var(--op-s-3);
    padding: var(--op-s-2);
    display: block;
}

.woocommerce ul.products li.product:hover a img { background: var(--op-green-50); }

/* Название */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
    order: 1;
    font-family: var(--op-font-ui);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--op-text);
    text-align: left;
    min-height: 0;
    margin: 0 0 var(--op-s-2);
    padding: 0 var(--op-s-1);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--op-green-700); }

/* Цена - главный элемент карточки */
.woocommerce ul.products li.product .price {
    order: 2;
    margin: auto 0 6px;
    padding: 0 var(--op-s-1);
    text-align: left;
    font-family: var(--op-font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--op-text);
    font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
    display: inline-block;
    margin-right: var(--op-s-2);
    font-size: 15px;
    font-weight: 600;
    color: var(--op-text-soft);
    opacity: 1;
    text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--op-danger);
    font-weight: 800;
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
    font-size: .74em;
    font-weight: 700;
    margin-left: .14em;
    color: var(--op-text-muted);
    vertical-align: baseline;
}

/* Кнопка «В корзину» */
.woocommerce ul.products li.product .button {
    order: 3;
    width: 100%;
    margin: 0;
    min-height: 44px;
    padding: 10px var(--op-s-4);
    font-size: 14.5px;
}

.woocommerce ul.products li.product .button.loading::after { top: .55em; }

.woocommerce ul.products li.product a.added_to_cart {
    order: 4;
    margin-top: var(--op-s-2);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--op-green-700);
}

/* --- Бейджи на карточке --- */
.op-badges {
    position: absolute;
    top: var(--op-s-3);
    left: var(--op-s-3);
    right: var(--op-s-3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
    z-index: 2;
}

.op-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--op-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: var(--op-sh-xs);
}

.op-badge--sale   { background: var(--op-danger);    color: #fff; }
.op-badge--new    { background: var(--op-green-500); color: #fff; }
.op-badge--hit    { background: var(--op-amber-500); color: #fff; }
.op-badge--out    { background: var(--op-n-500);     color: #fff; }

/* Стандартный ярлык скидки WooCommerce прячем - используем свой */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale { display: none; }

/* Нет в наличии - приглушаем карточку */
.woocommerce ul.products li.product.outofstock a img { opacity: .5; filter: grayscale(.5); }

/* --- Мета под ценой (наличие) --- */
.op-card-meta {
    order: 3;
    padding: 0 var(--op-s-1);
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.op-card-meta--in  { color: var(--op-success); }
.op-card-meta--out { color: var(--op-text-soft); }

.op-card-meta::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ---------------------------------------------------------------------------
   11. ПЛИТКИ КАТЕГОРИЙ
   Иконки разделов нарисованы уже в рамке: зелёный контурный квадрат со
   скруглёнными углами, внутри - рисунок. Прежде картинку зажимали в круг
   (border-radius: 50%), и круг срезал у этой рамки углы - по бокам от
   рисунка оставались две короткие дуги, похожие на дефект вёрстки.
   Теперь рамка на картинке и есть оформление: показываем изображение
   целиком и крупно, а собственную рамку у плитки в покое снимаем - две
   рамки подряд спорят друг с другом.
   --------------------------------------------------------------------------- */
/* Плиток разделов теперь четыре, а auto-fill при ширине контейнера 1320
   нарезает пять дорожек - четвёртая плитка вставала не к правому краю,
   и ряд выглядел обрубленным. auto-fit пустые дорожки схлопывает.
   Правило отдельное и через :has, потому что для сетки товаров auto-fit
   вреден: два товара в выдаче растянулись бы на пол-экрана каждый. */
.woocommerce ul.products:has( > li.product-category) {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.woocommerce ul.products li.product-category {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--op-r-lg);
    padding: 0;
    overflow: hidden;
}

/* Карточка проявляется под курсором. Подложка тёплая, зелёная: белая на
   белой странице ничего бы не показала. */
.woocommerce ul.products li.product-category:hover {
    background: var(--op-green-50);
    border-color: var(--op-green-200);
    box-shadow: var(--op-sh-md);
    transform: translateY(-3px);
}

.woocommerce ul.products li.product-category > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--op-s-5);
    text-decoration: none;
}

/* Селектор с двумя классами намеренно: правило для карточки товара
   (.woocommerce ul.products li.product a img) весомее и иначе перебивает
   ширину обратно на 100%.

   mix-blend-mode нужен из-за разнобоя в самих файлах: три иконки - PNG с
   прозрачным фоном, две - JPEG на белом. На зелёной подложке наведения
   белый квадрат был бы виден; умножение делает белое прозрачным, а на
   зелёном слегка притемняет контур - как раз к месту. */
.woocommerce ul.products li.product.product-category a img,
.woocommerce ul.products li.product.product-category img {
    width: clamp(104px, 9vw, 140px);
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: none;
    padding: 0;
    margin: 0 auto var(--op-s-4);
    border-radius: 0;
    mix-blend-mode: multiply;
    transition: transform var(--op-t-base) var(--op-ease);
}

.woocommerce ul.products li.product.product-category:hover img {
    transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
    order: 1;
    font-family: var(--op-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--op-text);
    margin: auto 0 0;
    padding: 0;
    min-height: 0;
    display: block;
    -webkit-line-clamp: none;
}

.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title { color: var(--op-green-700); }

.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--op-r-pill);
    background: var(--op-green-100);
    color: var(--op-green-700);
    font-family: var(--op-font-ui);
    font-size: 11.5px;
    font-weight: 700;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   12. ПАНЕЛЬ НАД КАТАЛОГОМ (сортировка / количество)
   --------------------------------------------------------------------------- */
.woocommerce .woocommerce-ordering {
    margin: 0 0 var(--op-s-5);
    float: none;
}

.woocommerce .woocommerce-ordering select {
    width: auto;
    min-width: 230px;
    height: 44px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 500;
}

.woocommerce .woocommerce-result-count {
    display: block !important;
    float: none;
    margin: 0 0 var(--op-s-4);
    font-size: 13.5px;
    color: var(--op-text-muted);
}

/* ---------------------------------------------------------------------------
   13. СТРАНИЦА ТОВАРА
   --------------------------------------------------------------------------- */
.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: var(--op-s-10);
    align-items: start;
}

.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > div.woocommerce-product-gallery { grid-column: 1; width: 100%; float: none; }

.woocommerce div.product > div.summary,
.woocommerce div.product > div.entry-summary {
    grid-column: 2;
    margin: 0;
    width: 100%;
    max-width: 100%;
    float: none;
}
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .op-trust { grid-column: 1 / -1; }

/* Галерея */
.woocommerce div.product div.images {
    width: 100%;
    float: none;
    margin: 0;
}

/* Рамку и скругление вешаем на .flex-viewport (окно слайдера), а НЕ на
   .woocommerce-product-gallery__wrapper: последний у FlexSlider служит
   лентой кадров, ему задаётся ширина в несколько экранов. Скругление с
   overflow:hidden на ленте прятало картинку и давало горизонтальную
   прокрутку страницы на телефоне. */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images > .woocommerce-product-gallery__image {
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    overflow: hidden;
    background: var(--op-n-25);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image { margin: 0; }

.woocommerce div.product div.images .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery__image > img { display: block; }

.woocommerce div.product div.images img {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--op-n-25);
}

/* Кнопка увеличения (лупа) поверх галереи */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    top: var(--op-s-3);
    right: var(--op-s-3);
    left: auto;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--op-r-pill);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--op-sh-sm);
    font-size: 0;
    text-indent: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    content: '';
    width: 15px; height: 15px;
    border: 2px solid var(--op-n-700);
    border-radius: 50%;
    background: transparent;
    position: static;
    margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
    content: '';
    width: 2px; height: 7px;
    background: var(--op-n-700);
    border-radius: 2px;
    position: absolute;
    right: 11px; bottom: 10px;
    transform: rotate(-45deg);
}

/* Общая страховка от горизонтальной прокрутки */
html, body { overflow-x: clip; }
.woocommerce div.product { max-width: 100%; }

/* Миниатюры: были обрезанные и наезжали друг на друга */
.woocommerce div.product div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: var(--op-s-2);
    margin: var(--op-s-3) 0 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--op-n-25);
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-sm);
    padding: 4px;
    opacity: .75;
    cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--op-green-400);
    box-shadow: var(--op-sh-sm);
}

/* Правая колонка */
.woocommerce div.product .product_title {
    margin: 0 0 var(--op-s-3);
    font-size: clamp(24px, 1.6vw + 16px, 34px);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--op-n-600);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 var(--op-s-5);
}

/* Блок цены.
   Важно: селектор идёт через `.summary >`. Без этого правило цепляло и
   `span.price` внутри `ul.products` блока похожих товаров - цены соседних
   карточек получали зелёную подложку 34px и выглядели как «кружки». */
/* Цена без подложки и рамки: крупный кегль сам по себе даёт нужный акцент,
   а плашка на широкой колонке смотрелась пустым контейнером. */
.woocommerce div.product > .summary > p.price,
.woocommerce div.product > .summary > span.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--op-s-3);
    margin: 0 0 var(--op-s-4);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--op-font-display);
    font-size: clamp(30px, 1.8vw + 20px, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--op-text);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
}

.woocommerce div.product > .summary > p.price del {
    font-size: 20px;
    font-weight: 600;
    color: var(--op-text-soft);
    opacity: 1;
}

.woocommerce div.product > .summary > p.price ins {
    text-decoration: none;
    color: var(--op-danger);
}

/* Знак рубля прежде был 0.6em и с baseline-выравниванием висел надстрочным
   индексом. Делаем его крупнее и опускаем к базовой линии числа. */
.woocommerce div.product > .summary > p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product > .summary > span.price .woocommerce-Price-currencySymbol {
    font-size: .62em;
    font-weight: 700;
    color: var(--op-text-muted);
    margin-left: .14em;
    vertical-align: baseline;
}

/* Форма добавления в корзину */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--op-s-3);
    margin: 0 0 var(--op-s-5);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { display: none; }

.woocommerce div.product form.cart div.quantity {
    float: none;
    margin: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-sm);
    overflow: hidden;
    background: var(--op-surface);
}

.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty {
    width: 76px;
    min-height: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    padding: 0;
    -moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    opacity: 1;
    height: 30px;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 220px;
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
}

/* Мета товара */
.woocommerce div.product .product_meta {
    margin: 0;
    padding: var(--op-s-4) 0 0;
    border-top: 1px solid var(--op-border-soft);
    font-size: 13.5px;
    color: var(--op-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-2) var(--op-s-5);
}

.woocommerce div.product .product_meta > span { display: block; }

/* Наличие */
.woocommerce div.product .stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--op-s-4);
    font-size: 14px;
    font-weight: 600;
}

.woocommerce div.product .stock.in-stock { color: var(--op-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--op-danger); }

.woocommerce div.product .stock::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Блок доверия под ценой --- */
.op-trust-list {
    display: grid;
    gap: var(--op-s-2);
    margin: 0 0 var(--op-s-5);
    padding: var(--op-s-4);
    border: 1px dashed var(--op-border);
    border-radius: var(--op-r-md);
    background: var(--op-n-25);
    list-style: none;
}

.op-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--op-s-3);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--op-n-700);
    margin: 0;
}

.op-trust-list svg { flex: none; margin-top: 1px; color: var(--op-green-500); }
.op-trust-list b { color: var(--op-text); font-weight: 700; }

/* --- Вкладки --- */
.woocommerce div.product .woocommerce-tabs {
    margin-top: var(--op-s-12);
    padding-top: var(--op-s-8);
    border-top: 1px solid var(--op-border-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-2);
    margin: 0 0 var(--op-s-6);
    padding: 0;
    list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 10px var(--op-s-5);
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-pill);
    background: var(--op-surface);
    color: var(--op-n-700);
    font-size: 14.5px;
    font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    border-color: var(--op-green-300);
    background: var(--op-green-50);
    color: var(--op-green-800);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: #fff;
}

/* Описание занимает всю ширину и разливается в две колонки, как в газете.
   Одной колонкой во весь контейнер строка получалась под 150 знаков -
   такую не читают; колонка по центру оставляла справа пустое поле. */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0;
    padding: 0;
    max-width: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs { margin-bottom: var(--op-s-6); }

.woocommerce div.product .woocommerce-Tabs-panel--description {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 64px);
    column-rule: 1px solid var(--op-border-soft);
}

/* Абзац, разорванный между колонками, читать невозможно */
.woocommerce div.product .woocommerce-Tabs-panel--description p,
.woocommerce div.product .woocommerce-Tabs-panel--description ul,
.woocommerce div.product .woocommerce-Tabs-panel--description ol { break-inside: avoid; }

/* Подзаголовок не должен оставаться внизу колонки без своего текста */
.woocommerce div.product .woocommerce-Tabs-panel--description h2,
.woocommerce div.product .woocommerce-Tabs-panel--description h3 {
    break-after: avoid;
    break-inside: avoid;
    margin-top: var(--op-s-5);
}

.woocommerce div.product .woocommerce-Tabs-panel--description > :first-child { margin-top: 0; }

/* Отзывы в колонки не пускаем: форма в две колонки нечитаема */
.woocommerce div.product .woocommerce-Tabs-panel--reviews {
    column-count: 1;
    max-width: 78ch;
}

@media (max-width: 900px) {
    .woocommerce div.product .woocommerce-Tabs-panel--description {
        column-count: 1;
        column-rule: 0;
    }
}

.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 22px; margin-top: var(--op-s-6); }
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { margin-top: 0; }

/* --- Похожие товары --- */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    margin-top: var(--op-s-12);
    padding-top: var(--op-s-8);
    border-top: 1px solid var(--op-border-soft);
}

.woocommerce div.product .related > .heading,
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
    font-size: clamp(20px, 1vw + 16px, 26px);
    margin-bottom: var(--op-s-5);
}
/* ---------------------------------------------------------------------------
   14. КОРЗИНА
   --------------------------------------------------------------------------- */
.woocommerce table.shop_table {
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 0 0 var(--op-s-8);
    background: var(--op-surface);
}

.woocommerce table.shop_table thead {
    display: table-header-group !important;
    background: var(--op-n-25);
}

.woocommerce table.shop_table th {
    padding: var(--op-s-4) var(--op-s-4);
    font-family: var(--op-font-ui);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--op-text-muted);
    border-bottom: 1px solid var(--op-border-soft);
    text-align: left;
}

.woocommerce table.shop_table td {
    padding: var(--op-s-4);
    border-top: 1px solid var(--op-border-soft);
    vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }

.woocommerce table.shop_table_responsive tr:nth-child(2n) td { background: transparent; }

.woocommerce table.cart img,
.woocommerce-cart table.cart img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: var(--op-n-25);
    border-radius: var(--op-r-sm);
    padding: 4px;
}

.woocommerce table.cart td.product-name a {
    font-weight: 600;
    color: var(--op-text);
    text-decoration: none;
}

.woocommerce table.cart td.product-name a:hover { color: var(--op-primary); }

.woocommerce a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--op-r-pill);
    background: var(--op-n-50);
    color: var(--op-n-500) !important;
    font-size: 19px;
    line-height: 1;
    font-weight: 400;
}

.woocommerce a.remove:hover {
    background: var(--op-danger-bg);
    color: var(--op-danger) !important;
}

.woocommerce td.product-price,
.woocommerce td.product-subtotal {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.woocommerce td.product-subtotal { font-size: 17px; }

/* Купон */
.woocommerce .cart .actions .coupon {
    display: flex;
    gap: var(--op-s-2);
    float: none;
    margin-bottom: var(--op-s-4);
}

.woocommerce .cart .actions .coupon input.input-text {
    width: auto;
    flex: 1 1 200px;
    max-width: 280px;
    margin: 0;
}

.woocommerce .cart .actions { padding: var(--op-s-4) !important; }

/* Итоги */
.cart-collaterals,
.woocommerce .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
}

.woocommerce .cart_totals {
    background: var(--op-n-25);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    padding: var(--op-s-6);
}

.woocommerce .cart_totals h2,
.cart-collaterals .cart_totals h2 {
    font-size: 20px;
    margin-bottom: var(--op-s-4);
}

.woocommerce .cart_totals table.shop_table {
    border: 0;
    margin-bottom: var(--op-s-5);
    background: transparent;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
    padding: var(--op-s-3) 0;
    background: transparent;
    text-transform: none;
    font-size: 15px;
    letter-spacing: 0;
    border-color: var(--op-border-soft);
}

.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
    padding-top: var(--op-s-4);
    font-size: 20px;
    font-weight: 800;
    color: var(--op-text);
}

.woocommerce .cart_totals tr.order-total td { font-family: var(--op-font-display); }

.wc-proceed-to-checkout { padding: 0 !important; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; font-size: 16px; min-height: 54px; }

/* Пустая корзина */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
    padding: var(--op-s-12) var(--op-s-6);
    text-align: center;
    background: var(--op-n-25);
    border-radius: var(--op-r-lg);
    font-size: 18px;
    color: var(--op-text-muted);
    border: 0;
}

.woocommerce .return-to-shop { text-align: center; margin-top: var(--op-s-5); }

/* ---------------------------------------------------------------------------
   15. ОФОРМЛЕНИЕ ЗАКАЗА
   --------------------------------------------------------------------------- */
.woocommerce-checkout .col2-set,
.woocommerce-page .col2-set { width: 100%; }

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    padding: var(--op-s-5);
    background: var(--op-n-25);
    margin: 0 0 var(--op-s-6);
}

.woocommerce .woocommerce-billing-fields,
.woocommerce .woocommerce-additional-fields {
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    padding: var(--op-s-6);
    margin-bottom: var(--op-s-6);
}

.woocommerce form .form-row {
    padding: 0;
    margin: 0 0 var(--op-s-4);
}

.woocommerce form .form-row label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--op-n-700);
}

.woocommerce form .form-row .required {
    color: var(--op-danger);
    text-decoration: none;
    border: 0;
}

.woocommerce-checkout #order_review_heading {
    font-size: 22px;
    margin: var(--op-s-8) 0 var(--op-s-4);
}

.woocommerce-checkout #order_review {
    background: var(--op-n-25);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    padding: var(--op-s-6);
}

.woocommerce-checkout #order_review table.shop_table {
    border: 0;
    background: transparent;
    margin-bottom: var(--op-s-5);
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    background: transparent;
    border-color: var(--op-border-soft);
    padding: var(--op-s-3) 0;
}

/* Строка итога была высотой почти в шестьдесят пикселей и с заливкой -
   на фоне светлой карточки заказа она читалась как отдельная плашка.
   Оставляем только крупный кегль: он и так выделяет строку. */
.woocommerce-checkout #order_review tr.order-total,
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
    background: transparent;
    font-size: 18px;
    font-weight: 800;
    padding-top: var(--op-s-3);
    padding-bottom: 0;
    line-height: 1.25;
}

.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

.woocommerce-checkout #payment div.form-row { padding: 0; }

.woocommerce-checkout #payment div.payment_box {
    background: var(--op-green-50);
    border-radius: var(--op-r-sm);
    color: var(--op-n-700);
    font-size: 14px;
    margin: var(--op-s-2) 0 var(--op-s-4);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #place_order { width: 100%; min-height: 56px; font-size: 17px; }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--op-s-4); font-size: 13.5px; }

/* Уведомления */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--op-s-3);
    padding: var(--op-s-4) var(--op-s-5);
    margin: 0 0 var(--op-s-5);
    border: 1px solid transparent;
    border-radius: var(--op-r-md);
    background: var(--op-green-50);
    border-left: 4px solid var(--op-primary);
    color: var(--op-n-800);
    font-size: 14.5px;
    list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-info { background: var(--op-amber-50); border-left-color: var(--op-amber-500); }
.woocommerce-error { background: var(--op-danger-bg); border-left-color: var(--op-danger); }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; min-height: 42px; padding: 8px var(--op-s-5); font-size: 14px; }

/* ---------------------------------------------------------------------------
   16. САЙДБАР И ВИДЖЕТЫ
   --------------------------------------------------------------------------- */
.aside-right .widget,
.side.widget {
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    padding: var(--op-s-5);
    margin: 0 0 var(--op-s-5);
}

.aside-right .widget-title,
.side .widget-title {
    font-family: var(--op-font-display);
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 var(--op-s-4);
    padding: 0;
    color: var(--op-text);
}

.aside-right ul,
.side.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Виджеты подвала имеют тот же класс `.side widget`, что и боковые,
   поэтому светлые разделители протекали на тёмный фон. Исключаем подвал. */
.aside-right li,
.side.widget:not(.footer .side.widget) li {
    padding: var(--op-s-2) 0;
    border-bottom: 1px solid var(--op-border-soft);
    margin: 0;
}

.aside-right li:last-child,
.side.widget li:last-child { border-bottom: 0; }

.footer .side.widget li,
.footer li {
    border-bottom: 0 !important;
    padding: 0;
}

/* Фильтр по цене */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background: var(--op-n-100);
    border-radius: var(--op-r-pill);
    height: 5px;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--op-primary); }

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    width: 18px;
    height: 18px;
    top: -7px;
    background: var(--op-surface);
    border: 3px solid var(--op-primary);
    border-radius: 50%;
    box-shadow: var(--op-sh-sm);
}

.woocommerce .widget_price_filter .price_slider_amount .button {
    min-height: 40px;
    padding: 8px var(--op-s-4);
    font-size: 14px;
}

.woocommerce .widget_price_filter .price_label {
    font-size: 13.5px;
    color: var(--op-text-muted);
    padding-top: var(--op-s-2);
}

/* ---------------------------------------------------------------------------
   17. ГЛАВНАЯ СТРАНИЦА
   --------------------------------------------------------------------------- */
/* --- Герой --- */
.op-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 420px at 82% -8%, rgba(208, 112, 0, .18), transparent 62%),
        linear-gradient(122deg, var(--op-green-900) 0%, var(--op-green-800) 46%, var(--op-green-700) 100%);
    color: #fff;
}

.op-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}

.op-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--op-container);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 76px) var(--op-s-5);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--op-s-10);
    align-items: center;
}

/* Строка над заголовком. Раньше была плашкой с рамкой и полупрозрачной
   заливкой - на градиенте она читалась как отдельная кнопка и спорила
   с настоящими кнопками ниже. Оставили только текст. */
.op-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--op-s-2);
    padding: 0;
    margin-bottom: var(--op-s-4);
    background: none;
    border: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--op-amber-200);
}

.op-hero h1 {
    color: #fff;
    font-size: clamp(30px, 3.4vw + 12px, 54px);
    line-height: 1.06;
    margin: 0 0 var(--op-s-5);
    letter-spacing: -.03em;
}

.op-hero h1 em {
    font-style: normal;
    color: var(--op-amber-400);
}

.op-hero__lead {
    font-size: clamp(15px, .5vw + 14px, 18px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 54ch;
    margin: 0 0 var(--op-s-8);
}

.op-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-3);
    margin-bottom: var(--op-s-8);
}

.op-hero .op-btn--light {
    background: #fff;
    color: var(--op-green-800);
    box-shadow: var(--op-sh-md);
}

.op-hero .op-btn--light:hover { background: var(--op-green-50); color: var(--op-green-900); }

.op-hero .op-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
    box-shadow: none;
}

.op-hero .op-btn--outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* Показатели в герое */
.op-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-8);
    padding-top: var(--op-s-6);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.op-hero__stat { max-width: 190px; }

.op-hero__stat b {
    display: block;
    font-family: var(--op-font-display);
    font-size: clamp(24px, 1.6vw + 14px, 32px);
    font-weight: 800;
    line-height: 1;
    color: var(--op-amber-400);
    letter-spacing: -.02em;
}

.op-hero__stat--plain > svg {
    display: block;
    color: var(--op-amber-400);
    margin-bottom: 8px;
}

.op-hero__stat span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .7);
}

/* --- Фотография в герое ---
   Здесь по очереди были: полупрозрачная карточка с преимуществами (не
   читалась на градиенте) и пара снимков товаров (карточки для маркетплейсов
   с текстом внутри кадра - вдвоём выглядели как чужой баннер).
   Осталась одна фотография: она несёт настроение, а не повторяет каталог. */
.op-hero__photo {
    position: relative;
    /* figure по умолчанию с полями браузера - снимаем */
    margin: 0 0 0 auto;
    width: 100%;
    /* Кадр 3:4. Больше 430px делать нечего: исходник 900px шириной,
       дальше начнётся заметное растяжение. */
    max-width: 430px;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow:
        0 34px 80px -24px rgba(0, 0, 0, .62),
        0 4px 16px rgba(0, 0, 0, .24);
}

.op-hero__photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Снимок очень светлый (снег), а герой тёмно-зелёный. Лёгкая виньетка
   и притемнение к низу сажают кадр в фон, иначе он выглядит вырезанным. */
.op-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(10, 14, 7, .30), rgba(10, 14, 7, 0) 46%),
        radial-gradient(120% 92% at 50% 40%, rgba(10, 14, 7, 0) 54%, rgba(10, 14, 7, .22) 100%);
}

/* --- Секции главной --- */
.op-section { padding: clamp(40px, 4vw, 68px) 0; }
.op-section--alt { background: var(--op-n-25); }

.op-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--op-s-5);
    margin-bottom: var(--op-s-8);
    flex-wrap: wrap;
}

.op-section__head h2 { margin: 0; }

.op-section__head p {
    margin: var(--op-s-2) 0 0;
    color: var(--op-text-muted);
    font-size: 15px;
    max-width: 62ch;
}

.op-section__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--op-primary);
    white-space: nowrap;
}

.op-section__link:hover { gap: 10px; color: var(--op-green-700); }

/* --- Преимущества --- */
.op-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--op-s-4);
}

.op-feature {
    display: flex;
    gap: var(--op-s-4);
    padding: var(--op-s-5);
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
}

.op-feature:hover { border-color: var(--op-green-200); box-shadow: var(--op-sh-sm); }

.op-feature__icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--op-r-md);
    background: var(--op-green-50);
    color: var(--op-green-600);
}

.op-feature b {
    display: block;
    font-family: var(--op-font-display);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--op-text);
}

/* Только описание, НЕ иконка. Прежний селектор `.op-feature span`
   имел специфичность выше, чем `.op-feature__icon`, и сбрасывал ему
   display:grid обратно в block - иконка уезжала в угол плашки. */
.op-feature > div > span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--op-text-muted);
}

.op-feature__icon > svg { display: block; }

/* --- Плитки категорий на главной --- */
.op-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--op-s-4);
}

.op-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--op-s-6) var(--op-s-4);
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    text-decoration: none;
    height: 100%;
}

.op-cat-tile:hover {
    border-color: var(--op-green-300);
    box-shadow: var(--op-sh-md);
    transform: translateY(-4px);
}

.op-cat-tile__img {
    width: 100%;
    max-width: 132px;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: var(--op-s-4);
}

.op-cat-tile b {
    font-family: var(--op-font-display);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--op-text);
    margin-bottom: 6px;
}

.op-cat-tile span { font-size: 13px; color: var(--op-text-muted); }
.op-cat-tile:hover b { color: var(--op-green-700); }

/* --- Полоса доверия ---
   Была карточкой со скруглением внутри светлой секции: секция добавляла
   свои отступы сверху и снизу, карточка - свои поля, и на три коротких
   строки уходило больше двухсот пикселей. Стало лентой во всю ширину:
   зелёный фон у самой секции, у содержимого только вертикальные поля.
   Заодно лента делит страницу пополам - светлый верх, светлый низ. --- */
.op-trust-band {
    background: var(--op-green-800);
    color: #fff;
}

.op-trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--op-s-4) var(--op-s-8);
    padding: var(--op-s-5) 0;
}

.op-trust-strip__item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    max-width: 40ch;   /* иначе строка тянется и рвётся в неудобном месте */
}

.op-trust-strip svg { flex: none; margin-top: 3px; color: var(--op-amber-400); }

/* Заголовок наследовал межстрочный интервал страницы (1.6) - между ним
   и пояснением зияла лишняя строка. Задаём собственный. */
.op-trust-strip b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 3px;
}

.op-trust-strip span {
    display: block;
    font-size: 12.5px;
    line-height: 1.38;
    color: rgba(255, 255, 255, .7);
}

/* --- SEO-текст внизу главной ---
   Теперь он свёрнут (см. page-index.php), поэтому секции хватает
   умеренного отступа: раньше здесь начиналась страница текста. --- */
.index-text {
    padding-top: var(--op-s-8);
    padding-bottom: var(--op-s-8);
}

.index-text .container > .col-lg-12 { max-width: 82ch; }

.index-text h1,
.index-text h2 { font-size: clamp(21px, 1.1vw + 16px, 27px); margin-top: var(--op-s-8); }
.index-text h1:first-child,
.index-text h2:first-child { margin-top: 0; }

.index-text p { color: var(--op-n-600); font-size: 15px; }

/* Старая секция преимуществ с кружками - заменена блоком .op-features */
.index-pr { display: none; }

/* ---------------------------------------------------------------------------
   18. ПОДВАЛ
   --------------------------------------------------------------------------- */
.footer {
    background: var(--op-green-900);
    color: rgba(255, 255, 255, .74);
    padding: var(--op-s-12) 0 var(--op-s-8);
    margin-top: var(--op-s-16);
    border-top: 3px solid var(--op-amber-500);
}

/* Bootstrap 3 добавляет .container::before/::after для клирфикса. В grid они
   становятся полноценными ячейками: первая колонка уходила под пустой
   псевдоэлемент, и весь подвал сдвигался вправо. */
.footer .container::before,
.footer .container::after { display: none !important; }

.footer .container {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.1fr;
    gap: var(--op-s-8);
    align-items: start;
}

.footer > .container > div { float: none; width: auto; padding: 0; }

.footer .widget {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.footer .widget-title {
    font-family: var(--op-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--op-amber-400);
    margin: 0 0 var(--op-s-4);
    padding: 0;
}

.footer ul { list-style: none; padding: 0; margin: 0; }

.footer li {
    padding: 0;
    margin: 0 0 var(--op-s-3);
    border: 0;
    font-size: 14.5px;
    line-height: 1.45;
}

/* Специфичность здесь не запас, а необходимость: в style.css темы подвал
   был светлым, и там осталось `.footer ul.menu li a { color: #222 }`
   (0,1,3). На тёмном фоне ссылки становились нечитаемыми. */
.footer a,
.footer ul.menu li a,
.footer .widget_text a,
.footer li a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: 14.5px;
}

.footer a:hover,
.footer ul.menu li a:hover,
.footer .widget_text a:hover,
.footer li a:hover { color: #fff; }

.footer ul.menu li { margin: 0 0 var(--op-s-3); }

/* Кнопка «Все контакты»: в теме это `.widget_text a:last-child`
   с белым текстом на #222 - на тёмно-зелёном фоне не читалась. */
.footer .widget_text a:last-child,
.footer .widget_text a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 42px;
    padding: 10px var(--op-s-5);
    margin: var(--op-s-3) 0 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--op-r-sm);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.footer .widget_text a:last-child:hover {
    background: var(--op-accent);
    border-color: var(--op-accent);
    color: #fff;
}

.footer .op-btn,
.footer .button {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    min-height: 42px;
    padding: 9px var(--op-s-5);
    font-size: 14px;
}

.footer .op-btn:hover,
.footer .button:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.footer img { border-radius: var(--op-r-md); }

/* Нижняя строка подвала */
.op-footer-bottom {
    max-width: var(--op-container);
    margin: var(--op-s-10) auto 0;
    padding: var(--op-s-5) var(--op-s-5) 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-4);
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}

.op-footer-social { display: flex; gap: var(--op-s-2); }

.op-footer-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--op-r-sm);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
}

.op-footer-social a:hover { background: var(--op-amber-500); color: #fff; }

/* Плавающие соцкнопки слева - на телефоне мешали контенту */

/* ---------------------------------------------------------------------------
   19. ВОЗРАСТНОЕ ПРЕДУПРЕЖДЕНИЕ
   Раньше собиралось в JS со стилями Verdana и выглядело как всплывающее
   окно из 2005-го. Оформление приведено к остальному сайту.
   --------------------------------------------------------------------------- */
.age18 {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(28, 26, 23, .78);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: var(--op-s-4);
    overflow-y: auto;
}

.age18 span {
    display: block;
    width: 100%;
    max-width: 620px;
    margin: auto;
    height: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: var(--op-s-8) var(--op-s-6);
    background: var(--op-surface);
    color: var(--op-n-700) !important;
    border: 0;
    border-radius: var(--op-r-lg);
    box-shadow: var(--op-sh-lg);
    font-family: var(--op-font-ui) !important;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.age18 span > strong {
    display: block;
    font-family: var(--op-font-display);
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--op-text);
    text-align: center;
    margin-bottom: var(--op-s-4);
}

.age18 span a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 150px;
    min-height: 48px;
    padding: 12px var(--op-s-6) !important;
    margin: var(--op-s-2) 6px !important;
    border-radius: var(--op-r-sm);
    font: 700 15px/1.2 var(--op-font-ui) !important;
    box-shadow: var(--op-sh-sm);
}

.age18 span a[style*="23c400"] { background: var(--op-primary) !important; }
.age18 span a[style*="23c400"]:hover { background: var(--op-primary-hover) !important; }
.age18 span a[style*="e5002d"] { background: var(--op-n-500) !important; }
.age18 span a[style*="e5002d"]:hover { background: var(--op-n-700) !important; }

.age18 span p {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--op-text-muted);
    text-align: left;
    margin-bottom: var(--op-s-3);
}

.op-age-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--op-s-2);
    margin: var(--op-s-5) 0;
    padding: var(--op-s-5) 0;
    border-top: 1px solid var(--op-border-soft);
    border-bottom: 1px solid var(--op-border-soft);
}

/* ---------------------------------------------------------------------------
   20. НОВОСТИ / БЛОГ
   --------------------------------------------------------------------------- */
.one-list-post {
    padding: var(--op-s-5);
    margin: 0 0 var(--op-s-5);
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
}

.one-list-post:hover { box-shadow: var(--op-sh-sm); border-color: var(--op-green-200); }

.h-one-list-post a {
    font-family: var(--op-font-display);
    font-weight: 700;
    color: var(--op-text);
}

.h-one-list-post a:hover { color: var(--op-primary); }

.date-one-list-post {
    font-size: 13px;
    color: var(--op-text-soft);
}

/* Пагинация */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: var(--op-s-8) 0 0;
    border: 0;
}

.wp-pagenavi a,
.wp-pagenavi span {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--op-s-3);
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-sm);
    color: var(--op-n-700);
    font-size: 14.5px;
    font-weight: 600;
    margin: 0;
}

.wp-pagenavi a:hover {
    border-color: var(--op-green-400);
    background: var(--op-green-50);
    color: var(--op-green-800);
}

.wp-pagenavi span.current {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: #fff;
}
/* ---------------------------------------------------------------------------
   21. МОБИЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ
   Основные действия - в зоне большого пальца. На телефоне это главный
   способ навигации в российском e-commerce.
   --------------------------------------------------------------------------- */
.op-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 940;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--op-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 16px rgba(28, 26, 23, .08);
}

.op-tabbar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.op-tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    min-height: 58px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--op-n-500);
    text-decoration: none;
    line-height: 1.15;
    text-align: center;
}

.op-tabbar a svg { flex: none; }
.op-tabbar a:hover,
.op-tabbar a.is-active { color: var(--op-green-700); }

.op-tabbar__badge {
    position: absolute;
    top: 5px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--op-r-pill);
    background: var(--op-amber-500);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   22. ЛИПКАЯ ПОКУПКА НА СТРАНИЦЕ ТОВАРА (телефон)
   --------------------------------------------------------------------------- */
.op-buybar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 945;
    align-items: center;
    gap: var(--op-s-3);
    padding: var(--op-s-3) var(--op-s-4);
    padding-bottom: calc(var(--op-s-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--op-border);
    box-shadow: 0 -4px 20px rgba(28, 26, 23, .1);
    transform: translateY(110%);
    transition: transform var(--op-t-base) var(--op-ease) !important;
}

.op-buybar.is-visible { transform: translateY(0); }

.op-buybar__price {
    flex: none;
    font-family: var(--op-font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--op-green-800);
    font-variant-numeric: tabular-nums;
}

.op-buybar__price small {
    display: block;
    font-family: var(--op-font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--op-text-soft);
    letter-spacing: 0;
}

.op-buybar__btn {
    flex: 1 1 auto;
    min-height: 50px;
}

/* ---------------------------------------------------------------------------
   23. АДАПТИВ
   В теме были брейкпоинты 1366 / 1200 / 991 / 768 - и ничего ниже 768.
   Телефоны (360-430px) получали правила, рассчитанные на планшет.
   --------------------------------------------------------------------------- */

/* --- До 1200px: сжимаем шапку --- */
@media (max-width: 1440px) {
    .topmenu ul li a { padding: 7px 9px; font-size: 12.8px; letter-spacing: 0; }
    .header > .container { gap: var(--op-s-3); }
    .op-logo-text b { font-size: 15.5px; }
}

@media (max-width: 1200px) {
    .topmenu ul li a { padding: 6px 7px; font-size: 12px; }
    .op-logo-text { display: none; }
    .op-logo-text b { font-size: 15px; }
    .top-contacts a { font-size: 15px; }
    .woocommerce div.product { gap: var(--op-s-8); }
}

/* --- До 1100px: страница товара в одну колонку --- */
@media (max-width: 1100px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: var(--op-s-6);
    }
    /* Специфичность должна совпадать с базовым правилом (там `div.summary`),
       иначе grid-column: 2 остаётся в силе и на узком экране появляется
       фантомная вторая колонка. */
    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > div.woocommerce-product-gallery,
    .woocommerce div.product > div.summary,
    .woocommerce div.product > div.entry-summary {
        grid-column: 1 !important;
        grid-row: auto;
    }

    .op-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--op-s-8);
    }
}

/* --- До 991px: мобильная навигация --- */
@media (max-width: 991px) {
    :root { --op-header-h: 64px; }

    .header > .container {
        min-height: var(--op-header-h);
        gap: var(--op-s-3);
        flex-wrap: nowrap;
    }

    .header .logo img { height: 36px; }
    .op-logo-text b { font-size: 14px; }
    .op-logo-text span { font-size: 9px; }

    .close-menu { display: inline-flex; order: -1; }

    /* Матовое стекло у шапки на телефоне снимаем - и это не косметика.
       Ненулевой backdrop-filter делает элемент контейнером для потомков
       с position: fixed (так же работают transform и filter). Выдвижное
       меню лежит внутри шапки, поэтому отсчитывало top и bottom не от окна,
       а от шапки высотой 64 px - и открывалось полоской в один пункт
       вместо панели во весь экран. Именно из-за этого меню «не открывалось».
       Взамен делаем шапку непрозрачной: на телефоне размытие всё равно
       почти не видно. */
    .header,
    .header.is-stuck {
        background: var(--op-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Меню - выдвижная панель, а не «простыня» поверх контента.

       Селекторы намеренно начинаются с .header. Причина: выше по файлу
       есть безусловное правило `.header .topmenu` (вес 0,2,0), которое
       перебивало у панели ширину и поля - она получалась не выдвижным
       ящиком, а полоской. Вдобавок style.css в этом же диапазоне двигает
       меню через `left` и `opacity` со своим весом. Две системы анимации
       мешали друг другу: класс `active` навешивался, подложка появлялась,
       а панель оставалась за краем экрана - меню «не открывалось».

       Поэтому здесь: вес поднят до .header, чужие left/opacity/z-index
       погашены явно, и за движение отвечает только transform. */
    .header .topmenu {
        position: fixed;
        top: var(--op-header-h);
        left: 0;
        right: auto;
        bottom: 0;
        width: min(88vw, 360px);
        max-width: 360px;
        height: auto;
        flex: none;
        min-width: 0;
        padding: var(--op-s-5) var(--op-s-4) var(--op-s-12);
        background: var(--op-surface);
        border: 0;
        box-shadow: var(--op-sh-lg);
        opacity: 1;
        transform: translateX(-102%);
        transition: transform 260ms var(--op-ease) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1002;
        display: block;
    }

    .admin-bar .header .topmenu { top: calc(var(--op-header-h) + 32px); }

    .header .topmenu.active {
        left: 0;
        opacity: 1;
        z-index: 1002;
        transform: translateX(0);
    }

    .topmenu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        text-align: left;
    }

    .topmenu ul li { width: 100%; }

    .topmenu ul li a {
        padding: 13px var(--op-s-4);
        font-size: 15px;
        border-radius: var(--op-r-sm);
    }

    ul.sub-menu {
        position: static;
        display: block;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--op-green-100);
        border-radius: 0;
        margin: 2px 0 var(--op-s-2) var(--op-s-4);
        padding: 0 0 0 var(--op-s-2);
        min-width: 0;
        background: transparent;
    }

    ul.sub-menu li a { padding: 10px var(--op-s-3); font-size: 14px; }

    /* Затемнение под панелью */
    .op-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(28, 26, 23, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms var(--op-ease), visibility 220ms !important;
    }

    .op-menu-backdrop.is-open { opacity: 1; visibility: visible; }
    body.op-menu-open { overflow: hidden; }

    /* Контакты в шапке скрываем - телефон уходит в нижнюю панель */
    .top-contacts { display: none; }
    .header .head-contacts { margin-left: auto; }

    /* Каталог */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: var(--op-s-4);
    }

    /* Сайдбар уходит вниз */
    .aside-right { margin-top: var(--op-s-8); }

    /* Секции плотнее */
    .op-section { padding: clamp(32px, 6vw, 48px) 0; }
    .content { padding-bottom: var(--op-s-12); }
}

/* --- До 767px: телефон --- */
@media (max-width: 767px) {
    :root {
        --op-s-16: 44px;
        --op-s-20: 56px;
    }

    .container { padding-left: var(--op-s-4); padding-right: var(--op-s-4); }

    /* Нижняя панель включается */
    .op-tabbar { display: block; }
    body { padding-bottom: 58px; }
    .single-product body { padding-bottom: 0; }

    /* Верхняя полоса на телефоне не показывается вовсе: она занимала две
       строки, отжимала первый экран вниз и повторяла то, что и так есть
       в подвале и на странице доставки. */
    .op-topbar { display: none; }

    /* Каталог: 2 колонки - это то, к чему привык покупатель в РФ */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--op-s-3);
    }

    .woocommerce ul.products li.product { padding: var(--op-s-2) var(--op-s-2) var(--op-s-3); }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .woocommerce ul.products li.product .price { font-size: 18px; }

    .woocommerce ul.products li.product .button {
        min-height: 44px;   /* минимум для уверенного попадания пальцем */
        font-size: 13.5px;
        padding: 8px var(--op-s-3);
    }

    .op-badge { font-size: 10px; padding: 3px 7px; }

    /* Плитки категорий */
    .op-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-s-3); }
    .op-cat-tile { padding: var(--op-s-4) var(--op-s-3); }
    .op-cat-tile__img { max-width: 92px; margin-bottom: var(--op-s-3); }
    .op-cat-tile b { font-size: 13.5px; }

    /* Герой */
    .op-hero__inner { padding: var(--op-s-10) var(--op-s-4); gap: var(--op-s-6); }
    .op-hero__actions { gap: var(--op-s-2); }
    .op-hero__actions .op-btn { flex: 1 1 100%; }
    .op-hero__stats { gap: var(--op-s-4); grid-template-columns: repeat(2, 1fr); }

    /* Секции */
    .op-section__head { margin-bottom: var(--op-s-5); }
    .op-features { grid-template-columns: 1fr; gap: var(--op-s-3); }
    .op-feature { padding: var(--op-s-4); }

    /* Страница товара */
    .woocommerce div.product .product_title { font-size: 22px; }

    .woocommerce div.product > .summary > p.price,
    .woocommerce div.product > .summary > span.price {
        font-size: 30px;
        padding: 0;
        margin-bottom: var(--op-s-4);
    }

    /* Количество и «В корзину» держим в одной строке и на телефоне:
       кнопка занимает всё, что осталось от поля количества. Раньше она
       переносилась под него и форма растягивалась на две строки. */
    .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; }

    .woocommerce div.product div.images .flex-control-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 9px var(--op-s-4); font-size: 13.5px; }

    /* Липкая кнопка покупки */
    .single-product .op-buybar { display: flex; }

    /* --- Корзина на телефоне ---
       Было: таблица-карточка, внутри неё карточка на каждую строку, а в ней
       подписи «Товар:», «Цена:», «Подытог:» с выключкой вправо. Рамка в рамке,
       столбик цифр у правого края, миниатюра товара скрыта (её прячет сам
       WooCommerce) - позиция не опознавалась и выглядела нагромождением.
       Стало: одна карточка на позицию, снимок слева, название и цена текстом,
       количество и сумма снизу. --- */

    /* Внешняя рамка таблицы не нужна: карточками стали сами строки */
    .woocommerce-cart table.shop_table.cart {
        border: 0;
        background: none;
        border-radius: 0;
        margin-bottom: var(--op-s-4);
    }

    .woocommerce table.shop_table_responsive thead { display: none !important; }

    .woocommerce table.shop_table_responsive,
    .woocommerce table.shop_table_responsive tbody,
    .woocommerce table.shop_table_responsive tr,
    .woocommerce table.shop_table_responsive td {
        display: block;
        width: 100%;
    }

    .woocommerce table.cart tr.cart_item {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "foto nazvanie"
            "foto cena"
            "kolvo summa";
        column-gap: var(--op-s-3);
        row-gap: 7px;
        align-items: center;
        margin: 0 0 var(--op-s-3);
        padding: var(--op-s-4) 44px var(--op-s-4) var(--op-s-4);
        border: 1px solid var(--op-border-soft);
        border-radius: var(--op-r-md);
        background: var(--op-surface);
    }

    /* !important здесь вынужденно: собственный стиль WooCommerce задаёт
       `.woocommerce table.shop_table_responsive tr td { text-align: right
       !important }`, и без этого название с ценой прижимались к правому краю. */
    .woocommerce table.cart tr.cart_item td {
        display: block;
        width: auto;
        border: 0;
        padding: 0;
        text-align: left !important;
    }

    /* Подписи из data-title убираем везде, кроме суммы: там она отличает
       стоимость позиции от цены за штуку. */
    .woocommerce table.cart tr.cart_item td::before { display: none; }

    /* Миниатюру WooCommerce в узкой корзине прячет сам. Возвращаем:
       без снимка позицию не узнать, а место под него всё равно есть. */
    .woocommerce table.cart tr.cart_item td.product-thumbnail {
        display: block !important;
        grid-area: foto;
        align-self: start;
    }

    .woocommerce table.cart tr.cart_item td.product-thumbnail img {
        width: 64px;
        height: 64px;
        margin: 0;
    }

    .woocommerce table.cart tr.cart_item td.product-name { grid-area: nazvanie; }

    .woocommerce table.cart tr.cart_item td.product-name a {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--op-text);
    }

    .woocommerce table.cart tr.cart_item td.product-price {
        grid-area: cena;
        font-size: 13px;
        color: var(--op-text-muted);
    }

    .woocommerce table.cart tr.cart_item td.product-quantity {
        grid-area: kolvo;
        justify-self: start;
    }

    .woocommerce table.cart tr.cart_item td.product-subtotal {
        grid-area: summa;
        text-align: right !important;
        font-family: var(--op-font-display);
        font-size: 17px;
        font-weight: 800;
        color: var(--op-text);
    }

    .woocommerce table.cart tr.cart_item td.product-subtotal::before {
        display: inline;
        content: attr(data-title) ' ';
        font-family: var(--op-font-ui);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--op-text-soft);
    }

    .woocommerce table.cart tr.cart_item td.product-remove {
        position: absolute;
        top: var(--op-s-3);
        right: var(--op-s-3);
        width: auto;
        padding: 0;
    }

    /* Строка с кнопкой «Обновить корзину» карточкой быть не должна */
    .woocommerce table.cart tr:not(.cart_item) {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    /* Своё поле у ячейки с кнопкой ни к чему: между позициями и итогом
       набегало почти сто пикселей пустоты. */
    .woocommerce .cart .actions { padding: 0 !important; }
    .woocommerce-cart .cart-collaterals { margin-top: var(--op-s-5); }

    /* --- Итог: таблица внутри карточки не должна сама быть карточкой --- */
    .woocommerce .cart_totals table.shop_table_responsive tr,
    .woocommerce-checkout #order_review table.shop_table_responsive tr {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .woocommerce .cart_totals table.shop_table_responsive td,
    .woocommerce-checkout #order_review table.shop_table_responsive td {
        padding: 4px 0;
    }

    .woocommerce .cart .actions .coupon { flex-direction: column; }
    .woocommerce .cart .actions .coupon input.input-text { max-width: none; }
    .woocommerce .cart .actions .coupon .button { width: 100%; }

    .woocommerce .cart_totals,
    .woocommerce-checkout #order_review,
    .woocommerce .woocommerce-billing-fields,
    .woocommerce .woocommerce-additional-fields { padding: var(--op-s-4); }

    /* Подвал */
    .footer { padding: var(--op-s-10) 0 var(--op-s-6); margin-top: var(--op-s-12); }
    .footer .container { grid-template-columns: repeat(2, 1fr); gap: var(--op-s-6); }
    .op-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--op-s-3); }

    /* Возрастное окно */
    .age18 span { padding: var(--op-s-5) var(--op-s-4); }
    .age18 span > strong { font-size: 21px !important; }
    .age18 span a { width: 100% !important; margin: 5px 0 !important; }
}

/* --- До 560px: узкий телефон --- */
@media (max-width: 560px) {
    .op-hero__stats { grid-template-columns: repeat(2, 1fr); }
    .op-hero h1 { font-size: clamp(26px, 7vw, 34px); }
    .op-section__head { flex-direction: column; align-items: flex-start; gap: var(--op-s-3); }
    .footer .container { grid-template-columns: 1fr; gap: var(--op-s-5); }

    .woocommerce div.product form.cart div.quantity { width: auto; flex: 0 0 auto; }
    .woocommerce div.product form.cart div.quantity input.qty { width: 72px; }

    .op-buybar__price { font-size: 18px; }
}

/* --- До 400px: компактные телефоны --- */
@media (max-width: 400px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { gap: var(--op-s-2); }
    .woocommerce ul.products li.product .price { font-size: 16.5px; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 12.5px; }
    .op-cats { gap: var(--op-s-2); }
    .op-tabbar a { font-size: 9.5px; }
    .header .logo img { height: 32px; }
    .op-logo-text { display: none; }
}

/* ---------------------------------------------------------------------------
   24. МЕЛОЧИ И УТИЛИТЫ
   --------------------------------------------------------------------------- */
.op-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Bootstrap-таблицы внутри контента не должны ломать сетку */
.content table { max-width: 100%; }

/* Картинки в контенте */
.content img { border-radius: var(--op-r-sm); }

/* Анимации появления карточек здесь намеренно нет.
   Постепенное проявление сетки (opacity 0 → 1 с задержками) откладывает
   отрисовку самого крупного элемента экрана: в каталоге это фото первого
   товара, то есть напрямую ухудшает LCP. Ради 380 мс декоративного
   эффекта это невыгодный размен. */

/* Печать */
@media print {
    .header, .footer, .op-topbar, .op-tabbar, .op-buybar,
    .op-dock, .aside-right, .age18 { display: none !important; }
    body { padding: 0; }
}

/* ---------------------------------------------------------------------------
   25. ПРАВИЛА, ПЕРЕНЕСЁННЫЕ ИЗ ИНЛАЙНОВОГО <style> В footer.php
   Раньше эти строки жили прямо в подвале и не поддавались управлению
   вместе с остальным оформлением.
   --------------------------------------------------------------------------- */

/* Осознанные скрытия магазина:
   - заголовки групп полей на оформлении (их роль выполняет структура блоков);
   - список способов оплаты: включён единственный способ, радиокнопка не нужна. */
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3,
.woocommerce-checkout #payment ul.payment_methods {
    display: none;
}

/* Итог в мини-корзине: подпись задавалась через content, потому что строка
   не переводилась. Перевод теперь есть - возвращаем нормальный текст. */
.woocommerce.widget_shopping_cart .total strong {
    font-size: inherit;
    font-weight: 700;
}

.woocommerce.widget_shopping_cart .total strong::before { content: none; }

/* Раскладка списков товаров в виджетах задана ниже, в разделе 29 -
   прежние правила отсюда убраны, они спорили с ним (display:flex против
   абсолютного позиционирования картинки) и ломали мини-корзину. */

/* Отзывы о товаре */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    padding: var(--op-s-4);
    margin-left: 68px;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
    width: 52px;
    border: 0;
    border-radius: var(--op-r-pill);
    padding: 0;
    background: transparent;
}

.woocommerce #review_form #respond textarea { min-height: 128px; }

/* Звёзды рейтинга - в фирменный янтарный */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--op-amber-500); }

/* Форма входа/регистрации в кабинете */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--op-s-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 9px var(--op-s-4);
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--op-n-700);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--op-primary);
    border-color: var(--op-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   26. МИНИМАЛЬНАЯ ПАРТИЯ
   Условие «отправляем от N шт» раньше существовало только внутри описания
   товара - покупатель узнавал о нём в лучшем случае в самом низу страницы.
   --------------------------------------------------------------------------- */
.op-lot {
    order: 3;
    align-self: flex-start;
    margin: 6px var(--op-s-1) 0;
    padding: 3px 9px;
    border-radius: var(--op-r-pill);
    background: var(--op-amber-50);
    color: var(--op-amber-700);
    border: 1px solid var(--op-amber-100);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.op-lot-note {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: var(--op-s-2);
    margin: 0 0 var(--op-s-1);
    padding: var(--op-s-3) var(--op-s-4);
    border-radius: var(--op-r-sm);
    background: var(--op-amber-50);
    border: 1px solid var(--op-amber-100);
    color: var(--op-amber-700);
    font-size: 13.5px;
    line-height: 1.4;
}

.op-lot-note svg { flex: none; }
.op-lot-note b { font-weight: 800; white-space: nowrap; }
.op-lot-note > span { display: block; }
.op-lot-note .woocommerce-Price-amount { font-weight: 800; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   27. ПОДВАЛ: КОЛОНКА БРЕНДА
   --------------------------------------------------------------------------- */
.footer .container { grid-template-columns: 1.35fr 1fr .9fr 1.05fr 1.15fr; }

.op-footer-brand { min-width: 0; }

.op-footer-logo {
    display: flex;
    align-items: center;
    gap: var(--op-s-3);
    margin-bottom: var(--op-s-4);
    text-decoration: none;
}

.op-footer-logo img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    flex: none;
    /* У логотипа непрозрачная светлая подложка, поэтому не инвертируем его
       (получался белый квадрат), а кладём на светлую плашку. */
    background: #fff;
    border-radius: var(--op-r-sm);
    padding: 3px;
}

.op-footer-logo span { display: flex; flex-direction: column; line-height: 1.1; }

.op-footer-logo b {
    font-family: var(--op-font-display);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

.op-footer-logo i {
    font-style: normal;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--op-amber-400);
    font-weight: 600;
    margin-top: 3px;
}

.op-footer-about {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .6);
    margin: 0 0 var(--op-s-4);
    max-width: 34ch;
}

.op-footer-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--op-s-2);
    font-family: var(--op-font-display);
    font-size: 18px !important;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.op-footer-phone svg { color: var(--op-amber-400); flex: none; }
.op-footer-phone:hover { color: var(--op-amber-400) !important; }

/* Карта в подвале должна тянуться по колонке */
.footer iframe {
    width: 100% !important;
    max-width: 100%;
    height: 150px;
    border: 0;
    border-radius: var(--op-r-md);
    display: block;
}

.footer .widget_text p { margin: 0 0 var(--op-s-3); font-size: 14.5px; }
.footer .widget_text p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   28. НОВОСТИ: ЛЕНТА И ЗАПИСЬ
   --------------------------------------------------------------------------- */
.list-post { margin: 0; }

.one-list-post {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--op-s-5);
    align-items: start;
    padding: var(--op-s-5);
    margin: 0 0 var(--op-s-4);
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
}

.one-list-post--no-img { grid-template-columns: minmax(0, 1fr); }

.one-list-post:hover {
    border-color: var(--op-green-200);
    box-shadow: var(--op-sh-md);
    transform: translateY(-2px);
}

.one-list-post .img-one-list-post {
    display: block;
    width: 100%;
    float: none;
    margin: 0;
    border-radius: var(--op-r-md);
    overflow: hidden;
    background: var(--op-n-25);
}

.one-list-post .img-one-list-post img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.one-list-post .content-one-list-post {
    width: auto;
    float: none;
    padding: 0;
    min-width: 0;
}

.date-one-list-post {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--op-text-soft);
    margin-bottom: var(--op-s-2);
}

.h-one-list-post {
    font-family: var(--op-font-display);
    font-size: clamp(17px, .7vw + 15px, 21px);
    font-weight: 700;
    line-height: 1.28;
    margin: 0 0 var(--op-s-2);
    padding: 0;
}

.h-one-list-post a { color: var(--op-text); text-decoration: none; }
.one-list-post:hover .h-one-list-post a { color: var(--op-green-700); }

.desc-one-list-post {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--op-n-600);
    margin: 0 0 var(--op-s-3);
}

.desc-one-list-post p { margin: 0; }

.op-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--op-primary);
    text-decoration: none !important;
}

.op-read-more:hover { gap: 10px; color: var(--op-green-700); }

.op-empty {
    padding: var(--op-s-12);
    text-align: center;
    color: var(--op-text-muted);
    background: var(--op-n-25);
    border-radius: var(--op-r-lg);
}

@media (max-width: 767px) {
    .one-list-post { grid-template-columns: minmax(0, 1fr); padding: var(--op-s-4); gap: var(--op-s-4); }
    .one-list-post .img-one-list-post img { aspect-ratio: 16 / 9; }
    .footer .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .op-footer-brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   29. СПИСКИ ТОВАРОВ В ВИДЖЕТАХ
   Один и тот же вид для мини-корзины и для «Рекомендуем»/«Популярное»:
   картинка слева, название в две строки, цена под ним.

   Тонкости, из-за которых прежняя вёрстка ломалась:
   • WooCommerce вешает на <li> клирфикс `::before/::after { display: table }`
     - в нашей раскладке они добавляют лишние строки;
   • картинка и название лежат ВНУТРИ одной ссылки, поэтому картинку
     позиционируем абсолютно, а не через сетку;
   • названия вроде «Приманка «PROFESSOR»(привада)» содержат длинные
     неразрывные куски и вылезали за границу колонки - нужен overflow-wrap.
   --------------------------------------------------------------------------- */
.woocommerce ul.cart_list,
.woocommerce ul.product_list_widget,
.aside-right ul.cart_list,
.aside-right ul.product_list_widget {
    margin: 0 0 var(--op-s-4);
    padding: 0;
    list-style: none;
}

.woocommerce ul.cart_list li::before,
.woocommerce ul.cart_list li::after,
.woocommerce ul.product_list_widget li::before,
.woocommerce ul.product_list_widget li::after { display: none !important; }

.aside-right ul.cart_list li,
.aside-right ul.product_list_widget li,
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
    position: relative;
    display: block;
    min-height: 60px;
    padding: var(--op-s-3) var(--op-s-2) var(--op-s-3) 68px !important;
    margin: 0;
    border-bottom: 1px solid var(--op-border-soft);
    overflow: hidden;
}

/* У пунктов мини-корзины справа стоит крестик - освобождаем под него место */
.aside-right ul.cart_list li.mini_cart_item,
.woocommerce ul.cart_list li.mini_cart_item {
    padding-right: 32px !important;
}

.aside-right ul.cart_list li:last-child,
.aside-right ul.product_list_widget li:last-child,
.woocommerce ul.cart_list li:last-child,
.woocommerce ul.product_list_widget li:last-child { border-bottom: 0; }

/* Название */
.aside-right ul.cart_list li > a:not(.remove),
.aside-right ul.product_list_widget li > a:not(.remove),
.woocommerce ul.cart_list li > a:not(.remove),
.woocommerce ul.product_list_widget li > a:not(.remove) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    color: var(--op-text) !important;
    text-decoration: none !important;
    padding: 0;
    margin: 0;
    text-align: left;
}

.aside-right ul.cart_list li > a:not(.remove):hover,
.aside-right ul.product_list_widget li > a:not(.remove):hover,
.woocommerce ul.product_list_widget li > a:not(.remove):hover { color: var(--op-primary) !important; }

/* Картинка */
.aside-right ul.cart_list li img,
.aside-right ul.product_list_widget li img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
    position: absolute;
    left: 0;
    top: var(--op-s-3);
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    background: var(--op-n-25);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-sm);
    padding: 3px;
    margin: 0 !important;
    float: none !important;
    box-shadow: none;
}

/* Строка цены: «1 × 1 000 ₽» в корзине и просто цена в подборках */
.aside-right ul.cart_list li .quantity,
.woocommerce ul.cart_list li .quantity,
.woocommerce ul.woocommerce-mini-cart li .quantity {
    display: block;
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--op-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aside-right ul.cart_list li .quantity .woocommerce-Price-amount,
.woocommerce ul.cart_list li .quantity .woocommerce-Price-amount {
    display: inline !important;
    font-weight: 700;
    font-size: 14px;
    color: var(--op-text);
}

/* Цена отдельным элементом (виджеты «Рекомендуем», «Популярное», «Новинки») */
.aside-right ul.product_list_widget li > .woocommerce-Price-amount,
.aside-right ul.product_list_widget li > ins,
.aside-right ul.product_list_widget li > del,
.woocommerce ul.product_list_widget li > .woocommerce-Price-amount,
.woocommerce ul.product_list_widget li > ins,
.woocommerce ul.product_list_widget li > del {
    display: inline-block !important;
    float: none !important;
    margin: 5px 8px 0 0;
    font-family: var(--op-font-display);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--op-text);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.aside-right ul.product_list_widget li > del,
.woocommerce ul.product_list_widget li > del {
    font-size: 13px;
    font-weight: 600;
    color: var(--op-text-soft);
    text-decoration: line-through;
    opacity: 1;
}

.aside-right ul.product_list_widget li > ins,
.woocommerce ul.product_list_widget li > ins { color: var(--op-danger); background: transparent; }

.aside-right ul.product_list_widget li .woocommerce-Price-currencySymbol,
.woocommerce ul.product_list_widget li .woocommerce-Price-currencySymbol {
    font-size: .8em;
    color: var(--op-text-muted);
    margin-left: 1px;
}

/* Звёзды рейтинга внутри подборки не должны ломать строку */
.woocommerce ul.product_list_widget li .star-rating {
    margin: 5px 0 0;
    float: none;
    font-size: .72em;
}

/* Итог мини-корзины */
.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total,
.aside-right .widget_shopping_cart .total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--op-s-3);
    margin: 0 0 var(--op-s-4);
    padding: var(--op-s-4) 0 0;
    border-top: 2px solid var(--op-border-soft);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--op-text-muted);
}

.woocommerce .widget_shopping_cart .total .woocommerce-Price-amount,
.woocommerce.widget_shopping_cart .total .woocommerce-Price-amount,
.aside-right .widget_shopping_cart .total .woocommerce-Price-amount {
    font-family: var(--op-font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--op-text);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Кнопки мини-корзины */
.woocommerce .widget_shopping_cart .buttons,
.woocommerce.widget_shopping_cart .buttons,
.aside-right .widget_shopping_cart .buttons {
    display: grid;
    gap: var(--op-s-2);
    margin: 0;
    padding: 0;
}

.woocommerce .widget_shopping_cart .buttons a.button,
.aside-right .widget_shopping_cart .buttons a.button {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--op-s-4);
    font-size: 14.5px;
    margin: 0;
}

/* В теме вторая кнопка была скрыта - возвращаем её как основную:
   из мини-корзины логично попадать прямо в оформление. */
.woocommerce-mini-cart__buttons a.button.checkout.wc-forward {
    display: inline-flex !important;
    background: var(--op-accent);
}

.woocommerce-mini-cart__buttons a.button.checkout.wc-forward:hover { background: var(--op-accent-hover); }

.woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background: var(--op-surface);
    color: var(--op-n-700);
    border-color: var(--op-border);
    box-shadow: none;
}

.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
    background: var(--op-green-50);
    color: var(--op-green-800);
    border-color: var(--op-green-300);
}

.woocommerce .widget_shopping_cart p.woocommerce-mini-cart__empty-message {
    margin: 0;
    padding: var(--op-s-6) var(--op-s-4);
    text-align: center;
    font-size: 14px;
    color: var(--op-text-muted);
    background: var(--op-n-25);
    border-radius: var(--op-r-md);
}

/* Крестик удаления. WooCommerce прибивает его к левому краю селектором
   специфичнее нашего, поэтому без !important не обойтись. */
.aside-right .widget_shopping_cart li a.remove,
.woocommerce ul.cart_list li a.remove,
.woocommerce ul.woocommerce-mini-cart li a.remove {
    position: absolute !important;
    top: var(--op-s-3) !important;
    right: 0 !important;
    left: auto !important;
    width: 24px;
    height: 24px;
    font-size: 15px !important;
    line-height: 1;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   30. УВЕДОМЛЕНИЯ («товар добавлен в корзину» и прочие)
   --------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--op-s-3) var(--op-s-4);
    padding: var(--op-s-4) var(--op-s-5) var(--op-s-4) 54px;
    margin: 0 0 var(--op-s-5);
    border: 1px solid var(--op-green-100);
    border-left: 4px solid var(--op-primary);
    border-radius: var(--op-r-md);
    background: var(--op-green-50);
    color: var(--op-n-800);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: var(--op-sh-xs);
    list-style: none;
}

/* Иконка-кружок слева вместо галочки WooCommerce по умолчанию */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: block !important;
    content: '';
    position: absolute;
    left: var(--op-s-4);
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--op-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    color: transparent;
    font-size: 0;
    margin: 0;
    padding: 0;
    animation: none;
}

.woocommerce-info {
    background: var(--op-amber-50);
    border-color: var(--op-amber-100);
    border-left-color: var(--op-amber-500);
}

.woocommerce-info::before {
    background-color: var(--op-amber-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8h.01M11 12h1v5h1'/%3E%3C/svg%3E");
}

.woocommerce-error {
    background: var(--op-danger-bg);
    border-color: #f2d5d2;
    border-left-color: var(--op-danger);
}

.woocommerce-error::before {
    background-color: var(--op-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    margin: 0 0 0 auto;
    min-height: 42px;
    padding: 9px var(--op-s-5);
    font-size: 14px;
    background: var(--op-surface);
    color: var(--op-green-800);
    border-color: var(--op-green-300);
    box-shadow: none;
    order: 2;
}

.woocommerce-message .button:hover {
    background: var(--op-primary);
    color: #fff;
    border-color: var(--op-primary);
}

@media (max-width: 560px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error { padding-left: var(--op-s-4); padding-top: 46px; }
    .woocommerce-message::before,
    .woocommerce-info::before,
    .woocommerce-error::before { top: var(--op-s-4); transform: none; }
    .woocommerce-message .button { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   31. КОРЗИНА: ДОВОДКА
   --------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce { display: grid; gap: var(--op-s-6); }

.woocommerce-cart table.cart td.product-thumbnail { width: 96px; }

.woocommerce-cart table.cart img {
    width: 76px;
    height: 76px;
    border: 1px solid var(--op-border-soft);
}

.woocommerce-cart table.cart td.product-name {
    font-size: 15px;
    line-height: 1.4;
}

.woocommerce table.cart td.actions {
    background: var(--op-n-25);
    border-top: 1px solid var(--op-border-soft);
}

.woocommerce .cart-collaterals { display: grid; gap: var(--op-s-5); }

/* Итоги - заметная карточка, а не серый прямоугольник */
.woocommerce .cart_totals {
    background: linear-gradient(180deg, var(--op-green-50), var(--op-n-25));
    border: 1px solid var(--op-green-100);
}

.woocommerce .cart_totals tr.order-total td .woocommerce-Price-amount {
    font-family: var(--op-font-display);
    font-size: 26px;
    letter-spacing: -.02em;
    color: var(--op-green-800);
}

/* Полоса выгод под кнопкой оформления */
.op-cart-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--op-s-3);
    margin: var(--op-s-5) 0 0;
    padding: var(--op-s-4) 0 0;
    border-top: 1px solid var(--op-green-100);
    list-style: none;
}

.op-cart-perks li {
    display: flex;
    align-items: flex-start;
    gap: var(--op-s-2);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--op-n-600);
    margin: 0;
    padding: 0;
    border: 0;
}

.op-cart-perks svg { flex: none; margin-top: 1px; color: var(--op-green-500); }

/* Крестик удаления в таблице корзины крупнее - по нему целятся пальцем */
.woocommerce-cart table.cart a.remove { width: 34px; height: 34px; font-size: 20px; }

/* ---------------------------------------------------------------------------
   32. ОТДЕЛЬНАЯ ЗАПИСЬ (новость)
   --------------------------------------------------------------------------- */
.op-post-head {
    margin: 0 0 var(--op-s-6);
    padding: 0 0 var(--op-s-5);
    border-bottom: 1px solid var(--op-border-soft);
}

.op-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-s-4);
    font-size: 13px;
    color: var(--op-text-soft);
    margin-bottom: var(--op-s-3);
}

.op-post-meta span { display: inline-flex; align-items: center; gap: 6px; }

.op-post-cover {
    margin: 0 0 var(--op-s-6);
    border-radius: var(--op-r-lg);
    overflow: hidden;
    background: var(--op-n-25);
}

.op-post-cover img { width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover; }

.op-post-body { max-width: 72ch; font-size: 16.5px; line-height: 1.7; }
.op-post-body h2 { margin-top: var(--op-s-8); }
.op-post-body img { border-radius: var(--op-r-md); }

.op-post-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-3);
    justify-content: space-between;
    margin-top: var(--op-s-10);
    padding-top: var(--op-s-5);
    border-top: 1px solid var(--op-border-soft);
}

.op-post-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 46%;
    font-size: 14px;
    font-weight: 600;
    color: var(--op-n-700);
    text-decoration: none !important;
}

.op-post-nav a:hover { color: var(--op-primary); }

/* ---------------------------------------------------------------------------
   33. КОНТАКТЫ
   --------------------------------------------------------------------------- */
.op-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--op-s-4);
    margin: 0 0 var(--op-s-8);
}

.op-contact-card {
    display: flex;
    gap: var(--op-s-4);
    padding: var(--op-s-5);
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
}

.op-contact-card:hover { border-color: var(--op-green-200); box-shadow: var(--op-sh-sm); }

.op-contact-card__icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--op-r-md);
    background: var(--op-green-50);
    color: var(--op-green-600);
}

.op-contact-card__icon > svg { display: block; }

.op-contact-card__body { min-width: 0; }

.op-contact-card__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--op-text-soft);
    margin-bottom: 4px;
}

.op-contact-card__value {
    display: block;
    font-family: var(--op-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--op-text);
    letter-spacing: -.01em;
    word-break: break-word;
}

a.op-contact-card__value:hover { color: var(--op-primary); }

.op-contact-card__note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--op-text-muted);
    line-height: 1.45;
}

.op-contact-social {
    display: flex;
    gap: var(--op-s-2);
    margin-top: var(--op-s-2);
}

.op-contact-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--op-r-sm);
    background: var(--op-green-50);
    color: var(--op-green-700);
    text-decoration: none !important;
}

.op-contact-social a:hover { background: var(--op-primary); color: #fff; }

/* ---------------------------------------------------------------------------
   34. ОБЫЧНЫЕ СТРАНИЦЫ (о нас, оплата и доставка)
   --------------------------------------------------------------------------- */
.op-page-body { max-width: 74ch; }
.op-page-body h2 { margin-top: var(--op-s-8); }
.op-page-body h2:first-child { margin-top: 0; }
.op-page-body h3 { margin-top: var(--op-s-6); }

.op-page-body ul li,
.op-page-body ol li { margin-bottom: var(--op-s-2); }

/* `.content ul { padding-left: 24px }` (0,1,1) сильнее одиночного класса
   (0,1,0) и добавлял этим спискам лишний отступ слева. Перечисляем явно. */
.content ul.op-methods,
.content ul.op-trust-list,
.content ul.op-cart-perks,
.content .op-hero__card ul,
.content ul.op-features,
ul.op-methods,
ul.op-trust-list,
ul.op-cart-perks {
    padding-left: 0;
    padding-right: 0;
    list-style: none;
    margin-left: 0;
}

.content ul.op-methods li,
.content ul.op-trust-list li,
.content ul.op-cart-perks li,
.content .op-hero__card ul li { margin-bottom: 0; }

/* Список способов доставки/оплаты */
.op-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--op-s-3);
    margin: 0 0 var(--op-s-8);
    padding: 0;
    list-style: none;
}

.op-methods li {
    display: flex;
    align-items: center;
    gap: var(--op-s-3);
    padding: var(--op-s-4);
    margin: 0;
    background: var(--op-surface);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--op-n-700);
}

.op-methods li svg { flex: none; color: var(--op-green-500); }
.op-methods li:hover { border-color: var(--op-green-200); box-shadow: var(--op-sh-xs); }

/* Врезка-акцент внутри текстовой страницы */
.op-callout {
    display: flex;
    gap: var(--op-s-4);
    padding: var(--op-s-5);
    margin: var(--op-s-6) 0;
    background: var(--op-amber-50);
    border: 1px solid var(--op-amber-100);
    border-left: 4px solid var(--op-amber-500);
    border-radius: var(--op-r-md);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--op-n-700);
}

.op-callout svg { flex: none; margin-top: 2px; color: var(--op-amber-600); }
.op-callout b { color: var(--op-text); }

/* ---------------------------------------------------------------------------
   35. ПОЛОСА ФАКТОВ НА СТРАНИЦЕ «О НАС»
   --------------------------------------------------------------------------- */
.op-about-stats { margin: 0 0 var(--op-s-8); }

.op-feature--stat { display: block; padding: var(--op-s-5); }

.op-feature--stat b {
    display: block;
    font-family: var(--op-font-display);
    font-size: clamp(24px, 1.4vw + 16px, 32px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--op-green-700);
    margin-bottom: 6px;
}

.op-feature--stat em {
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    color: var(--op-text);
    margin-bottom: 4px;
}

.op-feature--stat span {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--op-text-muted);
}

/* ---------------------------------------------------------------------------
   36. КАРТА НА СТРАНИЦЕ КОНТАКТОВ
   --------------------------------------------------------------------------- */
.op-contact-map {
    margin: 0 0 var(--op-s-8);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    overflow: hidden;
    background: var(--op-n-25);
    line-height: 0;
}

.op-contact-map iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
}

@media (max-width: 767px) {
    .op-contact-map iframe { height: 240px; }
}

/* --- Фотография героя на узких экранах ---
   С 991px герой становится одноколоночным и снимок уходит под текст,
   поэтому прижимать его вправо больше не за чем - ставим по центру. */
@media (max-width: 991px) {
    .op-hero__photo { margin-inline: auto; max-width: 380px; }
}

@media (max-width: 767px) {
    /* На телефоне кадр 3:4 занял бы почти весь экран. Подрезаем до 4:5:
       капкан стоит в середине кадра, запас сверху и снизу не нужен. */
    .op-hero__photo { max-width: 320px; aspect-ratio: 4 / 5; }
    .op-hero__photo img { height: 100%; object-fit: cover; }
}

@media (max-width: 400px) {
}

/* ---------------------------------------------------------------------------
   26. КАТАЛОГ: ПОЛОСА РАЗДЕЛОВ И ПАНЕЛЬ НАД СЕТКОЙ
   Разделы больше не встают плитками в один ряд с товарами (см. functions.php).
   Здесь они - компактная полоса ссылок: читается как навигация, занимает
   одну строку вместо экрана и не отодвигает товары вниз.
   --------------------------------------------------------------------------- */
.op-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-2);
    margin: 0 0 var(--op-s-6);
    padding: 0;
    list-style: none;
}

.op-cat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-pill);
    background: var(--op-surface);
    color: var(--op-n-800);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none !important;
    transition: background var(--op-t-fast) var(--op-ease),
                border-color var(--op-t-fast) var(--op-ease),
                color var(--op-t-fast) var(--op-ease);
}

.op-cat:hover,
.op-cat:focus-visible {
    background: var(--op-green-50);
    border-color: var(--op-green-300);
    color: var(--op-green-800);
}

/* Текущий раздел в полосе «соседей» - чтобы было видно, где мы находимся */
.op-cat--on,
.op-cat--on:hover {
    background: var(--op-green-700);
    border-color: var(--op-green-700);
    color: #fff;
}

.op-cat__n {
    font-size: 12px;
    font-weight: 700;
    color: var(--op-text-soft);
}

.op-cat--on .op-cat__n { color: rgba(255, 255, 255, .72); }

/* --- Строка «показано N из M» + сортировка --- */
.op-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--op-s-3);
    margin: 0 0 var(--op-s-5);
    padding-bottom: var(--op-s-3);
    border-bottom: 1px solid var(--op-border-soft);
}

.op-toolbar:empty { display: none; }

.woocommerce .op-toolbar .woocommerce-result-count,
.woocommerce .op-toolbar .woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
}

.woocommerce .op-toolbar .woocommerce-result-count {
    font-size: 14px;
    color: var(--op-text-muted);
}

/* --- Описание раздела под сеткой ---
   Длинный SEO-текст свёрнут: он никуда не делся для поиска, но не мешает
   тому, кто пришёл за товаром. --- */
.op-seo {
    max-width: 78ch;
    margin: var(--op-s-8) 0 0;
    color: var(--op-n-700);
}

.op-seo--fold { max-width: none; }

.op-seo--fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-pill);
    background: var(--op-surface);
    color: var(--op-n-700);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.op-seo--fold > summary::-webkit-details-marker { display: none; }

.op-seo--fold > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--op-t-fast) var(--op-ease);
}

.op-seo--fold[open] > summary::after { transform: translateY(2px) rotate(225deg); }

.op-seo--fold > summary:hover {
    border-color: var(--op-green-300);
    background: var(--op-green-50);
    color: var(--op-green-800);
}

.op-seo__body {
    max-width: 78ch;
    margin-top: var(--op-s-5);
}

/* Заголовки внутри SEO-текста набраны как заголовки страницы и под сеткой
   кричали громче названия раздела. Приглушаем. */
.op-seo h1,
.op-seo h2 {
    margin-top: var(--op-s-6);
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.25;
}

.op-seo h3 {
    margin-top: var(--op-s-5);
    font-size: 18px;
}

/* ---------------------------------------------------------------------------
   27. ПЛАВАЮЩАЯ ПАНЕЛЬ СОЦСЕТЕЙ
   Разметка - в footer.php, там же расписано, что было раньше и почему
   панель переехала в левый нижний угол.
   --------------------------------------------------------------------------- */
.op-dock {
    position: fixed;
    /* Панель стоит слева от колонки текста, пока для этого есть место,
       и прижимается к краю окна, когда места не остаётся. Горизонтальная
       раскладка в три значка (около 130 px) на экране 1400-1500 px
       наезжала на текст - вертикальная занимает 48 px и почти не мешает. */
    left: clamp(14px, calc((100vw - 1320px) / 2 - 58px), 40px);
    bottom: 20px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    border-radius: var(--op-r-pill);
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(28, 26, 23, .09);
    box-shadow: 0 10px 30px -8px rgba(28, 26, 23, .26), 0 2px 6px rgba(28, 26, 23, .07);
    opacity: .9;
    transition: opacity var(--op-t-base) var(--op-ease);
}

/* Матовое стекло - только там, где браузер его умеет: иначе фон панели
   останется просто светлым, и это тоже нормально. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .op-dock {
        background: rgba(255, 255, 255, .72);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        backdrop-filter: blur(12px) saturate(1.4);
    }
}

.op-dock:hover,
.op-dock:focus-within { opacity: 1; }

.op-dock__link {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--op-n-500);
    text-decoration: none !important;
    transition: background var(--op-t-fast) var(--op-ease),
                color var(--op-t-fast) var(--op-ease),
                transform var(--op-t-fast) var(--op-ease);
}

.op-dock__link svg {
    width: 19px;
    height: 19px;
    display: block;
}

.op-dock__link:hover,
.op-dock__link:focus-visible {
    color: #fff;
    transform: translateX(2px);
}

/* Цвет сети загорается только при наведении: в покое панель не должна
   спорить с кнопкой «В корзину». */
.op-dock__link--vk:hover, .op-dock__link--vk:focus-visible { background: #0077ff; }
.op-dock__link--ok:hover, .op-dock__link--ok:focus-visible { background: #ee8208; }
.op-dock__link--yt:hover, .op-dock__link--yt:focus-visible { background: #f00; }

/* Подпись всплывает над значком. Она же служит названием ссылки для
   программ чтения с экрана, поэтому прячем прозрачностью, а не display. */
.op-dock__tip {
    position: absolute;
    left: calc(100% + 9px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 6px 11px;
    border-radius: var(--op-r-xs);
    background: var(--op-n-900);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--op-t-fast) var(--op-ease),
                transform var(--op-t-fast) var(--op-ease);
}

.op-dock__tip::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -4px;
    border: 4px solid transparent;
    border-right-color: var(--op-n-900);
}

.op-dock__link:hover .op-dock__tip,
.op-dock__link:focus-visible .op-dock__tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .op-dock,
    .op-dock__link,
    .op-dock__tip { transition: none; }
}

@media (max-width: 991px) {
    /* На телефоне внизу уже стоит своя панель с «Главная / Каталог /
       Корзина / Позвонить» - две плавающие панели в одном углу лишние.
       Ссылки на соцсети остались в подвале. */
    .op-dock { display: none !important; }
}

/* ---------------------------------------------------------------------------
   28. ПУСТАЯ КОРЗИНА
   WooCommerce отдаёт сообщение «Ваша корзина пуста» тем же классом
   .woocommerce-info, что и обычные уведомления, - с кружком-иконкой слева
   и раскладкой flex. В центрированной коробке кружок наезжал прямо
   на первое слово. Здесь уведомление превращается в спокойный «пустой экран».
   --------------------------------------------------------------------------- */
/* WooCommerce отдаёт .cart-empty и .wc-empty-cart-message СОСЕДЯМИ, а не
   вложенными друг в друга, и второй остаётся пустым, если на хук
   woocommerce_cart_is_empty ничего не подписано. Из-за общего оформления
   под текстом висела пустая серая плашка. Оформление держим на .cart-empty. */
.woocommerce .wc-empty-cart-message {
    padding: 0;
    background: none;
    border: 0;
}

.woocommerce .cart-empty.woocommerce-info {
    display: block;
    padding: var(--op-s-12) var(--op-s-6);
    margin: 0;
    background: var(--op-n-25);
    border: 0;
    border-radius: var(--op-r-lg);
    box-shadow: none;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--op-text-muted);
}

.woocommerce .cart-empty.woocommerce-info::before { display: none !important; }

/* ---------------------------------------------------------------------------
   29. КОРЗИНА И ОФОРМЛЕНИЕ - ВО ВСЮ ШИРИНУ
   .op-page-body ограничен 74ch: для текстовых страниц это правильно -
   строка длиннее просто не читается. Но корзина и оформление заказа -
   не текст, и в этой рамке таблица занимала половину экрана, а вторая
   половина пустовала.
   --------------------------------------------------------------------------- */
.woocommerce-cart .op-page-body,
.woocommerce-checkout .op-page-body,
.woocommerce-account .op-page-body { max-width: none; }

/* Две колонки: слева позиции, справа итог. Итог липкий - при длинном
   списке кнопка «Перейти к оформлению» остаётся на виду. */
@media (min-width: 992px) {
    .woocommerce-cart .op-page-body > .woocommerce:has(.cart-collaterals) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 372px;
        gap: var(--op-s-8);
        align-items: start;
    }

    .woocommerce-cart .op-page-body > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
    .woocommerce-cart .op-page-body > .woocommerce > form.woocommerce-cart-form { grid-column: 1; grid-row: 2; }

    /* Подборка «с этим часто берут» - в той же колонке, что и таблица,
       сразу под ней. Так у липкого блока с итогом появляется рядом
       высокий сосед, и при прокрутке итог едет вместе со страницей. */
    .woocommerce-cart .op-page-body > .woocommerce > .op-cart-more { grid-column: 1; grid-row: 3; }

    /* Итог занимает обе строки правой колонки, но прижат к верху.
       Без этого строка с таблицей растягивалась до высоты итога,
       и под таблицей зияла пустота в двести пикселей. */
    .woocommerce-cart .op-page-body > .woocommerce > .cart-collaterals {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: start;
        position: sticky;
        top: calc(var(--op-header-h) + 16px);
        margin-top: 0;
    }

    .woocommerce-cart .op-page-body table.shop_table { margin-bottom: var(--op-s-4); }
}

/* --- Оформление заказа: две колонки и карточка заказа --- */
.woocommerce-checkout form.checkout .form-row > label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--op-n-700);
}

.woocommerce-checkout form.checkout .form-row > label .required {
    color: var(--op-danger);
    text-decoration: none;
    border: 0;
}

.woocommerce-checkout form.checkout .form-row > label .optional {
    font-weight: 500;
    color: var(--op-text-soft);
}

.woocommerce-checkout .woocommerce-checkout-review-order {
    background: var(--op-n-25);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-lg);
    padding: var(--op-s-6);
}

.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
    border: 0;
    background: transparent;
    margin-bottom: var(--op-s-4);
}

.woocommerce-checkout .op-co__side > h3 { margin-top: 0; }

@media (min-width: 992px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: var(--op-s-8);
        align-items: start;
    }

    .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

    /* Итог не уезжает при прокрутке длинной формы */
    .woocommerce-checkout .op-co__side { position: sticky; top: calc(var(--op-header-h) + 16px); }
}

/* ---------------------------------------------------------------------------
   31. НАЗВАНИЕ МАГАЗИНА В ШАПКЕ НА ТЕЛЕФОНЕ
   Ниже 1200px название убирали, чтобы освободить место горизонтальному меню.
   Но с 991px меню и так уезжает в бургер, места становится вдоволь, -
   а в шапке оставался один абстрактный значок, по которому не понять,
   чей это сайт. Возвращаем название; подзаголовок «интернет-магазин»
   на узком экране не нужен.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .op-logo-text {
        display: flex;
        min-width: 0;
    }

    .op-logo-text b {
        font-size: 15px;
        white-space: normal;
    }

    .op-logo-text span { display: none; }
}

@media (max-width: 420px) {
    .op-logo-text b { font-size: 13px; }
}

/* Плашка «Собственное производство · г. Киров» на узком экране переносилась
   на две строки и переставала читаться как единый ярлык. Ужимаем кегль
   и разрядку - строка помещается целиком. */
@media (max-width: 480px) {
    .op-hero__eyebrow {
        font-size: 11px;
        letter-spacing: .04em;
    }
}

/* ---------------------------------------------------------------------------
   32. СОГЛАСИЕ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ
   Отметка стоит вплотную к кнопке «Оформить заказ» - там, где её ищут,
   и там, где её труднее пропустить.
   --------------------------------------------------------------------------- */
.woocommerce-checkout form.checkout .op-consent {
    display: block;
    margin: 0 0 var(--op-s-4);
    padding: var(--op-s-4);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    background: var(--op-surface);
}

/* Раскладка намеренно не flex: подпись состоит из текста, ссылки на политику
   и звёздочки обязательного поля. Во flex-контейнере каждый из них становится
   отдельной колонкой, и фраза разваливается на куски. Флажок вынимаем
   из потока, текст обтекает его как обычная строка. */
.woocommerce-checkout form.checkout .op-consent label.checkbox {
    display: block;
    position: relative;
    margin: 0;
    padding-left: 30px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--op-n-700);
    cursor: pointer;
}

.woocommerce-checkout form.checkout .op-consent input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--op-primary);
}

.woocommerce-checkout form.checkout .op-consent a {
    color: var(--op-link);
    text-decoration: underline;
}

.woocommerce-checkout form.checkout .op-consent .required {
    color: var(--op-danger);
    text-decoration: none;
    border: 0;
}

/* Ссылка на политику в нижней строке подвала */
.op-footer-legal {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.op-footer-legal:hover,
.op-footer-legal:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .6);
}

/* Дата редакции в начале правового документа */
.op-doc-date {
    margin-bottom: var(--op-s-6);
    color: var(--op-text-muted);
    font-size: 14px;
}

/* Служебная заметка, которую видит только администратор */
.op-admin-note {
    margin: 0 0 var(--op-s-6);
    padding: var(--op-s-4) var(--op-s-5);
    border: 1px dashed var(--op-amber-400);
    border-radius: var(--op-r-md);
    background: var(--op-amber-50);
    color: var(--op-n-800);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Отступ слева под иконку уведомления сбивался правилом `.content ul`
   (0,1,1) - оно весомее одиночного класса `.woocommerce-error` (0,1,0),
   и первое слово уезжало под кружок с иконкой. Повышаем вес. */
.content .woocommerce-message,
.content .woocommerce-info,
.content .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    padding-left: 54px;
}

.content .woocommerce-message li,
.content .woocommerce-info li,
.content .woocommerce-error li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------------------------
   33. ТЕКСТ О МАГАЗИНЕ НА ГЛАВНОЙ - ВО ВСЮ ШИРИНУ, В ДВЕ КОЛОНКИ
   Именно колонки, а не сетка из блоков: разделы текста разной длины
   (в одном абзац, в другом двенадцать), и в сетке между ними оставались
   пустоты в пол-экрана. Колонки браузер разливает поровну сам.
   --------------------------------------------------------------------------- */
.op-seo-cols {
    max-width: none;
    column-count: 2;
    column-gap: clamp(32px, 4vw, 64px);
    /* Тонкая линейка между колонками - глазу легче не терять строку */
    column-rule: 1px solid var(--op-border-soft);
}

/* Абзац, разорванный между колонками, читать невозможно: конец фразы
   уезжает наверх соседней колонки. Держим абзацы целыми. */
.op-seo-cols p,
.op-seo-cols ul,
.op-seo-cols ol {
    break-inside: avoid;
    margin-bottom: var(--op-s-3);
    font-size: 15px;
    line-height: 1.62;
    color: var(--op-n-600);
}

/* Подзаголовок не должен оставаться внизу колонки без своего текста */
.op-seo-cols h2,
.op-seo-cols h3 {
    break-after: avoid;
    break-inside: avoid;
    margin-top: var(--op-s-5);
    margin-bottom: var(--op-s-3);
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.25;
}

.op-seo-cols > :first-child { margin-top: 0; }
.op-seo-cols > :last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    /* На узком экране две колонки по 170 px - это не текст, а лесенка */
    .op-seo-cols {
        column-count: 1;
        column-rule: 0;
    }
}

/* ---------------------------------------------------------------------------
   34. ПОДБОР ПО ЗВЕРЮ
   Ссылки, а не картинки: фотографий зверей в фотобанке нет, а рисовать
   десяток разных следов, не переврав их, всё равно не выйдет. Зато число
   товаров рядом с названием - честная подсказка, куда идти.
   --------------------------------------------------------------------------- */
.op-quarry {
    display: grid;
    /* 132px, а не 150: при 150 последний зверь не помещался в ряд
       и уезжал на следующую строку в одиночестве. */
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--op-s-3);
}

.op-quarry__item {
    display: flex;
    flex-direction: column;
    /* Имя вверх, число вниз: «Енотовидная собака» переносится на две строки,
       и без этого её счётчик висел ниже соседских. */
    justify-content: space-between;
    gap: 3px;
    padding: var(--op-s-4) var(--op-s-5);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    background: var(--op-surface);
    text-decoration: none !important;
    transition: border-color var(--op-t-fast) var(--op-ease),
                box-shadow var(--op-t-fast) var(--op-ease),
                transform var(--op-t-fast) var(--op-ease);
}

.op-quarry__item:hover,
.op-quarry__item:focus-visible {
    border-color: var(--op-green-300);
    box-shadow: var(--op-sh-md);
    transform: translateY(-2px);
}

.op-quarry__item b {
    font-family: var(--op-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--op-text);
}

.op-quarry__item:hover b { color: var(--op-green-700); }

.op-quarry__item span {
    font-size: 13px;
    color: var(--op-text-soft);
}

/* ---------------------------------------------------------------------------
   35. «ВЫ НЕДАВНО СМОТРЕЛИ»
   Раздел появляется только у того, кто уже открывал товары, поэтому
   по умолчанию он скрыт атрибутом hidden - снимает его modern.js.
   --------------------------------------------------------------------------- */
.op-recent[hidden] { display: none !important; }

.op-recent__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--op-s-3);
}

.op-recent__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--op-s-3);
    border: 1px solid var(--op-border-soft);
    border-radius: var(--op-r-md);
    background: var(--op-surface);
    text-decoration: none !important;
    transition: border-color var(--op-t-fast) var(--op-ease),
                box-shadow var(--op-t-fast) var(--op-ease),
                transform var(--op-t-fast) var(--op-ease);
}

.op-recent__card:hover {
    border-color: var(--op-green-300);
    box-shadow: var(--op-sh-md);
    transform: translateY(-2px);
}

.op-recent__media {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--op-r-sm);
    background: var(--op-n-25);
    overflow: hidden;
}

.op-recent__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.op-recent__card b {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--op-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.op-recent__card:hover b { color: var(--op-green-700); }

.op-recent__price {
    margin-top: auto;
    font-family: var(--op-font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--op-text);
}

/* «Очистить» - это кнопка, но выглядеть должна как ссылка раздела */
button.op-section__link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

/* ---------------------------------------------------------------------------
   36. ВЫБОР ВАРИАНТА - КНОПКАМИ
   Родной <select> остаётся в разметке и продолжает управлять ценой,
   наличием и кнопкой покупки (см. modern.js). Прячем его так, чтобы он
   оставался доступен скриптам: display:none у поля формы кое-где ломает
   чтение значения, поэтому убираем его размером и обрезкой.
   --------------------------------------------------------------------------- */
.op-vpick__native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
}

/* Ссылка «Очистить» рядом с кнопками смысла не имеет: вариант всегда выбран */
.woocommerce div.product form.cart .reset_variations { display: none !important; }

.op-vpick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-s-2);
}

.op-vpick__btn {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-sm);
    background: var(--op-surface);
    color: var(--op-n-800);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--op-t-fast) var(--op-ease),
                background var(--op-t-fast) var(--op-ease),
                color var(--op-t-fast) var(--op-ease);
}

.op-vpick__btn:hover:not(:disabled) {
    border-color: var(--op-green-300);
    background: var(--op-green-50);
}

/* :hover перечислен и здесь намеренно: правило наведения весомее одного
   класса, и у выбранной кнопки под курсором оставался светлый фон,
   а текст уже был белым - надпись пропадала. */
.op-vpick__btn.is-on,
.op-vpick__btn.is-on:hover {
    border-color: var(--op-primary);
    background: var(--op-primary);
    color: #fff;
}

.op-vpick__btn.is-off {
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --- Раскладка формы покупки у товара с вариантами ---
   Количество и «В корзину» лежат не прямыми детьми form.cart, а внутри
   .woocommerce-variation-add-to-cart, поэтому флексом формы не выравнивались
   и вставали друг под другом: кнопка уезжала вниз. --- */
.woocommerce div.product form.variations_form.cart { display: block; }

.woocommerce div.product form.cart table.variations {
    margin: 0 0 var(--op-s-4);
    border: 0;
    background: none;
}

.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
}

.woocommerce div.product form.cart table.variations td.label {
    margin-bottom: 8px;
}

.woocommerce div.product form.cart table.variations td.label label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--op-text-muted);
}

/* Пустой блок с ценой варианта не должен оставлять дыру, пока он скрыт */
.woocommerce div.product .single_variation_wrap .woocommerce-variation:empty { display: none; }
.woocommerce div.product .single_variation_wrap .woocommerce-variation { margin: 0 0 var(--op-s-3); }

.woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--op-s-3);
}

/* ---------------------------------------------------------------------------
   37. ВЫБОР ВАРИАНТА В КАТАЛОГЕ
   --------------------------------------------------------------------------- */
.op-price-from {
    font-family: var(--op-font-ui);
    font-size: .62em;
    font-weight: 600;
    color: var(--op-text-soft);
    vertical-align: 0.18em;
    margin-right: 2px;
}

/* Карточка каталога - флекс-колонка с заданным порядком: ссылка с картинкой
   и ценой идёт нулевой, кнопка покупки - третьей. Ставим выбор между ними. */
.op-vopt {
    order: 2;
    margin: 0 0 var(--op-s-3);
}

.op-vopt__cap {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--op-text-soft);
}

.op-vopt__row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.op-vopt__btn {
    padding: 6px 11px;
    border: 1px solid var(--op-border);
    border-radius: var(--op-r-xs);
    background: var(--op-surface);
    color: var(--op-n-700);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--op-t-fast) var(--op-ease),
                background var(--op-t-fast) var(--op-ease),
                color var(--op-t-fast) var(--op-ease);
}

.op-vopt__btn:hover {
    border-color: var(--op-green-300);
    background: var(--op-green-50);
}

.op-vopt__btn.is-on,
.op-vopt__btn.is-on:hover {
    border-color: var(--op-primary);
    background: var(--op-primary);
    color: #fff;
}

/* Кнопка покупки до выбора варианта: видно, что она ждёт действия */
.woocommerce ul.products li.product .button.op-vadd.is-waiting {
    background: var(--op-surface);
    color: var(--op-n-600);
    border: 1px solid var(--op-border);
    box-shadow: none;
}

.woocommerce ul.products li.product .button.op-vadd.is-waiting:hover {
    border-color: var(--op-green-300);
    color: var(--op-green-800);
    background: var(--op-green-50);
}

/* ---------------------------------------------------------------------------
   38. «С ЭТИМ ЧАСТО БЕРУТ» ПОД КОРЗИНОЙ
   --------------------------------------------------------------------------- */
.op-cart-more {
    margin-top: var(--op-s-12);
    padding-top: var(--op-s-8);
    border-top: 1px solid var(--op-border-soft);
}

.op-cart-more .op-section__head { margin-bottom: var(--op-s-5); }

/* Подписи полей оформления теперь экранные - общее правило для видимых
   подписей не должно вытаскивать их обратно на экран. */
.woocommerce-checkout form.checkout .form-row > label.screen-reader-text {
    margin: -1px;
    padding: 0;
}

/* --- Цена у товара с вариантами ---
   Сверху стояла вилка «6 990 ₽ - 8 490 ₽», а под кнопками - точная цена
   выбранного варианта. Две цены подряд сбивают с толку, поэтому вилку
   убираем: раз вариант выбран заранее, показывать «от и до» незачем.
   Точную цену поднимаем до кегля обычной цены товара - теперь она
   и есть главная, и она меняется при выборе варианта.

   Класс op-one-variant ставится только на странице товара и только там,
   где ось выбора одна (см. functions.php): если бы осей было две, вариант
   заранее не выбирался бы и без вилки цена исчезла бы вовсе. */
.woocommerce div.product.op-one-variant > .summary > p.price,
.woocommerce div.product.op-one-variant > .summary > span.price { display: none; }

.woocommerce div.product .woocommerce-variation-price .price {
    display: block;
    margin: 0;
    font-family: var(--op-font-display);
    font-size: clamp(30px, 1.8vw + 20px, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--op-text);
    font-variant-numeric: tabular-nums;
}

.woocommerce div.product .woocommerce-variation-price .woocommerce-Price-currencySymbol {
    font-size: .62em;
    font-weight: 700;
    color: var(--op-text-muted);
    margin-left: .14em;
}

.woocommerce div.product .woocommerce-variation-availability .stock { margin: 6px 0 0; }

/* Подпись «Объем» над кнопками. В style.css первая ячейка таблицы вариантов
   спрятана целиком (`table.variations td:nth-child(1)`) - со списком она
   и правда была лишней, а над кнопками нужна. Возвращаем. */
.woocommerce div.product div.summary table.variations td:nth-child(1),
.woocommerce div.product form.cart table.variations td.label {
    display: block;
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    background: none;
}

/* ---------------------------------------------------------------------------
   39. ПОДПИСЬ К ФОТОГРАФИИ В СТАТЬЕ
   Снимки в новостях взяты из Wikimedia Commons. Часть лицензий (CC BY)
   требует указать автора и лицензию - эта строка и есть указание,
   удалять её нельзя. Держим её мелкой и приглушённой: это служебная
   пометка, а не часть текста.
   --------------------------------------------------------------------------- */
.op-photo-credit {
    margin-top: var(--op-s-8);
    padding-top: var(--op-s-3);
    border-top: 1px solid var(--op-border-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--op-text-soft);
}

.op-photo-credit a {
    color: var(--op-text-muted);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   40. ОФОРМЛЕНИЕ ЗАКАЗА: МЯГКИЕ РАМКИ ПОЛЕЙ
   Общая для сайта граница поля (--op-border-field, #8f8880) выбрана под
   требование WCAG 1.4.11: контраст элемента управления не ниже 3:1.
   На странице заказа она читалась как жирная обводка вокруг каждого поля.
   Смягчаем - но не оставляем поле «плавать»: границу подменяет светлая
   заливка, а при наведении и фокусе рамка снова становится заметной.
   --------------------------------------------------------------------------- */
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout select {
    border-color: var(--op-border-soft);
    background: var(--op-n-25);
}

.woocommerce-checkout form.checkout .input-text:hover,
.woocommerce-checkout form.checkout textarea:hover,
.woocommerce-checkout form.checkout select:hover {
    border-color: var(--op-border);
    background: var(--op-surface);
}

.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout textarea:focus,
.woocommerce-checkout form.checkout select:focus {
    border-color: var(--op-primary);
    background: var(--op-surface);
}

/* Карточки блоков формы и итога - той же мягкости, что и поля */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout form.checkout .op-consent {
    border-color: var(--op-border-soft);
}

/* ---------------------------------------------------------------------------
   41. ПОДБОРКА В КОРЗИНЕ - РОВНО ДВА РЯДА
   Восемь товаров по четыре в ряд. Автоподбор колонок давал то пять, то три
   в ряду и обрывал нижний ряд на середине.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .op-cart-more ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------
   42. ОПИСАНИЕ РАЗДЕЛА КАТАЛОГА - В ДВЕ КОЛОНКИ
   Текст под сеткой товаров. Ставим так же, как текст о магазине на главной:
   во всю ширину и в две колонки, чтобы строка оставалась читаемой.
   --------------------------------------------------------------------------- */
.op-seo {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 64px);
    column-rule: 1px solid var(--op-border-soft);
    max-width: none;
}

.op-seo p,
.op-seo ul,
.op-seo ol { break-inside: avoid; }

.op-seo h2,
.op-seo h3 {
    break-after: avoid;
    break-inside: avoid;
}

.op-seo > :first-child { margin-top: 0; }

@media (max-width: 900px) {
    .op-seo {
        column-count: 1;
        column-rule: 0;
    }
}

/* ---------------------------------------------------------------------------
   43. МЕЛКИЕ ПРАВКИ
   --------------------------------------------------------------------------- */

/* Активная плашка раздела - белым в любом состоянии. Основную причину
   (цвет :visited в style.css) убрали в источнике, это страховка на случай,
   если похожее правило появится снова. */
.op-cat--on,
.op-cat--on:link,
.op-cat--on:visited,
.op-cat--on:hover,
.op-cat--on:focus,
.op-cat--on:focus-visible,
.op-cat--on:active {
    background: var(--op-green-700);
    border-color: var(--op-green-700);
    color: #fff;
}

.op-cat--on .op-cat__n { color: rgba(255, 255, 255, .8); }

/* Название магазина в шапке телефона - в две строки.
   «Охотничий промысел» одной строкой отжимал поиск и корзину к краю. */
@media (max-width: 991px) {
    .op-logo-text b {
        max-width: 10ch;
        white-space: normal;
        line-height: 1.15;
    }
}

/* Блок покупки у товара с вариантами - тоже одной строкой на телефоне */
@media (max-width: 767px) {
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
    .woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* «Обновить корзину» - действие второстепенное. Крупная заливка делала
   из него главную кнопку страницы, хотя настоящая цель - «Перейти
   к оформлению». Переводим в спокойный вид. */
.woocommerce .cart .actions .button[name="update_cart"],
.woocommerce .cart .actions button[name="update_cart"] {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--op-s-5);
    background: var(--op-surface);
    color: var(--op-n-700);
    border: 1px solid var(--op-border);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
}

.woocommerce .cart .actions .button[name="update_cart"]:hover:not(:disabled),
.woocommerce .cart .actions button[name="update_cart"]:hover:not(:disabled) {
    background: var(--op-green-50);
    border-color: var(--op-green-300);
    color: var(--op-green-800);
}

/* ---------------------------------------------------------------------------
   44. ЗВЕРЬ В ОПИСАНИИ ТОВАРА И КАТАЛОГ, СУЖЕННЫЙ ПОД ЗВЕРЯ
   Строка «Зверь: …» - не украшение: по ней собирается блок подбора на
   главной, поэтому она должна читаться как характеристика, а не как
   очередной абзац описания. Отсюда рамка слева и подложка.
   --------------------------------------------------------------------------- */
.op-zver {
    margin: var(--op-s-4) 0;
    padding: var(--op-s-3) var(--op-s-4);
    border-left: 3px solid var(--op-green-300);
    border-radius: 0 var(--op-r-sm) var(--op-r-sm) 0;
    background: var(--op-green-50);
    font-size: 15px;
    color: var(--op-text);
}

.op-zver strong {
    color: var(--op-green-700);
}

/* Строчный поток, а не флекс: во флексе точка после названия зверя
   становилась отдельным элементом и отъезжала от него на величину gap. */
.op-zver-note {
    margin: 0 0 var(--op-s-4);
    font-size: 15px;
    color: var(--op-text-soft);
}

.op-zver-note b {
    color: var(--op-text);
}

.op-zver-note a {
    margin-left: var(--op-s-2);
}