/*
Theme Name: SkinsCompass
Theme URI: https://skinscompass.com/
Template: roda
Author: SkinsCompass
Description: Дочерняя тема Roda. Направление «компас»: светлая «бумажная»
    основа как у карты, тонкие линейки-меридианы, акцент — морской teal,
    семантика данных — рост/падение цены. Карточки товаров остаются на
    тёмных «глубинных» плитках: рендеры скинов рисованы под тёмный фон
    (урок skinstradehub, где сайт целиком перевели на тёмный из-за этого).
    Тёмный режим — по переключателю.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: scs-compass
*/

/* ══════════════════════════════════════════════════════════════════════
   1. ТОКЕНЫ
   Светлая палитра — основная («бумага»). Нейтрали тёплые, бумажные.
   Акцент один: teal. Цвета роста и падения — не акцент, а семантика
   данных, и в акценте не участвуют. Тёмные плитки под рендеры предметов —
   токены --t-stage* в разделе 29, одинаковые в обеих темах.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --t-ground:       #F7F5F0;
    --t-panel:        #FFFFFF;
    --t-panel-2:      #EFECE4;
    --t-ink:          #21231E;
    --t-ink-soft:     #5C6057;
    --t-ink-faint:    #8D9187;
    --t-rule:         #E0DCD1;
    --t-rule-strong:  #C6C1B2;
    --t-accent:       #0F7A78;
    --t-accent-hover: #0B5E5C;
    --t-accent-soft:  #E4F0EF;
    --t-on-accent:    #FFFFFF;
    --t-up:           #1A7A44;
    --t-down:         #C2402F;
    --t-warn:         #96660D;

    --t-radius:       3px;
    --t-rhythm:       clamp(1rem, 2.5vw, 1.75rem);
    --t-shadow:       0 1px 2px rgba(33, 35, 30, .05), 0 10px 28px -18px rgba(33, 35, 30, .25);

    --t-font-ui:      "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --t-font-num:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --t-fs-micro:     .7rem;
    --t-fs-small:     .8rem;
    --t-fs-base:      .94rem;
    --t-fs-lead:      1.08rem;
    --t-fs-h3:        clamp(1.05rem, .98rem + .3vw, 1.25rem);
    --t-fs-h2:        clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
    --t-fs-h1:        clamp(1.75rem, 1.35rem + 1.8vw, 2.9rem);
}

/* Светлая тема — основная (в отличие от skinstradehub: там из-за рендеров
   перешли на тёмную целиком, здесь рендеры живут на тёмных плитках --t-deep*,
   а интерфейс остаётся «бумажным»). Системная настройка не участвует —
   тёмную включают только переключателем, выбор запоминается в localStorage. */

/* Тёмная тема — по выбору в переключателе («глубокая вода») */
:root[data-theme="dark"] {
    --t-ground:       #0F1513;
    --t-panel:        #151C1A;
    --t-panel-2:      #1B2421;
    --t-ink:          #E5E7E2;
    --t-ink-soft:     #A2A79F;
    --t-ink-faint:    #737870;
    --t-rule:         #26302C;
    --t-rule-strong:  #39443F;
    --t-accent:       #4FB8B0;
    --t-accent-hover: #6FC9C2;
    --t-accent-soft:  #14302D;
    --t-on-accent:    #0A1917;
    --t-up:           #4ADE80;
    --t-down:         #F87171;
    --t-warn:         #E0B44C;
    --t-shadow:       0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -18px rgba(0, 0, 0, .8);
}

/* ══════════════════════════════════════════════════════════════════════
   2. ПЕРЕОПРЕДЕЛЕНИЕ ПЕРЕМЕННЫХ RODA
   Тема Roda рисует почти всё через свои переменные (assets/css/style.css,
   331 КБ). Переназначив их на токены выше, мы разворачиваем унаследованные
   блоки в новую палитру, не переписывая их по одному.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --vs-theme-color:      var(--t-accent);
    --vs-theme-color2:     var(--t-accent-hover);
    --title-color:         var(--t-ink);
    --body-color:          var(--t-ink-soft);
    --body-bg:             var(--t-ground);
    --smoke-color:         var(--t-panel-2);
    --text-black-color:    var(--t-ink);
    --text-light-color:    var(--t-ink-faint);
    --text-lighter-color:  var(--t-ink-faint);
    --text-color1:         var(--t-ink-soft);
    --text-color2:         var(--t-ink-soft);
    --text-color3:         var(--t-ink-faint);
    --text-color4:         var(--t-ink-faint);
    --text-color5:         var(--t-ink-soft);
    --text-color6:         var(--t-ink-soft);
    --bg-color:            var(--t-ground);
    --bg-color2:           var(--t-panel);
    --bg-color3:           var(--t-panel-2);
    --bg-color4:           var(--t-panel);
    --bg-color5:           var(--t-panel-2);
    --bg-color6:           var(--t-panel);
    --bg-color7:           var(--t-panel-2);
    --bg-color8:           var(--t-panel);
    --bg-color9:           var(--t-panel-2);
    --bg-color10:          var(--t-ground);
    --bg-color11:          var(--t-panel);
    --bg-color12:          var(--t-ground);
    --border-color:        var(--t-rule);
    --white-color:         var(--t-panel);
    --black-color:         var(--t-ink);
    /* Elementor и плагины тоже тянут акцент отсюда */
    --e-global-color-primary:   var(--t-accent);
    --e-global-color-secondary: var(--t-ink);
    --e-global-color-text:      var(--t-ink-soft);
    --e-global-color-accent:    var(--t-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   3. ОСНОВА
   ══════════════════════════════════════════════════════════════════════ */
body,
body.vs-body {
    background: var(--t-ground);
    color: var(--t-ink-soft);
    font-family: var(--t-font-ui);
    font-size: var(--t-fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--t-font-ui);
    color: var(--t-ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-wrap: balance;
}
h1, .h1 { font-size: var(--t-fs-h1); }
h2, .h2 { font-size: var(--t-fs-h2); }
h3, .h3 { font-size: var(--t-fs-h3); }

a { color: var(--t-accent); }
a:hover, a:focus { color: var(--t-accent-hover); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--t-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Все числа — табличным моноширинным: цены в колонках должны выстраиваться */
.woocommerce-Price-amount,
.price,
.amount,
.scs-num,
.woocommerce-price-suffix,
td.product-total,
td.product-subtotal,
.order-total .amount {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Мелкие служебные подписи */
.scs-label {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

/* ══════════════════════════════════════════════════════════════════════
   4. ШАПКА И НАВИГАЦИЯ
   Плоская, на тонкой линейке, без тени и подсветки.
   ══════════════════════════════════════════════════════════════════════ */
.vs-header,
.vs-header .header-top,
.vs-header .sticky-active,
.vs-menu-area {
    background: var(--t-panel) !important;
    border-bottom: 1px solid var(--t-rule);
    box-shadow: none !important;
}

.main-menu > ul > li > a,
.vs-menu-wrapper .vs-menu-toggle,
.header-links a {
    color: var(--t-ink) !important;
    font-weight: 500;
    font-size: var(--t-fs-small);
    letter-spacing: .01em;
}
.main-menu > ul > li > a:hover,
.main-menu > ul > li.current-menu-item > a {
    color: var(--t-accent) !important;
}
.main-menu ul.sub-menu {
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    box-shadow: var(--t-shadow);
    border-radius: var(--t-radius);
}
.main-menu ul.sub-menu li a { color: var(--t-ink-soft) !important; }
.main-menu ul.sub-menu li a:hover { color: var(--t-accent) !important; background: var(--t-accent-soft); }

/* Переключатель темы в шапке */
.scs-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    color: var(--t-ink-soft);
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .6rem;
    cursor: pointer;
    line-height: 1;
}
.scs-theme-toggle:hover { border-color: var(--t-rule-strong); color: var(--t-ink); }

/* ══════════════════════════════════════════════════════════════════════
   5. КНОПКИ
   Один заполненный вид для главного действия, обводка — для остального.
   Никаких градиентов и свечения.
   ══════════════════════════════════════════════════════════════════════ */
.vs-btn,
.roda-btn,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor-button,
.wp-element-button,
input[type="submit"] {
    background: var(--t-accent) !important;
    border: 1px solid var(--t-accent) !important;
    color: var(--t-on-accent) !important;
    font-family: var(--t-font-ui) !important;
    font-weight: 600 !important;
    font-size: var(--t-fs-small) !important;
    letter-spacing: .01em !important;
    border-radius: var(--t-radius) !important;
    padding: .62rem 1.15rem !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.vs-btn:hover,
.roda-btn:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.elementor-button:hover,
input[type="submit"]:hover {
    background: var(--t-accent-hover) !important;
    border-color: var(--t-accent-hover) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
}

/* Второстепенное действие */
.scs-btn-ghost,
.woocommerce a.button.wc-backward {
    background: transparent !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-rule-strong) !important;
}
.scs-btn-ghost:hover,
.woocommerce a.button.wc-backward:hover {
    background: var(--t-panel-2) !important;
    border-color: var(--t-ink-faint) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   6. КАТАЛОГ
   Карточка — не «плитка с картинкой», а строка данных о позиции:
   имя, износ, float, цена и разница со Steam.
   ══════════════════════════════════════════════════════════════════════ */
.woocommerce ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: .75rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--t-rule-strong);
    box-shadow: var(--t-shadow);
}

.woocommerce ul.products li.product a img,
ul.products li.product img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--t-panel-2);
    margin: 0 !important;
    padding: .5rem;
    box-shadow: none !important;
    border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    font-family: var(--t-font-ui);
    font-size: var(--t-fs-small) !important;
    font-weight: 500;
    line-height: 1.35;
    color: var(--t-ink) !important;
    padding: .55rem .65rem 0 !important;
    margin: 0 !important;
    /* Имена скинов длинные: две строки, дальше обрезаем */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem .65rem .6rem !important;
    margin: 0 !important;
    color: var(--t-ink) !important;
    font-size: var(--t-fs-base) !important;
    font-weight: 700;
}
.woocommerce ul.products li.product .price del { color: var(--t-ink-faint) !important; font-weight: 400; font-size: var(--t-fs-small) !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Строка данных позиции: износ и float */
.scs-item-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .65rem;
    border-top: 1px solid var(--t-rule);
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--t-ink-faint);
    letter-spacing: .04em;
}
.scs-wear { text-transform: uppercase; }
.scs-delta-up   { color: var(--t-up); }
.scs-delta-down { color: var(--t-down); }

/* Кнопку «в корзину» в каталоге прижимаем к низу карточки */
.woocommerce ul.products li.product .button {
    margin: auto .65rem .65rem !important;
    width: calc(100% - 1.3rem);
    text-align: center;
}

/* Сортировка и счётчик результатов */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-small);
    color: var(--t-ink-faint);
}
.woocommerce .woocommerce-ordering select {
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    color: var(--t-ink);
    padding: .4rem .6rem;
}

/* Постраничная навигация */
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex;
    gap: .3rem;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-small);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    background: var(--t-panel);
    color: var(--t-ink) !important;
    padding: .4rem .7rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   7. СТРАНИЦА ТОВАРА
   ══════════════════════════════════════════════════════════════════════ */
