/* ===== Relique «Серый свет» (C5, from v5 «Тёплый бутик») =====
   One palette, one light theme: no palette/theme/font switch, no ?dev. Fonts are ours (C4, WOFF2, ≤ 120 KB),
   no Google Fonts. Statuses («Продано», «Забронирована») use --f-status: NSD Italic 300 now, identity4 later.
   Font urls carry ?v=<sha1[:8]>: tools/site_css_fonts.py writes them, base.html preloads the same url. */
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/nsd-300.woff2?v=eeca22b0) format("woff2")}
@font-face{font-family:"Noto Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nsd-400.woff2?v=2e8fdde8) format("woff2")}
@font-face{font-family:"Noto Serif Display";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/nsd-300i.woff2?v=d1644756) format("woff2")}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/golos-400.woff2?v=a128d266) format("woff2")}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/golos-500.woff2?v=6fb22500) format("woff2")}
/* ===== C17: four screen classes (zz/web/site/breakpoints.py is the only source of these numbers) =====
   phone    <= 599            PHONE
   phone_l  landscape phone   PHONE_L   (height <= 500, width <= 1023: overrides the width class)
   tablet   600–1023          TABLET    (600–1023 and not phone_l)
   small    1024–1279         SMALL
   desktop  >= 1280           DESKTOP    (WIDE = small + desktop)
   A phone rule is written for "PHONE, PHONE_L"; phone_l refinements follow it. Tap sizes hang on (pointer:coarse),
   never on a width; every :hover lives inside (hover:hover) and (pointer:fine) and has a :focus-visible pair.
   TABLET_P (min-width:600px) and (max-width:1279.98px) and (orientation:portrait): a tablet held upright (iPad
            Mini / Air / Pro) stacks the product page (gallery over two text columns) and the home sections.
   Sections: == base == / == header == / == drawer == / == home == / == catalog == / == pdp == / == lightbox ==
   (L3 edits header, drawer, pdp, lightbox; L4 edits catalog, home). */
:root{
  --bg:#ECE6DA; --field:#D8D2C3; --ink:#1C1A17; --olive:#34372B;
  --muted:#5E594F;
  --fg:var(--ink); --stone:var(--field); --tg:var(--field);
  --hair:rgba(28,26,23,.14); --hair-strong:rgba(52,55,43,.42);
  --hg:#34372B; --ho:#ECE6DA; --hbg:radial-gradient(60% 55% at 64% 45%,rgba(236,230,218,.09) 0%,rgba(236,230,218,0) 72%);
  /* hero grounds per model (L4, zz/web/site/hero_lines.py HERO_BG): olive, warm grey and graphite of «Серый свет»
     and two mixes; --ho on each >= 4.7:1 also under the --hbg light spot */
  --hg-olive:#34372B; --hg-umber:#5E574B; --hg-graphite:#2A2824; --hg-moss:#45473A; --hg-ash:#4D4A43;
  --acc:var(--olive); --acc-fg:#ECE6DA; --line:var(--olive); --shadow:rgba(12,14,6,.55); --warn:#8A3F26;
  --on-stone:var(--ink); --on-stone-mut:var(--muted);
  --f-display:"Noto Serif Display",Georgia,serif;
  --f-text:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --f-status:italic 300 1em/1.25 "Noto Serif Display",Georgia,serif;
  --ds:1;
  --frame:24px; --gut:clamp(16px,3.2vw,48px); --hd:72px;
  --sl:max(var(--gut),env(safe-area-inset-left)); --sr:max(var(--gut),env(safe-area-inset-right));
  --sb:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* == base == */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ body{font-size:0.9375rem} }
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
h1,h2,h3{overflow-wrap:break-word}
.mut{color:var(--muted)}
.in{display:inline;padding:0 0 1px}
.ul{background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.wrap{padding-left:var(--sl);padding-right:var(--sr)}
.rub,.num{white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.h3{font:400 calc(1.5rem * var(--ds))/1.2 var(--f-display);margin:0}
[hidden]{display:none!important}

/* photo ground: the studio white/grey disappears into the ground — ground × brightened photo. L8: the ground is a
   multiply layer laid OVER the photo (::after) on white, not the photo multiplied onto the ground: iPhone WebKit
   applied the photo's filter after its blend and every tile came out near white (#FFFAEA instead of #D8D2C3, owner
   27.10). The same picture in Chrome / Firefox / desktop Safari. Also for the photos of the models block (.pic) and
   the comparison thumbs (.cmph .f). */
.ph{position:relative;isolation:isolate;overflow:hidden;background:var(--tg)}
.ph img{width:100%;height:100%;object-fit:contain;filter:brightness(1.16) contrast(1.05)}
.ph:not(.cut):not(.live),.stage .sl.pic,.idx .th.pic{isolation:isolate;overflow:hidden;background:#fff}
.ph:not(.cut):not(.live)::after,.stage .sl.pic::after,.idx .th.pic::after,.cmph .ct .r .f::after{content:"";position:absolute;inset:0;background:var(--tg);mix-blend-mode:multiply;pointer-events:none}
.stage .sl.pic img,.idx .th.pic img,.cmph .ct .r .f img{filter:brightness(1.16) contrast(1.05)}
/* «живые» фото (в руках, в коробке) — честно в кадр целиком, без смешивания */
.ph.live{background:#2a2526}
.ph.live img{object-fit:cover;mix-blend-mode:normal;filter:none;padding:0!important;transform:none!important}
/* cut-outs: one scale everywhere, the bag takes 78% of the width and stands on the bottom */
.ph.cut img{position:absolute;left:11%;top:12%;width:78%;height:78%;object-fit:contain;object-position:50% 100%;mix-blend-mode:normal;filter:none;transform:none}
/* one rule for every cell (home, collections, catalog, similar): the tight-cropped bag fits a 78% x 78% box standing on a shared base; wide bags may take 82% of the width */
.ph.cut img.wide{left:9%;width:82%}
/* pale bags get a hair-line contour so the edge does not melt into the page */
.ph.cut img.pale,.stage .sl img.pale,.idx .th img.pale{filter:drop-shadow(0 0 .6px rgba(34,36,27,.6)) drop-shadow(0 2px 3px rgba(34,36,27,.14))}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;background:var(--acc);color:var(--acc-fg);text-align:center;padding:10px 20px;font:500 1rem/1.15 var(--f-text);transition:opacity .25s;text-decoration:none}
.btn:active{opacity:.8}
.status{font:var(--f-status);letter-spacing:.01em}

/* == header == */
.hd{position:sticky;top:0;z-index:30;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px;align-items:center;height:var(--hd);padding:0 var(--sr) 0 var(--sl);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.scrolled{border-bottom-color:var(--hair)}
.hd nav{display:flex;gap:28px;font-size:0.9375rem;align-items:center;min-width:0;white-space:nowrap}
.hd nav a,.hd nav button{display:inline-flex;align-items:center;min-height:44px}
.hd nav a[aria-current="true"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hd .r{justify-content:flex-end;gap:24px}
.wm{display:inline-flex;align-items:center;line-height:1;color:var(--ink)}
.hd .wm{min-height:44px}
/* explicit width: an svg with width:auto collapses to 0 in the header's auto grid column; ratio = logo viewBox 2230:955 */
.wm .logo{display:block;height:40px;width:calc(40px * 2230 / 955);flex:none;fill:currentColor}
.hd .menu-btn,.hd .srch-m{display:none}
.hd .srch-b{gap:8px}
.hd .srch-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.hd nav a.srch-b[aria-current="true"]{text-decoration:none}
.hd-sv{gap:7px}
.hd-sv .bm{width:13px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.hd .r .n{font-variant-numeric:lining-nums tabular-nums}
.hd .hd-x{white-space:pre}
.hd [hidden]{display:none!important}
@media (min-width:1024px) and (max-width:1279.98px){ .hd nav{gap:20px} .hd .r{gap:20px} }
/* tablet: logo | Каталог, Подборки, Доставка и заказ | лупа, «Отложенные» bookmark, «Связаться» — one line from 600 */
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){
  :root{--hd:64px}
  .hd{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(16px,2.6vw,32px)}
  .hd .wm{grid-column:1;grid-row:1}
  .hd nav.l{grid-column:2;grid-row:1;gap:clamp(12px,2.4vw,24px)}
  .hd nav.r{grid-column:3;grid-row:1;gap:clamp(8px,1.4vw,16px)}
  .wm .logo{height:34px;width:calc(34px * 2230 / 955)}
  .hd .srch-d .t,.hd-sv .t,.hd .hd-x{display:none}
  .hd .srch-d,.hd-sv{min-width:44px;justify-content:center}
}
/* phone: «Меню» + лупа | logo | «Отложенные (N)» as a bookmark */
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  :root{--hd:56px}
  .hd nav.l a.nv,.hd .srch-d,.hd .hd-tg,.hd-sv .t{display:none}
  .hd .menu-btn{display:inline-flex;min-width:44px;font-size:0.9375rem}
  .hd .srch-m{display:inline-flex;min-width:44px;justify-content:center}
  .hd nav.l{gap:8px}
  .hd nav.r{gap:8px}
  .hd-sv{min-width:44px;justify-content:center}
  .wm .logo{height:32px;width:calc(32px * 2230 / 955)}
}
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ :root{--hd:48px} .wm .logo{height:28px;width:calc(28px * 2230 / 955)} }

/* == drawer == (phone only: on >= 600 the navigation is in the header) */
.drawer{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:max(10px,env(safe-area-inset-top)) var(--sr) max(24px,var(--sb)) var(--sl)}
.drawer .top{display:flex;justify-content:space-between;align-items:center;min-height:44px;flex:none}
.drawer .top button,.drawer .top .wm{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:0.9375rem}
.drawer .wm .logo{height:32px;width:calc(32px * 2230 / 955)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer .main{margin-top:28px}
.drawer .main a{display:flex;align-items:center;min-height:48px;font:300 calc(2.5rem * var(--ds))/1.15 var(--f-display);padding:2px 0}
.drawer .legal{margin-top:24px;font-size:0.9375rem}
.drawer .legal a{display:flex;align-items:center;min-height:44px}
.drawer .foot{margin-top:auto;padding-top:24px;font-size:0.9375rem}
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .drawer .main{margin-top:6px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .drawer .main a{font-size:calc(1.75rem * var(--ds));min-height:44px}
  .drawer .legal{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:10px}
  .drawer .foot{padding-top:10px}
}
@media (min-width:600px) and (min-height:500.02px), (min-width:1024px){ .drawer{display:none!important} }

/* == home == */
.frame{padding:0 var(--frame)}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ :root{--frame:0px} }
/* rotating hero: every slide has its ground (--hg) and headline (L4, home.js swaps them with the bag).
   Bags stand on one table line (72% of the hero height), scaled to the same visual height, with a soft contact shadow.
   Change: old bag + caption fade out (.4 s), a short beat on the empty ground, new bag rises 8 px and fades in (.4 s).
   Swipe: home.js (pointer events, touch-action:pan-y keeps the vertical scroll). */
.hero{position:relative;background:var(--hbg);background-color:var(--hg);transition:background-color .6s var(--ease);color:var(--ho);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(calc(100vh - 92px),820px);min-height:min(calc(100svh - 92px),820px);overflow:hidden;touch-action:pan-y;--line:currentColor}
.hero .bags{position:absolute;top:0;bottom:0;left:36%;right:0;pointer-events:none;container-type:size}
.hero .bag{position:absolute;left:0;right:0;top:0;bottom:28%;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.hero .bag.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.hero .bag.on.out{opacity:0;transition:opacity .4s ease}
.hero .fig{position:relative;isolation:isolate;transform:translateY(8px);transition:transform 0s linear .4s}
.hero .bag.on .fig{transform:none;transition:transform .6s var(--ease)}
.hero .fig::after{content:"";position:absolute;z-index:-1;left:4%;right:4%;bottom:-16px;height:30px;background:radial-gradient(closest-side,var(--shadow),transparent)}
.hero .fig img{display:block;width:auto;height:calc(min(46cqh,calc(66cqw / var(--r))) * var(--k,1));max-width:none}
.hero .txt{position:relative;z-index:2;padding:clamp(28px,4.4vw,64px);padding-bottom:clamp(96px,9vw,132px);display:flex;flex-direction:column;justify-content:flex-end}
/* headline: h1 and the aria-hidden copies of the other slides' lines share one grid cell (as tall as the tallest, so
   a swap moves nothing); the font is capped so the widest line (--hl-em, from the font's metrics) fits the column */
.hero{--hl-fs:calc(clamp(2.75rem,5.6vw,5.75rem) * var(--ds))}
.hero .hl{display:grid;container-type:inline-size}
.hero .hl>*{grid-area:1/1;font:300 var(--hl-fs)/1 var(--f-display);font-size:min(var(--hl-fs),calc(100cqi / var(--hl-em,5.6)));letter-spacing:-.02em;margin:0;overflow-wrap:normal;word-break:normal;hyphens:manual}
.hero .hl .gh{visibility:hidden}
.hero .hl h1.hl-on{animation:hl-in .5s var(--ease)}
@keyframes hl-in{from{opacity:0}}
.hero .hl i{font-style:normal;font-weight:300}
.hero h1,.cat-h h1{overflow-wrap:normal}
.hero p{max-width:32ch;font-size:1rem;line-height:1.6;margin:24px 0 26px}
.hero .acts{display:flex;flex-wrap:wrap;gap:0 30px}
.hero .cta{font-size:1rem;display:inline-block}
/* «Смотреть <model>»: the visible label over invisible copies of all labels (one grid cell, as wide as the widest),
   so .acts wraps the same on every slide; the underline is drawn under the label itself */
.hero a.hgo{display:inline-grid;background:none;padding-bottom:0}
.hero .hgo>*{grid-area:1/1;justify-self:start}
.hero .hgo .gx{visibility:hidden;padding-bottom:2px}
.hero .hgo .gv{background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.hero .hgo:focus-visible .gv{background-size:0 1px;background-position:100% 100%}
.hero{--tagb:clamp(24px,3vw,44px)}
/* the caption link is as wide as its text, centred under the bag (L4, ipad-pro-p: a full-width box came 3 px
   from «Смотреть …»); on a phone it is a full row again */
.hero .tag{position:absolute;left:36%;right:0;width:fit-content;max-width:64%;margin:0 auto;bottom:var(--tagb);z-index:2;text-align:center;justify-items:center;display:grid;gap:2px;transition:opacity .4s var(--ease);padding:0 24px}
.hero .tag.out{opacity:0;transition:opacity .4s ease}
.hero .tag .b{font:500 0.875rem/1.4 var(--f-text)}
.hero .tag .m{font:300 calc(2.75rem * var(--ds))/1.05 var(--f-display);letter-spacing:-.015em;margin:2px 0 4px}
.hero .tag .a{font:400 0.875rem/1.45 var(--f-text)}
.hero .tag .p{font:500 0.9375rem/1.45 var(--f-text);font-variant-numeric:lining-nums tabular-nums;margin-top:2px}
.hero .ctl{position:absolute;left:clamp(28px,4.4vw,64px);bottom:clamp(24px,3vw,44px);z-index:3;display:flex;align-items:center;gap:14px;font-size:0.875rem}
.hero .bars{display:flex;gap:4px}
.hero .bars button{position:relative;width:30px;height:44px}
.hero .bars button::before,.hero .bars button::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.hero .bars button::before{opacity:.35}
.hero .bars button::after{transform:scaleX(0);transform-origin:left}
.hero .bars button.done::after{transform:scaleX(1)}
.hero .bars button.on::after{animation:fill var(--dur,6s) linear forwards}
.hero.hold .bars button.on::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.hero .pp{min-height:44px;min-width:44px;padding:0 6px;font-size:0.875rem}
.hero.notrans .bag,.hero.notrans .fig,.hero.notrans .tag{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .hero,.hero .bag,.hero .fig,.hero .tag{transition:none}
  .hero .hl h1.hl-on{animation:none}
  .hero .fig{transform:none}
  .hero .bars button.on::after{animation:none;transform:scaleX(1)}
}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .hero .fig img{height:calc(min(42cqh,calc(84cqw / var(--r))) * var(--k,1))} .hero{min-height:min(70vh,720px);min-height:min(70svh,720px);--tagb:calc(clamp(24px,3vw,44px) + 60px)} .hero{--hl-fs:calc(clamp(1.875rem,5vw,2.875rem) * var(--ds))} }
/* 600–1279 (C17 fix): the bag stands on a line above its caption (caption ≈ 120 px + 24 px air + the shadow), never on it */
@media (min-width:600px) and (max-width:1279.98px) and (min-height:500.02px){ .hero .bag{bottom:max(28%,calc(var(--tagb) + 168px))} }
/* phone: the hero is one screen tall (minus the header, at most 640); bag on top, then text, caption, controls */
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(170px,1fr) auto auto auto;min-height:min(calc(100vh - var(--hd)),640px);min-height:min(calc(100svh - var(--hd)),640px)}
  .hero .bags{position:relative;inset:auto;grid-row:1}
  .hero .bag{top:24px;bottom:20px}
  .hero .fig img{height:min(calc(100cqh - 48px),calc(80cqw / var(--r) * var(--k,1)))}
  .hero .fig::after{bottom:-12px;height:22px}
  .hero{--hl:max(20px,env(safe-area-inset-left));--hr:max(20px,env(safe-area-inset-right))}
  .hero .txt{grid-row:2;padding:0 var(--hr) 0 var(--hl)}
  .hero{--hl-fs:calc(2.625rem * var(--ds))}
  .hero p{margin:12px 0 2px;font-size:0.9375rem;line-height:1.5}
  .hero .cta{font-size:0.9375rem}
  .hero .acts{gap:0 22px}
  .hero .tag{grid-column:1;grid-row:3;position:static;text-align:left;justify-items:start;padding:12px var(--hr) 0 var(--hl);width:auto;margin:10px 0 0;border-top:1px solid color-mix(in srgb,currentColor 24%,transparent);max-width:none;gap:0}
  .hero .tag .m{font-size:calc(1.875rem * var(--ds));margin:0 0 2px}
  .hero .ctl{grid-row:4;position:static;padding:0 var(--hr) 4px var(--hl);gap:10px}
}
/* phone in landscape: text and controls left, the bag right; the whole hero in one screen under the header */
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;min-height:calc(100vh - var(--hd));min-height:calc(100svh - var(--hd))}
  .hero .bags{grid-column:2;grid-row:1/4;margin-right:env(safe-area-inset-right,0px)}
  .hero .txt{grid-column:1;grid-row:1;padding:16px 20px 0 var(--hl);justify-content:flex-end}
  .hero{--hl-fs:calc(1.875rem * var(--ds))}
  .hero p{display:none}
  .hero .tag{grid-column:1;grid-row:2;margin-top:6px;padding:8px 20px 0 var(--hl)}
  .hero .tag .m{font-size:calc(1.5rem * var(--ds))}
  .hero .tag .a{display:none}
  .hero .ctl{grid-column:1;grid-row:3;padding:0 20px 6px var(--hl)}
}

