/* =========================================================================
   product.css — общий шаблон карточки товара и страница характеристик.

   Подключается только этими двумя страницами (секция Styles в _Layout):
   на главной и в категории ни один из этих блоков не встречается.

   Порядок разделов совпадает с порядком блоков на странице:
   1 — липкая вторая навигация, 2 — первый экран (галерея + сведения),
   3 — переключатели цвета и памяти, 4 — выжимка характеристик,
   5 — блок заявки, 6 — похожие модели, 7 — страница характеристик.
   ========================================================================= */

/* ---------- 1. Липкая вторая навигация ----------------------------------- */

/*
   Взята со старого шаблона эталона (v4): название модели слева, вкладки
   и кнопка действия справа, полупрозрачный белый фон, липкость сверху.

   top: var(--header-h) — панель встаёт под шапкой сайта, а не поверх неё.
   Тот же приём, что у панели серий на странице категории.
*/
.product-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
}

/*
   Панель из двух частей: слева прокручиваемая строка (название и вкладки),
   справа кнопка заявки, которая не прокручивается никогда.

   До этапа 8 кнопка жила внутри прокручиваемой строки, и на планшете
   и телефоне уезжала за правый край: единственное действие страницы было
   спрятано, пока панель не пролистаешь пальцем. Замер на 768px — кнопка
   начиналась на 911px.
*/
.product-nav__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}

.product-nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;

    /* flex: 1 — строка занимает всё место до кнопки. min-width: 0 обязателен:
       без него флекс-элемент не сжимается уже своего содержимого, строка
       выталкивает кнопку за экран, и прокрутка так и не включается. */
    flex: 1 1 auto;
    min-width: 0;

    /*
       position: relative обязателен, и вот почему.

       Спрятанный span.visually-hidden — position: absolute. Такой элемент
       располагается относительно ближайшего позиционированного предка, а им
       без этой строки оказывается не сам прокручиваемый блок, а .product-nav
       (у него position: sticky). Спрятанный span тогда выпадает из прокрутки
       и растягивает страницу по горизонтали: на 375px документ становился
       шириной 461px, и весь сайт ездил вбок. Найдено измерением (этап 4).
    */
    position: relative;
    /* На телефоне название и вкладки в строку не влезают. Прокручиваем
       строку по горизонтали вместо переноса: перенос менял бы высоту панели
       в момент залипания, и содержимое дёргалось бы. */
    overflow-x: auto;
    scrollbar-width: none;
}

.product-nav__inner::-webkit-scrollbar {
    display: none;
}

.product-nav__name {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-heading);
    white-space: nowrap;
}

.product-nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    /* margin-left: auto прижимает вкладки и кнопку вправо, оставляя название
       слева, — раскладка эталона. */
    margin-left: auto;
}

.product-nav__link {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.product-nav__link:hover {
    color: var(--c-heading);
    text-decoration: none;
}

.product-nav__link.is-active {
    background: var(--c-surface);
    color: var(--c-heading);
}

.product-nav__cta {
    flex: 0 0 auto;
    /* Внутри кнопки — span.visually-hidden с названием модели. position:
       relative держит его в границах кнопки, по той же причине, что и у
       прокручиваемой строки выше. */
    position: relative;
    min-height: 36px;
    padding: 4px 16px;
    font-size: 13px;
    white-space: nowrap;
}

/*
   Узкий экран (этап 8). Название модели, кнопка заявки и пункты в одну
   строку не помещались: на 390px под пункты оставалось меньше 100px,
   виден был один — на узбекском обрезанный посередине («Umumiy r»), а на
   русском «Характеристики» не видно вовсе, и не понять, что пунктов больше.

   На телефоне название из панели убираем: оно стоит крупно в заголовке
   страницы и в крошках. До десктопа правый край строки плавно гаснет —
   частично видный пункт читается как «листай дальше», а не как обрезка.
*/
@media (max-width: 767.98px) {
    .product-nav__name {
        display: none;
    }

    .product-nav__links {
        margin-left: 0;
    }
}

@media (max-width: 1079.98px) {
    .product-nav__inner {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
}

/* ---------- 2. Первый экран ---------------------------------------------- */

.product-hero {
    padding-block: 24px 40px;
}

/*
   Одна колонка на телефоне, две на десктопе. Галерея слева шире правой
   колонки: картинка товара — главное на этом экране.

   align-items: start, чтобы правая колонка не растягивалась по высоте
   галереи и её содержимое оставалось наверху.
*/
.product-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/*
   Две колонки уже с планшета. До 07.10 они включались только с 1080px,
   и на планшете квадратная галерея шириной 976px занимала весь экран:
   название, цвета и кнопка заявки уезжали за край, а планшетный файл
   картинки (600px) растягивался в 1,6 раза и мылился.
*/
@media (min-width: 768px) {
    .product-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }
}

@media (min-width: 1080px) {
    .product-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 48px;
    }

    /* Сведения о модели остаются на виду, пока прокручивается галерея.
       top учитывает и шапку, и липкую панель модели. */
    .product-info {
        position: sticky;
        top: calc(var(--header-h) + 72px);
    }
}