.single-product div.product,
.product-about {
    background: transparent;
}
.single-product div.product .product_title {
    font-size: var(--t-fs-h2);
    margin-bottom: .4rem;
}
.single-product .woocommerce-product-gallery {
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    padding: 1rem;
}
.single-product .woocommerce-product-gallery img {
    object-fit: contain;
    max-height: 26rem;
    width: 100%;
}
.single-product div.product p.price,
.single-product div.product span.price {
    font-family: var(--t-font-num);
    font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem) !important;
    font-weight: 700;
    color: var(--t-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* Таблица характеристик — главный носитель смысла на странице товара */
.woocommerce-product-attributes,
table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-fs-small);
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    overflow: hidden;
}
.woocommerce-product-attributes th,
table.shop_attributes th {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
    font-weight: 400;
    text-align: left;
    padding: .55rem .8rem;
    background: transparent;
    border-bottom: 1px solid var(--t-rule);
    width: 40%;
}
.woocommerce-product-attributes td,
table.shop_attributes td {
    padding: .55rem .8rem;
    color: var(--t-ink);
    border-bottom: 1px solid var(--t-rule);
    font-style: normal !important;
}
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td { border-bottom: none; }
.woocommerce-product-attributes td p { margin: 0; }

/* Блок характеристик из описания waxpeer — приводим к тому же виду */
.waxpeer-item-details { font-size: var(--t-fs-small); }
.waxpeer-item-details table {
    width: 100%;
    border-collapse: collapse;
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
}
.waxpeer-item-details td { border-bottom: 1px solid var(--t-rule) !important; padding: .55rem .8rem !important; }
.waxpeer-item-details h4 { font-size: var(--t-fs-h3); margin: 1.2rem 0 .6rem; }
/* Сиреневый градиент блока «как это работает» из описаний заменяем на панель */
.waxpeer-item-details div[style*="linear-gradient"] {
    background: var(--t-panel-2) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius) !important;
}
.waxpeer-item-details div[style*="linear-gradient"] h4 { color: var(--t-ink) !important; }
.waxpeer-item-details div[style*="#e8f5e9"] {
    background: var(--t-accent-soft) !important;
    border-color: var(--t-accent) !important;
    border-radius: var(--t-radius) !important;
}
.waxpeer-item-details div[style*="#e8f5e9"] strong { color: var(--t-accent) !important; }

/* Вкладки */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--t-rule);
    padding: 0;
    margin: 0 0 1.2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0 1.2rem 0 0;
    padding: 0;
}
.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 a {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-ink-faint) !important;
    padding: .6rem 0;
    display: block;
    border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--t-ink) !important;
    border-bottom-color: var(--t-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   8. КОРЗИНА, ОФОРМЛЕНИЕ, КАБИНЕТ
   ══════════════════════════════════════════════════════════════════════ */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce table.my_account_orders {
    background: var(--t-panel);
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius);
    border-collapse: collapse;
    font-size: var(--t-fs-small);
}
.woocommerce table.shop_table th {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
    font-weight: 400;
    border-bottom: 1px solid var(--t-rule-strong);
    padding: .6rem .8rem;
}
.woocommerce table.shop_table td {
    border-top: 1px solid var(--t-rule);
    padding: .7rem .8rem;
    color: var(--t-ink);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { border-top: 1px solid var(--t-rule-strong); }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    padding: var(--t-rhythm);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
    font-family: var(--t-font-ui);
    font-size: var(--t-fs-small);
    padding: .55rem .7rem !important;
    box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--t-ink-faint); }

.woocommerce form .form-row label,
.woocommerce-account label {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

/* Навигация кабинета — вертикальный список на линейках */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    background: var(--t-panel);
    overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--t-rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: .65rem .85rem;
    color: var(--t-ink-soft) !important;
    font-size: var(--t-fs-small);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--t-accent-soft);
    color: var(--t-accent) !important;
}

/* Уведомления: цвет несёт смысл, а не украшает */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-left: 3px solid var(--t-accent) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
    font-size: var(--t-fs-small);
    box-shadow: none !important;
}
.woocommerce-message { border-left-color: var(--t-up) !important; }
.woocommerce-error   { border-left-color: var(--t-down) !important; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   9. БЛОГ И ТЕКСТОВЫЕ СТРАНИЦЫ
   Узкая колонка, чтобы строка держалась около 65 знаков.
   ══════════════════════════════════════════════════════════════════════ */
.single-post .entry-content,
.page .entry-content,
.single-post .vs-blog-content,
article.post .post-content {
    font-size: var(--t-fs-lead);
    line-height: 1.7;
    color: var(--t-ink-soft);
}
.single-post .entry-content > p,
.page .entry-content > p { max-width: 68ch; }
.single-post .entry-content h2,
.page .entry-content h2 { margin-top: 2rem; }
.entry-content blockquote {
    border-left: 3px solid var(--t-accent);
    background: var(--t-panel-2);
    padding: .9rem 1.1rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--t-radius) var(--t-radius) 0;
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-fs-small);
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
}
.entry-content table th,
.entry-content table td { border: 1px solid var(--t-rule); padding: .5rem .7rem; }
.entry-content table th { background: var(--t-panel-2); color: var(--t-ink); }
.entry-content code {
    font-family: var(--t-font-num);
    font-size: .85em;
    background: var(--t-panel-2);
    padding: .1em .35em;
    border-radius: 2px;
}
/* Широкое содержимое не должно раскачивать страницу по горизонтали */
.entry-content table,
.entry-content pre { display: block; overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════
   10. ПОДВАЛ
   ══════════════════════════════════════════════════════════════════════ */
.vs-footer,
footer.vs-footer,
.footer-layout1,
.copyright-wrap {
    background: var(--t-panel) !important;
    border-top: 1px solid var(--t-rule);
    color: var(--t-ink-soft);
}
.vs-footer a, .copyright-wrap a { color: var(--t-ink-soft); }
.vs-footer a:hover { color: var(--t-accent); }
.vs-footer .widget_title, .vs-footer h3 { color: var(--t-ink); font-size: var(--t-fs-h3); }

/* ══════════════════════════════════════════════════════════════════════
   11. ТЕРМИНАЛЬНЫЕ БЛОКИ (главная и каталог)
   ══════════════════════════════════════════════════════════════════════ */
.scs-strip {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    overflow-x: auto;
    padding: .5rem .75rem;
    background: var(--t-panel-2);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--t-ink-soft);
    scrollbar-width: thin;
}
.scs-strip > span { white-space: nowrap; }

.scs-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--t-rule);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    overflow: hidden;
}
.scs-stat { background: var(--t-panel); padding: .85rem 1rem; }
@media (min-width: 40rem) { .scs-stats { grid-template-columns: repeat(4, 1fr); } }
.scs-stat-value {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-h3);
    font-weight: 700;
    color: var(--t-ink);
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1.2;
}
.scs-stat-label {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}

.scs-section {
    display: flex;
    flex-direction: column;
    gap: var(--t-rhythm);
    padding-block: var(--t-rhythm);
}
.scs-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--t-rule);
    padding-bottom: .6rem;
}

/* ══════════════════════════════════════════════════════════════════════
   12. ЧИСТКА НАСЛЕДИЯ
   Убираем то, что делало сайты семейно похожими: свечение, градиенты,
   декоративные фигуры, анимированные подложки.
   ══════════════════════════════════════════════════════════════════════ */
.vs-shape-1, .vs-shape-2, .vs-shape-3,
.shape-mockup,
.vs-particle,
[class*="glow"] { display: none !important; }

[class*="vs-btn"]::before,
[class*="vs-btn"]::after { display: none !important; }

.vs-card, .vs-box, .vs-product,
.widget, .wp-block-group.has-background {
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   13. ДОВОДКА ПОСЛЕ ПЕРВОГО ПРОГОНА НА ЖИВОМ САЙТЕ
   ══════════════════════════════════════════════════════════════════════ */

/* Логотип. Файл из демо-темы отсутствует, и Roda подставляет название
   сайта текстом — для терминальной подачи это как раз уместно, нужен
   только знак вместо безликой ссылки. */
.logo,
h2 > a.logo {
    font-family: var(--t-font-ui);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--t-ink) !important;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 1px;
}
.logo:hover { border-bottom-color: var(--t-accent); }

/* Шапка раздела («хлебные крошки»). У Roda это тёмная полоса с картинкой
   и декоративными фигурами — на светлом фоне выглядит чужеродно.
   Оставляем узкую панель с тонкой линейкой. */
.breadcumb-wrapper,
.breadcumb-menu-wrap {
    background: var(--t-panel-2) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--t-rule);
    padding-block: clamp(1.1rem, 3vw, 1.8rem) !important;
}
.breadcumb-shape,
.breadcumb-shape__one,
.breadcumb-shape__two,
.breadcumb-shape__three { display: none !important; }

.breadcumb-title {
    font-size: var(--t-fs-h2) !important;
    color: var(--t-ink) !important;
    margin: 0 !important;
}
.breadcumb-menu,
.breadcumb-menu li,
.breadcumb-menu li a {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-ink-faint) !important;
}
.breadcumb-menu li a:hover { color: var(--t-accent) !important; }

/* Кнопка переключения темы стоит последним пунктом меню */
.scs-theme-item { display: flex; align-items: center; }
.scs-theme-item::before,
.scs-theme-item::after { display: none !important; }

/* Боковая корзина плагина side-cart тоже должна следовать палитре */
.xoo-wsc-modal,
.xoo-wsc-container,
.xoo-wsc-footer,
.xoo-wsc-header {
    background: var(--t-panel) !important;
    color: var(--t-ink) !important;
    border-color: var(--t-rule) !important;
}
.xoo-wsc-ftr-btn,
.xoo-wsc-btn {
    background: var(--t-accent) !important;
    color: var(--t-on-accent) !important;
    border-radius: var(--t-radius) !important;
}
.xoo-wsc-basket { background: var(--t-accent) !important; color: var(--t-on-accent) !important; }

/* Плашка согласия на cookie (complianz) — та же палитра, без цветных кнопок */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
    box-shadow: var(--t-shadow) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-on-accent) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences {
    background: transparent !important;
    border: 1px solid var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   14. ФИЛЬТРЫ КАТАЛОГА (плагин skin-filters)
   ══════════════════════════════════════════════════════════════════════ */
.widget_skin_filters_widget,
.sf-wrap {
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    padding: 0;
    overflow: hidden;
}
.sf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--t-rule);
    background: var(--t-panel-2);
}
.sf-header,
.sf-section-title {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}
.sf-section { border-bottom: 1px solid var(--t-rule); }
.sf-section:last-child { border-bottom: none; }
.sf-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .65rem .9rem;
    cursor: pointer;
    color: var(--t-ink) !important;
    background: transparent;
}
.sf-section-title:hover { color: var(--t-accent) !important; }
.sf-section-content { padding: .2rem .9rem .8rem; font-size: var(--t-fs-small); }
.sf-arrow { color: var(--t-ink-faint); }

.sf-game-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.sf-game-btn {
    font-family: var(--t-font-ui);
    font-size: var(--t-fs-micro);
    padding: .35rem .65rem;
    border: 1px solid var(--t-rule-strong);
    border-radius: var(--t-radius);
    background: transparent;
    color: var(--t-ink-soft);
    cursor: pointer;
}
.sf-game-btn:hover { border-color: var(--t-accent); color: var(--t-accent); }
.sf-game-btn.active {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent);
}

