/* Soffguiden — runda 3, CRO. Hör ihop med js/50-sg-cro.js.
 *
 * Mätt live 14 oktober 2026 (390 × 664): kortens bild var 88 × 88 px,
 * förstavalets kort såg ut som alla andra, köpknappen stod först efter
 * hela motiveringen (~600 px under namnet) och första kortet låg 7,7–14,2
 * skärmar ned. Allt nedan är tokens; inga nya färger.
 */

/* == 1. Produktbilden: hel bredd på mobil ============================ */
/* Soffan säljs på utseendet; en 88 px miniatyr räcker inte för att avgöra
   om den passar hemmet. Bilden får kortets hela bredd i 4:3 (262 px vid
   390 px skärm), numret står ovanpå i hörnet. 10-sg-media.js läser den
   nya bredden och hämtar butikens skalade variant i rätt storlek. */
@media (max-width: 760px) {
  html body .kr-roundup__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 0.75rem;
    position: relative;
  }
  html body .kr-roundup__media {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  html body .kr-roundup__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
  }
  html body .kr-roundup__num {
    position: absolute;
    z-index: 1;
    top: calc(clamp(1.4rem, 2.4vw, 2rem) + 0.5rem);
    left: 0.5rem;
    padding: 0.1rem 0.45rem;
    background: var(--kr-paper);
    border: var(--kr-rule);
    border-radius: var(--kr-r-sm);
    font-size: 0.9rem;
    color: var(--kr-ink);
    pointer-events: none;
  }
  html body .kr-roundup__body {
    grid-column: 1;
    grid-row: 2;
  }

  /* == 2. Beslutet före motiveringen ================================ */
  /* Ordningen i kortet blir: namn och pris → mått → passar / passar inte
     → butik, lager, prisdatum → köpknapp med butikens villkor och
     måttkollen → den längre motiveringen. Köpknappen står då direkt under
     svaren på "får den plats", "passar den mig" och "vad om jag ångrar
     mig" — i stället för efter ett stycke på 10–15 rader. */
  html body .kr-roundup__body > .kr-roundup__line {
    order: 10;
  }
  html body .kr-roundup__body > .sg-fit-card {
    order: 9;
  }
}

/* Desktop: lite större bild (176 -> 208 px); textspalten är fortfarande
   över 600 px vid 1 440 px. */
@media (min-width: 761px) {
  html body .kr-roundup__row {
    grid-template-columns: 2.8rem minmax(0, 13rem) minmax(0, 1fr);
  }
}

/* Hopp från "Våra val i korthet" och "Varför vi valde den ↓": kortets
   överkant ska inte hamna under den klistriga mastheaden. */
.kr-roundup__row[id] {
  scroll-margin-top: 4.5rem;
}
/* Desktop: mastheaden krymper (~55 px) medan sidan rullar, efter att
   målet räknats ut. Mätt: med 4,5 rem hamnade kortet 17 px från
   överkanten, under den 67 px höga mastheaden. */
@media (min-width: 761px) {
  .kr-roundup__row[id] {
    scroll-margin-top: 8rem;
  }
}

/* == 3. Förstavalets kort ============================================ */
/* Samma formspråk som "Kort svar" i hero (panelgrå yta, svart vänsterlist),
   så att läsaren känner igen produkten hen redan sett överst. Ingen ny
   knapp och ingen accentfärg — accenten betyder rea. */
html body .kr-roundup__row.sg-is-first {
  background: var(--kr-panel);
  border-inline-start: 4px solid var(--kr-ink);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}

.sg-firstpick {
  justify-self: start;
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-ink);
  border-bottom: 2px solid var(--kr-ink);
  padding-bottom: 0.1rem;
}

@media (max-width: 760px) {
  html body .kr-roundup__row.sg-is-first .kr-roundup__num {
    left: calc(clamp(0.75rem, 2vw, 1.25rem) + 0.5rem);
  }
}

/* == 4. Passar / passar inte, läsbara i en blick ===================== */
.kr-roundup__row .kr-roundup__spec li.sg-fitfor,
.kr-roundup__row .kr-roundup__spec li.sg-skipif {
  position: relative;
  box-sizing: border-box;
  padding-left: 1.45rem;
}
.kr-roundup__row .kr-roundup__spec li.sg-fitfor::before,
.kr-roundup__row .kr-roundup__spec li.sg-skipif::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.05rem;
  font-family: var(--kr-mono);
  font-weight: 700;
  text-align: center;
}
.kr-roundup__row .kr-roundup__spec li.sg-fitfor::before {
  content: "✓";
  color: var(--kr-ink);
}
/* Den röda listen finns redan (40-sg-decide-tools.css); krysset står
   innanför den. */
