/* TechnoRadar PL — контент-сторінки (zestawienia + блок okazji у poradnikach). Terminal Light.
   Картки scoped під .feed, щоб не конфліктувати з pages.css .card (стаття). */
:root{
  --bg:#f1f1ef; --panel:#ffffff; --card:#ffffff; --hair:#ededeb; --ctrl:#e4e4e2; --ctrl-hover:#cfcfca;
  --text:#111111; --muted:#636363; --muted2:#959595;
  --green:#0a9d5b; --red:#d92d3f; --orange:#ff5a1f; --gold:#d99b00; --coupon:#b8860b; --ink:#111111; --teal:#0d9488;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased}

/* ---- topbar ---- */
.topbar{background:var(--panel); border-bottom:1px solid #e8e8e6; position:sticky; top:0; z-index:20}
.barin{max-width:1120px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.barleft{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font:700 17px/1 var(--sans); letter-spacing:-.02em}
.brand img{width:26px; height:26px; border-radius:50%; object-fit:cover}
.socials{display:flex; align-items:center; gap:8px}
.sicon{width:34px; height:34px; border-radius:50%; border:1px solid #e0e0dd; background:var(--panel); color:var(--muted); display:flex; align-items:center; justify-content:center; transition:.14s; text-decoration:none}
.sicon svg{width:17px; height:17px; display:block}
.sicon:hover{color:#fff; background:#229ed9; border-color:#229ed9}
.sicon--tt:hover{color:#fff; background:var(--ink); border-color:var(--ink)}

/* ---- nav strip (категорії/поради) ---- */
.nav{background:var(--panel); border-bottom:1px solid #e8e8e6}
.navin{max-width:1120px; margin:0 auto; padding:9px 22px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; font:600 12.5px/1.4 var(--sans)}
.nav a{color:var(--muted); text-decoration:none; white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink); text-decoration:underline}
.nav .sep{color:#cfcfca}
.nav .lbl{color:var(--muted2); font:700 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; margin-right:3px}

/* ---- page head ---- */
.k-wrap{max-width:1120px; margin:0 auto; padding:24px 22px 40px}
.k-h1{font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px}
.k-intro{max-width:760px; color:#3a3a3a; font-size:15px; line-height:1.6; margin:0 0 18px}
.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.chips{display:flex; border:1px solid #e0e0dd; border-radius:7px; overflow:hidden}
.chip{border:none; border-right:1px solid #e8e8e6; background:var(--panel); color:var(--muted); font:600 12px/1 var(--mono); padding:8px 13px; cursor:pointer; white-space:nowrap; transition:.12s}
.chip:last-child{border-right:none}
.chip:hover{color:var(--text)}
.chip.active{background:var(--ink); color:#fff}
.fav{border:1px solid #e0e0dd; border-radius:7px; background:var(--panel); color:var(--muted); font:600 12px/1 var(--mono); padding:8px 13px; cursor:pointer; white-space:nowrap; transition:.12s}
.fav:hover{color:var(--text)}
.fav.on{background:var(--gold); color:#2a1d00; border-color:var(--gold)}

/* ---- feed + card (scoped) ----
   Порт затвердженої картки Terminal Light з radar.html (розмітку дає card.shared.js = SSOT).
   min 224px як на головній — у колонці статті (~660px) дає 2 просторі колонки замість 3 тісних.
   Стани card--ended тут НЕ портовано: kolekcja.js фільтрує завершені (grace-показ лише на головній). */
.feed{display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:10px}
.feed .empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:50px 20px; font-size:14px}
.feed .card{position:relative; background:var(--card); border:1px solid #dcdcd9; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .14s, box-shadow .14s; box-shadow:0 1px 3px rgba(20,20,40,.06)}
.feed .card:hover{border-color:var(--ctrl-hover); box-shadow:0 6px 18px rgba(20,20,40,.10)}
/* уся картка клікабельна (stretched-link); ★ і NEW лишаються над ним (z-index 2) */
.feed .cardlink{position:absolute; inset:0; z-index:1; border-radius:8px; -webkit-tap-highlight-color:transparent}
.feed .chev{display:none}
/* велика знижка (≥40%) — помаранчева рамка + 🔥 біля −X% */
.feed .card--hot{border-color:#ff5a1f66}
.feed .card--hot .disc::after{content:"🔥"; font-size:14px; line-height:1}
.feed .photo{position:relative; background:#fff; height:150px; display:flex; align-items:center; justify-content:center; padding:12px; border-bottom:1px solid var(--hair); overflow:hidden}
/* width/height 100% + contain — усі фото вписуються в зону ОДНАКОВО (дрібні теж масштабуються) */
.feed .photo img{width:100%; height:100%; object-fit:contain; transition:transform .25s ease}
@media (hover:hover){ .feed .card:hover .photo img{transform:scale(1.06)} }
/* кнопка-закладка: неактивна контур → збережено суцільна бірюзова */
.feed .star{position:absolute; top:8px; right:8px; width:30px; height:30px; border:none; background:none; box-shadow:none; padding:6px; color:#9a9a9a; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; line-height:0; transition:transform .12s, color .12s}
.feed .star .bm{width:100%; height:100%; display:block}
.feed .star .bm-out{fill:currentColor}
.feed .star .bm-fill{display:none}
.feed .star:hover{color:#5a5a5a}
.feed .star:active{transform:scale(.88)}
.feed .star.on{color:#0bbfa9}
.feed .star.on .bm-out{display:none}
.feed .star.on .bm-fill{display:block; fill:#0bbfa9}
/* бейдж NEW — щойно додана пропозиція (до 3 хв від created_at) */
.feed .newbadge{position:absolute; top:8px; left:8px; z-index:2; background:var(--green); color:#fff; font:800 10px/1 var(--mono); letter-spacing:.09em; padding:5px 8px; border-radius:999px; box-shadow:0 1px 5px rgba(10,157,91,.45); animation:trnewpulse 1.8s ease-in-out infinite}
@keyframes trnewpulse{0%,100%{box-shadow:0 1px 5px rgba(10,157,91,.45)} 50%{box-shadow:0 1px 9px rgba(10,157,91,.8)}}
.feed .body{padding:11px 13px 13px; display:flex; flex-direction:column; gap:6px; flex:1}
.feed .toprow{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.feed .disc{display:flex; align-items:center; gap:5px}
.feed .disc b{font:800 24px/1 var(--mono); color:var(--orange); letter-spacing:-.02em}
.feed .shop{display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1 var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
/* inline-SVG прапори — emoji-прапори у Windows-Chrome рендеряться як літери */
.feed .flag{display:inline-block; width:18px; height:12px; border-radius:2px; overflow:hidden; vertical-align:middle; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.feed .flag svg{display:block; width:100%; height:100%}
.feed .flag.badge{display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:18px; padding:0 3px; background:#e6e6e3; color:#5a5a5a; font:700 8px/12px var(--mono); box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.feed .title{font:500 13.5px/1.3 var(--sans); letter-spacing:-.01em; margin:0; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px}
/* flex-wrap — у вузькій колонці стара ціна/zysk переносяться на новий рядок, а не ріжуться overflow-ом */
.feed .prices{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; border-top:1px dashed #cfcfca; padding-top:8px; margin-top:1px}
.feed .now{font:800 22px/1 var(--mono); color:var(--green); font-variant-numeric:tabular-nums}
.feed .market{font:700 14.5px/1 var(--mono); color:#9b9b9b; text-decoration:line-through; font-variant-numeric:tabular-nums}
/* zysk — золота пігулка (НЕ зелена): щоб не зливалася з зеленою ціною .now */
.feed .save{font:700 11px/1 var(--mono); color:#a87a00; background:#fbf1d6; padding:3px 7px; border-radius:999px; white-space:nowrap; align-self:center}
.feed .coupon{font:700 11px/1 var(--mono); color:var(--coupon); letter-spacing:.5px}
.feed .meta{display:flex; align-items:center; justify-content:space-between; gap:8px; white-space:nowrap; font:700 10.5px/1 var(--mono); color:var(--muted2)}
.feed .verif{color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis}
.feed .found{flex-shrink:0}
.feed .buy{margin-top:auto; text-decoration:none; text-align:center; display:block; background:#ececea; border:1px solid var(--ctrl); color:var(--text); font:600 12.5px/1 var(--mono); padding:9px; border-radius:8px; transition:.14s}
.feed .buy:hover,.feed .card:hover .buy{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---- описовий текст ПІД товарами (zestawienie) ----
   margin без auto: блок по ЛІВОМУ краю нарівні з h1/сіткою (auto центрував → текст «плавав» праворуч) */
.k-outro{max-width:820px; margin:30px 0 0; padding-top:22px; border-top:1px solid #e2e2df}
.k-outro h2{font-size:16px; font-weight:700; margin:22px 0 8px; color:var(--text)}
.k-outro h2:first-child{margin-top:0}
.k-outro p{margin:0 0 6px; color:#3a3a3a; font-size:14.5px; line-height:1.65}
.k-outro .faq{margin-top:4px}
.k-outro .faq h3{font-size:14.5px; font-weight:700; margin:16px 0 4px; color:var(--text)}
.k-outro .faq p{margin:0 0 2px}

/* ---- breadcrumbs (контент-сторінки) ---- */
.crumbs{font:600 11.5px/1 var(--mono); color:var(--muted2); margin:0 0 14px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.crumbs span{margin:0 6px; color:#cfcfca}

/* ---- блок okazji у poradnikach ---- */
.k-mini-h{font-size:16px; font-weight:700; margin:26px 0 12px}
.k-more{display:inline-block; margin-top:14px; font:600 13px/1 var(--mono); color:var(--teal); text-decoration:none}
.k-more:hover{text-decoration:underline}

/* ---- footer ---- */
.foot{max-width:1120px; margin:8px auto 0; padding:18px 22px 40px; color:var(--muted2); font:400 12px/1.7 var(--mono); text-align:center; border-top:1px solid #e8e8e6}
.foot .disclosure{max-width:680px; margin:0 auto 6px; color:var(--muted)}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--ink); text-decoration:underline}

/* на телефонах min 224px природно дає 1 простору колонку — окремий вузький брейкпоінт не потрібен */