/* Montserrat self-hosted (T30) instead of Google Fonts: only the two subsets the site
   actually needs, cyrillic and latin, variable font, weights 300–700, font-display:swap.
   unicode-range copied verbatim from @fontsource-variable/montserrat@5.3.0's own index.css. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/static/fonts/montserrat-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/static/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* T70 (2026-09-17): фон светлой темы равен фону съёмки (#EEE7DF), иначе вокруг каждой
   фотографии читается прямоугольник — фон кадров светлее страницы на четыре единицы.
   Замер по всем 166 отретушированным кадрам: 84 % проб ровно #EEE7DF, остальные пробы
   в пределах двух единиц. Тёмная тема не меняется. */
:root{
    --bg:#EEE7DF; --surface:#EEE7DF; --surface-alt:#F5F2EC;
    --line:#D8D2C6; --text:#24211D; --text-muted:#635E57; --accent:#FFCB00;
    --header-bg:rgba(238,231,223,.92); --chrome-h:113px;
    --card-text:#24211D; --card-sub:#635E57; --card-pad-x:2px; --card-pad-b:0px;
    --err:#B03A2E;
  }

:root{
    --bg:#EEE7DF; --surface:#EEE7DF; --surface-alt:#F5F2EC;
    --line:#D8D2C6; --text:#24211D; --text-muted:#635E57; --accent:#FFCB00;
    --header-bg:rgba(238,231,223,.92); --chrome-h:113px;
    --card-text:#24211D; --card-sub:#635E57; --card-pad-x:2px; --card-pad-b:0px;
    /* T58 fix 4: фон-«подложка» ретушированных фото товара (замерено — 20 из 21 кадра
       ровно #EEE7DF, без виньетки); одно значение для обеих тем. */
    --photo-bg:#EEE7DF;
  }

:root[data-paper="white"]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-alt:#F6F6F6;--line:#E6E6E6;--header-bg:rgba(255,255,255,.92)}

:root[data-theme="dark"]{
    --bg:#1A1815; --surface:#E8E4DA; --surface-alt:#24211D;
    --text:#EDEAE3; --text-muted:#9A948A; --line:#3A352E;
    --header-bg:rgba(36,33,29,.92);
    --err:#E8836F;
  }

:root[data-theme="dark"]{
    --bg:#1A1815; --surface:#E8E4DA; --surface-alt:#24211D;
    --text:#EDEAE3; --text-muted:#9A948A; --line:#3A352E;
    --header-bg:rgba(36,33,29,.92);
    --photo-bg:#EEE7DF;
  }

*{box-sizing:border-box}

[hidden]{display:none !important}

html{overflow-x:hidden;color-scheme:light dark}

html,body{margin:0;padding:0;max-width:100%}

body{font-family:Montserrat,system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}

a:hover{color:var(--text-muted)}

img{display:block;max-width:100%}

button,select{font-family:inherit}

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

.wrap{max-width:1600px;margin:0 auto;padding-inline:clamp(16px,3vw,48px)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

html:not([data-theme="dark"]) .logo--dark{display:none}

:root[data-theme="dark"] .logo--light{display:none}

/* иконки-состояния переключаются CSS, а не JS: у <svg> нет свойства hidden */
html:not([data-theme="dark"]) .ico-sun{display:none}

:root[data-theme="dark"] .ico-moon{display:none}

.hero.is-auto .ico-play{display:none}

.hero:not(.is-auto) .ico-pause{display:none}

@keyframes ken-burns{from{transform:scale(1)}to{transform:scale(1.06)}}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@keyframes dot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── строка анонса ─────────────────────────────────────── */
.topbar{position:relative;background:#24211D;color:#F2EFE8;border-bottom:1px solid #3A352E;
          min-height:40px;display:flex;align-items:center;justify-content:center;
          padding:8px 56px;text-align:center}

.topbar[hidden]{display:none}

.topbar__text{margin:0;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
                line-height:1.5;transition:opacity .5s ease}

.topbar__text.is-fading{opacity:0}

.topbar__more{text-decoration:underline;text-decoration-color:#FFCB00;text-underline-offset:3px;color:#F2EFE8}

.topbar__close{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;
                 display:grid;place-items:center;background:none;border:none;color:#F2EFE8;cursor:pointer}

/* ── шапка ─────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(10px);
       border-bottom:1px solid var(--line);transition:transform .28s ease,opacity .28s ease;will-change:transform}

.hdr.is-hidden{transform:translateY(-100%);opacity:0}

.hdr__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,48px);height:72px}

.hdr__logo{flex:none;display:flex;align-items:center}

.hdr__logo img{height:40px;width:auto}

.nav{display:none;gap:clamp(12px,1.7vw,28px);align-items:center;flex:1}

.nav a{font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
         white-space:nowrap;padding:8px 0;border-bottom:1px solid transparent}

.nav a.is-active{border-bottom-color:var(--accent)}

.hdr__tools{margin-left:auto;display:flex;align-items:center;gap:4px}

.icon-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:none;
            color:var(--text);cursor:pointer;border-radius:2px;position:relative}

.cart-badge{position:absolute;top:6px;right:5px;min-width:16px;height:16px;padding:0 4px;
              background:var(--accent);color:#24211D;font-size:10px;font-weight:600;
              border-radius:9px;display:grid;place-items:center}

.burger{display:grid}

.nav-mob{border-top:1px solid var(--line);background:var(--surface-alt);
           padding:8px clamp(16px,3vw,48px) 20px;display:flex;flex-direction:column}

.nav-mob[hidden]{display:none}

.nav-mob a{padding:14px 0;font-size:14px;font-weight:500;letter-spacing:.05em;
             text-transform:uppercase;border-bottom:1px solid var(--line)}

.nav-mob a:last-child{border-bottom:none}

/* ── первый экран ──────────────────────────────────────── */
.hero{position:relative;display:grid;overflow:hidden;width:100%;background:var(--bg)}

.slide{grid-area:1/1;display:grid;grid-template-columns:1fr;opacity:0;visibility:hidden;
         transition:opacity .9s cubic-bezier(.4,0,.2,1)}

.slide.is-active{opacity:1;visibility:visible}

.slide__ph{position:relative;aspect-ratio:2/3;height:auto;overflow:hidden;min-width:0}

.slide__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.slide.is-active .slide__ph img{animation:ken-burns 7.6s ease-out forwards}

.hero.is-paused .slide__ph img{animation-play-state:paused}

.slide__text{padding:16px clamp(16px,3vw,48px) 4px;display:flex;flex-direction:column;align-items:flex-start}

.slide__kicker{margin:0;font-size:11.5px;font-weight:500;letter-spacing:.18em;
                 text-transform:uppercase;color:var(--text-muted)}

.slide__title{margin:12px 0 0;font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.1}

.slide__title:first-child{margin-top:0}

.slide__lead{margin:16px 0 0;font-size:14.5px;line-height:1.7;max-width:42ch;
               color:var(--text-muted);text-wrap:pretty}

.btn{min-height:52px;display:inline-flex;align-items:center;padding:0 32px;
       font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

.btn--solid{background:var(--accent);color:#24211D}

.btn--ghost{border:1px solid var(--line)}

.btn--outline{border:1px solid var(--text);padding:0 40px}

.slide__btn{margin-top:28px}

.slide.is-active .slide__kicker{animation:rise .5s .12s ease-out both}

.slide.is-active .slide__title{animation:rise .5s .19s ease-out both}

.slide.is-active .slide__lead{animation:rise .5s .26s ease-out both}

.slide.is-active .slide__btn{animation:rise .5s .33s ease-out both}

.hero__nav{grid-area:2/1;display:flex;align-items:center;gap:12px;
             padding:24px clamp(16px,3vw,48px) 28px;z-index:5}

/* на телефоне панель лежит поверх нижней части фотографии:
     обёртка повторяет пропорцию кадра и прижимает панель к его низу */
.hero__anchor{display:contents}

.hero__btn{width:44px;height:44px;display:grid;place-items:center;background:none;
             border:1px solid var(--line);color:var(--text);cursor:pointer;border-radius:2px}

.hero__dots{display:flex;align-items:center;gap:8px}

.hero__dot{width:36px;height:44px;padding:0;background:none;border:none;cursor:pointer;
             display:grid;place-items:center}

.hero__bar{position:relative;overflow:hidden;display:block;width:36px;height:3px;background:rgba(36,33,29,.22)}

:root[data-theme="dark"] .hero__bar{background:rgba(237,234,227,.25)}

.hero__bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}

.hero__dot[aria-current="true"] .hero__bar i{transform:scaleX(1)}

.hero.is-auto .hero__dot[aria-current="true"] .hero__bar i{animation:dot-fill 7s linear forwards}

.hero.is-paused .hero__bar i{animation-play-state:paused}

/* ── каталог ───────────────────────────────────────────── */
.catalog{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,110px)}

.catalog__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
                 gap:20px;padding-bottom:clamp(20px,3vw,34px);border-bottom:1px solid var(--line)}

.catalog__h1{margin:0;font-weight:300;font-size:clamp(30px,5.2vw,60px);line-height:1.05;letter-spacing:-.01em}

.catalog__h1 b{font-weight:600}

.catalog__sub{margin:14px 0 0;max-width:44ch;color:var(--text-muted);font-size:14px;line-height:1.7}

.catalog__tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.viewswitch{display:flex;align-items:center;gap:4px}

.viewswitch button{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
                     border-radius:2px;border:1px solid var(--line);background:none;color:var(--text)}

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

/* на узких экранах список уходит под подпись, иначе распирает страницу */
.sorter{display:flex;align-items:center;flex-wrap:wrap;min-width:0;gap:10px;font-size:11.5px;letter-spacing:.08em;
          text-transform:uppercase;color:var(--text-muted)}

.sorter select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 34px 0 14px;
                 background:var(--surface-alt) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23635E57' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
                 color:var(--text);border:1px solid var(--line);border-radius:2px;
                 font-size:13px;letter-spacing:.03em;text-transform:none;cursor:pointer}

.grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,34px);
        padding-top:clamp(24px,3.5vw,44px)}

