/* ==== kp-main ==== */
/* K-Promo — Design System
   Brand: yellow #FFCF02 + ink #0A0A0A. Type: Futura PT (brand).
   Grid: 1240 container, 12 cols, gap 24, base unit 8.
*/

@font-face{font-family:"Futura PT";src:url(https://k-promo.ru/wp-content/themes/woodmart-child/assets/css/../fonts/futurapt-book.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url(https://k-promo.ru/wp-content/themes/woodmart-child/assets/css/../fonts/futurapt-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url(https://k-promo.ru/wp-content/themes/woodmart-child/assets/css/../fonts/futurapt-demi.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url(https://k-promo.ru/wp-content/themes/woodmart-child/assets/css/../fonts/futurapt-bold.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --yellow:#FFCF02;
  --yellow-hover:#FFD933;
  --yellow-soft:#FFF4B8;
  --ink:#0A0A0A;
  --ink-2:#3D3D3D;
  --ink-3:#8A8A8A;
  --line:#E5E5E5;
  --fog:#F7F7F7;
  --paper:#FFFFFF;
  --eco:#7CB342;
  --hot:#E74C3C;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --container:1240px;
  --gutter:24px;
  --shadow-card:0 8px 24px rgba(0,0,0,.07);
  --shadow-soft:0 2px 8px rgba(0,0,0,.04);
}

/* Базовый ресет применяется только внутри .kp-page для изоляции от WoodMart */
.kp-page *{box-sizing:border-box}
.kp-page{
  font-family:"Futura PT","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:1.55;color:var(--ink);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.kp-page img,.kp-page svg{display:block}
.kp-page a{color:inherit;text-decoration:none}
.kp-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.kp-page ul{list-style:none;margin:0;padding:0}

.kp-container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ───────── Top bar ───────── */
.kp-topbar{background:var(--ink);color:#FFFFFF;font-size:15px;line-height:1}
.kp-topbar-row{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 20px}
.kp-topbar-left,.kp-topbar-right{display:flex;gap:24px;align-items:center;line-height:1}
.kp-tb-msgs{display:inline-flex;gap:8px;align-items:center;height:100%}
.kp-tb-msg{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  transition:transform .15s,filter .15s;line-height:0;vertical-align:middle}
.kp-tb-msg img{width:22px;height:22px;display:block;object-fit:contain}
.kp-tb-msg:hover{transform:translateY(-1px) scale(1.08)}
.kp-tb-item{display:inline-flex;gap:8px;align-items:center;color:rgba(255,255,255,.78);
  letter-spacing:normal;transition:color .15s}
.kp-tb-item:hover{color:#fff}
.kp-tb-item svg{stroke:rgba(255,255,255,.7)}

/* ───────── Logo ───────── */
.kp-logo{display:inline-flex;align-items:center;gap:10px;line-height:1;color:var(--ink);text-decoration:none}
.kp-logo-mark-img{height:34px;width:34px;display:block;border-radius:6px}
.kp-logo-word{font-weight:900;font-size:26px;letter-spacing:normal;color:inherit}
.kp-logo-light{color:#fff}

/* ───────── Header ───────── */
.kp-header{background:var(--paper);border-bottom:1px solid var(--line)}
.kp-header-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:32px;align-items:center;height:90px}

.kp-search{position:relative;display:flex;align-items:center;background:var(--fog);
  border-radius:var(--radius-sm);height:48px;max-width:520px;width:100%;
  border:1px solid transparent;transition:border-color .15s,background .15s}
.kp-search:focus-within{background:#fff;border-color:var(--ink)}
.kp-search-input{flex:1;background:transparent;border:0;outline:0;height:100%;
  padding:0 16px;font-size:15px;color:var(--ink)}
.kp-search-input::placeholder{color:var(--ink-3)}
.kp-search-btn{width:48px;height:48px;background:var(--yellow);border-radius:var(--radius-sm);
  display:grid;place-items:center;transition:background .15s}
.kp-search-btn:hover{background:var(--yellow-hover)}

.kp-phones{display:flex;flex-direction:column;gap:2px;text-align:right}
.kp-phone-line{font-weight:700;font-size:16px;letter-spacing:normal}
.kp-phone-line:first-child{color:var(--ink)}
.kp-phone-mobile{color:var(--ink-2);font-weight:600;font-size:14px}

.kp-cta-call{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;
  background:var(--yellow);color:var(--ink);border-radius:var(--radius-sm);
  font-weight:600;font-size:15px;
  transition:background .15s,transform .15s; white-space:nowrap}
.kp-cta-call:hover{background:var(--yellow-hover);transform:translateY(-1px)}

/* ───────── Sticky Nav ───────── */
.kp-snav-wrap{position:sticky;top:0;z-index:50;}
.kp-snav{background:var(--yellow);border-bottom:1px solid rgba(0,0,0,.08);position:relative}
.kp-snav-row{display:flex;justify-content:space-between;align-items:stretch;height:56px}
.kp-snav-left{display:flex;align-items:stretch;gap:28px}
.kp-snav-allcats{display:inline-flex;align-items:center;gap:10px;background:var(--ink);
  color:#fff;padding:0 22px;font-weight:800;font-size:15px;letter-spacing:normal;
  text-transform:uppercase;transition:background .15s; align-self:stretch;
  margin-left:-20px;border-radius:0 0 0 0}
.kp-snav-allcats:hover,.kp-snav-allcats.is-open{background:#1a1a1a}
.kp-snav-link{display:inline-flex;align-items:center;font-weight:700;font-size:15px;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink);position:relative}
.kp-snav-link:hover::after{content:"";position:absolute;left:0;right:0;bottom:14px;
  height:2px;background:var(--ink)}
.kp-snav-right{display:flex;align-items:center;gap:18px}
.kp-snav-icon{position:relative;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;color:var(--ink);transition:background .15s}
.kp-snav-icon:hover{background:rgba(0,0,0,.08)}
.kp-snav-cart{display:inline-flex;align-items:center;gap:8px;background:var(--ink);
  color:#fff;padding:0 16px;height:36px;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;position:relative;transition:background .15s}
.kp-snav-cart:hover{background:#1a1a1a}
.kp-snav-cart-sum{font-feature-settings:"tnum"}
.kp-badge-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  padding:0 4px;background:var(--ink);color:var(--yellow);font-weight:800;font-size:11px;
  border-radius:9px;display:grid;place-items:center;border:2px solid var(--yellow);
  box-sizing:content-box}
.kp-badge-cart{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

/* mega menu */
.kp-mega-scrim{position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:40;animation:fade .2s}
.kp-mega{position:absolute;top:100%;left:0;right:0;background:#fff;
  box-shadow:0 24px 48px rgba(0,0,0,.18);z-index:60;
  display:grid;grid-template-columns:280px 1fr 380px;
  max-width:var(--container);margin:0 auto;border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;animation:slideDown .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.kp-mega-col{padding:24px}
.kp-mega-col-1{background:var(--fog);display:flex;flex-direction:column;gap:2px}
.kp-mega-cat{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  border-radius:var(--radius-sm);font-weight:700;font-size:14px;text-align:left;
  text-transform:uppercase;letter-spacing:normal;color:var(--ink-2);transition:all .15s}
.kp-mega-cat.is-active{background:var(--yellow-soft);color:var(--ink)}
.kp-mega-cat:hover{background:var(--yellow-soft);color:var(--ink)}
.kp-mega-spacer{flex:1}
.kp-mega-allcats{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;
  font-weight:800;text-transform:uppercase;letter-spacing:normal;font-size:12px;
  background:var(--ink);color:var(--yellow);border-radius:var(--radius-sm)}
.kp-mega-col-title{font-weight:800;font-size:11px;text-transform:uppercase;
  letter-spacing:normal;color:var(--ink-3);margin-bottom:14px}
.kp-mega-sublist{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.kp-mega-sub{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  padding:12px;border-radius:var(--radius-sm);transition:background .15s;color:var(--ink)}
.kp-mega-sub:hover{background:var(--fog)}
.kp-mega-sub-name{font-weight:600;font-size:14px}
.kp-mega-sub-count{color:var(--ink-3);font-size:15px;font-feature-settings:"tnum"}
.kp-mega-col-3{background:var(--fog);display:flex;flex-direction:column;gap:14px}
.kp-mega-hits{display:flex;flex-direction:column;gap:8px}
.kp-mega-hit{display:flex;gap:12px;padding:8px;background:#fff;border-radius:var(--radius-sm);transition:transform .15s,box-shadow .15s}
.kp-mega-hit:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.kp-mega-hit-thumb{width:64px;height:64px;flex-shrink:0;border-radius:6px;overflow:hidden}
.kp-mega-hit-meta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.kp-mega-hit-name{font-size:15px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kp-mega-hit-price{font-size:14px;font-weight:800;margin-top:4px}
.kp-mega-promo{position:relative;background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:20px;margin-top:auto;overflow:hidden}
.kp-mega-promo::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;
  background:var(--yellow);border-radius:50%}
.kp-mega-promo-kicker{font-size:11px;letter-spacing:normal;text-transform:uppercase;color:var(--ink-3);position:relative}
.kp-mega-promo-title{font-weight:900;font-size:20px;line-height:1;letter-spacing:normal;margin-top:8px;position:relative}
.kp-mega-promo-arrow{position:absolute;right:16px;bottom:16px;width:36px;height:36px;background:var(--yellow);color:var(--ink);
  border-radius:50%;display:grid;place-items:center}

/* ───────── Hero ───────── */
.kp-hero{padding:64px 0 80px;background:var(--paper);position:relative;overflow:hidden}
.kp-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;min-height:520px}
.kp-hero-kicker{display:inline-flex;gap:10px;align-items:center;font-weight:700;font-size:12px;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px}
.kp-hero-kicker-dot{width:8px;height:8px;background:var(--yellow);border-radius:50%;
  box-shadow:0 0 0 4px var(--yellow-soft)}
.kp-hero-title{font-weight:900;font-size:72px;line-height:.98;letter-spacing:normal;
  text-transform:uppercase;margin:0 0 28px;color:var(--ink)}
.kp-hero-sub{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:520px;margin:0 0 36px}
.kp-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.kp-hero-trust{display:flex;gap:28px;flex-wrap:wrap}
.kp-hero-trust-item{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15px;color:var(--ink-2);
  letter-spacing:normal;text-transform:uppercase}
.kp-hero-trust-item svg{color:var(--yellow);stroke:var(--ink)}

.kp-hero-right{position:relative;height:520px;isolation:isolate}
.kp-hero-blob{position:absolute;inset:0;background:var(--yellow);
  border-radius:50% 16% 50% 16% / 50% 50% 50% 50%;
  transform:rotate(-8deg) translateX(20px)}
.kp-hero-product{position:absolute;left:50%;top:50%;width:62%;
  transform:translate(-50%,-50%) rotate(2deg);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.25))}
.kp-hero-product-deck{position:absolute;inset:0}
.kp-hero-product-slide{opacity:0;transition:opacity .5s ease, transform .6s ease;
  transform:translate(-50%,-50%) rotate(-4deg) scale(.96)}
.kp-hero-product-slide.is-active{opacity:1;transform:translate(-50%,-50%) rotate(2deg) scale(1)}
/* Hero · реальное фото товара (прозрачный PNG поверх блоба) — размер по высоте, не по ширине.
   left:53% — визуальный центр жёлтого блоба (замер центроида: 52.9%), товар по центру блоба */
body.kp-body .kp-hero-product.kp-hero-product--photo{width:auto !important;height:104%;left:53% !important}
.kp-hero-product--photo .kp-hero-product-img{display:block;height:100%;width:auto;max-width:none !important;object-fit:contain}
/* Индивидуальная подгонка габаритов под гармонию (база 104%):
   ежедневник −20% → 83.2%; худи — база 104%; power bank +10% (с 73%) → 80.3%; рюкзак −10% → 93.6% */
body.kp-body .kp-hero-product.kp-hero-product--photo[data-kp-slide="1"]{height:83.2%}
body.kp-body .kp-hero-product.kp-hero-product--photo[data-kp-slide="3"]{height:80.3%}
body.kp-body .kp-hero-product.kp-hero-product--photo[data-kp-slide="4"]{height:93.6%}
.kp-hero-dots .kp-dot{border:0;padding:0;cursor:pointer;transition:all .2s}
.kp-hero-dots .kp-dot:hover{opacity:.5}
.kp-hero-dots .kp-dot.is-active{opacity:1}
.kp-hero-tag{position:absolute;background:#fff;border-radius:var(--radius);
  padding:14px 18px;box-shadow:var(--shadow-card);}
.kp-hero-tag-1{left:-20px;top:60px;}
.kp-hero-tag-num{font-weight:900;font-size:28px;letter-spacing:normal;line-height:1;font-feature-settings:"tnum"}
.kp-hero-tag-lbl{font-size:11px;color:var(--ink-3);letter-spacing:normal;text-transform:uppercase;margin-top:6px}
.kp-hero-tag-2{right:-20px;bottom:60px;display:flex;align-items:center;gap:10px}
.kp-hero-tag-meta{font-size:10px;color:var(--ink-3);letter-spacing:normal;text-transform:uppercase;
  border-right:1px solid var(--line);padding-right:10px}
.kp-hero-tag-name{font-weight:700;font-size:14px}
.kp-hero-dots{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.kp-hero-dots .kp-dot{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.18}
.kp-hero-dots .kp-dot.is-active{opacity:1;width:24px;border-radius:4px}

/* hero variants */
.kp-hero-v-split .kp-hero-blob{border-radius:0;transform:none;width:100%;height:100%}
.kp-hero-v-wide .kp-hero-blob{border-radius:var(--radius-lg);transform:none}

/* ── hero · stack variant ── */
.kp-hero-stack{position:relative;width:100%;height:100%}
.kp-hero-blob-stack{border-radius:46% 22% 46% 22% / 46% 46% 46% 46%;
  transform:rotate(6deg) translate(10px,10px)}
.kp-hstack-card{position:absolute;width:46%;background:#fff;border-radius:14px;
  padding:14px;box-shadow:var(--shadow-card);overflow:hidden}
.kp-hstack-card .kp-hstack-chip{position:absolute;left:14px;bottom:14px;
  display:inline-block;background:var(--yellow);color:var(--ink);
  font-weight:900;font-size:10px;letter-spacing:normal;padding:6px 10px;border-radius:999px}
.kp-hstack-card .kp-hstack-chip.is-dark{background:var(--ink);color:var(--yellow)}
.kp-hstack-c1{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);z-index:3}
.kp-hstack-c2{left:8%;top:18%;transform:rotate(-9deg);z-index:2;width:42%}
.kp-hstack-c3{right:6%;top:24%;transform:rotate(7deg);z-index:1;width:42%}
.kp-hstack-tag{left:-8px;bottom:60px;z-index:4}
.kp-hstack-flag{position:absolute;right:-12px;top:30px;z-index:4;
  background:var(--ink);color:var(--yellow);border-radius:14px;
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-card)}
.kp-hstack-flag-num{font-weight:900;font-size:42px;letter-spacing:normal;line-height:.9;
  font-feature-settings:"tnum"}
.kp-hstack-flag-lbl{font-size:10px;letter-spacing:normal;text-transform:uppercase;line-height:1.3;
  border-left:1px solid rgba(255,207,2,.4);padding-left:12px;color:var(--yellow)}

/* ── hero · mosaic variant ── */
.kp-hero-mosaic{position:relative;width:100%;height:100%;
  background:var(--yellow);border-radius:var(--radius-lg);
  padding:18px;overflow:hidden;isolation:isolate}
.kp-hero-mosaic::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 50%);
  pointer-events:none}
.kp-hero-mosaic-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);gap:10px;width:100%;height:100%;z-index:1}
.kp-hmos-cell{position:relative;background:#fff;border-radius:10px;padding:12px;
  overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.05)}
.kp-hmos-chip{position:absolute;left:10px;bottom:10px;background:var(--ink);color:var(--yellow);
  font-weight:900;font-size:9px;letter-spacing:normal;padding:5px 8px;border-radius:999px}
.kp-hmos-c0{transform:rotate(-1deg)}
.kp-hmos-c2{transform:rotate(1deg)}
.kp-hmos-c3{transform:rotate(1deg)}
.kp-hmos-c5{transform:rotate(-1deg)}
.kp-hero-mosaic-badge{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-3deg);z-index:2;
  background:var(--ink);color:#fff;border-radius:50%;
  width:160px;height:160px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  box-shadow:0 16px 32px rgba(0,0,0,.25)}
.kp-hmos-badge-num{font-weight:900;font-size:30px;letter-spacing:normal;
  font-feature-settings:"tnum";color:var(--yellow)}
.kp-hmos-badge-lbl{font-size:10px;letter-spacing:normal;text-transform:uppercase;
  margin-top:6px;line-height:1.3;color:#fff;opacity:.85}
.kp-hero-mosaic-pill{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  z-index:3;background:#fff;border-radius:999px;padding:10px 18px;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:12px;letter-spacing:normal;text-transform:uppercase;
  box-shadow:var(--shadow-card);white-space:nowrap}

/* ───────── Buttons ───────── */
.kp-btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;
  border-radius:var(--radius-sm);font-weight:800;font-size:14px;letter-spacing:normal;
  text-transform:uppercase;transition:all .15s;white-space:nowrap}
.kp-btn-primary{background:var(--ink);color:#fff}
.kp-btn-primary:hover{background:#1a1a1a;transform:translateY(-1px);box-shadow:var(--shadow-card)}
.kp-btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.kp-btn-ghost:hover{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--ink)}

.kp-link-yellow{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:15px;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:4px}
.kp-link-yellow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow)}
.kp-link-yellow:hover::after{height:4px;background:var(--ink)}
.kp-inline-link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}

/* ───────── Stats ───────── */
.kp-stats{padding:64px 0;background:var(--fog);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kp-stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.kp-stat{padding:8px 24px;position:relative}
.kp-stat:not(:first-child){border-left:1px solid var(--line)}
.kp-stats-divider-bar .kp-stat:not(:first-child){border-left:0;background-image:linear-gradient(to bottom,transparent 30%,var(--ink) 30% 70%,transparent 70%);background-size:1px 100%;background-repeat:no-repeat}
.kp-stats-divider-none .kp-stat{border-left:0}
.kp-stat-bar{width:32px;height:4px;background:var(--yellow);margin-bottom:14px}
.kp-stat-num{font-weight:900;font-size:56px;line-height:1;letter-spacing:normal;font-feature-settings:"tnum";color:var(--ink)}
.kp-stat-lbl{font-size:15px;color:var(--ink-3);margin-top:10px;line-height:1.4}

/* ───────── Section heads ───────── */
.kp-sec{padding:80px 0;background:var(--paper)}
.kp-sec-pop{background:var(--paper)}
.kp-sec-prods{background:var(--fog)}
.kp-sec-print{background:var(--paper)}
.kp-sec-cat-map{background:var(--fog)}
.kp-sec-adv{background:var(--ink);color:#fff}
.kp-sec-brands{background:var(--paper)}
.kp-sec-clients{padding:64px 0;background:var(--fog);overflow:hidden}
.kp-sec-cases{background:var(--paper)}
.kp-sec-faq{background:var(--paper)}
.kp-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.kp-sec-head-split{align-items:flex-start}
.kp-sec-kicker{font-weight:700;font-size:12px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.kp-sec-adv .kp-sec-kicker{color:rgba(255,255,255,.55)}
.kp-sec-title{font-weight:900;font-size:44px;line-height:1.05;letter-spacing:normal;
  text-transform:uppercase;margin:0;color:inherit}
.kp-sec-bar{display:block;width:64px;height:4px;background:var(--yellow);margin-top:18px}
.kp-sec-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink-2)}
.kp-sec-link:hover{color:var(--ink)}
.kp-sec-blurb{max-width:420px;font-size:16px;line-height:1.55;color:var(--ink-2);margin:0;padding-top:18px}
.kp-sec-adv .kp-sec-blurb{color:rgba(255,255,255,.7)}
.kp-sec-foot{display:flex;justify-content:center;margin-top:48px}

/* ───────── Popular categories ───────── */
.kp-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.kp-cat-card{display:flex;flex-direction:column;gap:14px;padding:18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);transition:all .2s;position:relative;overflow:hidden}
.kp-cat-card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.kp-cat-tone-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.kp-cat-tone-ink .kp-cat-count{color:rgba(255,255,255,.6)}
.kp-cat-num{font-size:11px;font-weight:700;letter-spacing:normal;color:var(--ink-3)}
.kp-cat-tone-ink .kp-cat-num{color:rgba(255,255,255,.45)}
.kp-cat-img{flex:1}
.kp-cat-foot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.kp-cat-icon{width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0;transition:transform .2s}
.kp-cat-card:hover .kp-cat-icon{transform:rotate(-8deg) scale(1.05)}
.kp-cat-name{font-weight:800;font-size:14px;letter-spacing:normal;text-transform:uppercase;line-height:1.2}
.kp-cat-count{font-size:12px;color:var(--ink-3);margin-top:2px;font-feature-settings:"tnum"}

/* ───────── Products ───────── */
.kp-prods-head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:end;margin-bottom:36px}
.kp-prods-tabs{display:flex;gap:32px;justify-self:center}
.kp-tab{position:relative;padding:8px 0;font-weight:800;font-size:18px;letter-spacing:normal;text-transform:uppercase;color:var(--ink-3);transition:color .15s}
.kp-tab.is-active{color:var(--ink)}
.kp-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--yellow)}
.kp-prods-arrows{display:flex;gap:8px}
.kp-rndbtn{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;transition:all .15s;color:var(--ink)}
.kp-rndbtn:hover{background:var(--yellow);border-color:var(--yellow)}
.kp-rndbtn:first-child svg{transform:rotate(180deg)}

.kp-prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.kp-prod{background:#fff;border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);transition:all .2s;position:relative}
.kp-prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--ink)}
.kp-prod-imgwrap{position:relative;background:#fff;border-radius:var(--radius-sm);overflow:hidden}
.kp-prod-badge{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:4px;
  font-weight:800;font-size:10px;letter-spacing:normal;text-transform:uppercase;z-index:2}
.kp-prod-badge-new,.kp-prod-badge-hit{background:var(--yellow);color:var(--ink)}
.kp-prod-badge-eco{background:var(--eco);color:#fff}
.kp-prod-badge-rus{background:var(--ink);color:var(--yellow)}
.kp-prod-fav{position:absolute;top:8px;right:8px;width:28px;height:28px;background:#fff;
  border-radius:50%;display:grid;place-items:center;color:var(--ink-3);box-shadow:var(--shadow-soft);z-index:2;
  transition:color .15s}
.kp-prod-fav:hover{color:var(--hot)}
.kp-prod-img{aspect-ratio:1/1}
.kp-prod-quick{position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--radius-sm);
  font-weight:700;font-size:11px;letter-spacing:normal;text-transform:uppercase;
  opacity:0;transition:all .2s;white-space:nowrap;z-index:2}
.kp-prod:hover .kp-prod-quick{opacity:1;transform:translateX(-50%) translateY(0)}
.kp-prod-swatches{display:flex;gap:6px;align-items:center;height:20px;margin-top:4px}
.kp-swatch{width:16px;height:16px;border-radius:50%;border:1px solid;display:inline-block}
.kp-swatch-more{font-size:11px;color:var(--ink-3);font-weight:700;font-feature-settings:"tnum"}
.kp-prod-name{margin:0;font-weight:700;font-size:14px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.kp-prod-sku{font-size:11px;color:var(--ink-3);letter-spacing:normal;font-feature-settings:"tnum"}
.kp-prod-stock{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);font-weight:600}
.kp-prod-stock svg{color:var(--eco);background:var(--yellow-soft);border-radius:50%;padding:2px;box-sizing:content-box;stroke:var(--ink)}
.kp-prod-stock.is-out{color:var(--ink-3)}
.kp-prod-stock.is-out svg{color:var(--ink-3);background:var(--fog)}
.kp-prod-foot{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:auto;padding-top:8px}
.kp-prod-price-num{font-weight:900;font-size:22px;letter-spacing:normal;font-feature-settings:"tnum"}
.kp-prod-price-cur{font-weight:700;font-size:14px;color:var(--ink-2)}
.kp-prod-price-req{font-weight:800;font-size:15px;color:var(--ink);text-transform:uppercase;letter-spacing:normal}
.kp-prod-price-from{font-size:11px;color:var(--ink-3);margin-top:2px;letter-spacing:normal}
.kp-prod-add{padding:10px 14px;border-radius:var(--radius-sm);font-weight:800;font-size:11px;
  letter-spacing:normal;text-transform:uppercase;background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);transition:all .15s}
.kp-prod-add:hover{background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ───────── Print methods ───────── */
.kp-print-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.kp-print-card{display:flex;flex-direction:column;gap:14px;padding:20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);transition:all .2s;position:relative}
.kp-print-card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.kp-print-num{font-size:11px;font-weight:700;letter-spacing:normal;color:var(--ink-3);font-feature-settings:"tnum"}
.kp-print-img{aspect-ratio:1/1}
.kp-print-name{margin:0;font-weight:800;font-size:18px;letter-spacing:normal;text-transform:uppercase}
.kp-print-desc{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.kp-print-more{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink);padding-top:6px;border-top:1px solid var(--line);margin-top:auto}
.kp-print-card:hover .kp-print-more{color:var(--ink)}
.kp-print-card:hover .kp-print-more svg{color:var(--yellow);transform:translateX(4px);transition:transform .15s}

/* ───────── Catalog map ───────── */
.kp-catmap-group{margin-bottom:48px}
.kp-catmap-grouphead{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.kp-catmap-grouplabel{font-weight:800;font-size:15px;letter-spacing:normal;text-transform:uppercase;color:var(--ink);
  background:var(--yellow);padding:8px 14px;border-radius:var(--radius-sm)}
.kp-catmap-line{flex:1;height:1px;background:var(--line)}
.kp-catmap-grouplink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink-2)}
.kp-catmap-grouplink:hover{color:var(--ink)}
.kp-catmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kp-catmap-grid-4,.kp-catmap-grid-5,.kp-catmap-grid-6{grid-template-columns:repeat(3,1fr)}
.kp-catmap-tile{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:all .2s}
.kp-catmap-tile:hover{border-color:var(--yellow);background:var(--yellow-soft);transform:translateY(-2px)}
.kp-catmap-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--fog);
  display:grid;place-items:center;color:var(--ink);transition:all .2s}
.kp-catmap-tile:hover .kp-catmap-icon{background:var(--yellow);transform:scale(1.06)}
.kp-catmap-row{display:flex;align-items:baseline;gap:10px}
.kp-catmap-name{font-weight:800;font-size:15px;letter-spacing:normal;text-transform:uppercase;line-height:1.2}
.kp-catmap-count{font-size:12px;color:var(--ink-3);font-weight:600;font-feature-settings:"tnum"}
.kp-catmap-count-srv{color:var(--ink-2);background:var(--fog);padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:normal}
.kp-catmap-tile:hover .kp-catmap-count-srv{background:#fff}
.kp-catmap-sub{font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.kp-dot-sep{margin:0 6px;color:var(--ink-3)}

/* ───────── Advantages ───────── */
.kp-adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08)}
.kp-adv-card{display:flex;flex-direction:column;gap:14px;padding:36px 32px;background:var(--ink);color:#fff;
  position:relative;transition:background .2s;min-height:240px}
.kp-adv-card:hover{background:#1a1a1a}
.kp-adv-num{font-size:12px;font-weight:700;letter-spacing:normal;color:rgba(255,255,255,.45);font-feature-settings:"tnum"}
.kp-adv-icon{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;transition:all .2s}
.kp-adv-card:hover .kp-adv-icon{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.kp-adv-title{margin:0;font-weight:900;font-size:18px;letter-spacing:normal;text-transform:uppercase}
.kp-adv-desc{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.7)}
.kp-adv-arrow{position:absolute;right:24px;top:24px;color:rgba(255,255,255,.3);transition:all .2s}
.kp-adv-card:hover .kp-adv-arrow{color:var(--yellow);transform:translateX(4px)}

/* ───────── Brands ───────── */
.kp-brand-grid{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line);gap:1px}
.kp-brand-cell{display:grid;place-items:center;background:#fff;height:96px;
  font-weight:800;font-size:14px;letter-spacing:normal;color:var(--ink-3);transition:all .2s}
.kp-brand-cell:hover{color:var(--ink);background:var(--yellow-soft)}
.kp-brand-cell:hover .kp-brand-word{transform:scale(1.06)}
.kp-brand-word{transition:transform .2s}

/* ───────── Clients marquee ───────── */
.kp-clients-head{margin-bottom:24px}
.kp-clients-title{font-weight:900;font-size:32px;line-height:1.1;letter-spacing:normal;text-transform:uppercase;margin:0}
.kp-clients-count{color:var(--yellow);background:var(--ink);padding:0 12px;border-radius:var(--radius-sm);
  display:inline-block;font-feature-settings:"tnum"}
.kp-clients-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.kp-clients-track{display:flex;gap:48px;align-items:center;width:max-content;
  animation:marquee 50s linear infinite;padding:24px 0}
.kp-client-word{font-weight:800;font-size:18px;letter-spacing:normal;color:var(--ink-3);
  white-space:nowrap;transition:color .2s}
.kp-client-word:hover{color:var(--ink)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───────── Cases ───────── */
.kp-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kp-case-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  transition:all .2s;display:flex;flex-direction:column}
.kp-case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--ink)}
.kp-case-img{position:relative}
.kp-case-tag{position:absolute;left:16px;top:16px;background:var(--yellow);color:var(--ink);
  padding:6px 12px;border-radius:var(--radius-sm);font-weight:800;font-size:11px;letter-spacing:normal}
.kp-case-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.kp-case-client{font-size:11px;font-weight:700;letter-spacing:normal;text-transform:uppercase;color:var(--ink-3)}
.kp-case-title{margin:0;font-weight:800;font-size:20px;line-height:1.2;letter-spacing:normal}
.kp-case-desc{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);flex:1}
.kp-case-more{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11px;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink);padding-top:8px;border-top:1px solid var(--line);margin-top:auto}
.kp-case-more svg{color:var(--yellow);transition:transform .15s}
.kp-case-card:hover .kp-case-more svg{transform:translateX(4px)}

/* ───────── FAQ ───────── */
.kp-faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.kp-faq-side .kp-sec-bar{margin-bottom:24px}
.kp-faq-blurb{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 24px}
.kp-faq-list{display:flex;flex-direction:column;gap:8px}
.kp-faq-item{background:var(--fog);border-radius:var(--radius);overflow:hidden;
  border-left:4px solid transparent;transition:all .2s}