.kr-roundup__row .kr-roundup__spec li.sg-skipif {
  padding-left: 1.85rem;
}
.kr-roundup__row .kr-roundup__spec li.sg-skipif::before {
  content: "✕";
  left: 0.5rem;
  color: var(--kr-rea);
}

/* == 5. Träffytor ==================================================== */
/* "Alla villkor" var 16 px hög och "Kolla om den får plats" en ren
   textrad. Ytan växer utan att raden flyttar sig (negativ marginal). */
.sg-trust a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}

/* == 6. Våra val i korthet =========================================== */
.sg-picks {
  margin-block-start: 1.75rem;
  padding-block-start: 1rem;
  border-top: 3px solid var(--kr-ink);
}

.sg-picks__eyebrow,
.sg-picks__group {
  margin: 0;
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-grafit);
}

.sg-picks__group {
  margin-block-start: 1rem;
  color: var(--kr-ink);
  font-weight: 700;
}

html body .sg-picks__title {
  margin: 0.2rem 0 0.3rem;
  font-family: var(--kr-display);
  font-size: 1.35rem;
  line-height: 1.2;
}

.sg-picks__lede {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--kr-grafit);
}

html body .sg-picks__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-picks__item {
  margin: 0;
  border-bottom: var(--kr-rule);
}

html body .sg-picks__link {
  display: grid;
  grid-template-columns: 1.4rem 3.5rem minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: 0.6rem;
  min-height: 64px;
  padding-block: 0.45rem;
  color: var(--kr-ink);
  text-decoration: none;
}

.sg-picks__link:hover .sg-picks__name,
.sg-picks__link:focus-visible .sg-picks__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sg-picks__link:focus-visible {
  outline: 2px solid var(--kr-rea);
  outline-offset: 2px;
}

.sg-picks__num {
  font-family: var(--kr-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--kr-grafit);
  font-variant-numeric: tabular-nums;
}

.sg-picks__thumb {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--kr-panel);
  border-radius: var(--kr-r-sm);
  overflow: hidden;
}

.sg-picks__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-picks__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.sg-picks__flag {
  font-family: var(--kr-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-ink);
}

.sg-picks__name {
  font-family: var(--kr-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sg-picks__why {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--kr-grafit);
}

.sg-picks__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.1rem;
}

.sg-picks__price {
  font-family: var(--kr-mono);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sg-picks__merchant,
.sg-picks__checked {
  max-width: 7.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--kr-grafit);
}

.sg-picks__go {
  font-family: var(--kr-mono);
  color: var(--kr-grafit);
  text-align: center;
}

.sg-picks__item--first .sg-picks__link {
  background: var(--kr-panel);
  box-shadow: inset 4px 0 0 var(--kr-ink);
  padding-inline-start: 0.6rem;
}

@media (max-width: 420px) {
  html body .sg-picks__link {
    grid-template-columns: 1.1rem 3rem minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .sg-picks__thumb {
    width: 3rem;
    height: 3rem;
  }
  .sg-picks__go {
    display: none;
  }
}

/* == 7. Genvägar till topplistorna (förstasidan, /topplistor/) ========= */
.sg-route {
  margin-block-start: 1.1rem;
  min-width: 0;
}

.sg-route__label {
  margin: 0 0 0.45rem;
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-grafit);
}

html body .sg-route__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sg-route__list li {
  margin: 0;
}

html body .sg-route__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--kr-ink);
  border-radius: var(--kr-r-sm);
  background: transparent;
  color: var(--kr-ink);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.sg-route__chip:hover,
.sg-route__chip:focus-visible {
  background: var(--kr-panel);
}

.sg-route__chip:focus-visible {
  outline: 2px solid var(--kr-rea);
  outline-offset: 2px;
}

/* Mobil: en rad som sveps i sidled i stället för fyra rader chips. */
@media (max-width: 760px) {
  html body .sg-route__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: 0.2rem;
    -webkit-overflow-scrolling: touch;
  }
  .sg-route__list::-webkit-scrollbar {
    display: none;
  }
  .sg-route__list li {
    flex: 0 0 auto;
  }
}

/* == 8. Cookie-rutan: läsbart val ==================================== */
/* "Endast nödvändiga" hade grå text på grå botten (svag kontrast) medan
   "Acceptera" var fylld. Båda valen ska gå att läsa lika lätt; texten blir
   svart och båda knapparna minst 44 px på desktop också. */
html body #smedja-consent button {
  min-height: 44px;
}
html body #smedja-consent .smedja-consent__ghost {
  color: var(--kr-ink);
  border-color: var(--kr-ink);
}