/* model index: manifesto + stage on the left, models on the right (>= 1024); a swipe row of model cards below */
.mi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);padding-top:clamp(72px,9vw,140px);align-items:start}
.mi .big{font:300 calc(2.5rem * var(--ds))/1.12 var(--f-display);letter-spacing:-.01em;margin:0 0 44px;max-width:20ch}
.mi .left{position:sticky;top:96px}
.stage{position:relative;aspect-ratio:4/5;background:var(--stone);overflow:hidden}
.stage .sl{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.stage .sl.on{opacity:1}
.stage .sl img{position:absolute;left:11%;width:78%;top:12%;height:66%;object-fit:contain;object-position:50% 100%}
/* L8: a photo (no cut-out of the lot): the whole frame like a tile, its ground melts into the stage (.pic above) */
.stage .sl.pic img{left:0;top:0;width:100%;height:84%;object-position:50% 50%;transform:scale(1.1)}
.stage .cap{position:absolute;left:24px;right:24px;bottom:20px;font-size:0.875rem;line-height:1.45;display:block}
.stage .cap .p{display:block;font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.idx-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:500 0.9375rem/1.4 var(--f-text);padding-bottom:14px;border-bottom:1px solid var(--ink)}
.idx-h .mut{font-weight:400}
.idx{list-style:none;margin:0;padding:0}
.idx a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 24px;padding:22px 0 20px;border-bottom:1px solid var(--hair)}
.idx .th{display:none}
.idx .b{grid-column:1;font-size:0.875rem;color:var(--muted);line-height:1.3}
.idx .n{grid-column:1;font:300 calc(3.5rem * var(--ds))/1.02 var(--f-display);letter-spacing:-.02em;margin-top:4px}
.idx li.on .n{font-style:italic}
.idx .m{grid-column:2;grid-row:1/3;text-align:right;font-size:0.9375rem;line-height:1.5;font-variant-numeric:lining-nums tabular-nums;padding-bottom:4px}
.idx .m b{display:block;font-weight:500;white-space:nowrap}
.idx .m span{color:var(--muted);white-space:nowrap}
.idx-foot{margin-top:22px;font:500 0.9375rem/1.4 var(--f-text)}
.idx-foot a{display:inline-block;padding:8px 0 2px}
/* phone and tablet: one column; the models are a swipe row of cards (78vw on a phone, 40vw on a tablet) */
@media (max-width:1023.98px){
  .mi{grid-template-columns:minmax(0,1fr);gap:0}
  .mi .left{position:static}
  .mi .big{font-size:calc(1.75rem * var(--ds));margin-bottom:32px;max-width:none}
  .stage{display:none}
  .idx{display:grid;grid-auto-flow:column;grid-auto-columns:78vw;column-gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));padding:18px var(--sr) 6px var(--sl);scroll-padding:0 var(--sr) 0 var(--sl)}
  .idx::-webkit-scrollbar{display:none}
  .idx li{scroll-snap-align:start;min-width:0}
  .idx a{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;height:100%}
  .idx .th{display:block;position:relative;aspect-ratio:5/4;background:var(--stone);margin-bottom:12px}
  .idx .th img{position:absolute;left:11%;top:12%;width:78%;height:76%;object-fit:contain;object-position:50% 100%}
  .idx .th.pic img{inset:0;width:100%;height:100%;object-position:50% 50%;transform:scale(1.22)}
  .idx .b{font-size:0.8125rem}
  .idx .n{font-size:calc(1.75rem * var(--ds));margin:2px 0 4px}
  .idx .m{text-align:left;font-size:0.875rem;padding:0}
  .idx .m b{display:inline;margin-right:10px}
  .idx li.on .n{font-style:normal}
}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .idx{grid-auto-columns:40vw;column-gap:16px} .mi .big{font-size:calc(clamp(1.5rem,3.4vw,2rem) * var(--ds));max-width:28ch} }
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .idx{grid-auto-columns:40vw} }