.card{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0;
        align-content:start;background:var(--photo-bg);color:var(--card-text)}

.card > *{min-width:0}

.card__link{display:block;position:relative;overflow:hidden;align-self:start}

.card__link img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;transition:transform .6s ease}

.card__badge{position:absolute;top:14px;left:14px;padding:6px 11px;font-size:10px;
               font-weight:600;letter-spacing:.14em;text-transform:uppercase}

.card__badge--new{background:#24211D;color:#F2EFE8}

.card__badge--sale{background:#FFCB00;color:#24211D}

.card__title{margin:0;padding:16px var(--card-pad-x) 0;font-size:14.5px;font-weight:500;
               line-height:1.35;color:var(--card-text);
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.card__fur{margin:0;padding:7px var(--card-pad-x) 0;font-size:11.5px;letter-spacing:.06em;
             text-transform:uppercase;color:var(--card-sub)}

.card__price{margin:0;padding:9px var(--card-pad-x) var(--card-pad-b);display:flex;
               align-items:baseline;gap:10px;font-size:15px;font-weight:500;color:var(--card-text)}

.card__old{font-size:12.5px;font-weight:400;text-decoration:line-through;color:var(--card-sub)}

:root[data-theme="dark"] .card{background:var(--photo-bg);--card-pad-x:14px;--card-pad-b:18px}

.catalog__more{display:flex;justify-content:center;padding-top:clamp(32px,4vw,56px)}

/* ── о фабрике ─────────────────────────────────────────── */
.about{border-top:1px solid var(--line);background:var(--surface-alt)}

.about__in{padding-block:clamp(48px,6vw,100px);display:grid;
             grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
             gap:clamp(32px,5vw,80px);align-items:center}

.about__kicker{margin:0 0 18px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}

.about__h2{margin:0;font-weight:300;font-size:clamp(26px,3.6vw,44px);line-height:1.15}

.about__lead{margin:22px 0 0;max-width:52ch;font-size:15px;line-height:1.8;color:var(--text-muted);text-wrap:pretty}

.facts{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);padding-top:clamp(28px,3.5vw,44px)}

.facts b{display:block;font-size:clamp(26px,3vw,38px);font-weight:300}

.facts span{display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;color:var(--text-muted)}

.about__btns{display:flex;flex-wrap:wrap;gap:12px;padding-top:clamp(26px,3vw,38px)}

.about__img img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 30%}

/* ── подвал ────────────────────────────────────────────── */
.ftr{background:var(--surface-alt);border-top:1px solid var(--line)}

.ftr__top{padding-block:clamp(40px,5vw,72px) 28px;display:grid;
            grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(28px,3vw,48px)}

.ftr__logo img{height:52px;width:auto}

.ftr__about{margin:16px 0 0;font-size:13px;line-height:1.7;color:var(--text-muted);max-width:26ch}

.ftr__cap{margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}

.ftr__list{display:flex;flex-direction:column;gap:11px;font-size:13.5px}

.ftr__addr{font-style:normal;display:flex;flex-direction:column;gap:11px;font-size:13.5px;line-height:1.6}

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

.ftr__tel{position:relative;font-size:16px;font-weight:500}

.ftr__bot{padding-block:22px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
            gap:14px 28px;align-items:baseline;justify-content:space-between}

.ftr__legal{margin:0;font-size:11.5px;line-height:1.8;color:var(--text-muted);max-width:70ch}

.ftr__docs{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:11.5px;color:var(--text-muted)}

.ftr__docs a{position:relative}

/* ── страница каталога ─────────────────────────────────── */
  /* только нижний отступ: боковые задаёт .wrap, их нельзя перебивать */
.cat{padding-bottom:clamp(56px,7vw,110px)}

.crumbs{padding:24px 0 16px}

.crumbs ol{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:10px;
             font-size:13px;color:var(--text-muted);white-space:nowrap;
             overflow-x:auto;scrollbar-width:none}

.crumbs ol::-webkit-scrollbar{display:none}

.crumbs li[aria-hidden]{color:var(--text-muted)}

.crumbs [aria-current]{color:var(--text)}

.cat__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}

