/* ===========================================================================
   torgo.md — оформление интерфейса по образцу flagman.ua
   ---------------------------------------------------------------------------
   Только внешняя настройка: ядро Modesy не тронуто, файл лежит вне пакета
   (/custom/theme/) и обновлением скрипта не затирается.

   ЦВЕТА НЕ МЕНЯЕМ. Акцент берётся из штатной переменной --mds-color-main,
   которую Modesy печатает в шапке из настройки «цвет сайта». Нейтральные
   тона — через var(--tg-*, запасной): токены объявлены только под
   :root[data-theme="dark"], поэтому одно правило работает в обеих темах.
   Здесь мы правим ФОРМУ: скругления, отступы, границы, состояния.

   Разметка опций (assets/js/variants.js, строится на клиенте):
     .title-option           — заголовок «Диаметр:» + .selected-option-name
     .option-base            — общий класс всех значений
     .option-radio-label     — кнопка-значение (внутри .option-radio-input)
     .option-swatch          — кружок цвета (.rounded-circle)
     .option-dropdown        — <select> при 7+ значениях
     .selected               — выбранное значение
     .disabled               — сочетание недоступно (напр. в XL нет белого)
   =========================================================================== */

:root {
    --tg-radius: 10px;
    --tg-radius-sm: 8px;
    --tg-control-h: 44px;
    --tg-line-soft: var(--tg-line, rgba(17, 24, 39, .10));
    --tg-ink: var(--tg-text, #1f2937);
    --tg-ink-dim: var(--tg-text-dim, #6b7280);
    --tg-card: var(--tg-surface, #fff);
    --tg-card-2: var(--tg-surface-2, #f6f7f9);
}

/* --- 1. Выбор варианта: значения кнопками --------------------------------- */

.title-option {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 10px;
    color: var(--tg-ink-dim);
}

.title-option .selected-option-name {
    font-weight: 700;
    color: var(--tg-ink);
}

.option-base.option-radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 40px;
    margin: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--tg-line-soft);
    border-radius: var(--tg-radius-sm);
    background-color: var(--tg-card);
    color: var(--tg-ink);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

/* сам radio не нужен — состояние показывает рамка */
.option-base .option-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.option-base.option-radio-label:hover {
    border-color: var(--mds-color-main);
}

.option-base.option-radio-label.selected {
    border-color: var(--mds-color-main);
    box-shadow: inset 0 0 0 1px var(--mds-color-main);
    background-color: color-mix(in srgb, var(--mds-color-main) 8%, transparent);
}

/* --- кружки цвета --- */
.option-base.option-swatch {
    width: 34px;
    height: 34px;
    cursor: pointer;
    border: 1px solid var(--tg-line-soft);
    box-shadow: 0 0 0 2px var(--tg-card) inset;
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.option-base.option-swatch:hover {
    transform: scale(1.06);
}

.option-base.option-swatch.selected {
    box-shadow: 0 0 0 2px var(--tg-card) inset, 0 0 0 2px var(--mds-color-main);
}

/* --- недоступные сочетания -------------------------------------------------
   Зависимость опций — штатная: Modesy сам вешает .disabled на значение,
   которого нет в паре с уже выбранным (variants.js:
   classList.toggle('disabled', !isAvailable)). Например при длине 100 м
   диаметр 0,30 мм гаснет, потому что такой мотки не существует.

   Поведение НЕ меняем — только показываем понятнее. Клик Modesy
   намеренно оставляет живым, и перехватывать его мы не будем: это была бы
   надстройка над штатным механизмом. */

.option-base.disabled {
    opacity: .38;
    text-decoration: line-through;
    border-style: dashed;
}

.option-base.option-swatch.disabled {
    text-decoration: none;
    position: relative;
}

.option-base.option-swatch.disabled::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, transparent 46%, var(--tg-ink) 46%, var(--tg-ink) 54%, transparent 54%);
}

/* выпадающий список опций — той же высоты, что кнопки */
.option-dropdown.custom-select,
.option-dropdown.custom-select-lg {
    height: var(--tg-control-h) !important;
    border-radius: var(--tg-radius-sm) !important;
    border-color: var(--tg-line-soft) !important;
    font-size: 14px;
    font-weight: 600;
}

/* --- 2. Кнопки ------------------------------------------------------------ */

.btn {
    border-radius: var(--tg-radius-sm);
    font-weight: 600;
}

.btn-md,
.btn-lg,
.btn-block {
    min-height: var(--tg-control-h);
    padding-left: 20px;
    padding-right: 20px;
}

.btn-block {
    border-radius: var(--tg-radius-sm);
}

.btn-block:hover {
    opacity: 1;
    filter: brightness(1.06);
}

/* «в избранное» и «сравнить» рядом с покупкой — ровные квадраты */
.product-details-buttons .btn,
.btn-add-to-wishlist,
.btn-add-to-compare {
    min-width: var(--tg-control-h);
}

/* --- 3. Поля ввода -------------------------------------------------------- */

.form-control,
.form-input,
.custom-select,
.input-group-text {
    border-radius: var(--tg-radius-sm) !important;
    border-color: var(--tg-line-soft) !important;
}

.form-control,
.form-input,
.custom-select {
    min-height: var(--tg-control-h);
}

.form-control:focus,
.form-input:focus,
.custom-select:focus {
    border-color: var(--mds-color-main) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mds-color-main) 16%, transparent) !important;
}