.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:32px}
.sec-h h2,.h2{font:300 calc(clamp(2rem,3.4vw,3.25rem) * var(--ds))/1.05 var(--f-display);margin:0;letter-spacing:-.015em}
.sec-h .aside{font-size:0.9375rem;max-width:36ch;text-align:right}
.sec-h a.aside{white-space:nowrap;flex:none}
.fresh{padding-top:clamp(90px,10vw,150px)}
/* «Новые поступления»: 8 bags; 6 on phones and tablets (2 or 3 columns), so every row is whole */
@media (max-width:1023.98px){ .fresh .grid>:nth-child(n+7){display:none} }

/* how to order: four numbered steps */
.ord{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);padding-top:clamp(90px,10vw,150px);align-items:start;scroll-margin-top:80px}
.ord .steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ord .steps li{display:grid;grid-template-columns:clamp(52px,6vw,84px) minmax(0,1fr);gap:0 20px;padding:22px 0 24px;border-bottom:1px solid var(--hair);align-items:start}
.ord .steps .n{font:300 calc(clamp(2.875rem,5vw,4.25rem) * var(--ds))/.9 var(--f-display);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.ord .steps b{display:block;font:400 calc(1.5rem * var(--ds))/1.2 var(--f-display);margin:2px 0 6px}
.ord .steps p{margin:0;max-width:52ch;color:var(--muted)}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .ord{grid-template-columns:minmax(0,1fr);gap:24px} }
/* tablet (C17 fix): the heading over the content, the four steps 2 × 2, the questions one column of at most 640 px */
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){
  .ord{grid-template-columns:minmax(0,1fr);gap:28px}
  .ord .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .ord .faq,.ord .more2{max-width:640px}
}
/* questions about an order: the texts of the returns and authenticity pages, short */
.ord .faq-h{margin:clamp(44px,5vw,64px) 0 0}
.ord .faq{margin-top:14px}
.ord .more2{display:flex;flex-wrap:wrap;gap:4px 26px;margin:18px 0 0;font-size:0.9375rem}
.ord .more2 a{padding:8px 0 2px}

/* returns, authenticity (and the privacy policy once it exists): one text page, a heading per section on the left */
.lg{max-width:1080px;padding-top:clamp(40px,5vw,72px)}
.lg h1{font:300 calc(clamp(2.5rem,4.4vw,4rem) * var(--ds))/1.02 var(--f-display);letter-spacing:-.02em;margin:0 0 16px}
.lg .lede{margin:0 0 clamp(36px,4vw,56px);font-size:1.0625rem;line-height:1.55;max-width:54ch;color:var(--muted)}
.lg-s{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px clamp(24px,5vw,72px);padding:22px 0 24px;border-top:1px solid var(--hair)}
.lg-s:first-of-type{border-top-color:var(--hair-strong)}
.lg-s h2{font:400 calc(1.5rem * var(--ds))/1.2 var(--f-display);margin:0}
.lg-s p{margin:0 0 12px;max-width:62ch}
.lg-s ul{margin:0 0 12px;padding-left:1.1em;max-width:62ch}
.lg-s li{margin:0 0 4px}
.lg-s li::marker{color:var(--muted)}
.lg-s>div>:last-child{margin-bottom:0}
.lg .go{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:8px;padding-top:18px;border-top:1px solid var(--hair-strong);font-size:0.9375rem}
.lg .go a{padding:8px 0 2px}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .lg-s{grid-template-columns:minmax(0,1fr)} .lg .lede{font-size:0.9375rem} }

/* подборки v2 (19.10): three rows, one per collection; a row is one line of bags and opens in place into the full set.
   Phone and tablet: the closed row is a swipe strip (a tile is 78vw on a phone, 40vw on a tablet), no arrows */
.cols{padding-top:clamp(90px,10vw,150px);scroll-margin-top:80px}
.cols .sec-h{margin-bottom:clamp(18px,1.6vw,24px)}
.cr{padding:clamp(30px,3.4vw,48px) 0 clamp(34px,3.6vw,52px);border-top:1px solid var(--hair)}
.sec-h+.cr{border-top-color:var(--hair-strong)}
.cr-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px clamp(20px,3vw,48px);margin-bottom:clamp(20px,2.2vw,30px)}
.cr-t .ck{display:block;font-size:0.875rem;margin-bottom:6px}
.cr-t h3{font:300 calc(clamp(1.75rem,2.6vw,2.5rem) * var(--ds))/1.05 var(--f-display);margin:0;letter-spacing:-.01em}
.cr-t h3 a{color:inherit;text-decoration:none}
.cr-h p{margin:10px 0 0;font-size:0.9375rem;line-height:1.5;max-width:46ch}
.cr-h .cr-x{white-space:nowrap;font-size:0.9375rem;padding:10px 0 2px;justify-self:end;font-variant-numeric:lining-nums tabular-nums}
.cr-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);row-gap:clamp(36px,3.6vw,52px)}
.cr .tile .s{display:none}
.cr:not(.open) .cr-l>:nth-child(n+6){display:none}
.cr-f{display:none;gap:0 28px;justify-content:flex-end;margin-top:clamp(24px,2.6vw,36px);font-size:0.9375rem}
.cr-f>*{padding:10px 0 2px}
.cr.open .cr-f{display:flex}
@media (min-width:1024px) and (max-width:1279.98px){ .cr-l{grid-template-columns:repeat(4,minmax(0,1fr))} .cr:not(.open) .cr-l>:nth-child(n+5){display:none} }
@media (max-width:1023.98px){
  /* L4 (galaxy-s23: «Классический вечер» ran under «Вся подборка (105)»): a wrapping row instead of a grid, so the
     title never gets narrower than its longest word; when both do not fit, «Вся подборка» drops under it, right */
  .cr-h{display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:0}
  .cr-t{display:contents}
  .cr-t .ck{flex:0 0 100%;order:1}
  .cr-t h3{flex:1 1 0;order:2}
  .cr-h .cr-x{order:3;margin-left:auto}
  .cr-h p{flex:0 0 100%;order:4;max-width:none}
  .cr-l{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:34px}
  .cr:not(.open) .cr-l{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));padding:0 var(--sr) 6px var(--sl);scroll-padding:0 var(--sr) 0 var(--sl);scrollbar-width:none}
  .cr:not(.open) .cr-l::-webkit-scrollbar{display:none}
  .cr:not(.open) .cr-l>:nth-child(n+5){display:block}
  .cr:not(.open) .cr-l>:nth-child(n+7){display:none}
  .cr .tw{scroll-snap-align:start}
  .cr-f{justify-content:space-between}
}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .cr:not(.open) .cr-l{grid-auto-columns:40vw;column-gap:16px} .cr-l{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .cr:not(.open) .cr-l{grid-auto-columns:40vw} }

/* how we check */
.chk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,130px);padding-top:clamp(90px,11vw,170px);align-items:center}
.chk .pic{aspect-ratio:4/5;overflow:hidden;background:var(--hg);padding:clamp(28px,4vw,56px)}
.chk .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.chk h2{margin:0 0 26px;max-width:16ch}
.chk .lede{max-width:46ch;margin:0 0 30px}
.prom{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair-strong);max-width:600px}
.prom li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:0.9375rem}
.prom li b{font:400 calc(1.25rem * var(--ds))/1.25 var(--f-display)}
.gar{margin:22px 0 0;max-width:600px;padding-top:16px;border-top:1px solid var(--hair);font-size:0.9375rem}
.gar b{font-weight:500}
/* tablet (and a landscape phone): photo and text side by side, the photo at most 60% of the screen height */
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .chk{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start}
  .chk .pic{aspect-ratio:auto;height:min(calc((100vw - 2 * var(--gut) - 32px) * 5 / 11 * 5 / 4),60vh);height:min(calc((100vw - 2 * var(--gut) - 32px) * 5 / 11 * 5 / 4),60svh);padding:24px}
  .prom li{grid-template-columns:1fr;gap:4px}
}
/* phone: the photo is the full width, at most 70% of the screen height */
@media (max-width:599.98px){
  .chk{grid-template-columns:1fr;gap:28px}
  .chk .pic{margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));aspect-ratio:auto;height:min(125vw,70vh);height:min(125vw,70svh);padding:20px}
  .prom li{grid-template-columns:1fr;gap:4px}
}

/* footer: on the page ground */
.ft{margin-top:clamp(100px,12vw,170px);border-top:1px solid var(--hair-strong);padding:clamp(40px,5vw,64px) var(--sr) max(26px,var(--sb)) var(--sl);font-size:0.9375rem}
.ft .cols4{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.ft .wm{display:inline-flex;margin-bottom:14px}
.ft .wm .logo{height:44px;width:calc(44px * 2230 / 955)}
.ft .cols4 a{display:block;line-height:2.1}
.ft .cols4 p{margin:0;max-width:34ch;color:var(--muted)}
.ft .fh{font:500 0.875rem/1.4 var(--f-text);color:var(--ink);margin-bottom:8px;display:block}
.ft .cols4 a.fh{line-height:1.4;padding-top:0}
.ft .fine{display:flex;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:48px;padding-top:16px;border-top:1px solid var(--hair);font-size:0.8125rem;color:var(--muted)}
.ft .fine .legal{display:grid;gap:4px;max-width:62ch}
.ft .q{margin:10px 0 0;color:var(--muted)}
.ft .seller{display:block}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .ft .cols4{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px} .ft .cols4>div:first-child{grid-column:1/-1} }
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .ft .cols4{grid-template-columns:1fr 1fr;gap:28px 20px} .ft .cols4>div:first-child{grid-column:1/-1} }

/* == catalog == */
/* product tile: home, catalog, similar; four lines: brand (small caps), the short name «Kelly 28» (2 lines at most),
   one quiet line, price — one type scale on every class (rem + clamp).
   Columns 2 / 3 / 4 / 4 (breakpoints.CATALOG_COLS; the catalogue next to its filter column: 3 on small), gaps
   12/28, 16/32, 20/36, 24/40; phone_l 3 */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:40px}