.cat__h1{margin:0;font-weight:300;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.01em}

.cat__count{margin:0;font-size:15px;color:var(--text-muted)}

.sections{margin-top:20px;display:flex;align-items:center;gap:28px}

.sections a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;
              letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding-bottom:6px}

.sections a[aria-current]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}

.cat__bar{margin-top:24px;padding-bottom:16px;border-bottom:1px solid var(--line);
            display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}

.cat .grid{padding-top:28px}

.cat__more{padding-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px}

.cat__shown{margin:0;font-size:13px;color:var(--text-muted)}

.cat__empty{padding:80px 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}

.cat__empty p{margin:0;font-size:16px;color:var(--text-muted)}

.cat__empty a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;
                color:var(--text);box-shadow:inset 0 -1px 0 var(--accent)}

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

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

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

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

/* ── где купить и контакты ─────────────────────────────── */
.page{padding-bottom:clamp(56px,7vw,110px)}

.page__h1{margin:0;font-weight:300;font-size:clamp(28px,4vw,44px);line-height:1.1}

.salon{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);padding-top:28px}

.salon__name{margin:0;font-size:20px;font-weight:500;line-height:1.3}

.salon__addr{margin:12px 0 0;font-size:16px;line-height:1.6}

.salon__tel{display:inline-block;margin-top:16px;font-size:20px;font-weight:500}

.salon__tel:hover{color:var(--text)}

.salon__hours{margin:12px 0 0;font-size:15px;color:var(--text-muted)}

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

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

.salon__state.is-closed i{background:var(--line)}

.salon__go{margin-top:24px;width:min(320px,100%);height:52px;display:grid;place-items:center;
             border:1px solid var(--text);font-size:12px;font-weight:600;letter-spacing:.14em;
             text-transform:uppercase}

.map{position:relative;width:100%;background:var(--surface-alt);border:1px solid var(--line);overflow:hidden}

.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.map--tall{height:420px}

.map--wide{height:360px}

.map__note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--text-muted)}

.map__fallback{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}

.route{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-top:clamp(40px,5vw,64px)}

.route__item h3{margin:14px 0 0;font-size:15px;font-weight:500}

.route__item p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text-muted)}

.route__ico{width:24px;height:24px;color:var(--text)}

.lines{margin:12px 0 0;display:flex;flex-direction:column;gap:8px}

.lines div{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}

.lines svg{width:20px;height:20px;flex:none;color:var(--text-muted)}

.lines b{font-weight:500}

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

.ways li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
           min-height:56px;padding:8px 0;border-bottom:1px solid var(--line)}

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

.ways .v{font-size:16px;font-weight:500}

.msgr{display:flex;gap:10px;padding-top:16px}

.ways__msgr{display:flex;gap:8px}

.ways__msgr a{width:44px;height:44px;display:grid;place-items:center;
                border:1px solid var(--line);border-radius:2px;color:var(--text)}

.msgr a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);
          border-radius:2px;color:var(--text)}

.msgr__note{margin:12px 0 0;font-size:13px;color:var(--text-muted)}

.req{margin:0;font-size:14px;line-height:1.7;color:var(--text)}

.req b{font-weight:500}

.req span{white-space:nowrap}

.cols2{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);padding-top:28px}

.sent{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0}

.sent__mark{width:56px;height:56px;border:1px solid var(--accent);border-radius:50%;
              display:grid;place-items:center;color:var(--text)}

/* компактные мессенджеры в подвале */
.ftr__msgr{display:flex;gap:8px;margin-top:4px}

.ftr__msgr a{position:relative;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
               border-radius:2px;color:var(--text-muted)}

/* ── формы (те же правила, что в корзине) ──────────────── */
.form__h2{margin:0;font-size:22px;font-weight:500}

.form__fields{max-width:44ch;margin-top:20px}

.field{margin-top:18px}

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

.field input,.field 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}

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

.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err)}

.field__err{margin:8px 0 0;font-size:13px;color:var(--err)}

.field__err[hidden]{display:none}

.agree{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:14px;line-height:1.5}

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

.agree a{box-shadow:inset 0 -1px 0 var(--line)}

/* T103: тот же WebKit-баг, что раньше был у радиокнопок способа получения (T89/T90,
   `.radios input[type="radio"]` ниже) — неотмеченный чекбокс согласия рисуется в WebKit
   сплошным тёмным accent-color квадратом и выглядит уже отмеченным посетителю. Тот же
   приём фильтрации «только Safari» (`-webkit-hyphens:none`, см. подробный комментарий у
   `.radios`), appearance:none снимает нативный рендер, своя рамка и заливка повторяют
   те же цвета, что нативный accent-color в Chromium: тонкий var(--line) у неотмеченного,
   тёмная рамка #24211D и заливка var(--accent) у отмеченного. Галочку рисует свой ::after
   (приём «повёрнутый уголок рамки»), тёмный #24211D читается на жёлтой заливке в обеих
   темах. position:relative на самом input — чтобы ::after позиционировался внутри него,
   а не в углу страницы. Специфичность селектора та же, что и у `.ask .agree input`
   (третий набор правил, см. model.css/archive-model.css) — на страницах, где чекбокс
   переопределён этим третьим набором, там же лежит и свой WebKit-фикс, здесь его на такие
   чекбоксы не хватило бы (border/background из `.ask .agree input` перебили бы это правило
   тем же уровнем специфичности, подключённым позже). */
@supports (-webkit-hyphens: none){
.agree input[type="checkbox"]{
    appearance:none;-webkit-appearance:none;position:relative;
    border-radius:2px;border:1px solid var(--line);background:var(--bg);
  }
.agree input[type="checkbox"]:checked{
    border:1px solid #24211D;background:var(--accent);
  }
.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);
  }
}

/* T90: было по одной идентичной копии в cart.css и done.css (done.html этот класс не
   использует вообще — правило там оставалось мёртвым после копирования стилей корзины) —
   вынесено сюда, чтобы не поддерживать два места. Правило само по себе не меняет вид ни
   в одном движке (тот же CSS, просто из другого файла), базовый вид переключателей —
   через нативный accent-color, как и было. */
.radios{margin-top:12px;display:flex;flex-direction:column;gap:10px}

.radios label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;
                text-transform:none;letter-spacing:0;color:var(--text);cursor:pointer}