.sf-price-row { display: flex; align-items: center; gap: .45rem; }
.sf-price-input {
    flex: 1;
    min-width: 0;
    font-family: var(--t-font-num) !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.sf-price-dash { color: var(--t-ink-faint); font-family: var(--t-font-num); }

.sf-reset-btn {
    background: transparent !important;
    border: 1px solid var(--t-rule-strong) !important;
    color: var(--t-ink-soft) !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .6rem !important;
}
.sf-reset-btn:hover { color: var(--t-ink) !important; border-color: var(--t-ink-faint) !important; }

/* Флажки атрибутов: моноширинные значения, чтобы колонка читалась как данные */
.sf-section-content label {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .18rem 0;
    color: var(--t-ink-soft);
    font-size: var(--t-fs-small);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--t-font-ui);
    cursor: pointer;
}
.sf-section-content label:hover { color: var(--t-ink); }
.sf-section-content input[type="checkbox"] { accent-color: var(--t-accent); }

/* ══════════════════════════════════════════════════════════════════════
   15. ИСТОРИЯ ЦЕНЫ
   ══════════════════════════════════════════════════════════════════════ */
.scs-price-history {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .6rem 0 1rem;
    padding: .55rem .75rem;
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    width: fit-content;
    max-width: 100%;
}
.scs-price-history .scs-label { white-space: nowrap; }
.scs-price-delta {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--t-fs-small);
}
.scs-price-history--up   { color: var(--t-up); }
.scs-price-history--down { color: var(--t-down); }
.scs-price-history--flat { color: var(--t-ink-faint); }
.scs-price-history--up .scs-price-delta   { color: var(--t-up); }
.scs-price-history--down .scs-price-delta { color: var(--t-down); }
.scs-spark { display: block; overflow: visible; }

/* ══════════════════════════════════════════════════════════════════════
   16. СТРАНИЦА ТОВАРА: ХАРАКТЕРИСТИКИ И ПОРЯДОК ПОКУПКИ РЯДОМ
   На широком экране два блока описания встают в две колонки: слева данные
   предмета, справа порядок покупки. До этого они шли друг под другом
   и страница растягивалась без нужды.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 62rem) {
    .waxpeer-item-details {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        grid-template-areas:
            "specs steps"
            "specs trust";
        gap: 1rem 1.4rem;
        align-items: start;
    }
    /* Заголовок «характеристики» и таблица — левая колонка */
    .waxpeer-item-details > h4:first-of-type,
    .waxpeer-item-details > table { grid-area: specs; align-self: start; }
    .waxpeer-item-details > h4:first-of-type { margin-top: 0; }
    /* Блок порядка покупки — правая верхняя */
    .waxpeer-item-details > div[style*="linear-gradient"] { grid-area: steps; margin-top: 0 !important; }
    /* Плашка гарантии — под ним */
    .waxpeer-item-details > div[style*="#e8f5e9"] { grid-area: trust; margin-top: 0 !important; }
}

/* Служебные строки товара (артикул, категории) — как данные, не как проза */
.product-about__meta,
.sku_wrapper,
.posted_in,
.tagged_as {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .04em;
    color: var(--t-ink-faint);
}
.product-about__meta a,
.posted_in a { color: var(--t-ink-soft); }
.product-about__meta a:hover,
.posted_in a:hover { color: var(--t-accent); }
.product-about__divider { border-color: var(--t-rule) !important; background: var(--t-rule) !important; }

/* Период наблюдения рядом с изменением цены */
.scs-period {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--t-ink-faint);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   17. КАРТОЧКИ ГЛАВНОЙ И ШОРТКОДОВ
   Разметку `.sc-float-card` рисует плагин skinsmarketplace-homepage,
   а её оформление раньше лежало в содержимом страницы. Мы эту страницу
   переписали, поэтому карточки остались без стилей — задаём здесь.
   ══════════════════════════════════════════════════════════════════════ */
.sc-floating-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 46rem) { .sc-floating-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .sc-floating-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sc-float-card {
    display: flex;
    flex-direction: column;
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-float-card:hover { border-color: var(--t-rule-strong); box-shadow: var(--t-shadow); }
.sc-float-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--t-panel-2);
    padding: .5rem;
    display: block;
}
.sc-float-card-name {
    font-size: var(--t-fs-small);
    line-height: 1.35;
    color: var(--t-ink);
    padding: .55rem .65rem .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}
.sc-float-card-price {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--t-fs-base);
    color: var(--t-ink) !important;
    padding: 0 .65rem .65rem;
}

/* Прочие блоки плагина шорткодов красились оранжевым встроенным CSS */
.sc-product-price,
.sc-info-box .sc-info-title,
.sc-info-tip .sc-info-title,
.sc-info-success .sc-info-title,
.sc-info-danger .sc-info-title { color: var(--t-accent) !important; }
.sc-info-box,
.sc-info-tip,
.sc-info-success,
.sc-info-danger {
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule) !important;
    border-left: 3px solid var(--t-accent) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink-soft) !important;
}
.sc-info-success { border-left-color: var(--t-up) !important; }
.sc-info-success .sc-info-title { color: var(--t-up) !important; }
.sc-info-danger { border-left-color: var(--t-down) !important; }
.sc-info-danger .sc-info-title { color: var(--t-down) !important; }
.sc-btn,
.sc-grid-empty .sc-btn {
    background: var(--t-accent) !important;
    background-image: none !important;
    color: var(--t-on-accent) !important;
    border-radius: var(--t-radius) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   18. КОНТЕЙНЕР ГЛАВНОЙ
   Блок главной лежит в содержимом страницы вне темовой обёртки .container,
   поэтому сам задаёт ширину и поля — иначе текст уезжает к самому краю.
   ══════════════════════════════════════════════════════════════════════ */
.scs-home {
    max-width: 82rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}
/* Заголовок раздела и ссылка «все» не должны прилипать к краям */
.scs-section-head > a {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   19. ДОВОДКА ПО СНИМКАМ ЭКРАНА
   ══════════════════════════════════════════════════════════════════════ */

/* Кнопки Roda нарисованы со скошенным углом (clip-path) и собственной
   геометрией — в терминальной подаче нужен ровный прямоугольник. */
.vs-btn,
.roda-btn,
.woocommerce a.button,
.woocommerce button.button,
.elementor-button {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
    mask: none !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Плотнее ритм: между разделами было слишком много воздуха для плотной подачи */
.scs-home { gap: clamp(1.6rem, 3.2vw, 2.4rem); }
.scs-section { gap: .9rem; padding-block: 0; }
.scs-section-head { padding-bottom: .5rem; align-items: end; }
.scs-section-head h2 { margin: 0; }
.scs-section-head .scs-label { margin: 0 0 .15rem; }

/* Шапка: тонкая линейка, служебная навигация моноширинным — как в терминале */
.vs-header .main-menu > ul > li > a {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vs-header .main-menu > ul > li.current-menu-item > a { border-bottom: 2px solid var(--t-accent); }

/* Кнопка входа через Steam — в палитре сайта, а не тёмно-синей вставкой */
.steam-login-btn,
a[class*="steam-login"],
.steam-auth-button {
    background: var(--t-panel-2) !important;
    background-image: none !important;
    border: 1px solid var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-radius) !important;
    font-size: var(--t-fs-small) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.steam-login-btn:hover,
a[class*="steam-login"]:hover { border-color: var(--t-accent) !important; color: var(--t-accent) !important; }

/* Переключатель темы не должен выглядеть полем ввода */
.scs-theme-toggle {
    background: var(--t-panel-2);
    border-color: var(--t-rule-strong);
    font-weight: 600;
}

/* Плавающая корзина плагина — в палитре, без синего круга поверх светлой страницы */
.xoo-wsc-basket,
.xoo-wsc-cart-active .xoo-wsc-basket {
    background: var(--t-ink) !important;
    color: var(--t-panel) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
}

/* Кнопка входа через Steam: настоящие классы — steam-header-login и
   menu-item-steam-login (плагин skinsmarketplace-header-auth) */
.steam-header-login,
.menu-item-steam-login > a,
.menu-item-steam-login .steam-header-login {
    background: var(--t-ink) !important;
    background-image: none !important;
    border: 1px solid var(--t-ink) !important;
    color: var(--t-panel) !important;
    border-radius: var(--t-radius) !important;
    font-family: var(--t-font-ui) !important;
    font-size: var(--t-fs-small) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    padding: .5rem .85rem !important;
}
.steam-header-login:hover,
.menu-item-steam-login > a:hover {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-on-accent) !important;
}
.steam-header-login .steam-icon,
.menu-item-steam-login .steam-icon { filter: none; opacity: .9; }

/* Первый экран был высоковат: подзаголовок вёл себя как абзац статьи */
.scs-home__sub { line-height: 1.5; margin-bottom: .9rem; }
.scs-home h1 { margin-bottom: .45rem; }
.scs-home__lede-text .scs-label { margin-bottom: .3rem; }

/* ══════════════════════════════════════════════════════════════════════
   20. ВНУТРЕННИЕ СТРАНИЦЫ ПО СНИМКАМ ЭКРАНА
   Разделы 6 и 7 писались по разметке WooCommerce (`ul.products li.product`),
   но Roda подменяет шаблон цикла своим (`woocommerce/content-product.php`):
   карточка — это `.product__item--style2` внутри bootstrap-колонок, а имя
   товара на его странице вообще живёт только в шапке раздела. Поэтому
   каталог и страница товара оставались в стилях темы. Здесь — по разметке.
   ══════════════════════════════════════════════════════════════════════ */

/* 20.1 Шапка нарисована поверх содержимого (`position: absolute`), и каждая
   страница Roda отводила под неё 290 px отступа сверху. Ставим её в поток —
   отступы под неё больше не нужны нигде, включая главную. */
.vs-header {
    position: relative !important;
    background: var(--t-panel);
}

/* 20.2 Шапка раздела. Главная беда была не в отступах, а в `min-height: 571px`
   у Roda: заголовок прижимался к верху, а под ним оставалось полэкрана
   пустого серого. Делаем узкую полосу: крошки сверху как надпись, имя —
   заголовком. Для страницы товара это единственное место, где есть его имя. */
.breadcumb-wrapper {
    min-height: 0 !important;
    padding-block: clamp(1.5rem, 3.4vw, 2.4rem) !important;
    text-align: left !important;
    text-transform: none !important;
    background: var(--t-panel-2) !important;
}
.breadcumb-menu-wrap {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.breadcumb-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}
.breadcumb-menu {
    order: -1;                       /* крошки — надпись над заголовком */
    justify-content: flex-start !important;
    margin: 0 !important;
}
.breadcumb-menu li::after { margin: 0 .5rem !important; color: var(--t-ink-faint) !important; }
.breadcumb-title {
    text-transform: none !important;
    margin: 0 !important;
    max-width: 44ch;
    font-size: var(--t-fs-h1) !important;
    line-height: 1.15;
}

/* Отступы разделов Roda рассчитаны на воздушную тему; для плотной подачи
   они дают полэкрана пустоты между полосой заголовка и содержимым. */
.space-top    { padding-top: clamp(1.6rem, 3.6vw, 2.6rem) !important; }
.space-bottom { padding-bottom: clamp(2rem, 4.5vw, 3.2rem) !important; }

/* 20.3 Сетка каталога. Bootstrap-колонки Roda дают три широкие карточки на
   ряд — для 37 тысяч позиций это витрина, а не каталог. Переводим ряд в
   сетку и гасим ширины колонок. */
.tab-pane > .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: .75rem;
    margin: 0 !important;
}
.tab-pane > .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

.product__item--style2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.product__item--style2:hover {
    border-color: var(--t-rule-strong);
    box-shadow: var(--t-shadow);
}
.product__img {
    order: 1;
    position: relative;
    margin: 0 !important;
    /* «Глубинная» плитка: рендеры скинов рисованы под тёмный фон, поэтому
       кадр предмета тёмный даже на светлой теме — фирменный приём Компаса. */
    background: radial-gradient(120% 90% at 50% 40%, var(--t-stage-2), var(--t-stage));
    border-bottom: 1px solid var(--t-rule);
}
.product__img--link { display: block; }
.product__img--main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: .55rem;
    box-shadow: none !important;
    transform: none !important;
}
.product__item--style2 .scs-item-data { order: 2; border-top: 0; }
.product__content {
    order: 3;
    margin-top: auto;
    padding: .55rem .65rem .65rem !important;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: none !important;
}
.product_title-wrapper { display: block !important; }
.product__title { margin: 0 !important; font-size: var(--t-fs-small) !important; line-height: 1.35; }
.product__title--link {
    color: var(--t-ink) !important;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product__title--link:hover { color: var(--t-accent) !important; }
.product__price,
.product__price .price,
.product__price .amount {
    font-family: var(--t-font-num) !important;
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-base) !important;
    font-weight: 700 !important;
    color: var(--t-ink) !important;
}

/* «В корзину» занимала всю ширину под картинкой и читалась как главное
   действие карточки. Главное в карточке — цена; кнопка выходит по наведению. */
.product__img .product-cart {
    position: absolute !important;
    left: .5rem; right: .5rem; bottom: .5rem;
    width: auto !important;
    min-height: 0 !important;
    padding: .45rem .6rem !important;
    background: var(--t-ink) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-panel) !important;
    font-family: var(--t-font-ui) !important;
    font-size: var(--t-fs-micro) !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    text-align: center;
    line-height: 1.4 !important;
    opacity: 0;
    transition: opacity .15s ease;
}
.product__item--style2:hover .product-cart,
.product__item--style2:focus-within .product-cart { opacity: 1; }
.product__img .product-cart:hover { background: var(--t-accent) !important; color: var(--t-on-accent) !important; }
/* На тач-устройствах наведения нет — там кнопка видна всегда */
@media (hover: none) { .product__img .product-cart { opacity: 1; } }
/* Тягучая анимация кнопок Roda (капли + SVG-фильтр) чужда этой подаче */
.vs-btn__inner, .vs-btn__blobs, .vs-btn__blob, .vs-btn__animation { display: none !important; }