@media (min-width:1024px) and (max-width:1279.98px){ .grid{column-gap:20px;row-gap:36px} .catm .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:32px} }
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:28px} }
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tile{display:block}
.tile .ph{aspect-ratio:5/4}
.tile .ph:not(.cut) img{position:absolute;inset:0;transform:scale(1.22);transition:opacity .5s var(--ease),transform .8s var(--ease)}
.tile .ph img.alt{opacity:0;transform:scale(1.04)}
.tile .ph.cut img{transition:opacity .9s ease,transform .8s var(--ease);transform-origin:50% 100%}
.tile:active .ph{opacity:.88}
.tile .meta{padding-top:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;min-width:0;overflow-wrap:anywhere}
.tile .b{font:500 0.75rem/1.4 var(--f-text);text-transform:uppercase;letter-spacing:.06em}
.tile .t{font:400 clamp(0.9375rem,0.875rem + 0.25vw,1.0625rem)/1.25 var(--f-display);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.tile .s{font-size:0.8125rem;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .pr{font:500 clamp(0.875rem,0.85rem + 0.1vw,0.9375rem)/1.4 var(--f-text);margin-top:4px;font-variant-numeric:lining-nums tabular-nums}
.tile .pr.status{font:var(--f-status);font-size:1rem}
/* new arrivals: one tile changes at a time, image and text crossfade together */
.tile.swp .ph img{opacity:0}
.tile.swp .ph img.on{opacity:1}
.tile.swp .mstk{display:grid}
.tile.swp .mstk>.meta{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.tile.swp .mstk>.meta.on{opacity:1;visibility:visible;transition:opacity .9s ease}
/* «Отложить»: a quiet toggle, a bookmark and a word; filled once the bag is put aside. Always fully visible (C17: no hover-only state).
   On a tile (C17 fix) it is the bookmark alone in a 32 px circle at the photo's top right corner, 8 px in; the button
   itself is 44 × 44; the word stays for screen readers */
.sv{display:inline-flex;align-items:center;gap:7px;font:400 0.8125rem/1 var(--f-text);color:var(--fg);white-space:nowrap}
.sv .bm{width:13px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.sv[aria-pressed="true"] .bm{fill:currentColor}
.tw{position:relative;min-width:0}
.tw .sv{position:absolute;z-index:2;top:2px;right:2px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;justify-content:center;color:var(--ink)}
.tw .sv::before{content:"";position:absolute;z-index:-1;inset:6px;border-radius:50%;background:rgba(236,231,222,.85);box-shadow:0 0 0 1px rgba(28,26,23,.06);transition:background-color .25s}
.tw .sv .svt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tw .sv .bm{width:12px;height:14px}

.cat-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;padding-top:clamp(40px,5vw,72px);padding-bottom:26px}
.cat-h h1{font:300 calc(clamp(2rem,1.4rem + 2vw,3.25rem) * var(--ds))/1 var(--f-display);margin:0;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.cat-h .hh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.cat-h .hh .c{font:400 0.9375rem/1.4 var(--f-text);letter-spacing:0;color:var(--muted)}
.cat-h .cnt{font-size:0.9375rem;text-align:right;color:var(--muted)}
.cat-h .reset{color:var(--fg);padding:10px 0 2px;margin-top:2px;background-position:0 100%}
.cat-h .ask-l{display:inline-block;margin-top:8px;color:var(--fg);padding:6px 0 2px}
.cat-h.coln .ct{min-width:0}
.cat-h.coln .ck{display:block;font-size:0.875rem;margin-bottom:10px}
.cat-h.coln .cl{margin:12px 0 0;font-size:1rem;line-height:1.5;max-width:52ch}
.coln .cn-a{display:inline-flex;flex-wrap:wrap;gap:0 24px;font-size:0.9375rem;color:var(--fg)}
.coln .cn-a a,.coln .cn-a button{padding:10px 0 2px}
@media (max-width:1023.98px){ .cat-h{display:block} .cat-h .cnt{text-align:left;margin-top:12px} .cat-h .cnt:empty{display:none} }
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .cat-h{padding-top:18px;padding-bottom:16px} }
/* search by model name */
.qbox{display:flex;align-items:center;gap:12px;max-width:620px;border-bottom:1px solid var(--hair-strong);margin:0 0 22px;transition:border-color .2s}
.qbox:focus-within{border-bottom-color:var(--fg)}
.qbox svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none;color:var(--muted)}
.qbox input{flex:1 1 auto;min-width:0;min-height:50px;border:0;border-radius:0;background:transparent;padding:0;font-size:1.0625rem;outline:none;-webkit-appearance:none;appearance:none}
.qbox input::placeholder{color:var(--muted);opacity:1}
.qbox input::-webkit-search-cancel-button{display:none}
.qbox .qx{flex:none;font-size:0.875rem;color:var(--muted);min-height:44px;padding:0 2px}
@media (max-width:1023.98px){ .qbox{max-width:none;margin-bottom:12px} .qbox input{font-size:1rem} }
/* the catalogue's own box is compact, in the bar «Фильтры / Порядок» (C17 fix); a phone searches from the header's magnifier */
.fbar .qbox{flex:1 1 180px;max-width:300px;margin:0;border-bottom:0;gap:8px}
.fbar .qbox input{min-height:44px;font-size:0.9375rem}
.fbar .qbox svg{width:16px;height:16px}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .fbar .qb-l{display:none} }
@media (pointer:coarse){ .fbar .qbox input{font-size:1rem} }

/* the filters (C17): one form. The bar «Фильтры (N)» + count + «Порядок»; the filters in <dialog class="fsheet">:
   a bottom sheet on a phone, a side drawer on a tablet, the sticky left column on >= 1024. Without JS (no html.js)
   the dialog is an ordinary column of fields with «Показать» */
.catf{margin:0}
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;min-height:48px;border-top:1px solid var(--hair-strong);border-bottom:1px solid var(--hair);background:var(--bg);font-size:0.9375rem}
.fbtn{display:none;align-items:center;gap:6px;min-height:44px;font-weight:500}
.js .fbtn{display:inline-flex}
.fcnt{white-space:nowrap}
.fbar .srt{margin-left:auto}
.fbar .srt{min-width:0;max-width:100%}
.fbar .srt select{max-width:100%;text-overflow:ellipsis}
.fbar .sl-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sel select{field-sizing:content;appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;min-height:44px;padding:4px 16px 4px 0;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 6px) 55%,calc(100% - 2px) 55%;background-size:4px 4px;background-repeat:no-repeat}
.sel select option{color:#211A1C;background:#fff}
.sel.on select{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fsheet{display:block;position:static;inset:auto;margin:0;padding:0;border:0;background:none;color:inherit;width:auto;height:auto;max-width:none;max-height:none;overflow:visible}
.fs-h{display:none}
.fs-t{font:500 0.8125rem/1.4 var(--f-text);color:var(--muted);margin:22px 0 4px}
.fs-b>.fs-t:first-child{margin-top:6px}
/* one facet pattern (C17 fix): a row = an 18 px box (several) or circle (one), the text in ink, the counter right */
.fg{border:0;margin:0;padding:0;min-width:0}
.fg>legend{float:left;width:100%;padding:0}
.fg>legend+*{clear:both}
.fg>legend.fs-t{margin:22px 0 6px}
.fl{display:grid;grid-template-columns:minmax(0,1fr);font-size:0.9375rem}
.fo{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;color:var(--fg);text-decoration:none;cursor:pointer;font-size:0.9375rem}
.fo input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fo .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fo .c{color:var(--muted);font-size:0.8125rem;font-variant-numeric:lining-nums tabular-nums}
.fo.off{opacity:.4;cursor:default}
.fo.off input{cursor:default}
.mk{flex:none;position:relative;width:18px;height:18px;border:1px solid var(--hair-strong);background:transparent}
.mk.r{border-radius:50%}
.fo input:checked+.mk,.fo[aria-pressed="true"] .mk{background:var(--ink);border-color:var(--ink)}
.fo input:checked+.mk::after,.fo[aria-pressed="true"] .mk:not(.r)::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.fo[aria-pressed="true"] .mk.r,.fo input:checked+.mk.r{background:var(--bg);box-shadow:inset 0 0 0 4px var(--ink)}
.fo[aria-pressed="true"] .mk.r::after,.fo input:checked+.mk.r::after{content:none}
.fo input:focus-visible+.mk,.fo input:focus-visible+.cw,.fo.fch:has(input:focus-visible){outline:1px solid var(--fg);outline-offset:3px}
.fl .fo{border-bottom:1px solid var(--hair)}
/* sizes: chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fo.fch{min-height:44px;padding:0 14px;border:1px solid var(--hair-strong);gap:0}
.fo.fch:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fo.fch.off{border-style:dashed}
/* colours: 24 px swatches with the word */
.sws{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));column-gap:20px;margin-top:2px}
.fo.fsw{gap:10px}
.cw{flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(28,26,23,.18)}
.fo input:checked+.cw{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink)}
.fo:has(input:checked) .n{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fo.fch:has(input:checked) .n{text-decoration:none}
.cw-black{background:#1C1A17}.cw-white{background:#F7F5F0}.cw-beige{background:#D8C4A2}.cw-brown{background:#7A5236}
.cw-grey{background:#9B978E}.cw-red{background:#A33A2E}.cw-pink{background:#E2AAB6}.cw-orange{background:#D7793C}
.cw-yellow{background:#E1C24E}.cw-green{background:#56704A}.cw-blue{background:#3D5C8C}
.cw-multi{background:conic-gradient(#A33A2E,#E1C24E,#56704A,#3D5C8C,#E2AAB6,#A33A2E)}
/* the chosen filters over the grid, each with its cross */
.achips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--hair-strong);font-size:0.875rem;color:var(--fg);text-decoration:none}
.chip svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4}
.chip.clr{border-color:transparent;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:0 4px}
@media (pointer:coarse){ .achips .chip{min-height:44px} }
.fs-r{margin:14px 0 0;font-size:0.9375rem}
.fs-f{padding:16px 0 0}
.fs-f .btn{min-height:48px}
.fs-f .btn[disabled]{opacity:.6}
/* phones and tablets with JS: the filters wait in the closed dialog */
@media (max-width:1023.98px){
  .js .fsheet:not([open]){display:none}
  .fsheet[open]{display:flex;flex-direction:column;position:fixed;z-index:60;background:var(--bg);color:var(--fg);overflow:hidden;overscroll-behavior:contain}
  .fsheet::backdrop{background:rgba(20,16,12,.42)}
  .fsheet[open] .fs-h{display:flex;justify-content:space-between;align-items:center;flex:none;min-height:56px;padding:4px var(--sr) 4px var(--sl);border-bottom:1px solid var(--hair)}
  .fs-ttl{font:400 calc(1.5rem * var(--ds))/1.2 var(--f-display)}
  .fs-x{min-height:44px;min-width:44px;font-size:0.9375rem}
  .fsheet[open] .fs-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--sr) 16px var(--sl)}
  .fsheet[open] .fs-f{flex:none;padding:12px var(--sr) max(12px,var(--sb)) var(--sl);border-top:1px solid var(--hair);background:var(--bg)}
  .fbar{position:sticky;top:var(--hd);z-index:10}
}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .fsheet[open]{inset:auto 0 0 0;width:100%;max-width:100%;max-height:85vh;max-height:85svh}
  .fsheet .brs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
}
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .fbar{position:static} .fsheet[open]{max-height:100vh;max-height:100svh} }
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){
  .fbar{min-height:56px}
  .fsheet[open]{inset:0 auto 0 0;width:min(380px,60vw);height:100%;max-width:none;max-height:none}
}
/* >= 1024: the filters are the left column (240 / 260 px), sticky under the header, scrolling inside */
@media (min-width:1024px){
  .catl{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:36px;grid-template-areas:"q q" "side bar" "side main";align-items:start}
  .catl.bare{display:block}
  .catf{display:contents}
  .catf .qbox{grid-area:q}
  .fbar{grid-area:bar;margin-bottom:clamp(20px,2.4vw,32px)}
  .fsheet{grid-area:side;position:sticky;top:calc(var(--hd) + 16px);max-height:calc(100vh - var(--hd) - 16px);max-height:calc(100svh - var(--hd) - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 8px 16px 0}
  .js .fs-f,.js .fbtn{display:none}
  .catm{grid-area:main;min-width:0}
}
@media (min-width:1280px){ .catl{grid-template-columns:260px minmax(0,1fr);column-gap:40px} }
/* the model strip over the grid */
.mods{display:flex;gap:10px 32px;overflow-x:auto;scrollbar-width:none;padding:6px 0 10px;margin-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--hair);overscroll-behavior-x:contain}
.mods::-webkit-scrollbar{display:none}
.mods .n{font:400 calc(1.125rem * var(--ds))/1.2 var(--f-display);justify-self:start;padding-bottom:2px}
.mods .c{font-size:0.8125rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.mods-l a{display:grid;grid-template-columns:auto;align-content:center;gap:2px;flex:none;min-height:48px;text-align:left;text-decoration:none;color:inherit;scroll-snap-align:start}
.mods-l a[aria-pressed="true"] .n{background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
/* L7: «‹ ›» over the edges that still hide models (mods.js; pointer:fine only): the page ground fades the cut-off
   names, the circle is the button; above the hairline, so the border runs on under them */
.modw{position:relative}
.mod-a{position:absolute;top:0;bottom:11px;z-index:1;width:96px;display:flex;align-items:center;color:var(--fg)}
.mod-a.l{left:0;justify-content:flex-start;background:linear-gradient(to right,var(--bg) 40%,transparent)}
.mod-a.r{right:0;justify-content:flex-end;background:linear-gradient(to left,var(--bg) 40%,transparent)}
.mod-a span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bg);border:1px solid var(--hair-strong)}
.mod-a svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.mod-a[hidden]{display:none}
.mod-a:focus-visible span{border-color:var(--fg)}
@media not all and (pointer:fine){ .mod-a{display:none} }
@media (max-width:1023.98px){ .mods{margin-right:calc(-1 * var(--sr));padding-right:var(--sr);scroll-snap-type:x proximity;gap:10px 24px} }
/* phone: one line of 44 px, the counter next to the name */
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .mods{padding:0;margin-bottom:16px;gap:0 20px}
  .mods-l a{grid-template-columns:auto auto;align-items:baseline;column-gap:6px;min-height:44px}
  .mods .n{font-size:calc(1rem * var(--ds))}
}
.colnote{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:0.9375rem;margin:0 0 32px}
.colnote button{white-space:nowrap;padding:10px 0 2px}
.colnote b{font:400 calc(1.375rem * var(--ds))/1.1 var(--f-display)}
.more{margin-top:clamp(48px,5vw,72px);padding-top:18px;border-top:1px solid var(--hair);font-size:0.9375rem;color:var(--muted)}
.more a{color:var(--fg)}
.empty{grid-column:1/-1;padding:56px 0 80px;max-width:720px}
.empty h3{font:300 calc(2.25rem * var(--ds))/1.1 var(--f-display);margin:0 0 12px}
.empty p{margin:0 0 12px}
.empty a,.empty button{display:inline-block;padding:8px 0 2px;margin-right:22px}
.empty .askm{margin:20px 0 16px}
.empty .askm .btn{display:flex;padding:0 24px;margin:0}
.empty .sim-h{font-size:calc(1.5rem * var(--ds));margin-top:32px}
.empty .sim a{margin-right:22px}
.pager{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;align-items:center;gap:18px}
.pager .more-b{max-width:360px}
.pager .pg{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;font-size:0.9375rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.pager .pg a,.pager .pg span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.pager .pg a{color:var(--fg)}
.pager .pg [aria-current]{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.pager:empty{display:none}
/* «Не нашли нужную модель?»: home (under the model index), catalog (under the grid, on an empty result) */
.askm{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 32px;padding:22px 24px;background:var(--field);border:1px solid var(--hair)}
.askm h3{font:400 calc(1.5rem * var(--ds))/1.2 var(--f-display);margin:0 0 6px}
.askm p{margin:0;font-size:0.9375rem;line-height:1.5;color:var(--muted);max-width:52ch}
.askm .btn{width:auto;min-height:48px;white-space:nowrap;padding:0 24px}
.mi .askm{margin-top:32px;grid-template-columns:1fr;justify-items:start}
.cat-ask{margin-top:clamp(48px,5vw,72px)}
@media (max-width:599.98px){ .askm{grid-template-columns:1fr;padding:20px 18px} .askm .btn{width:100%;white-space:normal} .mi .askm{justify-items:stretch} }

/* the page of saved bags */
.svp{max-width:880px;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(60px,8vw,120px)}
.svp h1{font:300 calc(clamp(2.5rem,4vw,3.5rem) * var(--ds))/1.05 var(--f-display);letter-spacing:-.02em;margin:0 0 8px}
.svp .lede{margin:0 0 30px;color:var(--muted);font-size:0.9375rem;max-width:52ch}
.svl{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-strong)}
.svl li{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.svl .pa{grid-row:span 2;align-self:stretch;display:flex;align-items:center}
.svl .ph{aspect-ratio:1;width:100%}
.svl .ph:not(.cut) img{transform:scale(1.15)}
.svl .ph.cut img{left:8%;width:84%;top:10%;height:80%;object-position:50% 50%}
.svl .m{display:grid;gap:1px;align-self:end}
.svl .b{font:500 0.8125rem/1.4 var(--f-text)}
.svl .t{font:400 calc(1.3125rem * var(--ds))/1.2 var(--f-display)}
.svl .s{font-size:0.875rem;color:var(--muted)}
.svl .pr{font:500 1rem/1.3 var(--f-text);text-align:right;align-self:end;font-variant-numeric:lining-nums tabular-nums}
.svl .x{grid-column:2 / -1;justify-self:start;align-self:start;font-size:0.875rem;color:var(--muted);padding:6px 0;min-height:44px}
.svp .go{margin-top:30px;max-width:420px}
.svp .small{font-size:0.875rem;color:var(--muted);margin:10px 0 0;max-width:52ch}
.svp .none{border-top:1px solid var(--hair-strong);padding-top:26px}
.svl li.off .b,.svl li.off .t,.svl li.off .pr{color:var(--muted)}
.svl .pr.status{font:var(--f-status);font-size:1.0625rem}
.svl li.off .ph img{filter:grayscale(1) contrast(.7) brightness(1.15)}
.svp .svn{margin-top:16px}
.svx{display:grid;justify-items:start;gap:10px;margin:0 0 30px;max-width:420px}
.svx .small{margin:0}
.svx .ul{font-size:0.9375rem;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.svs{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);max-width:640px}
.svs h2{font:400 calc(1.3125rem * var(--ds))/1.2 var(--f-display);margin:0}
.svs-r{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.svs-r input{flex:1 1 260px;min-width:0;min-height:48px;padding:0 12px;border:1px solid var(--hair-strong);border-radius:0;background:transparent;color:var(--fg);font:400 0.875rem/1.2 var(--f-text);-webkit-appearance:none;appearance:none}
.svs-r .btn{width:auto;flex:0 0 auto;min-height:48px;padding:0 20px;font-size:0.9375rem}
.svs-r .svs-n{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-strong)}
@media (max-width:599.98px){
  .svl li{grid-template-columns:84px minmax(0,1fr);gap:2px 16px;align-items:start}
  .svl .pa{grid-row:span 3;align-self:start}
  .svl .pr{text-align:left;align-self:start}
  .svl .x{grid-column:2;padding:12px 0}
}

/* error page (404 / 410) */
.err{padding-top:clamp(48px,7vw,110px)}
.err h1{font:300 calc(clamp(2.5rem,5vw,4rem) * var(--ds))/1.05 var(--f-display);margin:0 0 18px;letter-spacing:-.01em}
.err .lede{margin:0 0 28px;font-size:1.0625rem;line-height:1.55;max-width:54ch;color:var(--muted)}
.err .go{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:0.9375rem}
.err .more-h{font:400 calc(1.75rem * var(--ds))/1.2 var(--f-display);margin:clamp(56px,6vw,88px) 0 24px}

/* == pdp == */
.crumb{font-size:0.875rem;padding-top:12px;padding-bottom:12px;color:var(--muted)}
.crumb a{display:inline-block;padding:10px 0}
.crumb span{margin:0 8px;opacity:.6}
.back{display:none}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .crumb span,.crumb a.ul:not(:first-child),.crumb a:not(:first-child){display:none!important}
  .crumb:has(+ .back){display:none}
  .back{display:block;padding-top:2px;padding-bottom:2px;font-size:0.875rem}
  .back a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
}
/* two columns from 600: tablet 11fr / 9fr, small 54 %, desktop 58 % (<= 760 px); a phone is one column */
.pdp{display:grid;grid-template-columns:minmax(0,min(58%,760px)) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start}
/* L7: on a desktop the text column is capped (38 %, at most 600 px) and the gallery takes the rest — at 1512 808 / 532,
   at 1920 1128 / 600 whatever the window height (it was 760 / 968 with an 826 px button); the photo stays within the
   .gal-f max-height, a wider frame only widens the stone ground around it */
@media (min-width:1280px){ .pdp{grid-template-columns:minmax(0,1fr) minmax(0,min(600px,38%))} }
@media (min-width:1024px) and (max-width:1279.98px){ .pdp{grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:40px} }
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .pdp{grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:24px} .info{max-width:640px} }
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .pdp{grid-template-columns:minmax(0,1fr);gap:18px} }
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .pdp{grid-template-columns:minmax(0,min(50%,calc(100vh - 48px - 56px))) minmax(0,1fr);grid-template-columns:minmax(0,min(50%,calc(100svh - 48px - 56px))) minmax(0,1fr);gap:24px} }
/* the gallery: a swipe strip of the main photos + thumbnails (see _gallery.html) */
.gallery{min-width:0}
.gal-w{display:flex;flex-direction:column;gap:12px}
.gal-st{position:relative;min-width:0}
.gal-s{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline-offset:-2px}
.gal-s::-webkit-scrollbar{display:none}
.gal-f{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;aspect-ratio:1/1;background:var(--stone);cursor:zoom-in}
.gallery .ph.live{background:#2a2526}
/* Лиля 28.10: a bare chevron, no circle — a light halo keeps it visible on dark «live» photos */
.gal-a{display:none;position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;padding:0;background:none;color:var(--fg);border:0;align-items:center;justify-content:center;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9))}
.gal-a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.gal-a.l{left:12px}.gal-a.r{right:12px}
.gal-a[disabled]{opacity:0;pointer-events:none}
.gal-count{display:none}
.gal-cap{font-size:0.8125rem;color:var(--muted);margin-top:12px;min-height:1.4em}
.thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:9px}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:none;width:76px;height:76px;position:relative;scroll-snap-align:start}
.thumbs .ph{width:100%;height:100%;background:var(--stone)}
.thumbs button .ph img{padding:6px}
.thumbs button::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--fg);transform:scaleX(0);transition:transform .3s var(--ease)}
.thumbs button[aria-current="true"]::after{transform:scaleX(1)}
.thumbs .detph .ph{background:#24201C}
.thumbs .detph .ph::after{content:none}
.thumbs .detph .ph img{padding:0;object-fit:cover;mix-blend-mode:normal;filter:none}
.thumbs .detph span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;background:rgba(20,16,12,.6);color:#F3F1E6;font-size:0.75rem;line-height:1.25;font-variant-numeric:tabular-nums lining-nums}
.gal-dbtn{display:none;font-size:0.875rem;margin-top:10px;padding:6px 0 2px}
/* >= 1024: sticky, the photo + thumbnails never taller than the window */
@media (min-width:1024px){
  .gallery{position:sticky;top:calc(var(--hd) + 16px)}
  .gal-f{max-height:calc(100vh - var(--hd) - 16px - 92px);max-height:calc(100svh - var(--hd) - 16px - 92px)}
}
/* desktop: the thumbnails are a vertical strip left of the photo, scrolling inside its own height */
@media (min-width:1280px){
  .gal-w{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:stretch}
  .gal-st{grid-column:2;grid-row:1}
  .thumbs{grid-column:1;grid-row:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;padding:0;contain:size;min-height:0}
  .thumbs button::after{left:auto;top:0;bottom:0;right:-6px;width:1px;height:auto;transform:scaleY(0)}
  .thumbs button[aria-current="true"]::after{transform:scaleY(1)}
}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .thumbs{gap:8px} .thumbs button{width:64px;height:64px} }
/* a tablet held upright, 600–1279 (C17 fix): the gallery is the full width — a square slide of at most 58 % of the
   screen height, centred, the neighbours' edges showing — and under it two columns: heading, price and contact on
   the left, condition and specifications on the right */
