/* ПроКупи · раздел «Крепёж и инструмент» и карточка магазина · pk-kr1 (30.09.2026). Всё под .kr / .krl / .krc — чужое не задевает. */
.kr, .krl { --kr-ink:#1A1F2B; --kr-mu:#5B6472; --kr-bd:#D9DEE7; --kr-bg:#EEF1F5; --kr-red:#E53935; --kr-or:#F26A1B; --kr-dark:#1E2838;
  background:var(--kr-bg); color:var(--kr-ink); font-family:Inter,Manrope,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
.kr *, .krl * { box-sizing:border-box; }
.kr a, .krl a { text-decoration:none; }
/* шапка раздела */
/* фильтры и список */
.kr-wrap { display:flex; gap:22px; padding:22px 20px 36px; align-items:flex-start; max-width:1440px; margin:0 auto; }
.kr-flt { } /* pk-cn3: фильтры живут в колонке слева (ПК) и в панели справа (телефон) */
.kr-flt-top { display:none; }
.kr-flt h4 { font-size:10.5px; letter-spacing:.6px; color:var(--kr-mu); margin:14px 0 7px; font-weight:800; text-transform:uppercase; }
.kr-flt h4:first-of-type { margin-top:0; }
.kr-inp { width:100%; border:1px solid var(--kr-bd); border-radius:8px; padding:8px 10px; font-size:13px; background:#F8FAFC; color:var(--kr-ink); }
.kr-two { display:flex; gap:8px; align-items:center; } .kr-two i { font-style:normal; color:var(--kr-mu); }
.kr-chips { display:flex; flex-wrap:wrap; gap:5px; }
.kr-chip { cursor:pointer; } .kr-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.kr-chip span { display:inline-block; border:1px solid var(--kr-bd); border-radius:14px; padding:3px 9px; font-size:12px; font-weight:600; color:#2A3242; background:#fff; }
.kr-chip input:checked + span { background:#1F2937; border-color:#1F2937; color:#fff; }
.kr-chip input:focus-visible + span { outline:2px solid var(--kr-or); }
.kr-more { display:contents; } .kr-more summary { list-style:none; cursor:pointer; border:1px dashed #C2410C; color:#C2410C; border-radius:14px; padding:3px 9px; font-size:12px; font-weight:700; }
.kr-more summary::-webkit-details-marker { display:none; } .kr-more[open] summary { display:none; }
.kr-chk { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; cursor:pointer; }
.kr-chk input { width:16px; height:16px; accent-color:#16A34A; }
.kr-go { margin-top:16px; width:100%; border:none; cursor:pointer; background:linear-gradient(180deg,#D9480F,#B83A0B); color:#fff; border-radius:9px; padding:11px; font-weight:800; font-size:13.5px; }
.kr-reset { display:block; text-align:center; margin-top:9px; font-size:12.5px; color:#C2410C; font-weight:700; }
.kr-main { flex:1; min-width:0; }
.kr-fbtn { display:none; }
.kr-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.kr-bar h1 { font-size:15px; font-weight:800; margin:0; } .kr-bar h1 span { font-weight:500; color:var(--kr-mu); }
.kr-sort { background:#fff; border-radius:8px; padding:6px 10px; font-size:12.5px; border:1px solid var(--kr-bd); color:var(--kr-ink); }
.kr-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.kr-empty { background:#fff; border-radius:12px; padding:34px 20px; text-align:center; color:var(--kr-mu); }
.kr-empty b { display:block; color:var(--kr-ink); font-size:16px; margin-bottom:6px; } .kr-empty a { color:#C2410C; font-weight:700; }
.kr-pg { display:flex; gap:6px; justify-content:center; margin:22px 0 6px; flex-wrap:wrap; }
.kr-pg a, .kr-pg span { min-width:36px; padding:7px 10px; border-radius:8px; background:#fff; color:var(--kr-ink); font-weight:700; font-size:13px; text-align:center; border:1px solid var(--kr-bd); }
.kr-pg a.on { background:#1F2937; color:#fff; border-color:#1F2937; } .kr-pg span { border:none; background:none; }
.kr-seo { margin-top:26px; background:#fff; border-radius:12px; padding:16px 18px; color:#475063; font-size:13px; line-height:1.55; }
.kr-seo h2 { font-size:15px; color:var(--kr-ink); margin:0 0 6px; }
/* карточка в сетке */
.krc { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(20,30,50,.08); display:flex; flex-direction:column; color:var(--kr-ink); transition:transform .15s, box-shadow .15s; }
.krc:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,30,50,.13); }
.krc-ph { position:relative; height:190px; display:flex; align-items:center; justify-content:center; background:#fff; border-bottom:1px solid #F1F3F7; }
.krc-ph img { max-width:88%; max-height:172px; object-fit:contain; } .krc-ph img.tl { max-height:118px; opacity:.95; }
.krc-nof { width:60%; height:60%; background:#F1F3F7; border-radius:10px; }
.krc-shop { position:absolute; left:8px; top:8px; z-index:1; background:#141A24; color:#fff; font-size:10.5px; font-weight:700; border-radius:6px; padding:3px 7px; }
.krc-shop em { color:#FF9A3D; font-style:normal; }
.krc-bd { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.krc-pr { color:var(--kr-red); font-weight:800; font-size:17px; } .krc-pr small { color:var(--kr-mu); font-weight:600; font-size:12px; }
.krc-tt { font-weight:700; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.krc-gr { background:#F1F5F9; border-radius:6px; padding:4px 7px; font-size:11px; color:#475063; align-self:flex-start; }
.krc-loc { font-size:11px; color:#6B7483; display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:auto; }
.krc-loc svg { width:9px; height:12px; fill:var(--kr-red); flex:0 0 auto; }
.krc-loc b.st-ok { color:#15803D; } .krc-loc b.st-ask { color:#C2410C; } .krc-loc b.st-ord { color:#6B7483; }
/* карточка магазина */
.krl-page { background:#EEF1F5; }
.krl { max-width:1120px; margin:0 auto; padding:14px 20px 34px; background:transparent; }
.kr-crumbs2 { font-size:12px; color:#6B7483; margin-bottom:12px; } .kr-crumbs2 a { color:#6B7483; } .kr-crumbs2 b { color:var(--kr-ink); font-weight:600; }
.krl-adm { background:#FFF7ED; border:1px solid #FED7AA; border-radius:10px; padding:8px 12px; font-size:12.5px; margin-bottom:12px; }
.krl-adm a { color:#C2410C; font-weight:700; }
.krl-row { display:flex; gap:18px; align-items:stretch; }
.krl-box { background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(20,30,50,.08); padding:18px; }
.krl-gal { flex:0 0 52%; min-width:0; }
.krl-big { height:380px; display:flex; align-items:center; justify-content:center; }
.krl-big img { max-height:360px; max-width:94%; object-fit:contain; } .krl-big img.tl { max-height:220px; }
.krl-th { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.krl-th button { width:62px; height:62px; border:1px solid #E2E6EE; border-radius:8px; padding:4px; background:#fff; cursor:pointer; }
.krl-th button.on { border:2px solid var(--kr-or); } .krl-th img { width:100%; height:100%; object-fit:contain; }
.krl-inf { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.krl-shop { align-self:flex-start; background:#141A24; color:#fff; font-size:11.5px; font-weight:700; border-radius:6px; padding:4px 9px; }
.krl-shop em { color:#FF9A3D; font-style:normal; }
.krl-inf h1 { font-size:21px; line-height:1.25; font-weight:800; margin:0; }
.krl-sub { font-size:12px; color:#6B7483; }
.krl-price { color:var(--kr-red); font-weight:800; font-size:28px; } .krl-price small { font-size:14px; color:var(--kr-mu); font-weight:600; }
.krl-hint { font-size:12.5px; color:#475063; line-height:1.4; }
.krl-tags { display:flex; gap:6px; flex-wrap:wrap; } .krl-tags span { border-radius:6px; padding:4px 9px; font-size:11.5px; font-weight:700; }
.krl-tags .g { background:#DCFCE7; color:#166534; } .krl-tags .o { background:#FFEDD5; color:#9A3412; } .krl-tags .s { background:#F1F5F9; color:#475063; }
.krl-pack { font-size:12.5px; color:#475063; }
.krl-btns { display:flex; gap:10px; }
.krl-b1 { flex:1; background:#16A34A; color:#fff; border-radius:10px; padding:12px; text-align:center; font-weight:800; font-size:14px; box-shadow:0 2px 6px rgba(22,163,74,.3); }
.krl-b1:hover { background:#15803D; }
.krl-b2 { flex:1; border:2px solid var(--kr-ink); color:var(--kr-ink); border-radius:10px; padding:10px; text-align:center; font-weight:800; font-size:14px; }
.krl-b2.dis { opacity:.5; }
.krl-acts { display:flex; gap:8px; }
.krl-ib { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--kr-bd); background:#fff; border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--kr-ink); }
.krl-ib svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.krl-ib.on svg { fill:#e11d48; stroke:#e11d48; }

/* pk-cn1: сердечко «в избранное» прямо на фото — как у карточек ленты */
.krl-big { position:relative; }
.krc-fav, .krl-phfav { position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.16); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.krc-fav svg, .krl-phfav svg { width:19px; height:19px; fill:none; stroke:#1a1a1a; stroke-width:1.7; stroke-linejoin:round; }
.krc-fav.on svg, .krl-phfav.on svg { fill:#e11d48; stroke:#e11d48; }
.krl-phfav { top:12px; right:12px; width:42px; height:42px; } .krl-phfav svg { width:22px; height:22px; }
.krl-tab { width:100%; border-collapse:collapse; font-size:12.5px; } .krl-tab td { padding:7px 4px; border-bottom:1px solid #EEF1F5; vertical-align:top; }
.krl-tab td:first-child { color:#6B7483; width:40%; }
.krl-sz, .krl-ds, .krl-sel { margin-top:16px; }
.krl-sz h2, .krl-ds h2, .krl-h { font-size:15px; font-weight:800; margin:0 0 10px; } .krl-sz h2 span { font-weight:500; color:#6B7483; font-size:12.5px; }
.krl-sc { display:flex; flex-wrap:wrap; gap:6px; }
.krl-sc i { font-style:normal; border:1px solid var(--kr-bd); border-radius:7px; padding:4px 8px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; }
.krl-sc i.more { display:none; } .krl-sc.all i.more { display:flex; }
.krl-sc i em { font-style:normal; color:var(--kr-red); }
.krl-sc s, .krl-leg s { width:6px; height:6px; border-radius:50%; display:inline-block; text-decoration:none; background:#16A34A; }
.krl-sc s.ask, .krl-leg s.ask { background:#F59E0B; } .krl-sc s.ord, .krl-leg s.ord { background:#94A3B8; }
.krl-more { border:1px dashed #C2410C; color:#C2410C; background:#fff; border-radius:7px; padding:4px 10px; font-size:12px; font-weight:800; cursor:pointer; }
.krl-sc.all .krl-more { display:none; }
.krl-leg { font-size:11px; color:#6B7483; margin-top:8px; display:flex; gap:14px; } .krl-leg s { margin-right:4px; }
.krl-ds p { font-size:13.5px; line-height:1.55; color:#2A3242; margin:0 0 8px; }
.krl-lab { font-size:11px; color:#6B7483; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.krl-seln { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .krl-seln b { font-size:16px; }
.krl-orgv { background:linear-gradient(135deg,#0f766e,#14b8a6); color:#fff; font-weight:800; font-size:12px; border-radius:999px; padding:3px 10px; }
.krl-sel a { color:#C2410C; font-weight:700; font-size:13px; }
.krl-h { margin-top:22px; } .krl-rel { margin-top:0; }
.krl-adw { margin-top:16px; }
@media (max-width:1000px) { .kr-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .kr-wrap { display:block; padding:12px; }
  .kr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .krc-ph { height:140px; } .krc-ph img { max-height:125px; } .krc-ph img.tl { max-height:90px; }
  .krc-pr { font-size:15px; } .krc-tt { font-size:12px; } .krc-bd { padding:9px 10px 11px; }
  .krl { padding:10px 12px 26px; } .krl-row { flex-direction:column; } .krl-gal { flex:none; }
  .krl-big { height:260px; } .krl-big img { max-height:240px; } .krl-inf h1 { font-size:18px; } .krl-price { font-size:24px; }
}