.radios input{width:20px;height:20px;min-height:0;margin:0;accent-color:#FFCB00;flex:none}

/* T90: только WebKit/Safari — рисует оба состояния accent-color радиокнопки одинаковым
   сплошным тёмным кружком (свой независимый рендер accent-color, не такой, как у
   Chromium/Firefox), из-за чего невыбранный вариант читается как выбранный. Chromium и
   Firefox сюда не попадают — у них рендер уже верный (жёлтый кружок с тёмным кольцом у
   выбранного, тонкий контур у невыбранного), трогать его не нужно. `-webkit-hyphens`
   — старое CSS-свойство, которое понимает только WebKit (классический приём фильтрации
   «только Safari», см. CSS-Tricks «How To Target Safari»); проверено на всех трёх движках
   через CSS.supports() — true только в WebKit, false в Chromium и Firefox (в отличие от
   `-webkit-touch-callout`, который в WebKit-сборке Playwright не распознаётся вовсе —
   `@supports` с ним не сработал бы и в тестах, и в реальном Safari эта сборка тоже не
   гарантия). appearance:none (не display:none, чтобы не сломать фокус/Tab/стрелки),
   плюс своя рамка и заливка — вручную повторяют то же сочетание цветов, что и нативный
   accent-color в Chromium: тёмное кольцо `#24211D` (тот же «чернильный» цвет, что уже
   используется на кнопках с жёлтым фоном, например .sum__send) вокруг заливки var(--accent)
   у выбранного варианта, тонкий var(--line) у невыбранного. */
@supports (-webkit-hyphens: none){
.radios input[type="radio"]{
    appearance:none;-webkit-appearance:none;
    border-radius:50%;border:1px solid var(--line);background:var(--bg);
  }
.radios input[type="radio"]:checked{
    border:2px solid #24211D;background:var(--accent);
  }
}

.buy__main{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;font-family:inherit}

/* ── методы и технологии ───────────────────────────────── */
.sec__h2{margin:0;font-size:22px;font-weight:500}

.sec__sub{margin:8px 0 28px;font-size:15px;color:var(--text-muted)}

.sec__note{margin:24px 0 0;font-size:13px;line-height:1.6;color:var(--text-muted)}

.wear{max-width:1100px;padding-top:clamp(28px,4vw,44px)}

.bars{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}

.bars__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px}

.bars__name{grid-column:1 / -1;font-size:15px;line-height:1.4}

/* полосы вырастают, когда блок попадает в поле зрения */
.bars__bar{height:40px;background:var(--line);border:1px solid var(--line);
             transform:scaleX(0);transform-origin:left center;
             transition:transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}

.bars.is-on .bars__bar{transform:scaleX(1)}

.bars__bar--hi{background:var(--accent)}

.bars__val{font-size:15px;font-weight:500;white-space:nowrap;min-width:5ch}

.furs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);
        padding-top:clamp(56px,7vw,96px)}

.fur{display:flex;flex-direction:column;gap:20px}

.fur__ph{aspect-ratio:3/2;background:var(--surface-alt);border:1px dashed var(--line);
           display:grid;place-items:center;padding:16px;text-align:center;
           font-size:13px;line-height:1.5;color:var(--text-muted)}

.fur h3{margin:0;font-size:18px;font-weight:500}

/* T87: заглушка «фото не загрузилось» — в отличие от .card__nophoto/.fur__ph/.news__ph
   (фотографии нет вовсе), тут фотография в базе есть, но её файл не отвечает: <img> остаётся
   в разметке (event error виден на нём же, событие error не всплывает и слушать его иначе,
   чем на самом <img>, нельзя), просто становится невидимым (visibility:hidden, см.
   app/templates/base.html, window.melitaPhotoFallback) — а этот блок занимает ровно его место.
   Родитель обязан быть position:relative и не иметь других абсолютных детей той же рамки —
   .card__link/.gal__thumb/.gal__main/.item__ph/.fav-card__link уже подходят по размеру один
   в один; .card__shot (archive.css) и .zoom (model.css/archive-model.css, там своя
   переопределённая версия) — где понадобилась отдельная рамка. */
.photo-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;background:var(--surface-alt);border:1px dashed var(--line);
  color:var(--text-muted);padding:8px;font-size:12px;line-height:1.35;
}

.fur p{margin:0;font-size:15px;line-height:1.7;text-wrap:pretty}

.gost{margin-top:clamp(56px,7vw,96px);background:var(--surface-alt);
        padding:clamp(40px,5vw,72px) clamp(20px,4vw,56px)}

.gost__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px)}

.gost p{margin:18px 0 0;font-size:15px;line-height:1.7;max-width:65ch;text-wrap:pretty}

.nums{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

.nums > div{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:16px}

.nums dt{font-size:clamp(32px,4vw,48px);font-weight:300;line-height:1;white-space:nowrap}

.nums dd{margin:0;font-size:13px;line-height:1.6;color:var(--text-muted)}

/* ── выделка меха ──────────────────────────────────────── */
.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);
         padding-top:clamp(28px,4vw,44px)}

.intro p{margin:0;max-width:65ch;font-size:16px;line-height:1.6;text-wrap:pretty}

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

.pluses li{display:flex;align-items:center;gap:16px;padding:16px 0;
             border-bottom:1px solid var(--line);font-size:15px;font-weight:500;line-height:1.4}

.pluses svg{flex:none}

.terms{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0;padding:0;
         list-style:none}

/* подписи карточек выравниваются по ряду, а не пляшут от длины заголовка */
.term{background:var(--surface-alt);border:1px solid var(--line);padding:24px;
        display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:10px;align-content:start}

.term h3{margin:0;font-size:16px;font-weight:500;line-height:1.35}

.term h3 b{font-size:24px;font-weight:500}

.term p{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}

.bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,64px);
          padding-top:clamp(56px,7vw,96px)}

.price p{margin:0 0 20px;font-size:15px;line-height:1.7;max-width:40ch;text-wrap:pretty}

.price__links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

.price__links a{font-size:18px;font-weight:500;box-shadow:inset 0 -1px 0 var(--accent)}

.price__links a:hover{color:var(--text)}

/* ── типовой текстовый шаблон ──────────────────────────── */
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}

.doc__side{position:relative;min-width:0}

/* до 1040 меню — горизонтальная лента, дальше — колонка слева */
.doc__nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
            border-bottom:1px solid var(--line)}

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

.doc__nav a{flex:none;padding:12px 14px;font-size:13.5px;white-space:nowrap;
              border-bottom:2px solid transparent;margin-bottom:-1px}

.doc__nav a:first-child{padding-left:0}

.doc__nav a[aria-current="page"]{font-weight:500;border-bottom-color:var(--accent)}

/* T81: страницы без сетки `.doc` кладут `.doc__nav` прямо в поток, а не в грид-колонку — своя
   вертикальная ритмика вместо отступов, которые раньше давал `.doc` своим `gap`. T86: `section_nav.html`
   стал единственным партиалом меню разделов на всех одиннадцати страницах — вертикального варианта
   меню на сайте больше нет вовсе, `--flat` в потоке используется всегда (см. ниже про удалённые
   правила `.doc__nav:not(.doc__nav--flat)` в медиазапросе 1040px). */