/* 20.4 Страница товара. Имя выводит шапка раздела, поэтому здесь — только
   цена, действие и служебные данные. */
.product-about__price .price,
.product-about .price {
    margin: 0 !important;
    font-family: var(--t-font-num) !important;
    font-size: clamp(1.5rem, 3.2vw, 2rem) !important;
    font-weight: 700 !important;
    color: var(--t-ink) !important;
}
.product-rating { display: none; }              /* отзывы отключены, строка пустая */
.product-about form.cart .vs-btn { width: 100%; }
.sc-offer-login-notice .button,
.wpt-track-btn {
    background: var(--t-panel-2) !important;
    background-image: none !important;
    border: 1px solid var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-radius) !important;
    font-size: var(--t-fs-small) !important;
    font-weight: 600 !important;
    padding: .5rem .85rem !important;
    box-shadow: none !important;
}
.sc-offer-login-notice .button:hover,
.wpt-track-btn:hover { border-color: var(--t-accent) !important; color: var(--t-accent) !important; }

.product-about__meta { display: flex; flex-direction: column; gap: .2rem; }
.product-about__meta--title,
.product-about__meta .sku_wrapper,
.product-about__meta .posted_in {
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .04em;
    color: var(--t-ink-faint) !important;
}
.product-about__meta .sku,
.product-about__meta .posted_in a { color: var(--t-ink) !important; }   /* артикул был белым по белому */
.product-about__divider { border: 0; border-top: 1px solid var(--t-rule) !important; opacity: 1 !important; }
.product-about__social { font-family: var(--t-font-num); font-size: var(--t-fs-micro); color: var(--t-ink-faint); }
.product-about__social a { color: var(--t-ink-faint) !important; }
.product-about__social a:hover { color: var(--t-accent) !important; }

/* Вкладки описания. У Roda это тёмная полоса с «пилюлями». */
.product-details-inner,
.product-description { background: none !important; }
.product-description .nav-pills {
    gap: .3rem;
    border-bottom: 1px solid var(--t-rule);
    padding: 0 !important;
    background: none !important;
}
.product-description .nav-pills .nav-link {
    background: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: .5rem .2rem !important;
    margin-right: 1.2rem;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-ink-faint) !important;
}
.product-description .nav-pills .nav-link.active {
    color: var(--t-ink) !important;
    border-bottom-color: var(--t-accent) !important;
}

/* 20.5 Боковая колонка каталога */
.shop-sidebar .widget {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    padding: .9rem 1rem !important;
    box-shadow: none !important;
}
.shop-sidebar .widget_search .wp-block-search__label { display: none; }
.shop-sidebar .wp-block-search__inside-wrapper { gap: .4rem; }
.shop-sidebar .wp-block-search__input {
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
    padding: .5rem .6rem !important;
}
.shop-sidebar .wp-block-search__button {
    background: var(--t-ink) !important;
    border: 0 !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-panel) !important;
    font-size: var(--t-fs-small) !important;
    font-weight: 600;
    padding: .5rem .8rem !important;
}

/* 20.6 Остальная разметка фильтров. Раздел 14 писался по виду, а плагин
   строит варианты не на `label`, а на `.sf-option` с собственным флажком;
   плюс кнопка «применить» и полосы прокрутки. Встроенный `<style>` плагина
   снят в functions.php — иначе он шёл после нашего файла и побеждал. */
.shop-sidebar .widget_skin_filters_widget { padding: 0 !important; border: 0; }

.sf-options { display: flex; flex-direction: column; gap: .1rem; max-height: 14rem; overflow-y: auto; }
.sf-options::-webkit-scrollbar { width: 6px; }
.sf-options::-webkit-scrollbar-track { background: var(--t-panel-2); }
.sf-options::-webkit-scrollbar-thumb { background: var(--t-rule-strong); border-radius: 3px; }

.sf-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .35rem;
    border: 1px solid transparent;
    border-radius: var(--t-radius);
    cursor: pointer;
    user-select: none;
}
.sf-option:hover { background: var(--t-panel-2); }
.sf-option.selected { background: var(--t-accent-soft); border-color: var(--t-accent); }
.sf-option input { display: none; }
.sf-option-check {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    border: 1px solid var(--t-rule-strong);
    border-radius: 3px;
    background: var(--t-panel);
    display: flex; align-items: center; justify-content: center;
}
.sf-option.selected .sf-option-check { background: var(--t-accent); border-color: var(--t-accent); }
.sf-option.selected .sf-option-check::after {
    content: "✓";
    color: var(--t-on-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.sf-option-label { flex: 1; min-width: 0; color: var(--t-ink-soft); font-size: var(--t-fs-small); }
.sf-option.selected .sf-option-label { color: var(--t-ink); }
.sf-option-count {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-micro);
    color: var(--t-ink-faint);
    background: var(--t-panel-2);
    border-radius: 999px;
    padding: .05rem .4rem;
}

.sf-price-input {
    display: flex;
    align-items: center;
    background: var(--t-panel-2);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    padding: 0 .5rem;
}
.sf-price-input:focus-within { border-color: var(--t-accent); }
.sf-price-input span { color: var(--t-ink-faint); font-family: var(--t-font-num); font-size: var(--t-fs-small); }
.sf-price-input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    padding: .4rem .3rem;
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-small);
    color: var(--t-ink);
    text-align: right;
}

.sf-apply-wrap { padding: .8rem .9rem; border-top: 1px solid var(--t-rule); background: var(--t-panel-2); }
.sf-apply-btn {
    width: 100%;
    padding: .55rem .8rem;
    background: var(--t-accent);
    border: 0;
    border-radius: var(--t-radius);
    color: var(--t-on-accent);
    font-family: var(--t-font-ui);
    font-size: var(--t-fs-small);
    font-weight: 600;
    cursor: pointer;
}
.sf-apply-btn:hover { background: var(--t-accent-hover); transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   21. ТРЕТИЙ ПРОХОД ПО СНИМКАМ
   ══════════════════════════════════════════════════════════════════════ */

/* 21.1 Прописные. В «дополнительном CSS» прежнего сайта лежало правило
   `p, a, span, li { text-transform: none !important }` — оно глушило 118 мест,
   где Roda ставит uppercase, и заодно наши собственные надписи. Убрав его,
   мы получили ИМЕНА СКИНОВ КАПСОМ. Гасим ровно там, где текст — имя или
   значение, а не служебная надпись. */
.product__title,
.product__title--link,
.title-style__big,
.side-product__title,
.cart_table .cart-productname,
.product-about__title,
.product-about__meta .sku,
.product-about__meta .posted_in a,
.woocommerce-product-attributes-item__value { text-transform: none !important; }

/* 21.2 Картинка в карточке. У Roda `.product__img` — гибкий контейнер с
   `min-height: 304px`, из-за чего под мелкой картинкой оставалась треть
   карточки пустоты. Держим кадр 4:3 и вписываем в него картинку. */
.product__img {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--t-rule) !important;
}
.product__img--link {
    position: absolute;
    inset: 0;
    display: block !important;
}
.product__img--main {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    padding: .55rem;
    /* Roda красит сам <img> белым — гасим, иначе «глубинная» плитка
       контейнера не видна. */
    background: transparent !important;
}
/* У 482 товаров из 37 601 внешнего адреса картинки нет вовсе — пусть остаётся
   ровный серый кадр, а не белая дыра в сетке. */

/* 21.3 Кнопки страницы товара оставались синими: у Roda правило
   `.woocommerce a.button` (два класса + элемент) специфичнее нашего
   `.sc-offer-login-notice .button`. Добавляем элемент в селектор. */