/* ---------- 2.1. Галерея -------------------------------------------------- */

/* Подложка кадра — тот же --card-bg, что у карточки в сетке: пресс-материалы
   Huawei приходят с прозрачным фоном, и цвет под ними задаёт именно он. */
.gallery__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg, var(--c-surface));
}

/*
   На компьютере кадр не выше окна. Квадрат шириной в колонку на экране
   1536×864 при масштабе 125% выходил 877px — выше видимой области, и
   миниатюры под ним оказывались за нижним краем (проверка этапа 8). Когда
   срабатывает max-height, коробка становится шире, чем выше, а снимок
   внутри остаётся целым (object-fit: contain) и стоит по центру.
   290px — шапка, крошки, панель модели, отступы и ряд миниатюр.

   width: 100% обязателен. Без явной ширины браузер переносит max-height
   через aspect-ratio и на ширину: коробка оставалась квадратом 540×540,
   прижатым влево, а между галереей и сведениями о модели зияла пустота
   в 200px (монитор владельца 2560×1440 при 150%, проверка 07.10).
*/
@media (min-width: 1080px) {
    .gallery__stage {
        width: 100%;
        max-height: max(380px, calc(100svh - 290px));
    }
}

.gallery__frame {
    position: absolute;
    inset: 0;
    margin: 0;
}

.gallery__img {
    width: 100%;
    height: 100%;
    /* contain, а не cover: товар должен быть виден целиком, обрезать его
       по краям нельзя. */
    object-fit: contain;
}

.gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.gallery__thumb {
    display: block;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--card-bg, var(--c-surface));
    transition: border-color 0.2s var(--ease);
}

.gallery__thumb:hover {
    border-color: var(--c-border);
}

/* Активная миниатюра обведена рамкой, а не только подсвечена фоном: рамка
   заметна и при плохом контрасте экрана. */
.gallery__thumb.is-active {
    border-color: var(--c-heading);
}

.gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    .gallery__thumb {
        width: 80px;
        height: 80px;
    }
}

/* ---------- 2.2. Сведения о модели --------------------------------------- */

.product-info__badge {
    margin-bottom: 8px;
}

.product-info__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-heading);
}

@media (min-width: 768px) {
    .product-info__title { font-size: 36px; }
}

.product-info__tagline {
    margin-top: 8px;
    font-size: 18px;
    color: var(--c-muted);
}

.product-info__text {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
}

/* Снятая с продажи модель: жёлтая плашка вместо красной — это не ошибка,
   а состояние товара. */
.product-info__discontinued {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff7e6;
    border: 1px solid #f0d9a8;
    font-size: 14px;
}

.product-info__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

/* ---------- 3. Переключатели цвета и памяти ------------------------------ */

.picker {
    margin-top: 24px;
}

.picker__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.picker__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
}

/* Название выбранного варианта. Обновляет его скрипт — так подпись цвета
   не приходится дублировать возле каждого кружка. */
.picker__current {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-heading);
}

.picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-heading);
    background: #fff;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.picker__btn:hover {
    border-color: var(--c-heading);
}

.picker__btn.is-active {
    border-color: var(--c-heading);
    background: var(--c-surface);
}

/*
   Недоступное сочетание. Кнопку не убираем со страницы, а гасим и отключаем:
   исчезающие на глазах кнопки сбивают с толку сильнее, чем погашенные.
   disabled браузер сам исключает из порядка табуляции.
*/
.picker__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.picker__btn:disabled:hover {
    border-color: var(--c-border);
}

/* Кружок цвета. Заливка приходит инлайновой переменной --swatch из базы. */
.picker__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch, #e5e5e5);
    /* Внутренняя тень вместо border: белый цвет иначе сливался бы с фоном
       кнопки и выглядел пустым местом. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* ---------- 4. Выжимка характеристик ------------------------------------- */

.highlights {
    padding-block: 32px;
    background: var(--c-surface);
}

/*
   Сетка выносок: одна колонка на телефоне, две на планшете, три на десктопе.
   Здесь auto-fit уместен, в отличие от сетки товаров: точное число колонок
   роли не играет, важно только, чтобы подписи не сжимались в столбик.
*/
.highlights__grid {
    display: grid;
    /* 160px — так семь выносок встают в один ряд на 1440. При 200px
       седьмая одна переносилась во второй ряд (проверка 07.10). */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

/* Колонкой, значение прижато книзу: подпись в одну и в две строки
   («ЧАСТОТА ОБНОВЛЕНИЯ») раньше давала значения на разной высоте в одном
   ряду. */
.highlights__item {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 10px;
    background: #fff;
}

.highlights__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
}

