/* ── карточка модели ───────────────────────────────────── */
.prod{padding-bottom:clamp(56px,7vw,110px)}

.prod__cols{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,48px);padding-top:8px}

@media (min-width:1040px){
.prod__cols{grid-template-columns:auto minmax(0,1fr)}
}

.gal{display:flex;flex-direction:column-reverse;gap:12px;min-width:0}

/* обёртка нужна только для градиента-затухания (::before/::after ниже): сама лента
   миниатюр (.gal__thumbs) скроллится внутри неё, а обёртка — нет, поэтому градиент
   остаётся на месте у края и не уезжает вместе с контентом */
.gal__thumbs-wrap{position:relative;min-width:0}

.gal__thumbs{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;
               scrollbar-width:none;padding-bottom:2px;scroll-snap-type:x proximity;
               scroll-behavior:smooth}

.gal__thumbs::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:reduce){
.gal__thumbs{scroll-behavior:auto}
}

.gal__thumb{flex:none;position:relative;width:64px;padding:0;background:none;
              border:1px solid var(--line);cursor:pointer;line-height:0;scroll-snap-align:start}

.gal__thumb[aria-current="true"]{border:2px solid var(--accent)}

.gal__thumb img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;display:block}

/* лента продолжается за краем: градиент-затухание к цвету фона страницы, а не стрелки —
   то же решение T69, что в model.css (расхождение между страницами недопустимо).
   Классы can-scroll-prev/-next ставит archive-model.js по факту скролла — на 4 кадрах
   классов нет, градиент невидим. */
.gal__thumbs-wrap::before,.gal__thumbs-wrap::after{content:"";position:absolute;
    pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:1}

.gal__thumbs-wrap::before{left:0;top:0;bottom:0;width:28px;
    background:linear-gradient(to right,var(--bg),rgba(0,0,0,0))}

.gal__thumbs-wrap::after{right:0;top:0;bottom:0;width:28px;
    background:linear-gradient(to left,var(--bg),rgba(0,0,0,0))}

.gal__thumbs-wrap.can-scroll-prev::before,.gal__thumbs-wrap.can-scroll-next::after{opacity:1}

.gal__main{width:100%;position:relative;aspect-ratio:2/3;padding:0;border:none;
             background:var(--photo-bg);cursor:zoom-in;line-height:0;overflow:hidden}

.gal__main img{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:1040px){
/* --gal-h — общая высота колонки миниатюр и главного фото. Задаём её явно на обоих (а не
   рассчитываем на align-items:stretch у .gal): стретч выравнивает auto-высоту по САМОМУ
   ВЫСОКОМУ элементу строки, а у .gal__main высота задана числом, а не auto — на 8 кадрах
   контент .gal__thumbs (1030px) выше 760px главного фото и растягивал бы всю строку вместе
   с макетом вместо внутреннего скролла миниатюр (тот же расчёт, что в model.css). */
.gal{flex-direction:row;gap:14px;--gal-h:min(760px,calc(100svh - var(--chrome-h) - 120px))}
.gal__thumbs-wrap{height:var(--gal-h);min-height:480px}
.gal__thumbs{flex-direction:column;gap:10px;height:100%;overflow-x:hidden;overflow-y:auto;
               scroll-snap-type:y proximity}
.gal__thumb{width:80px}
.gal__main{width:auto;height:var(--gal-h);min-height:480px;aspect-ratio:2/3}
.gal__thumbs-wrap::before{left:0;right:0;top:0;bottom:auto;height:28px;width:auto;
    background:linear-gradient(to bottom,var(--bg),rgba(0,0,0,0))}
.gal__thumbs-wrap::after{left:0;right:0;bottom:0;top:auto;height:28px;width:auto;
    background:linear-gradient(to top,var(--bg),rgba(0,0,0,0))}
}

.info{max-width:52ch;min-width:0}

.info__h1{margin:0;font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.15}

/* То же, что на карточке актуальной модели (model.css): артикул читается наравне
   с остальным текстом, а не как служебная подпись. */
.info__art{margin:10px 0 0;font-size:15px;font-weight:500;letter-spacing:.1em;color:var(--text)}

.info__price{margin:24px 0 0;font-size:28px;font-weight:500}

