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

/* Размеры SVG-иконок в бейджах. Дублируются в product/top.html — здесь
   ради critical CSS, чтобы значки не прыгали до загрузки inline-стилей */
.product-badge-verified,
.product-badge-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.product-badge-ico {
    width: 19px;
    height: 19px;
}

/* Логотип бренда */
.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;
    /* Прижаты к рейтингу. Было 25% — бейджи висели посреди строки, и в
       быстром просмотре это особенно бросалось в глаза: там ширина другая.
       Значение должно совпадать со стилями в product/top.html */
    padding-left: 0;
    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.html): здесь он
   продублирован ради critical CSS, и хекс мимо переменной дал бы вспышку
   старого цвета до загрузки inline-стилей */
.product__top-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    color: var(--pt-badge);
    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;
}
.products__rating_compact .star { flex: none; margin: 0; }
.products__rating_compact b { font-weight: 600; }
.products__rating_compact .products__rating-count { color: #888; }

/* ============ Плитка товара (list-thumbs.html) ============
   Каталог, главная, лента «Вам может понравиться», поиск. Порядок в
   карточке: фото — цена — название — рейтинг с артикулом — наличие —
   кнопка. Шрифты и цвета — темы, меняется только раскладка. */

/* --- Иконки поверх фото ---
   Избранное видно всегда, сравнение и быстрый просмотр появляются под ним
   по наведению (штатное правило темы .products__item:hover .view-fav-com) */
.products__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
}
.view-fav-com.products__acts {
    top: 50px;
    right: 12px;
}
/* Кружок белый и полупрозрачный, а не «в рамочку», как у темы: иконки
   стоят поверх фотографии и на светлом товаре иначе теряются. Цвет
   заметно темнее прежнего — светло-серые значки на белом не читались */
.products__fav .view-fav-com__item,
.products__acts .view-fav-com__item {
    background: rgba(255, 255, 255, 0.88);
    border-color: transparent;
    color: #6e6e6e;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
}
.products__fav .view-fav-com__item:hover,
.products__acts .view-fav-com__item:hover {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    color: var(--cheme-color);
}
/* Активное состояние: у темы им красится фон кружка, у нас кружок белый —
   значит цвет из настроек уходит в саму иконку. Переменные те же, что
   правит витрина: --c-c-l-p-f-f «Фон активного избранного»,
   --c-c-l-p-c-f «Фон активного сравнения» */
.products__acts .view-fav-com__item.p-compare_active {
    background: rgba(255, 255, 255, 0.88);
    border-color: transparent;
    color: var(--c-c-l-p-c-f);
}

/* Сердце: контур — пустое, в избранном — залито цветом из настроек */
.products__fav-icon {
    fill: none;
    stroke: currentColor;
}
.p-favorit_active .products__fav-icon {
    fill: var(--c-c-l-p-f-f);
    stroke: var(--c-c-l-p-f-f);
}
.products__fav .view-fav-com__item.p-favorit_active,
.products__fav .view-fav-com__item.p-favorit_active:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: transparent;
    box-shadow: none;
    color: var(--c-c-l-p-f-f);
}

/* --- Точки-переключатели фото ---
   Зоны .p-tile__items растянуты по всей картинке: курсор влево-вправо
   листает кадры (product/tile.js.html). Штатные полоски внизу зон убраны —
   они делили ширину картинки поровну и расползались по всей плитке; точки
   выводятся отдельным рядом по центру и видны без наведения */