.kp-faq-item.is-open{background:var(--yellow-soft);border-left-color:var(--yellow)}
.kp-faq-q{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  width:100%;padding:20px 24px;text-align:left}
.kp-faq-num{font-weight:700;font-size:12px;letter-spacing:normal;color:var(--ink-3);font-feature-settings:"tnum"}
.kp-faq-item.is-open .kp-faq-num{color:var(--ink)}
.kp-faq-qtext{font-weight:700;font-size:16px;letter-spacing:normal}
.kp-faq-toggle{width:32px;height:32px;background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.kp-faq-item.is-open .kp-faq-toggle{background:var(--ink);color:var(--yellow)}
.kp-faq-a-wrap{max-height:0;overflow:hidden;transition:max-height .3s ease}
.kp-faq-item.is-open .kp-faq-a-wrap{max-height:600px}
.kp-faq-a{margin:0;padding:0 24px 24px 64px;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ───────── Newsletter ───────── */
.kp-sec-newsletter{background:var(--yellow);padding:64px 0}
.kp-nl-row{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.kp-nl-kicker{font-weight:800;font-size:12px;letter-spacing:normal;color:var(--ink-2);margin-bottom:14px}
.kp-nl-title{margin:0;font-weight:900;font-size:44px;line-height:1;letter-spacing:normal;text-transform:uppercase}
.kp-nl-sub{margin:18px 0 0;font-size:16px;color:var(--ink-2);line-height:1.5;max-width:480px}
.kp-nl-form{display:flex;flex-direction:column;gap:12px}
.kp-nl-field{display:flex;background:#fff;border-radius:var(--radius-sm);overflow:hidden;height:64px;
  box-shadow:0 8px 24px rgba(0,0,0,.08)}
.kp-nl-field input{flex:1;border:0;outline:0;padding:0 24px;font-size:16px;background:transparent;font-weight:600}
.kp-nl-btn{display:inline-flex;align-items:center;gap:10px;padding:0 28px;background:var(--ink);color:#fff;
  font-weight:800;font-size:15px;letter-spacing:normal;text-transform:uppercase;transition:background .15s}
.kp-nl-btn:hover{background:#1a1a1a}
.kp-nl-tos{margin:0;font-size:12px;color:var(--ink-2);line-height:1.5}
.kp-nl-tos a{text-decoration:underline}
.kp-nl-done{display:inline-flex;align-items:center;gap:10px;padding:18px 24px;background:var(--ink);color:#fff;
  border-radius:var(--radius-sm);font-weight:800;font-size:14px;letter-spacing:normal;text-transform:uppercase}

/* ───────── Footer ───────── */
.kp-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:64px 0 24px;font-size:14px}
.kp-footer-row{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.2fr;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
.kp-footer-col-brand .kp-logo{margin-bottom:18px}
.kp-footer-blurb{font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);margin:0 0 20px}
.kp-footer-socials{display:flex;gap:12px;align-items:center}
.kp-footer-soc{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  line-height:0;transition:transform .15s,opacity .15s;opacity:.85}
.kp-footer-soc img{width:22px;height:22px;display:block;object-fit:contain}
.kp-footer-soc:hover{transform:translateY(-2px) scale(1.08);opacity:1}
.kp-footer-h{font-weight:800;font-size:11px;letter-spacing:normal;text-transform:uppercase;color:#fff;margin-bottom:18px}
.kp-footer-col ul{display:flex;flex-direction:column;gap:10px}
.kp-footer-col li a{color:rgba(255,255,255,.6);font-size:14px;transition:color .15s}
.kp-footer-col li a:hover{color:var(--yellow)}
.kp-footer-phone{display:block;color:#fff;font-weight:600;font-size:18px;margin-bottom:6px;letter-spacing:normal}
.kp-footer-mail{display:block;color:var(--yellow);font-weight:600;margin:14px 0}
.kp-footer-addr{margin:14px 0 4px;line-height:1.5;color:rgba(255,255,255,.6)}
.kp-footer-hours{margin:0;color:rgba(255,255,255,.45);font-size:15px}
.kp-footer-bottom{display:grid;grid-template-columns:1.2fr 1.5fr 1fr;gap:24px;align-items:center;padding-top:24px;font-size:12px;color:rgba(255,255,255,.45)}
.kp-footer-legal{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.kp-footer-legal a{color:rgba(255,255,255,.55);transition:color .15s}
.kp-footer-legal a:hover{color:var(--yellow)}
.kp-footer-socials-bottom{display:flex;gap:14px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.kp-footer-soc-bottom{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  line-height:0;opacity:.85;transition:transform .15s,opacity .15s}
.kp-footer-soc-bottom img{width:22px;height:22px;display:block;object-fit:contain}
.kp-footer-soc-bottom:hover{transform:translateY(-2px) scale(1.08);opacity:1}

/* ───────── Mobile sticky CTA + toast ───────── */
.kp-mobile-cta{display:none;position:fixed;bottom:16px;left:16px;right:16px;height:56px;
  background:var(--yellow);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:normal;
  text-transform:uppercase;border-radius:var(--radius-sm);align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:30}

.kp-toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:14px 20px;
  border-radius:var(--radius);display:flex;gap:14px;align-items:center;
  box-shadow:0 12px 32px rgba(0,0,0,.32);z-index:1000;animation:toastIn .25s ease;max-width:340px}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kp-toast-t{font-weight:700;font-size:14px}
.kp-toast-s{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;line-height:1.3}

/* ───────── Density ───────── */
[data-density="compact"] .kp-sec{padding:56px 0}
[data-density="compact"] .kp-hero{padding:48px 0 60px}
[data-density="comfy"] .kp-sec{padding:104px 0}
[data-density="comfy"] .kp-hero{padding:88px 0 100px}

/* ───────── Responsive ───────── */
@media (max-width:1100px){
  .kp-header-row{grid-template-columns:auto 1fr auto;gap:20px}
  .kp-phones{display:none}
  .kp-cat-grid,.kp-print-grid,.kp-prod-grid{grid-template-columns:repeat(3,1fr)}
  .kp-stats-row{grid-template-columns:repeat(3,1fr) ;gap:24px;row-gap:32px}
  .kp-stat:nth-child(4),.kp-stat:nth-child(5){border-left:0}
  .kp-hero-title{font-size:56px}
  .kp-sec-title{font-size:36px}
  .kp-nl-title{font-size:36px}
  .kp-adv-grid,.kp-cases-grid,.kp-catmap-grid{grid-template-columns:repeat(2,1fr)}
  .kp-brand-grid{grid-template-columns:repeat(4,1fr)}
  .kp-footer-row{grid-template-columns:1fr 1fr 1fr;gap:32px 24px}
  .kp-footer-col-brand,.kp-footer-col-contact{grid-column:span 3}
  .kp-footer-bottom{grid-template-columns:1fr;text-align:center}
  .kp-footer-legal,.kp-footer-socials-bottom{justify-content:center}
}
@media (max-width:760px){
  .kp-topbar-left .kp-tb-item:nth-child(2),.kp-topbar-right .kp-tb-item:nth-child(2){display:none}
  .kp-header-row{grid-template-columns:auto 1fr auto;height:72px}
  .kp-search{display:none}
  .kp-cta-call{padding:0 14px;font-size:11px}
  .kp-snav-left .kp-snav-link{display:none}
  .kp-hero-grid{grid-template-columns:1fr;gap:32px}
  .kp-hero-right{height:360px}
  .kp-hero-title{font-size:40px}
  .kp-hero-ctas .kp-btn{flex:1;justify-content:center}
  .kp-stats-row{grid-template-columns:repeat(2,1fr)}
  .kp-stat:nth-child(3){border-left:0}
  .kp-cat-grid,.kp-print-grid,.kp-prod-grid{grid-template-columns:repeat(2,1fr)}
  .kp-catmap-grid,.kp-adv-grid,.kp-cases-grid{grid-template-columns:1fr}
  .kp-brand-grid{grid-template-columns:repeat(3,1fr)}
  .kp-faq-grid{grid-template-columns:1fr;gap:40px}
  .kp-nl-row{grid-template-columns:1fr;gap:32px}
  .kp-sec-title{font-size:30px}
  .kp-mobile-cta{display:flex}
}

/* ───────── PATCH 1.2: фикс мега-меню (закрыто по умолчанию) ───────── */
/* Управление видимостью через CSS-класс, не через [hidden] — атрибут [hidden]
 * перебивается WoodMart/плагинами, а класс с !important — нет. */

.kp-mega.kp-mega-hidden,
.kp-mega-scrim.kp-mega-hidden,
.kp-mega-group-pane.kp-mega-hidden {
  display: none !important;
}

/* Стартовое состояние: до загрузки JS меню должно быть закрыто (страховка от FOUC) */
.kp-mega:not(.kp-mega-init),
.kp-mega-scrim:not(.kp-mega-init) {
  display: none;
}
.kp-mega.kp-mega-init,
.kp-mega-scrim.kp-mega-init {
  display: revert;
}
.kp-mega.kp-mega-init.kp-mega-hidden,
.kp-mega-scrim.kp-mega-init.kp-mega-hidden {
  display: none !important;
}

/* ───────── PATCH 1.3: Полосатый Placeholder ───────── */
/* Точная реплика KP.Placeholder из прототипа Claude Design.
 * 4 цветовых тона: warm (бежевый) / cool (серый) / yellow (жёлтый) / ink (чёрный).
 * Полосы 135deg, ширина 12px, светлый/тёмный сегмент.
 * Подпись в моноширинном шрифте 11px UPPERCASE с полупрозрачной плашкой. */

.kp-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.kp-placeholder-warm {
  background: repeating-linear-gradient(135deg, #EAE6DC 0 12px, #D9D2BF 12px 24px);
}
.kp-placeholder-cool {
  background: repeating-linear-gradient(135deg, #E5E8EB 0 12px, #D2D8DD 12px 24px);
}
.kp-placeholder-yellow {
  background: repeating-linear-gradient(135deg, #FFE98A 0 12px, #FFDA3D 12px 24px);
}
.kp-placeholder-ink {
  background: repeating-linear-gradient(135deg, #1B1B1B 0 12px, #0A0A0A 12px 24px);
}

.kp-placeholder-label {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing:normal;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  color: rgba(0, 0, 0, .42);
  background: rgba(255, 255, 255, .7);
  text-align: center;
  max-width: 80%;
}
.kp-placeholder-ink .kp-placeholder-label {
  color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .4);
}

/* В hero-слайдере placeholder занимает весь слайд */
.kp-hero-product-slide .kp-placeholder {
  height: 100%;
}

/* В карточках товаров — фильтр не нужен, прямые стили */
.kp-prod-imgwrap .kp-placeholder,
.kp-cat-img .kp-placeholder,
.kp-print-img .kp-placeholder,
.kp-case-img .kp-placeholder {
  height: 100%;
  display: flex;
}

/* Иконка категории внутри карточки — нужна обёртка для центровки SVG */
.kp-cat-icon svg,
.kp-catmap-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.kp-catmap-icon svg {
  width: 26px;
  height: 26px;
}
/* Карточки категорий/методов: реальное фото вместо плейсхолдера */
.kp-cat-img .kp-card-photo,.kp-print-img .kp-card-photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}

/* kp-cat-img background tile: прозрачные фото на единой светлой плитке */
.kp-cat-img{background:#fff;border-radius:8px;overflow:hidden}

/* kp-print-img background tile: прозрачные фото методов на белой плитке */
.kp-print-img{background:#fff;border-radius:8px;overflow:hidden}


/* ==== kp-patch-14 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.4
 * ───────────────────────────────────────────────────────────────
 * Фиксит 3 конкретные проблемы, выявленные по скринам:
 *
 *   1. Белая полоса слева у топ-бара / шапки / sticky-меню
 *      Причина: WoodMart-овский .website-wrapper / body имеет
 *      внутренний padding/margin, из-за чего fullwidth-блоки не
 *      доходят до края экрана слева.
 *      Решение: break-out из контейнера через 100vw + margin
 *      компенсация. Плюс гасим body-овские отступы на главной.
 *
 *   2. Мега-меню разваливается в одну колонку при открытии
 *      Причина: PATCH 1.2 в main.css использовал display:revert,
 *      который отменяет .kp-mega { display:grid } и возвращает
 *      user-agent default (block).
 *      Решение: убрать костыль revert, оставить только !important
 *      на .kp-mega-hidden, восстановить display:grid.
 *
 *   3. Futura PT не применяется к топ-бару / шапке / снаву
 *      Причина: font-family назначен на .kp-page, но топ-бар,
 *      шапка и sticky-меню находятся ВНЕ <main class="kp-page">.
 *      Решение: назначить на body.kp-body и на корневые элементы
 *      .kp-topbar/.kp-header/.kp-snav-wrap явно.
 *
 * Подключается в functions.php после kp-main, чтобы перебить.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * FIX 1 — Fullwidth для топ-бара, шапки и sticky-меню
 * ═══════════════════════════════════════════════════════════════ */

/* Гасим WoodMart-овские внешние отступы у body на главной.
 * .kp-body — наш класс (см. header.php), цепляется только когда
 * активна kpromo-страница, не трогает другие шаблоны. */
body.kp-body {
  margin: 0 !important;
  padding: 0 !important;
}

/* WoodMart обычно оборачивает контент в .website-wrapper или
 * .full-width-wrapper с боковыми padding. Если они есть — убираем
 * для нашего топ-блока. Селектор узкий, не сломает другие страницы. */
body.kp-body .website-wrapper,
body.kp-body > .website-wrapper,
body.kp-body .main-page-wrapper,
body.kp-body .site-content,
body.kp-body .kp-fullwidth-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow-x: clip; /* защита от горизонтального скролла */
}

/* WoodMart-овский .container на главной может мешать — заменяем
 * на наш .kp-container внутри template-parts. На случай если родительский
 * .container остаётся выше по дереву — сбрасываем его max-width. */
body.kp-body > .container,
body.kp-body .website-wrapper > .container {
  max-width: none !important;
  padding: 0 !important;
}

/* Гарантируем, что наши full-width блоки занимают всю ширину
 * viewport, даже если родитель уже их подсуживает. */
.kp-topbar,
.kp-header,
.kp-snav-wrap {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Защита от случайного появления горизонтального скролла */
body.kp-body {
  overflow-x: clip;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 2 — Мега-меню: восстанавливаем 3-колоночный grid
 * ═══════════════════════════════════════════════════════════════ */

/* Перебиваем PATCH 1.2 (display:revert ломал grid). 
 * Просто и надёжно: видимое состояние — всегда grid. */
.kp-mega {
  display: grid !important;
  grid-template-columns: 280px 1fr 380px;
}

/* Стартовое скрытие до инициализации JS (FOUC-защита).
 * Использует ту же логику, что и mega-hidden — display:none. */
.kp-mega:not(.kp-mega-init),
.kp-mega-scrim:not(.kp-mega-init) {
  display: none !important;
}

/* Скрытое состояние через класс — приоритет над display:grid */
.kp-mega.kp-mega-hidden,
.kp-mega-scrim.kp-mega-hidden,
.kp-mega-group-pane.kp-mega-hidden {
  display: none !important;
}

/* Скрим — fixed, без grid */
.kp-mega-scrim {
  display: block !important;
}
.kp-mega-scrim.kp-mega-hidden {
  display: none !important;
}

/* Подкатегории — flex/grid внутри pane */
.kp-mega-group-pane {
  display: block;
}
.kp-mega-group-pane.kp-mega-hidden {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 3 — Futura PT на body и корневых блоках темы
 * ═══════════════════════════════════════════════════════════════ */

/* Применяем Futura PT глобально на наших страницах (через body.kp-body)
 * с высокой специфичностью, чтобы перебить WoodMart-овский CSS,
 * который ставит свой font-family на body. */
body.kp-body,
body.kp-body .kp-topbar,
body.kp-body .kp-header,
body.kp-body .kp-snav-wrap,
body.kp-body .kp-snav,
body.kp-body .kp-page,
body.kp-body .kp-footer,
body.kp-body button,
body.kp-body input,
body.kp-body select,
body.kp-body textarea {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Сглаживание шрифта и feature-settings — на всех корневых блоках,
 * не только на .kp-page (раньше было только на .kp-page) */
body.kp-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}


/* ═══════════════════════════════════════════════════════════════
 * BONUS — небольшие правки по дизайну (соответствие Claude Design)
 * ═══════════════════════════════════════════════════════════════ */

/* Hero-заголовок — в дизайне line-height 0.98, не 1.4.
 * Сейчас на скрине получается с большим воздухом между строк. */
.kp-hero-title {
  line-height: 0.98;
}

/* Логотип в шапке — высота 34px (дизайн), не 40px */
.kp-logo img,
.kp-logo .kp-logo-mark-img {
  height: 34px;
}


/* ==== kp-patch-15 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.5
 * ───────────────────────────────────────────────────────────────
 * Цель: восстановить визуал к референсу из Claude Design.
 *
 * Корневая причина расхождений: WoodMart-родитель грузит свой CSS
 * с более высокой специфичностью (через body.theme-default, через
 * .website-wrapper .btn, через a { ... } без префиксов) и перебивает
 * наши .kp-* правила, у которых специфичность всего 0,0,1,0.
 *
 * Решение: префиксуем критичные правила селектором body.kp-body —
 * это даёт 0,0,1,1 (плюс класс на body), что покрывает большинство
 * WoodMart-овских селекторов. На самых упорных местах добавляем !important.
 *
 * Подключается ПОСЛЕ patch-1.4.css → перебивает и main, и patch-1.4.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * FIX A — Sticky-меню: UPPERCASE + чёткие стили ссылок
 * ═══════════════════════════════════════════════════════════════ */

/* WoodMart перебивает text-transform на ссылках через .website-wrapper a.
 * Поднимаем специфичность + !important */
body.kp-body .kp-snav-link,
body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-allcats span {
  text-transform: uppercase !important;
  letter-spacing:normal!important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-allcats span {
  color: #fff !important;
}

/* Разделительная вертикальная линия между "Все категории" и первой ссылкой */
body.kp-body .kp-snav-left .kp-snav-link:first-of-type {
  position: relative;
  padding-left: 28px;
}
body.kp-body .kp-snav-left .kp-snav-link:first-of-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: rgba(0, 0, 0, 0.15);
}

/* CTA "Заказать звонок" в шапке — жёлтая кнопка, UPPERCASE по дизайну */
body.kp-body .kp-cta-call {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing:normal!important;
  height: 56px !important;
  padding: 0 28px !important;
  border-radius: var(--radius-sm) !important;
  text-transform: none !important; /* в дизайне НЕ uppercase, остаётся как есть */
}

/* Кнопка корзины в sticky — UPPERCASE убираем, она остаётся "0 ₽" */
body.kp-body .kp-snav-cart,
body.kp-body .kp-snav-cart-sum {
  text-transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX B — Hero: заголовок жирный, без межбуквенного воздуха
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-title {
  font-weight: 900 !important;
  font-size: 64px !important;            /* было 72, в дизайне ~64 на ширине 1240 */
  line-height: 0.98 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  margin: 0 0 32px !important;
  color: var(--ink) !important;
}

body.kp-body .kp-hero-kicker {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing:normal!important;
  color: var(--ink-2) !important;
}

body.kp-body .kp-hero-sub {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  font-weight: 400 !important;
  max-width: 520px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX C — Кнопки: восстанавливаем заливку и обводку
 * ═══════════════════════════════════════════════════════════════ */

/* Базовая кнопка — все ключевые свойства с !important. 
 * WoodMart перебивает background, color, padding, border-radius. */
body.kp-body .kp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 56px !important;
  padding: 0 28px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all .15s !important;
}

/* Primary — тёмная заливка, белый текст */
body.kp-body .kp-btn-primary,
body.kp-body button.kp-btn-primary,
body.kp-body a.kp-btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.kp-body .kp-btn-primary:hover {
  background: #1a1a1a !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-card) !important;
  color: #fff !important;
}
body.kp-body .kp-btn-primary span {
  color: #fff !important;
}

/* Ghost — прозрачная с обводкой */
body.kp-body .kp-btn-ghost,
body.kp-body button.kp-btn-ghost,
body.kp-body a.kp-btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 2px var(--ink) !important;
  border: 0 !important;
}
body.kp-body .kp-btn-ghost:hover {
  background: var(--yellow) !important;
  box-shadow: inset 0 0 0 2px var(--ink) !important;
  color: var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX D — Hero trust-items (✓ БЕЗНАЛ С НДС и т.д.)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
}
body.kp-body .kp-hero-trust-item {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
}
body.kp-body .kp-hero-trust-item svg {
  color: var(--ink) !important;
  stroke: var(--ink) !important;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX E — Точки-индикаторы слайдера hero (в дизайне они есть!)
 * ═══════════════════════════════════════════════════════════════ */

/* Баг: в hero.php класс button — "dot", но в main.css селектор — ".kp-dot".
 * Селектор не находит элементы → точки не видны.
 * Решение: подхватываем оба варианта класса для совместимости. */

body.kp-body .kp-hero-dots {
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 5;
}

body.kp-body .kp-hero-dots .dot,
body.kp-body .kp-hero-dots .kp-dot,
body.kp-body .kp-hero-dots button {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ink) !important;
  opacity: 0.18 !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  display: block !important;
}

body.kp-body .kp-hero-dots .dot.is-active,
body.kp-body .kp-hero-dots .kp-dot.is-active,
body.kp-body .kp-hero-dots button.is-active {
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

body.kp-body .kp-hero-dots .dot:hover,
body.kp-body .kp-hero-dots .kp-dot:hover {
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX F — Поиск в шапке: жёлтая кнопка-лупа должна быть заметной
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search {
  background: var(--fog) !important;
  border-radius: var(--radius-sm) !important;
  height: 56px !important;
  max-width: 520px !important;
  border: 1px solid transparent;
  padding: 4px !important;
  gap: 4px;
}
body.kp-body .kp-search-input {
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--ink) !important;
}
body.kp-body .kp-search-btn {
  width: 48px !important;
  height: 48px !important;
  background: var(--yellow) !important;
  border-radius: var(--radius-sm) !important;
  border: 0 !important;
  display: grid !important;
  place-items: center;
  flex-shrink: 0;
}
body.kp-body .kp-search-btn:hover {
  background: var(--yellow-hover) !important;
}
body.kp-body .kp-search-btn svg {
  color: var(--ink) !important;
  stroke: var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX G — Общая защита от WoodMart: ссылки и кнопки
 * ═══════════════════════════════════════════════════════════════ */

/* WoodMart часто добавляет underline/color на все a-теги внутри
 * .website-wrapper. Снимаем для наших блоков. */
body.kp-body .kp-topbar a,
body.kp-body .kp-header a,
body.kp-body .kp-snav a,
body.kp-body .kp-page a,
body.kp-body .kp-footer a {
  text-decoration: none;
}

/* WoodMart-овская тень на кнопках */
body.kp-body .kp-snav-cart,
body.kp-body .kp-snav-icon,
body.kp-body .kp-cta-call,
body.kp-body .kp-btn,
body.kp-body .kp-search-btn {
  box-shadow: none;
}

/* Bring back специфичные box-shadow только где они нужны */
body.kp-body .kp-btn-ghost {
  box-shadow: inset 0 0 0 2px var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX H — Контейнер hero: расстояние, выравнивание
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero {
  padding: 64px 0 80px !important;
}
body.kp-body .kp-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  min-height: 520px;
}
body.kp-body .kp-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX I — Чтобы не было лишнего верхнего отступа у main.kp-home
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body main.kp-home,
body.kp-body main.kp-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX J — Lighter z-index fix для админ-бара WP
 * ═══════════════════════════════════════════════════════════════ */
body.admin-bar .kp-snav-wrap {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .kp-snav-wrap {
    top: 46px;
  }
}


/* ==== kp-patch-16 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.6
 * ───────────────────────────────────────────────────────────────
 * Финальный фикс расхождений с дизайном (после попиксельного сравнения):
 *
 *   1. Точки слайдера складываются в столбик, должны быть в ряд
 *      Причина: WoodMart грузит на button-элементах внутри hero
 *      flex-direction: column через какой-то родительский селектор,
 *      либо overflow родителя обрезает их позиционирование.
 *      Фикс: жёсткий flex-direction:row + overflow:visible на hero.
 *
 *   2. "ВСЕ КАТЕГОРИИ" блёкло-серое вместо чисто белого
 *      Причина: WoodMart ставит color на button-элементах.
 *      Фикс: цвет белый с !important на всех вложенных элементах.
 *
 *   3. "Заказать звонок" и "0 ₽" — не должны быть uppercase.
 *
 *   4. Точки слайдера обрезаются из-за overflow:hidden у hero.
 *
 * Подключается ПОСЛЕ patch-1.5.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * FIX 1 — Точки слайдера: горизонтальный ряд
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-dots {
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.kp-body .kp-hero-dots > button,
body.kp-body .kp-hero-dots .kp-dot,
body.kp-body .kp-hero-dots .dot {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ink) !important;
  opacity: 0.18 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  display: block !important;
  outline: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}

body.kp-body .kp-hero-dots > button.is-active,
body.kp-body .kp-hero-dots .kp-dot.is-active,
body.kp-body .kp-hero-dots .dot.is-active {
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 4px !important;
}

body.kp-body .kp-hero-dots > button:hover,
body.kp-body .kp-hero-dots .kp-dot:hover,
body.kp-body .kp-hero-dots .dot:hover {
  opacity: 0.5 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 2 — "ВСЕ КАТЕГОРИИ" — чисто белый
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats {
  background: var(--ink) !important;
  color: #fff !important;
}
body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-allcats *,
body.kp-body .kp-snav-allcats span,
body.kp-body .kp-snav-allcats svg {
  color: #fff !important;
  fill: currentColor;
}
body.kp-body .kp-snav-allcats svg {
  stroke: #fff !important;
}
body.kp-body .kp-snav-allcats:hover,
body.kp-body .kp-snav-allcats.is-open {
  background: #1a1a1a !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 3 — "Заказать звонок" и "0 ₽" — НЕ uppercase
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cta-call,
body.kp-body button.kp-cta-call {
  text-transform: none !important;
  letter-spacing:normal!important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

body.kp-body .kp-snav-cart,
body.kp-body .kp-snav-cart-sum {
  text-transform: none !important;
  letter-spacing:normal!important;
  font-weight: 800 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 4 — Заголовок hero
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-title {
  font-weight: 900 !important;
  font-size: 64px !important;
  line-height: 0.98 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  white-space: normal !important;
  word-break: keep-all;
  hyphens: none;
  max-width: 100%;
  margin: 0 0 32px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 5 — Защита от overflow:hidden, который резал точки
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero {
  overflow: visible !important;
}
body.kp-body .kp-hero-right {
  overflow: visible !important;
}


/* ==== kp-patch-17 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.7
 * ───────────────────────────────────────────────────────────────
 * Шапка: корректные веса шрифта по эталону Claude Design.
 * Гарнитура (Futura PT) у всех элементов та же, разница только
 * в font-weight. В предыдущих патчах я задал слишком слабые
 * веса — теперь по эталону.
 *
 * Поле поиска: высота 52px (вместо 64), убран внутренний padding,
 * кнопка-лупа примыкает к правому краю без отступа.
 *
 * Подключается ПОСЛЕ patch-1.6.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * FIX 1 — Placeholder поиска: жирный (600) и темнее
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search-input {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
}

body.kp-body .kp-search-input::placeholder {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 2 — Поле поиска: высота 52px, без внутреннего padding
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search {
  background: var(--fog) !important;
  border-radius: var(--radius-sm) !important;
  height: 52px !important;
  max-width: 520px !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;       /* чтобы кнопка примыкала к радиусу */
  display: flex !important;
  align-items: stretch !important;
}

body.kp-body .kp-search:focus-within {
  background: #fff !important;
  border-color: var(--ink) !important;
}

body.kp-body .kp-search-input {
  flex: 1 1 auto !important;
  height: 100% !important;
  padding: 0 20px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}

body.kp-body .kp-search-btn {
  width: 52px !important;
  height: 100% !important;
  background: var(--yellow) !important;
  border: 0 !important;
  border-radius: 0 !important;       /* прямые края, потому что обёртка обрезает */
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

body.kp-body .kp-search-btn:hover {
  background: var(--yellow-hover) !important;
}

body.kp-body .kp-search-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--ink) !important;
  color: var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 3 — Телефоны: правильные веса (800 для верхнего, 700 для нижнего)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: right !important;
}

body.kp-body .kp-phone-line {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing:normal!important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

body.kp-body .kp-phone-line.kp-phone-mobile,
body.kp-body a.kp-phone-mobile {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ink) !important;       /* в эталоне такой же тёмный, не серый */
  opacity: 0.7 !important;             /* лёгкая разница достигается opacity, не цветом */
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 4 — Кнопка "Заказать звонок": жирный 800
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cta-call,
body.kp-body button.kp-cta-call {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing:normal!important;
  text-transform: none !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  height: 52px !important;            /* ← синхронизация высоты с поиском */
  padding: 0 28px !important;
  border-radius: var(--radius-sm) !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
}

body.kp-body .kp-cta-call:hover {
  background: var(--yellow-hover) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * FIX 5 — Топ-бар: Futura PT, размер 15px (вес — наследуемый 400, не форсим)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-topbar,
body.kp-body .kp-topbar .kp-tb-item {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
}


/* ==== kp-patch-18 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.8
 * ───────────────────────────────────────────────────────────────
 * Корневая причина расхождений по шрифту в шапке:
 *
 * В эталоне (styles.css из Claude Design):
 *   html, body { font: 400 16px/1.55 "Futura PT", ... }
 *   → Futura применяется ГЛОБАЛЬНО ко всему документу
 *
 * В нашем main.css:
 *   .kp-page { font-family: "Futura PT", ... }
 *   → Futura применяется только к <main class="kp-page">
 *   → шапка, топ-бар, sticky-меню — ВНЕ .kp-page, наследуют
 *     font-family от WoodMart body (не Futura)
 *
 * Поэтому "ВСЕ КАТЕГОРИИ", телефоны, "Заказать звонок", placeholder
 * поиска визуально выглядят другим шрифтом, чем в эталоне.
 *
 * Этот патч приводит к поведению эталона — Futura на html/body
 * глобально, с приоритетом над WoodMart.
 *
 * Подключается ПОСЛЕ всех остальных патчей.
 * ─────────────────────────────────────────────────────────────── */

/* PATCH 3.4: scope сужен с `html body.kp-body *` до списка .kp-*
 * обёрток. Класс kp-body теперь сидит на body всех страниц (header.php
 * подключается везде), и `*` с !important роняла Futura PT на WC-контент
 * корзины/чекаута. Теперь Futura применяется только внутри наших
 * визуальных обёрток — chrome и .kp-page. */
html body.kp-body .kp-page,
html body.kp-body .kp-page *,
html body.kp-body .kp-topbar,
html body.kp-body .kp-topbar *,
html body.kp-body .kp-header,
html body.kp-body .kp-header *,
html body.kp-body .kp-snav-wrap,
html body.kp-body .kp-snav-wrap *,
html body.kp-body .kp-footer,
html body.kp-body .kp-footer *,
html body.kp-body .kp-mega,
html body.kp-body .kp-mega * {
  font-family: "Futura PT", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Базовые параметры font/color — только внутри наших обёрток,
 * чтобы не перебивать WC-стили на корзине/чекауте. */
html body.kp-body .kp-page,
html body.kp-body .kp-topbar,
html body.kp-body .kp-header,
html body.kp-body .kp-snav-wrap,
html body.kp-body .kp-footer,
html body.kp-body .kp-mega {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

/* Сглаживание шрифта — безвредно, оставляем глобально на body */
html body.kp-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ==== kp-patch-19 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 1.9
 * ───────────────────────────────────────────────────────────────
 * Сброс моих ошибочных правок в патчах 1.5/1.6/1.7 для элементов
 * шапки. Возвращаю ТОЧНЫЕ значения из эталонного styles.css.
 *
 * Эталон → Что было у меня в патчах → Что должно быть:
 *
 *   .search height           48px  → 52px/56px → 48px ✓
 *   .search-input padding    0 16px → 0 20px  → 0 16px ✓
 *   .search-input font-weight (наследуется) → 500 → не трогать
 *   .search-btn               48×48 r-sm → 52×52 r:0 → 48×48 r-sm ✓
 *   .cta-call height          48px → 56px/52px → 48px ✓
 *   .cta-call padding         0 22px → 0 28px → 0 22px ✓
 *   .cta-call font-size       15px → 14px → 15px ✓
 *   .cta-call font-weight     600 → 800 → 600 ✓
 *   .cta-call letter-spacing  (нет) → .04em → нет ✓
 *
 * Подключается ПОСЛЕ всех остальных патчей и переопределяет их.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * Поле поиска — ТОЧНО как в эталоне
 *   .search { height:48px; max-width:520px; ... }
 *   .search-input { padding:0 16px; font-size:15px }
 *   .search-btn { width:48px; height:48px; border-radius:var(--radius-sm) }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--fog) !important;
  border-radius: var(--radius-sm) !important;
  height: 48px !important;
  max-width: 520px !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  transition: border-color .15s, background .15s !important;
}

body.kp-body .kp-search:focus-within {
  background: #fff !important;
  border-color: var(--ink) !important;
}

body.kp-body .kp-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  height: 100% !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 400 !important;          /* наследуется, явно ставим 400 */
  color: var(--ink) !important;
}

body.kp-body .kp-search-input::placeholder {
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

body.kp-body .kp-search-btn {
  width: 48px !important;
  height: 48px !important;
  background: var(--yellow) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

body.kp-body .kp-search-btn:hover {
  background: var(--yellow-hover) !important;
}

body.kp-body .kp-search-btn svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--ink) !important;
  stroke: var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * Телефоны — ТОЧНО как в эталоне
 *   .phones { gap:2px; text-align:right }
 *   .phone-line { font-weight:700; font-size:16px; letter-spacing:-.01em }
 *   .phone-mobile { color:var(--ink-2); font-weight:600; font-size:14px }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: right !important;
}

body.kp-body .kp-phone-line {
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing:normal!important;
  color: var(--ink) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}

body.kp-body .kp-phone-mobile,
body.kp-body a.kp-phone-mobile,
body.kp-body .kp-phone-line.kp-phone-mobile {
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * "Заказать звонок" — ТОЧНО как в эталоне
 *   .cta-call {
 *     height:48px; padding:0 22px;
 *     background:var(--yellow); color:var(--ink);
 *     font-weight:600; font-size:15px;
 *     border-radius:var(--radius-sm);
 *     gap:8px;
 *     (НЕТ letter-spacing, НЕТ text-transform)
 *   }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cta-call,
body.kp-body button.kp-cta-call {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 22px !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing:normal!important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .15s, transform .15s !important;
}

body.kp-body .kp-cta-call:hover {
  background: var(--yellow-hover) !important;
  transform: translateY(-1px) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * Топ-бар — ТОЧНО как в эталоне
 *   .topbar { font-size:15px; line-height:1 }
 *   .tb-item { color:rgba(255,255,255,.78); letter-spacing:.01em }
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-topbar {
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

body.kp-body .kp-tb-item {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.78) !important;
  letter-spacing:normal!important;
  font-weight: 400 !important;
  transition: color .15s !important;
}

body.kp-body .kp-tb-item:hover {
  color: #fff !important;
}


/* ==== kp-patch-20 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 2.0
 * ───────────────────────────────────────────────────────────────
 * Hero: приведение к эталону styles.css / sections1.jsx из handoff.
 *
 * Источник истины — inline-стили на h1 в эталоне (перебивают
 * CSS-класс). Реальные значения, которые применяются в браузере:
 *   h1.kp-hero-title { font-size:56px; font-weight:700;
 *                      line-height:1.4; letter-spacing:-0.035em }
 *
 * Этот патч переопределяет patch-1.4/1.5/1.6 для Hero и
 * восстанавливает работающий адаптив 1100/768 (его сломали
 * !important-правила в patch-1.5/1.6 без медиа-запросов).
 *
 * Подключается ПОСЛЕ patch-1.9.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * 1 — Контейнер Hero
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero {
  padding: 64px 0 80px !important;
  background: #FFFFFF !important;
  position: relative;
  overflow: visible !important;
}

body.kp-body .kp-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  min-height: 520px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 2 — Kicker ("Корпоративные подарки · СПб · с 2024")
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-kicker {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  color: #3D3D3D !important;
  margin-bottom: 24px !important;
}

body.kp-body .kp-hero-kicker-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--yellow, #FECE15) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px #FFF4B8 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 3 — H1 (главное расхождение)
 *
 *   Было (patch-1.5/1.6):  64px / weight 900 / line-height 0.98
 *   Эталон (inline):       56px / weight 700 / line-height 1.4
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-title {
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  margin: 0 0 28px !important;
  color: #0A0A0A !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 4 — Подзаголовок
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-sub {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #3D3D3D !important;
  max-width: 520px !important;
  margin: 0 0 36px !important;
  font-weight: 500 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 5 — Кнопочный блок
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-ctas {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 40px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 6 — Блок доверия (Безнал / ЭДО / Отгрузка)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-trust {
  display: flex !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

body.kp-body .kp-hero-trust-item {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  color: #3D3D3D !important;
}

body.kp-body .kp-hero-trust-item svg {
  color: var(--yellow, #FECE15) !important;
  stroke: #0A0A0A !important;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
 * 7 — Правая колонка + blob
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-right {
  position: relative !important;
  height: 520px !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body.kp-body .kp-hero-blob {
  position: absolute !important;
  inset: 0 !important;
  background: var(--yellow, #FECE15) !important;
  border-radius: 50% 16% 50% 16% / 50% 50% 50% 50% !important;
  transform: rotate(-8deg) translateX(20px) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 8 — Картинка товара / слайды
 *
 * Сохраняем поведение слайдера: неактивный — rotate(-4deg) scale(.96)
 * opacity 0, активный — rotate(2deg) scale(1) opacity 1.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-product,
body.kp-body .kp-hero-product-slide {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 62% !important;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.25)) !important;
}

body.kp-body .kp-hero-product-slide {
  opacity: 0;
  transition: opacity .5s ease, transform .6s ease;
  transform: translate(-50%,-50%) rotate(-4deg) scale(.96) !important;
}

body.kp-body .kp-hero-product-slide.is-active {
  opacity: 1;
  transform: translate(-50%,-50%) rotate(2deg) scale(1) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 9 — Плашка "18 000 SKU в каталоге"
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-tag {
  position: absolute !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;
}

body.kp-body .kp-hero-tag-1 {
  left: -20px !important;
  top: 60px !important;
  right: auto !important;
  bottom: auto !important;
}

body.kp-body .kp-hero-tag-num {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing:normal!important;
  line-height: 1 !important;
  font-feature-settings: "tnum" !important;
}

body.kp-body .kp-hero-tag-lbl {
  font-size: 11px !important;
  color: #8A8A8A !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 10 — Плашка "МЕТОД | УФ-печать"
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-tag-2 {
  right: -20px !important;
  bottom: 60px !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.kp-body .kp-hero-tag-meta {
  font-size: 10px !important;
  color: #8A8A8A !important;
  letter-spacing:normal!important;
  text-transform: uppercase !important;
  border-right: 1px solid #E5E5E5 !important;
  padding-right: 10px !important;
}

body.kp-body .kp-hero-tag-name {
  font-size: 14px !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 11 — Точки слайдера
 *
 * patch-1.5/1.6 уже описали точки. Дублирую здесь, чтобы Hero
 * был в одном файле и эталоне (значения те же — расхождений нет).
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hero-dots {
  position: absolute !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
}

body.kp-body .kp-hero-dots .dot,
body.kp-body .kp-hero-dots .kp-dot,
body.kp-body .kp-hero-dots > button {
  width: 8px !important;
  height: 8px !important;
  background: #0A0A0A !important;
  opacity: 0.18 !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

body.kp-body .kp-hero-dots .dot.is-active,
body.kp-body .kp-hero-dots .kp-dot.is-active,
body.kp-body .kp-hero-dots > button.is-active {
  opacity: 1 !important;
  width: 24px !important;
  border-radius: 4px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 12 — Адаптив (чинит сломанные брейкпоинты из main.css)
 *
 * В main.css @media(max-width:1100) и (max-width:760) ужимают h1
 * до 56/40, но patch-1.5/1.6 форсили 64px !important без медиа →
 * адаптив не работал ни на одном экране.
 *
 * Брейкпоинт ≤768 (а не 760 из main.css) — по ТЗ.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  body.kp-body .kp-hero-title {
    font-size: 56px !important;
  }
}

@media (max-width: 768px) {
  body.kp-body .kp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  body.kp-body .kp-hero-right {
    height: 360px !important;
  }
  body.kp-body .kp-hero-title {
    font-size: 40px !important;
  }
  body.kp-body .kp-hero-ctas .kp-btn {
    flex: 1;
    justify-content: center;
  }
}


/* ==== kp-patch-30 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.0
 * ───────────────────────────────────────────────────────────────
 * Шапка: приведение к ЭФФЕКТИВНЫМ значениям эталона. В JSX многие
 * элементы шапки имеют inline-стили, которые перебивают CSS-классы
 * из styles.css. Patch-1.7/1.9 ориентировались только на классы и
 * пропустили inline-overrides. Этот патч их закрывает.
 *
 *   Селектор             CSS-класс       inline JSX       Эффект.
 *   .phone-line          16/700          18/600           18/600
 *   .phone-mobile        14/600          16/(inherit)     16/600
 *   .cta-call            15/600          18/600 (span)    18/600
 *   .snav-allcats span   inherit 800/15  600/14           600/14
 *   .snav-link           15/700 caps     600/14           600/14 caps
 *   .snav-cart-sum       (inherit)       600              600
 *   .badge-count (fav)   11/800          600 на span      11/600
 *   .snav-allcats svg    color=#fff      color="#FFCF02"  жёлтая
 *
 * Подключается ПОСЛЕ patch-2.0.css (handle kp-patch-30, deps
 * ['kp-patch-20']). patch-1.6 / 1.7 / 1.9 переопределяются здесь.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * 1 — Телефон верхний (десктоп)
 *   inline JSX: fontSize 18, fontWeight 600
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phone-line:not(.kp-phone-mobile) {
  font-size: 18px !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 2 — Телефон нижний (мобильный)
 *   inline JSX: fontSize 16 (вес 600 наследуется из patch-1.9)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-phone-mobile,
body.kp-body a.kp-phone-mobile,
body.kp-body .kp-phone-line.kp-phone-mobile {
  font-size: 16px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 3 — CTA "Заказать звонок"
 *   inline JSX на span внутри button: fontSize 18, fontWeight 600
 *   В нашем header.php span'а нет — текст лежит прямо в кнопке,
 *   поэтому таргет — сама кнопка.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cta-call,
body.kp-body button.kp-cta-call {
  font-size: 18px !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 4 — Текст "ВСЕ КАТЕГОРИИ" в sticky-nav кнопке
 *   inline JSX на span: fontSize 14, fontWeight 600
 *   uppercase / letter-spacing .1em / тёмный фон — уровнем выше
 *   на .kp-snav-allcats, не меняем.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats span {
  font-size: 14px !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 5 — Ссылки sticky-nav ("Доставка и оплата" и т. д.)
 *   inline JSX: fontSize 14, fontWeight 600
 *   uppercase / letter-spacing .08em — из main.css, не трогаем.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-link {
  font-size: 14px !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 6 — Сумма в корзине
 *   inline JSX на span.cart-sum: fontWeight 600
 *   patch-1.6 ставит 800 — здесь возвращаем 600 (text-transform
 *   и letter-spacing из 1.6 остаются как есть).
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-cart-sum {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 7 — Бэйдж избранного (НЕ корзины)
 *   inline JSX на span с favCount: fontWeight 600
 *   .kp-badge-cart inline не имеет — остаётся 800 из main.css.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-badge-count:not(.kp-badge-cart) {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 8 — Иконка menu в кнопке "ВСЕ КАТЕГОРИИ" — жёлтая
 *   Эталон JSX: <KP.Icon name="menu" color="#FFCF02"/>
 *   patch-1.6 ставит stroke:#fff на ВСЕ svg внутри .kp-snav-allcats —
 *   здесь точечно красим обратно в жёлтый.
 *
 *   PHP-правка в header.php не требуется: kp_ui_icon() не имеет
 *   параметра color (4-й аргумент — class, см. inc/icons.php:94),
 *   SVG генерится с stroke="currentColor", поэтому цветом управляем
 *   через CSS на родителе.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats svg {
  color: var(--yellow, #FECE15) !important;
  stroke: var(--yellow, #FECE15) !important;
}


/* ==== kp-patch-31 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.1
 * ───────────────────────────────────────────────────────────────
 * GLOBAL FONT-WEIGHT NORMALIZATION
 *
 * В дочерней теме подключены только 4 веса Futura PT:
 *   400 (book) · 500 (medium) · 600 (demi) · 700 (bold)
 *
 * Веса 800 и 900 браузер синтезирует искусственно (рисует жирнее
 * имеющегося Bold), что даёт "размазанный" контур и расхождения
 * с эталоном. В эталоне inline-стили JSX на каждом таком элементе
 * перебивают CSS-класс на 600/700.
 *
 * Этот патч закрывает всё разом:
 *   • 800/900 → 600, где в эталонной JSX явный inline 600
 *   • 800/900 → 700 в остальных случаях
 *   • main.css НЕ трогаем — только перебиваем через body.kp-body + !important
 *
 * Цель: после patch-3.1 максимальный вес во всём проекте = 700.
 * Подключается ПОСЛЕ patch-3.0.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * GROUP 1 — Заголовки секций (sec-title, clients-title, nl-title)
 *   эталон JSX: inline fontWeight 600
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-sec-title,
body.kp-body .kp-clients-title,
body.kp-body .kp-nl-title {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 2 — Крупные цифры (stat-num)
 *   эталон JSX: inline fontWeight 600
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-stat-num {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 3 — Кнопки .kp-btn (primary / ghost / sec-foot CTA и т.д.)
 *   эталон JSX: inline fontWeight 600 (на span или самой кнопке)
 *   Перебивает в т.ч. patch-1.5:121, который ставил 800!important.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-btn,
body.kp-body .kp-btn-primary,
body.kp-body .kp-btn-ghost,
body.kp-body .kp-btn span,
body.kp-body button.kp-btn,
body.kp-body a.kp-btn {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 4 — Названия в карточках с inline 600 в эталоне
 *   .kp-print-name → 600 (sections2:28)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-print-name {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 5 — Sticky-nav кнопки-shell
 *   текст внутри уже 600 (patch-3.0), сам shell-вес → 700
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-allcats,
body.kp-body .kp-snav-cart {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 6 — Мега-меню
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-mega-allcats,
body.kp-body .kp-mega-col-title,
body.kp-body .kp-mega-hit-price,
body.kp-body .kp-mega-promo-title {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 7 — Логотип (на случай если когда-нибудь будет .kp-logo-word)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-logo-word {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 8 — Бэйджи (избранное уже 600 в patch-3.0; корзина → 700)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-badge-count {
  font-weight: 700 !important;
}
/* Сохраняем приоритет patch-3.0 для не-cart бейджей (600). */
body.kp-body .kp-badge-count:not(.kp-badge-cart) {
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 9 — Карточки категорий / каталог-карты / кейсов
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cat-name,
body.kp-body .kp-catmap-grouplabel,
body.kp-body .kp-catmap-name,
body.kp-body .kp-case-tag,
body.kp-body .kp-case-title,
body.kp-body .kp-case-more {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 10 — Табы и продукт
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-tab,
body.kp-body .kp-prod-badge,
body.kp-body .kp-prod-price-num,
body.kp-body .kp-prod-price-req,
body.kp-body .kp-prod-add {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 11 — Методы нанесения (print-more) и ссылки-стрелки
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-print-more,
body.kp-body .kp-link-yellow {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 12 — Преимущества, бренды, клиенты
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-adv-title,
body.kp-body .kp-brand-cell,
body.kp-body .kp-client-word {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 13 — Newsletter (kicker / button / done state)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-nl-kicker,
body.kp-body .kp-nl-btn,
body.kp-body .kp-nl-done {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 14 — Footer и мобильный CTA
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-footer-h,
body.kp-body .kp-mobile-cta {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 15 — Hero-варианты stack/mosaic (не активны при variant=product,
 * но фиксируем на будущее)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-hstack-chip,
body.kp-body .kp-hstack-flag-num,
body.kp-body .kp-hmos-chip,
body.kp-body .kp-hmos-badge-num,
body.kp-body .kp-hero-mosaic-pill {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP 16 — Убрать унаследованный разделитель перед первой
 *            ссылкой sticky-nav (patch-1.5 рисует ::before-полоску,
 *            в эталоне такого разделителя нет)
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-left .kp-snav-link:first-of-type {
  padding-left: 0 !important;
}
body.kp-body .kp-snav-left .kp-snav-link:first-of-type::before {
  content: none !important;
  display: none !important;
  background: none !important;
}


/* ==== kp-patch-32 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.2
 * ───────────────────────────────────────────────────────────────
 * Popular Categories — фикс цветов на тёмной карточке (.cat-tone-ink).
 *
 * Корневая причина: наш main.css:42 содержит правило
 *   .kp-page a { color: inherit; text-decoration: none }
 * со специфичностью 0,0,1,1. Оно перебивает
 *   .kp-cat-tone-ink { color: #fff }  (0,0,1,0)
 * → карточка «Электроника» унаследовала ink-цвет от .kp-page и
 * рендерила текст заголовка и стрелку чёрным на чёрном фоне.
 *
 * В эталоне правило `a { color: inherit }` — тип-селектор без обёртки
 * (0,0,0,1), оно проигрывает классу .cat-tone-ink → текст белый.
 *
 * Решение точечное: явно белый цвет на tone-ink и нужных потомках
 * с высокой специфичностью (body.kp-body + двойной класс + !important).
 *
 * См. BACKLOG.md п.8 — этот же паттерн проверить в Advantages и Cases
 * перед работой над теми секциями.
 *
 * Подключается ПОСЛЕ patch-3.1.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * GROUP A — Popular Categories: tone-ink белый текст
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-cat-tone-ink,
body.kp-body a.kp-cat-tone-ink {
  color: #fff !important;
}

body.kp-body .kp-cat-tone-ink .kp-cat-name {
  color: #fff !important;
}

body.kp-body .kp-cat-tone-ink .kp-cat-foot > svg {
  color: #fff !important;
  stroke: #fff !important;
}


/* ==== kp-patch-33 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.3
 * ───────────────────────────────────────────────────────────────
 * Products Carousel — комплексный фикс. 4 группы правил (GROUP E удалена
 * вместе с разметкой quick-view, см. ниже):
 *
 *   GROUP A — Главный визуальный баг: фикс скрытия неактивной панели
 *             табов. UA-rule [hidden]{display:none} проигрывает
 *             .kp-prod-grid{display:grid} из-за равной специфичности +
 *             порядка → обе панели (new + hit) рендерятся одновременно,
 *             видно 10 карточек вместо 5. Принудительно display:none.
 *
 *   GROUP B — Inline-overrides из эталонной JSX (sections1.jsx):
 *               .prod-name        inline 600/16 (CSS-класс — 700/14)
 *               .prod-sku         inline 15px  (класс — 11px)
 *               .prod-stock       inline 14px  (класс — 12px)
 *               .sec-foot .btn-ghost inline 700 (patch-3.1 форсит 600)
 *
 *   GROUP C — Защита от WoodMart-сброса обводки кнопки "В корзину".
 *             WoodMart-родитель глобально режет box-shadow на кнопках.
 *             Жёстко возвращаем inset-border + bg + color на .kp-prod-add.
 *
 *   GROUP D — Защита позиции сердечка-избранного. WoodMart-wishlist
 *             может перебивать right→left → сердце уезжает в левый угол.
 *             Жёстко фиксируем right:8, left:auto на .kp-prod-fav.
 *
 *   GROUP E — [УДАЛЕНА] Защита hover-эффекта "Быстрый просмотр".
 *             Сам quick-view вырезан из шаблонов, правила стали мёртвыми.
 *
 * Подключается ПОСЛЕ patch-3.2.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * GROUP A — Скрытие неактивной панели табов
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-grid[hidden] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP B — Inline-overrides JSX
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-name {
  font-weight: 600 !important;
  font-size: 16px !important;
}

body.kp-body .kp-prod-sku {
  font-size: 15px !important;
}

body.kp-body .kp-prod-stock {
  font-size: 14px !important;
}

body.kp-body .kp-sec-prods .kp-sec-foot .kp-btn-ghost,
body.kp-body .kp-sec-prods .kp-sec-foot a.kp-btn-ghost {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP C — Защита обводки .kp-prod-add от WoodMart-сброса
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-add {
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
  border: 0 !important;
}

body.kp-body .kp-prod-add:hover {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP D — Защита позиции сердечка от WoodMart-wishlist
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 3 !important;
}


/* GROUP E (Quick-view hover) — УДАЛЁНА: разметка .kp-prod-quick вырезана из
 * шаблонов (см. коммит, удаление в product-card.php и products-carousel.php).
 * Правила main.css:367-371 на .kp-prod-quick остались мёртвыми, но не вредят. */


/* ==== kp-patch-34 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 3.4: Header AJAX live-search.
 * ───────────────────────────────────────────────────────────────
 * В header.php заменили статичную .kp-search на вызов
 * woodmart_search_form([ ajax => true, ... ]). Woodmart рендерит
 * свою разметку (form.searchform.woodmart-ajax-search + input.s
 * + button.searchsubmit + .wd-search-results-wrapper) и сам
 * подключает autocomplete-lib + ajaxSearch.js + инлайн-стили.
 *
 * Здесь мы:
 *   A. перекрашиваем woodmart-классы под визуал старого .kp-search
 *      (var(--fog) фон, --radius-sm, focus-within → белый+ink-бордер,
 *      жёлтая квадратная кнопка с лупой через инлайн-data-URI SVG);
 *   B. восстанавливаем мобильное правило display:none — на mobile
 *      строка main.css:589 ".kp-search{display:none}" больше не
 *      работает (класса .kp-search в шапке нет), нужен новый
 *      селектор .kp-search-wrap.
 *
 * SVG в data-URI — Lucide search (тот же path, что в
 * kp_ui_icons_registry()['search']), stroke захардкожен в --ink
 * (#0A0A0A), потому что currentColor в фоновых SVG не работает.
 *
 * Подключается ПОСЛЕ patch-3.3.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * GROUP A — Скин формы под Claude Design
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search-wrap {
  position: relative;
  max-width: 520px;
  width: 100%;
  /* Собственный stacking context выше .kp-snav-wrap (50),
     .kp-mega-menu (60) и hero-isolation (0). Toast (1000) остаётся
     поверх по дизайну. */
  z-index: 250;
}

/* Обёртка, которую woodmart_search_form() рендерит */
body.kp-body .kp-search-wrap .wd-search-form {
  width: 100%;
}

/* Сама форма */
body.kp-body .kp-search-wrap form.searchform {
  display: flex;
  align-items: center;
  background: var(--fog);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  height: 48px;
  padding: 0;
  margin: 0;
  transition: background .15s, border-color .15s;
}

body.kp-body .kp-search-wrap form.searchform:focus-within {
  background: #fff;
  border-color: var(--ink);
}

/* Инпут */
body.kp-body .kp-search-wrap form.searchform input.s {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink);
}

body.kp-body .kp-search-wrap form.searchform input.s::placeholder {
  color: var(--ink-3);
}

/* Крестик "очистить" — выровнять по центру, не ломать высоту */
body.kp-body .kp-search-wrap form.searchform .wd-clear-search {
  margin-right: 8px;
}

/* Кнопка submit */
body.kp-body .kp-search-wrap form.searchform button.searchsubmit {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: var(--yellow);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
  display: grid;
  place-items: center;
  padding: 0;
}

body.kp-body .kp-search-wrap form.searchform button.searchsubmit:hover {
  background: var(--yellow-hover);
}

/* Прячем текст "Search" (он остаётся в DOM для a11y) */
body.kp-body .kp-search-wrap form.searchform button.searchsubmit > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Иконка-лупа: inline SVG вставляется JS-ом (header.php) строго по Claude Design.
   Здесь гасим возможную родную иконку Woodmart (::before/::after font-icon)
   и центрируем наш svg. */
body.kp-body .kp-search-wrap form.searchform button.searchsubmit::before,
body.kp-body .kp-search-wrap form.searchform button.searchsubmit::after {
  content: none !important;
}
body.kp-body .kp-search-wrap form.searchform button.searchsubmit svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Дропдаун результатов: внутри stacking context .kp-search-wrap (250). */
body.kp-body .kp-search-wrap .wd-search-results-wrapper {
  z-index: 200;
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP B — Мобильное скрытие
 * (заменяет main.css:589 ".kp-search{display:none}", который
 *  больше ни во что не попадает после смены разметки)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  body.kp-body .kp-search-wrap {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
 * GROUP C — Компактность карточек (опционально).
 * Дефолт Woodmart: --wd-search-sp:15px на десктопе, 10px на мобиле.
 * При body{font-size:16px} карточки визуально просторнее, чем на
 * parent-теме с 14px. Поджимаем паддинг и иконку миниатюры до
 * мобильных значений (10px / 50px) скоупно — только внутри
 * .kp-search-wrap, чтобы не зацепить другие места.
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-search-wrap .wd-dropdown-results {
  --wd-search-sp: 10px;
}
body.kp-body .kp-search-wrap .wd-dropdown-results .wd-suggestion-thumb {
  max-width: 50px;
  margin-inline-end: 10px;
}


/* ==== kp-patch-40 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 4.0: Корзина (Cart page, Шаг 1 из 3).
 * ───────────────────────────────────────────────────────────────
 * Адаптация cart.css из handoff (k-promo/project/cart.css) под
 * наш скоуп: префикс .kp-cart-* / .kp-sum-* и обёртка body.kp-body,
 * чтобы не задевать стандартные WC-классы (.cart_item, .quantity и др.).
 *
 * Используемые токены (--paper, --ink, --line, --fog, --yellow-*,
 * --eco, --hot, --radius, --shadow-card) уже определены в main.css.
 *
 * Подключается ПОСЛЕ patch-3.4-search.css.
 * ─────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
 * Page header
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-page{background:var(--paper);padding:32px 0 80px;min-height:60vh}
body.kp-body .kp-cart-back{display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:13px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;margin-bottom:24px;transition:color .15s}
body.kp-body .kp-cart-back:hover{color:var(--ink)}
body.kp-body .kp-cart-back svg{transform:rotate(180deg);stroke:currentColor}

body.kp-body .kp-cart-head{margin-bottom:40px}
body.kp-body .kp-cart-head-kicker{font-weight:700;font-size:12px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
body.kp-body .kp-cart-head-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;flex-wrap:wrap}
body.kp-body .kp-cart-head-h{margin:0;font-weight:900;font-size:56px;line-height:1;
  letter-spacing:normal;text-transform:uppercase;color:var(--ink)}
body.kp-body .kp-cart-head-blurb{margin:0;max-width:420px;font-size:15px;line-height:1.55;
  color:var(--ink-2);padding-top:8px}
body.kp-body .kp-cart-bar{display:block;width:64px;height:4px;background:var(--yellow);margin-top:18px}


/* ═══════════════════════════════════════════════════════════════
 * Two-column grid
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;
  align-items:start;margin-top:32px}


/* ═══════════════════════════════════════════════════════════════
 * LEFT — items panel
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-panel{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
body.kp-body .kp-cart-panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
body.kp-body .kp-cart-panel-head-left{display:flex;align-items:center;gap:14px}
body.kp-body .kp-cart-panel-h{font-weight:900;font-size:14px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink)}
body.kp-body .kp-cart-panel-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:22px;padding:0 7px;background:var(--ink);color:var(--yellow);
  font-weight:900;font-size:11px;border-radius:4px;font-feature-settings:"tnum"}
body.kp-body .kp-cart-clear{display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;cursor:pointer;font-weight:700;font-size:12px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink-3);padding:6px 8px;border-radius:4px;
  font-family:inherit;transition:all .15s;text-decoration:none}
body.kp-body .kp-cart-clear:hover{color:var(--hot);background:var(--fog)}
body.kp-body .kp-cart-clear svg{stroke:currentColor;stroke-width:2}

body.kp-body .kp-cart-panel-flags{display:flex;gap:18px;flex-wrap:wrap}
body.kp-body .kp-cart-flag{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13px;color:var(--ink-2);user-select:none}
body.kp-body .kp-cart-flag input{display:none}
body.kp-body .kp-cart-flag-box{width:18px;height:18px;border:1.5px solid var(--ink-3);
  border-radius:4px;display:grid;place-items:center;background:#fff;transition:all .15s;
  flex-shrink:0}
body.kp-body .kp-cart-flag-box svg{opacity:0;transition:opacity .15s;color:var(--ink)}
body.kp-body .kp-cart-flag input:checked + .kp-cart-flag-box{background:var(--yellow);
  border-color:var(--ink)}
body.kp-body .kp-cart-flag input:checked + .kp-cart-flag-box svg{opacity:1}
body.kp-body .kp-cart-flag:hover .kp-cart-flag-box{border-color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════
 * Empty state
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-empty{display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:64px 32px;gap:18px}
body.kp-body .kp-cart-empty-icon{width:96px;height:96px;border-radius:50%;
  background:var(--yellow-soft);display:grid;place-items:center;color:var(--ink);position:relative}
body.kp-body .kp-cart-empty-icon::after{content:"0";position:absolute;right:-4px;top:-4px;
  width:36px;height:36px;background:var(--ink);color:var(--yellow);font-weight:900;font-size:16px;
  border-radius:50%;display:grid;place-items:center;font-feature-settings:"tnum";
  border:3px solid var(--paper)}
body.kp-body .kp-cart-empty-h{margin:0;font-weight:900;font-size:24px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink)}
body.kp-body .kp-cart-empty-sub{margin:0;max-width:360px;font-size:14px;line-height:1.55;
  color:var(--ink-2)}
body.kp-body .kp-cart-empty-cta{display:inline-flex;align-items:center;gap:10px;height:48px;
  padding:0 22px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:13px;
  letter-spacing:normal;text-transform:uppercase;border-radius:8px;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;margin-top:6px;transition:all .15s}
body.kp-body .kp-cart-empty-cta:hover{background:var(--yellow-hover);transform:translateY(-1px);
  box-shadow:var(--shadow-card)}


/* ═══════════════════════════════════════════════════════════════
 * Item rows
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-items{display:flex;flex-direction:column}
body.kp-body .kp-cart-row{display:grid;
  grid-template-columns:96px minmax(0,1fr) 150px 110px 150px 32px;
  gap:18px;align-items:start;padding:20px 24px;border-bottom:1px solid var(--line);
  transition:background .15s}
body.kp-body .kp-cart-row:last-child{border-bottom:0}
body.kp-body .kp-cart-row:hover{background:var(--fog)}
body.kp-body .kp-cart-thumb{width:96px;height:96px;border-radius:8px;overflow:hidden;
  background:var(--fog);flex-shrink:0}
body.kp-body .kp-cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.kp-body .kp-cart-thumb a{display:block;width:100%;height:100%}

body.kp-body .kp-cart-meta{display:flex;flex-direction:column;gap:6px;min-width:0;
  padding-top:2px;overflow:hidden}
body.kp-body .kp-cart-meta>*{min-width:0;max-width:100%}
body.kp-body .kp-cart-name{font-weight:700;font-size:15px;line-height:1.35;color:var(--ink);
  text-decoration:none;text-wrap:pretty}
body.kp-body .kp-cart-name:hover{color:var(--ink-2)}
body.kp-body .kp-cart-info{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;
  color:var(--ink-3);font-feature-settings:"tnum"}
body.kp-body .kp-cart-info span{display:inline-flex;align-items:center;gap:4px}
body.kp-body .kp-cart-info b{font-weight:700;color:var(--ink-2);letter-spacing:normal}

body.kp-body .kp-cart-add-brand{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  align-self:flex-start;font-weight:700;font-size:11px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink);background:var(--yellow-soft);padding:6px 10px;border-radius:4px;
  text-decoration:none;border:1px dashed var(--ink);transition:all .15s;cursor:pointer;
  font-family:inherit}
body.kp-body .kp-cart-add-brand:hover:not([disabled]){background:var(--yellow);border-style:solid}
body.kp-body .kp-cart-add-brand.has-brand{background:var(--yellow);border-style:solid;
  border-color:var(--yellow)}
body.kp-body .kp-cart-add-brand[disabled]{opacity:.55;cursor:not-allowed}
body.kp-body .kp-cart-add-brand svg{stroke:currentColor}

body.kp-body .kp-cart-variant{display:flex;flex-direction:column;gap:4px;padding-top:2px}
body.kp-body .kp-cart-variant-l{font-size:11px;font-weight:700;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink-3)}
body.kp-body .kp-cart-variant-v{display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:13px;color:var(--ink)}
body.kp-body .kp-cart-variant-sw{width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--ink);flex-shrink:0}

body.kp-body .kp-cart-qty-cell{display:flex;flex-direction:column;gap:4px;padding-top:2px}
body.kp-body .kp-cart-qty{display:inline-flex;align-items:stretch;background:#fff;
  border:1.5px solid var(--ink);border-radius:6px;height:38px;overflow:hidden;width:fit-content}
/* WC рендерит свой div.quantity внутри — подмажем под наш layout */
body.kp-body .kp-cart-qty .quantity{display:flex;align-items:stretch;margin:0;border:0}
body.kp-body .kp-cart-qty input.qty,
body.kp-body .kp-cart-qty input[type="number"]{flex:1;width:60px;min-width:0;border:0;outline:0;
  background:transparent;text-align:center;font-weight:800;font-size:14px;color:var(--ink);
  font-feature-settings:"tnum";font-family:inherit;height:100%;padding:0;
  -moz-appearance:textfield}
body.kp-body .kp-cart-qty input.qty::-webkit-outer-spin-button,
body.kp-body .kp-cart-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.kp-body .kp-cart-qty-fixed{display:grid;place-items:center;padding:0 18px;
  font-weight:800;font-size:14px;color:var(--ink)}
body.kp-body .kp-cart-qty-stock{font-size:11px;color:var(--ink-3);font-feature-settings:"tnum"}
body.kp-body .kp-cart-qty-stock b{color:var(--eco);font-weight:700}

body.kp-body .kp-cart-price-cell{display:flex;flex-direction:column;align-items:flex-end;
  gap:4px;padding-top:2px;text-align:right}
body.kp-body .kp-cart-price{font-weight:900;font-size:18px;color:var(--ink);
  font-feature-settings:"tnum";letter-spacing:normal;white-space:nowrap}
body.kp-body .kp-cart-price-u{font-weight:800;font-size:13px;color:var(--ink-3);margin-left:3px}
body.kp-body .kp-cart-price-per{font-size:11px;color:var(--ink-3);font-feature-settings:"tnum"}

body.kp-body .kp-cart-x{width:32px;height:32px;border-radius:50%;background:transparent;
  border:0;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;
  transition:all .15s;justify-self:end;text-decoration:none}
body.kp-body .kp-cart-x:hover{background:#FFE5E5;color:var(--hot)}

/* Скрытая стандартная WC update_cart кнопка — потребуется JS-ом форме */
body.kp-body .kp-cart-actions[hidden]{display:none !important}


/* ═══════════════════════════════════════════════════════════════
 * RIGHT — summary sidebar
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}

body.kp-body .kp-sum-card{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
body.kp-body .kp-sum-head{padding:18px 22px;border-bottom:1px solid var(--line)}
body.kp-body .kp-sum-h{font-weight:900;font-size:14px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink);margin-bottom:4px}
body.kp-body .kp-sum-h-count{font-size:13px;color:var(--ink-3);font-feature-settings:"tnum"}

body.kp-body .kp-sum-add-mock{display:flex;align-items:center;gap:10px;width:100%;
  padding:14px 22px;background:transparent;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink);
  transition:background .15s;text-align:left}
body.kp-body .kp-sum-add-mock:hover:not([disabled]){background:var(--fog)}
body.kp-body .kp-sum-add-mock[disabled]{cursor:not-allowed;opacity:.65}
body.kp-body .kp-sum-add-mock svg{flex-shrink:0;color:var(--ink);stroke:currentColor}
body.kp-body .kp-sum-add-mock .kp-sum-add-text{flex:1;letter-spacing:normal}
body.kp-body .kp-sum-add-mock .kp-sum-add-info{width:18px;height:18px;border-radius:50%;
  background:var(--fog);display:grid;place-items:center;color:var(--ink-3);font-size:11px;
  font-weight:900;flex-shrink:0}

body.kp-body .kp-sum-rows{padding:14px 22px;display:flex;flex-direction:column;gap:10px;
  border-bottom:1px solid var(--line)}
body.kp-body .kp-sum-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-size:14px;color:var(--ink-2)}
body.kp-body .kp-sum-row b{color:var(--ink);font-weight:900;font-feature-settings:"tnum";
  font-size:16px}
body.kp-body .kp-sum-row.is-total b{font-size:24px;letter-spacing:normal}
body.kp-body .kp-sum-row-u{font-weight:800;font-size:13px;color:var(--ink-3);margin-left:3px}

body.kp-body .kp-sum-notes{padding:14px 22px;background:var(--fog);border-bottom:1px solid var(--line)}
body.kp-body .kp-sum-notes-h{font-weight:900;font-size:11px;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
body.kp-body .kp-sum-notes ul{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:6px}
body.kp-body .kp-sum-notes li{position:relative;padding-left:14px;font-size:12px;
  line-height:1.45;color:var(--ink-2)}
body.kp-body .kp-sum-notes li::before{content:"";position:absolute;left:0;top:6px;
  width:6px;height:6px;background:var(--yellow);border-radius:1px}

body.kp-body .kp-sum-cta-wrap{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
body.kp-body .kp-sum-cta{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;background:var(--yellow);color:var(--ink);font-weight:900;font-size:13px;
  letter-spacing:normal;text-transform:uppercase;border:0;border-radius:8px;cursor:pointer;
  font-family:inherit;transition:all .15s;text-decoration:none;box-sizing:border-box}
body.kp-body .kp-sum-cta:hover:not(.is-disabled){background:var(--yellow-hover);
  transform:translateY(-1px);box-shadow:var(--shadow-card)}
body.kp-body .kp-sum-cta.is-disabled{background:var(--fog);color:var(--ink-3);
  cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
body.kp-body .kp-sum-cta svg{stroke:currentColor}

body.kp-body .kp-sum-warn{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 18px;
  background:#FFF1F1;border:1px solid #FECACA;border-radius:8px;align-items:flex-start}
body.kp-body .kp-sum-warn-icon{width:24px;height:24px;border-radius:50%;background:#FECACA;
  color:var(--hot);display:grid;place-items:center;flex-shrink:0}
body.kp-body .kp-sum-warn-body{font-size:12px;line-height:1.45;color:var(--ink-2)}
body.kp-body .kp-sum-warn-body b{color:var(--ink);font-weight:800;display:block;
  margin-bottom:2px;font-size:13px}
body.kp-body .kp-sum-warn-body em{font-style:normal;color:var(--hot);font-weight:900;
  font-feature-settings:"tnum"}

body.kp-body .kp-sum-ok{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 18px;
  background:#F0F9F0;border:1px solid #C7E5C7;border-radius:8px;align-items:center}
body.kp-body .kp-sum-ok-icon{width:24px;height:24px;border-radius:50%;background:var(--eco);
  color:#fff;display:grid;place-items:center;flex-shrink:0}
body.kp-body .kp-sum-ok b{display:block;color:var(--ink);font-weight:800;font-size:13px;
  margin-bottom:2px}
body.kp-body .kp-sum-ok span{font-size:12px;color:var(--ink-2);line-height:1.4}


/* ═══════════════════════════════════════════════════════════════
 * Accordion blocks
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-sum-acc{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
body.kp-body .kp-sum-acc-item{border-bottom:1px solid var(--line)}
body.kp-body .kp-sum-acc-item:last-child{border-bottom:0}
body.kp-body .kp-sum-acc-head{display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:16px 22px;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:13px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink);text-align:left;transition:background .15s}
body.kp-body .kp-sum-acc-head:hover:not([disabled]){background:var(--fog)}
body.kp-body .kp-sum-acc-head[disabled]{cursor:default}
body.kp-body .kp-sum-acc-head svg{flex-shrink:0;color:var(--ink-3);transition:transform .2s;
  stroke:currentColor}
body.kp-body .kp-sum-acc-item.is-open .kp-sum-acc-head{background:var(--yellow-soft);
  border-left:4px solid var(--yellow);padding-left:18px}
body.kp-body .kp-sum-acc-item.is-open .kp-sum-acc-head svg{transform:rotate(180deg);
  color:var(--ink)}
body.kp-body .kp-sum-acc-body{padding:0 22px 18px;font-size:13px;line-height:1.55;
  color:var(--ink-2);display:none}
body.kp-body .kp-sum-acc-item.is-open .kp-sum-acc-body{display:block}
body.kp-body .kp-sum-acc-body p{margin:0 0 8px}
body.kp-body .kp-sum-acc-body p:last-child{margin:0}
body.kp-body .kp-sum-acc-body b{color:var(--ink);font-weight:700}


/* ═══════════════════════════════════════════════════════════════
 * Compact bottom CTA banner
 * ═══════════════════════════════════════════════════════════════ */
body.kp-body .kp-cart-banner{background:var(--ink);color:#fff;padding:48px 0;margin-top:64px}
body.kp-body .kp-cart-banner-row{display:grid;grid-template-columns:auto 1fr auto;gap:32px;
  align-items:center}
body.kp-body .kp-cart-banner-icon{width:72px;height:72px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;color:var(--ink);flex-shrink:0}
body.kp-body .kp-cart-banner-h{margin:0 0 6px;font-weight:900;font-size:28px;
  letter-spacing:normal;text-transform:uppercase;line-height:1.1;color:#fff}
body.kp-body .kp-cart-banner-sub{margin:0;font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.7);max-width:520px}
body.kp-body .kp-cart-banner-cta{display:inline-flex;align-items:center;gap:10px;height:52px;
  padding:0 26px;background:var(--yellow);color:var(--ink);font-weight:900;font-size:13px;
  letter-spacing:normal;text-transform:uppercase;border-radius:8px;text-decoration:none;border:0;
  cursor:pointer;font-family:inherit;transition:all .15s}
body.kp-body .kp-cart-banner-cta:hover{background:var(--yellow-hover);transform:translateY(-1px)}


/* ═══════════════════════════════════════════════════════════════
 * Responsive
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
  body.kp-body .kp-cart-grid{grid-template-columns:1fr 340px;gap:24px}
}
@media (max-width:1180px){
  body.kp-body .kp-cart-row{grid-template-columns:88px minmax(0,1fr) 32px;gap:10px 16px;
    padding:18px;align-items:start}
  body.kp-body .kp-cart-thumb{grid-column:1;grid-row:1;width:88px;height:88px}
  body.kp-body .kp-cart-meta{grid-column:2;grid-row:1}
  body.kp-body .kp-cart-x{grid-column:3;grid-row:1;justify-self:end}
  body.kp-body .kp-cart-variant{grid-column:2 / -1;grid-row:2;padding-top:4px}
  body.kp-body .kp-cart-qty-cell{grid-column:2 / -1;grid-row:3;padding-top:0}
  body.kp-body .kp-cart-price-cell{grid-column:2 / -1;grid-row:4;align-items:flex-start;
    text-align:left;padding-top:0}
  body.kp-body .kp-cart-head-h{font-size:44px}
}
@media (max-width:900px){
  body.kp-body .kp-cart-grid{grid-template-columns:1fr}
  body.kp-body .kp-cart-side{position:static}
  body.kp-body .kp-cart-head-h{font-size:36px}
  body.kp-body .kp-cart-banner-row{grid-template-columns:auto 1fr;gap:20px}
  body.kp-body .kp-cart-banner-cta{grid-column:1/-1;justify-self:start}
}
@media (max-width:680px){
  body.kp-body .kp-cart-row{grid-template-columns:72px minmax(0,1fr) 28px;gap:14px;padding:16px}
  body.kp-body .kp-cart-thumb{width:72px;height:72px}
  body.kp-body .kp-cart-banner-row{grid-template-columns:1fr;text-align:left;gap:18px}
  body.kp-body .kp-cart-head-h{font-size:30px}
  body.kp-body .kp-cart-panel-flags{gap:10px;width:100%}
  body.kp-body .kp-cart-panel-head{gap:14px}
}


/* ==== kp-patch-41 ==== */
/**
 * PATCH 4.1 — Single Product page
 *
 * Скоуп: body.kp-body.single-product
 *
 * Решает:
 *  1. Карточка товара шире .kp-container.
 *     Elementor/Woodmart site_width = 1400px против нашего .kp-container = 1240px.
 *  2. Хлебные крошки оверлап-ятся со sticky-nav (.kp-snav-wrap = 57px).
 */

/* ───── 1. ШИРИНА: Elementor-контейнеры на single-product → 1240px ───── */
body.kp-body.single-product .wd-content-area .e-con-boxed {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* ───── 2. ОТСТУП СВЕРХУ: компенсируем sticky-nav на свежезагруженной странице ───── */
body.kp-body.single-product .wd-content-area {
  padding-top: 32px;
}

/* ───── 3. SCROLL-MARGIN: при якорных переходах учитываем sticky-nav ───── */
body.kp-body.single-product .wd-content-area [id] {
  scroll-margin-top: 72px; /* 57px snav + 15px воздуха */
}

/* ───── 4. MOBILE (980px) ───── */
@media (max-width: 980px) {
  body.kp-body.single-product .wd-content-area {
    padding-top: 24px;
  }
}

/* ───── 5. MOBILE (760px) ───── */
@media (max-width: 760px) {
  body.kp-body.single-product .wd-content-area {
    padding-top: 20px;
  }
  body.kp-body.single-product .wd-content-area .e-con-boxed {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ───── 6. MOBILE (480px) ───── */
@media (max-width: 480px) {
  body.kp-body.single-product .wd-content-area .e-con-boxed {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* ==== kp-patch-42 ==== */
/* ═══════════════════════════════════════════════════════════════
 * PATCH 4.2 — Cart counter: AJAX-обновление счётчика в шапке
 * ───────────────────────────────────────────────────────────────
 * .kp-snav-cart-badge — всегда-присутствующая обёртка-цель для
 * WC-фрагмента (replaceWith требует элемент в DOM). Она НЕ должна
 * быть flex-айтемом внутри .kp-snav-cart (display:inline-flex;
 * gap:8px), иначе пустая обёртка добавит фантомные 8px.
 * display:contents убирает обёртку из box-дерева — внутренний
 * .kp-badge-count по-прежнему абсолютно позиционируется
 * относительно .kp-snav-cart (position:relative).
 * ═══════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-cart-badge {
  display: contents;
}


/* ==== kp-patch-50 ==== */
/**
 * PATCH 5.0 — Mobile Header Fix (Stage 0)
 *
 * Скоуп: body.kp-body (баг СИСТЕМНЫЙ — общий header.php грузится на всех
 *        kp-страницах через kp_is_kpromo_template).
 *
 * Решает:
 *   .kp-topbar-row = flex (по умолчанию nowrap) + длинный контент
 *   (полный адрес + часы + email + ЛК + 3 мессенджера). На мобиле
 *   скрыт только .kp-tb-item:nth-child(2) (main.css:587) — остаток
 *   переполняет ~390px, body.kp-body{overflow-x:clip} (patch-1.4)
 *   обрезает overflow → топбар «ломается» и при скролле sticky
 *   .kp-snav-wrap (z-index:50) «наезжает» поверх него.
 *
 * Причина — НЕ Woodmart sticky-clone: в DOM нет ни одного
 * <header>/.whb-header (header.php полностью перекрывает Woodmart),
 * JS-шаблон whb-sticky-header whb-clone инертен. Фикс — только CSS.
 *
 * Стратегия (вариант A — компактный, B2B-контакты сохраняем):
 *   ≤760  — прячем длинную левую группу (адрес+часы),
 *           email + ЛК + мессенджеры остаются по центру;
 *   ≤480  — дополнительно прячем текст email (мессенджеры + ЛК остаются).
 *
 * !important — точечно (font-size + ≤480 mailto): перебиваем
 * существующие !important из patch-1.9 (body.kp-body .kp-topbar
 * { font-size:15px !important } и .kp-tb-item { display:inline-flex
 * !important }). Перебить !important можно только !important —
 * это «необходимость» по правилу CLAUDE.md, не произвол.
 * Все остальные правила — без !important, через специфичность.
 */

/* ───── ≤980 — ужимаем, разрешаем перенос, мельче шрифт ───── */
@media (max-width: 980px) {
  body.kp-body .kp-topbar-row {
    flex-wrap: wrap;
    gap: 4px 16px;
    min-height: 0;
    padding: 6px 0;
  }
  /* перебивает patch-1.9 `body.kp-body .kp-topbar{font-size:15px!important}` */
  body.kp-body .kp-topbar,
  body.kp-body .kp-topbar .kp-tb-item {
    font-size: 13px !important;
  }
}

/* ───── ≤760 — компактный топбар по центру ───── */
@media (max-width: 760px) {
  /* длинный адрес + часы не нужны на мобиле (специфичность 0,0,2,1 >
     main.css .kp-topbar-left 0,0,1,0 — !important не требуется) */
  body.kp-body .kp-topbar-left {
    display: none;
  }
  body.kp-body .kp-topbar-row {
    justify-content: center;
    padding: 5px 0;
  }
  body.kp-body .kp-topbar-right {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  body.kp-body .kp-topbar,
  body.kp-body .kp-topbar .kp-tb-item {
    font-size: 12px !important;
  }
}

/* ───── ≤480 — ещё компактнее: прячем текст email ───── */
@media (max-width: 480px) {
  /* .kp-tb-item имеет display:inline-flex !important из patch-1.9 —
     перебиваем !important'ом (необходимость, не произвол) */
  body.kp-body .kp-topbar-right .kp-tb-item[href^="mailto"] {
    display: none !important;
  }
  body.kp-body .kp-topbar-right {
    gap: 14px;
  }
}


/* ==== kp-patch-51 ==== */
/* patch-5.1-category.css — Страница категории товаров
 * Дизайн из handoff v3 (category.css / category-pens.jsx)
 * Все правила отскоуплены на body.kp-body .kp-cat-*
 */

/* ───── page wrapper ───── */
body.kp-body .kp-cat-page {
    background: #fff;
    min-height: 100vh;
}

/* ───── breadcrumbs ───── */
body.kp-body .kp-cat-crumbs {
    padding: 18px 0 0;
    font-size: 15px;
    color: var(--ink-2, #6b6b6b);
}
body.kp-body .kp-cat-crumbs-link {
    color: var(--ink-2, #6b6b6b);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
body.kp-body .kp-cat-crumbs-link:hover {
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-crumbs-sep {
    margin: 0 8px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
}
body.kp-body .kp-cat-crumbs-cur {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* ───── category header ───── */
body.kp-body .kp-cat-head {
    padding: 8px 0 28px;
}
body.kp-body .kp-cat-head-pre {
    font-weight: 700;
    font-size: 13px;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink-3, #a0a0a0);
    margin-bottom: 14px;
}
body.kp-body .kp-cat-head-title-row {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    flex-wrap: wrap;
}
body.kp-body .kp-cat-head-title {
    font-weight: 700;
    font-size: 64px;
    line-height: .98;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    margin: 0;
    flex: 1;
    min-width: 0;
    text-wrap: balance;
}
body.kp-body .kp-cat-head-count {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    background: var(--yellow, #FECE15);
    padding: 14px 22px;
    border-radius: var(--radius, 12px);
    align-self: flex-start;
    margin-top: 6px;
}
body.kp-body .kp-cat-head-count-num {
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    letter-spacing:normal;
    font-feature-settings: "tnum";
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-head-count-lbl {
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink, #0a0a0a);
    letter-spacing:normal;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 4px;
}
body.kp-body .kp-cat-head-bar {
    display: inline-block;
    width: 64px;
    height: 4px;
    background: var(--yellow, #FECE15);
    margin: 24px 0 20px;
}
body.kp-body .kp-cat-head-lead {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-2, #6b6b6b);
    max-width: 720px;
    margin: 0 0 20px;
    text-wrap: pretty;
}
body.kp-body .kp-cat-head-lead p {
    margin: 0 0 8px;
}
body.kp-body .kp-cat-head-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--ink-2, #6b6b6b);
    font-weight: 600;
}
body.kp-body .kp-cat-head-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing:normal;
    text-transform: uppercase;
}
body.kp-body .kp-cat-head-meta-item svg {
    color: var(--yellow, #FECE15);
    stroke: var(--ink, #0a0a0a);
}

/* ───── subcategory chips ───── */
body.kp-body .kp-cat-chips {
    padding: 0 0 12px;
}
body.kp-body .kp-cat-chips-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0 8px;
    scroll-snap-type: x proximity;
}
body.kp-body .kp-cat-chips-track::-webkit-scrollbar {
    display: none;
}
body.kp-body .kp-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    background: var(--fog, #f5f5f5);
    border-radius: 24px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    transition: all .15s;
    white-space: nowrap;
    scroll-snap-align: start;
    letter-spacing:normal;
    text-decoration: none;
}
body.kp-body .kp-cat-chip:hover {
    background: var(--yellow-soft, #fff8d6);
}
body.kp-body .kp-cat-chip.is-active {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-chip-count {
    font-size: 11px;
    color: var(--ink-3, #a0a0a0);
    font-weight: 700;
    font-feature-settings: "tnum";
}
body.kp-body .kp-cat-chip.is-active .kp-cat-chip-count {
    color: var(--ink, #0a0a0a);
    opacity: .65;
}

/* ───── filter bar ───── */
body.kp-body .kp-cat-fbar {
    padding: 20px 0 0;
}
body.kp-body .kp-cat-fbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line, #e5e5e5);
    padding-top: 20px;
}
body.kp-body .kp-cat-fbar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.kp-body .kp-cat-fbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    transition: all .15s;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
body.kp-body .kp-cat-fpill:hover {
    border-color: var(--ink, #0a0a0a);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body.kp-body .kp-cat-fpill.is-active {
    border: 2px solid var(--ink, #0a0a0a);
    padding: 0 15px;
}
body.kp-body .kp-cat-fpill-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-feature-settings: "tnum";
}
body.kp-body .kp-cat-fpill-all {
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    font-size: 12px;
}
body.kp-body .kp-cat-fsort-lbl {
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    font-weight: 600;
}
body.kp-body .kp-cat-fsort-select {
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
}

/* ───── results bar ───── */
body.kp-body .kp-cat-rbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 18px;
    flex-wrap: wrap;
    gap: 14px;
}
body.kp-body .kp-cat-rbar-count {
    font-size: 14px;
    color: var(--ink-3, #a0a0a0);
}
body.kp-body .kp-cat-rbar-count b {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
    font-feature-settings: "tnum";
}

/* ───── product grid ───── */
body.kp-body .kp-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 8px 0;
}
body.kp-body .kp-cat-grid .kp-prod {
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius, 12px);
    padding: 16px;
    transition: all .2s;
}
body.kp-body .kp-cat-grid .kp-prod:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: transparent;
}

/* ───── empty state ───── */
body.kp-body .kp-cat-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--ink-2, #6b6b6b);
    font-size: 18px;
}

/* ───── pager ───── */
body.kp-body .kp-cat-pager-wrap {
    padding: 32px 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
body.kp-body .kp-cat-pager {
    display: flex;
    gap: 6px;
    align-items: center;
}
body.kp-body .kp-cat-pager-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-2, #6b6b6b);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
body.kp-body .kp-cat-pager-btn:hover {
    background: var(--fog, #f5f5f5);
    border-color: var(--ink, #0a0a0a);
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-pager-btn.is-active {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    border-color: var(--yellow, #FECE15);
}
body.kp-body .kp-cat-pager-btn:first-child svg {
    transform: rotate(180deg);
}
body.kp-body .kp-cat-pager-ell {
    width: 24px;
    display: grid;
    place-items: center;
    color: var(--ink-3, #a0a0a0);
}
body.kp-body .kp-cat-pager-meta {
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    font-feature-settings: "tnum";
}

/* ───── SEO spoiler ───── */
body.kp-body .kp-cat-seo {
    background: var(--fog, #f5f5f5);
    padding: 48px 0;
}
body.kp-body .kp-cat-seo-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 0;
    font-family: inherit;
}
body.kp-body .kp-cat-seo-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-seo-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--ink, #0a0a0a);
    flex-shrink: 0;
}
body.kp-body .kp-cat-seo-body {
    margin-top: 28px;
    max-width: 840px;
    color: var(--ink-2, #6b6b6b);
    font-size: 16px;
    line-height: 1.65;
}
body.kp-body .kp-cat-seo-body h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink, #0a0a0a);
    margin: 24px 0 8px;
}
body.kp-body .kp-cat-seo-body h3:first-child {
    margin-top: 0;
}
body.kp-body .kp-cat-seo-body p {
    margin: 0 0 14px;
}
body.kp-body .kp-cat-seo-body a {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
    border-bottom: 1px solid var(--yellow, #FECE15);
}
body.kp-body .kp-cat-seo-body a:hover {
    background: var(--yellow-soft, #fff8d6);
}

/* ───── lead form ───── */
body.kp-body .kp-cat-lead {
    background: var(--yellow, #FECE15);
    padding: 80px 0;
}
body.kp-body .kp-cat-lead-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
body.kp-body .kp-cat-lead-kicker {
    font-weight: 700;
    font-size: 12px;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    margin-bottom: 14px;
}
body.kp-body .kp-cat-lead-title {
    font-weight: 700;
    font-size: 48px;
    line-height: .98;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink, #0a0a0a);
    margin: 0 0 20px;
}
body.kp-body .kp-cat-lead-sub {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink, #0a0a0a);
    max-width: 480px;
    margin: 0 0 24px;
    opacity: .85;
}
body.kp-body .kp-cat-lead-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.kp-body .kp-cat-lead-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-lead-trust-item svg {
    stroke: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-lead-form {
    background: #fff;
    border-radius: var(--radius-lg, 16px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
body.kp-body .kp-cat-lead-field input {
    height: 54px;
    padding: 0 18px;
    border: 2px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-size: 15px;
    font-family: inherit;
    color: var(--ink, #0a0a0a);
    width: 100%;
    transition: border-color .15s;
    background: #fff;
    box-sizing: border-box;
}
body.kp-body .kp-cat-lead-field input:focus {
    outline: 0;
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-lead-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    background: var(--ink, #0a0a0a);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 14px;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
body.kp-body .kp-cat-lead-btn:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}
body.kp-body .kp-cat-lead-tos {
    font-size: 12px;
    color: var(--ink-3, #a0a0a0);
    margin: 0;
    line-height: 1.5;
}
body.kp-body .kp-cat-lead-tos a {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
    border-bottom: 1px solid var(--yellow, #FECE15);
    text-decoration: none;
}

/* ───── chips fade-arrow ───── */
body.kp-body .kp-cat-chips {
    position: relative;
}
body.kp-body .kp-cat-chips-track {
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
    padding-right: 60px;
}
body.kp-body .kp-cat-chips-arrow {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    color: var(--ink, #0a0a0a);
    pointer-events: none;
    z-index: 2;
}

/* ───── active tags ───── */
body.kp-body .kp-cat-atags {
    padding: 14px 0 0;
}
body.kp-body .kp-cat-atags-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.kp-body .kp-cat-atags-lbl {
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing:normal;
}
body.kp-body .kp-cat-atags-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
body.kp-body .kp-cat-atag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    background: var(--yellow-soft, #fff8d6);
    color: var(--ink, #0a0a0a);
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
}
body.kp-body .kp-cat-atag-x {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-2, #6b6b6b);
    transition: all .15s;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
body.kp-body .kp-cat-atag-x:hover {
    background: var(--ink, #0a0a0a);
    color: #fff;
}
body.kp-body .kp-cat-atags-clear {
    background: transparent;
    border: 0;
    color: var(--ink-2, #6b6b6b);
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-underline-offset: 4px;
    cursor: pointer;
}
body.kp-body .kp-cat-atags-clear:hover {
    color: var(--ink, #0a0a0a);
}

/* ───── results bar controls ───── */
body.kp-body .kp-cat-rbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 18px;
    flex-wrap: wrap;
    gap: 14px;
}
body.kp-body .kp-cat-rbar-controls {
    display: flex;
    align-items: center;
    gap: 18px;
}
body.kp-body .kp-cat-rbar-view {
    display: flex;
    gap: 0;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}
body.kp-body .kp-cat-rbar-vbtn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ink-3, #a0a0a0);
    border: 0;
    cursor: pointer;
    transition: all .15s;
}
body.kp-body .kp-cat-rbar-vbtn.is-active {
    background: var(--ink, #0a0a0a);
    color: #fff;
}
body.kp-body .kp-cat-rbar-vbtn:not(.is-active):hover {
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-rbar-perpage {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-rbar-seg {
    display: flex;
    background: var(--fog, #f5f5f5);
    border-radius: var(--radius-sm, 8px);
    padding: 3px;
}
body.kp-body .kp-cat-rbar-seg a {
    height: 30px;
    padding: 0 14px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-3, #a0a0a0);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    font-feature-settings: "tnum";
    text-decoration: none;
}
body.kp-body .kp-cat-rbar-seg a.is-active {
    background: var(--ink, #0a0a0a);
    color: #fff;
}
body.kp-body .kp-cat-rbar-seg a:hover:not(.is-active) {
    color: var(--ink, #0a0a0a);
}

/* ───── sort pill button ───── */
body.kp-body .kp-cat-fsort {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fsort-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink, #0a0a0a);
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    position: relative;
}
body.kp-body .kp-cat-fsort-pill:hover {
    border-color: var(--ink, #0a0a0a);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body.kp-body .kp-cat-fsort-drop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 20;
    padding: 6px 0;
    display: none;
}
body.kp-body .kp-cat-fsort-pill.is-open .kp-cat-fsort-drop {
    display: block;
}
body.kp-body .kp-cat-fsort-opt {
    display: block;
    width: 100%;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    text-align: left;
    text-decoration: none;
    transition: background .1s;
}
body.kp-body .kp-cat-fsort-opt:hover {
    background: var(--fog, #f5f5f5);
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fsort-opt.is-active {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* ───── show more button ───── */
body.kp-body .kp-cat-showmore {
    display: flex;
    justify-content: center;
    padding: 32px 0 0;
}
body.kp-body .kp-cat-showmore-btn {
    height: 56px;
    min-width: 280px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    background: #fff;
    color: var(--ink, #0a0a0a);
    box-shadow: inset 0 0 0 2px var(--ink, #0a0a0a);
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 15px;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
body.kp-body .kp-cat-showmore-btn:hover {
    background: var(--yellow, #FECE15);
}

/* ───── hits section ───── */
body.kp-body .kp-cat-hits {
    padding: 48px 0 0;
}
body.kp-body .kp-cat-hits .kp-prods-head {
    margin-bottom: 28px;
}

/* ───── product card swatches ───── */
body.kp-body .kp-prod-swatches {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 20px;
    margin-top: 4px;
}
body.kp-body .kp-prod-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.12);
    flex-shrink: 0;
}
body.kp-body .kp-prod-swatch-more {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3, #a0a0a0);
    margin-left: 2px;
}

/* ───── responsive ───── */
@media (max-width: 1100px) {
    body.kp-body .kp-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    body.kp-body .kp-cat-head-title {
        font-size: 48px;
    }
    body.kp-body .kp-cat-lead-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
@media (max-width: 760px) {
    body.kp-body .kp-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    body.kp-body .kp-cat-head-title {
        font-size: 34px;
    }
    body.kp-body .kp-cat-head-count {
        padding: 10px 16px;
    }
    body.kp-body .kp-cat-head-count-num {
        font-size: 32px;
    }
    body.kp-body .kp-cat-fbar-left {
        overflow-x: auto;
        flex-wrap: nowrap;
        width: 100%;
        padding-bottom: 6px;
    }
    body.kp-body .kp-cat-fbar-left::-webkit-scrollbar {
        display: none;
    }
    body.kp-body .kp-cat-lead-title {
        font-size: 32px;
    }
    body.kp-body .kp-cat-lead-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    body.kp-body .kp-cat-rbar-controls {
        display: none;
    }
    body.kp-body .kp-cat-chips-arrow {
        display: none;
    }
    body.kp-body .kp-cat-atags-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    body.kp-body .kp-cat-atags-list::-webkit-scrollbar {
        display: none;
    }
    body.kp-body .kp-cat-showmore-btn {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    body.kp-body .kp-cat-grid {
        grid-template-columns: 1fr;
    }
    body.kp-body .kp-cat-head-title {
        font-size: 28px;
    }
    body.kp-body .kp-cat-head-title-row {
        gap: 20px;
    }
    body.kp-body .kp-cat-fbar-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==== kp-patch-52 ==== */
/* PATCH 5.2 — вернуть 5 колонок секции "Популярные категории" на главной.
   Причина: patch-5.1 переиспользовал .kp-cat-grid под архив категорий
   (там 4 кол.) и перебивает главную. Скоупим строго на .kp-sec-pop.
   Брейкпоинты: эталон styles.css (1100 / 760) + 1-кол. на 480 по
   MOBILE-GUIDELINES (на 375px иначе карточка <200px).
*/
body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:repeat(5,1fr);gap:20px;padding:0}
@media (max-width:1100px){body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px) {body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px) {body.kp-body .kp-sec-pop .kp-cat-grid{grid-template-columns:1fr}}


/* ==== kp-patch-53 ==== */
/* PATCH 5.3 — Витрина: шапка влево + .kp-prod-grid → горизонтальная лента.
   Скоуп строго .kp-sec-prods, сетки других секций не задеты. */
body.kp-body .kp-sec-prods .kp-prods-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
body.kp-body .kp-sec-prods .kp-prod-grid{display:flex;grid-template-columns:none;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none}
body.kp-body .kp-sec-prods .kp-prod-grid::-webkit-scrollbar{display:none}
body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex:0 0 calc((100% - 80px)/5);scroll-snap-align:start}
@media (max-width:1100px){body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex-basis:calc((100% - 60px)/3.5)}}
@media (max-width:760px) {body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex-basis:calc((100% - 40px)/2.2)}}
@media (max-width:480px) {body.kp-body .kp-sec-prods .kp-prod-grid .kp-prod{flex-basis:82%}}


/* ==== kp-patch-54 ==== */
/* PATCH 5.4 — Advantages: заголовки карточек всегда белые.
   .kp-adv-title наследует цвет и теряет его на тёмной секции (ловушка .kp-page a:inherit).
   Форсим белый, скоуп .kp-sec-adv — выше специфичности .kp-page a и WoodMart. */
body.kp-body .kp-sec-adv .kp-adv-card,
body.kp-body .kp-sec-adv .kp-adv-title{color:#fff}


/* ==== kp-patch-55 ==== */
/* PATCH 5.5 — Brands: названия брендов серые (--ink-3), как дескриптор.
   .kp-brand-cell — ссылка, .kp-page a{color:inherit} перебивает базовый серый
   и уводит в чёрный. Возвращаем серый со скоупом, hover-инверсию сохраняем. */
body.kp-body .kp-brand-cell{color:var(--ink-3)}
body.kp-body .kp-brand-cell:hover{color:var(--ink)}


/* ==== kp-patch-56 ==== */
/* PATCH 5.6 — FAQ: .kp-faq-q это <button>, WoodMart навешивает capitalize,
   серый фон (рвёт жёлтый открытый айтем) и центрирование. Сбрасываем. */
body.kp-body .kp-sec-faq .kp-faq-q{background:transparent;border:0;text-align:left;text-transform:none}
body.kp-body .kp-sec-faq .kp-faq-qtext{text-transform:none;font-weight:700;font-size:16px;color:var(--ink)}
/* Заголовок вопроса НЕ сереет при наведении: WoodMart красит <button>:hover в серый,
   а qtext не имел своего цвета и наследовал его. Пиним собственный цвет — наследование отваливается. */
body.kp-body .kp-sec-faq .kp-faq-q:hover .kp-faq-qtext,
body.kp-body .kp-sec-faq .kp-faq-q:focus .kp-faq-qtext{color:var(--ink)}


/* ==== kp-patch-57 ==== */
/* PATCH 5.7 — Рассылка + фикс мобильной кнопки "Заказать звонок".
   1) Newsletter: дескриптор в верхний регистр; сброс WoodMart-стилей с инпута,
      placeholder и кнопки подписки (WoodMart перебивает фон кнопки и оформление поля).
   2) .kp-mobile-cta протекает на десктоп (WoodMart button{display:...!important}).
      Жёстко прячем на десктопе, оставляем только <480px. */
body.kp-body .kp-sec-newsletter .kp-nl-kicker{text-transform:uppercase}
/* Вертикальное центрирование: поле центрирует инпут по вертикали, а кнопка тянется
   на всю высоту через align-self:stretch (ниже), чтобы остаться полноразмерной. */
body.kp-body .kp-sec-newsletter .kp-nl-field{align-items:center}
body.kp-body .kp-sec-newsletter .kp-nl-field input{padding:0 24px;font-size:16px;font-weight:600;line-height:normal;background:transparent;border:0;box-shadow:none}
/* placeholder под оригинал: 16px (равен инпуту — WoodMart иначе ужимает), вес 600 (не 400). */
body.kp-body .kp-sec-newsletter .kp-nl-field input::placeholder{color:var(--ink-3);font-weight:600;font-size:16px;opacity:1}
/* font-weight:600 !important — на ступень легче (по факту рендерилось 700 из patch-3.1);
   align-self:stretch — кнопка во всю высоту поля, т.к. поле теперь align-items:center. */
body.kp-body .kp-sec-newsletter .kp-nl-btn{padding:0 28px;background:var(--ink);color:#fff;font-weight:600 !important;font-size:15px;letter-spacing:normal;text-transform:uppercase;border:0;align-self:stretch}
body.kp-body .kp-sec-newsletter .kp-nl-btn:hover{background:#1a1a1a}
body.kp-body .kp-mobile-cta{display:none !important}
@media (max-width:480px){body.kp-body .kp-mobile-cta{display:flex !important}}


/* ==== kp-patch-58 ==== */
/* PATCH 5.8 — Футер к эталону: убрать наслоения WoodMart на списках, вернуть жёлтую почту. */
/* TODO: убрать !important — специфичности 0,0,3,1 достаточно, WoodMart не перебивает.
   Оставлено до проверки регрессий (изначально казалось, что виноват каскад, но
   реальная причина была — кэш браузера, см. ловушку №8 в CLAUDE.md). */
body.kp-body .kp-footer-col ul{margin:0;padding:0;list-style:none;gap:10px}
body.kp-body .kp-footer-col li{margin:0}
body.kp-body .kp-footer-col li a{font-size:14px;font-weight:400;color:rgba(255,255,255,.6)}
body.kp-body .kp-footer-col li a:hover{color:var(--yellow)}
body.kp-body .kp-footer .kp-footer-phone{font-size:18px !important;font-weight:600 !important;color:#fff !important;letter-spacing:normal}
body.kp-body .kp-footer .kp-footer-mail{font-size:14px !important;font-weight:600 !important;color:var(--yellow) !important}


/* ==== kp-patch-59 ==== */
/* PATCH 5.9 — FAQ: раскладка строки и кегли точно по эталону styles.css.
   База занижена (num 12→15, qtext 16/700→18/600, answer/blurb 15→16). Приводим к эталону. */
/* TODO: убрать !important — специфичности 0,0,3,1 достаточно, WoodMart не перебивает.
   Оставлено до проверки регрессий (изначально казалось, что виноват каскад, но
   реальная причина была — кэш браузера, см. ловушку №8 в CLAUDE.md). */
body.kp-body .kp-sec-faq .kp-faq-q{display:grid !important;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;width:100%;padding:20px 24px;text-align:left}
body.kp-body .kp-sec-faq .kp-faq-num{font-size:15px !important;font-weight:700}
body.kp-body .kp-sec-faq .kp-faq-qtext{font-size:18px !important;font-weight:600}
body.kp-body .kp-sec-faq .kp-faq-a{font-size:16px !important}
body.kp-body .kp-sec-faq .kp-faq-blurb{font-size:16px !important}


/* ==== kp-patch-60 ==== */
/* patch-6.0-swatches.css
   Свотчи = мини-фото товаров-соседей по группе (_gifts_group_id).
   Источник перенесён с pa_czvet (никогда не заполнялся) на kp_get_product_colors()
   через postmeta (RESUME 2026-05-29). Покрывает оба рендера:
     .kp-swatch          — карусель главной (template-parts/home/products-carousel.php)
     .kp-prod-swatch     — универсальная карточка (template-parts/product-card.php)
   Скоуп: body.kp-body.
*/

/* контейнер */
body.kp-body .kp-prod-swatches{
  display:flex;
  gap:6px;
  align-items:center;
  height:auto;
  min-height:22px;
  margin-top:6px;
  flex-wrap:nowrap;
}

/* свотч-ссылка (общие правила для обеих обёрток) */
body.kp-body .kp-prod-swatches .kp-swatch,
body.kp-body .kp-prod-swatches .kp-prod-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.12);
  background:#fff;
  padding:0;
  overflow:hidden;
  flex-shrink:0;
  display:block;
  line-height:0;
  transition:transform .15s, border-color .15s, opacity .15s;
  opacity:.85;
}

body.kp-body .kp-prod-swatches .kp-swatch img,
body.kp-body .kp-prod-swatches .kp-prod-swatch img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

body.kp-body .kp-prod-swatches .kp-swatch:hover,
body.kp-body .kp-prod-swatches .kp-prod-swatch:hover{
  transform:scale(1.15);
  opacity:1;
  border-color:rgba(0,0,0,.25);
}

body.kp-body .kp-prod-swatches .kp-swatch.is-active,
body.kp-body .kp-prod-swatches .kp-prod-swatch.is-active{
  border:2px solid var(--yellow,#ffca28);
  opacity:1;
}

/* счётчик "+K" */
body.kp-body .kp-prod-swatches .kp-swatch-more,
body.kp-body .kp-prod-swatches .kp-prod-swatch-more{
  font-size:11px;
  font-weight:700;
  color:var(--ink-3,#a0a0a0);
  margin-left:2px;
  font-feature-settings:"tnum";
}


/* ==== kp-patch-61 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.1-badges.css
 *
 * Поддержка НЕСКОЛЬКИХ бейджей на одной карточке: НОВИНКА / ХИТ / ЭКО / РОССИЯ.
 * Источник данных — _gifts_special_ids (CSV спецфильтров type=8), мапинг
 * см. inc/helpers.php::kp_get_product_badges().
 *
 * ВАЖНО — финальная спека Nick'а отличается от main.css:357-361 (там старые
 * цвета: NEW/HIT оба жёлтые, RUS чёрный). Поэтому здесь ПЕРЕБИВАЕМ цвета
 * через скоуп body.kp-body (специфичность 0,0,2,1 vs 0,0,1,0 у main.css —
 * мы выигрываем без !important). И патч грузится после main.css, что даёт
 * дополнительную страховку при равной специфичности.
 *
 * Раскладка: горизонтальный ряд вдоль верха, слева направо, flex-wrap для
 * переноса. max-width оставляет 56px справа под кнопку .kp-prod-fav.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Контейнер группы бейджей: абсолют в левом-верхнем углу .kp-prod-imgwrap */
body.kp-body .kp-prod-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 56px);
  z-index: 2;
}

/* Сам бейдж — теряет position:absolute (он на родителе), inline-flex нужен
 * для флажка слева от текста (РОССИЯ) и для вертикального выравнивания. */
body.kp-body .kp-prod-badges .kp-prod-badge {
  position: static;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Цвета по финальной спеке (перебивают main.css:357-361) ───────────────── */
body.kp-body .kp-prod-badge-new { background: var(--ink);    color: var(--yellow); }   /* НОВИНКА — инверсия */
body.kp-body .kp-prod-badge-hit { background: var(--yellow); color: var(--ink);    }
body.kp-body .kp-prod-badge-eco { background: var(--eco);    color: #fff;          }
body.kp-body .kp-prod-badge-rus {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e0e0;
}

/* Флажок России внутри бейджа РОССИЯ — круглый 16×16 с рамкой.
 * border-radius:50% + overflow:hidden обрезает триколор в круг без clipPath. */
body.kp-body .kp-prod-badge-rus svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ccc;
}


/* ==== kp-patch-62 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.2-cards.css
 *
 * Полировка карточек товара по эталону:
 *   1. Рамка hover не режется — padding-top на сетке.
 *   2. Заголовок карточки без uppercase, размер 16px.
 *   3. Изображение 1:1 (контейнер задаёт пропорции, object-fit:contain).
 *   4. Цены: блок "от 50 шт · с НДС" удалён из шаблонов (см. коммит) —
 *      здесь страховка-display:none на случай если где-то ещё рендерится.
 *   5. Кнопка "В корзину" — возврат font-weight 800 (patch-3.1:140 ослабил
 *      до 700 — это противоречит эталону main.css:387).
 *
 * Свотчи-кружки В СЕТКЕ — отдельный заход, нужен словарь "цвет→hex"
 * (см. BACKLOG.md и разведку: pa_czvet таксономия + ручной маппинг).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Сетка карточек: padding-top, чтобы hover translateY(-4px) не резался ─
 *
 * Причина: .kp-cat-grid имеет padding:0 (patch-5.2:7), карточкам некуда
 * "всплыть". Даём 8px воздуха сверху (translateY(-4) + 4px запаса). Применяем
 * к обеим сеткам — .kp-cat-grid (страница категории и .kp-sec-pop) и
 * .kp-prod-grid (main.css:352, используется в каталоге).
 */
body.kp-body .kp-cat-grid,
body.kp-body .kp-prod-grid {
  padding-top: 8px;
}

/* ── 2) Заголовок без капса, 16px ────────────────────────────────────────────
 *
 * patch-3.3:46-49 уже даёт font-size:16px/font-weight:600. Но uppercase
 * прилетает откуда-то из woodmart/woocommerce — здесь снимаем явно.
 */
body.kp-body .kp-prod-name,
body.kp-body .kp-prod-name a {
  text-transform: none;
  font-size: 16px;
  letter-spacing:normal;
}

/* ── 3) Картинка 1:1 — контейнер задаёт квадрат, img внутри вписывается ─────
 *
 * main.css:366 ставит aspect-ratio:1/1 на .kp-prod-img, но такого класса
 * в шаблонах НЕТ (есть .kp-prod-imgwrap и .kp-prod-img-link). Поэтому
 * правило бесполезно. Переносим квадрат на сам контейнер.
 * object-fit:contain — товар не обрезается (товары на белом фоне поставщика,
 * cover дал бы обрезку у вытянутых бутылок/пледов).
 */
body.kp-body .kp-prod-imgwrap {
  aspect-ratio: 1 / 1;
}
body.kp-body .kp-prod-imgwrap .kp-prod-img-link,
body.kp-body .kp-prod-imgwrap .kp-prod-img-link img,
body.kp-body .kp-prod-imgwrap > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── 4) Страховка от "от 50 шт · с НДС" если где-то ещё рендерится ──────────
 *
 * В шаблонах строки удалены этим же коммитом, но мок-ветка карусели
 * (захардкоженные товары для развёртки) её ещё содержит — на боевой
 * рендерится только WC-ветка, мок не виден. На случай если придёт ещё
 * откуда-то — прячем по классу.
 */
body.kp-body .kp-prod-price-from {
  display: none;
}

/* ── 5а) Выравнивание карточек: высота ряда свотчей зарезервирована ─────────
 *
 * Шаблоны теперь ВСЕГДА рендерят <div class="kp-prod-swatches"> (даже пустой).
 * main.css:372 уже даёт .kp-prod-swatches{height:20px}, здесь страховка через
 * min-height — на случай если где-то height перебит. Без этой гарантии у
 * товара без свотчей блок коллапсировался бы в 0 и тянул заголовок/цену вверх,
 * ряд карточек терял бы общий baseline.
 */
body.kp-body .kp-prod-swatches {
  min-height: 20px;
}

/* ── 5) Кнопка "В корзину": полная защита от Woodmart/WC ─────────────────────
 *
 * На странице каталога WC дорисовывает к нашей кнопке классы
 * .ajax_add_to_cart .add_to_cart_button (см. product-card.php:97). Через них
 * Woodmart/WC перебивает border-radius, padding, font-size, letter-spacing,
 * text-transform — main.css:387 их даёт без !important и проигрывает.
 *
 * Защищаем эти 5 свойств + font-weight (patch-3.1:140 GROUP 10 ослабил
 * до 700; main.css:387 эталонно 800). Цвета/обводка/hover уже защищены
 * patch-3.3:69-80 GROUP C.
 *
 * Селекторы:
 *   .kp-prod-add                       — спецификация 0,0,2,1 (с body.kp-body)
 *   .kp-prod-add.add_to_cart_button    — 0,0,3,1, перебивает WC-варианты
 *   a.kp-prod-add                      — 0,0,2,2, для <a> в product-card.php
 */
body.kp-body .kp-prod-add,
body.kp-body .kp-prod-add.add_to_cart_button,
body.kp-body a.kp-prod-add {
  border-radius:  var(--radius-sm) !important;
  padding:        10px 14px        !important;
  font-size:      11px             !important;
  font-weight:    800              !important;
  letter-spacing:normal!important;
  text-transform: uppercase        !important;
}

/* ── 6) Убрать ссылку "Просмотр корзины" после AJAX-добавления ───────────────
 *
 * WC после wc_ajax_add_to_cart вставляет в DOM <a class="added_to_cart wc-forward">
 * сразу после нажатой кнопки. У нас корзина уже есть в шапке + работает тост-
 * подтверждение, эта ссылка только ломает высоту карточки и ряд.
 * Источник — ядро WooCommerce (см. разведку 30.05), не наш код.
 * Корзину/счётчик/тост не задеваем — скрываем ТОЛЬКО эту ссылку.
 */
body.kp-body .added_to_cart.wc-forward {
  display: none !important;
}


/* ==== kp-patch-63 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.3-swatches.css
 *
 * Свотчи-кружки в СЕТКЕ каталога: один цветной кружок на каждый цвет-сосед
 * по _gifts_group_id. Источник цвета — pa_czvet (атрибут WC) через
 * kp_color_to_hex() (см. inc/color-map.php).
 *
 * На странице ТОВАРА (single-product галерея) — НЕ применяется: там
 * используются миниатюры (thumb_url из kp_get_product_colors), которые
 * Woodmart-core рендерит своими шаблонами.
 *
 * Высота ряда .kp-prod-swatches (выравнивание карточек) — уже задана в
 * main.css:372 height:20px + страховка min-height в patch-6.2.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Цветной кружок 16×16 — внутри ссылки .kp-prod-swatch / .kp-swatch.
 * border:1px rgba(0,0,0,.12) — лёгкая обводка, чтобы белые/молочные/прозрачные
 * не сливались с белым фоном карточки. flex-shrink:0 — не сжимается, когда
 * соседних кружков несколько и ряд тесный. */
body.kp-body .kp-prod-swatch-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Активный цвет (текущий товар) — чуть толще обводка цвета чернил.
 * .is-active навешивается в шаблоне для соседа с post_id == current. */
body.kp-body .kp-prod-swatch.is-active .kp-prod-swatch-dot,
body.kp-body .kp-swatch.is-active .kp-prod-swatch-dot {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}


/* ==== kp-patch-64 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.4-swatches-color.css
 *
 * Цветные свотчи (путь B): кружок из filter type=21 поставщика, gradient для
 * двухцветных, спецрендер для "прозрачный" и "полноцвет".
 *
 * Источник: _gifts_colors (CSV до 2 filterid) → kp_color_id_to_hex().
 * Рендер: kp_render_swatch_dot() в inc/helpers.php — 4 ветки:
 *   обычный hex / gradient / special (transparent|rainbow) / fallback-thumb.
 *
 * patch-6.3 ставил базовый .kp-prod-swatch-dot с border .12 — оставляем.
 * Здесь добавляем спецрендеры и стили для fallback-миникартинки.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Прозрачный (filterid 22) — клетка-фотошоп ──────────────────────────────
 * Шахматный паттерн 4×4 через линейный gradient (репитингом). Используем
 * conic-free вариант для совместимости со старыми движками.
 */
body.kp-body .kp-prod-swatch-dot.kp-swatch-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

/* ── Полноцвет (filterid 17152) — радужный conic ───────────────────────────
 * Conic-gradient поддерживается во всех современных браузерах (Chrome 69+,
 * Safari 12.1+, Firefox 83+).
 */
body.kp-body .kp-prod-swatch-dot.kp-swatch-rainbow {
  background: conic-gradient(
    #D32F2F, #F57C00, #FBC02D, #43A047,
    #1AA89A, #1B4D8F, #7B3FA0, #E91E63, #D32F2F
  );
}

/* ── Fallback-миникартинка (товар без _gifts_colors, ~11%) ─────────────────
 * <img class="kp-prod-swatch-thumb"> внутри ссылки .kp-prod-swatch/.kp-swatch.
 * Размер и форма — те же 16×16 кружком, чтобы выровнять с цветными свотчами.
 * Рамка через box-shadow inset (не border) для единообразия с .kp-prod-swatch-dot.
 */
body.kp-body .kp-prod-swatch-thumb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  flex-shrink: 0;
  object-fit: cover;
  vertical-align: middle;
}

/* ── Рамка кружка через box-shadow inset, НЕ border ─────────────────────────
 *
 * Перебиваем patch-6.3:25 (`border: 1px solid rgba(0,0,0,.12)`). Проблема
 * border-а на градиентном фоне: на диагонали 135° стык двух половин и
 * пиксели border'а дают визуальную "грязь" + тёмный угол на стыке.
 *
 * box-shadow inset рисуется ВНУТРИ кружка, поверх любого background
 * (хоть одноцветного, хоть gradient, хоть conic), одинаково по всему периметру
 * — никаких артефактов на стыке градиента. Также чуть увеличиваем непрозрачность
 * (.18 vs .12) — белый/прозрачный/неокрашенный не сливаются с фоном карточки.
 */
body.kp-body .kp-prod-swatch-dot {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* ── Активный (текущий товар группы) ───────────────────────────────────────
 *
 * Перебиваем patch-6.3:32-36, где было border-color:ink + box-shadow:1px ink —
 * двойная обводка давала "зацеп" в углу. Здесь — два слоя в одном shadow:
 *   inset — базовая рамка (как у обычных свотчей);
 *   outer — жёлтое кольцо-маркер "вы здесь", не накладывается на круг.
 *
 * border оставляем none (перебивает patch-6.3:34 `border-color:ink` —
 * на нашем border:none он ни на что не влияет, но явное none для ясности).
 */
body.kp-body .kp-prod-swatch.is-active .kp-prod-swatch-dot,
body.kp-body .kp-swatch.is-active .kp-prod-swatch-dot {
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .18),
    0 0 0 2px var(--yellow);
}


/* ==== kp-patch-65 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.5-carousel-nav.css
 *
 * Защита стрелок навигации каруселей (.kp-rndbtn) от WoodMart-перебивок
 * на button/button:hover. По образцу patch-6.2 для .kp-prod-add: правила в
 * main.css:347-349 уже соответствуют эталону Nick (44×44, border-radius:50%,
 * bg:#fff, border 1px var(--line), display:grid place-items:center, transition,
 * color:var(--ink), hover yellow), но WoodMart-каскад на button может их
 * перебивать без !important.
 *
 * Используется в 4 местах:
 *   - template-parts/home/products-carousel.php:226-227 (Новинки на главной)
 *   - woocommerce/archive-product.php:407-408 (Хиты категории внизу архива)
 * Все 4 кнопки одного типа — селектор .kp-rndbtn узкий, без коллизий.
 *
 * Селектор body.kp-body .kp-rndbtn = специфичность 0,0,2,1, выигрывает у
 * WoodMart-стилей на button (0,0,0,1) даже без !important. !important —
 * страховка от любых :is(button,…)-блоков с высокой специфичностью.
 * ════════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-rndbtn {
  width:           44px              !important;
  height:          44px              !important;
  border-radius:   50%               !important;
  background:      #fff              !important;
  border:          1px solid var(--line) !important;
  color:           var(--ink)        !important;   /* SVG-стрелка через currentColor */
  display:         grid              !important;
  place-items:     center            !important;
  transition:      all .15s          !important;
  padding:         0                 !important;   /* WoodMart может задавать кнопке padding */
  cursor:          pointer           !important;
}

body.kp-body .kp-rndbtn:hover {
  background:      var(--yellow)     !important;
  border-color:    var(--yellow)     !important;
  color:           var(--ink)        !important;   /* стрелка остаётся чёрной на жёлтом */
}


/* ==== kp-patch-66 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.6-cat-template.css
 *
 * Полировка шаблона категории под референс:
 *   A) Сетка товаров — 5 колонок (как на главной), вместо 4 из patch-5.1.
 *   B) Разделитель хлебных крошек — жёлтый (•) вместо серого (·).
 *
 * Дескриптор родительской категории (.kp-cat-head-pre) — удалён из шаблона
 * archive-product.php в этом же коммите. CSS-правила .kp-cat-head-pre в
 * patch-5.1:41-48 становятся мёртвыми (не вредят, по политике "не редактируем
 * старое" оставляем).
 *
 * Безопасность: .kp-cat-grid используется И на странице категории, И в секции
 * "Популярные категории" главной (через .kp-sec-pop .kp-cat-grid из patch-5.2).
 * Наше правило body.kp-body .kp-cat-grid имеет специфичность 0,0,2,1 — ниже
 * чем у patch-5.2 (.kp-sec-pop .kp-cat-grid = 0,0,3,1), поэтому ГЛАВНАЯ
 * не пострадает: там патч-5.2 всё ещё перебивает.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── A) Сетка категории 5 колонок ──────────────────────────────────────────
 * patch-5.1:290 ставил repeat(4, 1fr). Перебиваем на 5 — приводим категорию
 * к консистентности с главной (.kp-prod-grid из main.css:352).
 * Брейкпоинты patch-5.1 (1100→3, 760→2, 480→1) оставляем — они совпадают с
 * каскадом главной (main.css:573 / :598).
 */
body.kp-body .kp-cat-grid {
  grid-template-columns: repeat(5, 1fr);
}

/* ── B) Жёлтый разделитель в хлебных крошках ───────────────────────────────
 * patch-5.1:27-31 ставит .kp-cat-crumbs-sep color: var(--ink-3) (серый ·).
 * По референсу разделитель цветовой акцент — жёлтый кружок •.
 * Меняем символ через ::before/font-size, цвет — на yellow.
 */
body.kp-body .kp-cat-crumbs-sep {
  color: var(--yellow);
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}


/* ==== kp-patch-67 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.7-cat-head.css
 *
 * Шапка категории — этап A из CATEGORIES.md, часть 1 (вёрстка).
 *
 *   A1) Иконки мета-строки (".kp-cat-head-meta-item svg") — жёлтые.
 *   A2) Поджимаем отступы крошек/шапки, переставляем жёлтую полосу
 *       и meta-строку под эталон-скрины Nick.
 *
 * patch-5.1 (база) трогать не редактируем — перебиваем только новыми
 * правилами с тем же или большим скоупом.
 *
 * Без `!important`: специфичность 0,0,3,1 совпадает с patch-5.1, побеждаем
 * порядком загрузки (этот патч идёт позже в каскаде). См. CLAUDE.md
 * ловушка №8 — анти-паттерн ставить `!important` "на всякий случай".
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── A1) Иконки мета-строки жёлтые ─────────────────────────────────────────
 * patch-5.1:127-130 ставит `stroke: var(--ink)` (чёрный) и оставляет
 * `color: var(--yellow)` без эффекта (kp_ui_icon рендерит фикс. атрибут
 * stroke="currentColor", но CSS-свойство `stroke` его перебивает).
 * Меняем `stroke` на жёлтый напрямую. Текст пункта остаётся серым
 * (.kp-cat-head-meta наследует color: var(--ink-2)).
 */
body.kp-body .kp-cat-head-meta-item svg {
    stroke: var(--yellow, #FECE15);
}

/* ── A2) Отступы крошек / шапки / полосы под эталон ────────────────────────
 * patch-5.1 (исх.):
 *   .kp-cat-crumbs   padding: 18px 0 0;
 *   .kp-cat-head     padding: 8px 0 28px;
 *   .kp-cat-head-bar margin: 24px 0 20px;  (width 64, height 4)
 *   .kp-cat-head-meta gap: 24px;
 *
 * Подгонка под скрин Nick: крошки чуть выше и с небольшим воздухом
 * до заголовка; жёлтая полоса ближе к H1; meta-пункты шире разнесены.
 * Точные пиксели — пропорционально скрину; Nick сверит на стейдже.
 */
body.kp-body .kp-cat-crumbs {
    padding: 14px 0 6px;
}
body.kp-body .kp-cat-head {
    padding: 4px 0 24px;
}
body.kp-body .kp-cat-head-bar {
    margin: 18px 0 18px;
}
body.kp-body .kp-cat-head-meta {
    gap: 32px;
}


/* ==== kp-patch-68 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.8-cat-chips-wrap.css
 *
 * Ряд пилюль подкатегорий — wrap вместо горизонтального скролла, с collapse
 * до 2 рядов и кнопкой «Показать все (N) / Свернуть» когда контента больше.
 *
 * Перебиваем patch-5.1:
 *   - :136-143 — flex+overflow-x:auto+scroll-snap (трек скроллился).
 *   - :550-553 — mask-image+padding-right:60px (fade-arrow стиль).
 *   - .kp-cat-chips-arrow (:555-570, :887) — стрелка больше не используется,
 *     её разметку убрали в archive-product.php. Старые правила становятся
 *     мёртвыми (по политике «не редактируем patch-5.1» оставляем как есть).
 *
 * Высота пилюли — 42px (patch-5.1:151).
 * 2 ряда = padding-top 4 + chip 42 + row-gap 10 + chip 42 + padding-bottom 8 = 106px.
 *
 * Mobile ≤760: max-height:none — пилюли переносятся естественно, всё видно,
 * тогглер скрывается JS-ом (clientHeight == scrollHeight).
 *
 * Без `!important`: специфичность совпадает с patch-5.1, побеждаем порядком
 * загрузки (этот патч позже). См. CLAUDE.md ловушка №8.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Трек: wrap, 2 ряда по умолчанию ──────────────────────────────────── */
body.kp-body .kp-cat-chips-track {
    flex-wrap: wrap;
    overflow: visible;                /* снимаем overflow-x:auto из patch-5.1:139 */
    overflow-y: hidden;               /* нужно для клипа третьего ряда */
    mask-image: none;                 /* снимаем fade из patch-5.1:551 */
    -webkit-mask-image: none;
    padding-right: 0;                 /* снимаем резерв под стрелку из patch-5.1:553 */
    padding-left: 0;
    row-gap: 10px;                    /* отступ между рядами (gap из 5.1 = 10 на оба) */
    max-height: 106px;                /* ровно 2 ряда: 4 + 42 + 10 + 42 + 8 */
    transition: max-height .3s ease;
    scroll-snap-type: none;           /* снимаем scroll-snap из patch-5.1:142 */
}

/* ── Раскрыто — JS вешает .is-expanded на .kp-cat-chips ────────────────── */
body.kp-body .kp-cat-chips.is-expanded .kp-cat-chips-track {
    max-height: 2000px;               /* достаточно для любого реалистичного числа */
}

/* ── Кнопка-тогглер: текст-ссылка с жёлтым underline ───────────────────── */
body.kp-body .kp-cat-chips-toggle {
    display: none;                    /* база — скрыта; JS показывает при is-clipped */
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink-2, #6b6b6b);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color .15s;
}
body.kp-body .kp-cat-chips-toggle:hover {
    color: var(--ink, #0a0a0a);
}

/* Видим, только если контент реально клипается (JS ставит .is-clipped) */
body.kp-body .kp-cat-chips.is-clipped .kp-cat-chips-toggle {
    display: inline-block;
}

/* ── Mobile ≤760: тот же collapse-механизм, но на 4 ряда ─────────────────
 * Каскад-аудит подтвердил: .kp-cat-chip height/padding/font НЕ переопределяются
 * в патчах под @760/@480 — пилюля на мобильном остаётся 42px высотой.
 * 4 ряда: 4 + 4×42 + 3×10 + 8 = 210px.
 *
 * is-expanded в раскрытом состоянии работает без отдельной mobile-правки:
 * `body.kp-body .kp-cat-chips.is-expanded .kp-cat-chips-track` имеет
 * специфичность 0,0,3,1 — выше чем у mobile-правила ниже (0,0,2,1), поэтому
 * max-height:2000px из базы побеждает специфичностью независимо от media.
 */
@media (max-width: 760px) {
    body.kp-body .kp-cat-chips-track {
        max-height: 210px;            /* 4 ряда — см. расчёт выше */
    }
}


/* ==== kp-patch-69 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.9-cat-filters.css
 *
 * Фильтр-пилюли категории — дропдауны (паттерн на все будущие фильтры).
 * Первая рабочая пилюля — «Цена» (min_price/max_price через URL → WC бэк).
 *
 * Архитектура:
 *   <div class="kp-cat-fpill" role="button" tabindex="0"
 *        data-kp-fpill-toggle aria-expanded="false">
 *     <span>Цена</span> [<span class="kp-cat-fpill-count">N</span>] <chevron>
 *     <div class="kp-cat-fpill-drop" data-kp-fpill-drop>
 *       … input[data-kp-fpill-input="min_price"] …
 *       … button[data-kp-fpill-apply] …
 *     </div>
 *   </div>
 *
 * is-active и .kp-cat-fpill-count бейдж — уже стилизованы в patch-5.1:226-242,
 * переиспользуем без переопределения.
 *
 * Сортировка (.kp-cat-fsort-pill) — отдельный механизм, не трогаем.
 *
 * patch-5.1 не редактируем. Скоуп строго .kp-cat-fpill* / [data-kp-fpill-*].
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Пилюля как div: position-relative + cursor ─────────────────────────── */
body.kp-body .kp-cat-fpill[data-kp-fpill-toggle] {
    position: relative;
    cursor: pointer;
    user-select: none;
}
body.kp-body .kp-cat-fpill[data-kp-fpill-toggle]:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}

/* ── Сам дропдаун ───────────────────────────────────────────────────────── */
body.kp-body .kp-cat-fpill-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 20;
    padding: 16px;
    display: none;
    cursor: default;             /* перебиваем cursor:pointer родителя */
    white-space: normal;         /* родитель имеет white-space:nowrap (patch-5.1:218) */
}
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop {
    display: block;
}

/* ── Ряд инпутов от/до ─────────────────────────────────────────────────── */
body.kp-body .kp-cat-fpill-drop-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
body.kp-body .kp-cat-fpill-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.kp-body .kp-cat-fpill-field-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink-3, #a0a0a0);
}

/* ── Сброс WoodMart-overrides на input[type=number] ─────────────────────── */
body.kp-body .kp-cat-fpill-field input[type=number] {
    height: 40px;
    padding: 0 12px;
    margin: 0;                   /* WoodMart любит ставить margin */
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;              /* WoodMart может ставить высокий line-height */
    color: var(--ink, #0a0a0a);
    width: 100%;
    box-sizing: border-box;
    -moz-appearance: textfield;  /* убрать спинеры в Firefox */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
}
body.kp-body .kp-cat-fpill-field input[type=number]::-webkit-outer-spin-button,
body.kp-body .kp-cat-fpill-field input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;    /* убрать спинеры в WebKit */
    margin: 0;
}
body.kp-body .kp-cat-fpill-field input[type=number]:focus {
    outline: 0;
    border-color: var(--ink, #0a0a0a);
}

/* ── Подвал: reset слева (опц.), apply справа ──────────────────────────── */
body.kp-body .kp-cat-fpill-drop-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fpill-reset {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
body.kp-body .kp-cat-fpill-reset:hover {
    color: var(--ink, #0a0a0a);
}

/* Тёмная CTA «Применить». margin-left:auto всегда — apply справа независимо
 * от наличия reset (когда фильтр не активен, reset не рендерится). */
body.kp-body .kp-cat-fpill-apply {
    margin-left: auto;
    height: 40px;
    padding: 0 22px;
    background: var(--ink, #0a0a0a);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-apply:hover {
    background: #1a1a1a;
}

/* ── Mobile ≤760: drop на всю ширину контейнера ─────────────────────────── */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * Дроп фильтра «Цвет» — multi-select свотчей.
 * data-kp-fpill-multi на кнопках-свотчах; toggle .is-selected по клику.
 * Спецсвотчи (filterid 22/17152) — классы .kp-swatch-transparent /
 * .kp-swatch-rainbow; стилевые паттерны зеркалят patch-6.4 (шахматка/радуга),
 * но привязаны к нашему .kp-cat-fpill-color-swatch, чтобы изменения свотчей
 * карточек не задели фильтр и наоборот.
 * ════════════════════════════════════════════════════════════════════════ */

/* Дроп шире — нужна сетка из 4 свотчей.  Sticky footer + скролл при много цветов.
 * display НЕ задаём здесь: иначе display:flex со специфичностью 0,0,2,1 перебивал бы
 * базовый display:none (стр. 48) у закрытого дропа — дроп был виден всегда. flex-колонка
 * включается ниже только при .is-open. */
body.kp-body .kp-cat-fpill-drop--colors {
    min-width: 360px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние Цвета: flex-колонка (sticky footer + скролл грида).
 * Специфичность 0,0,3,1 == общему .is-open .kp-cat-fpill-drop {display:block} (стр. 52),
 * порядок ниже в файле — flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--colors {
    display: flex;
    flex-direction: column;
}

body.kp-body .kp-cat-fpill-colors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Кнопка-свотч: круг + имя под ним. */
body.kp-body .kp-cat-fpill-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-color:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-color.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Сам кружок. Размер крупнее, чем в карточках (32 vs 16) — нужна узнаваемость. */
body.kp-body .kp-cat-fpill-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12);
    box-sizing: border-box;
    transition: box-shadow .15s;
    flex-shrink: 0;
}
body.kp-body .kp-cat-fpill-color.is-selected .kp-cat-fpill-color-swatch {
    box-shadow: inset 0 0 0 2.5px var(--ink, #0a0a0a);
}

/* Спецсвотчи в фильтре — зеркальный код шахматки и радуги из patch-6.4:19-39,
 * но узко привязанные к нашему классу, чтобы не сцепляться с карточками. */
body.kp-body .kp-cat-fpill-color-swatch.kp-swatch-transparent {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
body.kp-body .kp-cat-fpill-color-swatch.kp-swatch-rainbow {
    background: conic-gradient(
        #D32F2F, #F57C00, #FBC02D, #43A047,
        #1AA89A, #1B4D8F, #7B3FA0, #E91E63, #D32F2F
    );
}

/* Имя цвета. */
body.kp-body .kp-cat-fpill-color-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-2, #6b6b6b);
    text-align: center;
}
body.kp-body .kp-cat-fpill-color.is-selected .kp-cat-fpill-color-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Sticky footer внутри дропа Цвета (кнопки всегда видны над скроллом грида). */
body.kp-body .kp-cat-fpill-drop--colors .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: 3 свотча в ряд, дроп на всю ширину контейнера. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--colors {
        min-width: 0;
        max-height: 360px;
    }
    body.kp-body .kp-cat-fpill-colors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==== kp-patch-70 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.0-cat-stock.css
 *
 * Фильтр «Наличие» в шапке категории — два чекбокса (В наличии / Под заказ),
 * multi-select по паттерну Цвета (data-kp-fpill-multi).
 *
 * URL: ?filter_stock=instock,ondemand (CSV). Backend в catalog-filter.php:
 * условие добавляется только при ровно 1 выбранном (0/2 = всё доступное).
 *
 * Архитектура дропа:
 *   <div class="kp-cat-fpill-drop kp-cat-fpill-drop--stock" data-kp-fpill-drop>
 *     <div class="kp-cat-fpill-stock-list">
 *       <button class="kp-cat-fpill-stock [is-selected]"
 *               data-kp-fpill-input="filter_stock"
 *               data-kp-fpill-value="instock|ondemand"
 *               data-kp-fpill-multi>
 *         <span class="kp-cat-fpill-stock-check"></span>
 *         <span class="kp-cat-fpill-stock-name">В наличии</span>
 *         <span class="kp-cat-fpill-stock-count">12152</span>
 *       </button>
 *       … вторая строка …
 *     </div>
 *     <div class="kp-cat-fpill-drop-foot"> Сбросить · Применить </div>
 *   </div>
 *
 * ВАЖНО (баг Цвета не повторяем):
 *   На модификаторе .kp-cat-fpill-drop--stock НЕ задаём display:flex/grid —
 *   только min-width / padding. Видимость гейтит базовое правило
 *   patch-6.9:48 (display:none) и .is-open .kp-cat-fpill-drop {display:block}.
 *   Внутри списка/футера flex задаётся НЕ на самом дропе, а на .stock-list /
 *   .drop-foot — они не отвечают за видимость родителя.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-stock* / .kp-cat-fpill-drop--stock.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Ширина дропа — компактнее Цвета (нужны только 2 строки). display не трогаем. */
body.kp-body .kp-cat-fpill-drop--stock {
    min-width: 260px;
}

/* Список чекбоксов: вертикально, с отступами. flex-on-list ОК — не влияет
 * на видимость самого drop'а. */
body.kp-body .kp-cat-fpill-stock-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

/* Строка-кнопка чекбокса. Подложка как .kp-cat-fpill-color: нейтрально/желтоватая
 * при выбранном. clickable вся строка целиком. */
body.kp-body .kp-cat-fpill-stock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-stock:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-stock.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс слева. Имитирует нативный checkbox без <input>: квадрат +
 * галочка через ::after при .is-selected. Тёмная заливка при выборе. */
body.kp-body .kp-cat-fpill-stock-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя варианта — тянется на свободное место (счётчик прижат справа). */
body.kp-body .kp-cat-fpill-stock-name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа — приглушённый, чуть мельче. */
body.kp-body .kp-cat-fpill-stock-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-stock.is-selected .kp-cat-fpill-stock-count {
    color: var(--ink-2, #6b6b6b);
}

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительных правил не нужно — list-колонка адаптируется сама. */


/* ==== kp-patch-71 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.1-cat-material.css
 *
 * Фильтр «Материал» в шапке категории — multi-select чекбоксов из pa_material.
 * URL: ?filter_pa_material=slug,slug — WC layered_nav обрабатывает сам
 * (OR-семантика закреплена фильтром woocommerce_layered_nav_default_query_type
 * в catalog-filter.php). Counts — kp_cat_available_materials.
 *
 * Архитектура зеркалит Наличие (patch-7.0) + скролл/sticky-footer Цвета (patch-6.9):
 *   <div class="kp-cat-fpill-drop kp-cat-fpill-drop--material" data-kp-fpill-drop>
 *     <div class="kp-cat-fpill-mat-list">  // скроллируемый список
 *       <button class="kp-cat-fpill-mat [is-selected]"
 *               data-kp-fpill-input="filter_pa_material"
 *               data-kp-fpill-value="khlopok"
 *               data-kp-fpill-multi>
 *         <span class="kp-cat-fpill-mat-check"></span>
 *         <span class="kp-cat-fpill-mat-name">Хлопок</span>
 *         <span class="kp-cat-fpill-mat-count">2163</span>
 *       </button>
 *       … 17 строк ещё (Одежда даёт 18 материалов) …
 *     </div>
 *     <div class="kp-cat-fpill-drop-foot"> Сбросить · Применить </div>
 *   </div>
 *
 * ВАЖНО (баг Цвета не повторяем):
 *   На модификаторе .kp-cat-fpill-drop--material НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--material (как у patch-6.9:180-183 для
 *   Цвета). Иначе закрытый дроп будет виден всегда — баг patch-5.8/5.9.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-mat* / .kp-cat-fpill-drop--material.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--material {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние: flex-колонка (скроллируемый список + sticky футер).
 * Зеркалит patch-6.9:180-183. Специфичность 0,0,3,1 == правилу
 * .is-open .kp-cat-fpill-drop {display:block} (patch-6.9:52) — порядок ниже
 * в каскаде, flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--material {
    display: flex;
    flex-direction: column;
}

/* Список — скроллируется при длинном перечне (Одежда=18 материалов). */
body.kp-body .kp-cat-fpill-mat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн зеркалит .kp-cat-fpill-stock из patch-7.0,
 * но строки чуть плотнее (список длинный — нужно вместить 10-18 строк без скролла). */
body.kp-body .kp-cat-fpill-mat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-mat:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-mat.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Тот же приём, что в patch-7.0:64-91 для Наличия —
 * имитация нативного checkbox без <input> (квадрат + ::after-галочка). */
body.kp-body .kp-cat-fpill-mat-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя материала — flex-grow, влезает за счёт min-width:0 в overflow если нужно. */
body.kp-body .kp-cat-fpill-mat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    /* На случай длинных названий вроде «Переработанный полиэстер» — wrap по словам. */
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-mat-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-count {
    color: var(--ink-2, #6b6b6b);
}

/* Sticky footer — кнопки всегда видны над скроллом списка. Зеркалит patch-6.9:265-270. */
body.kp-body .kp-cat-fpill-drop--material .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительно — чуть меньше max-height. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--material {
        min-width: 0;
        max-height: 360px;
    }
}


/* ==== kp-patch-72 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.2-cat-brand.css
 *
 * Фильтр «Бренд» в шапке категории — multi-select чекбоксов из pa_brend.
 * URL: ?filter_pa_brend=slug,slug — WC layered_nav обрабатывает сам
 * (OR-семантика закреплена фильтром woocommerce_layered_nav_default_query_type
 * в catalog-filter.php). Counts — kp_cat_available_attr_terms(.,.,'pa_brend').
 *
 * Визуально полностью повторяет «Материал» (patch-7.1) — те же размеры дропа,
 * скролл-список, sticky-footer. Разделили на отдельный класс kp-cat-fpill-brand*
 * чтобы (а) сохранить семантику DOM, (б) дать возможность точечно отличать
 * Бренд в будущем (например, добавить логотипы) не задев Материал.
 *
 * ВАЖНО — баг patch-5.8/5.9 не повторяем:
 *   На модификаторе .kp-cat-fpill-drop--brand НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--brand (как у Цвета patch-6.9:180-183
 *   и Материала patch-7.1:46-48). Иначе закрытый дроп будет виден всегда.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-brand* / .kp-cat-fpill-drop--brand.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--brand {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние: flex-колонка (скроллируемый список + sticky футер).
 * Зеркалит patch-7.1:45-48. Специфичность 0,0,3,1 == правилу
 * .is-open .kp-cat-fpill-drop {display:block} (patch-6.9:52) — порядок ниже
 * в каскаде, flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--brand {
    display: flex;
    flex-direction: column;
}

/* Список — скроллируется при длинном перечне (Одежда=23 бренда). */
body.kp-body .kp-cat-fpill-brand-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн идентичен .kp-cat-fpill-mat (patch-7.1:63-78). */
body.kp-body .kp-cat-fpill-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-brand:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-brand.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Имитация нативного checkbox без <input>
 * (квадрат + ::after-галочка). Идентично patch-7.1:88-113. */
body.kp-body .kp-cat-fpill-brand-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя бренда — flex-grow. Wrap по словам на длинных названиях (например,
 * «James Harvest», «Matteo Tantini»). */
body.kp-body .kp-cat-fpill-brand-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-brand-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-brand.is-selected .kp-cat-fpill-brand-count {
    color: var(--ink-2, #6b6b6b);
}

/* Sticky footer — кнопки всегда видны над скроллом списка. */
body.kp-body .kp-cat-fpill-drop--brand .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительно — чуть меньше max-height. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--brand {
        min-width: 0;
        max-height: 360px;
    }
}


/* ==== kp-patch-73 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.3-cat-special.css
 *
 * Фильтр «Подборка» в шапке категории — multi-select чекбоксов из type=8
 * (мета _gifts_special_ids, CSV). URL: ?filter_special=ID,ID. Backend — наш,
 * ветка в woocommerce_product_query (catalog-filter.php), REGEXP-OR по CSV,
 * та же семантика что filter_color. Whitelist + counts — kp_special_id_to_name
 * и kp_cat_available_specials в catalog-filter.php.
 *
 * Визуально полностью повторяет «Бренд» (patch-7.2) и «Материал» (patch-7.1) —
 * чекбокс-список, sticky-footer. Отдельный класс kp-cat-fpill-special* —
 * по той же причине что Бренд: семантика DOM + локальные правки в будущем.
 *
 * ВАЖНО — баг patch-5.8/5.9 не повторяем:
 *   На модификаторе .kp-cat-fpill-drop--special НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--special (как у Цвета patch-6.9:180-183,
 *   Материала patch-7.1:45-48, Бренда patch-7.2:38-41).
 *
 * Скоуп: body.kp-body .kp-cat-fpill-special* / .kp-cat-fpill-drop--special.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--special {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние: flex-колонка (скроллируемый список + sticky футер). */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--special {
    display: flex;
    flex-direction: column;
}

/* Список — скроллируется при длинном перечне (макс 6 опций, скролл редок,
 * но max-height на дропе всё равно ограничивает). */
body.kp-body .kp-cat-fpill-special-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн идентичен .kp-cat-fpill-mat (patch-7.1:63-78)
 * и .kp-cat-fpill-brand (patch-7.2:51-69). */
body.kp-body .kp-cat-fpill-special {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-special:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-special.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Имитация нативного checkbox без <input>. */
body.kp-body .kp-cat-fpill-special-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя подборки — flex-grow. Имена короткие (≤18 символов: «Сделано в России»),
 * wrap по словам не нужен, но оставлен для подстраховки. */
body.kp-body .kp-cat-fpill-special-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-special-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-special.is-selected .kp-cat-fpill-special-count {
    color: var(--ink-2, #6b6b6b);
}

/* Sticky footer. */
body.kp-body .kp-cat-fpill-drop--special .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: дроп на всю ширину контейнера через patch-6.9:150-156. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--special {
        min-width: 0;
        max-height: 360px;
    }
}


/* ==== kp-patch-74 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.4-collections-index.css
 *
 * Индексная страница /collections/ (templates/collections-index.php, ЭТАП B2b).
 * Шапка/крошки переиспользуют kp-cat-head/kp-cat-crumbs (patch-5.1 + patch-6.7),
 * новые стили — только сетка карточек коллекций и сама карточка.
 *
 * Карточка коллекции: обложка-фото (4:3) + имя + count. Кликабельная (вся
 * карточка — <a>), ведёт на /collections/{slug}/ (taxonomy-product_collection).
 * Без цены, без «В корзину» — это не товар, а навигационный узел.
 *
 * Скоуп: body.kp-body .kp-coll-grid* / .kp-coll-card*.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Грид карточек: 4 колонки на десктопе, тот же breakpoint-набор что у
 * .kp-cat-grid (категории) — patch-5.1. */
body.kp-body .kp-coll-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 24px 0 48px;
}

@media (max-width: 1100px) {
    body.kp-body .kp-coll-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
    body.kp-body .kp-coll-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-coll-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Карточка — link-обёртка вокруг обложки и подписи. */
body.kp-body .kp-coll-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
    border: 1px solid var(--line, #e5e5e5);
}
body.kp-body .kp-coll-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* Обложка — 4:3 для предсказуемости в гриде разных по форме фото поставщика. */
body.kp-body .kp-coll-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--fog, #f5f5f5);
    overflow: hidden;
}
body.kp-body .kp-coll-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}
body.kp-body .kp-coll-card:hover .kp-coll-card-cover img {
    transform: scale(1.04);
}
/* Fallback без обложки — серый плейсхолдер (на практике сейчас не срабатывает:
 * у всех 37 коллекций есть фото; оставлен на случай новых пустых импортов). */
body.kp-body .kp-coll-card-cover-fallback {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 45%, rgba(0,0,0,.04) 50%, transparent 55%)
        var(--fog, #f5f5f5);
}

/* Подпись — имя + count. */
body.kp-body .kp-coll-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.kp-body .kp-coll-card-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink, #0a0a0a);
}
body.kp-body .kp-coll-card-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}

/* Тонкий jet-ввод: на мобильных уменьшаем кегль имени на 1px. */
@media (max-width: 480px) {
    body.kp-body .kp-coll-card-name  { font-size: 17px; }
    body.kp-body .kp-coll-card-body  { padding: 12px 14px 16px; }
}


/* ==== kp-patch-75 ==== */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.5 — Сердце в карточке товара: рабочая кнопка + новый стиль.
 *
 * Контекст:
 *   До 7.5 в шаблонах карточки рендерилась мёртвая <button class="kp-prod-fav">
 *   без data-атрибутов — Woodmart-JS на неё не цеплялся. В 7.5 хелпер
 *   kp_wishlist_btn() (inc/helpers.php) рендерит разметку под контракт
 *   wishlist.js:37 — <div class="kp-prod-fav wd-wishlist-btn ..."><a data-product-id
 *   data-key data-added-text> — и Woodmart сам обрабатывает клик
 *   (cookie для гостей / AJAX для авторизованных).
 *
 *   Demo-плитки на главной идут с тем же контейнером .kp-prod-fav, но без
 *   wd-wishlist-* / data-* — это .kp-prod-fav-demo, чисто визуальный.
 *
 * Что делает патч:
 *   1) Перебивает старое правило main.css:362-365 (.kp-prod-fav — серый круг,
 *      hover только меняет цвет иконки) под новый эталон Image 4/5:
 *      белый круг 34×34 + border 1px line, иконка-контур var(--ink-3),
 *      hover → красная заливка var(--hot), иконка белая.
 *   2) Состояние .added (a.added внутри .kp-prod-fav) — постоянная красная
 *      заливка + залитое сердце. Wishlist.js навешивает .added на <a>
 *      при добавлении и на загрузке (updateWishlistButtonState).
 *   3) Сбрасывает родные Woodmart-стили .wd-wishlist-btn / .wd-action-btn,
 *      которые могут перебивать наш позиционирующий absolute (background,
 *      padding, position relative и т.д.).
 *   4) Прячет .wd-action-text (Woodmart-текст, который JS заменит на
 *      data-added-text после добавления — нам он не нужен визуально,
 *      но удалять его нельзя: wishlist.js:377 ищет именно его, иначе
 *      fallback на $button.text() сотрёт наш SVG).
 *
 * Скоуп:
 *   body.kp-body .kp-prod-imgwrap .kp-prod-fav — высокая специфичность,
 *   перебивает и main.css, и parent woodmart CSS без !important (где можно).
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── 1. База: круглая кнопка ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
    /* absolute top:8/right:8 уже заданы в patch-3.3 (GROUP D, с !important) */
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: none;          /* убираем мягкую тень из main.css:362 */
    color: var(--ink-3);       /* цвет SVG-контура */
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

/* Кнопка-обёртка для реального товара — это <div>, внутри <a>. Растягиваем <a> */
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 50%;
    /* Сброс родных .wd-action-btn padding/background — Woodmart рисует свою
       подложку, нам она не нужна. */
    padding: 0;
    background: transparent;
}

/* Прячем родные Woodmart-элементы: .wd-added-icon (их check-иконка) и
   .wd-action-text (текст, который JS подменит после добавления). Текст
   оставляем в DOM ради корректности wishlist.js:377-381 — там logic
   "if .wd-action-text exists → replace its text, else replace whole button". */
body.kp-body .kp-prod-imgwrap .kp-prod-fav .wd-added-icon {
    display: none;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav .wd-action-text,
body.kp-body .kp-prod-imgwrap .kp-prod-fav .kp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Иконка-сердце */
body.kp-body .kp-prod-imgwrap .kp-prod-fav .kp-prod-fav-svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: fill .15s;
}


/* ───────── 2. Hover: красная заливка, иконка белая ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover {
    background: var(--hot);
    border-color: var(--hot);
    color: #fff;
}


/* ───────── 3. Состояние .added (товар уже в избранном) ─────────
 * wishlist.js навешивает .added на <a> при успешном добавлении и
 * восстанавливает её на загрузке для товаров из cookie.
 * Контейнер при этом остаётся обычным — селектор идёт через :has() для
 * современных браузеров и через дублирующее правило с .added на <a>. */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:has(a.added) {
    background: var(--hot);
    border-color: var(--hot);
    color: #fff;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav a.added .kp-prod-fav-svg {
    fill: currentColor;        /* заливает контур сердца */
}


/* ───────── 4. Сбросы для Woodmart-классов на нашем контейнере ─────────
 * .wd-action-btn / .wd-wishlist-btn могут принести из parent CSS
 * собственный position, background, before-псевдо. Сбрасываем то, что
 * мешает нашему круглому виду. */

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn {
    /* перебивает woodmart .wd-action-btn default sizing */
    line-height: 0;
}

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn::before,
body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn > a::before {
    display: none !important;  /* Woodmart рисует свою иконку через ::before */
}


/* ───────── 5. Доступность: фокус-обводка ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:focus-visible,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 2px;
}


/* ==== kp-patch-76 ==== */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.6 — Wishlist heart: добивка patch-7.5.
 *
 * Контекст:
 *   В 7.5 мы повесили на контейнер .kp-prod-fav классы Woodmart
 *   (.wd-wishlist-btn .wd-action-btn .wd-style-icon .wd-wishlist-icon) для
 *   совместимости с wishlist.js. Они подтянули из woodmart base.min.css
 *   правило `.wd-action-btn>a:hover { color: var(--wd-action-color-hover,
 *   var(--color-gray-500)) }` (специфичность 0,0,1,2), которое перекрывает
 *   наш цвет наследования от .kp-prod-fav:hover (0,0,3,1) — потому что
 *   наследование (color:inherit) проигрывает явному color на <a>:hover.
 *
 *   Визуально это выглядит как серое hover-сердце вместо нашего белого
 *   на красном фоне.
 *
 *   Аналогично для .added — у Woodmart жёсткого color на a.added нет,
 *   но мы хотим белую иконку поверх красной заливки контейнера, и без
 *   явного правила inherit может не дойти.
 *
 * Что делает патч:
 *   Явно ставит color:#fff на <a> при :hover контейнера, при :hover самого <a>
 *   и при состоянии .added. Специфичность 0,0,4,2 — победит Woodmart 0,0,1,2
 *   без !important.
 *
 *   Дополнительно — таймминг: совпадает transition контейнера, чтобы цвет
 *   иконки переключался синхронно с заливкой.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── 1. Цвет иконки в hover/added — белый ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover > a,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a:hover,
body.kp-body .kp-prod-imgwrap .kp-prod-fav > a.added {
    color: #fff;
    transition: color .15s;
}


/* ───────── 2. .added — постоянная красная заливка контейнера ─────────
 * patch-7.5 уже ставит это через :has(a.added). Дублируем здесь без :has()
 * на случай старых браузеров — Safari 15.4+ / Firefox 121+ поддерживают,
 * но запасной путь не помешает: селектор .wd-wishlist-btn + a.added — то же
 * самое, только без :has(). */

body.kp-body .kp-prod-imgwrap .kp-prod-fav.wd-wishlist-btn > a.added {
    /* На <a> мы не ставим background — он на контейнере. Тут только
       страховочный color для .added (что уже сделано в блоке 1). */
}


/* ───────── 3. SVG в .added — заполненное сердце ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav > a.added .kp-prod-fav-svg {
    fill: currentColor;        /* currentColor = #fff (см. блок 1) */
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Счётчик избранного в шапке.
 *
 * header.php теперь рендерит <span class="wd-tools-count kp-badge-count">
 * ВСЕГДА (даже при 0) — иначе wishlist.js (updateCountWidget, строки 267-273)
 * не найдёт куда писать новое число после add/remove. Скрываем span когда
 * число = 0 (пустой текст или data-count="0" на родителе).
 *
 * Селекторы:
 *   :empty — span без текста (рендер при count=0)
 *   .kp-snav-icon[data-count="0"] .wd-tools-count — на случай, если число
 *   обновлено JS-ом и стало "0" (текст не пустой, но семантически ноль)
 * ═══════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-snav-icon.wd-header-wishlist .wd-tools-count:empty,
body.kp-body .kp-snav-icon.wd-header-wishlist[data-count="0"] .wd-tools-count {
    display: none;
}

/* Класс wd-header-wishlist может прийти с CSS-инъекциями от Woodmart
 * header-builder (margin, padding, alignment). Сбрасываем — наш
 * .kp-snav-icon уже знает, как себя позиционировать. */

body.kp-body .kp-snav-icon.wd-header-wishlist {
    /* Сброс на случай, если Woodmart-CSS прилетит позже */
    margin: 0;
    padding: 0;
}



/* ==== kp-patch-77 ==== */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.7 — Wishlist heart: возврат видимости белого круга.
 *
 * Контекст:
 *   В patch-7.5 я снял `box-shadow: var(--shadow-soft)` (которое было в
 *   main.css:363 на старой .kp-prod-fav), посчитав его лишним. Оказалось,
 *   именно эта тень держала «белый круг» на эталоне Image 4/5: продуктовые
 *   фото в каталоге часто на белом фоне, у имгврапа фон тоже белый, у
 *   нашей кнопки фон белый, а border 1px #E5E5E5 в этом white-on-white
 *   стэке визуально неотличим от фона. Без тени круг просто исчезал —
 *   Nick видел только SVG-сердце без обрамления.
 *
 * Что делает патч:
 *   1) Возвращает читаемую box-shadow на .kp-prod-fav (drop+lift, чуть
 *      сильнее, чем shadow-soft, чтобы на любом фоне круг был виден).
 *   2) При hover/active тень убирается — заливка var(--hot) сама даёт
 *      контраст, а тень бы загрязняла красный.
 *   3) Border слегка усилен только для нашего контекста (всё ещё через
 *      переменные, без слепых hex).
 *
 * Скоуп: тот же body.kp-body .kp-prod-imgwrap .kp-prod-fav, специфичность
 * 0,0,3,1 — перебивает patch-7.5 (тот же селектор, но позже в каскаде).
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── 1. Белый круг — снова виден ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav {
    /* Двухслойная тень: жёсткое 1px-кольцо + мягкий drop.
       Первый слой эмулирует чёткую границу (как outline, но без баунд-боксов).
       Второй даёт лёгкий «приподнятый» эффект — круг отделяется от фото. */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.10);
    /* border у нас уже есть в patch-7.5 (1px solid var(--line)) — оставляем
       как fallback, но в стэке поверх тени он практически не работает. */
}


/* ───────── 2. Hover / .added — тень убираем, заливка сама держит контраст ───────── */

body.kp-body .kp-prod-imgwrap .kp-prod-fav:hover,
body.kp-body .kp-prod-imgwrap .kp-prod-fav:has(a.added) {
    /* Лёгкий лифт сохраняем, чтобы движение «нажалось» — но без серого ринга */
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.30);  /* красный соответствует --hot */
}


/* ==== kp-patch-78 ==== */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.8 — Страница «Избранное» (/wishlist/) по дизайну Nick.
 *
 * Рендер из child theme/page-wishlist.php (через WP template hierarchy —
 * page-{slug}.php перебивает дефолтный Elementor-widget wd_wishlist).
 *
 * Структура:
 *   .kp-wl-page
 *     .kp-cat-crumbs               — крошки (стиль наследует от каталога)
 *     .kp-wl-head                  — kicker + H1 + плашка-счётчик + интро
 *       .kp-wl-kicker              — «Личный список»
 *       .kp-wl-title-row
 *         .kp-wl-title (H1)        — «ИЗБРАННОЕ»
 *         .kp-wl-count             — жёлтая плашка-счётчик «N товаров в списке»
 *       .kp-wl-intro               — текст про cookies + действия
 *     .kp-wl-actions               — «В корзину всё (N)» + «Очистить»
 *     .kp-wl-grid-sec > .kp-cat-grid.kp-wl-grid  — сетка наших карточек
 *     .kp-wl-empty                 — пустое состояние (сердце в круге + текст + кнопка)
 *
 * Скоупинг: всё под body.kp-body / .kp-wl-page. Никаких голых .kp-* без обёртки.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── 1. Контейнер страницы ───────── */

body.kp-body .kp-wl-page {
    padding-bottom: 80px;
}


/* ───────── 1a. Перебивка [hidden] для display:flex/grid элементов ─────────
 *
 * Причина: UA-стайл `[hidden] { display: none }` имеет специфичность 0,0,1,0.
 * У нас .kp-wl-count (плашка-счётчик) задана `display: inline-flex` (0,0,2,1),
 * у .kp-wl-empty-icon — `display: grid` и т.д. Наши display-правила
 * перебивают UA `[hidden]`, и атрибут html `hidden` визуально игнорируется.
 *
 * Проявление багов:
 *   BAG 2 — при count>0 пустое состояние и грид рендерятся одновременно
 *           (хотя <section class="kp-wl-empty" hidden> в HTML корректный);
 *   BAG 3 — после «Очистить» JS ставит plate.setAttribute('hidden',''),
 *           но плашка остаётся видна (display:inline-flex побеждает).
 *
 * Фикс: явное правило с теми же скоупами, но 100% перебивает любой наш display.
 * !important здесь оправдан — это override НАШИХ собственных более ранних
 * display-правил, не Woodmart'овых. */

body.kp-body .kp-wl-page [hidden],
body.kp-body .kp-wl-page[hidden] {
    display: none !important;
}


/* ───────── 2. Шапка: kicker + H1 + плашка-счётчик ───────── */

body.kp-body .kp-wl-head {
    padding-top: 24px;
    padding-bottom: 12px;
}

body.kp-body .kp-wl-kicker {
    font-size: 13px;
    letter-spacing:normal;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-3);
    margin-bottom: 14px;
}

body.kp-body .kp-wl-title-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

body.kp-body .kp-wl-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    font-weight: 800;
    letter-spacing:normal;
    color: var(--ink);
    margin: 0;
    flex: 0 0 auto;
}

/* Плашка-счётчик «N товаров в списке» — повторяет паттерн .kp-cat-head-count,
 * но в жёлтом (var(--yellow)) — это акцент дизайна для главной CTA-зоны. */
body.kp-body .kp-wl-count {
    background: var(--yellow);
    color: var(--ink);
    border-radius: 12px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

body.kp-body .kp-wl-count-num {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

body.kp-body .kp-wl-count-lbl {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing:normal;
}

body.kp-body .kp-wl-intro {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
}


/* ───────── 3. Действия ───────── */

body.kp-body .kp-wl-actions {
    padding: 8px 0 20px;
}

body.kp-body .kp-wl-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.kp-body .kp-wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    letter-spacing:normal;
    text-decoration: none;
    transition: all .15s;
}

body.kp-body .kp-wl-btn-primary {
    background: var(--ink);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
}

body.kp-body .kp-wl-btn-primary:hover {
    background: var(--yellow);
    color: var(--ink);
}

body.kp-body .kp-wl-btn-primary svg {
    flex: 0 0 auto;
}

body.kp-body .kp-wl-btn-ghost {
    background: transparent;
    color: var(--ink-2);
    padding: 14px 8px;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.kp-body .kp-wl-btn-ghost:hover {
    color: var(--hot);
}

body.kp-body .kp-wl-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}


/* ───────── 4. Сетка — наследует от каталога (.kp-cat-grid из patch-5.1) ───────── */

body.kp-body .kp-wl-grid-sec {
    padding: 12px 0 0;
}

/* На странице избранного нет фильтров/панели сверху — карточки прямо в грид. */
body.kp-body .kp-wl-grid {
    /* Используем те же 4 колонки, что в архиве категории (patch-5.1). */
    /* В patch-5.1 уже задано body.kp-body .kp-cat-page .kp-cat-grid — у нас
     * .kp-wl-page (не .kp-cat-page), поэтому базовая 5-кол. из main.css
     * сработает не так. Дублируем явно. */
    grid-template-columns: repeat(4, 1fr);
}


/* ───────── 5. Пустое состояние ───────── */

body.kp-body .kp-wl-empty {
    padding: 40px 0;
}

body.kp-body .kp-wl-empty-box {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 24px;
}

body.kp-body .kp-wl-empty-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    background: var(--yellow);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
}

body.kp-body .kp-wl-empty-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing:normal;
}

body.kp-body .kp-wl-empty-text {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 28px;
}


/* ───────── 6. Мини-тост (используется и из main.js, и из kp-wishlist.js) ─────────
 * Если стили уже есть в main.css — этот блок их продублирует через :where(),
 * но безопаснее задать здесь — main.js может не быть на странице, а тост
 * нужен.
 *
 * Скоупинг: фикс позицию, обычный стиль тоста. Без !important. */

body.kp-body .kp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    font-weight: 600;
    animation: kp-toast-in .2s ease-out;
}

body.kp-body .kp-toast-t {
    line-height: 1.3;
}

@keyframes kp-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ───────── 7. Адаптив ───────── */

@media (max-width: 980px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    body.kp-body .kp-wl-title-row {
        gap: 16px;
    }
    body.kp-body .kp-wl-title {
        font-size: clamp(28px, 7vw, 40px);
    }
}

@media (max-width: 760px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.kp-body .kp-wl-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
    body.kp-body .kp-wl-btn-primary {
        justify-content: center;
    }
    body.kp-body .kp-wl-btn-ghost {
        text-align: center;
    }
}

@media (max-width: 480px) {
    body.kp-body .kp-wl-grid {
        grid-template-columns: 1fr;
    }
    body.kp-body .kp-wl-count {
        padding: 8px 12px;
    }
    body.kp-body .kp-wl-count-num {
        font-size: 24px;
    }
}


/* ==== kp-patch-79 ==== */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 7.9 — kp-confirm: переиспользуемое модальное подтверждение.
 *
 * Заменяет нативный window.confirm() на красивый модал в стиле K-Promo.
 * Используется в:
 *   • Очистка вишлиста (kp-wishlist.js — программный вызов kpConfirm)
 *   • Очистка корзины (woocommerce/cart/cart.php → .kp-cart-clear с
 *     data-kp-confirm — авто-привязка из kp-confirm.js)
 *   • Любой другой <a>/<button> с data-kp-confirm в будущем.
 *
 * Не требует ни Woodmart, ни jQuery — vanilla, скоупится через ID-классы.
 *
 * Структура DOM (рисуется из kp-confirm.js):
 *   .kp-confirm-backdrop                    — затемнённый фон
 *     .kp-confirm                           — карточка модала
 *       .kp-confirm-title (H3)              — заголовок
 *       .kp-confirm-message (P)             — опциональное описание
 *       .kp-confirm-actions                 — кнопки
 *         .kp-confirm-btn.kp-confirm-btn-cancel  — «Отмена»
 *         .kp-confirm-btn.kp-confirm-btn-ok      — «Подтвердить»
 *
 * Не используем body.kp-body скоуп — модал может всплыть и на не-kp страницах
 * (если когда-нибудь добавим data-kp-confirm на чужой шаблон). Скоуп через
 * собственное имя класса .kp-confirm-* уникально.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── Бэкдроп ───────── */

.kp-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 20px;
    animation: kp-confirm-bd-in .15s ease-out;
}

@keyframes kp-confirm-bd-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ───────── Модал ───────── */

.kp-confirm {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 24px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    animation: kp-confirm-in .18s ease-out;
    box-sizing: border-box;
}

@keyframes kp-confirm-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kp-confirm-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink, #0a0a0a);
    line-height: 1.25;
}

.kp-confirm-message {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2, #555);
}

/* Если message пустой — modal-title должен сохранить нижний отступ перед actions. */
.kp-confirm-title:last-of-type:not(:last-child) ~ .kp-confirm-actions,
.kp-confirm-title + .kp-confirm-actions {
    margin-top: 22px;
}


/* ───────── Кнопки ───────── */

.kp-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.kp-confirm-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 10px;
    transition: background .15s, color .15s, border-color .15s;
    letter-spacing:normal;
}

.kp-confirm-btn:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}

/* Отмена — ghost (без фона, контур). */
.kp-confirm-btn-cancel {
    background: #fff;
    color: var(--ink, #0a0a0a);
    border: 1px solid var(--line, #E5E5E5);
}

.kp-confirm-btn-cancel:hover {
    background: var(--fog, #F7F7F7);
    border-color: var(--ink-3, #8A8A8A);
}

/* Подтвердить — акцент (чёрный → жёлтый на hover, как у .kp-prod-add). */
.kp-confirm-btn-ok {
    background: var(--ink, #0a0a0a);
    color: #fff;
}

.kp-confirm-btn-ok:hover {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}


/* ───────── Мобилка: кнопки во всю ширину, ордер reverse (ok сверху) ───────── */

@media (max-width: 480px) {
    .kp-confirm {
        padding: 22px 20px 18px;
        border-radius: 14px;
    }
    .kp-confirm-title {
        font-size: 18px;
    }
    .kp-confirm-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .kp-confirm-btn {
        width: 100%;
        padding: 14px 22px;
    }
}


/* ==== kp-patch-80 ==== */
/*
 * patch-8.0-tokens.css — ЕДИНЫЙ СЛОЙ ТОКЕНОВ k-promo
 * Канон значений: design-reference/DESIGN-SYSTEM.md (задача D0).
 *
 * Грузится ПОСЛЕДНИМ в каскаде (после main.css и всех patch-*),
 * поэтому переопределяет токены, захардкоженные ранее. Цель — свести
 * переменные дизайн-системы в одно место, а не держать их размазанными
 * по десяткам патчей. По мере причёсывания экранов слой будет расти.
 */
:root {
  /* Жёлтый — брендканон (в main.css было #FFCF02). Задачи D0 / E2. */
  --yellow: #FECE15;
}


/* ==== kp-patch-90 ==== */
/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 9.0: Страница товара (PDP), ядро.
 * ───────────────────────────────────────────────────────────────
 * Кастомный шаблон woocommerce/single-product/content-single-product.php
 * (уводит рендер от дефолта Woodmart). Дизайн — Claude-design:
 *   - левая колонка: галерея (product.css)
 *   - правая колонка: вариант V1 «refined classic» (product-variants.css)
 *
 * Всё скоупится под `body.kp-body .kp-pdp`, веса ≤700, жёлтый = var(--yellow)
 * (канон #FECE15). Токены, которых может не быть в теме, объявлены локально
 * на .kp-pdp (не текут наружу). --yellow / --ink наследуются из темы.
 *
 * Контентный рельс (Описание/Характеристики), секция методов и «Похожие» —
 * следующим заходом (patch-9.1).
 * ─────────────────────────────────────────────────────────────── */

body.kp-body .kp-pdp {
  --paper: #FFFFFF;
  --fog: #F7F7F7;
  --line: #E5E5E5;
  --ink-2: #3D3D3D;
  --ink-3: #8A8A8A;
  --eco: #7CB342;
  --hot: #E74C3C;
  --yellow-hover: #FFD933;
  --yellow-soft: #FFF4B8;
  --radius-lg: 16px;
  --shadow-soft: 0 2px 8px rgba(0,0,0,.06);
  --shadow-card: 0 8px 24px rgba(0,0,0,.10);

  background: var(--paper);
}

/* Контейнер по ширине сайта. Верхний отступ убран в 0 — крошки идут первыми
   и должны ПРИМЫКАТЬ к жёлтому sticky-меню (внутренний отступ крошек 16px даёт
   воздух до текста). Нижний паддинг 0 — отступ под hero даёт margin-bottom
   грид-сетки; контентные полосы держат свой ритм сами (patch-9.1). */
body.kp-body.single-product .wd-content-area { padding-top: 0; }
body.kp-body .kp-pdp-main {
  padding: 0;
}

/* 2 колонки: галерея (уже) + инфо (шире) */
body.kp-body .kp-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px; /* единый ритм: hero → первая полоса (56 + 56 паддинг полосы) */
}
body.kp-body .kp-pdp-grid > .kp-pdp-gallery,
body.kp-body .kp-pdp-grid > .kp-pdp-info { min-width: 0; }

/* галерея sticky на десктопе */
@media (min-width: 1025px) {
  body.kp-body .kp-pdp-gallery { position: sticky; top: 24px; }
}


/* ═══════════════ ГАЛЕРЕЯ (product.css) ═══════════════ */
body.kp-body .kp-pdp .gal { display: flex; flex-direction: column; gap: 16px; }
body.kp-body .kp-pdp .gal-main-wrap {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
body.kp-body .kp-pdp .gal-main { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
body.kp-body .kp-pdp .gal-badges {
  position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column;
  gap: 6px; z-index: 2;
}
body.kp-body .kp-pdp .gal-badge {
  padding: 6px 10px; border-radius: 4px; font-weight: 700; font-size: 11px;
  letter-spacing:normal; text-transform: uppercase; width: fit-content;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
body.kp-body .kp-pdp .gb-new { background: var(--eco); color: #fff; }
body.kp-body .kp-pdp .gb-rus { background: var(--ink); color: var(--yellow); }
body.kp-body .kp-pdp .gb-sale { background: var(--hot); color: #fff; }
body.kp-body .kp-pdp .gb-hit { background: var(--yellow); color: var(--ink); }
body.kp-body .kp-pdp .gal-tools {
  position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column;
  gap: 8px; z-index: 2;
}
body.kp-body .kp-pdp .gal-tool {
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-soft); display: grid; place-items: center;
  color: var(--ink-3); transition: all .15s; border: 0; cursor: pointer;
}
body.kp-body .kp-pdp .gal-tool:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-card); }
body.kp-body .kp-pdp .gal-tool.is-fav { color: var(--hot); }
body.kp-body .kp-pdp .gal-thumbs {
  display: flex; gap: 12px; align-items: center; min-width: 0;
  overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.kp-body .kp-pdp .gal-thumbs::-webkit-scrollbar { height: 6px; }
body.kp-body .kp-pdp .gal-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
body.kp-body .kp-pdp .gal-thumb {
  scroll-snap-align: start; width: 80px; height: 80px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; background: #fff;
  padding: 6px; transition: border-color .15s, transform .15s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.kp-body .kp-pdp .gal-thumb img { width: 100%; height: 100%; object-fit: contain; }
body.kp-body .kp-pdp .gal-thumb:hover { border-color: var(--ink); transform: translateY(-2px); }
body.kp-body .kp-pdp .gal-thumb.is-active { border: 2px solid var(--ink); padding: 5px; }


/* ═══════════════ ПРАВАЯ КОЛОНКА — V1 (product-variants.css) ═══════════════ */
/* На реальной странице .pv — это сама колонка, без карточки-обёртки. */
body.kp-body .kp-pdp .pv { width: auto; background: none; box-shadow: none; padding: 0; border-radius: 0; }
body.kp-body .kp-pdp .pv * { font-feature-settings: "tnum" 0; }

body.kp-body .kp-pdp .pv-brand {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px;
  background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 15px;
  letter-spacing:normal; text-transform: uppercase; margin-bottom: 18px;
}
body.kp-body .kp-pdp .pv-brand svg { color: var(--yellow); }
body.kp-body .kp-pdp a.pv-brand { text-decoration: none; transition: background .15s; }
body.kp-body .kp-pdp a.pv-brand:hover { background: #222; }
body.kp-body .kp-pdp .pv-title {
  margin: 0 0 18px; font-weight: 700; font-size: 30px; line-height: 1.12;
  letter-spacing:normal; color: var(--ink);
}
body.kp-body .kp-pdp .pv-ids { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
body.kp-body .kp-pdp .pv-id { display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; color: var(--ink-3); }
body.kp-body .kp-pdp .pv-id-lbl { font-weight: 500; letter-spacing:normal; }
body.kp-body .kp-pdp .pv-id-val { font-weight: 600; color: var(--ink); letter-spacing:normal; font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-copy {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0;
  border: 0; font-size: 15px; font-weight: 500;
  color: var(--ink-2); transition: color .15s; background: none; cursor: pointer;
}
body.kp-body .kp-pdp .pv-copy:hover { color: var(--ink); }
body.kp-body .kp-pdp .pv-copy.is-done { color: var(--eco); }
body.kp-body .kp-pdp .pv-id-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

body.kp-body .kp-pdp .pv-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; }
body.kp-body .kp-pdp .pv-price-num { font-weight: 700; font-size: 38px; line-height: 1; letter-spacing:normal; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-price-unit { font-size: 15px; font-weight: 500; color: var(--ink-3); }

body.kp-body .kp-pdp .pv-lbl { font-weight: 600; font-size: 15px; letter-spacing:normal; text-transform: uppercase; color: var(--ink-2); }
body.kp-body .kp-pdp .pv-block { margin-bottom: 24px; }
body.kp-body .kp-pdp .pv-rule { height: 1px; background: var(--line); border: 0; margin: 0 0 24px; }

/* цвет — thumbnails */
body.kp-body .kp-pdp .pv-thumb-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
body.kp-body .kp-pdp .pv-thumb-head .pv-cur { font-weight: 600; font-size: 15px; color: var(--ink); }
body.kp-body .kp-pdp .pv-thumb-head .pv-mut { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-thumb-dot { color: var(--ink-3); }
body.kp-body .kp-pdp .pv-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-thumb {
  width: 76px; height: 76px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff;
  padding: 6px; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s;
}
body.kp-body .kp-pdp .pv-thumb:hover { border-color: var(--ink-3); transform: translateY(-2px); }
body.kp-body .kp-pdp .pv-thumb.is-on { border: 2px solid var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); padding: 5.5px; }
body.kp-body .kp-pdp .pv-thumb-vis { width: 100%; height: 100%; border-radius: 8px; background: var(--fog); overflow: hidden; display: grid; place-items: center; }
body.kp-body .kp-pdp .pv-thumb-vis img { width: 100%; height: 100%; object-fit: contain; }

body.kp-body .kp-pdp .pv-pantone { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; background: var(--fog); border-radius: 10px; }
body.kp-body .kp-pdp .pv-pantone-chip { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
body.kp-body .kp-pdp .pv-pantone-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.kp-body .kp-pdp .pv-pantone-code { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing:normal; }
body.kp-body .kp-pdp .pv-pantone-sub { font-size: 15px; color: var(--ink-3); font-weight: 500; }

/* методы — плитки 2×2 */
body.kp-body .kp-pdp .pv-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.kp-body .kp-pdp .pv-method { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: all .15s; }
body.kp-body .kp-pdp .pv-method:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
body.kp-body .kp-pdp .pv-mglyph { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); flex-shrink: 0; display: grid; place-items: center; }
body.kp-body .kp-pdp .pv-mglyph svg { width: 24px; height: 24px; }
body.kp-body .kp-pdp .pv-method-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.kp-body .kp-pdp .pv-method-nm { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.15; }

/* наличие */
body.kp-body .kp-pdp .pv-avail { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-avail-cell { flex: 1; min-width: 96px; background: var(--fog); border-radius: 10px; padding: 10px 12px; }
body.kp-body .kp-pdp .pv-avail-k { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-bottom: 2px; }
body.kp-body .kp-pdp .pv-avail-v { font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-avail-v.is-zero { color: var(--ink-3); }

/* тираж + сумма */
body.kp-body .kp-pdp .pv-qty { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-qty-l { display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .pv-stepper { display: inline-flex; align-items: stretch; height: 56px; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; }
body.kp-body .kp-pdp .pv-step-btn { width: 54px; display: grid; place-items: center; background: var(--fog); color: var(--ink); transition: background .14s; border: 0; cursor: pointer; }
body.kp-body .kp-pdp .pv-step-btn:hover { background: var(--yellow); }
body.kp-body .kp-pdp .pv-step-btn:disabled { color: var(--ink-3); background: #fff; cursor: not-allowed; }
body.kp-body .kp-pdp .pv-step-input { width: 92px; border: 0; outline: 0; text-align: center; font-weight: 700; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; background: transparent; }
body.kp-body .kp-pdp .pv-step-hint { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-step-hint b { font-weight: 600; color: var(--ink-2); }
body.kp-body .kp-pdp .pv-qty-sum { text-align: right; }
body.kp-body .kp-pdp .pv-qty-sum-cap { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-bottom: 3px; }
body.kp-body .kp-pdp .pv-qty-sum-num { font-weight: 700; font-size: 26px; color: var(--ink); letter-spacing:normal; font-variant-numeric: tabular-nums; line-height: 1; }

/* CTA */
body.kp-body .kp-pdp .pv-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
body.kp-body .kp-pdp .pv-btn { height: 54px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing:normal; text-transform: uppercase; transition: all .15s; border: 0; cursor: pointer; }
body.kp-body .kp-pdp .pv-btn-cart { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.kp-body .kp-pdp .pv-btn-cart:hover { background: var(--ink); color: #fff; }
body.kp-body .kp-pdp .pv-btn-cart.is-added { background: var(--eco); color: #fff; box-shadow: none; }
body.kp-body .kp-pdp .pv-btn-print { background: var(--yellow); color: var(--ink); }
body.kp-body .kp-pdp .pv-btn-print:hover { background: var(--yellow-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* факты */
body.kp-body .kp-pdp .pv-facts { display: flex; flex-direction: column; }
body.kp-body .kp-pdp .pv-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
body.kp-body .kp-pdp .pv-fact:first-child { border-top: 1px solid var(--line); }
body.kp-body .kp-pdp .pv-fact-k { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-fact-v { font-weight: 600; font-size: 15px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* склад-плашка */
body.kp-body .kp-pdp .pv-stock { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; background: rgba(124,179,66,.12); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); }
body.kp-body .kp-pdp .pv-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--eco); box-shadow: 0 0 0 4px rgba(124,179,66,.22); }
body.kp-body .kp-pdp .pv-stock b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* консультация */
body.kp-body .kp-pdp .pv-consult { margin-top: 20px; padding: 18px; background: var(--fog); border-radius: 14px; }
body.kp-body .kp-pdp .pv-consult-h { margin: 0 0 12px; font-weight: 600; font-size: 16px; color: var(--ink); }
body.kp-body .kp-pdp .pv-consult-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
body.kp-body .kp-pdp .pv-consult-line { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
body.kp-body .kp-pdp .pv-consult-line svg { color: var(--ink-2); }
body.kp-body .kp-pdp .pv-consult-msgs { display: flex; gap: 8px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-msg { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: all .15s; }
body.kp-body .kp-pdp .pv-msg:hover { transform: translateY(-1px); border-color: var(--ink); }
body.kp-body .kp-pdp .pv-msg img { width: 22px; height: 22px; display: block; border-radius: 6px; }


/* ═══════════════ Адаптив ═══════════════ */
@media (max-width: 1024px) {
  body.kp-body .kp-pdp-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  body.kp-body .kp-pdp .pv-title { font-size: 24px; }
  body.kp-body .kp-pdp .pv-price-num { font-size: 32px; }
  body.kp-body .kp-pdp .pv-methods-grid { grid-template-columns: 1fr; }
  body.kp-body .kp-pdp .pv-ctas { grid-template-columns: 1fr; }
  /* поле ввода — 16px, чтобы iOS не зумил */
  body.kp-body .kp-pdp .pv-step-input { font-size: 18px; }
}


/* ==== kp-patch-91 ==== */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.1 — Страница товара: контентные секции.
   Источник: Claude-design product.css (.det / .ov).
   Два блока, каждый — 2 колонки, правая колонка STICKY:
     Блок 1: Описание (слева) | Характеристики (справа, sticky)
     Блок 2: Доставка и оплата (слева, стопкой) | Упаковка (справа, sticky)
   Полноширинные полосы (full-bleed), чередование фона paper/fog, тонкие
   линии-разделители. Заголовки БЕЗ номеров, без рамок-карточек.
   Текст — ЧЁРНЫЙ (без серого). НЕТ letter-spacing; жирность ≤ 700.
   Токены из patch-9.0 (.kp-pdp: --ink, --fog, --line, --yellow…).
   ════════════════════════════════════════════════════════════════════ */

/* ── полоса-секция: во всю ширину, чередование фона, линия сверху ── */
body.kp-body .kp-pdp .kp-det {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
body.kp-body .kp-pdp .kp-det--alt { background: var(--fog); }

body.kp-body .kp-pdp .kp-det-h {
  font-weight: 700; font-size: 28px; line-height: 1.1;
  text-transform: uppercase; margin: 0; color: var(--ink);
}
body.kp-body .kp-pdp .kp-det-bar {
  display: block; width: 48px; height: 3px;
  background: var(--yellow); border-radius: 0; margin: 12px 0 24px;
}

/* ── 2-колоночный блок: контент слева | правая колонка sticky ── */
body.kp-body .kp-pdp .kp-det2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
body.kp-body .kp-pdp .kp-det2-main { min-width: 0; }
body.kp-body .kp-pdp .kp-det2-aside {
  min-width: 0; align-self: start; position: sticky; top: 24px;
}
body.kp-body .kp-pdp .kp-aside-h {
  font-weight: 700; font-size: 18px; line-height: 1.1;
  text-transform: uppercase; margin: 0; color: var(--ink);
}

/* ── описание (лид + контент поставщика), ЧЁРНЫЙ, 16/1.65, pretty ── */
body.kp-body .kp-pdp .kp-ov-lead {
  font-size: 16px; line-height: 1.65; color: var(--ink); text-wrap: pretty;
}
body.kp-body .kp-pdp .kp-ov-lead > :first-child { margin-top: 0; }
body.kp-body .kp-pdp .kp-ov-lead > :last-child { margin-bottom: 0; }
body.kp-body .kp-pdp .kp-ov-lead p { margin: 0 0 14px; }
body.kp-body .kp-pdp .kp-ov-lead a { color: var(--ink); border-bottom: 1px solid var(--yellow); }
body.kp-body .kp-pdp .kp-ov-lead ul,
body.kp-body .kp-pdp .kp-ov-lead ol,
body.kp-body .kp-pdp .kp-ov-lead ul.list {
  margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px;
}
body.kp-body .kp-pdp .kp-ov-lead li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start; }
body.kp-body .kp-pdp .kp-ov-lead li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); margin-top: 9px; flex-shrink: 0; }
body.kp-body .kp-pdp .kp-ov-lead table { border-collapse: collapse; width: 100%; margin: 10px 0 14px; font-size: 13px; }
body.kp-body .kp-pdp .kp-ov-lead td, body.kp-body .kp-pdp .kp-ov-lead th { border: 1px solid var(--line); padding: 6px 8px; text-align: center; color: var(--ink); }
body.kp-body .kp-pdp .kp-ov-lead img { max-width: 100%; height: auto; }
body.kp-body .kp-pdp .kp-ov-lead b, body.kp-body .kp-pdp .kp-ov-lead strong { font-weight: 600; }

/* ── список характеристик / упаковки: • <b>Ключ</b> — значение ── */
body.kp-body .kp-pdp .kp-charlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.kp-body .kp-pdp .kp-charlist li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start;
  font-size: 16px; line-height: 1.55; color: var(--ink);
}
body.kp-body .kp-pdp .kp-charlist li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); margin-top: 8px; flex-shrink: 0; }
body.kp-body .kp-pdp .kp-charlist b { font-weight: 600; }

/* ── Доставка и оплата: стопкой (Доставка, ниже Оплата) ── */
body.kp-body .kp-pdp .kp-deliv-stack { display: flex; flex-direction: column; gap: 26px; max-width: 620px; }
body.kp-body .kp-pdp .kp-deliv-h {
  margin: 0 0 10px; font-weight: 600; font-size: 15px; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
}
body.kp-body .kp-pdp .kp-deliv-h svg { color: var(--ink); }
body.kp-body .kp-pdp .kp-deliv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .kp-deliv-list li { display: grid; grid-template-columns: auto 1fr; gap: 11px; font-size: 15px; line-height: 1.55; color: var(--ink); }
body.kp-body .kp-pdp .kp-deliv-list li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); margin-top: 8px; flex-shrink: 0; }
body.kp-body .kp-pdp .kp-deliv-list b { font-weight: 600; color: var(--ink); }

body.kp-body .kp-pdp .kp-pack-note { margin: 14px 0 0; font-size: 14px; color: var(--ink); line-height: 1.5; }

/* ── «Как мы работаем»: 5 шагов-карточек со стрелками-связками ──
   Источник: product.css .process-*. Адаптировано под канон: вес ≤700,
   БЕЗ letter-spacing, острые углы (без скруглений). */
body.kp-body .kp-pdp .kp-process-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  position: relative; align-items: stretch;
}
body.kp-body .kp-pdp .kp-process-step {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px;
  min-height: 196px; transition: border-color .18s, box-shadow .18s, transform .18s;
}
body.kp-body .kp-pdp .kp-process-step:hover {
  border-color: var(--ink); box-shadow: var(--shadow-card); transform: translateY(-2px);
}
body.kp-body .kp-pdp .kp-process-num {
  font-weight: 700; font-size: 30px; line-height: 1; color: var(--yellow);
  font-feature-settings: "tnum";
}
body.kp-body .kp-pdp .kp-process-icon {
  width: 40px; height: 40px; background: var(--fog); color: var(--ink);
  border-radius: 8px; display: grid; place-items: center;
}
body.kp-body .kp-pdp .kp-process-name {
  margin: 0; font-weight: 700; font-size: 14px; line-height: 1.25;
  text-transform: uppercase; color: var(--ink);
}
body.kp-body .kp-pdp .kp-process-desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink);
}
/* стрелка-связка между шагами: БЕЛЫЙ круг с ЖЁЛТОЙ стрелкой (без жёлтого
   круга и без обводки), лежит в зазоре; мягкая тень для лёгкого подъёма */
body.kp-body .kp-pdp .kp-process-arrow {
  position: absolute; right: -18px; top: 36px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--yellow);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
body.kp-body .kp-pdp .kp-process-arrow svg { width: 20px; height: 20px; }
body.kp-body .kp-pdp .kp-process-step:last-child .kp-process-arrow { display: none; }

/* ── Частые вопросы: аккордеон (single-open), без letter-spacing ──
   Источник: styles.css .faq-*. Острые углы, текст чёрный, фон-плитка
   контрастирует с полосой (на белой полосе — fog, на fog — paper). */
body.kp-body .kp-pdp .kp-faq { display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .kp-faq-item {
  background: var(--fog); border: 1px solid transparent; overflow: hidden;
  transition: background .18s, border-color .18s;
}
body.kp-body .kp-pdp .kp-det--alt .kp-faq-item { background: var(--paper); border-color: var(--line); }
body.kp-body .kp-pdp .kp-faq-item.is-open,
body.kp-body .kp-pdp .kp-det--alt .kp-faq-item.is-open { background: var(--yellow-soft); border-color: var(--yellow); }
body.kp-body .kp-pdp .kp-faq-q {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 18px 22px; font: inherit; color: var(--ink);
}
body.kp-body .kp-pdp .kp-faq-num { font-weight: 700; font-size: 14px; color: var(--ink-3); font-feature-settings: "tnum"; }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-num { color: var(--ink); }
body.kp-body .kp-pdp .kp-faq-qtext { font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--ink); }
body.kp-body .kp-pdp .kp-faq-toggle {
  position: relative; width: 28px; height: 28px; flex-shrink: 0;
  background: var(--paper); border: 1px solid var(--line);
}
body.kp-body .kp-pdp .kp-faq-toggle::before,
body.kp-body .kp-pdp .kp-faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink);
  transform: translate(-50%, -50%);
}
body.kp-body .kp-pdp .kp-faq-toggle::before { width: 12px; height: 2px; }   /* горизонталь (всегда) */
body.kp-body .kp-pdp .kp-faq-toggle::after  { width: 2px; height: 12px; }   /* вертикаль → исчезает при open */
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-toggle { background: var(--ink); border-color: var(--ink); }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-toggle::before { background: var(--yellow); }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-toggle::after { display: none; }
body.kp-body .kp-pdp .kp-faq-a-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
body.kp-body .kp-pdp .kp-faq-item.is-open .kp-faq-a-wrap { max-height: 600px; }
body.kp-body .kp-pdp .kp-faq-a { margin: 0; padding: 0 22px 22px 56px; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* ── Похожие товары: сетка карточек .kp-prod (5 в ряд) ── */
body.kp-body .kp-pdp .kp-sim-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

/* ── адаптив: на узких — одна колонка, sticky выключаем ── */
@media (max-width: 1024px) {
  body.kp-body .kp-pdp .kp-sim-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  body.kp-body .kp-pdp .kp-det { padding: 40px 0; }
  body.kp-body .kp-pdp .kp-det-h { font-size: 22px; }
  body.kp-body .kp-pdp .kp-det2 { grid-template-columns: 1fr; gap: 32px; }
  body.kp-body .kp-pdp .kp-det2-aside { position: static; top: auto; }
  body.kp-body .kp-pdp .kp-process-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  body.kp-body .kp-pdp .kp-process-step { min-height: 0; }
  body.kp-body .kp-pdp .kp-process-arrow { display: none; }
}
@media (max-width: 700px) {
  body.kp-body .kp-pdp .kp-sim-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.kp-body .kp-pdp .kp-faq-q { padding: 16px; gap: 12px; }
  body.kp-body .kp-pdp .kp-faq-qtext { font-size: 16px; }
  body.kp-body .kp-pdp .kp-faq-a { padding: 0 16px 16px 44px; font-size: 15px; }
}
@media (max-width: 560px) {
  body.kp-body .kp-pdp .kp-process-row { grid-template-columns: 1fr; }
}


/* ==== kp-patch-92 ==== */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.2 — Хлебные крошки: ЕДИНЫЙ компонент для всего сайта.
   Источник: Claude-design nav.crumbs — серые ссылки (#3D3D3D) +
   жёлтая точка-разделитель «•». Рендер — kp_render_crumbs() (inc/helpers.php),
   используется на странице товара, категории, коллекции, вишлиста.
   Кладётся ВНУТРЬ .kp-container (выравнивание по контенту).
   Без letter-spacing; вес ≤ 600.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 0; font-size: 17px; line-height: 1.3;
}
body.kp-body .kp-crumbs-link {
  color: var(--ink-2, #3D3D3D); text-decoration: none; transition: color .15s;
}
body.kp-body .kp-crumbs-link:hover { color: var(--ink, #0A0A0A); }
body.kp-body .kp-crumbs-sep {
  color: var(--yellow); font-size: 24px; line-height: 1;
}
body.kp-body .kp-crumbs-cur { color: var(--ink, #0A0A0A); }

@media (max-width: 700px) {
  body.kp-body .kp-crumbs { font-size: 15px; gap: 8px; padding: 12px 0; }
  body.kp-body .kp-crumbs-sep { font-size: 20px; }
}


/* ==== kp-patch-93 ==== */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.3 — Модалка «Рассчитать тираж» (обратный звонок).
   Дизайн: проект Omlet (скриншот). Белая карточка со скруглением, поля
   с рамкой, чёрная кнопка-пилюля, снизу мессенджеры. БЕЗ letter-spacing.
   Скоуп — body.kp-body .kp-cm-*. Рендер — inc/callback-modal.php (wp_footer).
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-cm-scrim {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(10, 10, 10, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
body.kp-body .kp-cm-scrim[hidden] { display: none; }

body.kp-body .kp-cm-card {
  position: relative; width: 100%; max-width: 520px;
  background: #fff; border-radius: 22px; padding: 36px 36px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
body.kp-body .kp-cm-x {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: #F0F0F0; color: #0A0A0A;
  display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
body.kp-body .kp-cm-x:hover { background: #E2E2E2; }

body.kp-body .kp-cm-h {
  margin: 0 0 8px; font-size: 32px; font-weight: 700; line-height: 1.1; color: #0A0A0A;
}
body.kp-body .kp-cm-lead {
  margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: #6B6B6B; max-width: 92%;
}

body.kp-body .kp-cm-field { display: block; margin-bottom: 16px; }
body.kp-body .kp-cm-lbl {
  display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: #0A0A0A;
}
body.kp-body .kp-cm-lbl em { color: var(--yellow, #FECE15); font-style: normal; }
body.kp-body .kp-cm-field input[type="text"],
body.kp-body .kp-cm-field textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid #E2E2E2; border-radius: 12px;
  padding: 14px 16px; font-size: 16px; font-family: inherit; color: #0A0A0A; background: #fff;
  transition: border-color .15s;
}
body.kp-body .kp-cm-field input::placeholder,
body.kp-body .kp-cm-field textarea::placeholder { color: #9A9A9A; }
body.kp-body .kp-cm-field input:focus,
body.kp-body .kp-cm-field textarea:focus { outline: none; border-color: #0A0A0A; }
body.kp-body .kp-cm-field textarea { resize: vertical; min-height: 84px; }

/* drop-зона «прикрепить макет» */
body.kp-body .kp-cm-drop {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px dashed #CFCFCF; border-radius: 12px; padding: 14px 16px; color: #6B6B6B;
  transition: border-color .15s, background .15s;
}
body.kp-body .kp-cm-drop:hover { border-color: #0A0A0A; background: #FAFAFA; }
body.kp-body .kp-cm-drop svg { flex-shrink: 0; color: #0A0A0A; }
body.kp-body .kp-cm-drop-text { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
body.kp-body .kp-cm-drop-text b { font-weight: 600; color: #0A0A0A; font-size: 14px; }
body.kp-body .kp-cm-drop-text span { color: #9A9A9A; }
body.kp-body .kp-cm-file { margin-top: 8px; font-size: 13px; color: #0A0A0A; word-break: break-all; }

body.kp-body .kp-cm-agree {
  display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px;
  font-size: 13px; line-height: 1.45; color: #6B6B6B; cursor: pointer;
}
body.kp-body .kp-cm-agree input { margin-top: 2px; width: 18px; height: 18px; accent-color: #0A0A0A; flex-shrink: 0; }
body.kp-body .kp-cm-agree a { color: #0A0A0A; text-decoration: underline; }

body.kp-body .kp-cm-submit {
  width: 100%; border: 0; border-radius: 14px; background: #0A0A0A; color: #fff;
  font-size: 16px; font-weight: 600; padding: 17px; cursor: pointer; transition: background .15s;
}
body.kp-body .kp-cm-submit:hover { background: #222; }
body.kp-body .kp-cm-submit:disabled { opacity: .6; cursor: default; }

body.kp-body .kp-cm-status { margin-top: 12px; font-size: 14px; line-height: 1.4; }
body.kp-body .kp-cm-status.is-ok { color: #2E7D32; }
body.kp-body .kp-cm-status.is-err { color: #C62828; }

body.kp-body .kp-cm-msgs { display: flex; gap: 10px; margin-top: 16px; }
body.kp-body .kp-cm-msg {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid #E2E2E2; border-radius: 12px; padding: 11px; font-size: 14px; font-weight: 500;
  color: #0A0A0A; text-decoration: none; transition: border-color .15s, background .15s;
}
body.kp-body .kp-cm-msg:hover { border-color: #0A0A0A; background: #FAFAFA; }
body.kp-body .kp-cm-msg img { width: 20px; height: 20px; }

@media (max-width: 560px) {
  body.kp-body .kp-cm-card { padding: 28px 20px 22px; border-radius: 18px; }
  body.kp-body .kp-cm-h { font-size: 26px; }
  body.kp-body .kp-cm-msg span { display: none; }
}


/* ==== kp-patch-94 ==== */
/* ════════════════════════════════════════════════════════════════════
   PATCH 9.4 — Таблица заказа товара (.kp-order).
   Эталон: kpromo-order-table.html (Nick). Матрица размеров со стоком/ценой
   на строку, степпер без рамки, итог + 2 кнопки. Цена на строку + бейдж +N ₽.
   Скоуп — body.kp-body .kp-pdp .kp-order. Шрифты наследуем от страницы.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-pdp .kp-order {
  --kp-ink:#16130C; --kp-accent:var(--yellow,#FECE15); --kp-surface:#FAF9F4;
  --kp-line:#EBE9E1; --kp-muted:#8C887D; --kp-danger:#C8442B; --kp-rctrl:11px;
  color:var(--kp-ink); width:100%;
}
body.kp-body .kp-pdp .kp-order * { box-sizing:border-box; }
body.kp-body .kp-pdp .kp-order .kp-num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ── Таблица ── */
body.kp-body .kp-pdp .kp-order .kp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.kp-body .kp-pdp .kp-matrix { width:100%; border-collapse:collapse; }
body.kp-body .kp-pdp .kp-matrix th { text-align:right; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--kp-muted); font-weight:600; padding:0 0 10px; border-bottom:1px solid var(--kp-line); white-space:nowrap; }
body.kp-body .kp-pdp .kp-matrix th.left, body.kp-body .kp-pdp .kp-matrix td.left { text-align:left; }
body.kp-body .kp-pdp .kp-matrix td { padding:12px 0; text-align:right; font-size:15px; border-bottom:1px solid var(--kp-line); vertical-align:middle; white-space:nowrap; }
body.kp-body .kp-pdp .kp-matrix tbody tr:last-child td { border-bottom:0; }
body.kp-body .kp-pdp .kp-matrix td.left { font-weight:700; }
body.kp-body .kp-pdp .kp-matrix tbody tr:hover td { background:var(--kp-surface); }
body.kp-body .kp-pdp .kp-matrix th:not(.left), body.kp-body .kp-pdp .kp-matrix td:not(.left) { padding-left:14px; }
body.kp-body .kp-pdp .kp-size-stock.low { color:var(--kp-danger); }
body.kp-body .kp-pdp .kp-size-out { color:var(--kp-muted); }

/* ── Цена + дельта ── */
body.kp-body .kp-pdp .kp-price.diff { font-weight:700; color:var(--kp-ink); }
body.kp-body .kp-pdp .kp-delta { display:inline-block; font-size:11px; font-weight:700; line-height:1; padding:3px 7px; margin-left:7px; border-radius:999px; background:rgba(254,206,21,.22); color:var(--kp-ink); vertical-align:middle; }

/* ── Степпер (без рамки, чёрные кружки −/+) ── */
body.kp-body .kp-pdp .kp-stepper { display:inline-flex; align-items:center; gap:10px; }
body.kp-body .kp-pdp .kp-stepper button { flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%; background:var(--kp-ink); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
body.kp-body .kp-pdp .kp-stepper button:hover:not(:disabled) { background:var(--kp-accent); color:var(--kp-ink); }
body.kp-body .kp-pdp .kp-stepper button:disabled { background:#EBE9E1; color:#fff; cursor:not-allowed; }
body.kp-body .kp-pdp .kp-stepper button svg { width:11px; height:11px; display:block; }
body.kp-body .kp-pdp .kp-qty { width:78px; border:0; text-align:center; font-size:19px; font-weight:800; color:var(--kp-ink); background:transparent; -moz-appearance:textfield; appearance:textfield; padding:0; }
body.kp-body .kp-pdp .kp-qty::-webkit-inner-spin-button, body.kp-body .kp-pdp .kp-qty::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; display:none; }
body.kp-body .kp-pdp .kp-qty:focus { outline:0; }
body.kp-body .kp-pdp .kp-stepper.is-disabled { opacity:.45; }

/* ── Подсказки ── */
body.kp-body .kp-pdp .kp-order-hint { font-size:12.5px; color:var(--kp-muted); margin-top:12px; }
body.kp-body .kp-pdp .kp-order-hint.warn { color:var(--kp-danger); }
body.kp-body .kp-pdp .kp-order-note { font-size:12.5px; color:var(--kp-muted); margin-top:6px; }

/* ── Итого ── */
body.kp-body .kp-pdp .kp-order .kp-summary { display:flex; align-items:baseline; justify-content:space-between; gap:16px; background:var(--kp-surface); border-radius:var(--kp-rctrl); padding:14px 16px; margin:16px 0 18px; }
body.kp-body .kp-pdp .kp-summary .s-lbl { font-size:13px; color:var(--kp-muted); }
body.kp-body .kp-pdp .kp-summary .s-qty { font-weight:700; }
body.kp-body .kp-pdp .kp-summary .s-total { font-size:26px; font-weight:800; letter-spacing:-.01em; }

/* ── Кнопки ── */
body.kp-body .kp-pdp .kp-order .kp-actions { display:flex; gap:12px; }
body.kp-body .kp-pdp .kp-actions button, body.kp-body .kp-pdp .kp-actions a { flex:1; height:54px; border-radius:var(--kp-rctrl); font-size:15px; font-weight:700; cursor:pointer; transition:filter .15s, background .15s, color .15s; border:1.5px solid var(--kp-ink); display:flex; align-items:center; justify-content:center; text-decoration:none; }
body.kp-body .kp-pdp .kp-btn-cart { background:#fff; color:var(--kp-ink); }
body.kp-body .kp-pdp .kp-btn-cart:hover, body.kp-body .kp-pdp .kp-btn-cart.is-added { background:var(--kp-ink); color:#fff; }
body.kp-body .kp-pdp .kp-btn-primary { background:var(--kp-accent); color:var(--kp-ink); border-color:var(--kp-accent); }
body.kp-body .kp-pdp .kp-btn-primary:hover { filter:brightness(.95); }

@media (max-width:480px) {
  body.kp-body .kp-pdp .kp-order .kp-actions { flex-direction:column; }
  body.kp-body .kp-pdp .kp-summary .s-total { font-size:22px; }
}

/* ════════════════════════════════════════════════════════════════════
   ПЕРЕБИВКА темы Woodmart — она агрессивно стилизует любые <button>/<a>
   (раздувает степперы в чёрные круги, красит кнопки). Бьём !important.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-pdp .kp-order .kp-stepper button {
  width:30px !important; height:30px !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important; border-radius:50% !important;
  background:var(--kp-ink) !important; color:#fff !important; box-shadow:none !important;
  line-height:1 !important; letter-spacing:0 !important; text-transform:none !important; font-size:0 !important;
}
body.kp-body .kp-pdp .kp-order .kp-stepper button:hover:not(:disabled) { background:var(--kp-accent) !important; color:var(--kp-ink) !important; }
body.kp-body .kp-pdp .kp-order .kp-stepper button:disabled { background:#EBE9E1 !important; color:#fff !important; }
body.kp-body .kp-pdp .kp-order .kp-stepper button svg { width:11px !important; height:11px !important; display:block !important; }
body.kp-body .kp-pdp .kp-order .kp-stepper .kp-qty { width:78px !important; box-shadow:none !important; }

body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart,
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-primary {
  height:54px !important; border-radius:var(--kp-rctrl) !important; min-width:0 !important;
  text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; font-size:15px !important; font-weight:700 !important;
}
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart { background:#fff !important; color:var(--kp-ink) !important; border:1.5px solid var(--kp-ink) !important; }
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart:hover,
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-cart.is-added { background:var(--kp-ink) !important; color:#fff !important; }
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-primary { background:var(--kp-accent) !important; color:var(--kp-ink) !important; border:1.5px solid var(--kp-accent) !important; }
body.kp-body .kp-pdp .kp-order .kp-actions .kp-btn-primary:hover { filter:brightness(.95) !important; }


/* ==== kp-patch-95 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.5-contacts.css — Страница «Контакты» (/kontakty/, page-kontakty.php)
 *
 * Скоуп строго body.kp-body .kp-contacts-* — в WC/Woodmart не утекает.
 * Цвета/шрифт — токены дизайн-системы с fallback (как patch-6.7): если токен
 * в main.css есть, берётся он (единый стиль); если нет — разумный дефолт.
 * Заголовок H1 наследует .kp-cat-head-title (тот же, что на категориях) —
 * здесь его не переопределяем. Брейкпоинты: 1240 / 980 / 760 / 480.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Лид под H1 — 18px, ширина по контейнеру (унификация, правка Николая 16.06).
   Размер/ширина лида сведены к единому виду в patch-9.7; здесь держим цвет/интервал. ── */
body.kp-body .kp-contacts .kp-cat-head-lead {
    max-width: none;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2, #3D3D3D);
}

/* ── H2 секций (Реквизиты / Как добраться) — UPPERCASE 600, как H2 ДС ── */
body.kp-body .kp-contacts-h2 {
    font-weight: 600;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink, #0A0A0A);
}

/* ════ 3. КАНАЛЫ + ФОРМА ════════════════════════════════════════════════════ */
body.kp-body .kp-contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    padding: 8px 0 64px;
}

/* ── список каналов ── */
body.kp-body .kp-contacts-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-contacts-row {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-contacts-ic {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--fog, #F7F7F7);
    color: var(--ink, #0A0A0A);
    display: grid;
    place-items: center;
}
body.kp-body .kp-contacts-ic svg { width: 22px; height: 22px; display: block; }
body.kp-body .kp-contacts-k {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    margin-bottom: 4px;
}
body.kp-body .kp-contacts-v {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink, #0A0A0A);
}
body.kp-body a.kp-contacts-v:hover { color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-v-sm { font-size: 17px; font-weight: 600; }
body.kp-body .kp-contacts-sub {
    font-size: 13px;
    color: var(--ink-3, #8A8A8A);
    margin-top: 3px;
}
body.kp-body .kp-contacts-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
body.kp-body .kp-contacts-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px var(--ink, #0A0A0A);
    color: var(--ink, #0A0A0A);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    transition: .15s;
}
body.kp-body .kp-contacts-chip:hover { background: var(--yellow, #FECE15); }

/* ── форма заявки ── */
body.kp-body .kp-contacts-formwrap {
    background: var(--fog, #F7F7F7);
    border-radius: 12px;
    padding: 34px;
}
body.kp-body .kp-contacts-formhead {
    font-weight: 600;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-contacts-formlead {
    margin: 8px 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2, #3D3D3D);
}
body.kp-body .kp-contacts-field { display: block; margin-bottom: 16px; }
body.kp-body .kp-contacts-lbl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink, #0A0A0A);
    margin-bottom: 7px;
}
body.kp-body .kp-contacts-lbl em { color: var(--yellow, #FECE15); font-style: normal; }
body.kp-body .kp-contacts-form input,
body.kp-body .kp-contacts-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    padding: 14px 15px;
    border: 1px solid var(--line, #E5E5E5);
    border-radius: 8px;
    background: var(--paper, #FFFFFF);
    color: var(--ink, #0A0A0A);
    transition: .15s;
}
body.kp-body .kp-contacts-form textarea { min-height: 100px; resize: vertical; }
body.kp-body .kp-contacts-form input::placeholder,
body.kp-body .kp-contacts-form textarea::placeholder { color: var(--ink-3, #8A8A8A); }
body.kp-body .kp-contacts-form input:focus,
body.kp-body .kp-contacts-form textarea:focus { outline: none; border-color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-agree {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 6px 0 20px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-2, #3D3D3D);
}
body.kp-body .kp-contacts-agree input { width: auto; margin-top: 2px; accent-color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-agree a { text-decoration: underline; text-decoration-color: var(--yellow, #FECE15); text-decoration-thickness: 2px; text-underline-offset: 2px; }
body.kp-body .kp-contacts-submit {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 8px;
    background: var(--yellow, #FECE15);
    color: var(--ink, #0A0A0A);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .15s;
}
body.kp-body .kp-contacts-submit:hover { filter: brightness(1.04); transform: translateY(-1px); }
body.kp-body .kp-contacts-submit:active { transform: scale(.98); }
body.kp-body .kp-contacts-submit:disabled { opacity: .7; cursor: default; transform: none; }
body.kp-body .kp-contacts-status { margin-top: 12px; font-size: 14px; font-weight: 600; }
body.kp-body .kp-contacts-status.is-ok { color: #1a7a3c; }
body.kp-body .kp-contacts-status.is-err { color: #c2371f; }
body.kp-body .kp-contacts-note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-3, #8A8A8A); }

/* ════ 4. РЕКВИЗИТЫ — светлая подложка (читаемо, в общем стиле) ═══════════════ */
body.kp-body .kp-contacts-req { padding: 8px 0 56px; }
body.kp-body .kp-req-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;
    margin-top: 24px;
}
body.kp-body .kp-req-k {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    margin-bottom: 5px;
}
body.kp-body .kp-req-v { font-size: 17px; font-weight: 600; color: var(--ink, #0A0A0A); }
body.kp-body .kp-req-actions { margin-top: 32px; }
body.kp-body .kp-req-pdf {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 50px;
    padding: 0 24px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px var(--ink, #0A0A0A);
    color: var(--ink, #0A0A0A);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    transition: .15s;
}
body.kp-body .kp-req-pdf:hover { background: var(--yellow, #FECE15); color: var(--ink, #0A0A0A); }
body.kp-body .kp-req-pdf svg { width: 18px; height: 18px; }

/* ════ 5. КАРТА — во всю ширину окна (full-bleed) ════════════════════════════ */
body.kp-body .kp-contacts-map { padding: 8px 0 0; }
body.kp-body .kp-contacts-ori { margin-top: 2px; font-size: 15px; color: var(--ink-2, #3D3D3D); }
body.kp-body .kp-contacts-map-actions { margin: 16px 0 26px; }
body.kp-body .kp-contacts-route {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    background: var(--ink, #0A0A0A);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    transition: .15s;
}
body.kp-body .kp-contacts-route:hover { background: var(--yellow, #FECE15); color: var(--ink, #0A0A0A); }
body.kp-body .kp-contacts-route svg { width: 18px; height: 18px; }
body.kp-body .kp-contacts-map-embed {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: clamp(320px, 42vw, 460px);
    border-top: 1px solid var(--line, #E5E5E5);
}
body.kp-body .kp-contacts-map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ════ АДАПТИВ ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    body.kp-body .kp-contacts-grid { gap: 40px; }
    body.kp-body .kp-req-grid { gap: 22px 28px; }
}
@media (max-width: 760px) {
    body.kp-body .kp-contacts-grid { grid-template-columns: 1fr; gap: 36px; }
    body.kp-body .kp-req-grid { grid-template-columns: 1fr 1fr; }
    body.kp-body .kp-contacts-formwrap { padding: 26px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-req-grid { grid-template-columns: 1fr; }
    body.kp-body .kp-contacts-v { font-size: 18px; }
    body.kp-body .kp-contacts-row { gap: 14px; }
}


/* ==== kp-patch-96 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.6-doc.css — Типографика контентных/юридических страниц (.kp-prose)
 *
 * Шаблон templates/page-kpromo-doc.php выводит the_content() в .kp-prose.
 * Используется для: Политика, Согласие, Пользовательское соглашение,
 * Доставка и оплата, О компании, Как заказать, Услуги нанесения.
 *
 * Скоуп строго body.kp-body .kp-prose — в WC/Woodmart не утекает.
 * Цвет/шрифт — токены ДС с fallback. Ширина строки ограничена для читаемости.
 * Брейкпоинты: 760 / 480.
 * ════════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-doc-body { padding: 8px 0 64px; }

body.kp-body .kp-prose {
    /* Ширина текста = ширина контейнера (правка Николая 16.06): без узкого
       предела, как и остальные блоки сайта. Если строки юр-текста покажутся
       длинноваты — вернуть комфортный предел (~820px). */
    max-width: none;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2, #3D3D3D);
}

/* Заголовки разделов */
body.kp-body .kp-prose h2 {
    margin: 40px 0 14px;
    font-weight: 600;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.2;
    letter-spacing: .2px;
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-prose h2:first-child { margin-top: 0; }
body.kp-body .kp-prose h3 {
    margin: 28px 0 10px;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    color: var(--ink, #0A0A0A);
}

/* Абзацы и списки */
body.kp-body .kp-prose p { margin: 0 0 16px; }
body.kp-body .kp-prose ul,
body.kp-body .kp-prose ol { margin: 0 0 18px; padding-left: 22px; }
body.kp-body .kp-prose li { margin-bottom: 8px; }
body.kp-body .kp-prose ul li { list-style: none; position: relative; }
body.kp-body .kp-prose ul li::before {
    content: "";
    position: absolute;
    left: -18px; top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--yellow, #FECE15);
}
body.kp-body .kp-prose ol { padding-left: 24px; }
body.kp-body .kp-prose ol li { padding-left: 4px; }
body.kp-body .kp-prose ol li::marker { color: var(--ink-3, #8A8A8A); font-weight: 600; }

body.kp-body .kp-prose strong { font-weight: 600; color: var(--ink, #0A0A0A); }
body.kp-body .kp-prose a {
    color: var(--ink, #0A0A0A);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
body.kp-body .kp-prose a:hover { color: var(--ink, #0A0A0A); background: var(--yellow-soft, #FFF4B8); }

/* Таблицы (доставка, методы нанесения, реквизиты) */
body.kp-body .kp-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 22px;
    font-size: 15px;
}
body.kp-body .kp-prose thead th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ink-3, #8A8A8A);
    padding: 10px 14px;
    border-bottom: 2px solid var(--ink, #0A0A0A);
}
body.kp-body .kp-prose tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line, #E5E5E5);
    vertical-align: top;
    color: var(--ink-2, #3D3D3D);
}
body.kp-body .kp-prose tbody tr:hover { background: var(--fog, #F7F7F7); }

/* Адаптив */
@media (max-width: 760px) {
    body.kp-body .kp-prose { font-size: 15.5px; }
    body.kp-body .kp-prose h2 { margin-top: 32px; }
    body.kp-body .kp-prose table { font-size: 14px; }
    body.kp-body .kp-prose thead th,
    body.kp-body .kp-prose tbody td { padding: 9px 10px; }
}
@media (max-width: 480px) {
    /* узкие таблицы прокручиваем, чтобы не ломать вёрстку */
    body.kp-body .kp-prose table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* ==== kp-patch-97 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.7-unify.css — Унификация по правкам Николая (16.06.2026).
 *
 * Грузится последним → перебивает базу порядком каскада (та же специфичность).
 *
 *   1) КАП ЗАГОЛОВКОВ ≤ 56px. Эталон — H1 на главной (56px). Заголовок
 *      категорий/контактов/документов (.kp-cat-head-title) был 64px на десктопе
 *      (patch-5.1) — приводим к 56px. Брейкпоинты ниже сохраняем 1:1 с patch-5.1,
 *      чтобы НЕ раздувать мобайл (иначе non-media правило перебило бы media-кап).
 *
 *   2) ФИКС ПРОТЁКШЕГО БЕЛОГО E-MAIL. В Custom CSS темы (Woodmart, инлайн
 *      <style id="wd-style-theme_settings_default-css">) висит правило
 *      `a[href="mailto:zakaz@kelvika.ru"]{color:#fff!important}` — задумано для
 *      e-mail В ВЕРХНЕЙ ПОЛОСКЕ, но селектор глобальный → красил ВСЕ e-mail
 *      ссылки сайта белым (контакты, .kp-prose, консультация в карточке товара) —
 *      белым по белому, нечитаемо. Возвращаем читаемый цвет на светлых блоках.
 *      Топбар (.kp-tb-item) и футер (.kp-footer-mail) сохраняют свой цвет —
 *      у них собственные !important-правила с большей специфичностью.
 *      `!important` здесь оправдан (ловушка №8): перебиваем РЕАЛЬНОЕ чужое
 *      !important-правило, спецификой 0,0,3,1 > 0,0,1,1.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Кап заголовков: .kp-cat-head-title 64 → 56px ─────────────────────────── */
body.kp-body .kp-cat-head-title { font-size: 56px; }

@media (max-width: 980px) { body.kp-body .kp-cat-head-title { font-size: 48px; } }
@media (max-width: 760px) { body.kp-body .kp-cat-head-title { font-size: 34px; } }
@media (max-width: 480px) { body.kp-body .kp-cat-head-title { font-size: 28px; } }

/* ── 2) Читаемый e-mail на светлых блоках (перебиваем протёкший белый !important) ── */
body.kp-body .kp-contacts-v[href^="mailto:"],
body.kp-body .kp-prose a[href^="mailto:"],
body.kp-body .pv-consult-line[href^="mailto:"] {
    color: var(--ink, #0A0A0A) !important;
}

/* ── 3) Лид/интро под заголовком — ЕДИНЫЙ размер 18px и ширина по контейнеру ───
 * Раньше размер «плясал»: контакты 18px (зажат 640px), категории 16px,
 * документы (интро-абзац) 16px. Сводим к 18px и снимаем лимит ширины.
 *   • .kp-cat-head-lead — лид категорий и контактов (контактам лимит снят в 9.5);
 *   • .kp-prose > p:first-child — ведущий интро-абзац документов (только если
 *     страница реально начинается с абзаца; формальные доки с <h2> в начале —
 *     напр. «Политика» — не трогаются).
 * ГЛАВНУЮ НЕ ЗАТРАГИВАЕМ: на ней лид — это .kp-hero-*, эти классы там не нужны.
 */
body.kp-body .kp-cat-head-lead { font-size: 18px; max-width: none; }
body.kp-body .kp-prose > p:first-child { font-size: 18px; }

/* Расширенный SEO-текст категории — по ширине контейнера (правка Николая 17.06),
   снимаем лимит 840px из patch-5.1:405, чтобы текст не сужался «абы как». */
body.kp-body .kp-cat-seo-body { max-width: none; }


/* ==== kp-patch-98 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.8-stock-order.css — PDP: плашка наличия под ценой + строка «под заказ».
 *
 * Правка Николая (17.06): плашку наличия поднять сразу под цену; для товаров
 * «под заказ» (ondemand=true) показывать отдельную плашку и РАЗРЕШИТЬ заказ
 * (степпер активен — логика в content-single-product.php + inc/cart.php).
 *
 * Три состояния (.pv-stockline--*):
 *   • is-in    — «N шт. в наличии»   → зелёная (эталон существующей .pv-stock);
 *   • is-order — «под заказ · N дней» → ЯНТАРНАЯ/песочная (не красная: красный
 *                читается как «стоп/недоступно» и отпугивает от заявки — а нам
 *                нужно ровно обратное; янтарный = «изготовим, срок поставки»);
 *   • is-none  — «нет в наличии»      → нейтрально-серая (реально снятые товары).
 *
 * Скоуп строго body.kp-body .kp-pdp — в WC/Woodmart не утекает.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Плашка-пилюля под ценой (общий вид) ─────────────────────────────────────── */
body.kp-body .kp-pdp .pv-stockline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    margin: -10px 0 2px;           /* подтянуть ближе к цене (у .pv-price mb 26px) */
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: normal;
}
body.kp-body .kp-pdp .pv-stockline-ic { display: inline-flex; flex-shrink: 0; }
body.kp-body .kp-pdp .pv-stockline-ic svg { display: block; }
body.kp-body .kp-pdp .pv-stockline-tx { font-variant-numeric: tabular-nums; }

/* ── В наличии — зелёная (как .pv-stock в patch-9.0) ─────────────────────────── */
body.kp-body .kp-pdp .pv-stockline--is-in {
    background: rgba(124,179,66,.12);
    color: var(--ink, #0A0A0A);
}
body.kp-body .kp-pdp .pv-stockline--is-in .pv-stockline-ic { color: var(--eco, #7CB342); }

/* ── Под заказ — янтарная/песочная ──────────────────────────────────────────── */
body.kp-body .kp-pdp .pv-stockline--is-order {
    background: rgba(245,166,35,.14);
    color: #6E4E11;                /* тёмно-янтарный текст — читаемо на песочном */
}
body.kp-body .kp-pdp .pv-stockline--is-order .pv-stockline-ic { color: #D98A00; }

/* ── Нет в наличии — нейтрально-серая ───────────────────────────────────────── */
body.kp-body .kp-pdp .pv-stockline--is-none {
    background: var(--fog, #F2F2F2);
    color: var(--ink-3, #8A8A8A);
}
body.kp-body .kp-pdp .pv-stockline--is-none .pv-stockline-ic { color: var(--ink-3, #8A8A8A); }

/* ── Таблица заказа: ячейка «под заказ» — янтарный акцент (в тон плашке) ──────── */
body.kp-body .kp-pdp .kp-matrix .kp-size-order {
    color: #B9760A;
    font-weight: 700;
}


/* ==== kp-patch-99 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-9.9-no-capitalize.css — Полный запрет text-transform:capitalize.
 *
 * Правка Николая (17.06): стиль «Каждое Слово С Заглавной» (Title Case) на сайте
 * НЕ используется нигде. Источник — родительская тема WoodMart (base.min.css
 * навешивает capitalize на <button> и часть компонентов); наши элементы без
 * своего text-transform его наследуют (заметно на FAQ карточки товара).
 *
 * Наш намеренный UPPERCASE задаётся классами .kp-*{text-transform:uppercase}
 * (специфичность ≥ 0,0,1,0) и здесь НЕ затрагивается.
 *
 * Скоуп строго body.kp-body — в WC/Woodmart UI (страницы без .kp-body) не течёт.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Сеть-страховка: любой <button> в нашем скоупе. :where() добавляет 0 к
 * специфичности → правило весит 0,0,0,1: перебивает голый button{capitalize}
 * WoodMart (тоже 0,0,0,1, но мы грузимся позже), и при этом ПРОИГРЫВАЕТ любому
 * нашему .kp-*{uppercase} — намеренный КАПС сохраняется. */
:where(body.kp-body) button { text-transform: none; }

/* FAQ на карточке товара: .kp-faq (вне .kp-sec-faq — patch-5.6 туда не достаёт).
 * Спецификация 0,0,3,0 — как у рабочего сброса на главной. */
body.kp-body .kp-faq .kp-faq-q,
body.kp-body .kp-faq .kp-faq-qtext { text-transform: none; }


/* ==== kp-patch-100 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.0-faq.css — страница «Частые вопросы» (/faq/).
 *
 * Стиль = стиль ГЛАВНОЙ. Каждый раздел — двухколоночный блок (.kp-faq-grid:
 * слева .kp-faq-side с .kp-sec-kicker/.kp-sec-title/.kp-sec-bar, справа Q&A).
 * Типографику аккордеона и сетку даёт класс .kp-sec-faq (patch-5.6/5.9) +
 * база main.css:489-501. Здесь — только чередование фона блоков, контраст
 * карточек на тёмном бэнде, plus/minus-глиф тоггла, sticky-чипы и хедер/CTA.
 * Скоуп — body.kp-body .kp-faqp / .kp-faqp-band. Без !important.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Хедер страницы (стиль секции главной) ────────────────────────────────── */
body.kp-body .kp-faqp-hero { padding: 40px 0 14px; background: var(--paper, #fff); }
body.kp-body .kp-faqp-lead {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2, #4a4a4a);
    margin: 18px 0 0;
}

/* ── Sticky-навигация по разделам (чипы-якоря) ────────────────────────────────
 * top = высота липкой шапки .kp-snav-wrap (57px, desktop+mobile); точный офсет
 * кликов считается в JS (header+nav). Чипы — компонент .kp-cat-chip категории.
 */
body.kp-body .kp-faqp-nav {
    position: sticky;
    top: 57px;
    z-index: 40;
    background: var(--paper, #fff);
    border-bottom: 1px solid var(--line, #ececec);
    padding: 12px 0;
}
body.kp-body .kp-faqp-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Блоки разделов: чередование фона ─────────────────────────────────────────
 * .kp-sec даёт padding 80px и белый фон; ужимаем и красим каждый второй в fog.
 * scroll-margin-top — чтобы заголовок не уезжал под sticky-чипы при переходе.
 */
body.kp-body .kp-faqp-band { padding: 56px 0; scroll-margin-top: 130px; }
body.kp-body .kp-faqp-band--alt { background: var(--fog, #f7f7f7); }

/* Контраст карточек аккордеона: на fog-бэнде карточки делаем белыми
 * (иначе fog-карточка на fog-фоне сливается), тоггл-кружок — fog.
 * Открытая карточка остаётся жёлтой на обоих бэндах (выше специфичность). */
body.kp-body .kp-faqp-band--alt .kp-faq-item { background: var(--paper, #fff); }
body.kp-body .kp-faqp-band--alt .kp-faq-item.is-open { background: var(--yellow-soft, #fff7d6); }
body.kp-body .kp-faqp-band--alt .kp-faq-toggle { background: var(--fog, #f7f7f7); }

/* ── Ответ: отступы (база .kp-faq-a без паддинга) ─────────────────────────── */
body.kp-body .kp-faqp .kp-faq-a {
    padding: 0 24px 22px 66px;   /* левый = под текст вопроса, мимо номера */
    margin: 0;
}

/* ── Глиф тоггла — plus → minus, без иконки внутри (база main.css даёт круг) ── */
body.kp-body .kp-faqp .kp-faq-toggle { position: relative; }
body.kp-body .kp-faqp .kp-faq-toggle::before,
body.kp-body .kp-faqp .kp-faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--ink, #0a0a0a);
    border-radius: 2px;
}
body.kp-body .kp-faqp .kp-faq-toggle::before { width: 12px; height: 2px; }
body.kp-body .kp-faqp .kp-faq-toggle::after  { width: 2px; height: 12px; }
body.kp-body .kp-faqp .kp-faq-item.is-open .kp-faq-toggle::after  { display: none; }
body.kp-body .kp-faqp .kp-faq-item.is-open .kp-faq-toggle::before { background: var(--yellow, #FECE15); }

/* ── Нижний CTA ───────────────────────────────────────────────────────────── */
body.kp-body .kp-faqp-cta { padding: 8px 0 64px; background: var(--paper, #fff); }
body.kp-body .kp-faqp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--fog, #f7f7f7);
    border-radius: var(--radius, 16px);
    padding: 32px 36px;
}
body.kp-body .kp-faqp-cta-title { font-size: 24px; font-weight: 700; color: var(--ink, #0a0a0a); margin: 6px 0 8px; }
body.kp-body .kp-faqp-cta-sub   { font-size: 16px; line-height: 1.5; color: var(--ink-2, #4a4a4a); margin: 0; max-width: 46ch; }
body.kp-body .kp-faqp-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.kp-body .kp-faqp-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink, #0a0a0a);
    text-decoration: none;
}
body.kp-body .kp-faqp-cta-phone svg { stroke: var(--yellow, #FECE15); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.kp-body .kp-faqp-nav { padding: 10px 0; }
    /* На узком — горизонтальный скролл чипов вместо переноса в много рядов. */
    body.kp-body .kp-faqp-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.kp-body .kp-faqp-chips::-webkit-scrollbar { display: none; }
    body.kp-body .kp-faqp-band { padding: 40px 0; }
    body.kp-body .kp-faqp .kp-faq-a { padding: 0 16px 18px 16px; }
    body.kp-body .kp-faqp-cta-inner { padding: 24px 20px; }
}


/* ==== kp-patch-101 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.1-tech.css — страница «Требования к макетам» (/trebovaniya-k-maketam/).
 *
 * Скелет (хедер/sticky-чипы/чередующиеся блоки/CTA) переиспользуется из
 * patch-10.0-faq.css (классы .kp-faqp-*) — страница носит обе обёртки
 * .kp-faqp .kp-trp. Здесь — только tech-контент: списки с жёлтыми маркерами,
 * чек-листы, сетка карточек методов, блок шаблонов. Жёлтый — акцент (маркеры,
 * полосы), без подложки за текстом. Скоуп body.kp-body .kp-trp.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Список «термин — пояснение» с жёлтым маркером-точкой ──────────────────── */
body.kp-body .kp-trp .kp-trp-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
}
body.kp-body .kp-trp .kp-trp-list li { position: relative; padding-left: 28px; }
body.kp-body .kp-trp .kp-trp-list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-list li strong {
    display: block; font-size: 16px; font-weight: 700; color: var(--ink, #0a0a0a); margin-bottom: 3px;
}
body.kp-body .kp-trp .kp-trp-list li span {
    display: block; font-size: 15px; line-height: 1.55; color: var(--ink-2, #4a4a4a);
}

/* ── Чек-лист с жёлтым кружком и тёмной галочкой ───────────────────────────── */
body.kp-body .kp-trp .kp-trp-checklist {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
}
body.kp-body .kp-trp .kp-trp-checklist li {
    position: relative; padding-left: 32px;
    font-size: 16px; line-height: 1.55; color: var(--ink-2, #4a4a4a);
}
body.kp-body .kp-trp .kp-trp-checklist li::before {
    content: ""; position: absolute; left: 0; top: 2px;
    width: 19px; height: 19px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-checklist li::after {
    content: ""; position: absolute; left: 6px; top: 6px;
    width: 5px; height: 9px; border: solid var(--ink, #0a0a0a); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Правая колонка двухколоночных блоков (без flex-gap аккордеона) ────────── */
body.kp-body .kp-trp .kp-faq-list-col { align-self: start; }

/* ── Методы: полноширинный заголовок + сетка карточек ─────────────────────── */
body.kp-body .kp-trp .kp-trp-head { max-width: 760px; margin: 0 0 36px; }
body.kp-body .kp-trp .kp-trp-methods {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
body.kp-body .kp-trp .kp-trp-card {
    background: var(--fog, #f7f7f7);           /* на белом бэнде — fog для контраста */
    border: 1px solid var(--line, #ececec);
    border-radius: 14px;
    padding: 22px 22px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
/* на fog-бэнде — белые карточки */
body.kp-body .kp-faqp-band--alt .kp-trp-card { background: var(--paper, #fff); }

body.kp-body .kp-trp .kp-trp-card-name { font-size: 17px; font-weight: 700; color: var(--ink, #0a0a0a); margin: 0; }
body.kp-body .kp-trp .kp-trp-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
body.kp-body .kp-trp .kp-trp-specs li {
    position: relative; padding-left: 15px;
    font-size: 14px; line-height: 1.4; color: var(--ink-2, #4a4a4a);
}
body.kp-body .kp-trp .kp-trp-specs li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-card-use {
    margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #ececec);
    font-size: 13px; line-height: 1.4; color: var(--ink-3, #9a9a9a);
}

/* ── Блок «Шаблоны макетов» ───────────────────────────────────────────────── */
body.kp-body .kp-trp .kp-trp-download-note { font-size: 16px; line-height: 1.55; color: var(--ink-2, #4a4a4a); margin: 0 0 20px; }
body.kp-body .kp-trp .kp-trp-download-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.kp-body .kp-trp .kp-trp-download-mail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink, #0a0a0a); text-decoration: none; }
body.kp-body .kp-trp .kp-trp-download-mail svg { stroke: var(--yellow, #FECE15); }
body.kp-body .kp-trp .kp-trp-download-soon { margin: 18px 0 0; font-size: 13px; color: var(--ink-3, #9a9a9a); }

/* ── Адаптив сетки методов ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    body.kp-body .kp-trp .kp-trp-head { margin-bottom: 26px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: 1fr; }
}


/* ==== kp-patch-102 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.2-pdp-files.css — блок «Файлы для скачивания» в правой колонке PDP.
 *
 * Источник данных:
 *   • «Конструктор макета» — per-article файл Проект111 (мета _kp_maket_pdf /
 *     _kp_maket_cdr), заполняется серверным импортом (перенос по артикулам).
 *   • «Технические требования» — глобальный PDF (опция kp_tech_req_pdf) либо
 *     ссылка на страницу /trebovaniya-k-maketam/.
 *
 * Стиль согласован с .pv-msg / .pv-consult (patch-9.0): белые карточки-строки,
 * 1px var(--line), ховер — тёмная рамка + лёгкий подъём. Жёлтый НЕ используется —
 * акцент даёт красный бейдж типа файла (PDF), как на референсе Nick. Скоуп .kp-pdp.
 * ════════════════════════════════════════════════════════════════════════════ */

body.kp-body .kp-pdp .pv-files { margin-bottom: 20px; }
body.kp-body .kp-pdp .pv-files .pv-lbl { display: block; margin-bottom: 12px; }

body.kp-body .kp-pdp .pv-files-list { display: flex; flex-direction: column; gap: 10px; }

/* строка-кнопка файла */
body.kp-body .kp-pdp .pv-file {
    display: flex; align-items: center; gap: 13px;
    min-height: 56px; padding: 10px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    text-decoration: none; color: var(--ink);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
body.kp-body .kp-pdp .pv-file:hover {
    border-color: var(--ink); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
/* primary (глобальные техтребования) — рамка потемнее, как на референсе */
body.kp-body .kp-pdp .pv-file.is-primary { border-width: 1.5px; border-color: var(--ink); }

/* бейдж типа файла */
body.kp-body .kp-pdp .pv-file-badge {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 26px; padding: 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    border-radius: 7px;
    background: #FDEAEA; color: #D6342C;            /* PDF — красный (по умолчанию) */
}
body.kp-body .kp-pdp .pv-file-badge--cdr { background: #E4F4E8; color: #1E8E3E; } /* CDR — зелёный (CorelDRAW), не голубой */
body.kp-body .kp-pdp .pv-file-badge--web { background: var(--fog); color: var(--ink-3); }

body.kp-body .kp-pdp .pv-file-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.kp-body .kp-pdp .pv-file-ic {
    flex: none; display: inline-flex; color: var(--ink-3); transition: color .15s;
}
body.kp-body .kp-pdp .pv-file:hover .pv-file-ic { color: var(--ink); }

@media (max-width: 480px) {
    body.kp-body .kp-pdp .pv-file { min-height: 52px; padding: 9px 13px; gap: 11px; }
    body.kp-body .kp-pdp .pv-file-name { font-size: 14px; }
}

/* ── Лайтбокс галереи (клик по главному фото открывает полноэкранный просмотр) ── */
body.kp-body .kp-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    padding: 24px; background: rgba(10, 10, 10, .92); cursor: zoom-out;
}
body.kp-body .kp-lightbox.is-open { display: flex; }
body.kp-body .kp-lightbox img {
    max-width: 95vw; max-height: 92vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
}
body.kp-body .kp-lightbox-close {
    position: fixed; top: 16px; right: 22px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s;
}
body.kp-body .kp-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* ── Кнопка избранного в галерее PDP: рабочий Woodmart-wishlist, вид и состояния —
 * 1-в-1 как на карточках каталога (patch-7.5/7.6, но те скоуплены на .kp-prod-imgwrap).
 * Гасим карточное абсолютное позиционирование + родную жёлтую галку .wd-added-icon
 * (это и было «сердечко поверх сердечка»), на .added — красная заливка + залитое сердце. ── */
body.kp-body .kp-pdp .gal-tools .kp-prod-fav {
    position: static; inset: auto; top: auto; right: auto; margin: 0; padding: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    display: grid; place-items: center; color: var(--ink-3); line-height: 0;
    transition: background .15s, border-color .15s, color .15s;
}
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: inherit; text-decoration: none; border-radius: 50%; padding: 0; background: transparent;
}
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .kp-prod-fav-svg { width: 18px; height: 18px; display: block; transition: fill .15s; }
/* прячем родную check-иконку Woodmart (жёлтая галка) и служебный текст */
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .wd-added-icon { display: none; }
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .wd-action-text,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav .kp-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.kp-body .kp-pdp .gal-tools .kp-prod-fav.wd-wishlist-btn::before,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav.wd-wishlist-btn > a::before { display: none !important; }
/* hover + .added → красная заливка, белое залитое сердце */
body.kp-body .kp-pdp .gal-tools .kp-prod-fav:hover,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav:has(a.added) { background: var(--hot); border-color: var(--hot); color: #fff; }
body.kp-body .kp-pdp .gal-tools .kp-prod-fav:hover > a,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a:hover,
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a.added { color: #fff; }
body.kp-body .kp-pdp .gal-tools .kp-prod-fav > a.added .kp-prod-fav-svg { fill: currentColor; }

/* ── Плашка наличия + пилюля минимального тиража в одну строку ── */
body.kp-body .kp-pdp .pv-stockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
body.kp-body .kp-pdp .pv-stockrow .pv-stockline { margin: 0; }
body.kp-body .kp-pdp .pv-minpill {
    display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
    background: var(--fog, #F2F1EC); color: var(--ink-2, #4A4A46);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

/* ── Бейдж «ЧЗ» (Честный знак) в галерее PDP — спокойный слейт, не конкурирует с маркетинговыми ── */
body.kp-body .kp-pdp .gal-badge.gb-chz { background: #3F4D63; color: #fff; }

/* ── Стрелки лайтбокса (перелистывание между фото галереи) ── */
body.kp-body .kp-lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; display: none; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 34px; line-height: 1; cursor: pointer; transition: background .15s; z-index: 1;
}
body.kp-body .kp-lightbox.is-multi .kp-lightbox-nav { display: flex; }
body.kp-body .kp-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
body.kp-body .kp-lightbox-prev { left: 18px; }
body.kp-body .kp-lightbox-next { right: 18px; }
@media (max-width: 600px) {
    body.kp-body .kp-lightbox-nav { width: 42px; height: 42px; font-size: 28px; }
    body.kp-body .kp-lightbox-prev { left: 6px; }
    body.kp-body .kp-lightbox-next { right: 6px; }
}


/* ==== kp-patch-103 ==== */
/* ============================================================
 * PATCH 10.3 — приведение блоков к фирменному стилю
 *
 *  Категория, блок «ХИТЫ КАТЕГОРИИ» (.kp-cat-hits):
 *    • шапка как у карусели «НОВИНКИ» на главной (patch-5.3): слева стопкой
 *      дескриптор + заголовок + жёлтая полоса (.kp-sec-bar), стрелки справа;
 *    • стандартный верхний отступ между блоками (как .kp-sec = 80px),
 *      чтобы блок не прилипал вплотную к секции выше.
 *
 *  Карточка товара, блок «Частые вопросы» переведён на двухколоночный паттерн
 *  главной (.kp-faq-grid / .kp-faq-side / .kp-sec-*) — он на глобальных классах
 *  main.css, отдельный CSS не нужен.
 *
 *  Скоуп: body.kp-body .kp-cat-hits.
 * ============================================================ */

/* Шапка хитов: дескриптор сверху, заголовок, полоса — слева; стрелки — справа. */
body.kp-body .kp-cat-hits .kp-prods-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
}

/* Отступы: сверху 80px (как между секциями .kp-sec), снизу 56px — чтобы карточки
 * не прилипали вплотную к блоку ниже. */
body.kp-body .kp-cat-hits{
    padding-top:80px;
    padding-bottom:56px;
}

@media (max-width:768px){
    /* На узких экранах шапку складываем: заголовок над стрелками. */
    body.kp-body .kp-cat-hits .kp-prods-head{
        align-items:flex-start;
    }
    body.kp-body .kp-cat-hits{
        padding-top:56px;
        padding-bottom:40px;
    }
}


/* ==== kp-patch-104 ==== */
/* ============================================================
 * PATCH 10.4 — чистка страницы категории (решение Nick 20.06.2026)
 *
 *  1. Убираем Title Case («Каждое Слово С Заглавной») на сорте и опциях
 *     фильтров. Источник — WoodMart base навешивает text-transform:capitalize
 *     на span'ы внутри пилюль; наш исходный текст уже в обычном регистре
 *     (первое слово с заглавной, остальные строчные).
 *  2. Счётчик «Показано X из Y» перенесён ПОД сетку (разметка —
 *     archive-products-loop.php). Верхняя панель с переключателями
 *     вид/per-page (плитка/24/40/80) убрана целиком.
 *
 *  Скоуп строго body.kp-body.
 * ============================================================ */

/* 1. Обычный регистр на сорте + именах опций фильтров (цвет/наличие/материал/
 *    бренд/подборки и т.д. — все .kp-cat-fpill-*). */
body.kp-body .kp-cat-fsort-pill,
body.kp-body .kp-cat-fsort-pill span,
body.kp-body .kp-cat-fsort-drop a,
body.kp-body [class*="kp-cat-fpill-"]{
    text-transform:none;
}

/* 2. Счётчик «Показано» под сеткой: слева, приглушённый, с отступом сверху. */
body.kp-body .kp-cat-rbar-count--bottom{
    margin-top:28px;
    color:var(--ink-3,#8A8A8A);
    font-size:14px;
}

/* 3. Верхняя rbar убрана — небольшой отступ сетки от панели фильтров. */
body.kp-body .kp-cat-grid-sec{
    padding-top:8px;
}


/* ==== kp-patch-110 ==== */
/* ============================================================
 * PATCH 11.0 — виджеты (Goal-батч 20.06):
 *   1. Плавающий контакт-виджет + кнопка «Наверх» (#19)
 *   2. Cookie-баннер 152-ФЗ (#8)
 *   3. Блок реквизитов в подвале (#8)
 * Токены берём из patch-8.0; для надёжности — фолбэки в var().
 * ============================================================ */

/* ───── 1. Контакт-виджет (вариант A — минимал-стек) ───── */
.cw{position:fixed;right:20px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:14px;z-index:50}
.cw-btn{position:relative;display:block;width:56px;height:56px;
        animation:cw-in .5s cubic-bezier(.2,.7,.3,1) backwards}
.cw-btn:nth-child(1){animation-delay:.05s}
.cw-btn:nth-child(2){animation-delay:.12s}
.cw-btn:nth-child(3){animation-delay:.19s}
.cw-btn:nth-child(4){animation-delay:.26s}
@keyframes cw-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cw-ic{width:56px;height:56px;border-radius:50%;background:var(--ink,#0A0A0A);color:#fff;
       display:grid;place-items:center;box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));
       transition:background .18s,color .18s,transform .18s}
.cw-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cw-btn:hover .cw-ic:not(.brand){background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A);transform:scale(1.06)}
.cw-ic.brand svg{fill:#fff;stroke:none}
.cw-ic.tg{background:#019be5}
.cw-ic.max{background:linear-gradient(145deg,#4cf,#53e 66%,#93d)}
.cw-ic.max svg{width:31px;height:31px}
.cw-ic.tg svg{transform:translate(-1.2px,1px)}
.cw-btn:hover .cw-ic.brand{transform:scale(1.06)}
.cw-pill{position:absolute;right:68px;top:50%;transform:translateY(-50%) translateX(10px);
         background:var(--ink,#0A0A0A);color:#fff;border-radius:999px;padding:9px 18px;white-space:nowrap;
         box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));opacity:0;pointer-events:none;
         transition:opacity .18s,transform .18s;display:flex;flex-direction:column;justify-content:center}
.cw-pill .k{font-size:11px;font-weight:500;letter-spacing:.4px;color:#9a9a9a;line-height:1.2}
.cw-pill .v{font-size:14px;font-weight:700;letter-spacing:.2px;color:#fff;line-height:1.25}
.cw-btn:hover .cw-pill{opacity:1;transform:translateY(-50%) translateX(0)}
.cw-btn.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:-1;
    box-shadow:0 0 0 0 rgba(254,206,21,.55);animation:cw-pulse 2.4s ease-out infinite}
@keyframes cw-pulse{0%{box-shadow:0 0 0 0 rgba(254,206,21,.5)}70%{box-shadow:0 0 0 14px rgba(254,206,21,0)}100%{box-shadow:0 0 0 0 rgba(254,206,21,0)}}
/* Скоуп body.kp-body ОБЯЗАТЕЛЕН: woodmart перебивает голый .cw-top своим
 * сбросом :is(.btn,.button,button,...){position:relative;display:inline-flex;
 * background:#F3F3F3;border-radius:0} — он той же специфичности (0,0,1,0), но
 * грузится позже. body.kp-body .cw-top = 0,0,2,1 → чисто выигрывает без !important.
 * transform: при появлении кнопка ВКРУЧИВАЕТСЯ (rotate -180°→0) + выезжает снизу. */
body.kp-body .cw-top{position:fixed;right:20px;bottom:22px;width:52px;height:52px;border:0;cursor:pointer;
        border-radius:50%;background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A);
        box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));display:grid;place-items:center;z-index:50;
        opacity:0;transform:translateY(14px) rotate(-180deg);pointer-events:none;
        transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.28,.5,1),background .15s}
body.kp-body .cw-top svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.kp-body .cw-top:hover{background:var(--yellow-hover,#FFD933)}
body.kp-body .cw-top.show{opacity:1;transform:translateY(0) rotate(0);pointer-events:auto}

/* ───── 2. Cookie-баннер (по умолчанию скрыт, JS показывает) ───── */
.kp-cookie{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
           background:var(--ink,#0A0A0A);color:#fff;border-radius:var(--r,12px);
           box-shadow:var(--shadow-float,0 10px 28px rgba(0,0,0,.2));
           padding:9px 12px 9px 22px;max-width:620px;margin:0 auto;
           align-items:center;gap:16px}
.kp-cookie.is-visible{display:flex}
.kp-cookie-text{font-size:13px;line-height:1.4;color:#d8d8d8}
.kp-cookie-text a{color:var(--yellow,#FECE15);text-decoration:underline}
/* Скоуп body.kp-body: иначе woodmart-сброс :is(...button...) делает кнопку белой/квадратной (как было у .cw-top) */
body.kp-body .kp-cookie-btn{flex:0 0 auto;border:0;cursor:pointer;background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A);
               font-weight:700;font-size:13px;padding:9px 22px;border-radius:10px;transition:background .15s;white-space:nowrap}
body.kp-body .kp-cookie-btn:hover{background:var(--yellow-hover,#FFD933)}

/* ───── 3. Реквизиты в подвале ───── */
.kp-footer-rekviz{font-size:12px;line-height:1.6;color:var(--ink-3,#8A8A8A);margin-top:6px}

/* ───── 4. «Все фильтры» — раскрытый ряд пилюль (#16, интерим) ───── */
body.kp-body .kp-cat-fbar.kp-fbar-expanded .kp-cat-fbar-left{flex-wrap:wrap;row-gap:10px}
body.kp-body .kp-cat-fpill-all.is-active{background:var(--yellow,#FECE15);color:var(--ink,#0A0A0A)}

/* ───── Адаптив ───── */
@media (max-width:768px){
  .cw{right:14px;gap:12px}
  .cw-btn,.cw-ic{width:52px;height:52px}
  body.kp-body .cw-top{width:48px;height:48px;right:14px}
  .kp-cookie{flex-direction:column;align-items:stretch;text-align:left;gap:12px;padding:14px 16px}
  .kp-cookie-btn{width:100%}
}


/* ==== kp-patch-111 ==== */
/* ════════════════════════════════════════════════════════════════════
   PATCH 11.1 — Реквизиты ООО «К-ПРИНТ» одной строкой НАД разделителем футера.
   Было: реквизиты мелким текстом ПОД разделителем (внутри .kp-footer-copy).
   Стало: отдельная строка .kp-footer-rekviz-line между 5-колоночным рядом
   и нижним баром; разделитель (border-bottom) перенесён сюда с .kp-footer-row.
   Скоуп — body.kp-body .kp-footer. Суммарный вертикальный отступ сохранён.
   ════════════════════════════════════════════════════════════════════ */

/* Снимаем разделитель с ряда колонок и ужимаем его нижний отступ
   (был 48px → 16px, остаток отступа добирает сама строка реквизитов). */
body.kp-body .kp-footer .kp-footer-row {
  border-bottom: 0;
  padding-bottom: 16px;
}

/* Строка реквизитов = новый разделитель. .kp-container уже даёт ширину/центровку
   и горизонтальные поля — трогаем только вертикаль, цвет, выравнивание. */
body.kp-body .kp-footer .kp-footer-rekviz-line {
  padding-top: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .42);
  text-align: center;
  white-space: nowrap;            /* десктоп: строго одна строка */
}

/* Мобайл/планшет — разрешаем перенос, чтобы длинная строка не давала
   горизонтальный скролл. */
@media (max-width: 760px) {
  body.kp-body .kp-footer .kp-footer-rekviz-line {
    white-space: normal;
  }
}


/* ==== kp-patch-112 ==== */
/* ════════════════════════════════════════════════════════════════════
   PATCH 11.2 — Кнопки мессенджеров на странице «Контакты» = как в блоке
   «Нужна консультация?» на странице товара (.pv-msg, patch-9.0).
   Просьба Nick 23.06: «сделать такие же кнопки».
   Было (patch-9.5): чип с inset-обводкой 2px, без иконки, жёлтый ховер.
   Стало: белая кнопка + рамка --line + цветная иконка бренда 22px + текст,
   ховер — лёгкий подъём + тёмная рамка. Точное зеркало .pv-msg.
   Тот же селектор, что в patch-9.5 → грузится позже → перебивает.
   ════════════════════════════════════════════════════════════════════ */
body.kp-body .kp-contacts-chip {
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;                 /* снять inset-обводку 2px из patch-9.5 */
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;                /* у .pv-msg трекинга нет */
  transition: all .15s;
}
body.kp-body .kp-contacts-chip img {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 6px;
}
body.kp-body .kp-contacts-chip:hover {
  background: #fff;                 /* перебить жёлтый ховер из patch-9.5 */
  transform: translateY(-1px);
  border-color: var(--ink);
}


/* ==== kp-patch-113 ==== */
/* ════════════════════════════════════════════════════════════════════════════
 * PATCH 11.3 — Мобильный фильтр каталога: выпадашки больше не обрезаются.
 *
 * БАГ (ROADMAP 23.06, «фильтр карточек не работает»):
 *   На ≤760px .kp-cat-fbar-left имел overflow-x:auto + flex-wrap:nowrap
 *   (горизонтальный скролл пилюль, patch-5.1:868). overflow-x:auto создаёт
 *   clipping-контекст (по спецификации overflow-y тоже становится auto) →
 *   абсолютная выпадашка .kp-cat-fpill-drop обрезалась по высоте и уезжала
 *   за правый край экрана. Вдобавок мобильное правило left:0;right:0
 *   (patch-6.9:151) анкерилось к УЗКОЙ пилюле, а не к контейнеру.
 *   Итог: тап по пилюле → она желтела (is-open), но панель выбора была
 *   невидима → пользователь видел «кнопка просто желтеет, фильтр не работает».
 *   Подтверждено в браузере на 390px: drop.right=480 при ширине вьюпорта 390.
 *
 * ФИКС:
 *   • Пилюли переносятся (flex-wrap:wrap, overflow:visible) — нет clipping.
 *   • Выпадашка анкерится к полноширинному .kp-cat-fbar-inner (а не к пилюле)
 *     и раскрывается панелью во всю ширину ПОД баром: left:0/right:0 → панель
 *     никогда не уходит за экран и не обрезается.
 *   • z-index поднят над плавающим виджетом мессенджеров (.cw, z-index:50).
 *   • «Применить» во всю ширину — крупный тач-таргет, не прячется под виджет.
 *
 * «ВСЕ ФИЛЬТРЫ» (.kp-cat-fpill-all) скрыта: при wrap все пилюли и так видны,
 * а кнопка лишь желтела без визуального эффекта (источник жалобы Nick).
 * Полноценная единая «панель всех фильтров» (стиль illan) — отдельная задача.
 *
 * Скоуп строго .kp-cat-* / [data-kp-fpill-*]. patch-5.1 / 6.9 не редактируем
 * (перекрываем порядком загрузки + равной/большей специфичностью).
 * ════════════════════════════════════════════════════════════════════════════ */

/* «ВСЕ ФИЛЬТРЫ» — нефункциональная кнопка (только желтела). Скрываем везде:
 * на десктопе и планшете пилюли и так умещаются (flex-wrap:wrap, patch-5.1:198),
 * на мобиле — переносятся (см. ниже). */
body.kp-body .kp-cat-fpill-all {
    display: none;
}

@media (max-width: 760px) {

    /* 1. Пилюли переносятся в строки; контейнер НЕ клиппит выпадашки. */
    body.kp-body .kp-cat-fbar-left {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 8px;
        padding-bottom: 0;
    }

    /* 2. Анкер выпадашки — полноширинный inner, не узкая пилюля.
     *    (.kp-cat-fpill[data-kp-fpill-toggle] держал position:relative —
     *    перебиваем тем же селектором, равная специфичность + порядок ниже.) */
    body.kp-body .kp-cat-fbar-inner {
        position: relative;
    }
    body.kp-body .kp-cat-fpill[data-kp-fpill-toggle] {
        position: static;
    }

    /* 3. Выпадашка (и обычная, и «Цвет» — у обеих класс .kp-cat-fpill-drop) —
     *    панель во всю ширину под баром, поверх виджета мессенджеров (.cw=50).
     *    display НЕ трогаем: открытие управляется .is-open в patch-6.9. */
    body.kp-body .kp-cat-fpill .kp-cat-fpill-drop {
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 6px;
        min-width: 0;
        max-width: none;
        z-index: 60;
    }

    /* 4. «Применить» во всю ширину — не прячется под плавающий виджет. */
    body.kp-body .kp-cat-fpill-drop-foot {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    body.kp-body .kp-cat-fpill-apply {
        width: 100%;
        margin-left: 0;
    }
}


/* ==== kp-patch-114 ==== */
/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 11.4 — Таблица размеров (размерная сетка tablemer П111).
 *
 * Источник данных: мета _kp_size_table (чистый HTML, наполняет
 * import_woo.py --sizetable-only из сырого catalogue.xml). Рендер:
 * woocommerce/content-single-product.php — триггер ПОД блоком «Методы нанесения»,
 * над матрицей заказа + скрытый <template>. Механика модалки:
 * assets/js/kp-sizechart.js (клон template → .kp-sizechart-modal в бэкдропе).
 *
 * Специфичность модальных правил поднята префиксом .kp-sizechart-backdrop —
 * чтобы кнопочные/типографские сбросы Woodmart не перебивали позиционирование
 * (баг v1: кнопка закрытия уезжала влево серым квадратом на заголовок).
 * Futura PT — максимум 700.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── Триггер (под «Методы нанесения», над матрицей) — фирменная кнопка ───────── */

.pv-sizechart-row { margin-top: 6px; }

/* Скоуп body.kp-body .pv-sizechart-row … — перебиваем дефолтный стиль кнопок
   Woodmart (он красил триггер серым). Специфичность 0,0,3,1 выигрывает. */
body.kp-body .pv-sizechart-row .kp-sizechart-trigger {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink, #0a0a0a);
    background: #fff;
    border: 1.5px solid var(--ink, #0a0a0a);
    border-radius: 10px;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
}

body.kp-body .pv-sizechart-row .kp-sizechart-trigger svg { flex: 0 0 auto; }

body.kp-body .pv-sizechart-row .kp-sizechart-trigger:hover {
    background: var(--yellow, #FECE15);
    border-color: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}

body.kp-body .pv-sizechart-row .kp-sizechart-trigger:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}


/* ───────── Бэкдроп ───────── */

.kp-sizechart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.58);
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    animation: kp-sizechart-bd-in .15s ease-out;
}

@keyframes kp-sizechart-bd-in { from { opacity: 0; } to { opacity: 1; } }


/* ───────── Модал — крупнее ───────── */

.kp-sizechart-backdrop .kp-sizechart-modal {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 30px 36px 28px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    animation: kp-sizechart-in .18s ease-out;
    box-sizing: border-box;
}

@keyframes kp-sizechart-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kp-sizechart-backdrop .kp-sizechart-modal:focus { outline: none; }


/* ───────── Кнопка закрытия — справа, тёмный круг, белый × ───────── */

.kp-sizechart-backdrop .kp-sizechart-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--ink, #0a0a0a);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background .15s, color .15s, transform .12s;
}

.kp-sizechart-backdrop .kp-sizechart-close:hover {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    transform: scale(1.06);
}

.kp-sizechart-backdrop .kp-sizechart-close:focus-visible {
    outline: 2px solid var(--yellow, #FECE15);
    outline-offset: 2px;
}

.kp-sizechart-backdrop .kp-sizechart-close svg { display: block; }


/* ───────── Шапка (заголовок не залезает под крестик) ───────── */

.kp-sizechart-backdrop .kp-sizechart-head { margin: 0 56px 20px 0; }

.kp-sizechart-backdrop .kp-sizechart-title {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    color: var(--ink, #0a0a0a);
    line-height: 1.2;
}

.kp-sizechart-backdrop .kp-sizechart-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ink-3, #8A8A8A);
    line-height: 1.4;
}


/* ───────── Тело: чертёж + таблица ───────── */

.kp-sizechart-backdrop .kp-sizechart-body { overflow-x: auto; }

/* Чертёж (рехостнутый SVG) — над таблицей, слева, крупнее. */
.kp-sizechart-backdrop .kp-sizechart-body img {
    display: block;
    max-width: 150px;
    height: auto;
    margin: 0 0 18px;
}

/* Таблица мерок — бренд-стиль, читаемый размер. Шапка = первый <tr>. */
.kp-sizechart-backdrop .kp-sizechart-body table {
    border-collapse: collapse;
    width: 100%;
    min-width: 540px;
    font-size: 14px;
    color: var(--ink, #0a0a0a);
}

.kp-sizechart-backdrop .kp-sizechart-body th,
.kp-sizechart-backdrop .kp-sizechart-body td {
    border: 1px solid var(--line, #E5E5E5);
    padding: 10px 14px;
    text-align: center;
    line-height: 1.35;
    white-space: nowrap;
}

/* Первая строка (шапка размеров) — тёмный фон, белый текст. */
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child td,
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child th,
.kp-sizechart-backdrop .kp-sizechart-body thead td,
.kp-sizechart-backdrop .kp-sizechart-body thead th {
    background: var(--ink, #0a0a0a);
    color: #fff;
    font-weight: 700;
}

/* Первая колонка (метка замера A/B/…) — полужирная, левый край, светлый фон. */
.kp-sizechart-backdrop .kp-sizechart-body tr td:first-child,
.kp-sizechart-backdrop .kp-sizechart-body tr th:first-child {
    font-weight: 700;
    text-align: left;
    background: var(--fog, #F7F7F7);
    color: var(--ink, #0a0a0a);
}

/* Угловая ячейка (шапка ∩ первая колонка) — тёмная, читаемая. */
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child td:first-child,
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child th:first-child {
    background: var(--ink, #0a0a0a);
    color: #fff;
    text-align: left;
}

/* Зебра по строкам данных (кроме шапки). */
.kp-sizechart-backdrop .kp-sizechart-body tr:nth-child(even):not(:first-child) td { background: #FCFCFC; }

/* Приписка-сноска поставщика (<p> после таблицы). */
.kp-sizechart-backdrop .kp-sizechart-body p {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ink-3, #8A8A8A);
    line-height: 1.5;
    white-space: normal;
}


/* ───────── Мобилка ───────── */

@media (max-width: 600px) {
    .kp-sizechart-backdrop { padding: 14px; }
    .kp-sizechart-backdrop .kp-sizechart-modal {
        padding: 24px 18px 18px;
        border-radius: 14px;
        max-height: calc(100vh - 28px);
    }
    .kp-sizechart-backdrop .kp-sizechart-title { font-size: 19px; }
    .kp-sizechart-backdrop .kp-sizechart-head { margin-right: 48px; }
    .kp-sizechart-backdrop .kp-sizechart-close { top: 14px; right: 14px; width: 36px; height: 36px; }
    .kp-sizechart-backdrop .kp-sizechart-body table { font-size: 13px; min-width: 480px; }
    .kp-sizechart-backdrop .kp-sizechart-body th,
    .kp-sizechart-backdrop .kp-sizechart-body td { padding: 8px 10px; }
}