.woocommerce .sc-offer-login-notice a.button,
.woocommerce button.wpt-track-btn,
body .wpt-track-btn {
    background: var(--t-panel-2) !important;
    background-image: none !important;
    border: 1px solid var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
    border-radius: var(--t-radius) !important;
    font-size: var(--t-fs-small) !important;
    font-weight: 600 !important;
    padding: .5rem .85rem !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.woocommerce .sc-offer-login-notice a.button:hover,
.woocommerce button.wpt-track-btn:hover { border-color: var(--t-accent) !important; color: var(--t-accent) !important; }

/* 21.4 Цена. Цвет несёт внутренний `<span class="amount">`, поэтому правило
   на `.price` его не доставало — цена оставалась синей ссылкой. */
.product-about .price,
.product-about .price .amount,
.product-about .price bdi,
.product-about .price .woocommerce-Price-currencySymbol,
.product__price .amount,
.product__price bdi,
.product__price .woocommerce-Price-currencySymbol {
    color: var(--t-ink) !important;
    font-family: var(--t-font-num) !important;
}

/* 21.5 Действие на странице товара. Толстая линейка над кнопкой и кнопка
   во всю колонку — из набора Roda; у нас это обычное действие. */
.product-about form.cart,
.product-about form.cart .actions {
    border: 0 !important;
    padding: 0 !important;
    margin: .8rem 0 !important;
}
.product-about form.cart .vs-btn {
    width: 100%;
    max-width: 20rem;
}

/* 21.6 Блок «связанные товары». Roda кладёт его на тёмный градиент
   (`.bg-gradient1::before`) с оранжевыми украшениями — на светлой странице
   это была серая плита посреди сайта. */
.bg-gradient1 { background: var(--t-panel-2) !important; }
.bg-gradient1::before { display: none !important; }
.title-style__small {
    color: var(--t-ink-faint) !important;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .1em;
}
.title-style__small svg,
.title-style__link svg { display: none !important; }
.title-style__big {
    color: var(--t-ink) !important;
    font-size: var(--t-fs-h2) !important;
    margin: 0 !important;
}
.title-style__link {
    color: var(--t-accent) !important;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .08em;
}

/* 21.7 Вкладки описания рисовались как обведённая карточка со скруглением */
.product-description .tab-content,
.product-description .tab-pane {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 1rem 0 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   22. ЧЕТВЁРТЫЙ ПРОХОД
   ══════════════════════════════════════════════════════════════════════ */

/* 22.1 Двойная линейка через всю колонку над кнопкой «в корзину» — это
   `.product-about .cart::before/::after` у Roda (две границы высотой 4px). */
.product-about .cart::before,
.product-about .cart::after { display: none !important; }
.product-about form.cart .actions { align-items: flex-start; }
.product-about form.cart .vs-btn { margin: 0; }

/* 22.2 Характеристики под ценой: определение — значение, числа моноширинно.
   Это главный носитель смысла на странице скина. */
.scs-spec {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem 1rem;
    margin: .9rem 0 0;
    padding: .8rem 0 0;
    border-top: 1px solid var(--t-rule);
    font-size: var(--t-fs-small);
}
.scs-spec dt {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
    align-self: center;
}
.scs-spec dd {
    margin: 0;
    color: var(--t-ink);
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
}

/* 22.3 Поле поиска в боковой колонке занимало высоту с запасом под скрытую
   подпись. */
.shop-sidebar .widget_search .wp-block-search { margin: 0 !important; }
.shop-sidebar .widget_search { padding: .7rem .8rem !important; }

/* 22.4 Пустое значение float в карточке не должно ломать выключку строки */
.scs-item-data .scs-float:empty::before { content: "—"; color: var(--t-rule-strong); }

/* ══════════════════════════════════════════════════════════════════════
   23. РЕГИСТР ТЕКСТА
   У Roda есть правило `p { text-transform: capitalize }` — оно писало
   Каждое Слово С Большой Буквы во всех абзацах сайта, включая юридические
   страницы и блог. В прежнем сайте это глушилось правилом
   `p, a, span, li { text-transform: none !important }` в «дополнительном
   CSS»; оно же убивало наши собственные надписи, поэтому гасим точечно:
   проза и значения — как написано, служебные надписи — как задумано.
   ══════════════════════════════════════════════════════════════════════ */
p,
li,
dd,
blockquote,
figcaption,
.vs-list li,
.widget_categories a,
.vs-footer__menu a,
.accordion .accordion-button,
.wp-block-search .wp-block-search__input,
.comment-respond .form-control { text-transform: none; }

/* Наши собственные надписи объявлены с uppercase явно и здесь не участвуют:
   .scs-label, .scs-item-data, .sf-section-title, .breadcumb-menu и подобные. */

/* Страница «How It Works» шла по своей ширине и не совпадала с остальным
   сайтом — контейнер даёт Roda. */
.hiw-container { max-width: 100%; padding-inline: 0; }

/* 23.1 Вкладки описания были обведены скруглённой рамкой — это `.product-description`
   вместе с `.tab-content`, а не только внутренняя панель. */
.product-description,
.product-description .tab-content,
.product-description .tab-pane,
.product-details-inner {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.product-description .nav-pills { border-bottom: 1px solid var(--t-rule) !important; }

/* 23.2 На главной полоса с крошками не нужна: заголовок страницы там —
   сам первый экран. (Это единственное правило из прежнего «дополнительного
   CSS», которое было по делу.) */
.home .breadcumb-wrapper,
.page-id-261140 .breadcumb-wrapper { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   24. ТЁМНЫЙ РЕЖИМ ПО СНИМКАМ
   ══════════════════════════════════════════════════════════════════════ */

/* 24.1 Кнопка Steam: цвет текста лежит на внутреннем элементе, поэтому в
   тёмном режиме подпись оставалась светлой на светлом. */
.steam-header-login,
.steam-header-login *,
.menu-item-steam-login > a,
.menu-item-steam-login > a * {
    color: var(--t-panel) !important;
}
.steam-header-login:hover,
.steam-header-login:hover *,
.menu-item-steam-login > a:hover,
.menu-item-steam-login > a:hover * { color: var(--t-on-accent) !important; }
/* Кнопка Steam на светлой теме тёмная — значок остаётся как есть;
   на тёмной теме кнопка светлая, значок нужно перевернуть. */
:root[data-theme="dark"] .steam-header-login .steam-icon,
:root[data-theme="dark"] .menu-item-steam-login .steam-icon { filter: invert(1); }

/* 24.2 Переключатель языка — системный <select> со своим светлым фоном */
.flavor-lang-switcher,
.flavor-lang-switcher select,
select[name="flavor_lang"],
.language-switcher select {
    background: var(--t-panel) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    padding: .3rem .4rem !important;
}

/* 24.3 Поле поиска в боковой колонке: подпись скрыта, но её отступ держал
   пустую полосу над полем. */
.shop-sidebar .widget_search form,
.shop-sidebar .widget_search .wp-block-search,
.shop-sidebar .widget_search .wp-block-search__inside-wrapper { margin: 0 !important; }
.shop-sidebar .widget_search .wp-block-search__label {
    display: none !important;
    margin: 0 !important;
}

/* 24.4 Переключатель языка (`skinsmarketplace-header-auth`) нарисован под
   тёмную шапку: белая плашка на прозрачном, оранжевая обводка при наведении,
   тёмное выпадающее меню с салатовыми подсветками. Переводим в палитру и
   возвращаем название языка — один флаг-эмодзи опознаётся хуже, чем слово. */
.menu-item-language .language-header-switcher {
    gap: .45rem !important;
    padding: .4rem .6rem !important;
    background: transparent !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink-soft) !important;
}
.menu-item-language .language-header-switcher:hover {
    background: var(--t-panel-2) !important;
    border-color: var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
}
.menu-item-language .lang-name {
    display: inline !important;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro) !important;
    font-weight: 400 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.menu-item-language .lang-flag { font-size: 1rem !important; }
.menu-item-language .dropdown-arrow { width: 12px; height: 12px; opacity: .5; }

.language-header-dropdown {
    right: 0;
    min-width: 11rem;
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
    padding: .25rem 0 !important;
    margin-top: .35rem !important;
}
.language-header-dropdown li a {
    padding: .45rem .75rem !important;
    color: var(--t-ink-soft) !important;
    font-size: var(--t-fs-small) !important;
}
.language-header-dropdown li a:hover {
    background: var(--t-panel-2) !important;
    color: var(--t-ink) !important;
}
.language-header-dropdown li.active a {
    background: var(--t-accent-soft) !important;
    color: var(--t-accent) !important;
}
@media (max-width: 75rem) {
    .menu-item-language .lang-name { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   25. ПОДВАЛ, БЛОГ, БОКОВЫЕ ВИДЖЕТЫ, ПУСТАЯ КОРЗИНА
   ══════════════════════════════════════════════════════════════════════ */

/* 25.1 Подвал. Разметку даёт mu-плагин `scs-footer.php` (без inline-стилей). */
.scs-footer {
    background: var(--t-panel-2);
    border-top: 1px solid var(--t-rule);
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 1.4rem;
}
.scs-footer__inner {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.5rem);
    grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media (max-width: 52rem) { .scs-footer__inner { grid-template-columns: 1fr 1fr; } }
.scs-footer__logo {
    font-family: var(--t-font-ui);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--t-ink);
    margin-bottom: .5rem;
}
.scs-footer__brand p {
    margin: 0;
    max-width: 38ch;
    color: var(--t-ink-soft);
    font-size: var(--t-fs-small);
}
.scs-footer__col h4 {
    margin: 0 0 .6rem;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-ink-faint);
}
.scs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.scs-footer__col a { color: var(--t-ink-soft); font-size: var(--t-fs-small); text-decoration: none; }
.scs-footer__col a:hover { color: var(--t-accent); }
.scs-footer__legal {
    max-width: 72rem;
    margin: clamp(1.4rem, 3vw, 2rem) auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--t-rule);
}
.scs-footer__legal p {
    margin: 0 0 .5rem;
    font-size: var(--t-fs-micro);
    line-height: 1.6;
    color: var(--t-ink-faint);
    text-align: center;
}
.scs-footer__legal a { color: var(--t-ink-faint); text-decoration: underline; }
.scs-footer__legal a:hover { color: var(--t-accent); }

/* 25.2 Боковые виджеты (блог). Заголовки у Roda белые — на светлом фоне их
   не было видно вовсе; иконка-«треугольник» — декоративная вставка темы. */
.sidebar-area .widget,
.widget-area .widget {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: none !important;
    padding: 1rem !important;
    margin-bottom: 1rem;
}
.sidebar-area .widget_title,
.sidebar-area .widget h2,
.sidebar-area .widget h4,
.sidebar-area .wp-block-heading,
.widget-area .widget_title {
    background: none !important;
    color: var(--t-ink) !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    font-weight: 400 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 !important;
    margin: 0 0 .7rem !important;
    border: 0 !important;
}
.sidebar-area .widget_title::before,
.sidebar-area .widget_title::after,
.sidebar-area .widget > h3::before,
.sidebar-area .widget > h3::after { display: none !important; }
.sidebar-area .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar-area .widget ul li {
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--t-rule) !important;
    padding: .45rem 0 !important;
    margin: 0 !important;
    font-size: var(--t-fs-small);
}
.sidebar-area .widget ul li:last-child { border-bottom: 0 !important; }
.sidebar-area .widget ul li a { color: var(--t-ink-soft) !important; }
.sidebar-area .widget ul li a:hover { color: var(--t-accent) !important; }
.sidebar-area .widget ul li::before,
.sidebar-area .widget ul li a::before { display: none !important; content: none !important; }
.sidebar-area .widget_search .wp-block-search__label { display: none !important; }
.sidebar-area .wp-block-search__input {
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
    padding: .5rem .6rem !important;
}
.sidebar-area .wp-block-search__button {
    background: var(--t-ink) !important;
    border: 0 !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-panel) !important;
    padding: .5rem .8rem !important;
}

/* 25.3 Записи блога в списке */
.vs-blog__title,
.vs-blog__title a {
    text-transform: none !important;
    color: var(--t-ink) !important;
    font-size: var(--t-fs-h3) !important;
}
.vs-blog__title a:hover { color: var(--t-accent) !important; }
.vs-blog {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: none !important;
}
.vs-blog__meta_text,
.vs-blog__meta a {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .06em;
    color: var(--t-ink-faint) !important;
}
.vs-blog__link,
.link-btn {
    color: var(--t-accent) !important;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .08em;
}

/* 25.4 Пустая корзина: блоки WooCommerce «новое в магазине» рисуются своей
   разметкой (`wc-block-grid`) — приводим к виду карточек каталога. */
