/* ============================================================
   Мастер книг — masterknig.com · дизайн-макет
   Golos Text (OFL, Paratype) — self-hosted, кириллица-native
   ============================================================ */

/* ---------- fonts ---------- */
@font-face { font-family:"Golos Text"; font-weight:400; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-cyrillic-400-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Golos Text"; font-weight:400; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"Golos Text"; font-weight:500; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-cyrillic-500-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Golos Text"; font-weight:500; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"Golos Text"; font-weight:600; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-cyrillic-600-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Golos Text"; font-weight:600; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"Golos Text"; font-weight:700; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-cyrillic-700-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Golos Text"; font-weight:700; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"Golos Text"; font-weight:800; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-cyrillic-800-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Golos Text"; font-weight:800; font-display:swap; font-style:normal;
  src:url("./fonts/golos-text-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

/* ---------- tokens ---------- */
:root{
  --paper:#F4F2EC; --paper-2:#ECE8DF; --surface:#FFFFFF;
  --ink:#191713; --ink-soft:#56514A; --ink-mute:#8A8378;
  --line:#E1DCD1; --line-2:#EEEAE1;
  --accent:#1E48D9; --accent-ink:#173BB8; --accent-soft:#E7ECFB;
  --mark:#C21E63; --mark-ink:#A81655; --mark-soft:#FAE6EF;
  --ready:#1C7A4B; --ready-soft:#E3F1E9;
  --order:#A9690A; --order-soft:#F6EDDA;
  --shadow:0 1px 2px rgba(25,23,19,.04), 0 8px 24px -12px rgba(25,23,19,.14);
  --shadow-lg:0 2px 4px rgba(25,23,19,.05), 0 24px 48px -20px rgba(25,23,19,.22);
  --radius:14px; --radius-sm:9px; --radius-lg:22px;

  --font:"Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw:1200px;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:2.9rem; --fs-5xl:3.7rem;
}
@media (prefers-color-scheme:dark){ :root{
  --paper:#141310; --paper-2:#1B1914; --surface:#201D17;
  --ink:#EEEAE1; --ink-soft:#B4ADA1; --ink-mute:#847D71;
  --line:#302B23; --line-2:#28241C;
  --accent:#6E90FF; --accent-ink:#9CB2FF; --accent-soft:#1A2340;
  --mark:#F075A6; --mark-ink:#F58FB8; --mark-soft:#341420;
  --ready:#5BC08C; --ready-soft:#16281E;
  --order:#D9A24E; --order-soft:#2A2113;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 26px 52px -22px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#141310; --paper-2:#1B1914; --surface:#201D17;
  --ink:#EEEAE1; --ink-soft:#B4ADA1; --ink-mute:#847D71;
  --line:#302B23; --line-2:#28241C;
  --accent:#6E90FF; --accent-ink:#9CB2FF; --accent-soft:#1A2340;
  --mark:#F075A6; --mark-ink:#F58FB8; --mark-soft:#341420;
  --ready:#5BC08C; --ready-soft:#16281E;
  --order:#D9A24E; --order-soft:#2A2113;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 26px 52px -22px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --paper:#F4F2EC; --paper-2:#ECE8DF; --surface:#FFFFFF;
  --ink:#191713; --ink-soft:#56514A; --ink-mute:#8A8378;
  --line:#E1DCD1; --line-2:#EEEAE1;
  --accent:#1E48D9; --accent-ink:#173BB8; --accent-soft:#E7ECFB;
  --mark:#C21E63; --mark-ink:#A81655; --mark-soft:#FAE6EF;
  --ready:#1C7A4B; --ready-soft:#E3F1E9;
  --order:#A9690A; --order-soft:#F6EDDA;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms!important;transition-duration:.01ms!important;} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:3px;}
::selection{background:var(--accent); color:#fff;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------- reusable bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.regmark{width:14px; height:14px; flex:none; color:var(--mark);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:var(--fs-base); font-weight:600; line-height:1;
  padding:14px 22px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--accent); color:#fff;}
.btn--primary:hover{background:var(--accent-ink); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn--ghost:hover{border-color:var(--ink); }
.btn--block{width:100%;}
.btn--sm{padding:10px 16px; font-size:var(--fs-sm);}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--surface);
}
.pill--ready{color:var(--ready); background:var(--ready-soft); border-color:transparent;}
.pill--order{color:var(--order); background:var(--order-soft); border-color:transparent;}
.pill--accent{color:var(--accent-ink); background:var(--accent-soft); border-color:transparent;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}

/* disclosure plate — the honest "reprint, not original" mark */
.plate{
  display:flex; align-items:center; gap:11px;
  padding:11px 15px; border-radius:var(--radius-sm);
  background:var(--mark-soft); border:1px solid color-mix(in srgb, var(--mark) 30%, transparent);
  color:var(--mark-ink); font-size:var(--fs-sm); font-weight:500; line-height:1.4;
}
.plate .regmark{color:var(--mark); width:17px; height:17px;}
.plate a{color:var(--mark-ink); text-decoration:underline; text-underline-offset:2px; font-weight:600;}

/* ---------- section scaffolding ---------- */
.section{padding:72px 0;}
.section--tint{background:var(--paper-2);}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px;}
.section__title{font-size:var(--fs-3xl); font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance; line-height:1.1;}
.section__sub{color:var(--ink-soft); margin:8px 0 0; max-width:52ch;}
.section__link{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--accent-ink); white-space:nowrap;}
.section__link:hover{gap:11px;}

/* ============================================================ header */
.topbar{
  font-size:var(--fs-sm); color:var(--ink-soft);
  background:var(--ink); color:var(--paper); }
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px;}
.topbar a{color:var(--paper); opacity:.85; white-space:nowrap;}   /* телефон не рвём посередине */
.topbar a:hover{opacity:1;}
.topbar__l{display:flex; align-items:center; gap:8px; opacity:.85;}

