/* Toplist refinements (js/60-roundup.js adds the classes used here).
   The price is drawn as a hardware-store hang tag — the one place the page leans on
   the byggvaruhus vernacular. Everything else stays quiet: reading order, alignment
   and a clear destination for every buy link. */

/* The list head lines up with the list instead of the wider band. */
#topplistan > .kr-section-head {
  box-sizing: border-box;
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
}

/* Rows without a product picture (quote services) give the space to the text. */
.kr-roundup__row:has(> .kr-roundup__media:empty) .kr-roundup__media {
  display: none;
}
.kr-roundup__row:has(> .kr-roundup__media:empty) .kr-roundup__body {
  grid-column: 2 / -1;
}

/* Reading order everywhere: what it is and costs, why to buy, the honest drawback,
   then the button. */
.kr-roundup__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.kr-roundup__toprow {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.kr-roundup__prices {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  white-space: normal;
}
/* Ribbon tag above the name, price below it: the order a shelf label is read in. */
.kr-roundup__toprow .kr-roundup__prices {
  display: contents;
}
.kr-roundup__toprow .kr-tag {
  order: -1;
  white-space: normal;
  text-align: left;
}
.kr-roundup__toprow .kr-price {
  order: 1;
}
.kr-roundup__line {
  order: 1;
}
.kr-roundup__spec {
  order: 2;
}
.kr-roundup__links {
  order: 3;
}

/* Hang-tag price: rounded tag end with a punched hole, typewriter numerals. */
.kr-roundup__prices .kr-price {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem 0.35rem 1.75rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: normal;
  background: var(--kr-paper);
  border: 1.5px solid var(--kr-ink);
  border-radius: 1.125rem 3px 3px 1.125rem;
}
.kr-roundup__prices .kr-price::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border: 1.5px solid var(--kr-ink);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--kr-panel);
}

/* Product names are links too. */
.kr-roundup__name a {
  color: inherit;
  text-decoration: none;
}
.kr-roundup__name a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* The drawback reads as a plain note, labelled, not as a bullet list. */
.kr-roundup__spec {
  list-style: none;
  padding: 0;
}
.kr-roundup__spec li + li {
  margin-top: 0.25rem;
}
.gg-con {
  color: var(--kr-ink);
  font-weight: 700;
}

/* Where the button goes, said before it is pressed. */
.kr-roundup__links {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.gg-dest {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--kr-grafit);
}

/* The editors' first choice sits on a panel so it is found at a glance. */
.kr-roundup__row.gg-first {
  margin-inline: calc(clamp(0.9rem, 2vw, 1.4rem) * -1);
  padding-inline: clamp(0.9rem, 2vw, 1.4rem);
  background: var(--kr-panel);
}

/* "Kort svar" is the answer most readers came for: a panel they can find again. */
.gg-short {
  padding: 1.05rem 1.25rem 1.15rem;
  background: var(--kr-panel);
  border-left: 4px solid var(--kr-ink);
}

/* Phones keep the button right under the price (see 30-conversion.css). */
@media (max-width: 781px) {
  .kr-roundup__links {
    order: 1;
    align-items: stretch;
  }
  .kr-roundup__line {
    order: 2;
  }
  .kr-roundup__spec {
    order: 3;
  }
  .kr-roundup__media {
    max-width: 8.5rem;
  }
}