/* Каталог */
.crumbs{display:flex;gap:.4rem;flex-wrap:wrap;font-size:var(--text-xs);color:var(--color-muted);padding-top:var(--space-6)}
.crumbs a{color:var(--color-muted);text-decoration:none}
.crumbs a:hover{color:var(--color-primary)}
.chead{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-3)}
.chead h1{font-size:var(--text-xl);font-weight:750;letter-spacing:-.01em;max-width:28ch}
.chead__sub{color:var(--color-muted);margin-top:var(--space-2);font-size:var(--text-sm)}
.chead__emb{display:flex;align-items:center;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.65rem .9rem;font-size:var(--text-sm);text-decoration:none;color:var(--color-text)}
.chead__emb b{color:var(--color-primary)}
.chead__emb:hover{border-color:var(--color-primary)}

.ctabs{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-5) 0 var(--space-2);scrollbar-width:thin;margin-inline:calc(-1 * clamp(1rem,4vw,2.5rem));padding-inline:clamp(1rem,4vw,2.5rem)}
.ctabs-w{position:relative}
.ctabs-arr{display:none}
@media (hover:hover) and (pointer:fine){
  .ctabs-arr{position:absolute;top:calc(var(--space-5) + 20px);translate:0 -50%;z-index:2;width:40px;height:40px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);box-shadow:0 4px 14px oklch(0.2 0.02 260 / .14);place-items:center;cursor:pointer;transition:border-color var(--transition-interactive)}
  .ctabs-arr:hover{border-color:var(--color-text)}
  .ctabs{margin-inline:0;padding-inline:0} /* на компьютере ряд обрезается по ширине контента, за стрелками ничего не видно */
  .ctabs-arr.l{left:0}.ctabs-arr.r{right:0}
  .ctabs-w.can-l .ctabs-arr.l,.ctabs-w.can-r .ctabs-arr.r{display:grid}
  /* мягкое затухание ряда под стрелкой */
  .ctabs-w::before,.ctabs-w::after{content:"";position:absolute;top:var(--space-5);height:40px;width:72px;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s}
  .ctabs-w::before{left:0;background:linear-gradient(90deg,var(--color-bg) 35%,transparent)}
  .ctabs-w::after{right:0;background:linear-gradient(270deg,var(--color-bg) 35%,transparent)}
  .ctabs-w.can-l::before,.ctabs-w.can-r::after{opacity:1}
}
.ctabs a{flex:none;display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 .95rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-decoration:none;font-size:var(--text-sm);font-weight:500;white-space:nowrap}
.ctabs a span{color:var(--color-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.ctabs a:hover{border-color:var(--color-text)}
.ctabs a[aria-current="page"]{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.ctabs a[aria-current="page"] span{color:var(--color-on-ink-muted)}

/* каталог шире остальных страниц: плавно от 1240px (экран 1280 и меньше) до 1440px (экран от 1520),
   по краям экрана всегда не меньше 40px поля + внутренний отступ; в ряд не больше 4 моделей */
.wrap{max-width:max(1240px,min(1440px,calc(100vw - 80px)))}
.clayout{display:grid;grid-template-columns:250px 1fr;gap:var(--space-8);margin-top:var(--space-5);margin-bottom:var(--space-16);align-items:start}
.filters{position:sticky;top:88px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);max-height:calc(100dvh / var(--z,1) - 104px);overflow:auto}
.fgroup+.fgroup{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.fgroup h3{font-size:var(--text-sm);font-weight:650}
.ftoggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;min-height:32px;font:inherit;font-weight:650;text-align:left;color:var(--color-text)}
.ftoggle svg{flex:none;color:var(--color-muted);transition:transform var(--transition-interactive)}
.ftoggle:hover svg{color:var(--color-text)}
.fgroup.closed .ftoggle svg{transform:rotate(180deg)}
.fgroup__body{margin-top:var(--space-3)}
#fbody .fgroup:first-child{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.fprice{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.fprice input{min-width:0;min-height:42px;padding:0 .75rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.fprice input::placeholder{color:var(--color-muted)}
.fprice input:focus{outline:none;border-color:var(--color-primary)}
.fcheck{display:flex;align-items:center;gap:.6rem;min-height:34px;font-size:var(--text-sm);cursor:pointer}
.fcheck input{width:18px;height:18px;accent-color:var(--color-primary);flex:none}
.fcheck em{font-style:normal;color:var(--color-muted);font-size:var(--text-xs);margin-left:auto;font-variant-numeric:tabular-nums}
.fcheck.off{opacity:.4}
.fcolors{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.fcolor.off{opacity:.25}
.fcolors:not(.all) .fx{display:none}
.fmore{margin-top:.6rem;font-size:var(--text-sm);font-weight:600;color:var(--color-primary);padding:.2rem 0}
.fmore:hover{text-decoration:underline}
.fnum{font-style:normal;color:var(--color-muted);font-weight:500;font-size:var(--text-xs)}
.fsel{font-size:var(--text-xs);color:var(--color-muted);margin-top:.6rem}
.fsel:empty{display:none}
.fcolor{position:relative;aspect-ratio:1;border-radius:999px;border:1px solid oklch(0.25 0.02 260 / .2);cursor:pointer}
.fcolor input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fcolor:has(input:checked){box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary)}
.fcolor:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:3px}
.freset{margin-top:var(--space-5);width:100%;min-height:42px;border-radius:var(--radius-sm);border:1px solid var(--color-border);font-size:var(--text-sm);font-weight:500}
.freset:hover{border-color:var(--color-text)}
.fclose{display:none}

.ctool{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.ctool__count{font-size:var(--text-sm);color:var(--color-muted)}
.ctool__count b{color:var(--color-text)}
.ctool__right{display:flex;gap:var(--space-2);align-items:center}
.ctool select{min-height:42px;padding:0 2rem 0 .8rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm)}
.fopen{display:none;min-height:42px;padding:0 1rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-sm);font-weight:600}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:var(--space-4)}
.chips:empty{display:none}
.chips button{min-height:32px;padding:0 .7rem;border-radius:999px;background:var(--color-surface-2);font-size:var(--text-xs);font-weight:500}
.chips button::after{content:" ×";color:var(--color-muted)}
.chips button:hover{background:oklch(from var(--color-primary) l c h / .12)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(205px,calc((100% - 3 * var(--space-4)) / 4)),1fr));gap:var(--space-4)}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--transition-interactive),border-color var(--transition-interactive)}
.pcard:hover{box-shadow:var(--shadow-md);border-color:oklch(0.25 0.02 260 / .2)}
.pcard__img{display:block;aspect-ratio:1;background:#f3f1ec;position:relative}
.pcard__img img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.pbadges{position:absolute;left:.6rem;top:.6rem;display:flex;gap:.3rem;z-index:1}
.pbadge{font-size:.6875rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.2rem .5rem;border-radius:4px;background:var(--color-ink);color:#fff}
.pbadge--sale{background:var(--color-primary)}
.pcard__body{display:flex;flex-direction:column;gap:.35rem;padding:var(--space-3) var(--space-4) var(--space-4);flex:1}
.pswatch{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.15rem;min-height:22px}
.pswatch button{width:18px;height:18px;border-radius:999px;border:1px solid oklch(0.25 0.02 260 / .2);padding:0;position:relative}
.pswatch button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--color-surface),0 0 0 3.5px var(--color-text)}
.pswatch button::before{content:"";position:absolute;inset:-6px}
.pcard__meta .nw{white-space:nowrap}
.pswatch span{font-size:var(--text-xs);color:var(--color-muted);align-self:center;margin-left:.15rem}
.pcard__art{font-size:var(--text-xs);color:var(--color-muted);font-variant-numeric:tabular-nums}
.pcard__name{font-size:var(--text-sm);font-weight:600;line-height:1.35;color:var(--color-text);text-decoration:none}
.pcard__name::after{content:"";position:absolute;inset:0}
.pcard__name:hover{color:var(--color-primary)}
.pcard__meta{font-size:var(--text-xs);color:var(--color-muted)}
.pcard__foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:.5rem;gap:.5rem}
.pcard__price{font-size:var(--text-lg);font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard__stock{font-size:var(--text-xs);color:oklch(0.42 0.1 150);font-weight:600}
.pswatch,.pswatch button{position:relative;z-index:2}

.ppromo{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap;background:var(--color-ink);color:var(--color-on-ink);border-radius:var(--radius-md);padding:var(--space-6) var(--space-8)}
.ppromo h3{font-size:var(--text-lg);font-weight:700}
.ppromo p{color:var(--color-on-ink-muted);font-size:var(--text-sm);margin-top:.3rem}
.pempty{grid-column:1/-1;text-align:center;padding:var(--space-12) var(--space-4);color:var(--color-muted)}

.seo{margin-block:0 var(--space-16);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:clamp(1.25rem,3vw,2.5rem)}
.seo__body{max-height:220px;overflow:hidden;position:relative;font-size:var(--text-sm);color:var(--color-muted);max-width:80ch}
.seo__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,var(--color-surface))}
.seo.open .seo__body{max-height:none}
.seo.open .seo__body::after{display:none}
.seo__body h2{font-size:var(--text-base);color:var(--color-text);margin:1.2rem 0 .4rem}
.seo__body h2:first-child{margin-top:0}
.seo__body p+p{margin-top:.6rem}
.seo__body a{color:var(--color-primary)}
/* текст под каталогом — по краям сетки товаров, а не под фильтрами */
@media (min-width:961px){.seo{margin-left:calc(250px + var(--space-8))}.seo__body{max-width:88ch}}
.seo__more{margin-top:var(--space-4);font-size:var(--text-sm);font-weight:600;color:var(--color-primary)}

