/* ============================================================
   Коляски·Кроватки — kk-screens.css
   Дизайн-система прототипа (тема WHITE), scoped под .kk-screen,
   чтобы не конфликтовать с боевыми стилями каталога/карточки.
   Источник истины: design-reference/koliaski-screens/styles.css
   ============================================================ */
.kk-screen{
  /* WHITE theme токены */
  --bg:#ffffff; --surface:#f5f7fa; --card:#ffffff;
  --ink:#000000; --ink-soft:#2a2a2a; --muted:#8a8a8a; --muted-soft:#cccccc;
  --border:#e8eaee; --border-strong:#c8ccd1; --rule:#e8eaee;
  --blush:#e8869a; --blush-deep:#c4607a; --blush-soft:#f8d8df; --blush-pale:#fef0f3;
  --sky:#87b6d5; --sky-deep:#5790b6; --sky-soft:#d8e8f1; --sky-pale:#f0f7fb;
  --ok:#4a7a52; --warn:#b8954d; --gold:#000000;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(80,60,40,.04),0 1px 1px rgba(80,60,40,.03);
  --shadow-md:0 6px 18px rgba(80,60,40,.06),0 2px 4px rgba(80,60,40,.04);
  --shadow-lg:0 20px 50px rgba(80,60,40,.10),0 4px 12px rgba(80,60,40,.06);
  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  display:block; width:100%;
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01" on,"cv11" on;
}
.kk-screen *{ box-sizing:border-box; }

/* ── экраны-состояния внутри боевой карточки: убрать правый рейл и расширить контент ── */
body:has(.kk-screen--disc) .kk-prail,
body:has(.kk-screen--oos) .kk-prail,
body:has(.kk-screen--disc) .detail-right,
body:has(.kk-screen--oos) .detail-right,
body:has(.kk-screen--disc) .list-tabs_bvn,
body:has(.kk-screen--oos) .list-tabs_bvn,
/* enhance.js-инъекции карточки не нужны на экранах-состояниях (тактильное/сплит/трейд — противоречат «нельзя купить») */
body:has(.kk-screen) #kk-rightrail,
body:has(.kk-screen) .kk-rightrail,
body:has(.kk-screen) .kk-trust-line,
body:has(.kk-screen) .kk-super-sections,
body:has(.kk-screen) .kk-super-section,
body:has(.kk-screen) .kk-compat-widget,
body:has(.kk-screen) .kk-why,
body:has(.kk-screen) #kk-why,
body:has(.kk-screen) .tab_cart,
/* убрать дублирующую плашку-заголовок сайта (товар уже в H1 героя) */
body:has(.kk-screen) .kk-page-title,
body:has(.kk-screen) .kk-trust-line{ display:none !important; }
body:has(.kk-screen) .row > div:has(> .kk-screen){ flex:0 0 100% !important; max-width:100% !important; width:100% !important; }
body:has(.kk-screen) .bx_item_detail{ padding-right:0 !important; margin-right:0 !important; }
.kk-screen h1,.kk-screen h2,.kk-screen h3,.kk-screen h4{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  color:var(--ink); margin:0; text-wrap:pretty; line-height:1.05;
}
.kk-screen h1{ font-weight:800; letter-spacing:-0.025em; }
.kk-screen p{ margin:0; }
.kk-screen a{ color:inherit; text-decoration:none; }
.kk-screen img{ max-width:100%; display:block; }
.kk-screen .mono{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; font-weight:600; }
.kk-screen .display{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; }
.kk-screen em{ font-style:italic; }