@media (min-width:600px) and (max-width:1279.98px) and (orientation:portrait){
  .pdp{grid-template-columns:minmax(0,1fr);gap:20px}
  .gallery{position:static}
  .gal-w{display:flex;flex-direction:column;gap:12px}
  .gal-st{container-type:inline-size}
  .gal-s{--slide:min(72cqw,50vh,740px);--slide:min(72cqw,50svh,740px);gap:12px;padding:0 calc((100cqw - var(--slide)) / 2)}
  .gal-f{flex:0 0 var(--slide);width:var(--slide);max-height:none;scroll-snap-align:center}
  .thumbs{justify-content:safe center;flex-direction:row;overflow-x:auto;overflow-y:hidden;contain:none;padding:0 0 9px}
  .thumbs button::after{left:0;right:0;top:auto;bottom:-7px;width:auto;height:1px;transform:scaleX(0)}
  .thumbs button[aria-current="true"]::after{transform:scaleX(1)}
  .info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,4vw,48px);max-width:none;align-items:start}
  .i-more .cond{margin-top:4px;padding-top:0;border-top:0}
  .crumb{padding-bottom:4px}
  .i-main .head{padding-bottom:14px}
  .i-main .price{padding:14px 0}
  .i-more .sp{margin-top:28px}
}
/* phone: swipe, counter «1 / N», no thumbnails; the photo leaves room for the header and the bar */
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .gal-w{gap:0}
  .thumbs{display:none}
  .gal-f{max-height:calc(100vh - 56px - 64px - var(--sb));max-height:calc(100svh - 56px - 64px - var(--sb));cursor:default}
  .gal-count{display:block;position:absolute;z-index:2;right:12px;bottom:12px;padding:3px 9px;border-radius:12px;background:rgba(236,231,222,.85);font-size:0.8125rem;line-height:1.4;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;pointer-events:none}
  .gal-dbtn{display:inline-block;margin-top:0}
}
@media (max-width:599.98px){
  .gallery{margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl))}
  .gal-dbtn,.gallery>.gal-cap{margin-left:var(--sl)}
  .gal-count{right:var(--sr)}
}
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .gal-f{max-height:calc(100vh - 48px);max-height:calc(100svh - 48px)} }