.info__stock{margin:10px 0 0;display:flex;align-items:center;gap:8px;font-size:14px}

.info__stock i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

.info__stock--order i{background:var(--line)}

.info__cap{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}

.sizes{padding-top:28px}

.sizes__row{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}

.sizes__row button{min-width:48px;height:44px;padding:0 12px;background:none;
                     border:1px solid var(--line);color:var(--text);font-size:14px;cursor:pointer}

.sizes__row button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#24211D}

.sizes__help{display:inline-block;margin-top:12px;font-size:13px;color:var(--text-muted);
               box-shadow:inset 0 -1px 0 var(--line)}

/* рост и параметры модели помогают выбрать размер по фотографии */
.onmodel{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
           font-size:13.5px;line-height:1.5;color:var(--text)}

.onmodel__cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}

.onmodel__ph{color:var(--text-muted)}

.specs{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}

.specs li{display:flex;align-items:center;justify-content:space-between;gap:16px;
            min-height:44px;border-bottom:1px solid var(--line)}

.specs dt,.specs .k{font-size:13px;color:var(--text-muted)}

.specs .v{font-size:14px;color:var(--text);text-align:right}

.buy{display:flex;gap:12px;padding-top:28px}

.buy__main{flex:1;height:56px;display:inline-flex;align-items:center;justify-content:center;
             background:var(--accent);color:#24211D;border:none;font-size:12px;font-weight:600;
             letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

.buy__fav{width:56px;height:56px;flex:none;display:grid;place-items:center;background:none;
            border:1px solid var(--line);color:var(--text);cursor:pointer}

@media (hover:hover){
.buy__fav:hover{border-color:var(--text)}
}

.ship{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}

.ship li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted)}

.ship li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--text-muted);flex:none}

.desc{padding:64px 0 80px;max-width:65ch}

.desc h2{margin:0;font-size:22px;font-weight:500;line-height:1.3}

.desc p{margin:20px 0 0;font-size:16px;line-height:1.6;color:var(--text);text-wrap:pretty}

.desc p + p{margin-top:16px}

/* затемнение делаем фоном самого окна, а не ::backdrop:
     при запасном пути открытия (setAttribute open) backdrop не появляется вовсе */
dialog{border:none;padding:0;max-width:100%;max-height:100dvh;width:100%;height:100dvh;
         display:grid;place-items:center;background:rgba(20,18,15,.88)}

dialog:not([open]){display:none}

dialog::backdrop{background:rgba(20,18,15,.88)}

.zoom{width:100%;height:100dvh;position:relative;display:grid;place-items:center;padding:24px}

.zoom img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* T87: как в model.css — у зума нет одного «нормального» размера под сломанное фото
   (object-fit:contain опирается на натуральные width/height, которых у него нет), заглушка —
   комфортный блок в пропорции 2/3, отцентрованный в окне (inset:0 + margin:auto). */
.zoom .photo-fallback{position:absolute;inset:0;margin:auto;width:min(60vw,340px);
                        aspect-ratio:2/3;max-height:80dvh}

