/* Дизайн-система Ценопульс — раздел 29 итогового документа, токены воспроизведены
   буквально (29.2 палитра, 29.3 типографика, 29.4 сетка/форма, 29.5 карточка сделки).
   Светлая тема ОСНОВНАЯ (не тёмная по умолчанию) — 29.2: "она честнее для товарного
   контента... светлый интерфейс читается при дневном свете на улице". */

:root {
  --canvas: #F7F7F5;
  --paper: #FFFFFF;
  --sunken: #F0F0ED;
  --line: #E4E4E0;
  --line-strong: #D0D1CB;
  --ink-900: #16181C;
  --ink-700: #2F333A;
  --ink-500: #6B7178;
  --ink-400: #8E959D;
  --ink-300: #B7BDC4;

  --deal-700: #056B45;
  --deal-600: #077A4E;
  --deal-500: #0AA86A;
  --deal-400: #2FC98A;
  --deal-100: #C9EEDB;
  --deal-050: #EAF8F1;

  --hot: #D9401F;
  --hot-050: #FDEDE9;
  --warn: #A85E00;
  --warn-icon: #E08A00;
  --danger: #C7261C;
  --info: #1560C4;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --max-width: 1280px;
  --shadow-overlay: 0 12px 32px rgba(20, 22, 26, .12);

  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Тёмная тема — переключатель + auto по системной настройке (29.2), НЕ дефолт. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0E0F12; --paper: #16181C; --sunken: #1D2026; --line: #2A2E35; --line-strong: #363B44;
    --ink-900: #F2F4F6; --ink-700: #D6DAE0; --ink-500: #99A0A8; --ink-400: #7A828C; --ink-300: #5C6470;
    --deal-600: #16C97E; --deal-500: #22DC8C; --deal-700: #22DC8C; --deal-050: #102A20; --deal-100: #16382C;
    --hot: #FF6A4D; --hot-050: #3A241E; --danger: #FF5A50;
  }
}
:root[data-theme="dark"] {
  --canvas: #0E0F12; --paper: #16181C; --sunken: #1D2026; --line: #2A2E35; --line-strong: #363B44;
  --ink-900: #F2F4F6; --ink-700: #D6DAE0; --ink-500: #99A0A8; --ink-400: #7A828C; --ink-300: #5C6470;
  --deal-600: #16C97E; --deal-500: #22DC8C; --deal-700: #22DC8C; --deal-050: #102A20; --deal-100: #16382C;
  --hot: #FF6A4D; --hot-050: #3A241E; --danger: #FF5A50;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-700);
  font-family: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "zero" 1;
  line-height: 1.55;
  font-size: 15px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }
@media (min-width: 1200px) { .container { padding: 0 32px; } }

header.site {
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) 0;
  background: var(--paper);
}
header.site .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: var(--radius-sm); display: block; }
.brand-word { font-weight: 700; font-size: 20px; color: var(--ink-900); }
.brand-word span { color: var(--deal-700); }

nav.site { display: flex; align-items: center; gap: var(--space-4); }
nav.site a {
  color: var(--ink-500);
  text-decoration: none;
  font-size: 14px;
  transition: color 140ms var(--ease);
}
nav.site a:hover { color: var(--ink-900); }

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--ink-500);
  border-radius: var(--radius-full);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink-900); border-color: var(--line-strong); }

main { padding: var(--space-8) 0 var(--space-16); }

h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-2); color: var(--ink-900); }
h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; margin: var(--space-6) 0 var(--space-3); color: var(--ink-900); }
h3 { font-size: 1.25rem; line-height: 1.3; margin: var(--space-4) 0 var(--space-2); color: var(--ink-900); }
p.lede { color: var(--ink-500); font-size: 17px; margin: 0 0 var(--space-6); }

.deal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .deal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .deal-grid { grid-template-columns: repeat(4, 1fr); } }

/* Карточка сделки — раздел 29.5, главный компонент продукта. Иерархия фоном+границей,
   без теней (29.4: "тени только у оверлеев"). */
.deal-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink-700);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 140ms var(--ease);
  position: relative;
}
.deal-card:hover { border-color: var(--deal-500); }
.deal-card:focus-visible { outline: 2px solid var(--deal-500); outline-offset: 2px; }