/* layout helpers */
.kk-screen .kks-wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,3vw,28px); }
.kk-screen .kks-section{ margin-top:clamp(40px,6vw,72px); }
.kk-screen .row{ display:flex; align-items:center; }
.kk-screen .col{ display:flex; flex-direction:column; }
.kk-screen .between{ justify-content:space-between; }
.kk-screen .center{ justify-content:center; align-items:center; }
.kk-screen .wrap-w{ flex-wrap:wrap; }
.kk-screen .gap-2{ gap:8px; } .kk-screen .gap-3{ gap:12px; } .kk-screen .gap-4{ gap:16px; } .kk-screen .gap-5{ gap:20px; }
.kk-screen .eyebrow{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* buttons */
.kk-screen .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:var(--r-pill); font-weight:600; font-size:14px; letter-spacing:.01em; transition:transform .1s ease,box-shadow .15s ease,background .15s ease; white-space:nowrap; cursor:pointer; border:0; font-family:inherit; }
.kk-screen .btn:hover{ transform:translateY(-1px); }
.kk-screen .btn-primary{ background:var(--blush); color:#fff; box-shadow:0 6px 18px rgba(232,134,154,.28); }
.kk-screen .btn-primary:hover{ background:var(--blush-deep); box-shadow:0 10px 24px rgba(232,134,154,.38); }
.kk-screen .btn-ink{ background:#000; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.kk-screen .btn-ink:hover{ background:#1a1a1a; }
.kk-screen .btn-ghost{ background:var(--card); color:var(--ink); border:1px solid var(--border-strong); box-shadow:var(--shadow-sm); }
.kk-screen .btn-ghost:hover{ border-color:var(--ink); }
.kk-screen .btn-soft{ background:var(--blush-pale); color:var(--blush-deep); }
.kk-screen .btn-soft:hover{ background:var(--blush-soft); }
.kk-screen .btn-sky{ background:var(--sky); color:#fff; }
.kk-screen .btn-sky:hover{ background:var(--sky-deep); }
.kk-screen .btn-white{ background:#fff; color:var(--blush-deep); }
.kk-screen .btn-lg{ padding:16px 28px; font-size:15px; }
.kk-screen .btn-sm{ padding:8px 14px; font-size:12.5px; }
.kk-screen .btn svg{ width:1.05em; height:1.05em; }

/* chips / badges */
.kk-screen .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill); background:var(--card); color:var(--ink-soft); border:1px solid var(--border); font-size:13px; font-weight:500; }
.kk-screen .chip.active{ background:var(--blush); color:#fff; border-color:var(--blush); }
.kk-screen .chip-soft{ background:var(--blush-pale); color:var(--blush-deep); border-color:transparent; }
.kk-screen .chip-sky{ background:var(--sky-pale); color:var(--sky-deep); border-color:transparent; }
.kk-screen .badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.kk-screen .badge-hit{ background:var(--sky); color:#fff; }
.kk-screen .badge-instock{ background:var(--sky-soft); color:var(--sky-deep); }
.kk-screen .badge-new{ background:var(--ink); color:#fff; }

/* stars */
.kk-screen .stars{ display:inline-flex; gap:1px; }
.kk-screen .stars span{ font-size:13px; }

/* ───────── HERO ───────── */
.kk-screen .kks-hero{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(20px,3vw,40px); margin-top:14px; }
.kk-screen .kks-hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(20px,3vw,48px); align-items:center; }
.kk-screen .kks-photo{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1/1; background:var(--card); }
.kk-screen .kks-photo img{ width:100%; height:100%; object-fit:cover; }
.kk-screen .kks-photo--archive img{ filter:grayscale(.9) contrast(.92) brightness(1.04); opacity:.72; }
.kk-screen .kks-photo--archive::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(122,108,90,.06),rgba(42,34,28,.14)); pointer-events:none; }
.kk-screen .kks-photo-badge{ position:absolute; top:16px; left:16px; z-index:2; }
.kk-screen .kks-photo-date{ position:absolute; bottom:14px; left:16px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(255,255,255,.88); backdrop-filter:blur(6px); border-radius:var(--r-pill); font-size:11px; font-weight:600; color:var(--ink-soft); }

.kk-screen .disc-stamp{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:#000; color:#fff; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.kk-screen .oos-stamp{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--sky); color:#fff; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

.kk-screen .kks-h1{ font-size:clamp(34px,5vw,60px); line-height:.99; margin-top:12px; letter-spacing:-0.025em; }
.kk-screen .kks-lead{ margin-top:18px; font-size:clamp(15px,1.4vw,16.5px); line-height:1.62; color:var(--ink-soft); max-width:540px; }
.kk-screen .kks-meta{ display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.kk-screen .kks-meta .mi{ display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--muted); }
.kk-screen .kks-hero-cta{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }

/* ───────── PROMO COMPENSATION BAND ───────── */
.kk-screen .kks-promo{ background:linear-gradient(135deg,var(--blush) 0%,var(--blush-deep) 100%); border-radius:var(--r-xl); padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,48px); color:#fff; display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; position:relative; overflow:hidden; }
.kk-screen .kks-promo::before{ content:''; position:absolute; top:-60px; right:-40px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.10); }
.kk-screen .kks-promo > *{ position:relative; }
.kk-screen .kks-promo h2{ color:#fff; font-size:clamp(26px,3.4vw,44px); margin-top:8px; line-height:1.02; }
.kk-screen .kks-promo-sub{ margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.85); line-height:1.6; max-width:460px; }
.kk-screen .kks-codebox{ width:100%; background:rgba(255,255,255,.14); border:1.5px dashed rgba(255,255,255,.5); border-radius:var(--r-md); padding:20px 24px; text-align:center; backdrop-filter:blur(4px); }
.kk-screen .kks-codebox .lbl{ font-family:var(--font-mono); font-size:10.5px; color:rgba(255,255,255,.78); letter-spacing:.1em; text-transform:uppercase; }
.kk-screen .kks-codebox .code{ font-family:var(--font-display); font-size:clamp(28px,3.2vw,40px); color:#fff; letter-spacing:.04em; margin-top:4px; cursor:pointer; }
.kk-screen .kks-codebox .sub{ font-size:12.5px; color:rgba(255,255,255,.8); margin-top:6px; }
.kk-screen .kks-promo-side{ display:flex; flex-direction:column; gap:12px; }

/* sky variant (oos nudge) */
.kk-screen .kks-promo--sky{ background:linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%); }

/* section heads */
.kk-screen .kks-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.kk-screen .kks-h2{ font-size:clamp(26px,4vw,52px); margin-top:8px; line-height:1.0; }
.kk-screen .kks-h2-sm{ font-size:clamp(24px,3vw,40px); }
.kk-screen .kks-note{ font-size:14px; color:var(--ink-soft); max-width:340px; line-height:1.6; }
.kk-screen .accent{ color:var(--blush); }
.kk-screen .accent-sky{ color:var(--sky-deep); }
.kk-screen .muted-dot{ color:var(--muted-soft); }

/* product grids */
.kk-screen .kks-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.kk-screen .kks-grid-3{ grid-template-columns:repeat(3,1fr); }
.kk-screen .pcard{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s,transform .1s; color:inherit; }
.kk-screen .pcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.kk-screen .pcard-media{ position:relative; aspect-ratio:1/1; background:var(--surface); }
.kk-screen .pcard-media img{ width:100%; height:100%; object-fit:cover; }
.kk-screen .pcard-off{ position:absolute; top:12px; left:12px; padding:5px 10px; background:var(--blush); color:#fff; border-radius:var(--r-pill); font-size:11px; font-weight:700; }
.kk-screen .pcard-hit{ position:absolute; top:12px; right:12px; }
.kk-screen .pcard-body{ display:flex; flex-direction:column; padding:16px; gap:8px; flex:1; }
.kk-screen .pcard-brand{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.kk-screen .pcard-name{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.12; }
.kk-screen .pcard-match{ display:flex; gap:8px; padding:8px 10px; background:var(--sky-pale); border-radius:var(--r-sm); align-items:flex-start; font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
.kk-screen .pcard-match svg{ color:var(--sky-deep); flex-shrink:0; margin-top:1px; width:14px; height:14px; }
.kk-screen .pcard-foot{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding-top:6px; gap:8px; }
.kk-screen .pcard-price-old{ font-size:12px; color:var(--muted); text-decoration:line-through; }
.kk-screen .pcard-price{ font-family:var(--font-display); font-weight:700; font-size:22px; }
.kk-screen .pcard-price--promo{ color:var(--blush-deep); }

/* brand models row (compact) */
.kk-screen .kks-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(22px,3vw,40px); }
.kk-screen .kks-brandgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kk-screen .bcard{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; color:inherit; }
.kk-screen .bcard-media{ position:relative; aspect-ratio:4/3; background:var(--surface); }
.kk-screen .bcard-media img{ width:100%; height:100%; object-fit:cover; }
.kk-screen .bcard-body{ padding:14px; display:flex; flex-direction:column; gap:6px; }
.kk-screen .bcard-name{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.12; }
.kk-screen .link-arrow{ font-size:13px; color:var(--blush-deep); border-bottom:1px solid currentColor; padding-bottom:1px; }

/* "чем была хороша" bullets (oos) */
.kk-screen .kks-why{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kk-screen .why-card{ display:flex; flex-direction:column; gap:8px; padding:20px 22px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); }
.kk-screen .why-ico{ width:44px; height:44px; border-radius:50%; background:var(--sky-pale); color:var(--sky-deep); display:flex; align-items:center; justify-content:center; }
.kk-screen .why-t{ font-size:15px; font-weight:700; margin-top:4px; }
.kk-screen .why-s{ font-size:12.5px; color:var(--muted); }
.kk-screen .why-bridge{ font-size:11px; color:var(--sky-deep); font-weight:600; margin-top:2px; }

/* capture / notify forms */
.kk-screen .kks-capture{ background:var(--blush-pale); border:1px solid var(--blush-soft); border-radius:var(--r-xl); padding:clamp(24px,3.4vw,40px) clamp(20px,3.4vw,44px); }
.kk-screen .kks-capture--sky{ background:var(--sky-pale); border-color:var(--sky-soft); }
.kk-screen .kks-capture-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.kk-screen .kks-capture h3{ font-size:clamp(24px,3vw,34px); margin-top:8px; line-height:1.05; }
.kk-screen .kks-capture p{ margin-top:12px; font-size:13.5px; color:var(--ink-soft); line-height:1.6; max-width:420px; }
.kk-screen .kks-input{ background:#fff; border-radius:var(--r-pill); padding:4px 4px 4px 18px; display:flex; align-items:center; gap:8px; border:1px solid var(--blush-soft); }
.kk-screen .kks-capture--sky .kks-input{ border-color:var(--sky-soft); }
.kk-screen .kks-input input{ flex:1; min-width:0; padding:11px 0; border:0; outline:0; background:transparent; font-size:14px; font-family:inherit; color:var(--ink); }
.kk-screen .kks-input .pfx{ font-size:13px; color:var(--muted); }
.kk-screen .kks-channels{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.kk-screen .kks-channels .btn{ flex:1; font-size:12px; }
.kk-screen .kks-consent{ font-size:11px; color:var(--muted); line-height:1.5; margin-top:12px; display:block; }
.kk-screen .kks-ch{ cursor:pointer; }
.kk-screen .kks-ch--on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.kk-screen .kks-form-ok{ background:#fff; border:1px solid var(--sky-soft); border-radius:var(--r-md); padding:18px 20px; font-weight:600; color:var(--ink); line-height:1.5; }
.kk-screen .dot-max{ width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,#1FA8DC,#7B6CFF); display:inline-block; }
.kk-screen .dot-tg{ width:14px; height:14px; border-radius:50%; background:#0088cc; display:inline-block; }

/* trust strip */
.kk-screen .kks-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kk-screen .tcard{ display:flex; flex-direction:column; gap:8px; padding:20px 22px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); }
.kk-screen .tcard-ico{ width:44px; height:44px; border-radius:50%; background:var(--sky-pale); color:var(--sky-deep); display:flex; align-items:center; justify-content:center; }
.kk-screen .tcard-t{ font-size:15px; font-weight:700; margin-top:4px; }
.kk-screen .tcard-s{ font-size:12.5px; color:var(--muted); }

/* FAQ */
.kk-screen .kks-faq{ max-width:980px; }
.kk-screen .faq-item{ border-bottom:1px solid var(--border); padding:18px 0; }
.kk-screen .faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; font-size:17px; font-weight:600; font-family:var(--font-display); }
.kk-screen .faq-item summary::-webkit-details-marker{ display:none; }
.kk-screen .faq-item summary::after{ content:'+'; font-size:22px; font-weight:300; color:var(--muted); flex-shrink:0; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); transition:transform .2s,background .2s; }
.kk-screen .faq-item[open] summary::after{ content:'−'; background:var(--blush); color:#fff; }
.kk-screen .faq-item p{ margin:14px 0 0; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }

/* info line */
.kk-screen .kks-info{ display:flex; gap:8px; align-items:flex-start; margin-top:16px; font-size:12.5px; color:var(--muted); }
.kk-screen .kks-info svg{ flex-shrink:0; margin-top:1px; }

/* sticky mobile CTA */
.kk-screen .kks-sticky{ display:none; }

/* ───────── RESPONSIVE ───────── */
@media (max-width:980px){
  .kk-screen .kks-hero-grid{ grid-template-columns:1fr; }
  .kk-screen .kks-promo{ grid-template-columns:1fr; }
  .kk-screen .kks-capture-grid{ grid-template-columns:1fr; gap:20px; }
  .kk-screen .kks-grid,.kk-screen .kks-grid-3,.kk-screen .kks-brandgrid,.kk-screen .kks-trust,.kk-screen .kks-why{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .kk-screen{ font-size:14px; }
  .kk-screen .kks-hero{ padding:14px; border-radius:var(--r-lg); }
  .kk-screen .kks-photo{ aspect-ratio:4/3; }
  .kk-screen .kks-h1{ font-size:30px; }
  .kk-screen .kks-hero-cta{ flex-direction:column; }
  .kk-screen .kks-hero-cta .btn{ width:100%; }
  /* горизонтальные карусели на мобиле, как в прототипе */
  .kk-screen .kks-grid,.kk-screen .kks-brandgrid{ display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; }
  .kk-screen .kks-grid::-webkit-scrollbar,.kk-screen .kks-brandgrid::-webkit-scrollbar{ display:none; }
  .kk-screen .kks-grid > *{ min-width:230px; max-width:230px; scroll-snap-align:start; }
  .kk-screen .kks-brandgrid > *{ min-width:150px; max-width:150px; scroll-snap-align:start; }
  .kk-screen .kks-why,.kk-screen .kks-trust{ grid-template-columns:1fr 1fr; }
  .kk-screen .kks-channels .btn{ flex:1 1 100%; }
  /* sticky CTA */
  .kk-screen .kks-sticky{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:rgba(245,247,250,.97); backdrop-filter:blur(20px); border-top:1px solid var(--border); gap:10px; align-items:center; }
  .kk-screen .kks-sticky .btn{ flex:1; padding:14px 16px; }
  .kk-screen .kks-sticky-spacer{ height:78px; }
}
@media (max-width:430px){
  .kk-screen .kks-why,.kk-screen .kks-trust{ grid-template-columns:1fr; }
}