.doc__nav--flat{margin:28px 0}

/* T81: замер на 360px показал 41.6px (12px паддинга × 2 + строка 13.5px/1.3) — ниже порога
   44px (design.md §8). `padding-block:14px` даёт те же 44px, что уже приняты в проекте для
   этого порога (`.ftr__list a{padding-block:14px}`, T77). T86: это теперь единственная лента
   меню разделов на сайте — прежняя оговорка «не задевает пять страниц с вертикальным меню»
   больше не актуальна, вертикального меню не осталось. */
.doc__nav--flat a{padding-block:14px}

.doc__lead{margin:0 0 clamp(32px,4vw,56px);max-width:60ch;font-size:16px;line-height:1.7;
             text-wrap:pretty}

/* T86: `about.html`/`director.html`/`delivery.html`/`discount.html`/`gift-cards.html` держали
   65ch-колонку текста как вторую дорожку грида `.doc` (`240px minmax(0,65ch)`, см. медиазапрос
   1040px ниже) — первой дорожкой была колонка вертикального меню. С переводом этих пяти страниц
   на горизонтальное меню `section_nav.html` (вне грида, над контентом) грид им больше не нужен:
   контент — обычный блок в потоке `.wrap`, с тем же левым краем, что у `h1`/хлебных крошек/
   `.doc__lead`, а не колонка, сдвинутая вправо на 240px+gap, как раньше. `max-width:65ch` — то
   же число, что было у второй дорожки грида, поэтому ширина текста не меняется (см. отчёт
   задачи) — меняется только её положение (левый край вместо сдвига). `.doc`/`.doc__side` в
   этом файле не удалены и не должны: их по-прежнему используют TOC-меню `privacy.html` и
   `terms.html` (проверено поиском по всем шаблонам 2026-09-23) — грид этим двум страницам
   всё ещё нужен. */
.doc__body{max-width:65ch}

.prose p{margin:0;font-size:16px;line-height:1.7;text-wrap:pretty}

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

.prose h2{margin:32px 0 12px;font-size:20px;font-weight:500;line-height:1.3}

.prose h2:first-child{margin-top:0}

.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;
            font-size:16px;line-height:1.6}

.prose li{text-wrap:pretty}

.prose li::marker{color:var(--text-muted)}

.prose a{box-shadow:inset 0 -1px 0 var(--accent)}

.prose a:hover{color:var(--text)}

/* широкая таблица скроллится внутри себя, а не тянет страницу */
.tablebox{overflow-x:auto;max-width:100%;margin-top:16px}

.tablebox table{width:100%;min-width:440px;border-collapse:collapse}

.tablebox th{padding:10px 12px;text-align:left;font-size:13px;font-weight:500;
               letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
               border-bottom:1px solid var(--line)}

.tablebox td{padding:12px;font-size:15px;border-bottom:1px solid var(--line)}

.tablebox .num{font-variant-numeric:tabular-nums;white-space:nowrap}

.tablebox .pct{font-size:16px;font-weight:500;white-space:nowrap}

.tablebox tr.is-vip{background:var(--surface-alt)}

.stats{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:16px}

/* число может занять две строки — подписи всё равно начинаются на одной высоте */
.stats > div{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:6px;align-content:start}

.stats b{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:300;line-height:1.15;
           letter-spacing:-.01em;text-wrap:balance}

.stats span{display:block;font-size:13px;line-height:1.5;color:var(--text-muted)}

.docs{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

.docs a{height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:10px;
          border:1px solid var(--line);font-size:14px;font-weight:500}

.docs svg{flex:none}

.ask{margin-top:clamp(40px,5vw,64px);background:var(--surface-alt);
       padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:8px;
       align-items:flex-start}

.ask p{margin:0;font-size:15px}

.ask a{font-size:18px;font-weight:500}

.ask a:hover{color:var(--text-muted)}

/* ── избранное ─────────────────────────────────────────── */
.fav-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
            margin-bottom:clamp(28px,4vw,48px)}

.fav-head p{margin:0;font-size:15px;color:var(--text-muted)}

.fav{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.2vw,34px);
       margin:0;padding:0;list-style:none}

/* пять рядов: снимок, название, мех, цена, кнопки — соседи по ряду выровнены */
.fav > li{display:contents}

.fav-card{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start;
            min-width:0;background:var(--photo-bg)}

.fav-card > *{min-width:0}

.fav-card__link{display:block;position:relative;overflow:hidden;align-self:start}

.fav-card__link img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
                      transition:transform .6s ease}

.fav-card h2{margin:0;padding-top:16px;font-size:14.5px;font-weight:500;line-height:1.35}

.fav-card__fur{margin:0;padding-top:7px;font-size:11.5px;letter-spacing:.06em;
                 text-transform:uppercase;color:var(--text-muted)}

.fav-card__price{margin:0;padding-top:9px;display:flex;align-items:baseline;gap:10px;
                   font-size:15px;font-weight:500}

.fav-card__old{font-size:12.5px;font-weight:400;text-decoration:line-through;
                 color:var(--text-muted)}

.fav-card__btns{padding-top:14px;display:flex;gap:8px;align-items:flex-start}

