:root{--bg:#f3f5f8;--surface:#fff;--soft:#e8edf2;--fg:#0a1c2c;--muted:#526373;--line:#d7dfe6;--accent:#c94800;--fill:#ff660a;--band:#0a1c2c;--on-band:#f3f6f8;--ok:#10754a;--err:#c62828;--wa:#0f7a43}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 "Segoe UI",Roboto,Arial,sans-serif}
a{color:inherit}
h1{font-size:clamp(24px,3vw,32px);line-height:1.2;margin:0}
h2{font-size:20px;margin:0}
p{margin:0}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:16px}
.top form{margin:0}
.link{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.badge{background:var(--fill);color:var(--fg);border-radius:9px;padding:0 6px;font-size:12px}
main{display:grid;gap:16px;padding-block:20px 56px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px;min-width:0}
.narrow{max-width:420px;margin-inline:auto;width:100%}
.flash{background:#e3f4ea;border:1px solid #b5e0c6;color:var(--ok);padding:10px 14px;border-radius:8px;font-weight:600}
.flash.flash-float{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;max-width:min(560px,calc(100% - 32px));box-shadow:0 6px 24px rgba(0,0,0,.15)}
.error{color:var(--err);font-weight:600}
.muted,.note{color:var(--muted)}.note{font-size:14px}
label{display:grid;gap:5px;font-weight:600;font-size:14px;min-width:0}
input,select,textarea{font:inherit;font-size:16px;color:inherit;background:var(--surface);border:1.5px solid var(--line);border-radius:7px;padding:9px 10px;width:100%;min-width:0}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fill)}
:focus-visible{outline:3px solid var(--fill);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 16px;border:0;border-radius:7px;background:var(--fill);color:var(--fg);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.line{background:transparent;border:1.5px solid currentColor}
.btn.wa{background:var(--wa);color:#fff}
.filters{display:grid;grid-template-columns:minmax(0,1fr) 260px auto;gap:10px;align-items:end}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ph{aspect-ratio:1;background:#fff;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;padding:6px}
.ph img{max-width:100%;max-height:100%;object-fit:contain}
.card h3{font-size:14.5px;font-weight:500;margin:0;flex:1;overflow-wrap:anywhere}
.price{font-weight:800;font-size:19px}.price small{font-weight:500;font-size:13px;color:var(--muted)}
.tag{display:inline-block;background:#fff0e6;color:var(--accent);font-size:12px;font-weight:700;padding:1px 7px;border-radius:5px}
.was{color:var(--muted);text-decoration:line-through;font-size:13px}
.buy{display:grid;grid-template-columns:70px minmax(0,1fr);gap:6px;margin:0}
.pager{display:flex;gap:8px;justify-content:center;align-items:center}
.scroll{overflow-x:auto}
.hero{background:var(--band);color:var(--on-band);border-radius:10px;padding:clamp(22px,4vw,40px);display:grid;gap:14px}
.hero p{color:#a9b9c6;max-width:60ch;font-size:16.5px}
.hero .btn.line{color:var(--on-band)}
.trap{position:absolute;left:-9999px}
input.check{width:20px;height:20px}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-size:13px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td input{min-width:80px}
.total{display:flex;justify-content:space-between;font-size:21px;font-weight:800}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.status{font-weight:700}
.secret{font:600 18px ui-monospace,Menlo,monospace;background:var(--soft);padding:10px 12px;border-radius:7px;overflow-wrap:anywhere}
.comment{background:#fff8f2;border:1px solid #ffd9bf;border-radius:8px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:640px){.filters,.two{grid-template-columns:minmax(0,1fr)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.foot{background:var(--band);color:#a9b9c6;font-size:13.5px;margin-top:20px}
.foot-in{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-block:18px}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot a{text-decoration:none;color:var(--on-band)}.foot a:hover{text-decoration:underline}
.crumbs{font-size:13.5px;color:var(--muted)}.crumbs a{color:var(--accent);text-decoration:none}
.prod{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,44px);align-items:start}
.prod .ph{max-height:420px}
.prod .content .btn{justify-self:start}
.price.big{font-size:32px}
.card h3 a,.card .ph{text-decoration:none}
.card h3 a:hover{color:var(--accent)}
@media (max-width:640px){.prod{grid-template-columns:minmax(0,1fr)}}
.langs a{border:1px solid var(--line);border-radius:5px;padding:0 8px;background:var(--surface)}
.langs a[aria-current]{border-color:var(--accent);color:var(--accent);font-weight:700}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.rules li::before{content:"○";display:inline-block;width:20px;font-weight:700}
.rules li.ok{color:var(--ok);font-weight:600}
.rules li.ok::before{content:"✓"}
.stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stats div{display:grid;gap:2px}
.big{font-size:24px;font-weight:800}
.bad{color:var(--err);font-weight:700}
input.short{width:84px;min-width:84px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tile{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;text-decoration:none}
.tile:hover{border-color:var(--fill)}
.tile span{color:var(--muted);font-size:14px}
.tile b{font-size:26px}
.tile.alert{border-color:var(--err)}.tile.alert b{color:var(--err)}
.promo{background:var(--fill);color:var(--fg);text-align:center;font-weight:800;font-size:clamp(15px,2vw,20px);padding:9px 16px}
.promo a{text-decoration:none;display:block}
.util{background:var(--soft);font-size:13.5px}
.util-in{display:flex;justify-content:space-between;gap:4px 20px;flex-wrap:wrap;padding-block:6px}
.util nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.util a{text-decoration:none}.util a:hover{color:var(--accent)}
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 22px;align-items:center;padding-block:10px}
.brand{display:block;line-height:0}.brand img{height:46px;width:auto}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.search{display:flex;min-width:0;margin:0;border:2px solid var(--fill);border-radius:8px;overflow:hidden}
.search input{border:0;border-radius:0;flex:1}
.search button{width:50px;border:0;background:var(--fill);color:var(--fg);cursor:pointer;display:grid;place-items:center}
.acts{display:flex;gap:2px;align-items:stretch}
.acts form{margin:0;display:flex}
.acts a,.act-btn{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;padding:4px 10px;border-radius:6px;font-size:12.5px;text-decoration:none;background:none;border:0;color:inherit;font-family:inherit;cursor:pointer}
.acts a:hover,.act-btn:hover{background:var(--soft)}
.acts .badge{position:absolute;top:0;right:8px}
.staff{grid-column:2/-1;display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:flex-end;align-items:center;font-weight:600}
.staff a{text-decoration:none}.staff a:hover{color:var(--accent)}
.staff form{margin:0}
.shop{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.content{display:grid;gap:14px;min-width:0}
.cats{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:sticky;top:84px}
.cats a{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;text-decoration:none;font-weight:500;font-size:14px}
.cats a:hover{background:var(--soft)}
.cats a[aria-current]{background:var(--soft);color:var(--accent);font-weight:700}
.cats small{color:var(--muted)}
.card{position:relative}
.fav-form{position:absolute;top:8px;right:8px;margin:0;z-index:1}
.fav{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:var(--muted);cursor:pointer}
.fav:hover{color:var(--accent)}
.fav.on{color:var(--accent)}.fav.on .ic{fill:currentColor}
@media (max-width:900px){.shop{grid-template-columns:minmax(0,1fr)}.cats{display:flex;overflow-x:auto;position:static;background:none;border:0;gap:6px}.cats a{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 12px}.cats small{display:none}}
@media (max-width:720px){.head{grid-template-columns:auto minmax(0,1fr)}.acts{justify-self:end}.search{grid-column:1/-1;grid-row:2}.acts span{display:none}.brand img{height:38px}.staff{grid-column:1/-1;justify-content:flex-start}.acts .badge{right:0}}

/* Фирменный стиль: крупная типографика Montserrat, тёмно-синий и оранжевый из логотипа. */
:root{--display:"Montserrat",Arial,sans-serif;--body:"Golos Text","Segoe UI",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--shadow:0 1px 2px rgba(10,28,44,.05),0 8px 24px rgba(10,28,44,.06)}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:15.5px;line-height:1.55}
h1,h2,h3,.btn,.price,.total,.big,.tile b{font-family:var(--display)}
h1,h2{font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(26px,3.2vw,38px)}
h2{font-size:clamp(20px,2.2vw,26px)}
main{gap:22px;padding-block:24px 64px}
.btn{font-weight:700;border-radius:8px;min-height:46px;padding:10px 22px;transition:filter .15s,transform .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.line:hover{background:var(--soft)}
.hero .btn.line:hover{background:rgba(255,255,255,.1)}
.panel,.card,.tile,.cats{border-radius:12px;box-shadow:var(--shadow);border-color:#e3e9ef}
.card{padding:14px;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--fill);box-shadow:0 12px 30px rgba(10,28,44,.12)}
.card h3{font-size:14.5px;line-height:1.35}
.price{font-weight:800}
.tile{transition:transform .18s,border-color .18s}.tile:hover{transform:translateY(-2px)}
.tag{background:#fff0e6;border-radius:6px;font-family:var(--mono);font-weight:500}
table th{font-weight:600;text-transform:uppercase;font-size:11.5px;letter-spacing:.05em}
.top{box-shadow:0 1px 0 var(--line)}
.head{padding-block:12px}
.brand img{height:50px}
.search{border-radius:10px}
.promo{font-family:var(--display);letter-spacing:.01em}
.cats a{padding:10px 16px}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center;border-radius:14px;padding:clamp(28px,5vw,64px)}
.hero-text{display:grid;gap:22px;align-content:center}
.eyebrow{font:500 12.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:#ff8a42}
.hero h1{font-size:clamp(34px,5vw,60px);line-height:1.08;color:var(--on-band)}
.hero em{font-style:normal;color:#ff7a26}
.hero p{font-size:clamp(16px,1.5vw,19px);max-width:56ch}
.roll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.roll figure{margin:0;background:#fff;border-radius:10px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;padding:8px}
.roll img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.roll figure:nth-child(3n+2){transform:translateY(16px)}
#catalog{scroll-margin-top:96px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}.roll{grid-template-columns:repeat(4,minmax(0,1fr))}.roll figure:nth-child(n){transform:none}.roll figure:nth-child(n+9){display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.btn,.tile{transition:none}.card:hover,.tile:hover{transform:none}}
.hero h1{overflow-wrap:break-word}
@media (max-width:460px){.hero h1{font-size:29px}}

.segments{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.segment{display:grid;justify-items:center;gap:10px;text-align:center;padding:16px 8px;background:var(--surface);border:1px solid #e3e9ef;border-radius:12px;box-shadow:var(--shadow);text-decoration:none;font:700 14px/1.25 var(--display);transition:transform .18s,border-color .18s}
.segment:hover,.segment[aria-current]{border-color:var(--fill);transform:translateY(-2px)}
.segment[aria-current]{color:var(--accent)}
.segment-pic{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid #e3e9ef;display:grid;place-items:center;overflow:hidden}
.segment-pic img{width:56px;height:56px;object-fit:contain}
.filter-bar{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,1fr) auto;gap:10px;align-items:end;padding:14px}
@media (max-width:1100px){.segments{grid-template-columns:repeat(4,minmax(0,1fr))}.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.segments{grid-template-columns:repeat(3,minmax(0,1fr))}.segment{padding:12px 4px;font-size:12.5px}.segment-pic{width:60px;height:60px}.segment-pic img{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.segment{transition:none}.segment:hover{transform:none}}
.filter-bar{grid-template-columns:minmax(0,1.3fr) minmax(0,.6fr) minmax(0,.6fr) minmax(170px,1.1fr) auto}
@media (max-width:1100px){.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.segments{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.segment{flex:0 0 112px;scroll-snap-align:start}}
/* Компактный баннер: примерно вдвое ниже прежнего. */
.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(16px,3vw,40px);padding:clamp(18px,2.6vw,34px) clamp(20px,3.4vw,44px);border-radius:12px}
.hero-text{gap:12px}
.hero h1{font-size:clamp(24px,2.7vw,36px);line-height:1.12}
.hero p{font-size:15.5px;max-width:58ch}
.hero .btn{min-height:40px;padding:8px 18px}
.eyebrow{font-size:11.5px}
.roll{gap:6px;max-width:300px;justify-self:end;width:100%}
.roll figure{padding:5px;border-radius:8px}
.roll figure:nth-child(3n+2){transform:translateY(8px)}
@media (max-width:820px){.roll{max-width:none;justify-self:stretch;grid-template-columns:repeat(6,minmax(0,1fr))}.roll figure:nth-child(n+7){display:none}}
@media (max-width:460px){.hero h1{font-size:23px}.hero p{font-size:14.5px}}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}.hero .row .btn{flex:1 1 auto}}

/* Главная как в макете магазина: тёмная верхняя полоса, кнопки разделов, категории с фото слева и баннер справа. */
.util{background:var(--band);color:var(--on-band);font-size:14px}
.util-in{padding-block:8px;align-items:center}
.util .city{color:#ff7a26;font-weight:700}
.util a{color:var(--on-band)}.util a:hover{color:#ff9a52}
.util nav{gap:4px 24px}
.langs a{background:transparent;border-color:rgba(255,255,255,.3)}
.langs a[aria-current]{color:#ff9a52;border-color:#ff9a52;font-weight:700}
.head{padding-block:14px}
.search{border-radius:12px}
.search input{padding:12px 16px;font-size:16.5px}
.search button{width:58px}
.quick{display:flex;gap:10px;padding-block:0 14px;overflow-x:auto;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick a{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 20px;border-radius:9px;background:var(--soft);font:700 15px/1.2 var(--display);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.quick a:hover{background:#dbe3ea}
.quick a.main{background:var(--band);color:var(--on-band)}
.quick a.main:hover{background:#16314a}
.quick a.hot{background:#fff1e6;color:var(--accent);box-shadow:inset 0 0 0 1.5px #ffc59e}
.quick a.hot:hover{background:#ffe2cc}
.quick .ic{width:22px;height:22px}
.shop{grid-template-columns:300px minmax(0,1fr);gap:22px}
.cats{top:150px;max-height:calc(100vh - 170px);overflow-y:auto;padding-block:6px}
.cats a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 16px;font-size:15px;line-height:1.25}
.cat-pic{width:40px;height:40px;display:grid;place-items:center;border-radius:7px;overflow:hidden}
.cat-pic img{width:100%;height:100%;object-fit:contain}
.cat-pic .ic{width:24px;height:24px;color:var(--accent)}
.cats small{font-variant-numeric:tabular-nums}
.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(18px,3vw,40px);padding:clamp(24px,4vw,56px) clamp(22px,4vw,56px);border-radius:14px}
.hero-text{gap:18px}
.hero h1{font-size:clamp(28px,3.6vw,48px);line-height:1.1}
.hero em{display:block}
.hero p{font-size:clamp(15.5px,1.4vw,18px);color:#b7c6d2}
.hero .btn{min-height:48px;padding:10px 24px}
.hero .row{display:flex;flex-wrap:wrap;gap:12px}
.roll{max-width:340px;gap:10px}
.roll figure{padding:8px;border-radius:9px}
.roll figure:nth-child(n){transform:none}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.perk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-content:start;padding:18px 20px;background:var(--surface);border:1px solid #e3e9ef;border-radius:12px;box-shadow:var(--shadow)}
.perk .ic{grid-row:span 2;width:28px;height:28px;color:var(--accent)}
.perk b{font:800 16px/1.3 var(--display)}
.perk span{color:var(--muted);font-size:14.5px}
.band{background:var(--band);color:var(--on-band);border-radius:14px;padding:clamp(26px,4.5vw,56px) clamp(22px,5vw,64px);display:grid;gap:16px;margin-top:18px}
.band h2{color:var(--on-band);font-size:clamp(24px,3vw,36px)}
.band p{color:#b7c6d2;max-width:62ch;font-size:clamp(15.5px,1.4vw,18px)}
.band .btn{justify-self:start;min-height:50px;padding:10px 28px}
.foot{margin-top:0;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px 32px;padding-block:36px 40px}
.foot-grid > div{display:grid;gap:8px;align-content:start}
.foot h3{margin:0 0 4px;color:#ff7a26;font:800 17px/1.2 var(--display)}
.foot-brand b{font:800 26px/1 var(--display);color:var(--on-band);letter-spacing:.02em}
.foot-brand b span{color:#ff7a26}
.foot-brand p{max-width:30ch}
@media (max-width:1100px){.shop{grid-template-columns:260px minmax(0,1fr)}.perks{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.shop{grid-template-columns:minmax(0,1fr)}.cats{display:flex;max-height:none;padding:0;overflow-x:auto;position:static}.cats a{display:flex;grid-template-columns:none}.cat-pic{display:none}.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}.roll{max-width:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.roll figure{padding:4px}.roll figure:nth-child(n+7){display:none}.hero em{display:inline}}
@media (max-width:560px){.util nav a:nth-child(n+3){display:none}.quick a{min-height:40px;padding:6px 14px;font-size:14px}.hero h1{font-size:27px}.hero .row .btn{flex:1 1 auto}.foot-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.quick a{transition:none}}
.thumb{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;display:block}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag.novat{background:#e8f1fb;color:#1c4f86;border-color:#bcd3ec}
/* Фильтр в левой колонке под списком категорий. */
.side{display:grid;gap:16px;align-content:start;min-width:0}
.side .cats{position:static;max-height:none}
.filter-side{gap:12px;padding:16px}
.filter-side h2{font-size:17px}
.price-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filter-side .row{display:flex;flex-wrap:wrap;gap:8px}
.filter-side .btn{flex:1 1 auto;min-height:44px}
@media (max-width:900px){.side{gap:12px}.filter-side{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-side h2,.filter-side .row{grid-column:1/-1}}
@media (max-width:480px){.filter-side{grid-template-columns:minmax(0,1fr)}}
/* Кнопки разделов: на широком экране переносятся на вторую строку, на телефоне листаются. */
@media (min-width:900px){.quick{flex-wrap:wrap;overflow:visible}}
.quick a[aria-current]{box-shadow:inset 0 0 0 2px var(--fill)}
/* Фото в карточке: всегда одинаковый квадрат, картинка вписывается целиком и не растягивает карточку. */
.card .ph{position:relative;overflow:hidden;aspect-ratio:1;width:100%}
.card .ph img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);max-width:none;max-height:none;object-fit:contain}
/* Название в карточке не длиннее трёх строк, полное название и описание на странице товара. */
.card h3 a{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desc{color:var(--muted);max-width:60ch}

/* Статьи */
.article{max-width:820px;line-height:1.6;display:block}
.article h2{margin-top:1.4em}
.article li{margin:.35em 0}
.articles{list-style:none;padding:0;margin:0}
.articles li{padding:12px 0;border-bottom:1px solid var(--line)}
.articles li:last-child{border-bottom:0}
.articles a{font-weight:600;font-size:1.1em}
.articles p{margin:.3em 0 0;color:var(--muted)}

/* Юридические страницы и согласие */
.legal{max-width:860px;line-height:1.6;display:block}
.legal h2{margin-top:1.2em;font-size:1.15em}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.check-row input{width:auto;margin-top:3px;flex:none}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:48px;margin:0}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--muted);cursor:pointer;padding:0;box-shadow:none}
.pw-eye:hover{color:var(--fg);background:var(--soft)}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kp-cats{border:1.5px solid var(--line);border-radius:7px;padding:10px 12px;margin:12px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 14px}
.kp-cats legend{font-weight:600;font-size:14px;padding:0 4px}
.kp-pick{border:1.5px solid var(--line);border-radius:7px;padding:10px 12px;margin:12px 0}
.kp-pick legend{font-weight:600;font-size:14px;padding:0 4px}
.kp-pick-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;position:sticky;top:0;background:var(--card,#fff);padding:6px 0;z-index:2}
.kp-pick-bar input{flex:1 1 260px;margin:0}
.kp-group{border-top:1px solid var(--line);padding:6px 0}
.kp-group summary{cursor:pointer;font-weight:600;font-size:14px;padding:4px 0}
.kp-group summary input{width:auto;margin:0 6px 0 0;vertical-align:middle}
.kp-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 16px;padding:6px 0 6px 24px}
.kp-item[hidden],.kp-group[hidden]{display:none}
.pay-qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pay-qr img{width:180px;height:180px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.pay-qr p{margin:6px 0}
.qr-slot{display:grid;gap:8px;align-content:start}
.qr-slot img{width:160px;height:160px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.debt-strip{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;margin:0 0 16px;padding:12px 16px;border-radius:10px;background:#fff3eb;border:1.5px solid var(--fill);color:var(--fg);text-decoration:none}
.debt-strip.overdue{background:#fdecec;border-color:var(--err)}
.debt-strip .more{margin-left:auto;font-weight:600;color:var(--accent)}
.small-note{font-size:12.5px}
.phone-wrap{display:flex;align-items:stretch;min-width:0}
.phone-prefix{display:flex;align-items:center;padding:0 10px;font-size:16px;font-weight:600;background:var(--soft);border:1.5px solid var(--line);border-right:0;border-radius:7px 0 0 7px;color:var(--fg)}
.phone-wrap input{border-radius:0 7px 7px 0;flex:1}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.price-pager{flex-wrap:wrap;margin:10px 0}
.price-pager .per-page{margin-left:auto;display:flex;gap:6px;align-items:center}
.row-save{padding:6px 10px;font-size:13px;white-space:nowrap}
/* Гость: путь к заказу, фильтр на телефоне, контраст и размер нажатий (13.11.2026) */
:root{--accent:#b03d00}
.acts a.btn.join{display:inline-flex;align-self:center;min-height:42px;padding:8px 16px;margin-left:6px;border-radius:8px;background:var(--fill);color:var(--fg);font-size:14px;font-weight:700;white-space:nowrap}
.acts a.btn.join:hover{background:var(--fill);filter:brightness(1.06)}
.buy-guest{width:100%;margin-top:auto;min-height:44px}
.login-why{display:grid;gap:10px;justify-items:start;background:var(--soft);border-radius:10px;padding:14px 16px}
.login-why p{margin:0}
.found a{color:var(--accent);white-space:nowrap}
.filter-box>summary{display:none}
.filter-box>summary::-webkit-details-marker{display:none}
.fav{width:44px;height:44px}
@media (max-width:900px){
  .filter-box>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600;cursor:pointer;list-style:none}
  .filter-box>summary::after{content:"";width:9px;height:9px;border:solid var(--fg);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
  .filter-box[open]>summary{border-radius:12px 12px 0 0;border-bottom-color:transparent}
  .filter-box[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .filter-box[open]>.filter-side{border-radius:0 0 12px 12px;margin-top:0}
  .filter-box .filter-side h2{display:none}
}
@media (max-width:720px){
  .top{position:static}
  .util nav:not(.langs){display:none}
  .util-in{flex-wrap:nowrap;align-items:center}
  .util a{display:inline-flex;align-items:center;min-height:44px}
  .langs a{min-width:44px;justify-content:center}
  .acts a,.act-btn{min-width:44px;min-height:44px}
  .foot a{display:flex;align-items:center;min-height:44px}
}
@media (max-width:420px){.acts a.btn.join{padding:8px 12px;font-size:13px}.util .city-wrap{display:none}}
@media (prefers-reduced-motion:reduce){.filter-box>summary::after{transition:none}}
/* Админка: разделы в выпадающих меню (13.11.2026) */
.staff-group{position:relative}
.staff-group>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600}
.staff-group>summary::-webkit-details-marker{display:none}
.staff-group>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.staff-group>summary:hover,.staff-group[open]>summary{background:var(--soft)}
.staff-group>summary[aria-current]{color:var(--accent)}
.staff-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:230px;display:grid;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(10,28,44,.14)}
.staff-menu a,.staff-menu .link{text-decoration:none;display:flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:7px;font-weight:500;text-align:left;width:100%}
.staff-menu a:hover,.staff-menu .link:hover{background:var(--soft);color:var(--fg)}
.staff-menu a[aria-current]{color:var(--accent);font-weight:700}
@media (max-width:720px){.staff-menu{right:auto;left:0}}
/* Доступность: переход к содержимому, заметный фокус в полях */
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:8px;background:var(--band);color:var(--on-band);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--fill);box-shadow:0 0 0 3px rgba(255,102,10,.28)}