.info{padding-bottom:24px;min-width:0}
.info .head{padding:4px 0 26px;border-bottom:1px solid var(--hair)}
.info .brand{font:500 0.9375rem/1.4 var(--f-text)}
.info .model{font:300 calc(clamp(1.75rem,1.2rem + 1.6vw,2.5rem) * var(--ds))/1.1 var(--f-display);letter-spacing:-.015em;margin:4px 0 8px}
.info .attrs{font:400 0.9375rem/1.5 var(--f-text);color:var(--muted);margin:0}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .info .head{padding-bottom:18px} }
/* phone (C17 fix): under the photo the brand, the short name, the price and the button; the description line after them */
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .i-main{display:flex;flex-direction:column}
  .i-main .head{display:contents}
  .i-main .brand{order:1;padding-top:2px}
  .i-main .model{order:2;margin-bottom:0}
  .i-main .price{order:3;padding:10px 0 16px}
  .i-main .buy{order:4}
  .i-main .attrs{order:5;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
  .i-main .art{order:6}
  .i-main .sublinks{order:7}
}
.price{padding:22px 0 22px}
.price .now{font:500 1.625rem/1 var(--f-text);font-variant-numeric:lining-nums tabular-nums}
.price .pn{margin:12px 0 0;font-size:0.875rem;line-height:1.5;color:var(--muted);max-width:46ch}
.price .seen{margin:6px 0 0;font-size:0.8125rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.price .st{margin-top:10px;font-size:1.25rem}
.price .now.status{font:var(--f-status);font-size:1.875rem}
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px){ .price{padding:16px 0} }
.ordnote{margin:12px 0 0;font-size:0.875rem;color:var(--muted);display:grid;gap:2px}
.buy{display:flex;gap:10px}
.buy .btn{flex:1;width:auto}
.buy .sv{min-height:52px;padding:0 20px;font-size:0.9375rem;box-shadow:inset 0 0 0 1px var(--hair-strong);transition:box-shadow .25s}
/* phones and tablets (and an upright iPad Pro): «Связаться с менеджером» takes the row on one line, «Отложить» is the bookmark alone */
@media (max-width:1023.98px), (min-width:600px) and (max-width:1279.98px) and (orientation:portrait){ .buy .sv{width:52px;padding:0;justify-content:center;flex:none} .buy .sv .svt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }
.art{margin:14px 0 0;font-size:0.875rem;color:var(--muted);display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.art .num{color:var(--fg)}
.art .cp{font-size:0.875rem;color:var(--fg)}
.cp{font-size:0.8125rem;color:var(--muted)}
.cp[data-done]{color:var(--fg)}
.sublinks{display:flex;gap:4px 26px;margin-top:6px;font-size:0.9375rem;flex-wrap:wrap}
.sublinks>*{padding:12px 0}
.sublinks .ul{background-position:0 calc(100% - 12px)}

/* condition: the grade as a word, then a five-step track, «Хорошее» to «Новое»: every step named, the current one in ink; one summary */
.cond{margin-top:30px;padding-top:20px;border-top:1px solid var(--hair-strong)}
.cond .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cond .row a{font-size:0.9375rem;padding:10px 0 2px}
.cond .g{font:400 calc(1.375rem * var(--ds))/1.2 var(--f-display);margin-top:8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}   /* L7: a long grade puts the link under it, flush left */
.cond .g a{font:400 0.9375rem/1.4 var(--f-text)}
.cond .sc{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 6px;font-size:0.8125rem;line-height:1.3;color:var(--muted)}
.cond .sc li{position:relative;padding-top:11px;border-top:1px solid var(--hair-strong)}
.cond .sc li[aria-current="true"]{color:var(--fg);font-weight:500}
.cond .sc li[aria-current="true"]::before{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--fg)}
.cond .why{margin:10px 0 0;font-size:0.8125rem;line-height:1.4;color:var(--muted)}
.cond .sum{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-size:0.9375rem;line-height:1.55}
.cond .imp{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-size:0.9375rem;line-height:1.55;color:var(--warn)}
.cond .imp b{font-weight:500}
.cond .imp + .sum{margin-top:8px;padding-top:0;border-top:0}
/* authenticity: a short block under the condition, the owner-approved line and a link to the page */
.auth{margin-top:30px;padding-top:20px;border-top:1px solid var(--hair-strong)}
.auth p{margin:10px 0 0;font-size:0.9375rem;line-height:1.55;max-width:56ch}
.auth a{display:inline-block;font-size:0.9375rem;padding:8px 0 2px;margin-top:6px}

/* specifications: fixed label / value rows */
.sp{margin-top:40px}
.sp>h3{padding-bottom:12px;border-bottom:1px solid var(--hair-strong)}
.sp .kv{margin:0}
.sp .kv div{display:grid;grid-template-columns:36% minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:0.9375rem;line-height:1.45}
.sp .kv dt{color:var(--muted)}
.sp .kv dd{margin:0;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.sp .kv dd small{display:block;font-size:0.8125rem;color:var(--muted);margin-top:2px}
.sp .kv dd .fit1{display:block;margin-top:6px}
.sp .kv .lotrow{font-size:0.8125rem;color:var(--muted);padding:10px 0 0;border-bottom:0}
.sp .kv .lotrow dt,.sp .kv .lotrow dd{font-size:0.8125rem}

/* what fits inside: one ladder of things, the same for every bag; the steps that go in are in ink, like the condition scale */
.fit{margin-top:40px}
/* a quiet label (sentence case, the brief has no caps); the verdict is the only serif line */
.fit h3{font:500 0.8125rem/1.4 var(--f-text);color:var(--muted);margin:0;letter-spacing:.01em}
.fit .vd{font:400 calc(1.375rem * var(--ds))/1.25 var(--f-display);margin:4px 0 0}
.fit .lad{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 6px;font-size:0.8125rem;line-height:1.3;color:var(--muted)}
.fit .lad li{position:relative;display:flex;flex-direction:column;gap:7px;padding-top:12px;border-top:1px solid var(--hair-strong)}
.fit .lad svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;opacity:.5}
.fit .lad li.on{color:var(--fg)}
.fit .lad li.on svg{opacity:1}
.fit .lad li.on::before{content:"";position:absolute;left:0;right:-6px;top:-2px;height:3px;background:var(--fg)}
.fit .lad li.top::before{right:0}
/* the snug step: half way, a dashed rule and the icon at full contrast (never the grey of a step that is not reached) */
.fit .lad li.tg{color:var(--fg)}
.fit .lad li.tg svg{opacity:1}
.fit .lad li.tg::before{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;background:repeating-linear-gradient(90deg,var(--fg) 0 5px,transparent 5px 9px)}
.fit .lad small{display:block;font-size:0.8125rem;font-style:italic;margin-top:-7px}
.fit .note{font-size:0.8125rem;color:var(--muted);margin:14px 0 0;max-width:56ch}
.fit .note a{color:var(--fg)}
/* phone: the six steps stay one row, one scale; a word only under the reached step and the snug one */
@media (max-width:599.98px){
  .fit .vd{font-size:calc(1.25rem * var(--ds))}
  .fit .lad{gap:0 4px;margin-top:12px}
  .fit .lad li{padding-top:10px;gap:6px;align-items:center;text-align:center}
  .fit .lad li.on::before{right:-4px}
  .fit .lad li.top::before{right:0}
  .fit .lad svg{width:24px;height:24px;stroke-width:1.75}
  .fit .lad li .n{display:none}
  .fit .lad li.top .n{display:block;white-space:nowrap}
  /* next to the snug step the reached word leans left, the snug step says only «впритык» (the verdict names the thing) */
  .fit .lad.has-tg li.top .n,.fit .lad li:last-child .n{align-self:flex-end;text-align:right}
  .fit .lad li:first-child .n{align-self:flex-start}
  .fit .lad li.tg small{margin-top:0;white-space:nowrap;align-self:flex-start}
  .fit .note{margin-top:12px}
}