.fav-card__buy{flex:1;height:48px;display:inline-flex;align-items:center;justify-content:center;
                 background:var(--accent);color:#24211D;font-size:12px;font-weight:600;
                 letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

.fav-card__del{flex:none;height:48px;padding:0 18px;border:1px solid var(--line);background:none;
                 color:inherit;font-size:12px;font-weight:500;letter-spacing:.06em;
                 text-transform:uppercase;cursor:pointer;font-family:inherit}

.fav-card.is-leaving{opacity:0;transform:scale(.98);
                       transition:opacity .25s ease,transform .25s ease}

/* в тёмной теме карточка сидит на светлой подложке — как в каталоге */
:root[data-theme="dark"] .fav-card{background:var(--photo-bg);color:var(--card-text);
                                     padding:0 14px 18px}

:root[data-theme="dark"] .fav-card__link{margin:0 -14px}

:root[data-theme="dark"] .fav-card__fur,
  :root[data-theme="dark"] .fav-card__old{color:var(--card-sub)}

:root[data-theme="dark"] .fav-card__del{border-color:rgba(36,33,29,.22)}

.fav-empty{padding:clamp(48px,8vw,112px) 0;display:flex;flex-direction:column;
             align-items:center;text-align:center;gap:12px}

.fav-empty p{margin:0}

.fav-empty__t{font-size:16px;font-weight:500}

.fav-empty__s{font-size:15px;line-height:1.6;color:var(--text-muted);max-width:40ch;
                text-wrap:pretty}

.fav-empty a{margin-top:16px}

/* ── 404 ───────────────────────────────────────────────── */
.e404{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
        padding:clamp(64px,10vw,140px) 0}

.e404__num{margin:0;font-size:clamp(72px,12vw,160px);font-weight:300;line-height:1;
             letter-spacing:-.02em}

.e404__line{display:block;width:64px;height:1px;background:var(--accent)}

.e404 h1{margin:16px 0 0;font-size:22px;font-weight:500;line-height:1.3}

.e404__sub{margin:0;font-size:16px;line-height:1.6;color:var(--text-muted);max-width:40ch;
             text-wrap:pretty}

.e404__acts{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.e404__call{margin:24px 0 0;font-size:13px;color:var(--text-muted);display:flex;
              flex-wrap:wrap;justify-content:center;gap:4px 8px}

.e404__call a{color:var(--text);font-weight:500}

/* ── новости ───────────────────────────────────────────── */
.news{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.5vw,32px);
        margin:0;padding:0;list-style:none}

/* карточка растянута на четыре ряда сетки: дата, заголовок и лид соседей
     по ряду начинаются на одной высоте, как в карточках каталога */
.news > li{display:contents}

.news__card{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:10px;
              min-width:0;color:var(--text)}

.news__ph{aspect-ratio:3/2;background:var(--surface-alt);border:1px dashed var(--line);
            display:grid;place-items:center;padding:16px;text-align:center;
            font-size:12px;line-height:1.4;color:var(--text-muted);align-self:start}
/* фото новости вместо заглушки — здесь, а не в news.css: карточки новостей выводятся и
   на странице одной новости («Другие новости»), где news.css не подключён */
.news__img{width:100%;height:auto;aspect-ratio:3/2;display:block;object-fit:cover;align-self:start}

.news__date{font-size:12px;line-height:1.4;color:var(--text-muted)}

.news__title{margin:0;font-size:17px;font-weight:500;line-height:1.35;text-wrap:pretty;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.news__lead{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted);text-wrap:pretty;
              display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.pager{margin-top:clamp(40px,5vw,64px)}

.pager ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.pager a,.pager span{width:44px;height:44px;display:grid;place-items:center;
                       font-size:14px;font-weight:500}

.pager a{border:1px solid var(--line);color:var(--text)}

.pager a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#24211D}

.pager a[aria-disabled="true"]{color:var(--text-muted);cursor:default}

.pager .gap{color:var(--text-muted)}

.sub{margin-top:clamp(56px,7vw,96px);background:var(--surface-alt);padding:clamp(32px,4vw,56px)}

.sub__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:center}

.sub__lead{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}

.sub__form{display:flex;flex-direction:column;gap:6px;min-width:0}

.sub__row{display:flex;flex-direction:column;gap:12px}

.sub__row input{height:48px;padding:0 14px;border:1px solid var(--line);background:var(--bg);
                  color:var(--text);font-size:15px;font-family:inherit;width:100%;border-radius:2px}

.sub__row button{height:48px;padding:0 28px;background:var(--accent);color:#24211D;border:none;
                   font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
                   cursor:pointer;font-family:inherit;white-space:nowrap;flex:none}

.sub__done{margin:0;font-size:16px;font-weight:500;display:flex;align-items:center;gap:12px}

/* ── одна новость ──────────────────────────────────────── */
.article{max-width:65ch}

.article__date{display:block;margin-top:12px;font-size:13px;color:var(--text-muted)}

.article__ph{aspect-ratio:16/9;background:var(--surface-alt);border:1px dashed var(--line);
               display:grid;place-items:center;padding:16px;text-align:center;font-size:13px;
               line-height:1.5;color:var(--text-muted);margin:clamp(24px,3vw,40px) 0}

.article__body p{margin:0 0 16px;font-size:16px;line-height:1.7;text-wrap:pretty}

.article__body p:last-child{margin-bottom:0}

.more{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}

.more__all{margin:clamp(24px,3vw,36px) 0 0}

.more__all a{font-size:15px;font-weight:500;box-shadow:inset 0 -1px 0 var(--accent)}

.more__all a:hover{color:var(--text)}

/* ── отзывы ────────────────────────────────────────────── */
.rv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
           gap:16px 24px;max-width:72ch;margin-bottom:clamp(32px,4vw,56px)}

.rv-head p{margin:0;font-size:15px;line-height:1.5;color:var(--text-muted)}

/* ширина в rem, а не в ch -- ch зависит от загруженного шрифта и давал сдвиг при подмене;
   47.7rem = прежние 72ch в Montserrat. */
.reviews{max-width:47.7rem}

.review__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:12px}

.review__head h2{margin:0;font-size:16px;font-weight:500;line-height:1.4}

.review__date{font-size:13px;color:var(--text-muted)}

.review__body{margin:0;font-size:15px;line-height:1.7;text-wrap:pretty}

.review__body.is-clamped{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
                           overflow:hidden}

.review__more{margin-top:10px;padding:0;min-height:44px;background:none;border:none;
                font-size:14px;font-weight:500;color:var(--text);cursor:pointer;font-family:inherit;
                box-shadow:inset 0 -1px 0 var(--accent)}

.rv-form{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);
           border-top:1px solid var(--line);scroll-margin-top:calc(var(--chrome-h,113px) + 24px)}

.rv-form .field textarea{min-height:120px}

.rv-note{margin:12px 0 0;font-size:13px;color:var(--text-muted)}

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

/* на узком экране последний пункт крошек обрезается многоточием, а не уезжает за край */
.crumbs ol{overflow-x:hidden}

.crumbs li{min-width:0}

.crumbs li:not(:last-child){flex:none}

.crumbs li:last-child{overflow:hidden;text-overflow:ellipsis}

/* кнопка «наверх»: показывается, когда прокрутили полтора экрана */
.totop{position:fixed;right:clamp(12px,2vw,24px);
         bottom:calc(clamp(12px,2vw,24px) + env(safe-area-inset-bottom,0px));
         width:48px;height:48px;z-index:50;display:grid;place-items:center;
         background:var(--surface-alt);color:var(--text);border:1px solid var(--line);
         border-radius:2px;cursor:pointer;
         opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
         transition:opacity .25s ease,transform .25s ease,visibility .25s}

.totop.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}

/* избранное: сердечко на плитке каталога и счётчик в шапке */
.card{position:relative}

/* T77: область нажатия — 44×44 (top/right сдвинуты с 10 на 8, box-sizing:border-box,
   padding:2px), а видимый круг остаётся ровно 40×40 и на прежнем месте — background-clip:
   content-box красит только внутри padding, поэтому вид кнопки не меняется. Красящие правила
   ниже переведены с шорткота `background` на `background-color`, потому что шорткот сбрасывает
   background-clip обратно на border-box у любого элемента, к которому применится. */
.card__fav{position:absolute;top:8px;right:8px;width:44px;height:44px;padding:2px;
             box-sizing:border-box;z-index:2;
             display:grid;place-items:center;border:none;border-radius:50%;cursor:pointer;
             background-color:rgba(242,239,232,.9);background-clip:content-box;color:#24211D;
             opacity:.85;transition:opacity .2s ease,background-color .2s ease}