.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wc-block-grid__product {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: var(--t-panel);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wc-block-grid__product-image { margin: 0 !important; border-bottom: 1px solid var(--t-rule); background: var(--t-panel-2); }
.wc-block-grid__product-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: .55rem;
    margin: 0 !important;
}
.wc-block-grid__product-title {
    padding: .55rem .65rem 0;
    font-size: var(--t-fs-small) !important;
    font-weight: 500;
    color: var(--t-ink) !important;
    text-transform: none;
}
.wc-block-grid__product-price {
    padding: .2rem .65rem .5rem;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-base) !important;
    font-weight: 700;
    color: var(--t-ink) !important;
}
.wc-block-grid__product-add-to-cart { margin: auto .65rem .65rem !important; }
.wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: block;
    width: 100%;
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule-strong) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
    font-size: var(--t-fs-micro) !important;
    font-weight: 600;
    padding: .4rem .6rem !important;
    text-align: center;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: var(--t-ink) !important;
    border-color: var(--t-ink) !important;
    color: var(--t-panel) !important;
}
.wc-block-cart__empty-cart__title {
    font-size: var(--t-fs-h2) !important;
    color: var(--t-ink) !important;
}
.wp-block-separator.is-style-dots { display: none !important; }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { opacity: .25; }

/* 25.5 Двойная рамка у виджетов. Roda рисует три декорации: `.widget::before`
   — градиентная плита за виджетом, `.widget_title::before` — плашка за
   заголовком (из-за неё первая буква уезжала за край), `::after` — глиф
   «\f052» из иконочного шрифта (в светлой теме читался как значок «извлечь»).
   Гасим все три, включая блочные виджеты (`.wp-block-heading`). */
.widget::before,
.widget::after,
.sidebar-area .widget_title::before,
.sidebar-area .widget_title::after,
.sidebar-area .wp-block-heading::before,
.sidebar-area .wp-block-heading::after,
.sidebar-area .wp-block-search__label::before,
.sidebar-area .wp-block-search__label::after,
.shop-sidebar .widget h2::before,
.shop-sidebar .widget h2::after,
.shop-sidebar .widget .wp-block-heading::before,
.shop-sidebar .widget .wp-block-heading::after,
.shop-sidebar .widget .widget-title h4::before,
.shop-sidebar .widget .widget-title h4::after { display: none !important; content: none !important; }

.sidebar-area .widget_title,
.sidebar-area .wp-block-heading { justify-content: flex-start !important; }

/* Счётчик записей в рубриках — как данные, справа, моноширинным */
.sidebar-area .widget_categories li,
.widget_categories li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.sidebar-area .widget_categories .post-count,
.widget_categories .post-count {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-micro);
    color: var(--t-ink-faint);
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   26. СТРАНИЦА «TOP TRANSACTIONS» (плагин skinsmarketplace-top-transactions)
   Плагин печатает свой CSS прямо в теле шорткода — то есть после нашего
   файла, и на равной специфичности побеждает. Но всю палитру он держит в
   своих переменных на `:root`, поэтому достаточно переопределить их с
   большей специфичностью (`body .sc-home`), и страница сама переходит в
   палитру сайта, включая тёмный режим.
   ══════════════════════════════════════════════════════════════════════ */
body .sc-home {
    --bg-dark:          var(--t-ground);
    --bg-card:          var(--t-panel);
    --bg-card-hover:    var(--t-panel-2);
    --accent:           var(--t-accent);
    --accent-secondary: var(--t-accent);
    --accent-dim:       var(--t-accent-soft);
    --text-primary:     var(--t-ink);
    --text-secondary:   var(--t-ink-soft);
    --border:           var(--t-rule);
    --gradient-accent:  var(--t-accent);
    font-family: var(--t-font-ui) !important;
}

/* Свечения и оранжевые полосы-украшения */
.sc-top-section::before,
.sc-txn-container::before,
.sc-cta::before { display: none !important; }

.sc-top-section { padding-block: clamp(1.6rem, 3.6vw, 2.6rem) !important; }

.sc-section-badge {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: .5rem !important;
    color: var(--t-ink-faint) !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
.sc-top-title {
    font-family: var(--t-font-ui) !important;
    font-size: var(--t-fs-h1) !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--t-ink) !important;
}
.sc-top-subtitle { font-size: var(--t-fs-lead) !important; color: var(--t-ink-soft) !important; }
.sc-top-date {
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    color: var(--t-ink-faint) !important;
}

.sc-game-tab {
    padding: .5rem .85rem !important;
    gap: .5rem !important;
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink-soft) !important;
    font-size: var(--t-fs-small) !important;
    text-transform: none !important;
}
.sc-game-tab:hover { transform: none !important; border-color: var(--t-rule-strong) !important; }
.sc-game-tab.active {
    border-color: var(--t-accent) !important;
    background: var(--t-accent-soft) !important;
    color: var(--t-ink) !important;
    box-shadow: none !important;
}

.sc-txn-container {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    overflow: hidden;
}
.sc-txn-table-header {
    padding: .6rem .9rem !important;
    background: var(--t-panel-2) !important;
    border-bottom: 1px solid var(--t-rule) !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .1em !important;
    color: var(--t-ink-faint) !important;
}
.sc-txn-row { padding: .6rem .9rem !important; border-bottom: 1px solid var(--t-rule) !important; }
.sc-txn-row:hover { background: var(--t-panel-2) !important; transform: none !important; }
.sc-txn-rank,
.sc-txn-rank.top-1,
.sc-txn-rank.top-2,
.sc-txn-rank.top-3 {
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-small) !important;
    color: var(--t-ink-faint) !important;
    text-shadow: none !important;
}
.sc-txn-image {
    width: 48px !important;
    height: 48px !important;
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: none !important;
}
.sc-txn-row:hover .sc-txn-image { box-shadow: none !important; border-color: var(--t-rule-strong) !important; }
.sc-txn-name { font-size: var(--t-fs-small) !important; color: var(--t-ink) !important; }
.sc-txn-buyer { font-size: var(--t-fs-small) !important; }
.sc-txn-buyer-icon {
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
}
.sc-txn-price {
    font-family: var(--t-font-num) !important;
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-base) !important;
    color: var(--t-ink) !important;
}
.sc-txn-footer {
    padding: .6rem !important;
    background: var(--t-panel-2) !important;
    border-top: 1px solid var(--t-rule) !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    color: var(--t-ink-faint) !important;
}

.sc-btn {
    padding: .55rem .95rem !important;
    border-radius: var(--t-radius) !important;
    font-family: var(--t-font-ui) !important;
    font-size: var(--t-fs-small) !important;
    text-transform: none !important;
}
.sc-btn-primary { background: var(--t-accent) !important; color: var(--t-on-accent) !important; }
.sc-btn-primary:hover { background: var(--t-accent-hover) !important; color: var(--t-on-accent) !important; transform: none !important; box-shadow: none !important; }

/* Призыв к действию в конце страницы: у плагина это заголовок на 64 px
   капсом во всю ширину. */
.sc-cta { padding-block: clamp(2rem, 4.5vw, 3rem) !important; }
.sc-cta h2 {
    font-family: var(--t-font-ui) !important;
    font-size: var(--t-fs-h2) !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    color: var(--t-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
.sc-cta p { font-size: var(--t-fs-base) !important; margin-bottom: 1.2rem !important; }
.sc-txn-list:empty,
.sc-txn-list { min-height: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════
   27. КНОПКА ПОИСКА В ШАПКЕ
   У Roda это кнопка с двумя декоративными чёрточками (`::before` 2×40 и
   `::after` 2×20, серые) и глифом `far fa-search` из Font Awesome Pro,
   который у нас не отрисовывается. На светлой шапке оставались две
   висящие в воздухе полоски. Рисуем лупу встроенной SVG-маской — она не
   зависит от иконочного шрифта и следует цвету темы.
   ══════════════════════════════════════════════════════════════════════ */
.searchBoxTggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink-soft) !important;
}
.searchBoxTggler:hover { border-color: var(--t-rule-strong) !important; color: var(--t-ink) !important; }
.searchBoxTggler i { display: none !important; }
.searchBoxTggler::before { display: none !important; }
.searchBoxTggler::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 15px;
    height: 15px;
    background: currentColor !important;
    -webkit-mask: var(--scs-icon-search) center / contain no-repeat;
    mask: var(--scs-icon-search) center / contain no-repeat;
}
:root {
    --scs-icon-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="21" y2="21"/></svg>');
}

/* Всплывающее окно поиска — в палитре сайта */
.popup-search-box { background: rgba(25, 26, 24, .55) !important; }
.popup-search-box form {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
}
.popup-search-box input {
    background: transparent !important;
    color: var(--t-ink) !important;
    border: 0 !important;
}
.popup-search-box button[type="submit"] {
    background: var(--t-ink) !important;
    color: var(--t-panel) !important;
    border: 0 !important;
}

/* 27.1 Маска без явного размера и без width/height в самой SVG давала точку
   вместо лупы: у встроенной SVG нет собственного размера, а `contain`
   вычислять было не от чего. */
:root {
    --scs-icon-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="21" y2="21"/></svg>');
}
.searchBoxTggler::after {
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

/* 27.2 Название языка рядом с флагом глушил плагин `flavor-menu-fix`
   правилом той же специфичности, но напечатанным позже. */
.menu-item-language .language-header-switcher .lang-name { display: inline !important; }

/* 27.3 Псевдоэлемент у Roda позиционирован абсолютно и жёстко связан с
   декоративными чёрточками; проще нарисовать лупу фоном самой кнопки.
   Два варианта цвета вместо currentColor: фоновая картинка его не наследует. */
.searchBoxTggler::after,
.searchBoxTggler::before { display: none !important; content: none !important; }
.searchBoxTggler {
    padding: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C6057' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}
:root[data-theme="dark"] .searchBoxTggler {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A2A79F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") !important;
}

/* 27.4 Плагин `skinsmarketplace-header-auth` печатает свой CSS позже нашего
   файла и тоже с `!important`, поэтому на равной специфичности побеждал он:
   переключатель языка оставался белой полупрозрачной плашкой «под тёмную
   шапку», а название языка — блоком, уезжавшим под низ шапки.
   Поднимаем специфичность добавлением имён тегов. */
li.menu-item-language a.language-header-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    padding: .35rem .55rem !important;
    background: transparent !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink-soft) !important;
    line-height: 1.2 !important;
}
li.menu-item-language a.language-header-switcher:hover {
    background: var(--t-panel-2) !important;
    border-color: var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
}
li.menu-item-language a.language-header-switcher span.lang-name {
    display: inline !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    font-weight: 400 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
li.menu-item-language a.language-header-switcher span.lang-flag { font-size: .95rem !important; line-height: 1 !important; }
li.menu-item-language a.language-header-switcher svg.dropdown-arrow { width: 11px !important; height: 11px !important; opacity: .5; }
@media (max-width: 75rem) {
    li.menu-item-language a.language-header-switcher span.lang-name { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   28. КОРЗИНА И ОФОРМЛЕНИЕ НА БЛОКАХ WOOCOMMERCE
   Страницы /cart/ и /checkout/ собраны из блоков и дорисовываются скриптом,
   поэтому в разметке сервера их почти нет — стилизуем по классам блоков.
   ══════════════════════════════════════════════════════════════════════ */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--t-accent) !important;
    border: 1px solid var(--t-accent) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-on-accent) !important;
    font-family: var(--t-font-ui) !important;
    font-size: var(--t-fs-small) !important;
    font-weight: 600 !important;
    padding: .55rem .95rem !important;
    box-shadow: none !important;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover { background: var(--t-accent-hover) !important; border-color: var(--t-accent-hover) !important; }
.wc-block-components-button--outlined,
.wp-block-woocommerce-empty-cart-block .wc-block-components-button {
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule-strong) !important;
    color: var(--t-ink) !important;
}

