:root {
  --ink: #142b35;
  --muted: #5c6970;
  --paper: #fbf8f2;
  --stone: #ebe6dc;
  --river: #2f7f78;
  --river-dark: #174a5a;
  --roof: #7f2632;
  --gold: #c9a24a;
  --line: rgba(20, 43, 53, 0.14);
  --line-soft: rgba(20, 43, 53, 0.07);
  --content: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #fbf8f2 0%, #f4f0e8 100%);
  color: var(--ink);
  font-size: 15px;
}

/* Глобального цвета ссылок не было вовсе, поэтому браузер красил их синим
   и фиолетовым после посещения - палитре сайта это чужое. */
a { color: var(--river-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--river-dark); }
a:hover { color: var(--ink); }

/* Шапка липкая: якорь без запаса уезжает под неё. Плавную прокрутку тут
   включать нельзя - страница высотой 15 000 пикселей, и «плавно» означает
   несколько секунд летящего мимо содержимого. */
[id] { scroll-margin-top: 84px; }

/* Единая навигация по разделам. Одни и те же классы во всех трёх стилях —
   иначе шапка на /ucet/ и на /zpravy/ разъезжается при первой же правке. */
.px-nav { display: flex; gap: 2px; }
.px-nav a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 12px; border-radius: 6px 6px 0 0;
  text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.px-nav a b {
  font-size: 12.5px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: inherit;
}
.px-nav a span { font-size: 10.5px; opacity: .75; white-space: nowrap; }
.px-nav a:hover { color: var(--ink); background: rgba(20, 43, 53, .045); }
.px-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.px-nav a.on { color: var(--ink); border-bottom-color: var(--river); }
@media (max-width: 760px) { .px-nav a span { display: none; } .px-nav a { padding: 6px 9px; } }

.top-right { display: flex; align-items: center; gap: 18px; }
.top-nav { display: flex; gap: 16px; }
.top-nav a {
  color: var(--muted); font-size: 12.5px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: 4px 2px; border-bottom: 2px solid transparent;
}
.top-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 10px max(var(--gutter), calc((100% - var(--content)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(14px);
}

.brand { display: inline-flex; width: min(152px, 48vw); }
.brand img { display: block; width: 100%; height: auto; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(201, 162, 74, 0.6);
  border-radius: 5px;
  background: rgba(201, 162, 74, 0.12);
  color: #7a5c14;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

main {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(26px, 5vh, 48px) var(--gutter) 60px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--river-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.08;
}

.lead {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}

.note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.note b { color: var(--ink); }

section { margin-top: clamp(30px, 5vh, 46px); }

h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.15;
}

.summary-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.summary-head p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.9);
}

.card.base { border-color: rgba(20, 43, 53, 0.34); }

.card h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card h3 small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; text-transform: none; }

.card .index { font-family: var(--serif); font-size: 34px; line-height: 1; }
.cshops {
  margin-top: 6px; color: var(--muted); font-size: 11.5px; font-weight: 800;
  letter-spacing: .02em; line-height: 1.45;
}
.card .sum { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.card .bar { height: 6px; margin-top: auto; padding-top: 12px; box-sizing: content-box; border-radius: 3px; background: var(--stone); overflow: hidden; }
.card .bar i { display: block; height: 100%; background: var(--river); }
.card.base .bar i { background: var(--ink); }

.finding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.finding-grid article { padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 7px; background: rgba(255, 253, 248, 0.72); }
.finding-grid h3 { margin: 0 0 8px; font-size: 14px; font-weight: 900; }
.finding-grid p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.finding-grid b { color: var(--ink); }
/* Находка про фасовки одна не заполняет ряд и висит сиротой; она же
   и самая новая - пусть занимает строку целиком. */
.finding-grid article.wide { grid-column: 1 / -1; border-left-color: var(--river); }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.9);
}

.control { display: grid; gap: 5px; }
.control label { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.control input[type=search], .control select {
  height: 38px;
  min-width: 150px;
  padding: 0 10px;
  border: 1px solid rgba(20, 43, 53, 0.2);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: 600 14px/1 var(--sans);
}
.control.search input { min-width: 230px; }
.control input:focus, .control select:focus { border-color: var(--river); box-shadow: 0 0 0 3px rgba(47, 127, 120, 0.14); outline: 0; }
.control.checkbox { display: flex; align-items: center; gap: 7px; height: 38px; }
.control.checkbox label { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* На широком экране таблица помещается целиком - подсказка не нужна. */
.swipe-hint { display: none; }

.table-wrap { margin-top: 16px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 253, 248, 0.94); }

table.grid { width: 100%; min-width: 760px; border-collapse: collapse; }

thead th {
  position: sticky;
  top: 64px;
  z-index: 5;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 248, 242, 0.97);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

thead th span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: none; }
thead th.col-item { text-align: left; }

tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); text-align: right; vertical-align: top; }
tbody tr.item { cursor: pointer; }
tbody tr.item:hover { background: rgba(47, 127, 120, 0.05); }
tbody tr.open { background: rgba(47, 127, 120, 0.07); }

td.item { text-align: left; }
td.item b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; }
td.item span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
/* Откуда взялась пара. Проверенное человеком метки не носит - это норма;
   метку носит то, что доказано штрихкодом и цену получило сопоставлением. */
td.item .proof { display: inline-block; margin: 5px 0 0 5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
td.item .proof.wait { border-color: #ddc9a0; color: #8a6d2f; }

td.item .cat { display: inline-block; margin-top: 5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }

td.cz { font-family: var(--serif); font-size: 17px; white-space: nowrap; }
td.cz small { display: block; color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 800; }

td.cmp { white-space: nowrap; }
td.cmp .delta { font-size: 15px; font-weight: 900; }
td.cmp .abs { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
td.cmp.cheap .delta { color: #1d6d52; }
td.cmp.dear .delta { color: var(--roof); }
td.cmp.none { color: rgba(20, 43, 53, 0.24); font-size: 13px; font-weight: 800; }
td.cmp .approx { display: inline-block; margin-left: 4px; color: var(--gold); font-size: 11px; font-weight: 900; }

tr.detail td { padding: 0 14px 16px; border-bottom: 1px solid var(--line-soft); background: rgba(236, 240, 238, 0.5); text-align: left; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; padding-top: 12px; }
.offer { padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fffdf8; }
.offer h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.offer h4 em { color: var(--muted); font-size: 10.5px; font-style: normal; }
.offer p { margin: 0; font-size: 13px; line-height: 1.4; }
.offer .price { margin-top: 7px; font-family: var(--serif); font-size: 17px; }
.offer .price small { color: var(--muted); font-family: var(--sans); font-size: 11.5px; font-weight: 800; }
.offer a { display: inline-block; margin-top: 7px; color: var(--river-dark); font-size: 12px; font-weight: 800; }
.offer .tag { display: inline-block; margin-top: 6px; padding: 1px 6px; border-radius: 3px; background: rgba(201, 162, 74, 0.18); color: #7a5c14; font-size: 10.5px; font-weight: 900; }
.detail-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }

.empty { padding: 24px; color: var(--muted); font-weight: 800; text-align: center; }

.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.method-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 253, 248, 0.7); }
.method-grid h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.method-grid p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px max(var(--gutter), calc((100% - var(--content)) / 2));
  border-top: 1px solid var(--line);
  background: rgba(20, 43, 53, 0.96);
  color: rgba(255, 253, 248, 0.84);
  font-size: 12.5px;
  font-weight: 800;
}

.engine-note { color: rgba(255, 253, 248, 0.55); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.engine-note strong { color: #4aa8e8; font-size: 12px; font-weight: 900; }

@media (max-width: 980px) {
  /* Здесь таблица уже не влезает: включаем горизонтальный скролл и гасим
     sticky, иначе шапка поедет внутри контейнера. */
  /* Таблица уезжает вбок, и об этом надо сказать: тень у правого края
     показывает, что колонки продолжаются, а подпись объясняет как сузить. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-image: linear-gradient(to left, rgba(20, 43, 53, .13), rgba(20, 43, 53, 0) 26px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 26px 100%;
    background-attachment: local, scroll;
  }
  .swipe-hint {
    display: block; margin: 0 2px 8px;
    color: var(--muted); font-size: 12px; font-weight: 800;
  }
  thead th { position: static; }
}

@media (max-width: 720px) {
  .top { min-height: 56px; }
  .brand { width: min(117px, 44vw); }
  .control.search input, .control input[type=search], .control select { min-width: 0; width: 100%; }
  .control, .control.search { flex: 1 1 100%; }
  footer { flex-direction: column; }
}

/* --- výběr položek a kalkulačka cesty --- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

thead th.col-pick { width: 34px; padding-right: 0; }
td.pick { width: 34px; padding-right: 0; text-align: center; }
td.pick input { width: 16px; height: 16px; accent-color: var(--river); cursor: pointer; }

tbody tr.picked { background: rgba(201, 162, 74, 0.1); }
tbody tr.picked:hover { background: rgba(201, 162, 74, 0.16); }

.lead.short { max-width: 58ch; margin-top: 10px; font-size: 14.5px; }

.trip-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.9);
}

.trip-controls .control input[type=number] {
  width: 120px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(20, 43, 53, 0.2);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: 600 14px/1 var(--sans);
}

.trip-controls .control select { min-width: 230px; }

.trip-out { margin-top: 14px; }
.trip-empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); font-size: 13.5px; font-weight: 700; }

.verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

.verdict {
  padding: 15px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--stone);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.94);
}

.verdict.win { border-left-color: #1d6d52; }
.verdict.lose { border-left-color: var(--roof); }

.verdict h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.verdict h3 em { color: var(--muted); font-size: 11px; font-style: normal; letter-spacing: 0; text-transform: none; }
.verdict .net { font-family: var(--serif); font-size: 27px; line-height: 1; }
.verdict.win .net { color: #1d6d52; }
.verdict.lose .net { color: var(--roof); }
.verdict .net span { font-family: var(--sans); font-size: 12px; font-weight: 800; }
.verdict dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 12px 0 0; font-size: 12.5px; }
.verdict dt { color: var(--muted); font-weight: 700; }
.verdict dd { margin: 0; font-weight: 800; text-align: right; }
.verdict .hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }

.trip-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5; }

@media (max-width: 720px) {
  .trip-controls .control, .trip-controls .control select, .trip-controls .control input[type=number] { flex: 1 1 100%; width: 100%; min-width: 0; }
}

/* --- маркery spolehlivosti a akcí --- */

td.cmp .weak,
td.cmp .onsale {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: super;
}

td.cmp .weak { color: var(--roof); }
td.cmp .onsale { color: var(--gold); }
td.cmp.none[title] { cursor: help; }

.offer .tag.weak-tag { background: rgba(127, 38, 50, 0.14); color: #6d2029; }

.offer .tag.ok-tag { background: rgba(47, 127, 120, 0.14); color: #1a5b55; }

/* --- obchody uvnitř země --- */

.offer h4 em { color: var(--muted); font-size: 10.5px; font-style: normal; }

/* Перенос, а не жёсткие колонки: автоперевод страницы удлиняет строки,
   и трёхколоночная сетка обрезала цену по краю карточки. */
.shopline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.shopline .sname { flex: 0 0 auto; }
.shopline .sprice { flex: 0 0 auto; }
.shopline .spack { flex: 1 1 auto; min-width: 0; }
.shopline .sproduct,
.shopline a,
.shopline .tag { flex: 0 0 auto; }

.shopline:first-of-type { border-top: 0; }
.shopline.cheapest { font-weight: 700; }
.shopline.cheapest .sprice { color: #1d6d52; }

.shopline .sname { font-weight: 900; letter-spacing: .02em; }
.shopline .sprice { font-family: var(--serif); font-size: 15px; white-space: nowrap; }
.offer { min-width: 0; overflow-wrap: anywhere; }
.detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.shopline .sprice em { color: var(--muted); font-family: var(--sans); font-size: 10.5px; font-style: normal; font-weight: 700; }
.shopline .spack { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.shopline .sproduct { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.shopline a { color: var(--river-dark); font-size: 11.5px; font-weight: 800; }
.shopline .tag { align-self: flex-start; margin-top: 2px; }

.detail-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

td.cz small { white-space: nowrap; }

.card .sum em { color: var(--muted); font-style: normal; font-weight: 700; }

.shopline .shost {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.shopline.cheapest .shost { border-color: rgba(29, 109, 82, .38); color: #1d6d52; }

/* --- volba země: hlavní ovládací prvek stránky --- */

.picker { margin-top: clamp(24px, 4vh, 34px); }
.picker-label { margin: 0 0 8px; color: var(--river-dark); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.picker-hint { margin: 9px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.tab {
  padding: 9px 16px;
  border: 1px solid rgba(20, 43, 53, .2);
  border-radius: 7px;
  background: rgba(255, 253, 248, .9);
  color: var(--ink);
  cursor: pointer;
  font: 800 14px/1.1 var(--sans);
}

.tab:hover { border-color: var(--river); }

.tab.on {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffdf8;
}

@media (max-width: 560px) { .tab { flex: 1 1 calc(50% - 4px); } }

/* --- vlajky v kolečku --- */

.flag {
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(20, 43, 53, .2);
  border-radius: 50%;
  overflow: hidden;
  vertical-align: -2px;
}

.f-CZ { background: linear-gradient(#fff 50%, #d7141a 50%); }
.f-CZ::before {
  content: ""; position: absolute; left: 0; top: 0;
  border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent;
  border-left: 9px solid #11457e;
}
.f-DE { background: linear-gradient(#151515 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }
.f-AT { background: linear-gradient(#ed2939 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%); }
.f-PL { background: linear-gradient(#fff 50%, #dc143c 50%); }
.f-SK { background: linear-gradient(#fff 33.33%, #0b4ea2 33.33% 66.66%, #ee1c25 66.66%); }

thead th .flag { margin-right: 4px; }
.card h3 .flag, .offer h4 .flag, .verdict h3 .flag { margin-right: 5px; width: 16px; height: 16px; }
.tab .flag { margin-right: 6px; }

/* --- miniatura zboží --- */

.itemrow { display: flex; align-items: flex-start; gap: 11px; }
.itemtext { min-width: 0; }

.thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.thumb.empty { background: var(--stone); }

thead th.col-item, td.item { min-width: 268px; }
td.item .itemtext span { white-space: nowrap; }
td.item .itemtext b { white-space: normal; }

td.item .plink { display: inline-block; margin-top: 5px; color: var(--river-dark); font-size: 11.5px; font-weight: 800; white-space: nowrap; }

.shopline .spack b { font-weight: 600; }

/* Все фасовки товара разом: покупатель выбирает не по размеру пачки,
   а по цене за килограмм, и выгоднее бывает вовсе не самая большая. */
.packs {
  margin: 0 0 .7rem; padding: .55rem .7rem; line-height: 1.7;
  background: var(--soft, #f6f7f9); border-radius: 5px; font-size: .92em;
}
.pklead { font-weight: 600; margin-right: .3rem; }
.packs .pk { white-space: nowrap; }
.packs .pk em { font-style: normal; color: var(--muted, #667); }
.packs .pk.win { font-weight: 600; }
.packs .pk.win em { color: inherit; }
.packnote { display: block; margin-top: .3rem; color: var(--muted, #667); }

/* Сравнение фасовок внутри одного магазина. Единственный случай, где
   разница точно про упаковку, а не про то, в какой стране дешевле. */
.packclean {
  display: block; margin-top: .4rem; padding-top: .4rem;
  border-top: 1px solid var(--line, #e3e6ea);
}

.shopline .sname.more { color: var(--muted); font-weight: 700; }
.finding-link { display: inline-block; margin-top: .4rem; font-weight: 800; }

/* --- Rozbory: колонка регулярных разборов --- */

.research { margin-top: 30px; }
.research h2 { margin: 0 0 6px; }
.research-lead { max-width: 62ch; margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.research-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.research-list li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--river);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.9);
}
.research-list a { font-size: 15.5px; font-weight: 900; }
.r-date {
  display: inline-block; margin-left: 8px; color: var(--muted);
  font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.r-note { display: block; margin-top: 5px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.r-note em { font-style: italic; }
.research-more { margin: 10px 0 0; font-size: 13.5px; font-weight: 800; }
.research-list li.latest { border-left-color: var(--gold); background: rgba(255, 253, 248, 1); }


/* Досыпка строк. Потолок нужен, потому что полный список - страница
   на двести тысяч пикселей, и на ней браузер встаёт. */
.more { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; }
.more span { color: var(--muted); font-size: 13px; font-weight: 800; }
.more button { padding: 9px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; color: inherit; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.more button:hover { border-color: var(--ink); }


/* Оговорка на странице товара: одно предложение это не рынок. Тон не
   тревожный - это уточнение, а не предупреждение, поэтому рамка мягкая. */
.caveat { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--gold); background: rgba(201, 162, 74, .07); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.caveat b { color: var(--ink); }

/* Соседи по рубрике: страница товара перестаёт быть тупиком. */
ul.rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 10px 0 26px; padding: 0; list-style: none; }
ul.rel a { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; color: inherit; text-decoration: none; background: rgba(255, 253, 248, .8); }
ul.rel a:hover { border-color: var(--river); }
ul.rel .rn { font-size: 13.5px; line-height: 1.35; }
ul.rel .rt { color: var(--river); font-size: 12px; font-weight: 900; }

/* Условие использования снимков Open*Facts: ссылка на источник и лицензию. */
footer .credit { color: var(--muted); font-size: 12px; }
footer .credit a { color: inherit; }

/* Метод на главной сжат до трёх предложений: подробности живут отдельной
   страницей. Инструмент не должен объяснять свою кухню раньше, чем сработает. */
.method-short .method-grid { display: none; }
.method-short > p { max-width: 62ch; color: var(--ink-2); }
.method-short .method-link { margin-top: 10px; font-weight: 600; }