:root{
  --gr-sun:#FFF100; --gr-steel:#9FA1A0; --gr-ink:#22261C; --gr-grass:#6E7A3C;
  --gr-timber:#D6B197; --gr-band:#F1F2EE; --gr-line:#DDDFD7; --gr-soft:#5C6152;
  --gr-shell:1120px; --gr-step:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--gr-ink);
  font:400 16.5px/1.62 "Hanken Grotesk",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gr-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--gr-grass)}
h1,h2,h3,h4{font-family:"Archivo",system-ui,Arial,sans-serif;font-weight:700;line-height:1.16;margin:0}
h1{font-size:clamp(27px,4.1vw,40px);letter-spacing:-.015em}
h2{font-size:clamp(21px,2.5vw,27px);letter-spacing:-.01em}
h3{font-size:18px}
p{margin:0 0 .95em}
.rail{max-width:var(--gr-shell);margin:0 auto;padding-left:var(--gr-step);padding-right:var(--gr-step)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--gr-sun);padding:8px 12px;z-index:60}

/* ------- утилитарная полоса + шапка ------- */
.strip{background:var(--gr-ink);color:#EDEFE6;font-size:13px}
.strip .rail{display:flex;gap:16px;justify-content:space-between;align-items:center;
  min-height:34px;flex-wrap:wrap}
.strip span{display:block}
.top{border-bottom:1px solid var(--gr-line);background:#fff;position:sticky;top:0;z-index:40}
.top .rail{display:flex;align-items:center;gap:18px;min-height:68px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.mark img{width:118px}
.mark b{display:none}
.menu{display:flex;gap:18px;align-items:center;flex:1 1 auto;flex-wrap:wrap}
.menu a{font-size:14.5px;text-decoration:none;color:var(--gr-soft);white-space:nowrap}
.menu a:hover,.menu a[aria-current]{color:var(--gr-ink);box-shadow:inset 0 -2px 0 var(--gr-sun)}
.topbuy{flex:none}
.topbuy img{width:188px}
.burger{display:none;flex:none;border:1px solid var(--gr-line);background:#fff;
  width:40px;height:36px;padding:0;cursor:pointer;border-radius:3px}
.burger i{display:block;height:2px;background:var(--gr-ink);margin:4px auto;width:19px}

/* ------- штамп ------- */
.buy{display:inline-block;border:0;background:none;padding:0;cursor:pointer;line-height:0}
.buy img{width:100%;max-width:330px}
.buy.wide{display:block;width:100%}
.buy.wide img{max-width:none}

/* ------- мозаика главной ------- */
.mosaic{display:grid;grid-template-columns:1.25fr 1fr;gap:3px;background:var(--gr-line);
  border-bottom:4px solid var(--gr-sun)}
.mosaic figure{margin:0;position:relative;background:#fff;overflow:hidden}
.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.mosaic .pair{display:grid;grid-template-rows:1fr 1fr;gap:3px}
.mosaic figcaption{position:absolute;left:0;bottom:0;background:var(--gr-ink);color:#fff;
  font:600 12.5px/1 "Archivo",Arial,sans-serif;padding:7px 11px}

/* ------- секции ------- */
.band{background:var(--gr-band);border-top:1px solid var(--gr-line);border-bottom:1px solid var(--gr-line)}
section{padding:40px 0}
.lede{font-size:19px;color:var(--gr-soft);max-width:62ch;margin:14px 0 0}
.crumbs{font-size:13px;color:var(--gr-soft);padding:14px 0 0}
.crumbs a{color:var(--gr-soft)}
.count{font-size:13.5px;color:var(--gr-soft);border-bottom:1px solid var(--gr-line);
  padding-bottom:9px;margin:22px 0 20px}

/* ------- сетка карточек ------- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));margin:0;padding:0;list-style:none}
.card{border:1px solid var(--gr-line);display:flex;flex-direction:column;background:#fff}
.card .shot{display:block;background:#fff;border-bottom:1px solid var(--gr-line)}
.card .shot img{aspect-ratio:1/1;object-fit:contain;width:100%;padding:10px}
.card .in{padding:14px 14px 0;flex:1 1 auto}
.card .brandline{font:600 11px/1 "Archivo",Arial,sans-serif;color:var(--gr-steel);margin:0 0 6px}
.card h3{font-size:16px;margin:0 0 9px}
.card h3 a{text-decoration:none}
.card h3 a:hover{box-shadow:inset 0 -2px 0 var(--gr-sun)}
.card .note{font-size:13.5px;color:var(--gr-soft);margin:0 0 11px}
.card .till{padding:0 14px 14px;margin-top:auto}
.price{font:700 20px/1 "Archivo",Arial,sans-serif;margin:0 0 4px}
.stars{font-size:13px;color:var(--gr-soft);margin:0 0 10px}
.stars b{color:var(--gr-ink);font-weight:700}
.stock{font-size:13px;color:var(--gr-soft);display:flex;align-items:center;gap:7px;margin:0 0 12px}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gr-grass);flex:none}

/* ------- PDP ------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:38px;align-items:start;padding-top:26px}
.gal>img{border:1px solid var(--gr-line);background:#fff;width:100%;aspect-ratio:1/1;object-fit:contain;padding:12px}
.thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:7px;list-style:none;padding:0}
.thumbs img{border:1px solid var(--gr-line);aspect-ratio:1/1;object-fit:contain;background:#fff;padding:4px;cursor:pointer}
.thumbs img:hover,.thumbs img.on{border-color:var(--gr-ink)}
.pdp .brandline{font:600 12px/1 "Archivo",Arial,sans-serif;color:var(--gr-steel);margin:10px 0 7px}
.pdp .price{font-size:26px;margin:16px 0 6px}
.spec{border-top:1px solid var(--gr-line);padding-top:16px;margin-top:22px}
.spec h3{font-size:13px;text-transform:none;color:var(--gr-soft);margin:0 0 8px;font-weight:700}
.spec ul{margin:0 0 20px;padding-left:19px}
.spec li{margin-bottom:5px}
.sheet{max-width:68ch;padding-top:6px}

/* ------- отзывы ------- */
.quotes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));list-style:none;margin:22px 0 0;padding:0}
.quote{border-left:3px solid var(--gr-sun);padding:2px 0 2px 15px}
.quote h3{font-size:15px;margin:0 0 6px}
.quote p{font-size:14.5px;margin:0 0 7px}
.quote .who{font-size:12.5px;color:var(--gr-soft)}

/* ------- проза, FAQ, гайды ------- */
.prose{max-width:70ch}
.prose h2{margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.faq{max-width:70ch;margin:0}
.faq details{border-bottom:1px solid var(--gr-line);padding:13px 0}
.faq summary{font-family:"Archivo",Arial,sans-serif;font-weight:700;cursor:pointer;font-size:16px}
.faq p{margin:10px 0 0;color:var(--gr-soft)}
.guide{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start;padding-top:26px}
.toc{position:sticky;top:88px;border-left:3px solid var(--gr-sun);padding-left:15px;font-size:14px}
.toc b{display:block;font-family:"Archivo",Arial,sans-serif;font-size:12px;color:var(--gr-soft);margin-bottom:9px}
.toc ol{margin:0;padding-left:17px}
.toc li{margin-bottom:7px}

/* ------- подвал ------- */
.foot{background:var(--gr-ink);color:#D8DBD0;margin-top:50px;padding:38px 0 30px;font-size:14.5px}
.foot a{color:#fff}
.foot h4{font-family:"Archivo",Arial,sans-serif;font-size:12.5px;color:var(--gr-steel);margin:0 0 11px}
.cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{margin-bottom:7px}
.foot .fine{border-top:1px solid #3A3F33;margin-top:30px;padding-top:18px;color:var(--gr-steel);font-size:13px}
.foot img.fmark{width:104px;margin-bottom:12px}

.barwrap{display:none}
@media(max-width:860px){
  .pdp{grid-template-columns:1fr;gap:26px}
  .guide{grid-template-columns:1fr;gap:22px}
  .toc{position:static}
  .mosaic{grid-template-columns:1fr}
}
@media(max-width:720px){
  body{padding-bottom:78px}
  .burger{display:block;margin-left:auto}
  .menu{display:none;order:9;flex-basis:100%;flex-direction:column;align-items:flex-start;
    gap:2px;padding:4px 0 12px}
  .menu.open{display:flex}
  .menu a{padding:7px 0;font-size:15.5px}
  .topbuy{display:none}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  .barwrap{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
    border-top:1px solid var(--gr-line);padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
  .barwrap .buy img{max-width:none}
}