/* Значок пустой корзины у блока — тёмная фигура на тёмном фоне */
.wp-block-woocommerce-empty-cart-block svg,
.wc-block-cart__empty-cart__title svg,
.with-empty-cart-icon svg {
    fill: var(--t-ink-faint) !important;
    color: var(--t-ink-faint) !important;
    opacity: .6;
}
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 { color: var(--t-ink) !important; }
.wp-block-woocommerce-empty-cart-block p { color: var(--t-ink-soft) !important; }

/* Таблица корзины, итоги и поля оформления */
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-sidebar,
.wc-block-checkout__form {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--t-rule) !important; }
.wc-block-components-product-name { color: var(--t-ink) !important; text-transform: none !important; }
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
    font-family: var(--t-font-num) !important;
    font-variant-numeric: tabular-nums;
    color: var(--t-ink) !important;
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
    background: var(--t-panel-2) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title { color: var(--t-ink) !important; }
.wc-block-components-checkout-step__description,
.wc-block-components-totals-item__label { color: var(--t-ink-soft) !important; }

/* Боковая корзина плагина (xoo) — кнопки и пустое состояние */
.xoo-wsc-btn,
.xoo-wsc-ft-btn {
    background: var(--t-accent) !important;
    border: 1px solid var(--t-accent) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-on-accent) !important;
    font-size: var(--t-fs-small) !important;
    box-shadow: none !important;
}
.xoo-wsc-empty-cart span { color: var(--t-ink-soft) !important; }

/* 28.1 Заголовок «Cart totals» у блока белый — на светлом фоне его не видно.
   Имя товара и «удалить» приводим к обычной иерархии: имя — текст, удаление —
   служебное действие, а не вторая по заметности ссылка на странице. */
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-components-title.wc-block-cart__totals-title {
    color: var(--t-ink) !important;
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
.wc-block-components-product-name,
a.wc-block-components-product-name { color: var(--t-ink) !important; font-size: var(--t-fs-base) !important; }
a.wc-block-components-product-name:hover { color: var(--t-accent) !important; }
.wc-block-cart-item__remove-link {
    font-size: var(--t-fs-micro) !important;
    color: var(--t-ink-faint) !important;
    text-decoration: underline;
    font-weight: 400 !important;
}
.wc-block-cart-item__remove-link:hover { color: var(--t-down) !important; }
.wc-block-cart-items__header,
.wc-block-cart-items__header th {
    font-family: var(--t-font-num) !important;
    font-size: var(--t-fs-micro) !important;
    letter-spacing: .1em !important;
    color: var(--t-ink-faint) !important;
    text-transform: uppercase !important;
}
.wc-block-cart-item__image img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--t-panel-2);
    border: 1px solid var(--t-rule);
    border-radius: var(--t-radius);
}
/* Предупреждение о минимальной сумме заказа — по смыслу, не украшением */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-down) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-ink) !important;
}

/* 28.2 «Remove item» рисовалось второй по заметности ссылкой на странице:
   у блока это <button> со своим классом, селектор без имени тега проигрывал. */
button.wc-block-cart-item__remove-link,
.wc-block-cart-items button.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link {
    font-size: var(--t-fs-micro) !important;
    font-weight: 400 !important;
    color: var(--t-ink-faint) !important;
    text-decoration: underline !important;
    text-transform: none !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
button.wc-block-cart-item__remove-link:hover { color: var(--t-down) !important; }

/* ══════════════════════════════════════════════════════════════════════
   29. ДИЗАЙН — «ГЛУБИНА» ПОД ПРЕДМЕТАМИ
   Унаследовано от «сцены» skinstradehub, но с другим смыслом: интерфейс —
   светлая «бумага» карты, а предметы лежат в тёмных «глубинных» плитках
   (рендеры скинов рисованы под тёмный фон). Что несёт эффект:
     · тёмная «глубина» под предметы на светлой бумаге — сам контраст
       и есть фирменный приём Компаса;
     · заголовки серифом Fraunces — картографический характер;
     · цвета редкостей CS2 как код данных, а не украшение;
     · шкала float с зонами износа — то, по чему скин реально выбирают;
     · живая лента рынка и появление разделов при прокрутке.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* Глубина — один и тот же тёмный тон в обеих темах: это подложка под
       предмет, а не фон интерфейса. Тон морской, в масть акценту. */
    --t-stage:        #0E1A17;
    --t-stage-2:      #172621;
    --t-stage-ink:    #F1F4F2;
    --t-stage-soft:   #9AA8A2;
    --t-stage-rule:   rgba(255, 255, 255, .10);
    --t-stage-accent: #7FD4CD;

    /* Сигнальный цвет живых данных: наличие, рост, пульс «рынок работает».
       В акценте бренда не участвует. */
    --t-live:         #1FBF8F;

    --t-font-display: "Fraunces", Georgia, "Times New Roman", serif;

    /* Крупнее и плотнее: заголовок должен звучать, а не подписывать */
    --t-fs-h1: clamp(2.35rem, 1.5rem + 3.6vw, 4.5rem);
    --t-fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem);
    --t-fs-h3: clamp(1.05rem, .98rem + .4vw, 1.35rem);

    --scs-rar: var(--t-accent);      /* цвет редкости по умолчанию */
}

/* Заголовки — серифом Fraunces. Оптический размер (`opsz`) у него переменный
   и берётся из кегля сам: крупные заголовки получают контрастное «плакатное»
   начертание, мелкие — спокойное текстовое. Это и есть весь приём. */
h1, .h1, h2, .h2,
.breadcumb-title,
.scs-home h1,
.scs-spot__name,
.title-style__big,
.sc-top-title,
.hiw-hero h1 {
    font-family: var(--t-font-display) !important;
    font-weight: 620;
    letter-spacing: -.014em;
    line-height: 1.06;
    text-wrap: balance;
}
h3, .h3, h4 { font-family: var(--t-font-display); font-weight: 560; letter-spacing: -.006em; }

/* — 29.1 Шапка: тонкое стекло, содержимое проезжает под ней — */
.vs-header {
    position: sticky !important;
    top: 0;
    z-index: 200;
    background: color-mix(in srgb, var(--t-ground) 78%, transparent) !important;
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--t-rule);
}
.vs-header .main-menu > ul > li.current-menu-item > a { position: relative; }
.vs-header .main-menu > ul > li.current-menu-item > a::before {
    content: "";
    position: absolute;
    left: -.55rem; top: 50%;
    width: 4px; height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--t-accent);
}

/* — 29.2 Сцена первого экрана — */
.scs-stage {
    position: relative;
    isolation: isolate;
    margin-inline: calc(50% - 50vw);       /* во всю ширину окна из узкого потока */
    padding-inline: calc(50vw - 50%);
    background: var(--t-stage);
    color: var(--t-stage-ink);
    overflow: hidden;
}
/* Свечение за содержимым — мягкое, одно, в акценте. Не радуга и не градиентный герой */
.scs-stage::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 120%;
    background:
        radial-gradient(45% 55% at 22% 18%, rgba(105, 122, 255, .26), transparent 70%),
        radial-gradient(40% 50% at 82% 8%, rgba(31, 191, 143, .14), transparent 72%);
    z-index: -1;
    pointer-events: none;
}
.scs-stage__inner {
    display: grid;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: center;
    padding-block: clamp(2.2rem, 5.5vw, 4.2rem);
}
@media (min-width: 60rem) { .scs-stage__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.scs-stage h1 { color: var(--t-stage-ink); margin: 0 0 .7rem; max-width: 22ch; }
.scs-stage__sub {
    margin: 0 0 1.3rem;
    max-width: 46ch;
    color: var(--t-stage-soft);
    font-size: var(--t-fs-lead);
    line-height: 1.55;
}
.scs-stage .scs-label { color: var(--t-stage-soft); }

/* «Рынок работает» — пульсирующая точка. Единственная анимация, идущая всегда */
.scs-live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--t-stage-soft);
    margin-bottom: .55rem;
}
.scs-live::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--t-live);
    box-shadow: 0 0 0 0 rgba(31, 191, 143, .55);
    animation: scs-pulse 2.4s ease-out infinite;
}
@keyframes scs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(31, 191, 143, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(31, 191, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 191, 143, 0); }
}

/* Кнопки на сцене: главная — светлая на тёмном, вторая — контур */
.scs-stage .vs-btn,
.scs-stage .scs-btn-ghost {
    border-radius: var(--t-radius) !important;
    font-size: var(--t-fs-small) !important;
    padding: .65rem 1.1rem !important;
}
.scs-stage .vs-btn {
    background: var(--t-stage-ink) !important;
    border: 1px solid var(--t-stage-ink) !important;
    color: var(--t-stage) !important;
}
.scs-stage .vs-btn:hover { background: var(--t-stage-accent) !important; border-color: var(--t-stage-accent) !important; }
.scs-stage .scs-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--t-stage-rule) !important;
    color: var(--t-stage-ink) !important;
}
.scs-stage .scs-btn-ghost:hover { border-color: var(--t-stage-ink) !important; }

/* Показатели на сцене — крупными моноширинными числами */
.scs-stage__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    background: var(--t-stage-rule);
    border: 1px solid var(--t-stage-rule);
    border-radius: var(--t-radius);
    overflow: hidden;
}
@media (min-width: 48rem) { .scs-stage__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.scs-stage__stat { background: color-mix(in srgb, var(--t-stage) 82%, transparent); padding: .85rem 1rem; }
.scs-stage__stat b {
    display: block;
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--t-stage-ink);
}
.scs-stage__stat span {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-stage-soft);
}

/* — 29.3 Главный предмет: карточка на сцене — */
.scs-spot {
    display: grid;
    gap: 0;
    background: color-mix(in srgb, var(--t-stage-2) 92%, transparent);
    border: 1px solid var(--t-stage-rule);
    border-radius: calc(var(--t-radius) * 2);
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color .2s ease, transform .2s ease;
}
.scs-spot:hover { border-color: color-mix(in srgb, var(--scs-rar, var(--t-stage-accent)) 60%, transparent); transform: translateY(-2px); }
.scs-spot__stage {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background:
        radial-gradient(60% 70% at 50% 100%, rgba(169, 182, 255, .18), transparent 72%),
        linear-gradient(180deg, #0A0D10, #12171D);
    border-bottom: 1px solid var(--t-stage-rule);
}
.scs-spot__stage img {
    max-width: 78%;
    max-height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.scs-spot__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; }
.scs-spot__body .scs-label { color: var(--t-stage-soft); margin: 0; }
.scs-spot__name {
    margin: 0;
    font-size: var(--t-fs-h3) !important;
    color: var(--t-stage-ink);
    line-height: 1.2;
}
.scs-spot__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.scs-spot__wear {
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-stage-soft);
}
.scs-spot__price {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--t-stage-ink);
}
.scs-spot__price .amount,
.scs-spot__price bdi,
.scs-spot__price .woocommerce-Price-currencySymbol { color: var(--t-stage-ink) !important; font-family: var(--t-font-num) !important; }