/* поле с приставкой (валюта) — скругления только по краям группы */
.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-prepend + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* --- 4. Карточки и секции ------------------------------------------------- */

.product-card,
.ticket-container,
.order-list-item,
.product-filters-container,
.shopping-cart .right,
.sidebar-tabs-content,
.auth-box {
    border-radius: var(--tg-radius);
}

.product-card {
    border: 1px solid var(--tg-line-soft);
    transition: box-shadow .18s ease-in-out, transform .18s ease-in-out;
}

.product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.section-header .title,
.section .title {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* --- 5. Характеристики: чередование строк вместо сетки -------------------- */

.product-description .table td,
.table-custom td {
    border-top-color: var(--tg-line-soft) !important;
}

.product-description .table tbody tr:nth-child(odd) td,
.table-custom tbody tr:nth-child(odd) td {
    background-color: var(--tg-card-2) !important;
}

/* --- 6. Хлебные крошки и вкладки ------------------------------------------ */

.nav-breadcrumb .breadcrumb {
    padding-left: 0;
    font-size: 12.5px;
}

.product-tabs .nav-link,
.nav-tabs .nav-link {
    border-radius: var(--tg-radius-sm) var(--tg-radius-sm) 0 0;
    font-weight: 600;
}

/* --- 7. Значки и плашки --------------------------------------------------- */

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.product-card-badge,
.badge-instant-download {
    border-radius: 999px;
}

/* --- 8. Мелочи ------------------------------------------------------------ */

.pagination .page-link {
    border-radius: var(--tg-radius-sm);
    margin: 0 3px;
    border-color: var(--tg-line-soft);
}

.dropdown-menu {
    border-radius: var(--tg-radius);
    border-color: var(--tg-line-soft);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
}

.modal-content {
    border-radius: var(--tg-radius);
    border: 0;
}

/* количество товара */
.number-spinner input,
.number-spinner button {
    border-color: var(--tg-line-soft) !important;
}

.number-spinner {
    border-radius: var(--tg-radius-sm);
    overflow: hidden;
}

/* --- 9. Карточка товара: кнопка покупки и плашки ---------------------------
   Штатно кнопка корзины круглая, белая и появляется ТОЛЬКО при наведении
   (opacity:0; visibility:hidden). На тачскрине наведения нет — на телефоне
   её фактически не видно. Делаем постоянно видимой и акцентной.

   Перенести её из фото в строку цены одними стилями нельзя: у
   .product-image-container стоит overflow:hidden, кнопку обрежет. Поэтому
   ставим в правый нижний угол фото — вплотную к цене, как на образце. */

/* Столбец в правом нижнем углу фото. column-reverse потому, что в разметке
   корзина идёт первой, а нужна она снизу: корзина внизу, сердечко над ней. */
.product-card .product-actions-overlay {
    top: auto;
    bottom: 10px;
    right: 10px;
    flex-direction: column-reverse;
    gap: 8px;
}

/* Корзина акцентная. display:flex обязателен — на узких экранах Modesy
   прячет её правилом .product-card .cart-btn{display:none!important}.
   Цвет с !important: в тёмной теме есть более раннее правило на .action-btn
   с !important, оно перебило бы акцент независимо от порядка файлов. */
.product-card .action-btn.cart-btn {
    display: flex !important;
    width: 40px;
    height: 40px;
    border-radius: var(--tg-radius-sm);
    background-color: var(--mds-color-main) !important;
    border-color: var(--mds-color-main) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mds-color-main) 35%, transparent);
}