.products__item .p-tile__item:after { display: none; }
.p-tile__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 12px;
    margin-top: 6px;
}
.p-tile__dot {
    background-color: #dcdcdc;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    transition: background-color 0.2s ease-out;
}
.p-tile__dot_active { background-color: #9a9a9a; }

/* --- Ряды карточки одной высоты ---
   .products__item в строке растягивается до высоты самой высокой плитки, а
   justify-content:space-between сбрасывает лишнее в промежуток над низом
   карточки — из-за этого у соседей разъезжались цены и кнопки. Поэтому у
   всех блоков переменной высоты (цена со скидкой, название, рейтинг с
   артикулом, наличие) высота задана заранее. */
.products__item .products__price {
    align-content: flex-start;
    margin-top: 14px;
    min-height: 55px; /* цена + строка «−N% / выгода», если скидка есть */
}

/* --- Название: максимум три строки --- */
.products__item-link { display: block; text-decoration: none; }
.products__item-link .products__item-info { margin-top: 8px; }
.products__item-link .products__item-info-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    height: 4.05em;
    margin-top: 0;
}

/* --- Рейтинг слева, артикул справа --- */
.products__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    height: 18px;
}
.products__meta .products__rating_compact {
    margin: 0;
    justify-content: flex-start;
}
.products__art {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8c8c8c;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    max-width: 55%;
    position: relative;
    transition: color 0.2s ease-out;
    -webkit-user-select: none;
    user-select: none;
}
.products__art:hover { color: #222; }
.products__art .products__code-v {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.products__art-icon { flex: none; }
/* Подтверждение копирования — вместо всплывающих уведомлений темы */
.products__art_copied:after {
    background: #222;
    border-radius: 4px;
    color: #fff;
    content: "Скопировано";
    font-size: 11px;
    line-height: 1;
    padding: 5px 7px;
    position: absolute;
    right: 0;
    bottom: calc(100% + 5px);
    white-space: nowrap;
    z-index: 5;
}

/* --- Наличие: магазин зелёным, поставщик серым ---
   Высота под две строки: у одного товара есть и магазин, и поставщик, у
   соседнего — только поставщик, и без запаса они разъезжаются */
.products__stock {
    font-size: 13px;
    line-height: 1.35;
    margin-top: 10px;
    height: 36px;
    overflow: hidden;
}
.products__stock .products__available { margin-top: 0; }
.products__stock-shop { color: #43c16d; }
.products__stock-sup { color: #8c8c8c; }

/* --- Кнопка «В корзину» — левая половина карточки --- */
.products__item .products__cart-flex {
    justify-content: flex-start;
    margin-top: 14px;
}
.products__item .products__cart-flex .products__button {
    flex: 0 0 50%;
    width: 50%;
}
/* Штатный эффект наведения темы (белая полоса 30px со стрелкой «›»
   въезжает справа, текст уезжает влево сменой padding, плюс тяжёлая тень)
   рассчитан на кнопку во всю ширину. На половинной полоса занимает
   четверть кнопки и надпись дёргается — глушим, вместо этого кнопка просто
   темнеет. `!important` здесь по делу: правило темы живёт в
   минифицированном `insale.min.css`, и подбирать специфичность под каждое
   его обновление дороже, чем один раз перебить.
   `:not(.in-loading)` обязателен: на том же `:after` висит заливка кнопки
   во время отправки формы, без неё пропадёт индикатор «добавляю» */
.products__item .products__cart-flex .products__button:not(.in-loading):not(:disabled):after {
    content: none !important;
}
.products__item .products__cart-flex .products__button:hover:not(.in-loading):not(:disabled) {
    /* базовый .products__button у темы — padding: 0 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none;
    filter: brightness(0.93);
}
@media screen and (max-width: 767px) {
    .products__item .products__cart-flex .products__button {
        flex: 1 1 auto;
        width: 100%;
    }
    .products__art { max-width: 100%; }
}

/* ==== Шапка: пункты категорий как на маркетплейсах ====
   Штатно тема даёт uppercase и вес --font-weight; делаем обычный регистр,
   средний вес и чуть крупнее (как у ВсеИнструменты) */
.h-menu_catalog .h-menu__link {
    text-transform: none;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
}
.h-menu_catalog .h-menu__item { padding-left: 26px; }

/* Ссылка «Товары в магазине» в шапке — тот же вид, что у категорий */
.m-instock__link {
    text-transform: none;
    font-weight: 500;
    font-size: 15px;
}