/*
Theme Name:     MyShop Child
Theme URI:
Description:    Дочерняя тема Blocksy: визуал магазина дверей MyShop. Дизайн-система «Тихая архитектура».
Author:         Me
Author URI:
Template:       blocksy
Version:        0.2.0
*/

/* -------------------------------------------------------------------------
 * Дизайн-токены «Тихая архитектура»
 * ---------------------------------------------------------------------- */
:root {
    --msb-bg: #F5F3EE;
    --msb-surface: #EEECE6;
    --msb-text: #25282A;
    /* В дизайн-системе #71736F, но на #F5F3EE он даёт 4.32:1 (< AA).
       #666862 сохраняет оттенок и даёт 5.09:1 на фоне, 4.78:1 на поверхности. */
    --msb-muted: #666862;
    --msb-accent: #176B6B;
    --msb-accent-hover: #105454;
    --msb-line: #DEDBD4;
    --msb-focus: #D39A43;

    --msb-radius: 8px;
    --msb-radius-sm: 4px;
    --msb-gap: 16px;
    --msb-gap-lg: 24px;

    --msb-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Гарнитуры прототипа: serif — крупные заголовки, sans — интерфейс */
    --msb-serif: Georgia, "Times New Roman", serif;
    --msb-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
 * База
 * ---------------------------------------------------------------------- */
body {
    background-color: var(--msb-bg);
    color: var(--msb-text);
    font-family: var(--msb-font);
}

a {
    color: var(--msb-accent);
}

a:hover,
a:focus {
    color: var(--msb-accent-hover);
}

:focus-visible {
    outline: 2px solid var(--msb-focus);
    outline-offset: 2px;
}

/* Служебный класс: скрыто визуально, доступно скринридерам */
.msb-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   Карточки товара в каталоге, «Похожих» и апсейлах: дверь видна целиком.

   Разметка Blocksy: figure > a.ct-media-container > img. Фото приходило
   квадратным кропом 300×300 и растягивалось в рамку 4:3 — дверь обрезалась
   сверху и снизу. Теперь кадр пропорциональный (600 px по ширине, без кропа),
   контейнер держит вертикальный формат 3:4, изображение вписывается целиком.
   ---------------------------------------------------------------------- */
.products .product a.ct-media-container {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4 !important;
    background: #fff;
    overflow: hidden;
}

.products .product a.ct-media-container img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center;
}