:root[data-theme="dark"] .card__fav{background-color:rgba(36,33,29,.86);color:#F2EFE8}

.card:hover .card__fav,.card__fav:focus-visible,.card__fav[aria-pressed="true"]{opacity:1}

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

.card__fav[aria-pressed="true"] svg{fill:currentColor}

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

.buy__fav[aria-pressed="true"] svg{fill:currentColor}

/* ── фотографии производства ───────────────────────────── */
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,28px);
         align-items:start;margin:clamp(28px,3.5vw,44px) 0 0}

.shot{margin:0;min-width:0}

.shot img{display:block;width:100%;height:auto;background:var(--surface-alt);
            border:1px solid var(--line)}

.shot--tall img{aspect-ratio:4/5;object-fit:cover;object-position:50% 50%}

.shot--low img{object-position:50% 62%}

.shot figcaption{margin-top:10px;font-size:13.5px;line-height:1.55;
                   color:var(--text-muted);text-wrap:pretty}

.shots__note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--text-muted)}

@supports not (backdrop-filter:blur(1px)){
.hdr{background:var(--bg)}
}

@media (hover:hover){
.nav a:hover{border-bottom-color:var(--accent);color:var(--text)}
.icon-btn:hover{background:var(--surface-alt)}
.btn--solid:hover{background:#E6B600;color:#24211D}
.btn--ghost:hover{border-color:var(--text);color:var(--text)}
.btn--outline:hover{background:var(--accent);border-color:var(--accent);color:#24211D}
.hero__btn:hover{background:var(--accent);border-color:var(--accent);color:#24211D}
.hero__btn--pause:hover{background:none;border-color:var(--text);color:var(--text)}
.card__link:hover img{transform:scale(1.02)}
.sections a:hover{color:var(--text)}
.salon__go:hover{background:var(--accent);border-color:var(--accent);color:#24211D}
.ways__msgr a:hover{border-color:var(--text);background:var(--surface-alt)}
.msgr a:hover{border-color:var(--text);background:var(--surface-alt)}
.ftr__msgr a:hover{color:var(--text);border-color:var(--text)}
.buy__main:hover{background:#E6B600}
.docs a:hover{border-color:var(--text);color:var(--text)}
.fav-card__link:hover img{transform:scale(1.02)}
.fav-card__buy:hover{background:#E6B600;color:#24211D}
.fav-card__del:hover{border-color:currentColor}
.totop:hover{background:var(--accent);color:#24211D;border-color:var(--accent)}
.news__card:hover{color:var(--text-muted)}
.pager a:hover{border-color:var(--text);color:var(--text)}
.sub__row button:hover{background:#E6B600}
.review__more:hover{color:var(--text-muted)}
}

/* T77: ссылки подвала — 313×16 px без вертикальных отступов, на тач-экранах меньше 44 px.
   Условие — hover:none (тач, любая ширина) ИЛИ max-width:759px (узкий вьюпорт даже без touch,
   в т.ч. обычный ресайз окна десктопным браузером без эмуляции тача) — так требование
   «сенсорные экраны И узкие ширины» покрыто буквально обеими частями, а десктоп с мышью и
   широким окном (единственный случай, не попадающий ни под одно из двух условий) остаётся
   таким же компактным. 759px — брейкпоинт мобильной раскладки, уже используемый в файле
   (@media (max-width:759px) ниже). gap:0 отключает флекс-гап на это время, чтобы отступ между
   ссылками не удваивался (гап + паддинг): padding-block:14px даёт высоту 44px (16px текста +
   2×14) и совпадает с уже принятым в проекте паттерном `.nav-mob a{padding:14px 0}`. Это не
   брейкпоинт по ширине в смысле T72 (комбинирован с hover:none) — стоит рядом с
   @media (hover:hover), а не в отсортированном блоке ниже. */
@media (hover:none),(max-width:759px){
.ftr__list{gap:0}
.ftr__list a{padding-block:14px}
/* T77dop1: тот же порог 44px для остальных ссылок подвала — телефон, мессенджеры, юридические
   документы. Приём card__fav (растить сам видимый элемент через background-clip) здесь не
   подходит: у текстовых ссылок нет своей заливки для клипа, а у иконок мессенджеров есть видимая
   рамка — тем же приёмом она сама увеличилась бы. Вместо этого — невидимый ::after поверх
   реального бокса (position:absolute, растянут inset-отступами за его край): сам элемент и его
   место в потоке не меняются ни на пиксель, значит и соседние ссылки не сдвигаются, а вид не
   меняется — только нажать можно и рядом. Из-за тесных зазоров в этом углу вёрстки (11px между
   телефонами, 4px до мессенджеров, 10px между строками документов) увеличенные зоны нажатия
   соседних ссылок местами перекрываются — сама видимая ссылка при этом не растёт и не двигается,
   а перекрытие двух телефонов или двух ссылок на документы — небольшая и терпимая цена. */
.ftr__tel::after{content:"";position:absolute;inset:-10px 0}
.ftr__msgr a::after{content:"";position:absolute;inset:-6px}
.ftr__docs a::after{content:"";position:absolute;inset:-15px -4px}
}

/* T72: медиазапросы упорядочены по возрастанию — сначала все max-width (меньшее к большему),
   затем все min-width (меньшее к большему); внутри блоков ничего не переписано, блоки
   перенесены целиком (в т.ч. два блока, которые раньше стояли отдельно от общей группы —
   `.topbar` на max-width:759px и `.rv-head` на min-width:768px). До этой правки порядок был
   вперемешку, из-за чего @media (min-width:600px) (2 колонки `.fav`/`.news`) стоял в файле
   ниже @media (min-width:1040px) (3 колонки тех же селекторов) и побеждал на любой ширине от
   1040px и выше — .fav/.news никогда не получали три колонки. Условия @media (hover:hover),
   @media (prefers-reduced-motion:reduce) и оба @supports не входят в этот порядок (это не
   брейкпоинты по ширине) — вынесены после отсортированного блока, содержимое не менялось. */
@media (max-width:389px){
.hero__nav{gap:8px;padding-inline:12px}
.hero__dot{width:24px}
.hero__bar{width:24px}
.hero__dots{gap:6px}
}

/* сообщения в верхней строке меняются каждые 6 с и на телефоне бывают в одну или две строки;
   высота закреплена по самому высокому (69 px), чтобы смена не сдвигала страницу. */
@media (max-width:759px){
.topbar{min-height:69px}
}

@media (max-width:759px){
.hero__anchor{display:flex;position:absolute;top:0;left:0;width:100%;
                  aspect-ratio:2/3;align-items:center;padding:0 8px;
                  pointer-events:none;z-index:5}
.hero__anchor .hero__nav{position:static;width:100%;gap:0;padding:0;
                  background:none;justify-content:space-between;pointer-events:none}
/* на телефоне остаются только стрелки, без плашки */
.hero__anchor .hero__btn{pointer-events:auto;background:none;border:none}
.hero__anchor .hero__btn svg{width:22px;height:22px;stroke-width:1.6;
                  filter:drop-shadow(0 1px 2px rgba(255,255,255,.85)) drop-shadow(0 0 6px rgba(255,255,255,.55))}
:root[data-theme="dark"] .hero__anchor .hero__btn svg{
                  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(0,0,0,.5))}
.hero__anchor .hero__btn--pause,
    .hero__anchor .hero__dots{display:none}
.slide__text{padding-top:24px}
.grid{gap:16px}
html[data-view="grid"] .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-view="grid"] .card__fur,
    html[data-view="grid"] .card__old{display:none}
.hero__anchor .hero__btn,
    .hero__anchor .hero__btn:hover,
    .hero__anchor .hero__btn:focus{background:none;border:none;color:var(--text)}
.map--tall,.map--wide{height:320px}
}

@media (min-width:600px){
.route{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.bars__row{grid-template-columns:140px minmax(0,1fr) auto}
.bars__name{grid-column:auto}
.fav{grid-template-columns:repeat(2,minmax(0,1fr))}
.news{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub__row{flex-direction:row;align-items:flex-start}
}

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

/* T58 fix 3: этот блок (от 760) и блок @media (min-width:1040px) ниже оба задают `.grid` с
   одинаковой специфичностью; побеждает не более широкий breakpoint, а тот, что ниже по файлу.
   Раньше 1040-блок (3 колонки) шёл раньше 760-блока (2 колонки), поэтому на 1040-1399px
   побеждали именно 2 колонки. Возрастающий порядок (760 → 1040 → 1400) восстанавливает
   намеренное 1/2/3/3/4/4 (между ними теперь стоят другие брейкпоинты — 768/768/900 — они
   `.grid` не трогают и на этот вывод не влияют). */
@media (min-width:760px){
.slide__ph[data-n="1"] img{object-position:50% 10%}
.slide__ph[data-n="2"] img{object-position:50% 0%}
.slide__ph[data-n="3"] img{object-position:50% 8%}
.hero{height:calc(100svh - var(--chrome-h,113px));max-height:680px;min-height:380px}
.slide{grid-template-columns:minmax(0,44%) minmax(0,56%)}
.slide__ph{grid-row:1;grid-column:2;align-self:stretch;aspect-ratio:auto;min-height:0}
.slide__ph img{object-position:50% 25%}
.slide__text{grid-row:1;grid-column:1;align-self:center;
                 padding:clamp(24px,3vw,56px) clamp(24px,3.5vw,64px) 96px}
.hero__nav{position:absolute;left:clamp(24px,3.5vw,64px);bottom:clamp(18px,2.4vw,26px);padding:0}
.viewswitch{display:none}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat .grid{row-gap:40px}
.salon{grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start;
           column-gap:clamp(28px,4vw,56px)}
.furs{grid-template-columns:repeat(2,minmax(0,1fr))}
.terms{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.5vw,32px)}
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(20px,3vw,32px)}
}

/* от 768 px сетка вместо flex, чтобы кнопка «Написать отзыв» не перескакивала на другую строку
   при подмене шрифта (сдвиг макета); justify-items:start держит ширину текста как у flex. */
@media (min-width:768px){
.rv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;justify-items:start}
}

@media (min-width:768px){
.sorter select{font-size:13px}
.field input,.field textarea,.sub__row input,
    .promo__row input,.qty input{font-size:15px}
.crumbs ol{overflow-x:auto}
}

@media (min-width:900px){
.cols2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.gost__in{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
.nums{grid-template-columns:minmax(0,1fr);gap:32px}
.intro{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;
           column-gap:clamp(40px,6vw,96px)}
.bottom{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;
            column-gap:clamp(40px,6vw,96px)}
.sub__in{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}
}

@media (min-width:1040px){
.nav{display:flex}
.burger{display:none}
.nav-mob{display:none !important}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.doc{grid-template-columns:240px minmax(0,65ch);gap:clamp(40px,5vw,96px)}
.doc__side{position:sticky;top:calc(var(--chrome-h,113px) + 24px)}
/* T86: вертикальный столбец меню разделов (`.doc__nav:not(.doc__nav--flat)` и правила его ссылок)
   убран — T86 перевела все одиннадцать страниц раздела на горизонтальную ленту `.doc__nav--flat`,
   второй формы меню на сайте не осталось. `.doc`/`.doc__side` выше не тронуты: их по-прежнему
   держат `privacy.html`/`terms.html` для своего TOC-меню (проверено поиском по всем шаблонам
   2026-09-23) — удалять эти два правила нельзя. */
.fav{grid-template-columns:repeat(3,minmax(0,1fr))}
.news{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1100px){
.terms{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1400px){
.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* T58 fix 1: выше 1920 `.hero` остаётся full-bleed (фон на всю ширину), но его контент —
   `.slide` (текстовая колонка + фото) и `.hero__nav` (стрелки/точки слайдера) — ограничен
   той же коробкой 1600px, что и `.wrap`, и центрирован. Иначе при неизменной высоте 680px
   фото росло вместе с шириной вьюпорта (на 3840 — 2× апскейл поверх нативных 1075px), а
   пустой промежуток между текстом и фото достигал 1103px. Ничего у `.hero` ниже 1921px
   этот блок не меняет — только сам breakpoint. */
@media (min-width:1921px){
/* ширина, а не max-width: `.slide` — сам грид-контейнер с процентными колонками
   (44%/56%), и на некоторых движках max-width на растягиваемом (stretch) грид-элементе
   с процентными треками внутри резолвится не до max-width, а до content-based размера
   (в Chromium наблюдалась ширина ~651px вместо 1600). Явная ширина снимает эту
   неоднозначность: колонки внутри считают проценты от заведомо определённых 1600px. */
.slide{width:1600px;margin-inline:auto}
.hero__nav{left:calc((100% - 1600px) / 2 + clamp(24px,3.5vw,64px))}
}

/* не брейкпоинт по ширине — в возрастающий порядок выше не входит, порядок и содержимое
   не менялись, только физическое место в файле (T72). */
@supports not (grid-template-rows:subgrid){
.card{display:flex;flex-direction:column}
.card__title{min-height:calc(2 * 1.35em)}
.term{display:flex;flex-direction:column}
@media (min-width:760px){.term h3{min-height:calc(3 * 1.35em)}}
.stats > div{display:block}
.stats span{margin-top:6px}
.fav > li{display:block}
.fav-card{display:flex;flex-direction:column}
.fav-card h2{min-height:calc(2 * 1.35em)}
.news > li{display:block}
.news__card{display:flex;flex-direction:column;gap:10px}
.news__title{min-height:calc(2 * 1.35em)}
}

/* не брейкпоинт по ширине — см. комментарий у @supports выше */
@media (prefers-reduced-motion:reduce){
.bars__bar{transform:none !important;transition:none !important}
.fav-card.is-leaving{transition:none}
*{transition:none !important;animation:none !important}
}

/* скрытое поле-ловушка для ботов в формах: человек его не видит и не заполняет */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}