/* margin целиком, а не только сверху: у dd браузер по умолчанию ставит
   отступ слева 40px, и значение стояло сдвинутым относительно подписи. */
.highlights__value {
    margin: auto 0 0;
    padding-top: 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--c-heading);
}

.highlights__more {
    margin-top: 16px;
}

/* ---------- 5. Блок заявки ----------------------------------------------- */

/* Вёрстка самого блока и формы внутри него живёт в form.css: та же форма
   стоит на странице контактов, где product.css не подключается. */

/* ---------- 6. Похожие модели -------------------------------------------- */

.similar {
    padding-block: 32px 64px;
}

/* Похожих моделей четыре, а на планшете сетка в три колонки: четвёртая
   карточка стояла одна во втором ряду (проверка этапа 8). На планшете
   показываем три — блок рекомендательный, полнота тут не нужна. */
@media (min-width: 768px) and (max-width: 1079.98px) {
    .similar .cards-grid > :nth-child(n + 4) {
        display: none;
    }
}

/* ---------- 7. Страница характеристик ------------------------------------ */

.specs-head {
    padding-block: 16px 24px;
}

.specs-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

@media (min-width: 768px) {
    .specs-head__inner {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 32px;
    }
}

.specs-head__media {
    aspect-ratio: 1 / 1;
    max-width: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-surface);
}

.specs-head__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.specs-head__colors {
    margin-top: 12px;
    font-size: 15px;
    color: var(--c-muted);
}

.specs-head__colors-label {
    font-weight: 700;
    color: var(--c-heading);
}

.specs-head__back {
    margin-top: 12px;
}

.specs-wrap {
    padding-bottom: 64px;
}

/* ---------- 7.1. Аккордеон ------------------------------------------------ */

.specs {
    border-top: 1px solid var(--c-border);
}

.specs__group {
    border-bottom: 1px solid var(--c-border);
}

/*
   Аккордеон на встроенных details/summary: раскрытие, клавиатура и роли
   достаются от браузера бесплатно, скрипта здесь нет вовсе.
   list-style: none убирает системный треугольник — свой рисуем ниже.
*/
.specs__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 18px;
    cursor: pointer;
    list-style: none;
}

/* WebKit прячет свой маркер только этим псевдоэлементом. */
.specs__summary::-webkit-details-marker {
    display: none;
}

.specs__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-heading);
}

@media (min-width: 768px) {
    .specs__name { font-size: 19px; }
}

/* Стрелка: половинки рамки, повёрнутые на 45°. Одна картинка меньше — одним
   запросом меньше. */
.specs__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--c-muted);
    border-bottom: 2px solid var(--c-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--ease);
}

.specs__details[open] .specs__summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.specs__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 24px;
}

@media (min-width: 768px) {
    .specs__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /*
       Группа без подгрупп — одна колонка на всю ширину, а строки внутри неё
       раскладываются в две колонки (columns: 2). Раньше такая группа
       занимала левую половину экрана, а правая пустовала (проверка 07.10).
       break-inside: avoid не даёт разорвать строку «название — значение»
       между колонками.
    */
    .specs__column:only-child {
        grid-column: 1 / -1;
    }

    .specs__column:only-child .specs__list {
        columns: 2;
        column-gap: 48px;
    }

    .specs__column:only-child .specs__row {
        break-inside: avoid;
    }
}

.specs__subtitle {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-muted);
}

/*
   Строка характеристики. dt и dd в одной строке через grid: название слева
   фиксированной долей, значение справа. Обёртка .specs__row нужна потому,
   что dl не даёт связать пару dt/dd средствами одной сетки.
*/
.specs__row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    padding-block: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
}

.specs__label {
    color: var(--c-muted);
}

.specs__value {
    margin: 0;
    color: var(--c-text);
}

/* Номер сноски: мелкая приподнятая цифра, ссылок из неё пока нет —
   блок сносок появится вместе с лендингом флагмана (этап 5). */
.specs__note {
    margin-left: 2px;
    font-size: 11px;
    color: var(--c-muted);
}

/* ---------- Якоря секций ---------------------------------------------------- */

/*
   Переход по пункту липкой панели («Фотосъёмка», «Батарея») ставит секцию
   сразу под шапкой и панелью. С 07.10 это делает scroll-padding-top у html
   (base.css) — на странице с панелью модели он равен шапке плюс панели и
   заодно не даёт фокусу с клавиатуры прятаться под ними. Отдельный
   scroll-margin-top у секций сложился бы с ним и дал двойной отступ.
*/