/* — 29.4 Плашка редкости — */
.scs-rarity-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .5rem .2rem .45rem;
    border: 1px solid color-mix(in srgb, var(--scs-rar-color, var(--t-accent)) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--scs-rar-color, var(--t-accent)) 12%, transparent);
    color: color-mix(in srgb, var(--scs-rar-color, var(--t-accent)) 70%, var(--t-ink));
    font-family: var(--t-font-num);
    font-size: var(--t-fs-micro);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.scs-rarity-chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--scs-rar-color, var(--t-accent));
}
.scs-stage .scs-rarity-chip,
.scs-spot .scs-rarity-chip { color: color-mix(in srgb, var(--scs-rar-color, var(--t-stage-accent)) 65%, var(--t-stage-ink)); }

/* — 29.5 Лента рынка — */
.scs-ticker {
    display: flex;
    gap: 0;
    overflow: hidden;
    border-top: 1px solid var(--t-stage-rule);
    background: color-mix(in srgb, var(--t-stage) 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.scs-ticker__row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    animation: scs-marquee 64s linear infinite;
}
.scs-ticker:hover .scs-ticker__row { animation-play-state: paused; }
@keyframes scs-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.scs-tick {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-right: 1px solid var(--t-stage-rule);
    text-decoration: none !important;
    white-space: nowrap;
}
.scs-tick__name { color: var(--t-stage-soft); font-size: var(--t-fs-small); }
.scs-tick:hover .scs-tick__name { color: var(--t-stage-ink); }
.scs-tick__price {
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-small);
    color: var(--t-stage-ink);
}
.scs-tick__price .amount,
.scs-tick__price bdi,
.scs-tick__price .woocommerce-Price-currencySymbol { color: var(--t-stage-ink) !important; font-family: var(--t-font-num) !important; }

/* — 29.6 Шкала float — */
.scs-float-scale { display: flex; flex-direction: column; gap: .25rem; width: 100%; }
.scs-float-track {
    position: relative;
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: visible;
    background: var(--t-panel-2);
}
.scs-float-zone { height: 100%; opacity: .55; }
.scs-float-zone:first-child { border-radius: 2px 0 0 2px; }
.scs-float-zone:last-child  { border-radius: 0 2px 2px 0; }
.scs-float-zone--fn { background: #4ADE80; }
.scs-float-zone--mw { background: #A3E635; }
.scs-float-zone--ft { background: #FBBF24; }
.scs-float-zone--ww { background: #FB923C; }
.scs-float-zone--bs { background: #EF4444; }
.scs-float-mark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--t-ink);
    box-shadow: 0 0 0 2px var(--t-panel);
}
.scs-item-data .scs-float-scale { flex: 1 1 100%; margin-top: .3rem; }

/* Широкий вариант — на странице товара, с подписями зон и значением */
.scs-float-scale--wide { gap: .45rem; margin: .9rem 0 0; }
.scs-float-scale--wide .scs-float-track { height: 8px; border-radius: 3px; }
.scs-float-scale--wide .scs-float-zone { position: relative; }
.scs-float-scale--wide .scs-float-zone::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + .3rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--t-font-num);
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--t-ink-faint);
}
.scs-float-scale--wide .scs-float-mark { top: -4px; height: 16px; width: 3px; }
.scs-float-value {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: 1.1rem;
    font-family: var(--t-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-fs-small);
    color: var(--t-ink);
}

/* — 29.7 Карточка каталога: полоса редкости и подсветка предмета — */
.product__item--style2 { position: relative; }
.scs-rar .product__img::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--scs-rar);
}
.scs-rar--consumer     { --scs-rar: #B0C3D9; }
.scs-rar--industrial   { --scs-rar: #5E98D9; }
.scs-rar--milspec      { --scs-rar: #4B69FF; }
.scs-rar--restricted   { --scs-rar: #8847FF; }
.scs-rar--classified   { --scs-rar: #D32CE6; }
.scs-rar--covert       { --scs-rar: #EB4B4B; }
.scs-rar--contraband   { --scs-rar: #E4AE39; }
.scs-rar--extraordinary{ --scs-rar: #E4AE39; }

.product__img {
    background:
        radial-gradient(90% 75% at 50% 100%, color-mix(in srgb, var(--scs-rar) 16%, transparent), transparent 72%),
        var(--t-panel-2) !important;
}
.product__item--style2:hover { border-color: color-mix(in srgb, var(--scs-rar) 55%, var(--t-rule)); }
.product__item--style2:hover .product__img--main { transform: scale(1.03) !important; transition: transform .25s ease; }
.product__img--main { transition: transform .25s ease; }

/* — 29.8 Появление при прокрутке — */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal="2"] { transition-delay: .07s; }
[data-reveal][data-reveal="3"] { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .scs-ticker__row { animation: none !important; }
    .scs-live::before { animation: none !important; }
    .product__item--style2:hover .product__img--main { transform: none !important; }
}

/* — 29.9 Страница товара: предмет на сцене — */
.single-product .woocommerce-product-gallery {
    background:
        radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--scs-rar) 20%, transparent), transparent 74%),
        var(--t-panel-2) !important;
    border-color: var(--t-rule) !important;
}
.single-product .woocommerce-product-gallery img { filter: drop-shadow(0 14px 26px rgba(12, 16, 19, .18)); }
.single-product .woocommerce-product-gallery img,
.single-product .scs-spot__stage img { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .5)); }
.product-about .price,
.product-about .price .amount,
.product-about .price bdi {
    font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem) !important;
    letter-spacing: -.025em;
}

/* Заголовок раздела крупнее и с надписью-рубрикатором */
.breadcumb-wrapper { padding-block: clamp(1.8rem, 4vw, 3rem) !important; }

/* ══════════════════════════════════════════════════════════════════════
   30. ПРАВКИ v2 ПО СНИМКАМ
   ══════════════════════════════════════════════════════════════════════ */

/* 30.1 Подсветка редкости заливала всю картинку цветом — карточка читалась
   как цветной градиент, а не как предмет. Оставляем слабый отблеск снизу.
   Подложка — «глубинная» плитка (рендеры рисованы под тёмный фон); на тёмном
   отблеск редкости чуть ярче, чем был на светлом. */
.product__img {
    background:
        radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--scs-rar) 20%, transparent), transparent 70%),
        radial-gradient(120% 90% at 50% 40%, var(--t-stage-2), var(--t-stage)) !important;
}

/* 30.2 Строка данных карточки: в один ряд не помещались износ, значение и
   шкала — подпись состояния переносилась по слогам. Раскладываем в две
   строки: сверху состояние и значение, снизу шкала во всю ширину. */
.scs-item-data { flex-wrap: wrap; row-gap: .1rem; }
.scs-item-data .scs-wear { flex: 1 1 auto; white-space: nowrap; }
.scs-item-data .scs-float { flex: 0 0 auto; }
.scs-item-data .scs-float-scale { flex: 1 1 100%; margin-top: .25rem; }

/* 30.3 Шкала износа: зоны — подсказка, а не светофор. Приглушаем, точное
   положение несёт отметка. */
.scs-float-track { background: var(--t-rule); }
.scs-float-zone { opacity: .34; }
.scs-float-scale--wide .scs-float-zone { opacity: .42; }

/* 30.4 Предмет на странице товара — на сцене, как в первом экране. Рендеры
   скинов сделаны для тёмного фона: на светлой панели они выглядели вяло. */
.single-product .woocommerce-product-gallery {
    background:
        radial-gradient(60% 65% at 50% 100%, color-mix(in srgb, var(--scs-rar) 26%, transparent), transparent 72%),
        linear-gradient(180deg, #0A0D10, #131A21) !important;
    border: 1px solid var(--t-stage-rule) !important;
    border-radius: calc(var(--t-radius) * 2) !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.single-product .woocommerce-product-gallery img {
    background: transparent !important;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55));
}

/* 30.5 Подписи зон на широкой шкале не должны налезать на значение */
.scs-float-scale--wide { margin-bottom: .2rem; }
.scs-float-value { margin-top: 1.25rem; }
.scs-float-value b { font-weight: 500; }

/* 30.6 Порядок в правой колонке товара. В разметке Roda он определяется
   приоритетами хуков и складывался так: две второстепенные кнопки, потом
   цена. Покупатель сначала смотрит цену и данные предмета, а «сделать
   предложение» и «следить за ценой» — второстепенные действия.
   Раскладываем колонку флексом и задаём порядок явно. */
.product-about {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.product-about > .d-flex,
.product-about .product-about__price     { order: 1; }
.product-about > .scs-rarity-chip        { order: 2; align-self: flex-start; margin-top: .55rem; }
.product-about > .scs-float-scale--wide  { order: 3; }
.product-about > .scs-spec               { order: 4; }
.product-about > form.cart               { order: 5; }
.product-about > .sc-offer-login-notice  { order: 6; margin: .9rem 0 0 !important; }
.product-about > .wpt-track-wrapper      { order: 7; margin: .5rem 0 0 !important; }
.product-about > .product-about__meta    { order: 8; margin-top: 1rem; }
.product-about > .product-about__divider { order: 9; }
.product-about > .product-about__footer  { order: 10; }
.product-about > .product-rating         { order: 0; }

/* 30.7 Сцена: между показателями и лентой оставался пустой провал */
.scs-stage__inner { padding-block: clamp(2rem, 5vw, 3.6rem) clamp(1.6rem, 3.5vw, 2.4rem); }
.scs-stage__stats { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }

/* 30.8 Карточки «избранного» на главной рисует плагин своей разметкой
   (`sc-float-card`) — данных о редкости там нет, поэтому отблеск даём
   в акценте, чтобы страница ощущалась целой. */
.sc-float-card {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-rule) !important;
    border-radius: var(--t-radius) !important;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sc-float-card:hover {
    border-color: var(--t-rule-strong) !important;
    transform: translateY(-2px);
    box-shadow: var(--t-shadow);
}
.sc-float-card img {
    /* «Глубинная» плитка под рендер — как в каталоге: предмет в тёмном кадре
       даже на светлой теме, отблеск — морским акцентом сцены. */
    background:
        radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--t-stage-accent) 12%, transparent), transparent 70%),
        radial-gradient(120% 90% at 50% 40%, var(--t-stage-2), var(--t-stage)) !important;
    transition: transform .25s ease;
}
.sc-float-card:hover img { transform: scale(1.03); }

/* 30.9 Кнопка «в корзину» на странице товара была сдвинута вправо скрытым
   полем количества внутри `.actions` */
.product-about form.cart .actions { padding-left: 0 !important; margin: 0 !important; }
.product-about form.cart .quantity.hidden { display: none !important; }
.product-about > form.cart { margin: 1rem 0 0 !important; }

/* 30.10 Единая мера страницы. Полоса заголовка, шапка и каталог идут по
   `.container` темы (1320 px), а мои блоки шли по своей мере и отъезжали
   от этой линии на 40–50 px. `width: min(100% - 2rem, 1320px)` держит
   и отступы на узких экранах. */
.scs-home {
    width: min(100% - 2rem, 1320px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* 30.11 Кнопка мобильного меню: у Roda за ней пунктирный круг-декорация */
.vs-menu-toggle::before,
.vs-menu-toggle::after { display: none !important; content: none !important; }
.vs-menu-toggle {
    background: var(--t-ink) !important;
    border: 0 !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-panel) !important;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

/* 30.12 Выход сцены во всю ширину считается через `50vw`, а `vw` включает
   полосу прокрутки — отсюда лишние 8 px и горизонтальная прокрутка всей
   страницы. `overflow-x: clip` это срезает и, в отличие от `hidden`,
   не ломает `position: sticky` у шапки. */
html, body { overflow-x: clip; }