.header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);}
.header .wrap{display:flex; align-items:center; gap:22px; height:72px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; letter-spacing:-.02em;}
.logo .regmark{width:22px; height:22px; color:var(--mark);}
.logo b{font-weight:800;}
.logo span{color:var(--ink-mute); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; align-self:flex-start; margin-top:3px;}
.nav{display:flex; align-items:center; gap:4px; margin-left:6px;}
.nav a{padding:9px 13px; border-radius:8px; font-weight:500; font-size:.95rem; color:var(--ink-soft);}
.nav a:hover{color:var(--ink); background:var(--paper-2);}
.nav a.is-active{color:var(--ink); font-weight:600;}
.header__spacer{flex:1;}
.header__tools{display:flex; align-items:center; gap:6px;}
.icobtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .15s, color .15s;
}
.icobtn:hover{background:var(--paper-2); color:var(--ink);}
.icobtn svg{width:20px; height:20px;}
.cartbtn{position:relative;}
.cartbtn .badge{position:absolute; top:4px; right:4px; background:var(--accent); color:#fff; font-size:.62rem; font-weight:700; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 3px;}
.burger{display:none;}

@media (max-width:940px){
  .nav{display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--paper); border-bottom:1px solid var(--line); padding:10px 16px 16px; box-shadow:var(--shadow);}
  .nav.is-open{display:flex;}
  .nav a{padding:12px 12px; font-size:1rem;}
  .burger{display:inline-flex;}
  .header .wrap{gap:10px;}
  .logo > span:not(.logomark){display:none;}   /* прячем подпись «типография», но не знак логотипа */
  .icobtn[data-hide-mobile]{display:none;}
}

/* ============================================================ hero */
.hero{padding:56px 0 40px; position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1fr .92fr; gap:40px; align-items:center;}
.hero__eyebrow{margin-bottom:20px;}
.hero h1{font-size:var(--fs-5xl); line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0 0 20px; text-wrap:balance; max-width:12ch;}
.hero__lede{font-size:var(--fs-lg); color:var(--ink-soft); max-width:46ch; margin:0 0 28px;}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px;}
.hero__rating{display:flex; align-items:center; gap:14px; font-size:var(--fs-sm); color:var(--ink-soft);}
.hero__rating .stars{color:#E0A100; letter-spacing:2px; font-size:1rem;}
.hero__rating b{color:var(--ink); font-weight:700;}
.hero__rating .sep{width:4px; height:4px; border-radius:50%; background:var(--ink-mute); display:inline-block;}

/* fanned printed stack */
.stack{position:relative; aspect-ratio:5/4; display:flex; align-items:center; justify-content:center;}
.stack__marks{position:absolute; inset:0; pointer-events:none;}
.stack__marks::before, .stack__marks::after{content:""; position:absolute; width:20px; height:20px; border:2px solid var(--mark); opacity:.5;}
.stack__marks::before{top:0; left:0; border-right:0; border-bottom:0;}
.stack__marks::after{bottom:0; right:0; border-left:0; border-top:0;}
.stack__book{position:absolute; width:47%; aspect-ratio:3/4; border-radius:6px 10px 10px 6px; box-shadow:var(--shadow-lg); overflow:hidden; transform-origin:bottom center;}
.stack__book:nth-child(2){transform:rotate(-12deg) translate(-30%, 4%); z-index:1;}
.stack__book:nth-child(3){transform:rotate(-1deg) translate(8%,-2%); z-index:3;}
.stack__book:nth-child(4){transform:rotate(12deg) translate(46%, 5%); z-index:2;}
.stack__tag{position:absolute; z-index:5; bottom:8%; right:4%; background:var(--ink); color:var(--paper); font-size:var(--fs-xs); font-weight:600; padding:8px 13px; border-radius:999px; display:flex; align-items:center; gap:7px; box-shadow:var(--shadow);}
.stack__tag .regmark{color:var(--mark);}

/* ============================================================ cover component */
.cover{position:relative; aspect-ratio:3/4; border-radius:4px 8px 8px 4px; overflow:hidden; display:flex; flex-direction:column; padding:14px; color:#fff; isolation:isolate;}
.cover::before{content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:rgba(0,0,0,.16); z-index:2;}
.cover::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 0, rgba(255,255,255,.22), transparent 60%); z-index:1;}
.cover>*{position:relative; z-index:3;}
.cover__pub{font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.85;}
.cover__title{font-weight:800; font-size:1.05rem; line-height:1.12; letter-spacing:-.01em; margin-top:auto; text-wrap:balance;}
.cover__motif{position:absolute; z-index:2; right:-18%; top:32%; width:75%; height:44%; border:2.5px solid rgba(255,255,255,.25); border-radius:50%;}
.cover__lvl{position:absolute; z-index:4; top:12px; right:12px; background:#fff; color:#222; font-size:.66rem; font-weight:800; padding:3px 8px; border-radius:999px; letter-spacing:.02em;}
.cover--sm{padding:10px;}
.cover--sm .cover__title{font-size:.8rem;}

/* ============================================================ product card */
.pcard{display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s;}
.pcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent;}
.pcard__cover{width:100%;}
.pcard__meta{display:flex; gap:6px; flex-wrap:wrap;}
.pcard__title{font-weight:600; font-size:.95rem; line-height:1.3; color:var(--ink);}
.pcard__foot{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-top:4px;}
.pcard__price{font-weight:800; font-size:1.15rem; letter-spacing:-.01em;}
.pcard__old{font-size:var(--fs-sm); color:var(--ink-mute); text-decoration:line-through;}
.pcard__from{font-size:var(--fs-xs); color:var(--ink-mute);}

