main.product { max-width: 900px; }

.crumbs { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.crumbs a { color: var(--river-dark); }

.phead { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.pimg { flex: 0 0 auto; width: 150px; height: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; object-fit: contain; }
.phead > div { flex: 1 1 320px; min-width: 0; }
.phead h1 { max-width: none; font-size: clamp(24px, 3vw, 34px); }
.psub { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.verdict-line { margin: 14px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.4; }
.verdict-line b { color: #1d6d52; }
.pmeta { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }

main.product h2 { margin: 30px 0 12px; font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); font-weight: 700; }

.cblocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; }

.cblock { padding: 14px 15px; border: 1px solid var(--line); border-left: 4px solid var(--stone-2); border-radius: 8px; background: rgba(255, 253, 248, .92); }
.cblock.cheap { border-left-color: #1d6d52; }
.cblock.dear { border-left-color: var(--roof); }
.cblock h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.cblock h3 em { margin-left: auto; font-size: 12.5px; font-style: normal; letter-spacing: 0; text-transform: none; }
.cblock.cheap h3 em { color: #1d6d52; }
.cblock.dear h3 em { color: var(--roof); }

ol.shops { margin: 0; padding: 0; list-style: none; }
ol.shops li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; overflow-wrap: anywhere; }
ol.shops li:first-child { border-top: 0; }
ol.shops li.cheapest .up { color: #1d6d52; }
ol.shops .shop { font-weight: 900; }
ol.shops .store { padding: 1px 6px; border-radius: 20px; background: var(--soft, #f2f2f2);
                  color: var(--muted); font-size: 10.5px; font-weight: 700; }
ol.shops .host { padding: 1px 6px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 10.5px; font-weight: 800; }
ol.shops .up { font-family: var(--serif); font-size: 16px; white-space: nowrap; }
ol.shops .up em { color: var(--muted); font-family: var(--sans); font-size: 10.5px; font-style: normal; font-weight: 700; }
ol.shops .pp { color: var(--muted); font-size: 11.5px; font-weight: 700; }
ol.shops .promo { padding: 1px 6px; border-radius: 3px; background: rgba(201, 162, 74, .2); color: #7a5c14; font-size: 10.5px; font-weight: 900; }
ol.shops a { flex: 0 0 100%; color: var(--river-dark); font-size: 12px; font-weight: 800; }
ol.shops .pname { flex: 0 0 100%; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.35; }

.chartwrap { padding: 14px 12px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 253, 248, .92); }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: rgba(20, 43, 53, .1); stroke-width: 1; }
.chart .ylab { fill: #7a858b; font: 700 10px Inter, sans-serif; text-anchor: end; }
.chart .xlab { fill: #7a858b; font: 700 10px Inter, sans-serif; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.leg { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.leg i { width: 14px; height: 3px; border-radius: 2px; }
.leg b { color: var(--ink); }

.disclaimer { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.disclaimer strong { color: var(--ink); }

.backlink { margin: 26px 0 0; }
.backlink a { color: var(--river-dark); font-size: 13.5px; font-weight: 800; }

/* Все фасовки товара разом. Покупателю важна не величина пачки,
   а цена за килограмм, и выгоднее бывает вовсе не самая большая. */
.packs {
  margin: 0 0 1rem; padding: .6rem .8rem; line-height: 1.7;
  background: var(--soft, #f6f7f9); border-radius: 5px; font-size: .95em;
}
.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: .35rem; color: var(--muted, #667); }

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

/* Второе и следующие balení того же магазина: имя не повторяем,
   иначе один Rohlík читается как три разных магазина. */
.shop.more { color: var(--muted, #667); font-weight: 700; }

/* --- отчёт «большая пачка не значит выгодная» --- */

.produkt .lead { max-width: 62ch; margin: 0 0 .9rem; font-size: 1.02rem; line-height: 1.6; }

table.paradox { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1.8rem; font-size: .93rem; }
table.paradox thead th {
  padding: .5rem .6rem; border-bottom: 2px solid var(--line, #e3e6ea);
  color: var(--muted, #667); font-size: .74rem; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap;
}
table.paradox td {
  padding: .6rem; border-bottom: 1px solid var(--line-soft, #eef1f3);
  vertical-align: top; text-align: left;   /* иначе наследуется выравнивание вправо */
}
table.paradox tbody tr:hover { background: rgba(20, 43, 53, .025); }

.p-item a { color: inherit; text-decoration: none; }
.p-item a:hover b { text-decoration: underline; }
.p-brand { display: block; margin-top: .12rem; color: var(--muted, #667); font-size: .74rem; font-weight: 800; letter-spacing: .03em; }
.p-shop { white-space: nowrap; }
.p-shop small, .p-small small, .p-big small { display: block; margin-top: .12rem; color: var(--muted, #667); font-size: .76rem; font-weight: 700; }
.p-shop .flag { display: inline-block; margin-right: .35rem; width: 14px; height: 14px; vertical-align: -2px; }
.p-small { white-space: nowrap; }
.p-small b { font-size: 1.02rem; }
.p-big { white-space: nowrap; color: var(--muted, #667); }
.p-gap { text-align: right; white-space: nowrap; font-weight: 900; color: #1f7a4d; font-size: 1.02rem; }

@media (max-width: 720px) {
  table.paradox { display: block; overflow-x: auto; }
  table.paradox thead th, table.paradox td { padding: .45rem .4rem; }
}

/* Миниатюра и проверяемость: утверждение про две цены должно вести
   на обе карточки в магазине, иначе проверить его нечем. */
.p-item { display: flex; align-items: flex-start; gap: .6rem; }
.p-text { min-width: 0; }
.p-thumb {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 5px;
  border: 1px solid var(--line-soft, #eef1f3); background: #fff; object-fit: contain;
}
.p-thumb.empty { display: block; background: var(--stone, #f0efea); }
.p-small a, .p-big a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.p-small a:hover, .p-big a:hover { border-bottom-style: solid; }

/* Выпуск, архив и подпись редакции */
.issue {
  margin: 0 0 .5rem; color: var(--muted, #667);
  font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
ul.issues { margin: .6rem 0 1.4rem; padding-left: 1.1rem; line-height: 1.9; }
ul.issues b { color: var(--ink, #142b35); }
.byline {
  margin: 1.6rem 0 .8rem; padding-top: .8rem;
  border-top: 1px solid var(--line, #e3e6ea);
  color: var(--muted, #667); font-size: .88rem;
}
.byline b { color: var(--ink, #142b35); }

/* Vývoj ceny. Kreslí se jen tam, kde archiv nese aspoň dva různé dny
   pozorování; kde je jeden, sekce se nevykreslí vůbec. */
.cena-vyvoj { margin: 1.8rem 0 1.2rem; }
.cena-vyvoj h2 { margin: 0 0 .6rem; font: 600 1.05rem/1.3 var(--serif, Georgia, serif); }
.cenagraf {
  display: block; width: 100%; height: auto;
  background: var(--paper, #fbf8f2);
  border: 1px solid var(--line-soft, #ebe6dc); border-radius: 8px;
}
.cenagraf .mriz { stroke: var(--line-soft, #ebe6dc); stroke-width: 1; }
.cenagraf .osa { font: 400 11px/1 var(--sans, system-ui); fill: var(--muted, #5c6970); }
.cenagraf .osa-y { text-anchor: end; }
.cenagraf .osa-x { text-anchor: middle; }
/* Den, ve kterém jsme opravdu měřili, je v popisku tmavší: hned je vidět,
   které datum nese bod a které je jen dělení osy. */
.cenagraf .osa-x.mereno { fill: var(--ink, #142b35); font-weight: 600; }
.cenagraf .tik { stroke: var(--line-soft, #ebe6dc); stroke-width: 1; }
.cenagraf circle { stroke: var(--paper, #fbf8f2); stroke-width: 1.5; }
.cena-vyvoj .legenda {
  margin: .5rem 0 .2rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .85rem; color: var(--ink, #142b35);
}
.cena-vyvoj .legenda .lg { display: inline-flex; align-items: center; gap: .35rem; }
.cena-vyvoj .legenda i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
.cena-vyvoj .note { margin: .2rem 0 0; color: var(--muted, #5c6970); font-size: .82rem; }