/* ─────────────────────────────────────────────────────────────────────
   «Модели {бренд} в вашем размере» — /razmery/{brand}/, сразу под первой
   таблицей размеров (theme/inc/size-shop-block.php, подключается только
   на page-templates/page-size-guide.php — functions.php, wp_enqueue_scripts).

   Карточки товара — чужой стиль не придумываем: разметка .items_card та
   же, что в каталоге (archive-full_size.php) и в «Похожих товарах» на
   странице товара (single-product.php), со всеми базовыми правилами уже
   из style.css. Здесь только: (1) сетка-обёртка под нужную раскладку
   (моб. 2×2, десктоп в ряд) и (2) квадратная рамка фото — тот же приём,
   что у «Похожих товаров» (.same_products .items .items_card img в
   style.css), потому что по умолчанию .items_card img квадрат не держит.

   Мобильный первым: базовые правила — для 390px, расширение на десктоп —
   через min-width.
   ───────────────────────────────────────────────────────────────────── */

/* ПРЕВЬЮ. Блок в HTML есть всегда (страница отдаётся из общего fastcgi-кэша
   на 30 минут — показывать по query-параметру нельзя, его увидели бы либо
   все, либо никто). Видимость решает только класс:
     html.mtf-preview   — тот же переключатель, что у mu-plugins/mtf-mobile-v2.php
                           (?mtf_preview=1 в любом месте сайта, localStorage);
     .mtf-size-shop.is-live — ставится из константы MTF_SIZE_SHOP_LIVE.
   Включить всем: MTF_SIZE_SHOP_LIVE => true в inc/size-shop-block.php,
   этот файл трогать не нужно. */
.mtf-size-shop { display: none; }
html.mtf-preview .mtf-size-shop,
.mtf-size-shop.is-live { display: block; }

.mtf-size-shop__lead {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: -6px 0 16px;
}

/* Ряд EU-чипов. Горизонтальная прокрутка — у Puma/Nike/Adidas в наличии
   бывает 20+ размеров, в 390px влезает штук шесть. Маска по правому краю —
   тот же приём, что у мобильной .mtf-filter-chips в style.css, — подсказывает,
   что ряд продолжается, без видимого скроллбара. */
.mtf-size-shop__sizes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    margin: 0 0 20px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
}
.mtf-size-shop__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
@media (hover: hover) {
    .mtf-size-shop__chip:hover { border-color: #F15A29; color: #F15A29; text-decoration: none; }
}
.mtf-size-shop__chip:focus-visible {
    outline: 2px solid #F15A29;
    outline-offset: 2px;
}

/* 4 карточки модели — мобильный 2×2, с min-width:601px в ряд. */
.mtf-size-shop__cards {
    display: grid;
    /* minmax(0, 1fr), а не 1fr: у 1fr минимум — ширина содержимого, и
       картинка карточки распирала колонки за край блока (01.10.2026, 1512px:
       4 × 272px в сетке 804px). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
/* От 1440px у .items_card в style.css фиксированные 272px (сетка каталога) —
   внутри блока карточка берёт ширину колонки. */
.mtf-size-shop__cards > .items_card { width: auto; min-width: 0; }
.mtf-size-shop__cards .items_card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: var(--mtf-ph-pad, 2.4%) !important;
    box-sizing: border-box !important;
}
@media (min-width: 601px) {
    .mtf-size-shop__cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}