.grid{display:grid; gap:18px;}
.grid--doors{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--5{grid-template-columns:repeat(5,1fr);}
.grid--langs{grid-template-columns:repeat(5,1fr);}

/* ============================================================ doors */
.door{position:relative; display:flex; flex-direction:column; gap:14px; padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); transition:transform .15s, box-shadow .15s, border-color .15s; overflow:hidden;}
.door:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent;}
.door__ico{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-ink);}
.door__ico svg{width:27px; height:27px;}
.door__name{font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em;}
.door__desc{color:var(--ink-soft); font-size:.95rem; flex:1;}
.door__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid var(--line-2);}
.door__from{font-size:var(--fs-sm); color:var(--ink-mute);} .door__from b{color:var(--ink); font-weight:800; font-size:1.05rem;}
.door__go{color:var(--accent-ink); font-weight:700; display:inline-flex; gap:6px; align-items:center;}
.door:hover .door__go{gap:10px;}

/* ============================================================ trust bar */
.trust{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.trust__i{background:var(--surface); padding:22px 18px; text-align:center;}
.trust__n{font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.02em; color:var(--ink);}
.trust__l{font-size:var(--fs-sm); color:var(--ink-mute); margin-top:2px;}

/* ============================================================ language tiles */
.lang{position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:4/3; border-radius:var(--radius); padding:16px; overflow:hidden; color:#fff; isolation:isolate; transition:transform .15s;}
.lang:hover{transform:translateY(-3px);}
.lang::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, transparent 40%, rgba(0,0,0,.32)); z-index:1;}
.lang>*{position:relative; z-index:2;}
.lang__n{font-weight:800; font-size:var(--fs-lg); letter-spacing:-.01em;}
.lang__c{font-size:var(--fs-xs); opacity:.85; font-weight:600;}
.lang__glyph{position:absolute; z-index:1; top:-6px; right:6px; font-size:3.4rem; font-weight:800; opacity:.28;}