.zoom__arrow{position:fixed;top:50%;transform:translateY(-50%);width:56px;height:56px;
               display:grid;place-items:center;background:rgba(238,231,223,.9);border:none;
               color:#24211D;cursor:pointer;border-radius:2px}

@media (hover:hover){
.zoom__arrow:hover{background:#FFCB00}
}

.zoom__arrow--prev{left:12px}

.zoom__arrow--next{right:12px}

/* T90dop1: тот же дефект и то же решение, что в model.css (T90) — там подробный
   комментарий. Коротко: showModal() сам переносит фокус на #zoomPrev, WebKit рисует рамку
   фокуса и при открытии мышью (баг конкретно его эвристики :focus-visible), Chromium и
   Firefox — только при открытии клавиатурой (как и задумано). Правило гасит outline только
   у элемента с классом, который archive-model.js навешивает на один программный перенос
   фокуса при мышином/тач-открытии и снимает по первому blur. */
.zoom__arrow--no-init-ring:focus{outline:none}

.zoom__count{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);margin:0;
               padding:6px 14px;background:rgba(238,231,223,.9);color:#24211D;
               font-size:13px;border-radius:2px}

@media (max-width:600px){
.zoom__arrow{width:48px;height:48px}
.zoom__arrow--prev{left:6px}
.zoom__arrow--next{right:6px}
}

.modal__close{position:fixed;top:12px;right:12px;width:44px;height:44px;display:grid;
                place-items:center;background:var(--surface-alt);border:1px solid var(--line);
                color:var(--text);cursor:pointer;border-radius:2px}

.ask{width:min(440px,92vw);background:var(--bg);border:1px solid var(--line);padding:28px;
       max-height:90dvh;overflow-y:auto}

.ask h2{margin:0;font-size:18px;font-weight:500;line-height:1.3}

.ask h2 span{display:block;font-size:13px;font-weight:400;color:var(--text-muted);margin-top:6px}

.ask label{display:block;margin-top:18px;font-size:12px;letter-spacing:.08em;
             text-transform:uppercase;color:var(--text-muted)}

.ask input,.ask textarea{width:100%;margin-top:8px;min-height:48px;padding:12px 14px;
             background:var(--surface-alt);border:1px solid var(--line);border-radius:2px;
             color:var(--text);font-size:15px;font-family:inherit}

.ask textarea{min-height:88px;resize:vertical}

.ask__send{width:100%;margin-top:22px;height:52px;background:var(--accent);color:#24211D;
             border:none;font-size:12px;font-weight:600;letter-spacing:.14em;
             text-transform:uppercase;cursor:pointer}

/* мобильные браузеры зумят страницу при фокусе, если кегль поля меньше 16px */
.sorter select,.field input,.field textarea,.sub__row input,
  .promo__row input,.qty input,.ask input,.ask textarea{font-size:16px}

@media (min-width:768px){
.field input,.field textarea,.sub__row input,
    .promo__row input,.qty input,.ask input,.ask textarea{font-size:15px}
}

/* архивный снимок узкий: показываем целиком, поля — цвет страницы */
.gal__main{background:var(--photo-bg)}

.gal__main img{object-fit:contain}

.gal__thumbs button{background:var(--bg)}

.gal__thumbs img{object-fit:contain}

.info__price--ask{font-size:22px;font-weight:400;color:var(--text-muted)}

/* размер архивной модели — текстовый диапазон со старого сайта, а не кнопки выбора */
.sizes__value{margin:12px 0 0;font-size:16px;color:var(--text)}

.arch__note{margin:20px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-muted);
              text-wrap:pretty}

/* ── диалог «Узнать цену»: невалидные поля и текст после отправки ─────── */
.ask input[aria-invalid="true"],.ask textarea[aria-invalid="true"]{border-color:var(--err)}

.ask h2 + p{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--text-muted)}

/* чек-бокс согласия внутри .ask переопределяет общие .ask label/.ask input —
   они рассчитаны на текстовые поля, а не на чек-бокс (тот же блок, что в model.css) */
.ask .agree{display:flex;align-items:flex-start;gap:10px;margin-top:18px;
             font-size:14px;line-height:1.5;letter-spacing:normal;
             text-transform:none;color:var(--text)}

.ask .agree input{width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;
                    background:none;border:none;border-radius:0;accent-color:#FFCB00;flex:none}

/* общее .ask a (base.css) делает ссылки диалога 18px — в тексте согласия ссылка как текст */
.ask .agree a{font-size:inherit;font-weight:inherit}

/* T103: тот же WebKit-фикс, что в base.css (`.agree input[type="checkbox"]`, подробный
   комментарий там) и в model.css — отдельным правилом здесь по той же причине: этот
   чекбокс переопределён `.ask .agree input` выше (border:none;background:none под текстовые
   поля диалога) с той же специфичностью селектора; без своего .ask-правила фикс из base.css
   был бы перебит этим сбросом (подключён позже — .ask .agree input побеждает для
   border/background). */
@supports (-webkit-hyphens: none){
.ask .agree input[type="checkbox"]{
    appearance:none;-webkit-appearance:none;position:relative;
    border-radius:2px;border:1px solid var(--line);background:var(--bg);
  }
.ask .agree input[type="checkbox"]:checked{
    border:1px solid #24211D;background:var(--accent);
  }
.ask .agree input[type="checkbox"]:checked::after{
    content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
    border:solid #24211D;border-width:0 2px 2px 0;transform:rotate(45deg);
  }
}