/* ==== Critical CSS для product/top.html ==== */
/* Предотвращает FOUC (огромные элементы до загрузки inline-стилей) */

/* Размеры SVG-иконок в бейджах */
.product-badge-verified,
.product-badge-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Логотип бренда */
.product__top-brand-logo {
    display: block;
    max-height: 24px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}
a.product__top-brand-link {
    text-decoration: none;
}
.product__top-brand {
    position: relative;
}
.product__top-brand-link_logo {
    position: relative;
    display: inline-block;
}
.product__top-brand-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,30,30,0.85);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
    z-index: 20;
}
.product__top-brand-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(30,30,30,0.85);
}
.product__top-brand:hover .product__top-brand-tooltip,
.product__top-brand-link_logo:hover .product__top-brand-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Layout трёх колонок в шапке товара */
.product__top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px 14px;
}
.product__top-item_brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.product__top-item_badges {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    padding-left: 25%;
    pointer-events: none;
}
.product__top-item_badges > * {
    pointer-events: auto;
}
.product__top-item_right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Бейджи */
.product__top-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    color: #4A90D9;
    text-decoration: none;
}

/* Кнопка копирования ссылки */
.product__copy-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #8b8b8b;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.product__copy-link-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Share dropdown — скрыт до загрузки JS */
.product__top-share-drop {
    display: none;
}

/* Модалки скрыты по умолчанию */
.custom-modal,
.custom-modal-overlay,
.custom-modal-overlay-2 {
    display: none;
}

/* ==== Перекрытия insale.min.css ====
   Сам insale.min.css не правим: его затрёт обновление темы.
   user.css подключается после него (index.html), поэтому хватает
   одинаковой специфичности — без !important */

/* Скругление полей и кнопок: в теме было 15px, приводим к 8px —
   как у карточек и кнопок личного кабинета и оформления */
input[type="email"],
input[type="password"],
input[type="phone"],
input[type="search"],
input[type="tel"],
input[type="text"],
select,
textarea,
.button,
.wa-actions-wrapper .wa-button,
.wa-confirm-signup-button,
.wa-confirmation-code-input-submit,
.wa-dialog-footer .wa-button,
.wa-submit-button,
.wa-variant-actions .wa-button,
input[type="button"],
input[type="submit"] {
    border-radius: 8px;
}

/* Радиокнопки: тема рисует точку псевдоэлементом (серый #777, 7x7).
   Свой вид радио задаёт тема магазина (order.css.html) — заливка кружка
   цветом темы с белым кольцом внутри, и старая точка проступала поверх */
input[type="radio"]:before,
input[type="radio"]:checked:before {
    display: none;
}

/* ==== Карточка товара: табы (описание / характеристики / отзывы) ====
   Вместо серых «кнопок» с рамками — текстовые вкладки заглавными буквами,
   равномерно по всей ширине, одна тонкая линия под всем рядом, активная
   подчёркнута цветом темы. Селекторы те же, что в insale.min.css,
   user.css грузится позже — перекрывает без !important */
.tab__names .h-menu {
    border-left: none;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0;
    justify-content: flex-start;
    height: 56px;
}
/* отступ между вкладками через padding, а не gap: скрипт темы считает
   переполнение по innerWidth пунктов, gap он не видит */
.tab__names .h-menu__item {
    padding: 0 40px 0 0;
}
.tab__names .h-menu__item:first-child .h-menu__link {
    border-radius: 0;
}
.tab__names .h-menu__link {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #555 !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 4px;
    height: 56px;
    margin-bottom: -1px;
}
.tab__names .h-menu__link:hover {
    background: none;
    color: #222 !important;
}
.tab__names .h-menu__link_active-tab,
.tab__names .h-menu__link_active-tab:hover {
    background: none;
    border-bottom-color: var(--cheme-color);
    color: #222 !important;
}
.tab__names .h-menu__link_active-tab .h-menu__name {
    margin-bottom: 0;
}
.tab__names .tab__count {
    color: #222;
    font-weight: 700;
    margin-left: 4px;
}
/* кнопка «…» для невлезших вкладок — без рамки и подчёркивания */
.tab__names .h-menu__yet .h-menu__link {
    border-bottom-color: transparent;
    padding: 0 10px;
}
/* заголовки внутри вкладок: было 30px как у секций главной, делаем как подзаголовок */
.tab__block > .in-blocks__title {
    margin-bottom: 20px;
}
.tab__block > .in-blocks__title .in-blocks__title-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.tab__blocks {
    padding-top: 30px;
}

/* ==== Характеристики, режим «В два столбца значения» ====
   Вместо двух колонок — один список на 2/3 ширины: название серым слева,
   точечный лидер до значения, значение тёмным в фиксированной колонке */
.features-two-val {
    display: block;
    max-width: 760px;
}
.features-two-val__col {
    width: 100%;
}
.features-two-val .divider {
    font-size: 18px;
    font-weight: 700;
    margin: 30px 0 6px;
}
.features-two-val .divider:first-child {
    margin-top: 0;
}
.features-two-val__block {
    align-items: baseline;
    margin-top: 0;
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.4;
}
.features-two-val__name {
    width: 58%;
    padding-right: 12px;
}
.features-two-val__name span {
    color: #444;
    padding: 0 6px 0 0;
    background: #fff;
    position: relative;
    z-index: 1;
}
.features-two-val__name:before {
    border-bottom: 1px dotted #b8b8b8;
    bottom: 5px;
    left: 0;
}
.features-two-val__value {
    width: 42%;
    padding-left: 0;
    color: #222;
}
@media screen and (max-width: 767px) {
    .features-two-val__name {
        width: 55%;
    }
    .features-two-val__value {
        width: 45%;
    }
}
@media screen and (max-width: 767px) {
    .tab__names .h-menu {
        height: 44px;
    }
    .tab__names .h-menu__item {
        padding-right: 18px;
    }
    .tab__names .h-menu__link {
        font-size: 12px;
        height: 44px;
        padding: 0;
    }
}

/* ==== Компактный рейтинг в плитке и списке товаров (list-thumbs*.html) ====
   Как в блоках «Вам может понравиться» / «В наличии сейчас»: звезда, оценка,
   число оценок. Без оценок блок не выводится. */
.products__rating_compact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1;
    color: #222;
}
/* В плитке рейтинг вынесен из потока: иначе у карточек с оценками
   название уезжало вниз относительно соседних. Живёт в правом верхнем
   углу info-блока, в 20px-отступе между картинкой и названием */
.products__item-info { position: relative; }
.products__item-info-rating.products__rating_compact {
    position: absolute;
    right: 0;
    top: -18px;
    margin: 0;
}
.products__rating_compact .star { flex: none; margin: 0; }
.products__rating_compact b { font-weight: 600; }
.products__rating_compact .products__rating-count { color: #888; }