/* Produktkortens märkning och brödtext.
 *
 * Mallen renderar `item.tag` som `.kr-tag.kr-tag--rea`, och `--rea` är temats
 * REA-färg: röd platta med vit text. Våra taggar är inte reor — de är specar
 * ("GJUTJÄRN", "MAX 200 KG", "BILLIGAST PER GRAM"). Röd platta på dem lovar en
 * rabatt som inte finns, och det är precis den sortens signal sajten säger emot.
 * Ingen tagg i innehållet är en verklig rea, kontrollerat innan den här filen
 * skrevs, så vi neutraliserar färgen inne i kortlistan och lämnar `--rea` intakt
 * överallt annars ifall en riktig rea dyker upp senare.
 *
 * Stämpeln får i stället bläckplatta mot papper: hög kontrast, samma
 * skrivmaskinskänsla som priserna, och den läser som en faktaetikett.
 */
.kr-roundup .kr-tag--rea {
  color: var(--kr-paper);
  background: var(--kr-ink);
  border-color: var(--kr-ink);
  letter-spacing: 0.1em;
}

/* Brödtexten börjar alltid med en etikett — "Bäst för:", "Bulktyp:", "Klarar:".
 * Den kan inte märkas upp i HTML eftersom `line` escapas, så typografin får göra
 * jobbet: något stramare radavstånd och kortare radlängd gör att ögat hittar
 * etiketten och sedan faktameningen, i stället för att möta en textmassa. */
.kr-roundup__line {
  line-height: 1.5;
  max-width: 34rem;
}

/* Namn och stämpel ska höra ihop visuellt även när priset radbryter på telefon. */
@media (max-width: 40rem) {
  .kr-roundup__prices {
    gap: 0.45rem;
  }
  .kr-roundup .kr-tag--rea {
    font-size: 0.625rem;
  }
}