.product-card .action-btn.cart-btn i {
    color: #fff;
}

/* Обе кнопки выезжают при наведении на карточку — как задумано в теме.
   Отдельно поднимаем сердечко: штатно оно показывается по наведению уже
   на самой кнопке, а не на карточке. */
.product-card:hover .action-btn.cart-btn,
.product-card:hover .action-btn.wishlist-btn {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.product-card .action-btn.cart-btn:hover {
    filter: brightness(1.08);
}

/* Сердечко второстепенное: на мыши — при наведении, на тачскрине — всегда,
   иначе на телефоне до него не добраться.
   Штатно на узких экранах ему задано position:absolute; top:-5px; right:-2px
   внутри контейнера кнопок — из-за этого оно уезжало из ряда. Возвращаем в
   поток, чтобы обе кнопки стояли рядом в правом нижнем углу фото. */
.product-card .action-btn.wishlist-btn {
    border-radius: var(--tg-radius-sm);
    width: 40px;
    height: 40px;
    position: static;
    top: auto;
    right: auto;
}

/* На тачскрине наведения нет — показываем обе постоянно, иначе на телефоне
   до них не добраться вообще. */
@media (hover: none) {
    .product-card .action-btn.cart-btn,
    .product-card .action-btn.wishlist-btn {
        opacity: .95 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* на узких экранах кнопки чуть компактнее */
@media (max-width: 767px) {
    .product-card .action-btn.cart-btn,
    .product-card .action-btn.wishlist-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .product-card .product-actions-overlay {
        bottom: 8px;
        right: 8px;
        gap: 6px;
    }
}

/* --- плашки: скруглённые, с отступом от края ------------------------------ */

.product-card .product-card-badge {
    top: 10px;
    left: 10px;
    height: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* скидку оставляем красной — это смысловой сигнал, а не цвет темы */
.product-card .product-card-badge-red {
    background-color: #e0342f;
}

/* «Рекомендуем» переводим на наш акцент вместо штатного зелёного */
.product-card .product-card-badge-green {
    background-color: var(--mds-color-main);
}

/* --- цена: новая акцентом, старая приглушённой ---------------------------- */

.product-card .price-green,
.product-price .price-green {
    color: var(--mds-color-main) !important;
    font-weight: 700;
}

.product-card .discount-original-price,
.product-price .discount-original-price {
    opacity: .65;
    font-weight: 400;
}

/* --- Заголовки внутри текста ----------------------------------------------
   У Modesy нет ни одного правила для h2/h3 внутри содержимого статей —
   они падают на умолчания Bootstrap (2rem, вес 500) и выглядят тонкими и
   несоразмерно крупными рядом с обычным .page-title (26px, вес 600).
   Приводим к одному семейству: тот же вес и цвет, ступенчатые размеры.
   Затрагиваем только области с текстом, чтобы не задеть вёрстку витрины. */

.article-content h2,
.post-text h2,
.page-text-content h2,
.blog-content h2,
.product-description h2 {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    margin: 30px 0 12px;
    color: var(--tg-ink);
}

.article-content h3,
.post-text h3,
.page-text-content h3,
.blog-content h3,
.product-description h3 {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    margin: 24px 0 10px;
    color: var(--tg-ink);
}

/* первый заголовок не должен отрываться от начала статьи */
.article-content h2:first-child,
.post-text h2:first-child,
.page-text-content h2:first-child {
    margin-top: 0;
}

/* абзацы и списки в тексте */
.article-content p,
.post-text p,
.page-text-content p {
    line-height: 1.65;
    margin-bottom: 14px;
}

.article-content ul,
.article-content ol,
.post-text ul,
.post-text ol,
.page-text-content ul,
.page-text-content ol {
    margin-bottom: 16px;
    padding-left: 22px;
}

.article-content li,
.post-text li,
.page-text-content li {
    line-height: 1.65;
    margin-bottom: 6px;
}

/* таблицы внутри статей */
.article-content table,
.post-text table,
.page-text-content table {
    width: 100%;
    margin: 18px 0;
}

.article-content table th,
.post-text table th,
.page-text-content table th {
    font-weight: 600;
}

/* места, где владельцу нужно подставить свои данные */
.article-content mark,
.page-text-content mark,
.post-text mark {
    background-color: #fff3cd;
    color: #6b5200;
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- «Поделиться»: три мессенджера, компактными пилюлями ------------------
   Значки заменяет custom/theme/share.js на официальные бренд-иконки —
   те, что в шрифте Modesy, нарисованы неровно и в разном стиле.

   Спорить приходится со штатными правилами: у .product-share ul стоит
   float:left, у li — margin-right:12px, а у ссылок и кнопок
   color:#7c818b !important, из-за которого значки оставались серыми.
   Поэтому здесь !important там, где он есть у Modesy.

   Цвета фирменные у мессенджеров, к палитре сайта отношения не имеют.

   В блоге и в статьях тот же блок называется .post-share и выводится
   плоским списком ссылок — share.js приводит его к разметке карточки
   товара, поэтому оформление здесь общее для обоих. */

.product-share ul,
.post-share ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
    float: none !important;
    list-style: none;
}

.product-share ul li,
.post-share ul li {
    display: block !important;
    margin: 0 !important;
}

.product-share ul li > a,
.product-share ul li > button,
.post-share ul li > a,
.post-share ul li > button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #fff !important;
    background-color: #8a8f98;
    transition: filter .15s ease-in-out;
}

.product-share ul li > a:hover,
.product-share ul li > button:hover,
.post-share ul li > a:hover,
.post-share ul li > button:hover {
    filter: brightness(1.08);
}

.product-share ul li svg,
.post-share ul li svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tg-share-whatsapp > a,
.tg-share-whatsapp > button { background-color: #25d366 !important; }
.tg-share-viber > a         { background-color: #7360f2 !important; }
.tg-share-telegram > a,
.tg-share-telegram > button { background-color: #29a9eb !important; }
.tg-share-more > button     { background-color: #6b7280 !important; }

/* подпись «Поделиться» рядом с кнопками, а не отдельной строкой сверху */
.product-share,
.post-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.post-share > .title {
    margin: 0;
    font-size: 14px;
    line-height: 1;
}

@media (max-width: 400px) {
    .product-share ul li > a,
    .product-share ul li > button,
    .post-share ul li > a,
    .post-share ul li > button {
        padding: 0 8px;
        font-size: 11px !important;
    }
}

/* --- Плашка местоположения на карточке товара ------------------------------
   Ограничение ширины с многоточием у Modesy задано ТОЛЬКО для плашки в
   верхней панели (.top-bar .btn-modal-location). У такой же плашки на
   карточке товара его нет, а .product-delivery-est .item — флекс, где у
   заголовка стоит flex-shrink:0. Поэтому «Рыбницкий район, Приднестровье»
   не ужимался и выталкивал страницу за край экрана.
   Разрешаем перенос и прижимаем содержимое влево. */

.product-delivery-est .item {
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: flex-start;
}

.product-delivery-est .item > * {
    min-width: 0;
}

.btn-modal-location-product {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
}

/* блок «Поделиться» тоже прижимаем влево и разрешаем перенос */
.product-delivery-est .display-flex.flex-wrap {
    justify-content: flex-start;
    max-width: 100%;
}

/* «Расчётная доставка» и срок должны оставаться одной строкой — переносится
   только плашка района. Подпись лежит внутри .title, а срок — в
   span.result-delivery; прямых span у .item нет, поэтому целимся точно. */
.product-delivery-est .item > .title,
.product-delivery-est .result-delivery {
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* Между .item и его содержимым у ядра стоит лишняя обёртка
       .display-flex.flex-wrap. Она переносится целиком, унося срок вниз
       вместе с плашкой — отсюда три строки. display:contents растворяет
       её, срок встаёт рядом с подписью, а вниз уходит только плашка.
       !important обязателен: у ядра .display-flex{display:flex!important}. */
    .product-delivery-est .item > .display-flex {
        display: contents !important;
    }

    /* на узком экране плашка уходит на свою строку целиком */
    .product-delivery-est .item .btn-modal-location-product {
        margin-left: 0;
        margin-top: 4px;
        flex-basis: 100%;
    }

    .product-share {
        flex-wrap: wrap;
    }
}

/* --- подсказки (tooltip) --------------------------------------------------
   У Bootstrap .tooltip-inner чёрный фон и белый текст, но Modesy отдельно
   задаёт .tooltip{color:#222}, а наше ковровое осветление текста в тёмной
   теме перебивает цвет внутри. Итог — белым по светлому. Задаём фон и текст
   явно, одинаково в обеих темах, чтобы не зависеть от цепочки наследования. */

.tooltip.show {
    opacity: 1;
}

.tooltip,
.tooltip-inner {
    color: #fff !important;
}

.tooltip-inner {
    background-color: rgba(17, 24, 39, .94) !important;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.tooltip .arrow::before {
    border-top-color: rgba(17, 24, 39, .94) !important;
    border-bottom-color: rgba(17, 24, 39, .94) !important;
    border-left-color: rgba(17, 24, 39, .94) !important;
    border-right-color: rgba(17, 24, 39, .94) !important;
}

/* На тачскрине подсказки отключаем совсем.
   Bootstrap показывает их по наведению, а тап на телефоне засчитывается
   как наведение — но события «курсор ушёл» не происходит, и подсказка
   залипает навсегда. При z-index 1070 она перекрывает даже шапку.
   Пользы от неё там нет: наведения не существует, а назначение кнопок
   понятно по значку, и у каждой есть aria-label для доступности. */
@media (hover: none) {
    .tooltip,
    .tooltip.show {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* --- 10. Горизонтальный выезд на узких экранах -----------------------------
   Вкладка «Доставка и местоположение»: у таблицы колонки заданы в
   процентах, но внутри лежит select2, а он вычисляет ширину контейнера по
   содержимому в момент инициализации — список при этом свёрнут в
   аккордеоне. При длинном значении («Григориопольский район») контейнер
   получается шире экрана и тянет за собой всю страницу.
   Ограничиваем ширину и разрешаем таблице переносить слова. */

.select2-container {
    max-width: 100% !important;
}

.table-product-shipping,
.table-product-specification {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

.table-product-shipping td,
.table-product-specification td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tab-content-inner,
.collapse-description-content {
    max-width: 100%;
}

/* если что-то всё же шире — пусть прокручивается внутри себя, а не страницей */
.tab-content-inner {
    overflow-x: auto;
}

@media (max-width: 575px) {
    :root {
        --tg-control-h: 42px;
    }

    .option-base.option-radio-label {
        min-width: 46px;
        min-height: 38px;
        padding: 7px 12px;
    }

    /* штатный отступ 20px слева на узком экране съедает половину колонки */
    .table-product-shipping td,
    .table-product-shipping th {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .table-product-shipping .td-left {
        width: 42%;
    }

    .table-product-shipping .td-right {
        width: 58%;
    }
}


/* --- «Лови свой трофей»: подбор товара по виду рыбы ------------------------
   Вёрстка лежит в рекламной области index_1 (ad_code_desktop и
   ad_code_mobile выводятся как есть — штатная точка для своей разметки).
   Modesy печатает размер области инлайновым стилем .bn-ds-5{width:800px},
   поэтому ширину перебиваем: правило специфичнее и с !important. */

.bn-inner:has(.tg-trophy),
.bn-container:has(.tg-trophy) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.tg-trophy {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    margin: 6px 0 26px;
    padding: 22px;
    border-radius: var(--tg-radius);
    background-color: var(--tg-card-2);
}

.tg-trophy-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tg-trophy-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tg-ink);
}

.tg-trophy-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--mds-color-main) !important;
}

.tg-trophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.tg-fish {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 104px;
    padding: 14px 16px;
    border-radius: var(--tg-radius-sm);
    background-color: var(--tg-card);
    border: 1px solid var(--tg-line-soft);
    color: var(--tg-ink) !important;
    transition: box-shadow .18s ease-in-out, transform .18s ease-in-out;
}

.tg-fish:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

.tg-fish-name {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.tg-fish-go {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 14px;
    border-radius: 7px;
    background-color: var(--mds-color-main);
    color: #fff;
}

.tg-fish-go svg { width: 15px; height: 15px; }

/* Рыба уходит в правый нижний угол и подрезается рамкой карточки.
   Картинки с прозрачным фоном, поэтому одинаково ложатся на светлую
   и на тёмную тему — подложка не нужна. */
/* Размер задаём по высоте, а не по ширине: рыбы разной формы, и при
   равной ширине лещ выглядел бы вдвое крупнее плотвы. */
.tg-fish-art {
    position: absolute;
    right: -8px;
    bottom: 2px;
    height: 64px;
    pointer-events: none;
}

.tg-fish-art img {
    height: 100%;
    width: auto;
    display: block;
}

/* На тёмном фоне светлая чешуя сливается с карточкой — чуть притеняем. */
:root[data-theme="dark"] .tg-fish-art img {
    filter: brightness(.88) saturate(.9);
}

@media (max-width: 767px) {
    .tg-trophy { padding: 16px; }
    .tg-trophy-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tg-fish { min-height: 92px; padding: 12px 14px; }
    .tg-fish-art { height: 48px; }
}

/* --- цветные полосы секций на главной --------------------------------------
   Modesy не даёт секциям уникальных имён: и «Специальные предложения», и
   «Каталог по брендам» приходят одинаковыми <div class="col-12 section">.
   Различаем их структурно — в первой есть карточки товара, во второй нет.
   Шаблоны ядра не тронуты.

   Оттенок собираем из акцента тенанта через color-mix: полоса подстроится
   и под смену акцента в настройках, и под тёмную тему, потому что смешивание
   идёт с прозрачностью, а не с фиксированным белым.

   Полоса тянется во всю ширину окна, хотя лежит внутри .container. Ширину
   не растягиваем: 100vw считается вместе с полосой прокрутки и дал бы
   горизонтальный скролл на десктопе. Вместо этого краску выносит наружу
   box-shadow с огромным разбегом, а clip-path обрезает её по вертикали —
   на раскладку это не влияет вовсе, поэтому и прокрутки не появляется. */

.index-wrapper .col-12.section:not([class*="section-"]) {
    --tg-band: var(--tg-card-2);          /* запасной вариант без color-mix */
    background-color: var(--tg-band);
    box-shadow: 0 0 0 100vmax var(--tg-band);
    clip-path: inset(0 -100vmax);
    border-radius: 0;
    padding: 28px 15px;                   /* низ и верх одинаковые */
    margin-bottom: 30px;
}

@supports (background-color: color-mix(in srgb, red 10%, transparent)) {
    /* «Специальные предложения» — акцент в полную силу: это витрина скидок */
    .index-wrapper .col-12.section:not([class*="section-"]):has(.product-card) {
        --tg-band: color-mix(in srgb, var(--mds-color-main) 38%, transparent);
    }

    /* «Каталог по брендам» — тот же цвет, но заметно тише, чтобы не спорил */
    .index-wrapper .col-12.section:not([class*="section-"]):not(:has(.product-card)) {
        --tg-band: color-mix(in srgb, var(--mds-color-main) 16%, transparent);
    }
}

/* На полосе карточки товара должны оставаться белыми — иначе оттенок
   просвечивает сквозь них и товар выглядит выцветшим. */
.index-wrapper .col-12.section:not([class*="section-"]) .product-card {
    background-color: var(--tg-card);
}

@media (max-width: 767px) {
    .index-wrapper .col-12.section:not([class*="section-"]) {
        padding: 20px 15px;
        margin-bottom: 22px;
    }
}

/* --- подписи на карточках категорий ---------------------------------------
   У Modesy подпись обрезается в одну строку: на .caption висит бутстраповский
   .text-truncate (white-space:nowrap + многоточие). На телефоне колонка узкая,
   и «Инвентарь и снаряжение» превращалось в «Инвентарь и снаря».

   Разрешаем перенос, но не даём подписи расти бесконечно: обрезаем ровно на
   второй строке. Многоточие с nowrap не работает, поэтому его берёт на себя
   line-clamp у внутреннего span. */

.featured-categories .card .caption.text-truncate {
    white-space: normal;
    left: 0;
    right: 0;
    width: auto;
    padding: 8px 16px;
}

.featured-categories .card .caption span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

@media (max-width: 767px) {
    /* на узкой колонке 20px по бокам съедали почти два слова */
    .featured-categories .card .caption.text-truncate {
        padding: 7px 12px;
    }

    .featured-categories .card .caption span {
        font-size: 14px;
    }
}