/* sizes of one model in one scale: one px per cm for the row (fr columns share the free width by the length), bags on one base line */
.szs{margin-top:28px;padding-top:18px;border-top:1px solid var(--hair)}
.szs h4{font:500 0.9375rem/1.4 var(--f-text);margin:0}
.szs .row{display:grid;grid-template-rows:auto auto;column-gap:14px;margin-top:18px;overflow-x:clip}
.szs .row>*{grid-row:span 2;display:grid;grid-template-rows:subgrid;min-width:0;color:inherit;text-decoration:none}
.szs .im{display:block;align-self:end;min-width:0}
.szs .row img{display:block;max-width:none;height:auto;transition:opacity .3s,filter .3s}
.szs .row a img{filter:grayscale(1);opacity:.38}
.szs .c{position:relative;display:flex;flex-direction:column;margin-top:10px;padding-top:9px;border-top:1px solid var(--hair-strong);font-size:0.8125rem;line-height:1.3;color:var(--muted);font-variant-numeric:lining-nums tabular-nums;hyphens:auto;overflow-wrap:break-word}
.szs .c b{font-weight:400}
.szs .cur .c{color:var(--fg)}
.szs .cur .c b{font-weight:500}
.szs .cur .c::before{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--fg)}
.szs .note{font-size:0.8125rem;color:var(--muted);margin:12px 0 0;max-width:56ch}
@media (max-width:599.98px){ .szs .row{column-gap:8px} }

.acc{margin-top:34px;border-top:1px solid var(--hair-strong)}
.acc details{border-bottom:1px solid var(--hair)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;font-size:0.9375rem;min-height:52px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:9px;height:9px;background:linear-gradient(currentColor,currentColor) center/9px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 9px no-repeat;transition:transform .3s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p{margin:0 0 18px;font-size:0.9375rem;max-width:52ch;color:var(--muted)}
.acc details p a{color:var(--fg)}

/* full condition report */
.rep{margin-top:clamp(80px,9vw,140px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(32px,6vw,110px);padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--hair-strong);scroll-margin-top:90px}
.rep h2{font:300 calc(2.5rem * var(--ds))/1.05 var(--f-display);margin:0 0 16px;letter-spacing:-.015em}
.rep .when{margin:0 0 6px;font-size:0.9375rem;color:var(--muted);max-width:36ch}
.rep .ask{display:inline-block;font-size:0.9375rem;padding:8px 0 2px}
.zm{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-strong)}
.zm li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:6px 28px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.zm .z{font:400 calc(1.25rem * var(--ds))/1.2 var(--f-display);display:flex;gap:12px;align-items:baseline}
.zm .z::before{content:"";flex:0 0 7px;height:7px;background:var(--ink);transform:translateY(-4px) rotate(45deg)}
.zm .nt{font-size:0.9375rem}
.zm .nt.w{color:var(--warn)}
.zm .na{font-size:0.8125rem;color:var(--muted)}
.zm li.nn .z::before{background:none;border:1px solid var(--ink);box-sizing:border-box}
.zm li.imp .z::before{background:var(--warn)}
.zm li.imp .nt.w{color:var(--warn)}
.zm .tg{font:500 0.8125rem/1 var(--f-text);color:var(--warn);margin-left:2px}
.zm li.nn .nt{color:var(--muted)}
/* each remark on its own line with its own photos; the part is named once */
.zm .rms{display:flex;flex-direction:column;gap:14px;min-width:0}
/* a remark: the words, then a strip of large tiles; on a phone a remark with 1-2 photos (or none) keeps the words left, the tiles right */
.zm .rm{display:flex;flex-direction:column;gap:8px;min-width:0}
.zm .rm .nt{padding-top:2px}
/* 16.10: every photo of a remark in one strip that scrolls in place (swipe, trackpad); a click opens the viewer */
.fph{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px;min-width:0}
.fph button{scroll-snap-align:start}
.fph.few{flex:none;overflow:visible}
.fph::-webkit-scrollbar{display:none}
.fph button{position:relative;flex:none;width:132px;height:132px;padding:0;border:0;background:var(--stone);cursor:zoom-in;overflow:hidden}
.fph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.fph button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.fph .more.m{display:none}
.fph .more{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(20,16,12,.52);color:#F3F1E6;font:500 0.9375rem/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums}
@media (max-width:1279.98px){ .fph button{width:112px;height:112px} }
/* phone: four tiles fill the row (about 84 px), the fourth carries «+N»; one or two photos sit right of the words */
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .fph:not(.few) button{width:104px;height:104px}
  .fph.few button{width:84px;height:84px}
  .zm .rm.few{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px}
  .zm .rm.few .nt{flex:1 1 auto;min-width:0}
}
@media (max-width:1023.98px){ .rep{grid-template-columns:1fr;gap:28px} }
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .zm li,.zclean{grid-template-columns:1fr;gap:4px} }
.zclean{padding:18px 0;border-bottom:1px solid var(--hair);font-size:0.9375rem;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:6px 28px;align-items:baseline}
.zclean .z{font:400 calc(1.25rem * var(--ds))/1.2 var(--f-display);color:var(--muted);display:flex;gap:12px;align-items:baseline}
.zclean .z::before{content:"";flex:0 0 7px;height:7px;border:1px solid var(--muted);transform:translateY(-4px) rotate(45deg);box-sizing:border-box}
.zempty{padding:24px 0;border-top:1px solid var(--hair-strong);max-width:46ch}
.zempty h3{font:300 calc(1.875rem * var(--ds))/1.1 var(--f-display);margin:0 0 10px}
.zempty p{margin:0 0 6px}
/* this model in the catalog: one row per bag, the current one tinted; the other rows open their cards */
.cmp{margin-top:clamp(72px,8vw,120px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,6vw,110px);padding-top:clamp(28px,3.6vw,48px);border-top:1px solid var(--hair-strong)}
.cmp h2{font:300 calc(clamp(1.75rem,2.6vw,2.25rem) * var(--ds))/1.08 var(--f-display);margin:0 0 14px;letter-spacing:-.01em}
.cmp .lede{margin:0;font-size:0.9375rem;color:var(--muted);max-width:36ch}
.ct{--cols:72px minmax(0,1.1fr) minmax(0,1.7fr) 96px 128px 88px;font-size:0.9375rem;line-height:1.4;font-variant-numeric:lining-nums tabular-nums}
.cmp.wsz .ct{--cols:minmax(0,1.2fr) 72px minmax(0,1.1fr) minmax(0,1.5fr) 96px 128px 88px}
.ct ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-strong)}
.ct li{border-bottom:1px solid var(--hair)}
.ct-h,.ct .r{display:grid;grid-template-columns:var(--cols);gap:0 16px;align-items:baseline;padding:14px 12px}
.ct-h{padding-top:0;padding-bottom:10px;font-size:0.8125rem;color:var(--muted)}
.ct .r{color:inherit;text-decoration:none;transition:background-color .25s}
.ct .r.cur{background:var(--stone)}
.ct .p{text-align:right;white-space:nowrap}
.ct .r .p{font-weight:500}
.ct .o{text-align:right;font-size:0.875rem;color:var(--muted)}
.ct .cur .o{color:var(--fg);font-weight:500}
.ct .mu{color:var(--muted)}
.ct .m{display:none}
.ct .z small{display:block;font-size:0.8125rem;color:var(--muted)}
@media (max-width:1023.98px){ .cmp{grid-template-columns:1fr;gap:20px} }
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .ct-h{display:none}
  .ct .r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c p" "m o";gap:4px 16px;padding:14px 10px}
  .ct .r>span{display:none}
  .ct .r>.c,.ct .r>.p,.ct .r>.m,.ct .r>.o{display:block}
  .ct .c{grid-area:c;font:400 calc(1.1875rem * var(--ds))/1.25 var(--f-display)}
  .ct .p{grid-area:p}
  .ct .m{grid-area:m;font-size:0.875rem;color:var(--muted);line-height:1.45}
  .ct .m span{display:block}
  .ct .o{grid-area:o;align-self:end}
}
/* PDP «Другие экземпляры этой модели» (owner 22.10): photo, size, condition, price; the current row tinted */
.cmph .ct{--cols:56px minmax(0,1.3fr) minmax(0,1.2fr) 128px 88px}
.cmph .ct .r{align-items:center;padding-top:10px;padding-bottom:10px}
.cmph .ct .r .f{width:56px;aspect-ratio:4/5;overflow:hidden;position:relative;isolation:isolate;background:#fff}
.cmph .ct .r .f img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .cmph .ct .r{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"f z p" "f c o";gap:2px 14px}
  .cmph .ct .r>.f,.cmph .ct .r>.z{display:block}
  .cmph .ct .f{grid-area:f}
  .cmph .ct .z{grid-area:z;font:400 calc(1.1875rem * var(--ds))/1.25 var(--f-display)}
  .cmph .ct .z small{font:400 0.8125rem/1.4 var(--f-text)}
  .cmph .ct .c{grid-area:c;font:400 0.875rem/1.45 var(--f-text);color:var(--muted)}
  .cmph .ct .r.cur .c{color:var(--on-stone-mut)}
}
/* text on the stone panel (the stage caption on the home page, the current row of the comparison) stays dark in every theme */
.stage .cap,.ct .r.cur{color:var(--on-stone)}
.ct .r.cur .mu,.ct .r.cur small,.ct .r.cur .m{color:var(--on-stone-mut)}
.ct .cur .o{color:var(--on-stone)}
.sim{margin-top:clamp(90px,10vw,150px)}
.sim .sec-h h2{font-size:calc(clamp(1.625rem,2.4vw,2rem) * var(--ds))}
/* similar bags: whole rows only (8 = 4 × 2 or 2 × 4; 6 = 3 × 2 on a tablet and a landscape phone) */
@media (min-width:600px) and (max-width:1023.98px) and (min-height:500.02px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){ .sim .grid>:nth-child(n+7){display:none} }
/* strips that scroll in place: arrows only with a mouse */
.sx{position:relative;min-width:0}
.sx-b{display:none!important}