@media (max-width:960px){
  .clayout{grid-template-columns:1fr}
  .filters{display:none;position:fixed;inset:0;z-index:80;border-radius:0;max-height:none;top:0;padding:0 var(--space-5) var(--space-16)}
  .fcolors{grid-template-columns:repeat(9,1fr)}
  .filters.open{display:block}
  .fclose{display:flex;position:sticky;top:0;justify-content:space-between;align-items:center;background:var(--color-surface);margin:0 -1.25rem 1rem;padding:1rem 1.25rem;z-index:2;border-bottom:1px solid var(--color-border);font-weight:700}
  .fclose button{min-height:40px;padding:0 1rem;border-radius:999px;background:var(--color-ink);color:#fff;font-size:var(--text-sm)}
  .fopen{display:inline-flex;align-items:center;gap:.4rem}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr 1fr;gap:var(--space-2)}
  .pcard__body{padding:var(--space-2) var(--space-3) var(--space-3)}
  .pcard__price{font-size:var(--text-base)}
  .pswatch button{width:16px;height:16px}
  .ppromo{padding:var(--space-5)}
  .chead__emb{width:100%}
}
/* подборки внутри раздела (Чёрные, Белые, Тракеры…): строка кнопок под рядом разделов */
.podb{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;padding:var(--space-2) 0 var(--space-1)}
.podb[hidden]{display:none}
.podb__l{white-space:nowrap;font-size:var(--text-sm);color:var(--color-muted);margin-right:.2rem}
.podb a{display:inline-flex;align-items:center;gap:.4rem;min-height:34px;padding:0 .8rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-decoration:none;font-size:var(--text-sm);white-space:nowrap}
.podb a em{font-style:normal;color:var(--color-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.podb a:hover{border-color:var(--color-text)}
.podb a[aria-current="page"]{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.podb a[aria-current="page"] em{color:oklch(0.85 0 0)}
@media (max-width:700px){.podb{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(1rem,4vw,2.5rem));padding-inline:clamp(1rem,4vw,2.5rem)}.podb::-webkit-scrollbar{display:none}.podb::after{content:"";flex:0 0 .5rem}}
.seo__body h3{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin:1rem 0 .3rem}
.seo__body ul{margin:.4rem 0 .6rem 1.2rem;list-style:disc}
.seo__body li+li{margin-top:.2rem}
.seo__body .tw{overflow-x:auto;margin:.6rem 0 1rem}
.seo__body .mt{border-collapse:collapse;width:100%;font-size:13px;color:var(--color-text)}
.seo__body .mt th,.seo__body .mt td{border-bottom:1px solid var(--color-border);padding:.35rem .5rem;text-align:left;vertical-align:top;white-space:nowrap}
.seo__body .mt td:nth-child(2){white-space:normal;min-width:14ch}
.seo__body .mt th{font-weight:600;background:var(--color-bg)}
.seo__body .ex{display:flex;gap:.75rem;flex-wrap:wrap;margin:.8rem 0}
.seo__body .ex figure{margin:0;flex:1 1 180px;max-width:240px}
.seo__body .ex img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);display:block}
.seo__body .ex figcaption{font-size:12px;margin-top:.3rem}
.seo__body details{border-bottom:1px solid var(--color-border);padding:.5rem 0}
.seo__body summary{font-weight:600;color:var(--color-text);cursor:pointer}
.seo__body details p{margin-top:.3rem}
.crumbs #crumb{display:contents}