/* ============================================================ steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.step__n{counter-increment:s; font-size:var(--fs-sm); font-weight:700; color:var(--accent-ink); font-variant-numeric:tabular-nums;}
.step__n::before{content:"0" counter(s);}
.step h3{margin:8px 0 6px; font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em;}
.step p{margin:0; color:var(--ink-soft); font-size:.92rem;}

/* ============================================================ reprint honesty block */
.reprint{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface);}
.reprint__media{position:relative; background:var(--paper-2); padding:32px; display:flex; gap:14px; align-items:center; justify-content:center;}
.reprint__page{flex:1; max-width:150px; aspect-ratio:3/4; background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.reprint__page--scan{filter:sepia(.25) contrast(.92);}
.reprint__page .ln{position:absolute; left:12px; right:12px; height:5px; border-radius:3px; background:var(--line);}
.reprint__page--scan .ln{background:#cbb89b; opacity:.7;}
.reprint__arrow{color:var(--mark); flex:none;}
.reprint__body{padding:38px 36px;}
.reprint__body h2{font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; margin:0 0 14px;}
.reprint__body p{color:var(--ink-soft); margin:0 0 14px;}
.reprint__list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px;}
.reprint__list li{display:flex; gap:10px; align-items:flex-start; font-size:.95rem;}
.reprint__list svg{width:19px; height:19px; color:var(--ready); flex:none; margin-top:2px;}

/* ============================================================ calculator */
.calc{display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
.calc__form{padding:28px; border-right:1px solid var(--line); background:var(--paper-2);}
.calc__form h3{margin:0 0 18px; font-size:var(--fs-lg); font-weight:700;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.field select, .field input{width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-family:inherit; font-size:.95rem;}
.field select:focus, .field input:focus{border-color:var(--accent); outline:none;}
.field--row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.calc__out{padding:28px; display:flex; flex-direction:column;}
.calc__total{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 20px; border-radius:var(--radius); background:var(--accent-soft); border:1.5px solid color-mix(in srgb,var(--accent) 35%, transparent); margin-bottom:8px;}
.calc__total .lbl{font-weight:600; color:var(--accent-ink);}
.calc__total .val{font-size:var(--fs-2xl); font-weight:800; color:var(--accent-ink); letter-spacing:-.02em;}
.calc__hint{font-size:var(--fs-sm); color:var(--ink-mute); margin:2px 0 18px;}
.calc__hint b{color:var(--ink); font-weight:700;}
.matrix{width:100%; border-collapse:collapse; font-size:var(--fs-sm); font-variant-numeric:tabular-nums;}
.matrix caption{text-align:left; font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px;}
.matrix th, .matrix td{padding:8px 6px; text-align:center; border-bottom:1px solid var(--line-2);}
.matrix thead th{color:var(--ink-mute); font-weight:600;}
.matrix tbody th{text-align:left; color:var(--ink-soft); font-weight:600;}
.matrix td{color:var(--ink);}
.matrix tr:last-child td, .matrix tr:last-child th{border-bottom:0;}
.matrix .best{color:var(--ready); font-weight:800;}

/* ============================================================ wholesale band */
/* band всегда тёмная плашка (в dark-теме переменные инвертируются — не используем их тут) */
.band{background:#191713; color:#F4F2EC; border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 48px; display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center;}
.band h2{font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.02em; margin:0 0 12px; color:#fff;}
.band p{margin:0; opacity:.85; max-width:44ch; color:#F4F2EC;}
.band__pts{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.band__pts .pill{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#F4F2EC;}
.band__cta{display:flex; flex-direction:column; gap:10px;}
.band .btn--ghost{border-color:rgba(255,255,255,.3); color:#fff;}
.band .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);}

/* ============================================================ reviews */
.reviews{display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; align-items:start;}
.reviews__score{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; text-align:center;}
.reviews__big{font-size:3.4rem; font-weight:800; letter-spacing:-.03em; line-height:1;}
.reviews__stars{color:#E0A100; font-size:1.3rem; letter-spacing:3px; margin:8px 0;}
.reviews__src{color:var(--ink-mute); font-size:var(--fs-sm);}
.rlist{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.rev{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.rev__stars{color:#E0A100; letter-spacing:2px; font-size:.9rem;}
.rev__txt{margin:10px 0; font-size:.94rem; color:var(--ink);}
.rev__who{font-size:var(--fs-sm); color:var(--ink-mute);}

/* ============================================================ footer */
.footer{background:var(--paper-2); border-top:1px solid var(--line); padding:56px 0 28px; margin-top:8px;}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
.footer h4{font-size:var(--fs-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 14px;}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.footer a{color:var(--ink-soft); font-size:.95rem;}
.footer a:hover{color:var(--ink);}
.footer__brand .logo{margin-bottom:12px;}
.footer__brand p{color:var(--ink-soft); font-size:.92rem; max-width:34ch; margin:0 0 14px;}
.footer__contact{font-size:.95rem; color:var(--ink); font-weight:600;}
.footer__bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-mute);}

/* proto ribbon */
.proto{position:fixed; z-index:80; bottom:16px; left:16px; background:var(--ink); color:var(--paper); font-size:var(--fs-xs); font-weight:600; padding:9px 14px; border-radius:999px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px);}
.proto .regmark{color:var(--mark);}
.proto b{color:#fff;}

/* ============================================================ catalog layout */
.cathead{padding:28px 0 8px;}
.crumbs{font-size:var(--fs-sm); color:var(--ink-mute); margin-bottom:12px;}
.crumbs a:hover{color:var(--ink);}
.catgrid{display:grid; grid-template-columns:262px 1fr; gap:32px; align-items:start; padding-bottom:72px;}
.filters{position:sticky; top:88px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:6px 18px 14px;}
.fgroup{padding:16px 0; border-bottom:1px solid var(--line-2);}
.fgroup:last-child{border-bottom:0;}
.fgroup h4{font-size:var(--fs-sm); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 12px;}
.check{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:.93rem; color:var(--ink-soft); cursor:pointer;}
.check input{width:17px; height:17px; accent-color:var(--accent); flex:none;}
.check .cnt{margin-left:auto; font-size:var(--fs-xs); color:var(--ink-mute); font-variant-numeric:tabular-nums;}
.check:hover{color:var(--ink);}
.lvlchips{display:flex; flex-wrap:wrap; gap:7px;}
.lvlchip{font-size:var(--fs-xs); font-weight:700; padding:5px 10px; border-radius:8px; border:1.5px solid var(--line); cursor:pointer; color:var(--ink-soft);}
.lvlchip.is-on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
.range{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--ink-soft);}
.range input{flex:1; accent-color:var(--accent);}

.cattop{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.activechips{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; padding:6px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); cursor:pointer;}
.chip .x{font-weight:700; opacity:.7;}
.chip--clear{background:transparent; color:var(--ink-mute); text-decoration:underline;}
.sortsel{padding:9px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-family:inherit; font-size:.9rem;}
.pager{display:flex; justify-content:center; gap:8px; margin-top:36px;}
.pager a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; font-weight:600; color:var(--ink-soft);}
.pager a.is-active{background:var(--accent); color:#fff; border-color:transparent;}
.pager a:hover:not(.is-active){border-color:var(--ink);}

.filtersbtn{display:none;}
/* 900, а не 860: с 900 px фильтры уже оверлей (блок ниже), значит и сетка в одну колонку,
   и кнопка «Фильтры» нужны с той же ширины — иначе на 861–900 фильтров не открыть */
@media (max-width:900px){
  .catgrid{grid-template-columns:1fr;}
  .filters{display:none; position:static;}
  .filters.is-open{display:block;}
  .filtersbtn{display:inline-flex;}
}

/* ============================================================ product page */
.prod{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; padding:28px 0 64px; align-items:start;}
.gallery{position:sticky; top:96px;}
.gallery__main{width:100%; max-width:360px; margin:0 auto 14px;}
.gallery__thumbs{display:flex; gap:10px; justify-content:center;}
.gallery__thumbs .cover{width:74px;}
.gallery__browse{margin:16px auto 0; max-width:360px;}
.prodinfo h1{font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.025em; line-height:1.08; margin:14px 0 14px; text-wrap:balance;}
.prodinfo__meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.buybox{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; margin-bottom:20px;}
.opt{margin-bottom:18px;}
.opt__lbl{font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); margin-bottom:9px;}
.binding{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.bind{border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 8px; text-align:center; cursor:pointer; background:var(--surface); transition:border-color .12s, background .12s;}
.bind.is-on{border-color:var(--accent); background:var(--accent-soft);}
.bind__n{font-size:var(--fs-sm); font-weight:600; color:var(--ink);}
.bind__p{font-size:var(--fs-xs); color:var(--ink-mute); margin-top:2px; font-variant-numeric:tabular-nums;}
.addons{display:grid; gap:8px;}
.addon{display:flex; align-items:center; gap:10px; font-size:.93rem; color:var(--ink-soft); cursor:pointer;}
.addon input{width:17px; height:17px; accent-color:var(--accent);}
.addon .ap{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600;}
.priceRow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 6px; border-top:1px solid var(--line-2); margin-top:6px;}
/* без выбора части и «С этим берут» строка цены первая в блоке — разделитель над ней лишний */
.buybox > .priceRow:first-child{border-top:0; margin-top:0; padding-top:0;}
.priceRow__price{font-size:var(--fs-3xl); font-weight:800; letter-spacing:-.03em;}
.priceRow__from{font-size:var(--fs-sm); color:var(--ink-mute);}
.specs{width:100%; border-collapse:collapse; font-size:.93rem;}
.specs th, .specs td{text-align:left; padding:10px 0; border-bottom:1px solid var(--line-2); vertical-align:top;}
.specs th{color:var(--ink-mute); font-weight:500; width:42%;}
.specs td{color:var(--ink); font-weight:500;}
.specs a{color:var(--accent-ink); font-weight:600;}
.setrow{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px;}
.setitem{display:flex; gap:10px; align-items:center;}
.setitem .cover{width:44px;}
.setitem small{display:block; color:var(--ink-mute); font-size:var(--fs-xs);}
.setitem b{font-size:.9rem;}

.blockhead{font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; margin:36px 0 16px;}

/* ============================================================ responsive */
@media (max-width:1000px){
  :root{--fs-5xl:3rem; --fs-4xl:2.4rem; --fs-3xl:2rem;}
  .hero .wrap{grid-template-columns:1fr; gap:32px;}
  .stack{max-width:440px; margin:0 auto; width:100%;}
  .reprint, .calc, .band, .reviews{grid-template-columns:1fr;}
  /* minmax(0,…): колонка не раздувается по min-content содержимого (строка цены с двумя кнопками
     давала 470 px), иначе на телефоне карточка шире экрана и обложка обрезана справа (BUG-1, 30.09) */
  .prod{grid-template-columns:minmax(0,1fr);}
  .calc__form{border-right:0; border-bottom:1px solid var(--line);}
  .reprint__body{padding:28px 24px;}
  .gallery{position:static;}
  .rlist{grid-template-columns:1fr;}
}
@media (max-width:760px){
  :root{--fs-5xl:2.5rem; --fs-3xl:1.7rem; --fs-2xl:1.5rem;}
  .wrap{padding:0 16px;}
  .section{padding:52px 0;}
  .grid--doors, .grid--4, .grid--5, .grid--langs, .steps, .trust{grid-template-columns:1fr 1fr;}
  .trust__i{padding:16px 10px;}
  .trust__n{font-size:var(--fs-xl);}
  .band{padding:30px 22px;}
  .binding{grid-template-columns:1fr 1fr;}
  .section__head{flex-direction:column; align-items:flex-start; gap:10px;}
  .footer__grid{grid-template-columns:1fr 1fr; gap:26px 20px;}
  .footer__brand{grid-column:1 / -1;}
  .setrow{grid-template-columns:1fr 1fr;}
  .setrow .btn{grid-column:1 / -1;}
}
@media (max-width:520px){
  /* цена + две кнопки не влезают в строку: цена сверху, под ней «В корзину» и «Задать вопрос» на всю ширину */
  .priceRow{flex-wrap:wrap;}
  .priceRow > div, .priceRow > .btn{flex:1 1 100%;}
}
@media (max-width:460px){
  .grid--4, .grid--5, .grid--langs, .trust{grid-template-columns:1fr 1fr;}
  .grid--doors, .steps{grid-template-columns:1fr;}
  .hero__cta .btn{flex:1;}
}

/* ==================== доработка 15.08: формы, модалка, корзина, страницы ==================== */
/* Заявка на печать — третья зона калькулятора, на всю ширину */
.calc__order{grid-column:1 / -1; border-top:1px solid var(--line); padding:28px; background:var(--surface);}
.calc__order h3{margin:0 0 6px; font-size:var(--fs-lg); font-weight:700;}
.orderform{max-width:760px;}
.orderform .btn{margin-top:12px;}
.field textarea{width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-family:inherit; font-size:.95rem; resize:vertical;}
.field textarea:focus{border-color:var(--accent); outline:none;}
.consent{font-size:var(--fs-sm); color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; margin-top:8px;}
.consent a{color:var(--accent-ink);}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}
.form__status{min-height:1.2em; margin:10px 0 0; font-size:var(--fs-sm); font-weight:600; color:#C0392B;}
[data-theme="dark"] .form__status{color:#FF8A7A;}
.form__done{text-align:center; padding:26px 18px;}
.form__done-ico{width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:var(--ready, #1E8A72); color:#fff; font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.form__done h3{margin:0 0 8px;}
.form__done p{color:var(--ink-soft); margin:0;}

/* Модалка заявки */
.modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:18px;}
.modal[hidden]{display:none;}
.modal__overlay{position:absolute; inset:0; background:color-mix(in srgb, #000 55%, transparent); backdrop-filter:blur(2px);}
.modal__card{position:relative; width:100%; max-width:440px; max-height:92vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px;}
.modal__card h3{margin:0 34px 4px 0; font-size:var(--fs-lg);}
.modal__sub{margin:0 0 16px; font-size:var(--fs-sm); color:var(--ink-mute);}
.modal__x{position:absolute; top:12px; right:12px; width:34px; height:34px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft); border-radius:50%; font-size:19px; line-height:1; cursor:pointer;}
.modal__x:hover{color:var(--ink); border-color:var(--ink);}
body.modal-open{overflow:hidden;}

/* Каталог: поиск, счётчик, пусто */
.searchrow{display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:14px; color:var(--ink-mute);}
.searchrow input{flex:1; border:0; background:transparent; color:var(--ink); font-family:inherit; font-size:.95rem; outline:none;}
.catcount{font-size:var(--fs-sm); color:var(--ink-mute); font-weight:600;}
.catempty{border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:34px 26px; text-align:center; margin-top:6px;}
.catempty p{color:var(--ink-soft); margin:0 0 16px;}
.catempty .btn{margin:0 6px 6px 0;}
.lvlchips button.lvlchip{font:inherit; cursor:pointer;}
.filters [data-reset]{margin-top:6px;}

/* Корзина */
.cartwrap{padding-bottom:70px;}
.cartgrid{display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start;}
.cartgrid[hidden]{display:none;}
.cartlist{display:grid; gap:14px;}
.citem{display:grid; grid-template-columns:84px 1fr; gap:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:14px;}
.citem .cover--sm{width:84px; height:112px;}
.citem__title{font-weight:700; color:var(--ink); text-decoration:none;}
.citem__title:hover{color:var(--accent-ink);}
.citem__sub{font-size:var(--fs-sm); color:var(--ink-mute); margin-top:2px;}
.citem__row{display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap;}
.citem__price{font-weight:800;}
.citem__rm{border:0; background:none; color:var(--ink-mute); font:inherit; font-size:var(--fs-sm); cursor:pointer; text-decoration:underline;}
.citem__rm:hover{color:#C0392B;}
.qtyctl{display:inline-flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:999px; padding:4px 10px;}
.qtyctl button{width:26px; height:26px; border:0; border-radius:50%; background:var(--paper-2); color:var(--ink); font-size:16px; font-weight:700; cursor:pointer;}
.qtyctl button:hover{background:var(--accent-soft); color:var(--accent-ink);}
.cartside{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:24px; box-shadow:var(--shadow); position:sticky; top:90px;}
.cartempty{border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:44px 26px; text-align:center;}
.cartempty p{color:var(--ink-soft); margin:0 0 18px;}

/* Контентные страницы */
.textpage{max-width:820px;}
.textpage .lede{font-size:1.06rem; color:var(--ink-soft); line-height:1.65;}
.textpage h2{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.01em; margin:34px 0 10px;}
.textpage p{line-height:1.65; color:var(--ink-soft);}
.textpage p b, .textpage li b{color:var(--ink);}
.reprint__list--page li{font-size:1rem; line-height:1.55;}
.trust--page{margin:22px 0 8px;}
.steps--page{margin-top:14px;}
.band--page{margin-top:38px; grid-template-columns:1.4fr 1fr;}
.specs--contacts{max-width:640px;}
.plate--warn{border-color:#C9A227; background:color-mix(in srgb, #C9A227 12%, transparent);}
.gallery__note{font-size:var(--fs-sm); color:var(--ink-mute); margin:10px 0 0;}

@media (max-width: 900px){
  .cartgrid{grid-template-columns:1fr;}
  .cartside{position:static;}
  .band--page{grid-template-columns:1fr;}
  .calc__order{padding:22px 18px;}
  .trust--page{grid-template-columns:repeat(2,1fr);}
}
.badge[hidden]{display:none !important;}
/* правки 16.08: индивидуальные скидки, бренд Авито, допы заметнее */
.opt--addons{border:1.5px solid color-mix(in srgb, var(--accent) 30%, transparent); background:var(--accent-soft); border-radius:var(--radius); padding:12px 14px;}
.opt--addons .opt__lbl{color:var(--accent-ink);}
.companion{font-size:var(--fs-sm); color:var(--ink-soft); border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:14px;}
.companion a{color:var(--accent-ink); font-weight:700;}
.calc__promo{border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); background:var(--accent-soft); border-radius:var(--radius); padding:18px 20px; margin-top:auto;}
.calc__promo b{color:var(--accent-ink);}
.calc__promo p{margin:6px 0 0; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.55;}
.avitobrand{display:flex; gap:12px; align-items:center; margin-bottom:14px; text-align:left;}
.avitobrand img{border-radius:14px; border:1px solid var(--line); background:#fff;}
.avitobrand b{display:block; font-size:1.02rem;}
.avitobrand span{font-size:var(--fs-sm); color:var(--ink-mute);}
.avitobrand--page{margin:18px 0;}
.reviews__badges{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px;}
.steps--two{grid-template-columns:repeat(2, minmax(0,1fr));}
@media (max-width: 760px){ .steps--two{grid-template-columns:1fr;} }
.showmore{text-align:center; margin-top:24px;}
.showmore .btn[hidden]{display:none;}
.pcard[hidden]{display:none !important;}
.proddesc{color:var(--ink-soft);line-height:1.65;margin:0 0 26px}
/* длинные «слова» из описаний Авито — «(Engage→Explore→…→Evaluate)» — переносим, а не выталкиваем за экран */
.prodinfo{overflow-wrap:break-word}
.proddesc p{margin:0 0 10px}

/* ── каталог: фасеты, активные фильтры, панель на мобиле ─────────────── */
.filters__head{display:none;align-items:center;justify-content:space-between;padding:0 0 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.filters__close{width:36px;height:36px;border:1px solid var(--line);background:var(--paper-2);border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-soft)}
.filters__foot{position:sticky;bottom:0;background:var(--surface);padding-top:10px;margin-top:6px}
.filters__apply{display:none}
.check{display:flex;align-items:center;gap:8px}
.check__n{flex:1;min-width:0}
.check--empty{opacity:.4}
.lvlchip.is-empty{opacity:.35}
.lvlchip.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip--active{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent-ink);font-weight:600;cursor:pointer;border-radius:999px;padding:6px 12px;font-size:var(--fs-sm)}
.chip--active:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.chip--clear{border:1px dashed var(--line);background:transparent;color:var(--ink-mute);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:var(--fs-sm)}
.activechips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.catcount__all{color:var(--ink-mute);font-weight:500}
@media (max-width:900px){
  .filters{position:fixed;inset:0;z-index:90;overflow:auto;background:var(--surface);padding:16px;display:none;border-radius:0}
  .filters.is-open{display:block}
  .filters__head{display:flex}
  .filters__apply{display:block}
  body.filters-open{overflow:hidden}
}
.lvlchip{display:inline-flex;align-items:center;gap:6px}
.lvlchip .cnt{font-size:.72rem;opacity:.7;font-variant-numeric:tabular-nums}
.lvlchip.is-on .cnt{opacity:.9}
/* фильтры на десктопе: колонка длиннее экрана — прокручиваем её саму (иначе нижние группы недостижимы) */
@media (min-width:901px){
  .filters{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
  .filters::-webkit-scrollbar{width:8px}
  .filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
}
/* на телефоне кнопка «Фильтры» всегда под рукой. Липнет под шапкой: шапка липкая, 72 px + 1 px рамки
   на любой ширине, поэтому top = 73 + 8. Поиск не липкий — под липкой шапкой его не видно и не нажать */
@media (max-width:900px){
  .filtersbtn{position:sticky;top:81px;z-index:20;width:100%;background:var(--surface);box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
  .searchrow{background:var(--surface)}
}

/* узкий телефон: логотип с текстом + 3 иконки не влезают в 296 px — уменьшаем текст, иконки не трогаем */
@media (max-width:360px){
  .logo{font-size:var(--fs-lg);gap:8px}
  .header .wrap{gap:8px}
}
/* 320px: сетка каталога и шапка не должны вылезать за экран */
@media (max-width:400px){
  .catgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .grid,.grid--4,.grid--3,.grid--langs,.grid--doors{grid-template-columns:minmax(0,1fr)!important}
  .pcard,.cover{min-width:0;max-width:100%}
  .catmain,.searchrow,.cattop,.grid--4{min-width:0;max-width:100%}
  .header__tools{gap:2px}
  .wrap{padding-left:12px;padding-right:12px}
}
.gallery__photo{width:100%;height:auto;border-radius:var(--radius);display:block;background:var(--paper-2)}
.gallery__th{width:23%;border-radius:var(--radius-sm);cursor:zoom-in;background:var(--paper-2)}
/* миниатюра в <picture> (webp): 23% берёт на себя обёртка, картинка заполняет её как раньше */
.gallery__thumbs>picture{display:block;width:23%}
.gallery__thumbs>picture>.gallery__th{width:100%;height:100%}
.cover--photo{padding:0;overflow:hidden;display:block}
.cover--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* атрибут hidden должен скрывать всегда — иначе display:flex/grid его перебивает
   (из-за этого под настоящим фото оставались цветные плашки-заглушки) */
[hidden]{display:none !important}
.printnote{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}
.printnote .regmark{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.form__status:empty{display:none; margin:0;}

/* --- знак логотипа (фирменный знак магазина клиента) --- */
.logomark{display:inline-flex; align-items:center; flex:none;}
.logomark__i{width:30px; height:auto; display:block;}
.logomark__i--dark{display:none;}
:root[data-theme="dark"] .logomark__i--light{display:none;}
:root[data-theme="dark"] .logomark__i--dark{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logomark__i--light{display:none;}
  :root:not([data-theme="light"]) .logomark__i--dark{display:block;}
}
.footer__brand .logomark__i{width:34px;}
@media (max-width:640px){ .logomark__i{width:26px;} }

/* книги в герое — реальные обложки из каталога, кликабельные */
.stack__book.cover--photo{padding:0; background:var(--paper); display:block;}
.stack__book.cover--photo img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.stack__book[href]{cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;}
.stack__book[href]:hover{box-shadow:0 18px 40px rgba(0,0,0,.28);}
.stack__book:nth-child(2)[href]:hover{transform:rotate(-12deg) translate(-30%,1%) scale(1.03);}
.stack__book:nth-child(3)[href]:hover{transform:rotate(-1deg) translate(8%,-5%) scale(1.03);}
.stack__book:nth-child(4)[href]:hover{transform:rotate(12deg) translate(46%,2%) scale(1.03);}

/* выбор части серии в карточке товара */
.parts{margin:18px 0 6px;}
.parts__t{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); margin-bottom:8px;}
.parts__row{display:flex; flex-wrap:wrap; gap:8px;}
.partchip{display:inline-flex; align-items:center; padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  font-weight:700; font-size:.92rem; background:var(--paper); color:var(--ink); transition:border-color .15s, background .15s;}
.partchip:hover{border-color:var(--ink); background:var(--paper-2);}
.partchip.is-current{background:var(--ink); color:var(--paper); border-color:var(--ink); cursor:default;}
.gallery__multi{margin:10px 0 0; font-size:var(--fs-xs); color:var(--ink-mute); line-height:1.45;}

/* выбор части у объявлений-комплектов */
.pick{margin:0 0 14px;}
.pick__l{display:block; font-size:var(--fs-xs); font-weight:700; color:var(--ink-mute); margin-bottom:6px;}
.pick__s{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  color:var(--ink); font:inherit; font-size:1rem;}
.pick__s:focus{outline:2px solid var(--accent); outline-offset:1px;}

.citem__part{font-size:var(--fs-xs); color:var(--ink-mute); margin-top:2px;}

/* кнопки выбора книги у объявления-комплекта */
.pick__row{display:flex; flex-wrap:wrap; gap:8px;}
.pickbtn{padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--paper);
  color:var(--ink); font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;}
.pickbtn:hover{border-color:var(--ink);}
.pickbtn.is-on{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.pickbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* части серии картинками — выбор прямо в карточке товара */
.parts__grid{display:flex; flex-wrap:wrap; gap:12px;}
.partcard{display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; text-align:center;}
.partcard__img{display:block; width:84px; height:112px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; background:var(--paper-2); box-shadow:var(--shadow);}
.partcard__img img{width:100%; height:100%; object-fit:cover; display:block;}
.partcard__stub{display:block; width:100%; height:100%;}
.partcard__l{font-size:.82rem; font-weight:700; color:var(--ink-mute); line-height:1.2;}
.partcard:hover .partcard__img{border-color:var(--ink);}
.partcard.is-current .partcard__img{border-color:var(--accent);}
.partcard.is-current .partcard__l{color:var(--ink);}
@media (max-width:640px){ .partcard, .partcard__img{width:72px;} .partcard__img{height:96px;} }

/* кнопки выбора книги — с обложками */
.pickbtn--pic{flex-direction:column; gap:6px; padding:8px; border-radius:14px; width:96px;}
.pickbtn__img{display:block; width:80px; height:106px; border-radius:6px; overflow:hidden; background:var(--paper-2);}
.pickbtn__img img{width:100%; height:100%; object-fit:cover; display:block;}
.pickbtn__l{display:block; font-size:.9rem;}
.pickbtn--pic.is-on{background:var(--ink); color:var(--paper);}
@media (max-width:640px){ .pickbtn--pic{width:84px;} .pickbtn__img{width:68px; height:90px;} }

/* iPhone увеличивает страницу при фокусе на поле со шрифтом меньше 16 px — на телефонах держим 16 */
@media (max-width:940px){
  .field input, .field select, .field textarea, .searchrow input, .sortsel{font-size:16px}
}
/* фильтр по признаку, который заполнен не у всех книг: честная подпись под заголовком */
.fgroup__note{margin:-6px 0 10px; font-size:var(--fs-xs); line-height:1.4; color:var(--ink-mute);}
/* текстовые страницы: списки в тексте (политика ПДн) */
.textpage ul:not([class]){padding-left:20px; color:var(--ink-soft); line-height:1.65;}
.textpage ul:not([class]) li{margin:4px 0;}
/* без JavaScript: честная строка под шапкой (формы, корзина, фильтры и меню без него не работают) */
.nojs{background:var(--mark-soft); color:var(--mark-ink); border-bottom:1px solid color-mix(in srgb, var(--mark) 30%, transparent); font-size:var(--fs-sm); line-height:1.45;}
.nojs .wrap{padding-top:10px; padding-bottom:10px;}
.nojs a{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap;}
/* «Поиск по каталогу» — только в мобильном меню: на телефоне иконка поиска в шапке скрыта */
.nav .nav__search{display:none;}
@media (max-width:940px){ .nav .nav__search{display:block;} }
/* книга без цены (basePrice = null): «Цена по запросу» вместо суммы */
.pcard__price--ask{font-size:.95rem; font-weight:700; color:var(--ink-soft); letter-spacing:0;}
.priceRow__price--ask{font-size:var(--fs-2xl); color:var(--ink-soft);}
/* альбомная обложка (шире, чем высота) в рамке 3:4: показываем книгу целиком, поля — фоном */
.cover--photo.cover--wide{background:var(--paper-2);}
.cover--photo.cover--wide img{object-fit:contain; background:var(--paper-2);}
.pickbtn__img--wide img{object-fit:contain;}
/* L6 (QA Q8). Текстовая кнопка тома в ряду с кнопками-картинками растягивалась на высоту ряда и с радиусом
   999px превращалась в круг: держим её по высоте текста, по центру ряда, не ниже 44px для пальца. */
.pickbtn:not(.pickbtn--pic){align-self:center; min-height:44px;}
/* Подписи томов: слово переносим целиком (общее .prodinfo{overflow-wrap:break-word} рвало «Workboo|k»).
   Если слово длиннее подписи, кнопка/карточка части становится шире ровно на это слово, остальные — как были. */
.pickbtn__l, .partcard__l{overflow-wrap:normal; word-break:normal;}
/* Боковой отступ 7px: картинка 80 (68) + 2×7 + рамка 2×1 = ровно 96 (84) — прежняя ширина кнопки
   (при 8px min-content давал 98/86, и на 390 ряды томов перестраивались — QA Q9). */
.pickbtn--pic{width:min-content; min-width:96px; padding-left:7px; padding-right:7px;}
.partcard{width:min-content; min-width:84px;}
@media (max-width:640px){ .pickbtn--pic{min-width:84px;} .partcard{min-width:72px;} }
/* «за книгу» (08.10): цена во всём каталоге — за одну книгу. В карточке подпись стоит справа от цены;
   если узкой карточке («от 600 ₽» на 4 колонках у 1000 px) не хватает места — переносится под цену, а не вылезает. */
.pcard__foot{flex-wrap:wrap; row-gap:0;}
.pcard__from{white-space:nowrap;}
.priceRow__unit{font-size:var(--fs-base); font-weight:500; letter-spacing:0; color:var(--ink-mute); white-space:nowrap;}