/* the sticky «Связаться» bar: phones only (C17); appears once the main button is above the top edge.
   body keeps its height as padding, so the bar never covers the footer */
.mbar{display:none}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  body:has(.mbar){padding-bottom:calc(64px + var(--sb))}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:calc(64px + var(--sb));padding:0 var(--sr) var(--sb) var(--sl);background:var(--bg);border-top:1px solid var(--hair-strong);transform:translateY(100%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
  .mbar.on{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .mbar .p{font:500 0.9375rem/1.3 var(--f-text);font-variant-numeric:lining-nums tabular-nums;min-width:0}
  .mbar .p small{display:block;font-size:0.8125rem;font-weight:400;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar .btn{width:auto;flex:none;padding:0 22px;min-height:48px}
}
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  body:has(.mbar){padding-bottom:calc(48px + var(--sb))}
  .mbar{height:calc(48px + var(--sb))}
  .mbar .btn{min-height:44px}
}

/* cookie banner #ck (L3, consent.js): fixed at the bottom, so it never shifts the layout; html.cnst-on gives body its
   height as padding (--ckh), so the footer scrolls out from under it. L7: a slim full-width bar everywhere — from
   600 px the text and the two buttons in one row (64 px on a desktop: the hero gives up --ckh of its height while it
   is open, so the caption and the price stay in view), on phones two lines of text over one row of buttons,
   lifted above the PDP «Связаться» bar while that is shown (a transform: no layout shift). Under the menu (50), the filter sheet and the lightbox */
.cnst{position:fixed;z-index:45;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px;padding:9px var(--sr) calc(10px + var(--sb)) var(--sl);background:var(--bg);color:var(--fg);border-top:1px solid var(--hair-strong);font-size:0.875rem;line-height:1.45;transition:transform .35s var(--ease)}
.cnst p{margin:0;max-width:110ch}
.cnst-b{display:flex;gap:8px}
.cnst .btn{width:auto;flex:1 1 auto;min-height:44px;padding:0 16px;font-size:0.9375rem;white-space:nowrap}
.cnst .cnst-n{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair-strong)}
html.cnst-on body{padding-bottom:var(--ckh,0px)}
@media (min-width:1024px){
  html.cnst-on .hero{min-height:min(calc(100vh - 92px - var(--ckh,0px)),820px);min-height:min(calc(100svh - 92px - var(--ckh,0px)),820px)}
  /* the pinned columns stay clear of the bar: the filter column gets shorter; the home model index and, on a
     landscape tablet, the PDP gallery with its thumbnails underneath (taller than the window minus the bar) are
     not pinned while the bar is open */
  html.cnst-on .fsheet{max-height:calc(100vh - var(--hd) - 16px - var(--ckh,0px));max-height:calc(100svh - var(--hd) - 16px - var(--ckh,0px))}
  html.cnst-on .mi .left{position:static}
}
@media (min-width:1024px) and (max-width:1279.98px){ html.cnst-on .gallery{position:static} }
.ft .lk{display:flex;flex-wrap:wrap;gap:0 20px}
.ft .lk a,.ft .lk button{color:var(--ink);font:inherit;text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:3px}
@media (max-width:599.98px), (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .cnst{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px var(--sr) calc(8px + var(--sb)) var(--sl);font-size:0.75rem;line-height:1.4}
  html.cnst-on body:has(.mbar){padding-bottom:calc(var(--ckh,0px) + 64px + var(--sb))}
  body:has(.mbar.on) .cnst{transform:translateY(calc(-64px - var(--sb)))}
}
@media (max-width:1023.98px) and (max-height:500px) and (orientation:landscape){
  .cnst{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;padding-top:8px;padding-bottom:calc(8px + var(--sb))}
  html.cnst-on body:has(.mbar){padding-bottom:calc(var(--ckh,0px) + 48px + var(--sb))}
  body:has(.mbar.on) .cnst{transform:translateY(calc(-48px - var(--sb)))}
}

/* == lightbox == */
.lbx{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;background:#14110E;color:#F1ECE6}
.lbx.open{display:flex}
.lbx:focus{outline:none}
.lbx .ul{color:#F1ECE6;font-size:0.9375rem;padding:12px 4px;min-height:44px;min-width:44px}
.lbx button:focus-visible{outline:1px solid rgba(241,236,230,.55);outline-offset:2px}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:max(8px,env(safe-area-inset-top)) max(clamp(16px,3vw,32px),env(safe-area-inset-right)) 8px max(clamp(16px,3vw,32px),env(safe-area-inset-left))}
.lb-num{font-size:0.875rem;opacity:.8;font-variant-numeric:tabular-nums lining-nums}
.lb-tools{display:flex;gap:6px 26px;align-items:center}
/* the stage: a fixed overlay; swipe = pointer events, zoom = the browser's own pinch (touch-action:pinch-zoom) */
.lb-st{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 max(clamp(16px,3vw,32px),env(safe-area-inset-right)) 0 max(clamp(16px,3vw,32px),env(safe-area-inset-left));touch-action:pinch-zoom;user-select:none;-webkit-user-select:none}
.lb-st img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;touch-action:pinch-zoom;-webkit-user-drag:none;-webkit-touch-callout:none}
.lb-bot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px max(clamp(16px,3vw,32px),env(safe-area-inset-right)) max(18px,var(--sb)) max(clamp(16px,3vw,32px),env(safe-area-inset-left))}
.lb-bot #lbPrev{justify-self:start}
.lb-bot #lbNext{justify-self:end}
.lb-cw{text-align:center;min-width:0}
.lb-cap{margin:0;font:400 calc(1.125rem * var(--ds))/1.3 var(--f-display)}
.lb-sub{margin:4px 0 0;font-size:0.8125rem;line-height:1.4;opacity:.7;display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;font-variant-numeric:tabular-nums lining-nums}
.lb-sub span:empty{display:none}
.lbx [hidden]{display:none!important}
/* phones and tablets swipe; «Назад» / «Дальше» on >= 1024 and wherever there is a mouse */
@media (max-width:1023.98px){ .lbx button.lb-nv{display:none} .lb-bot{grid-template-columns:1fr;padding-top:6px} .lb-bot:has(.lb-cap:empty){display:none} .lb-st{padding:0} }
@media (hover:hover) and (pointer:fine){ .lbx button.lb-nv{display:inline-block} .lb-bot{grid-template-columns:auto 1fr auto} .lb-bot:has(.lb-cap:empty){display:grid} }

.view{display:none}
.view.on{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* == touch == (pointer:coarse): every target at least 44 × 44, never by width */
@media (pointer:coarse){
  :where(a.ul:not(.in),button.ul:not(.in)){display:inline-block}
  a.ul:not(.in),button.ul:not(.in){padding-top:12px!important;padding-bottom:12px!important;background-position:0 calc(100% - 10px)}
  .crumb a{padding:12px 0}
  .crumb a.ul{min-width:44px;text-align:center;background:none;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--line)}
  .hero .bars{gap:8px}
  .hero .bars button{width:44px}
  .hero .bars button::before,.hero .bars button::after{left:4px;right:4px}
  .hero a.hgo{padding-bottom:10px!important}
  .cr-t h3 a{display:inline-flex;align-items:center;min-height:44px}
  .ft .cols4 a{line-height:1.4;padding:13px 0;min-height:44px}
  .ft .cols4 .fh,.ft .cols4 a.fh{padding:13px 0;margin-bottom:0}   /* L7: span.fh too: «Покупателям» and «Каталог» on one line */
  .ft .fine a,.ft .lk button{display:inline-block;padding:12px 0}
  .ft .fine a.ul.in{background-position:0 calc(100% - 10px)}   /* the line under the text, not under the padding */
  .ord .more2 a,.lg .go a,.idx-foot a,.cr-h .cr-x,.err .go a{min-height:44px}
  .mods-l a{min-height:44px;min-width:44px}
  .cat-h .reset,.cat-h .ask-l,.coln .cn-a a{display:inline-flex;align-items:center;min-height:44px}
  .gal-dbtn,.rep .ask,.cond .row a,.auth a{min-height:44px}
  .cp{display:inline-flex;align-items:center;min-height:44px}
  .acc summary{min-height:52px}
  .stage .cap{min-height:44px}
  input,select,textarea{font-size:1rem}
}

/* touch, >= 600: the wider hero controls stay clear of the caption */
@media (pointer:coarse) and (min-width:600px){ .hero{--tagb:calc(clamp(24px,3vw,44px) + 60px)} }

/* == hover == only with a mouse; every effect has its :focus-visible pair */
@media (hover:hover) and (pointer:fine){
  .ul:hover,.hero .hgo:hover .gv{background-size:0 1px;background-position:100% 100%}
  .hero .pp:hover{text-decoration:underline;text-underline-offset:3px}
  .stage .cap:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .cr-t h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .tile:hover .ph img.alt{opacity:1}
  .tile:hover .ph img.has-alt:not(.alt){opacity:0}
  .tile:hover .ph:not(.cut) img:only-child{transform:scale(1.26)}
  .tile:hover .ph.cut img{transform:scale(1.03)}
  .ft .cols4 a:hover{text-decoration:underline;text-underline-offset:3px}
  .crumb a:hover,.back a:hover{color:var(--fg)}
  .btn:hover{opacity:.86}
  .tw .sv:hover::before{background:var(--bg)}
  .buy .sv:hover{box-shadow:inset 0 0 0 1px var(--fg)}
  .svl .x:hover,.qbox .qx:hover{color:var(--fg)}
  .szs .row a:hover img{opacity:.7}
  .szs a:hover .c b{text-decoration:underline;text-underline-offset:3px}
  .ct a.r:hover{background:var(--field)}
  .ct a.r:hover .o{text-decoration:underline;text-underline-offset:3px}
  .fph button:hover img{transform:scale(1.05)}
  .thumbs .detph:hover span{background:rgba(20,16,12,.72)}
  .fo:hover .n,.chip:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .fo.fch:hover{border-color:var(--ink)}
  .fo.off:hover .n{text-decoration:none}
  .idx a:hover .n{font-style:italic}
  .gal-a{display:flex}
  .gal-f{cursor:zoom-in}
  .mod-a:hover span{border-color:var(--fg)}
}
.ul:focus-visible{background-size:0 1px;background-position:100% 100%}
.hero .pp:focus-visible,.cr-t h3 a:focus-visible,.ft .cols4 a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.stage .cap:focus-visible .t,.szs a:focus-visible .c b,.ct a.r:focus-visible .o{text-decoration:underline;text-underline-offset:3px}
.tile:focus-visible .ph.cut img{transform:scale(1.03)}
.crumb a:focus-visible,.back a:focus-visible,.svl .x:focus-visible,.qbox .qx:focus-visible{color:var(--fg)}
.fo:focus-visible .n,.chip:focus-visible{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn:focus-visible{opacity:.86}
.tw .sv:focus-visible{outline-offset:-4px}
.buy .sv:focus-visible{box-shadow:inset 0 0 0 1px var(--fg)}
.szs .row a:focus-visible img{opacity:.7}
.ct a.r:focus-visible{background:var(--field)}
.thumbs .detph:focus-visible span{background:rgba(20,16,12,.72)}
.idx a:focus-visible .n{font-style:italic}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}