.deal-card-top { display: flex; justify-content: space-between; align-items: flex-start; }

/* Бейдж "Рекорд" — редко, только для настоящего исторического минимума (29.2/29.5:
   "если он на каждой карточке, мы превратились в тот самый рыночный развал"). */
.badge-hot {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--hot-050); color: var(--hot);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: var(--radius-full);
  width: fit-content;
}
.badge-fake {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--hot-050); color: var(--danger);
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-full);
  width: fit-content;
}

.deal-shop { color: var(--ink-500); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.deal-title {
  font-size: 15px; font-weight: 600; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 40px;
}

.deal-price-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.deal-price {
  font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.deal-price-before { color: var(--ink-500); text-decoration: line-through; font-size: 15px; }
.deal-discount { color: var(--deal-700); font-weight: 600; font-size: 14px; }

.spark { display: block; width: 100%; height: 40px; }
.spark-fill { fill: var(--deal-100); }
.spark-line { fill: none; stroke: var(--deal-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { fill: var(--deal-400); }

.deal-min-caption { color: var(--ink-500); font-size: 13px; }

.deal-cta {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  background: var(--deal-600);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.deal-score { color: var(--ink-400); font-size: 12px; }

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--ink-500);
  background: var(--paper);
}

.deal-detail {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.deal-detail .spark { height: 160px; margin: var(--space-4) 0; }
.deal-detail dl { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.deal-detail dt { color: var(--ink-500); }
.deal-detail dd { margin: 0; color: var(--ink-900); }
.deal-detail a.buy-link {
  display: inline-block;
  margin-top: var(--space-4);
  background: var(--deal-600);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
}

.score-breakdown { margin-top: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.score-breakdown summary { cursor: pointer; color: var(--ink-500); font-size: 14px; }
.score-breakdown table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: 13px; }
.score-breakdown td, .score-breakdown th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.score-breakdown .na { color: var(--ink-400); font-style: italic; }

article.prose { max-width: 720px; }
article.prose p, article.prose li { color: var(--ink-500); }
article.prose h1, article.prose h2 { color: var(--ink-900); }

footer.site {
  border-top: 1px solid var(--line);
  padding: var(--space-6) 0;
  color: var(--ink-500);
  font-size: 13px;
}
footer.site a { color: var(--ink-500); }
footer.site a:hover { color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* === Композиция главной — раздел 29.17 ТЗ (патч №1, И-4) === */

.search { flex: 1; max-width: 480px; position: relative; }
.search input {
  width: 100%; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--sunken);
  padding: 0 12px 0 36px;
  font: inherit; font-size: 14px; outline: none;
  color: var(--ink-700);
}
.search input:focus {
  border-color: var(--deal-500);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--deal-050);
}
.search svg { position: absolute; left: 11px; top: 10px; color: var(--ink-400); pointer-events: none; }

.hcats {
  display: flex; gap: 4px; overflow-x: auto;
  margin: var(--space-2) 0 0;
  padding-bottom: 2px;
}
.hcats a {
  font-size: 14px; color: var(--ink-500);
  padding: 6px 10px; border-radius: var(--radius-sm);
  white-space: nowrap; text-decoration: none;
}
.hcats a.on { color: var(--deal-700); font-weight: 600; background: var(--deal-050); }
.hcats a:hover { background: var(--sunken); }

.pulse-strip {
  background: var(--ink-900); color: #fff;
  display: flex; gap: var(--space-6); align-items: center;
  height: 42px; padding: 0 16px; border-radius: var(--radius-md);
  font-size: 13px; overflow-x: auto; margin: var(--space-4) 0;
}
.pulse-strip b { color: var(--deal-400); font-weight: 600; }
.pulse-strip span { color: #B9BFC6; white-space: nowrap; }
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--deal-400); display: inline-block;
  animation: pulse-blink 3s infinite;
}
@keyframes pulse-blink { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

.main-layout { display: grid; grid-template-columns: 1fr 316px; gap: var(--space-6); }
@media (max-width: 1100px) { .main-layout { grid-template-columns: 1fr; } .aside { display: none; } }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.tabs a {
  padding: 9px 14px; font-weight: 600; font-size: 15px;
  color: var(--ink-500); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.on { color: var(--ink-900); border-bottom-color: var(--deal-500); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.chip {
  font-size: 13px; padding: 5px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  background: var(--paper); color: var(--ink-500);
}

.thumb {
  position: relative; aspect-ratio: 4/3;
  background: var(--sunken); border-radius: var(--radius-md);
  display: grid; place-items: center; color: var(--ink-400);
  margin-bottom: var(--space-2);
}
.thumb .badge-hot, .thumb .badge-fake { position: absolute; top: 9px; left: 9px; }

.deal-discount-m { color: var(--ink-400); font-weight: 400; }

.deal-detail-hero { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.deal-detail-thumb { width: 180px; aspect-ratio: 1; margin-bottom: 0; flex: none; }
.deal-detail-hero > div:last-child { flex: 1; min-width: 240px; }

.aside section {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4);
}
.aside h3 { margin: 0 0 var(--space-3); font-size: 14px; }
.alertbox { background: linear-gradient(180deg, var(--deal-050), var(--paper)); border-color: var(--deal-100); }
.alertbox p { font-size: 13px; color: var(--ink-500); margin: 0 0 var(--space-3); }
.btn-block {
  width: 100%; background: var(--ink-300); color: #fff; border: 0;
  padding: 10px; border-radius: var(--radius-md); font-weight: 600; cursor: not-allowed;
}
.mini { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.mini:first-of-type { border-top: 0; padding-top: 0; }
.m-th { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--sunken); flex: none; display: grid; place-items: center; color: var(--ink-400); }
.m-t { font-size: 13px; color: var(--ink-900); line-height: 1.3; }
.m-p { font-size: 13px; font-weight: 700; color: var(--ink-900); margin-top: 3px; }
.m-p s { color: var(--ink-400); font-weight: 400; font-size: 11.5px; margin-left: 5px; }
.shops-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 8px; border-radius: var(--radius-sm); }
.shops-row:hover { background: var(--sunken); }
.shops-pct { color: var(--ink-400); }

.empty-state h3 { margin: 0 0 6px; }
.empty-state p { margin: 0; font-size: 14px; }

.method-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 14px; }
.method-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.method-table td:last-child { text-align: right; font-weight: 600; color: var(--ink-900); }
.note {
  background: var(--deal-050); border: 1px solid var(--deal-100);
  border-radius: var(--radius-md); padding: 12px 14px;
  font-size: 13.5px; color: var(--deal-700); margin: var(--space-4) 0;
}

/* реальное фото товара из фида (приоритет над иконкой-заглушкой) */
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.m-th img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); background: #fff; }
.deal-detail-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* --- Р-15: страницы товара/магазина/истории/промокодов/алертов --- */
.crumbs { font-size: 13px; color: var(--ink-400); margin: 16px 0 0; }
.crumbs a:hover { color: var(--deal-700); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; }
.panel h2, .panel h3 { margin: 0 0 10px; color: var(--ink-900); font-size: 15px; }
.cols { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; padding-top: 12px; }
@media (max-width: 980px) { .cols { grid-template-columns: 1fr; } }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.kpi b { display: block; font-size: 22px; color: var(--ink-900); letter-spacing: -.02em; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--ink-400); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-400); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td { padding: 10px; border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: 0; }
.tag { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-500); font-weight: 600; white-space: nowrap; }
.tag.r { background: var(--hot-050); color: var(--danger); }
.tag.g { background: var(--deal-050); color: var(--deal-700); }
.period-chips { display: flex; gap: 6px; margin-top: 12px; }
.shop-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.shop-badge { width: 74px; height: 74px; border-radius: var(--radius-md); background: var(--sunken); display: grid; place-items: center; font-weight: 800; color: var(--ink-500); font-size: 22px; }
.h1-page { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); margin: 12px 0 4px; }
.sub-lede { color: var(--ink-500); margin: 0 0 16px; font-size: 14px; }
.alert-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.alert-form input { flex: 1; min-width: 240px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 12px; font: inherit; background: var(--paper); color: var(--ink-900); }
.flash-note { background: var(--deal-050); border: 1px solid var(--deal-100); color: var(--deal-700); padding: 11px 13px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 14px; }