/* ==========================================================================
   Guide page – header, toplist, body with table of contents, blocks
   ========================================================================== */

/* Header ------------------------------------------------------------------ */

.guide-header { padding-top: var(--s2); }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--text-sm); color: var(--text-subtle); }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }

.guide-title { margin-top: 12px; font-size: 56px; line-height: 1.08; text-wrap: balance; }

.guide-intro { margin-top: var(--s2); }
.guide-intro > p { max-width: 820px; font-size: var(--text-lg); color: var(--text-muted); }
.guide-intro > p strong { color: var(--ink); }
.guide-intro > * + * { margin-top: 12px; }

/* The facts: counts that link into the guide, the date, the way to the method. */
.guide-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
  padding: 14px 0;
  border-block: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.guide-stats { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.guide-stats li { display: flex; align-items: center; }
.guide-stats li + li::before { content: ""; align-self: stretch; width: 1px; margin-right: 22px; background: var(--line); }
.guide-stats a { color: inherit; text-decoration: none; }
.guide-stats a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.guide-stats strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); }
.guide-updated { display: flex; align-items: center; gap: 10px; padding-left: 22px; border-left: 1px solid var(--line); }
.guide-byline-photo { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.guide-byline { display: flex; flex-direction: column; line-height: 1.3; }
.guide-byline-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.guide-byline-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-byline-date { font-size: 13px; }
/* Name and date are both tappable and stacked: 24 px each, the smallest target Lighthouse (and fingers) accept. */
.guide-byline-name, .guide-byline-date .tip-trigger { display: inline-flex; align-items: center; min-height: 24px; }
.guide-updated .tip-trigger { display: inline-block; }
.guide-updated .tip-trigger:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.guide-method-link { margin-left: auto; color: var(--eyebrow); font-weight: 600; }

.guide-intro-more, .guide-intro-more[hidden] { display: none; }
.is-paid .guide-intro-more { display: none !important; }
.guide-disclosure { display: flex; gap: 8px; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--text-subtle); }
.guide-disclosure .icon { flex: none; margin-top: 2px; }
.guide-disclosure a { color: inherit; }

/* Paid ads (html.is-paid, set in <head> from the URL): no price in the toplist or the
   comparison table, the shop count instead, "Kolla pris" (won Vurderet's paid CTA test as
   "Tjek pris"), no breadcrumbs, no disclosure under the header (the footer carries it), and the
   whole toplist row is the outclick. Phones also lose the intro, the facts, the byline and the
   method link, so the toplist starts on the first screen. Each is its own rule, to A/B test one at a time. */
html:not(.is-paid) .paid-show,
html.is-paid .paid-hide { display: none !important; }
.toplist-shops { font-size: var(--text-xs); color: var(--text-subtle); line-height: 1.3; }
.is-paid .guide-header .breadcrumbs { display: none; } /* exits away from the toplist */
.is-paid .guide-disclosure { display: none; }
.is-paid .toplist-row { position: relative; cursor: pointer; }
.is-paid .toplist-row:hover { background: var(--hover-soft); }
.is-paid .toplist-row.is-winner:hover { background: #ebf7e5; }
.is-paid .toplist-btn::after { content: ""; position: absolute; inset: 0; }
.is-paid .toplist-row .tip { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .is-paid .guide-intro { display: none; }
  .is-paid .guide-facts { display: none; } /* stats, byline and method link: the toplist moves up the first screen */
}

/* Paid ads on phones: the first screen is for the toplist (Fable's advice, 27 Oct). Variants are classes on
   <html> from ?hd= and ?tl= (inc/guide.php), so an A/B test only has to set the class.
   Header: H1 and one line of proof (default), or the H1 alone (hd-1).
   Rows:   A (default) chips, name, stars over the shop count, button with the dark arrow;
           B (tl-2) compact, three rows on the first screen; C (tl-3) #1 as a big card, the rest as B. */
@media (max-width: 700px) {
  .is-paid:not(.hd-1) .guide-facts { display: flex; margin-top: 8px; padding: 0; border: 0; }
  .is-paid .guide-updated, .is-paid .guide-method-link { display: none; }
  .is-paid:not(.hd-1) .guide-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; width: auto; padding: 0; border: 0; color: var(--text-subtle); }
  .is-paid:not(.hd-1) .guide-stats li:nth-child(n+3) { display: none; }
  .is-paid:not(.hd-1) .guide-stats li + li::before { content: "·"; display: inline; width: auto; margin-right: 12px; background: none; }
  .is-paid:not(.hd-1) .guide-stats a, .is-paid:not(.hd-1) .guide-stats li > span, .is-paid:not(.hd-1) .guide-stats strong { display: inline; }
  .is-paid:not(.hd-1) .guide-stats strong { font-family: var(--font-body); font-size: 14px; font-weight: 700; }
  .is-paid:not(.hd-1) .guide-stats span { font-size: 14px; }
  .is-paid .guide-top { margin-top: var(--s2); }

  /* A is the phone toplist every visitor gets (stars over the shop count, the dark arrow): see the toplist section. */

  /* B: compact, one chip, two lines of name at most, no shop count. */
  .is-paid.tl-2 .toplist-row, .is-paid.tl-3 .toplist-row:not(.is-winner) {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "media main cta" "media rating cta";
    gap: 2px 10px;
    padding: 10px 12px;
  }
  .is-paid.tl-2 .toplist-media, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-media { width: 56px; height: 56px; }
  .is-paid.tl-2 .toplist-roles .role-chip:nth-child(n+2), .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-roles .role-chip:nth-child(n+2) { display: none; }
  .is-paid.tl-2 .toplist-roles .role-chip, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-roles .role-chip { font-size: 11px; padding: 2px 8px; }
  .is-paid.tl-2 .toplist-roles, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-roles { margin-bottom: 2px; }
  .is-paid.tl-2 .toplist-name, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-name { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .is-paid.tl-2 .toplist-price, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-price { display: none; }
  .is-paid.tl-2 .toplist-rating, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-rating { align-self: start; }
  .is-paid.tl-2 .toplist-cta .btn, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-cta .btn { min-height: 36px; font-size: 14px; padding: 0 4px 0 12px; gap: 6px; }
  .is-paid.tl-2 .toplist-cta .btn .icon, .is-paid.tl-3 .toplist-row:not(.is-winner) .toplist-cta .btn .icon { padding: 4px; width: 14px; height: 14px; }

  /* C: the winner as a card: big picture, its proof, a full-width button. */
  .is-paid.tl-3 .toplist-row.is-winner {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "media main" "media rating" "media meta" "cta cta";
    gap: 4px 14px;
    padding: 14px;
  }
  .is-paid.tl-3 .is-winner .toplist-media { width: 96px; height: 96px; }
  .is-paid.tl-3 .is-winner .toplist-name { font-size: 19px; }
  .is-paid.tl-3 .is-winner .toplist-cta { margin-top: 10px; }
  .is-paid.tl-3 .is-winner .toplist-cta .btn { min-height: 48px; font-size: 16px; font-weight: 600; padding: 0 6px 0 18px; }
}

/* Top: toplist -------------------------------------------------------------- */

.guide-top { margin-top: var(--s4); }

/* Toplist ----------------------------------------------------------------- */

.toplist { overflow: hidden; }

.toplist-head,
.toplist-row {
  display: grid;
  grid-template-columns: 32px 84px minmax(0, 1fr) 130px 130px 140px 190px;
  gap: var(--s2);
  align-items: center;
  padding: 12px 22px;
}
.toplist-head {
  padding-top: var(--s2);
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.toplist-row { border-top: 1px solid var(--hover-soft); }
.toplist-row.is-winner { background: #f4fbf0; padding-top: var(--s2); padding-bottom: var(--s2); }

.toplist-rank { font-family: var(--font-display); font-size: var(--title-sm); color: var(--text-subtle); text-align: center; }
.toplist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toplist-roles { margin-bottom: 4px; }
.toplist-roles .role-chip { padding: 3px 10px; }
.toplist-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
.toplist-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.toplist-cta .btn { width: 100%; }
/* The ↗ in a dark circle, like the cheapest shop in the price list: the way out to the shop. */
.toplist-cta .btn { justify-content: space-between; padding-right: 7px; }
.toplist-cta .btn .icon { box-sizing: content-box; padding: 7px; border-radius: 50%; background: var(--ink); color: var(--accent); transition: transform var(--fast) ease; }
.toplist-cta .btn:hover .icon, .is-paid .toplist-row:hover .toplist-cta .btn .icon { transform: translate(1px, -1px); }

.is-winner .toplist-name { font-size: 25px; }

@media (max-width: 1100px) {
  .toplist-head { display: none; }
  .toplist-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "media main main"
      "media rating cta"
      "media meta cta";
    gap: 2px 12px;
    padding: 12px;
  }
  .toplist-rank { display: none; }
  .toplist-media { grid-area: media; align-self: start; }
  .toplist-main { grid-area: main; margin-bottom: 4px; }
  .toplist-score { display: none; }
  /* Stars over the price: what people scan for on a phone (the score stays on the card below). */
  .toplist-rating { grid-area: rating; align-self: end; }
  .toplist-rating .stars { font-size: 13px; }
  .toplist-price { grid-area: meta; align-self: start; }
  .toplist-cta { grid-area: cta; align-self: center; }
  .product-media--thumb { width: 64px; height: 64px; }
  .toplist-name, .is-winner .toplist-name { font-size: 17px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
  .toplist-roles .role-chip { font-size: 12px; }
  .toplist-price .price-amount { font-size: var(--text-md); }
  .toplist-cta .btn { min-height: 42px; justify-content: space-between; gap: 10px; padding: 0 5px 0 14px; }
  .toplist-cta .btn .icon { padding: 6px; }
}

/* Body: table of contents + content --------------------------------------- */

.guide-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s4) var(--s6);
  margin-top: var(--s6);
}
.guide-aside { flex: 0 1 260px; position: sticky; top: calc(var(--header-h) + var(--s2)); }
.guide-content { flex: 999 1 640px; min-width: 0; }
.guide-content > * + * { margin-top: var(--s6); }
/* Running text (the buying guide) keeps the prose rhythm; only blocks get the big gap. */
.guide-content > :is(h2, h3, p, ul, ol) + :is(p, ul, ol) { margin-top: var(--s2); }
.guide-content > :is(h2, p, ul, ol) + h3 { margin-top: var(--s4); }
.guide-content > h2 + :is(p, ul, ol) { margin-top: 22px; }

.toc { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: var(--s1); }
.toc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  padding: 0 var(--s1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  list-style: none;
  cursor: pointer;
}
.toc-title::-webkit-details-marker { display: none; }
.toc[open] .toc-title .icon { transform: rotate(180deg); }
.toc-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.toc-list a {
  display: block;
  padding: 7px var(--s1);
  border-radius: var(--radius-inner);
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
}
.toc-list a:hover { background: var(--hover-soft); }
/* Same weight as the rest: a bolder active item would re-wrap a long name and shift the list. */
.toc-list a.is-active { background: var(--hover-soft); }
/* The reviews as one block: their rank as a small round badge, the info sections stay plain text. */
.toc-group { margin-block: 6px; }
.toc-group ol { display: flex; flex-direction: column; gap: 2px; }
.toc-group a { display: flex; gap: 10px; align-items: flex-start; }
.toc-rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--hover-soft);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.toc-group a:hover .toc-rank { background: var(--surface); }
.toc-group a.is-active .toc-rank { background: var(--accent); color: var(--accent-ink); }

@media (min-width: 1101px) {
  .toc-title { pointer-events: none; }
  .toc-title .icon { display: none; }
}
@media (max-width: 1100px) {
  .guide-aside { position: static; flex-basis: 100%; }
}

/* Sections ---------------------------------------------------------------- */

.guide-h2 { font-size: 38px; }
.guide-section > .guide-h2 + * { margin-top: 22px; }

/* Review ------------------------------------------------------------------ */

.review { padding: var(--s3); scroll-margin-top: calc(var(--header-h) + var(--s2)); }
.review-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.review-headline { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); margin-top: 12px; }
.review-name { min-width: 0; }
.review-title { font-size: 38px; }
.review-name .stars, .review-name .tip { margin-top: 8px; }
.review-header .score { flex: none; }

/* The picture takes the height of the verdict and prices next to it, so it never leaves a gap. */
.review-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); margin-top: 22px; }
.review-media { position: relative; aspect-ratio: auto; min-height: 320px; height: 100%; }
.review-media img { position: absolute; inset: 0; padding: 4% 10%; } /* the tall desktop box: tall products (toothbrushes, straighteners) use its height */
.review-text { font-size: var(--text-md); line-height: 1.55; }
.review-text + .price-box { margin-top: 22px; }

.review-more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s2); align-items: start; margin-top: var(--s3); }

/* Prices: rows are the outclicks, the cheapest is the main button. */
.price-box { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.price-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); padding: 0 2px; }
.price-box-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.price-box-updated { font-size: 12px; color: var(--text-subtle); }
.price-box-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.price-box-all {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  margin: 6px 0 -6px;
  border: 0;
  background: none;
  color: var(--eyebrow);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.price-box-all:hover { color: var(--ink); }
.price-box-empty { margin-top: var(--s1); font-size: var(--text-sm); color: var(--text-muted); }
.price-box-btn { width: 100%; margin-top: 14px; }

/* Strengths and weaknesses: rows open their explanation. */
.profile { padding: 20px 12px 16px; border-radius: 16px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--surface-soft-edge); }
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding: 0 8px; }
.profile-title { font-size: var(--text-lg); font-weight: 500; }
.profile-method {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 7px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--hover-soft);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.profile-method:hover { background: var(--hover); color: var(--ink); }
.profile-method-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); color: #fbfaf6; font-size: 12px; font-weight: 700; }
.profile-note { margin: 4px 0 6px; padding: 0 8px; font-size: 14px; color: var(--text-subtle); }
.profile-row {
  display: grid;
  width: 100%;
  grid-template-columns: 104px minmax(0, 1fr) 28px 40px 14px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-inner);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fast) ease;
}
.profile-row:hover { background: #f3f2ea; }
.profile-row .icon { color: var(--text-muted); opacity: 0.45; transition: opacity var(--fast) ease, transform var(--fast) ease; }
.profile-row:hover .icon { opacity: 1; transform: translateX(2px); }
.profile-label { font-size: 14px; }
.profile-bar { position: relative; height: 10px; border-radius: 5px; background: #ebeae3; }
.profile-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--eyebrow); }
.profile-avg { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 1.5px #fbfaf6; }
.profile-value { font-size: 14px; text-align: right; }
.profile-delta { font-size: var(--text-xs); font-weight: 600; text-align: right; color: var(--text-subtle); }
.profile-delta.is-up { color: var(--eyebrow); }
.profile-delta.is-down { color: #a33a2a; }
.profile-row.is-estimated .profile-label, .profile-row.is-estimated .profile-delta { color: var(--text-subtle); }
.profile-row.is-estimated .profile-fill { background: #c9c8c0; }
.profile-foot { margin-top: 8px; padding: 0 8px; font-size: 12px; color: var(--text-subtle); }

.pros-cons { display: flex; flex-direction: column; gap: 14px; }
.pros-cons-col { padding: var(--s2); border-radius: 14px; }
.pros-cons-col--pros { background: #eef8ea; }
.pros-cons-col--cons { background: #fdeeeb; }
.pros-cons-title { margin-bottom: 6px; font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.pros-cons li { display: flex; gap: var(--s1); font-size: var(--text-sm); }
.pros-cons li + li { margin-top: 6px; }
.pros-cons .icon { flex: none; margin-top: 2px; }
.pros-cons-col--pros .icon { color: var(--eyebrow); }
.pros-cons-col--cons .icon { color: #a33a2a; }

/* Specs, grouped by the score component they count in (toppvald_spec_groups()): a few per
   group, the rest behind "Visa alla". Hidden parts carry no padding or border of their own,
   because hidden="until-found" keeps an element's box. */
.review-specs { margin-top: var(--s3); }
.review-specs-title { font-size: var(--text-lg); font-weight: 500; }
.spec-groups { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
/* Each group spans two rows (title, specs) on a subgrid, so titles side by side share a height
   and their lines align even when one wraps. */
.spec-group { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; min-width: 0; }
/* "Övrigt" spans the row and spreads its specs over the same columns. */
.spec-group--rest { grid-column: 1 / -1; }
.spec-group--rest .specs { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: var(--s3); }
.spec-group-title {
  margin-top: var(--s2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.specs { margin: 0; font-size: var(--text-sm); }
.specs > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--hover-soft); }
.specs dt { font-size: var(--text-xs); color: var(--text-subtle); }
.specs dd { margin: 0; font-weight: 600; }
.specs--plain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s3); }
.specs--plain:first-of-type { margin-top: 6px; }
.specs--plain > div { border-top: 1px solid var(--hover-soft); border-bottom: 0; }
.specs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  margin: 16px 0 0;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.specs-toggle:hover { border-color: var(--ink); }
.specs-toggle .icon { transition: transform var(--fast) ease; }
.specs-toggle-close, .specs-toggle[aria-expanded="true"] .specs-toggle-open { display: none; }
.specs-toggle[aria-expanded="true"] .specs-toggle-close { display: inline; }
.specs-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

@media (max-width: 860px) {
  .review { padding: var(--s2); }
  .review-title { font-size: 28px; }
  .review-headline { align-items: flex-start; }
  .review-grid, .review-more { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .review-media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .review-media img { padding: 10%; }
  .specs--plain, .spec-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-groups, .spec-group--rest .specs { column-gap: var(--s2); }
  .spec-group--rest .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs-toggle { display: flex; justify-content: center; width: 100%; }
}
@media (max-width: 480px) {
  .review-title { font-size: 24px; }
  .profile-row { grid-template-columns: 88px minmax(0, 1fr) 26px 36px 12px; gap: 8px; }
}

/* Comparison table -------------------------------------------------------- */

/* position: relative keeps absolutely positioned children (e.g. .sr-only) inside the scroll box. */
.table-scroll { position: relative; overflow-x: auto; }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 12px var(--s2); border-bottom: 1px solid var(--hover-soft); text-align: left; vertical-align: middle; }
.compare thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.compare tbody th { font-weight: 600; }
.compare tbody th a { color: var(--ink); text-decoration: none; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare-price { white-space: nowrap; }
.compare-lead { margin-top: -6px; margin-bottom: var(--s2); color: var(--text-muted); }
.compare td { white-space: nowrap; }
/* The best value in a column, by the scoring model's rule. */
.compare td.is-best { font-weight: 600; color: var(--chart-accent); }
.compare td.is-best .icon { display: inline-block; margin-left: 4px; vertical-align: -2px; }
/* Price above its button in one column, so the table fits without scrolling the click away. */
.compare-price .btn { display: flex; width: max-content; margin-top: 6px; }
/* The model name stays in view while the table scrolls sideways on narrow screens. */
.compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.compare tbody th { min-width: 150px; white-space: normal; }
/* Phones: the price button sits under the name in the sticky column, so it is never scrolled away. */
.compare-name-cta { display: none; }
@media (max-width: 700px) {
  .compare { font-size: 14px; }
  .compare th, .compare td { padding: 10px 12px; }
  .compare tbody th { min-width: 132px; max-width: 150px; }
  .compare-name-cta { display: flex; width: max-content; align-items: center; gap: 4px; min-height: 32px; margin-top: 6px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink) !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .compare th:last-child, .compare td.compare-price { display: none; }
}

/* Marknaden i siffror (blocks/market) ------------------------------------- */

.market-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
.market .guide-h2 { margin-top: 6px; }

/* Populära modeller som inte kom med */
.popular-missing-lead { max-width: 680px; margin-top: 10px; color: var(--text-muted); }
.popular-missing-list { margin-top: 22px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.popular-missing-row { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 18px; padding: 14px 20px; }
.popular-missing-row + .popular-missing-row { border-top: 1px solid var(--line); }
.popular-missing-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.popular-missing-name { font-weight: 600; color: var(--ink); }
.popular-missing-reason { font-size: var(--text-sm); color: var(--text-muted); }
.popular-missing-price { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
@media (max-width: 700px) {
  .popular-missing-row { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 14px 16px; }
  .popular-missing-price { grid-column: 2 / -1; justify-content: space-between; }
}
.market-lead { max-width: 680px; margin-top: 10px; color: var(--text-muted); }
.market-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.market-facts li { padding: 7px 14px; border-radius: var(--radius-pill); background: var(--hover-soft); font-size: var(--text-xs); }
.market-h3 { margin-top: var(--s6); font-size: 26px; font-weight: 500; }
.market-sub { max-width: 720px; margin-top: 6px; color: var(--text-muted); }
.market-note { margin-top: 10px; font-size: var(--text-xs); color: var(--text-subtle); }


/* A 0–10 meter (median score, distance above the line). */
.market-meter { flex: 1; display: block; height: 8px; border-radius: 4px; background: var(--chart-grid); overflow: hidden; }
.market-meter > span { display: block; height: 100%; border-radius: 4px; background: var(--chart-accent); }
.market-meter--thin { height: 6px; }

/* 1. Price classes: one table, the classes as columns (it reuses .compare for rows and the
   sticky first column on narrow screens). */
.market-classes { margin-top: var(--s2); }
.market-classes-table { min-width: 680px; table-layout: fixed; }
.market-classes-table th:first-child { width: 22%; }
.market-classes-table thead th { text-transform: none; letter-spacing: 0; vertical-align: top; }
.market-class-name { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); }
.market-class-range { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: 400; white-space: nowrap; color: var(--text-subtle); }
.market-classes-table tbody th { font-weight: 500; white-space: normal; color: var(--text-muted); }
.market-classes-table td { min-width: 120px; }
.market-classes-table td strong { display: block; font-weight: 600; }
.market-classes-table td .market-meter { display: block; max-width: 120px; margin-top: 6px; }
.market-class-score td strong { font-size: 22px; }
.market-class-best td { white-space: normal; font-size: 15px; font-weight: 600; line-height: 1.35; }
.market-class-best a { color: var(--ink); }
.market-chip { display: inline-block; padding: 1px 7px; border-radius: var(--radius-sm); background: var(--score-bg); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }

/* 2. Fit check */
.market-fit { margin-top: var(--s2); }
.market-fit-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.market-fit-card { padding: 20px; }
.market-fit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.market-fit-label { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.market-fit-value { font-size: 22px; font-weight: 600; white-space: nowrap; }
.market-range { width: 100%; height: var(--tap); margin: 4px 0 0; accent-color: var(--chart-accent); cursor: pointer; }
.market-range-ends { display: flex; justify-content: space-between; margin-top: -6px; font-size: 12px; color: var(--text-subtle); }
.market-fit-result { margin: 12px 0 8px; font-size: var(--text-md); }
.market-fit-result strong { font-size: 26px; font-weight: 600; }
.market-fit-result { margin-bottom: 0; }
.market-fit-both {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--surface-soft-edge);
}
.market-fit-both-count { font-size: var(--text-md); }
.market-fit-both-count strong { font-size: 22px; font-weight: 600; }
/* The toplist as badges: green with a check when a model meets every measurement, else grey
   with the measurement it misses. */
.market-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.market-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--text-subtle); transition: background-color var(--fast) ease, color var(--fast) ease; }
.market-badge a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.market-badge a:hover { text-decoration: underline; }
.market-badge small { font-size: 12px; }
.market-badge small:empty { display: none; }
.market-badge-yes, .market-badge.is-ok .market-badge-no { display: none; }
.market-badge.is-ok .market-badge-yes { display: inline-flex; }
.market-badge-no { display: inline-flex; color: var(--text-subtle); }
.market-badge.is-ok { background: var(--score-bg); box-shadow: none; font-weight: 600; color: var(--ink); }
.market-badge.is-ok .icon { color: var(--chart-accent); }
.market-badge.is-unknown .market-badge-no { display: none; }

/* 3. Value: chart + list */
.market-value { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; margin-top: var(--s2); }
.market-chart { position: relative; margin: 0; padding: var(--s2) var(--s2) 10px; }
.market-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--text-xs); color: var(--text-muted); }
.market-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.market-key { width: 9px; height: 9px; border-radius: 50%; background: var(--chart-context); }
.market-key--top { width: 11px; height: 11px; background: var(--chart-accent); }
.market-key--line { width: 16px; height: 2px; border-radius: 1px; background: var(--ink); }
.market-svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; font-family: var(--font-body); }
.market-grid { stroke: var(--chart-grid); stroke-width: 1; }
.market-tick, .market-axis { font-size: 12px; fill: var(--text-subtle); }
.market-line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.market-pt { cursor: pointer; }
.market-pt-hit { fill: transparent; }
.market-pt-dot { fill: var(--chart-context); stroke: var(--surface); stroke-width: 2; }
.market-pt.is-top .market-pt-dot { fill: var(--chart-accent); }
.market-pt.is-active .market-pt-dot { stroke: var(--ink); stroke-width: 2.5; }
.market-label { font-size: 12px; font-weight: 600; fill: #33403e; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.market-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 16px;
  width: 210px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-xs);
  color: var(--text-muted);
  pointer-events: none;
}
.market-tip[hidden] { display: none; }
.market-tip strong { grid-column: 1 / -1; margin-bottom: 4px; font-size: 14px; color: var(--ink); }
.market-tip b { text-align: right; color: var(--ink); }
.market-best { padding: 20px; border-radius: var(--radius-card); background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--surface-soft-edge); }
.market-best-title { font-size: 19px; font-weight: 500; }
.market-best-note { margin-top: 4px; font-size: var(--text-xs); line-height: 1.45; color: var(--text-subtle); }
.market-best-list { margin-top: 12px; }
.market-best-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--chart-grid); }
.market-best-rank { grid-row: span 3; font-size: var(--text-xs); color: var(--text-subtle); }
.market-best-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.market-best-name a { color: var(--ink); }
.market-best-meta { font-size: 12px; color: var(--text-subtle); }
.market-best-list .market-meter { margin-top: 4px; }
.market-table { margin-top: 12px; }
.market-table summary { list-style: none; }
.market-table summary::-webkit-details-marker { display: none; }
.market-table[open] summary .icon { transform: rotate(180deg); }
.market-compare { min-width: 620px; margin-top: 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.market-compare tbody th { font-weight: 400; }
.market-compare tr.is-top th { font-weight: 600; }
.market-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: var(--s3);
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--surface-soft-edge);
  font-size: 15px;
  color: var(--text-muted);
}
.market-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--chart-accent); }

@media (max-width: 1100px) {
  .market-value { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .market-h3 { margin-top: var(--s4); font-size: 22px; }
  .market-fit-cards { grid-template-columns: minmax(0, 1fr); }
  .market-fit-card { padding: 16px; }
  /* Two price classes in view next to a narrow label column; the rest scroll sideways. */
  .market-classes-table { min-width: 520px; }
  .market-classes-table th:first-child { width: 104px; min-width: 104px; padding-right: 8px; font-size: 14px; }
  .market-classes-table th, .market-classes-table td { padding-left: 12px; padding-right: 12px; }
  /* A scatter of 48 points is too dense at phone width: the list and the table carry it. */
  .market-chart { display: none; }
  .market-foot { padding: 16px; }
}

/* Så har vi räknat (blocks/method): FAQ-style cards, a weight bar per component ---- */

.method-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin-top: var(--s3); }
.method-item {
  padding: 0 22px;
  border-radius: 16px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--surface-soft-edge);
  transition: background-color var(--fast) ease, box-shadow var(--fast) ease;
}
.method-item[open] { background: var(--surface); box-shadow: var(--shadow); }
.method-q {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 48px 34px;
  align-items: center;
  gap: var(--s2);
  min-height: 64px;
  list-style: none;
  cursor: pointer;
}
.method-q::-webkit-details-marker { display: none; }
.method-label { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.25; }
.method-bar { height: 10px; border-radius: 5px; background: var(--chart-grid); overflow: hidden; }
.method-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--chart-accent); }
.method-item--price .method-bar > span { background: var(--ink); }
.method-item--log .method-bar { background: none; }
.method-share { font-size: 16px; text-align: right; white-space: nowrap; }
.method-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); max-width: 640px; padding: 2px 0 22px; }
.method-about { color: var(--text-muted); }
.method-parts-title { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.method-part { display: grid; grid-template-columns: minmax(0, 1fr) 70px 48px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hover-soft); font-size: 15px; }
.method-part-label small { display: block; font-size: 12px; color: var(--text-subtle); }
.method-part strong { text-align: right; white-space: nowrap; }
.method-facts { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.method-facts li { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--hover-soft); font-size: var(--text-xs); }
.method-log { grid-column: 1 / -1; }
.method-log li { padding: 10px 0; border-bottom: 1px solid var(--hover-soft); }
.method-log li:last-child { border-bottom: 0; }
.method-log strong { margin-right: 8px; }
.method-log time { font-size: var(--text-xs); color: var(--text-subtle); }
.method-log p { margin-top: 4px; font-size: 15px; color: var(--text-muted); }
.method-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 860px; margin-top: 14px; font-size: var(--text-xs); color: var(--text-subtle); }
.method-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--chart-accent); }

@media (max-width: 700px) {
  .method-item { padding: 0 16px; border-radius: 14px; }
  .method-q { grid-template-columns: minmax(0, 1fr) auto 32px; gap: 10px; padding: 12px 0; }
  .method-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .method-label { font-size: var(--text-md); }
  .method-body { padding-bottom: 18px; }
}

/* FAQ --------------------------------------------------------------------- */

/* Each question a soft card; open = white card with the plus turned minus on mint. */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item {
  padding: 0 22px;
  border-radius: 16px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--surface-soft-edge);
  transition: background-color var(--fast) ease, box-shadow var(--fast) ease;
}
.faq-item[open] { background: var(--surface); box-shadow: var(--shadow); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 68px;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--track-display);
  list-style: none;
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hover-soft);
  transition: background-color var(--fast) ease;
}
.faq-q:hover .faq-icon, .method-q:hover .faq-icon { background: var(--hover); }
.faq-item[open] .faq-icon, .method-item[open] .faq-icon { background: var(--accent); }
.faq-item[open] .icon-plus-v, .method-item[open] .icon-plus-v { display: none; }
.faq-a { padding: 0 56px 22px 0; color: var(--text-muted); }
.faq-a > :last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .faq { gap: 8px; }
  .faq-item { padding: 0 16px; border-radius: 14px; }
  .faq-q { min-height: 60px; font-size: var(--text-md); }
  .faq-icon { width: 32px; height: 32px; }
  .faq-a { padding: 0 0 18px; }
}

/* Sticky bar (phones): the product on screen, else #1 ---------------------- */

.sticky-bar {
  position: fixed;
  right: var(--s1);
  bottom: var(--s1);
  left: var(--s1);
  z-index: 40;
  padding: 10px 10px 10px var(--s2);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--inverse-ink);
  box-shadow: var(--shadow-raised);
}
.sticky-bar[hidden], .sticky-bar-item[hidden] { display: none; }
.sticky-bar-item { display: flex; align-items: center; gap: 12px; }
.sticky-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.sticky-bar-role { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.sticky-bar-name { overflow: hidden; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 701px) { .sticky-bar { display: none !important; } }
@media (max-width: 700px) { body:has(.sticky-bar:not([hidden])) .site-footer { padding-bottom: 96px; } }

/* Phones ------------------------------------------------------------------ */

@media (max-width: 700px) {
  .guide-title { font-size: 36px; }
  .guide-intro > p { font-size: 17px; }
  /* The intro's first four lines, the rest behind "Läs mer" (all of it stays in the page for search engines). */
  .guide-intro.is-clamped:not(.is-open) { max-height: 106px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .guide-intro-more:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--eyebrow); cursor: pointer; }
  .guide-intro-more[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .guide-facts { gap: 0; margin-top: 18px; padding: 12px 0 0; }
  .guide-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .guide-stats li { display: block; }
  .guide-stats li + li::before { display: none; }
  .guide-stats a, .guide-stats li > span { display: block; }
  .guide-stats strong { display: block; }
  .guide-stats span { font-size: 13px; }
  .guide-stat-more { display: none; }
  .guide-updated, .guide-method-link { padding: 10px 0; }
  .guide-updated { flex: 1; border-left: 0; }
  .guide-method-link { margin-left: 0; padding-left: 12px; }
  .guide-disclosure { font-size: 13px; }
  .guide-top { margin-top: var(--s3); }
  .guide-h2, .prose h2 { font-size: 30px; }
  .guide-body { margin-top: var(--s4); }
}

/* "Bäst för": cards under the toplist, sections before the comparison (components/best-for-*.php) */
.best-for { min-width: 0; margin-top: var(--s6); }
.best-for-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s3); }
.best-for-title { font-size: var(--title-sm); }
.best-for-lead { max-width: 64ch; color: var(--text-muted); }
.best-for-card { display: flex; flex-direction: column; overflow: hidden; }
.best-for-card .product-media { aspect-ratio: 16 / 10; border-radius: 0; }
.best-for-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.best-for-need { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--eyebrow); }
.best-for-need a { color: inherit; text-decoration: none; }
.best-for-need a:hover { text-decoration: underline; text-underline-offset: 3px; }
.best-for-name { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.25; }
.best-for-facts { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.best-for-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.best-for-link { font-size: 14px; font-weight: 600; color: var(--eyebrow); white-space: nowrap; }

.best-for-sections > h3 { scroll-margin-top: 90px; }
.prose > .best-for-sections > * + * { margin-top: var(--s2); }
.best-for-sections > h3 { display: flex; align-items: center; gap: 12px; margin-top: var(--s4); font-size: 24px; font-weight: 500; }
.best-for-list { margin-top: var(--s2); overflow: hidden; border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.best-for-row { display: grid; grid-template-columns: 24px 72px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 18px; }
.best-for-row + .best-for-row { border-top: 1px solid var(--line); }
.best-for-rank { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.best-for-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.best-for-row-name { font-size: 16px; }
.best-for-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.best-for-chip { padding: 3px 8px; border-radius: var(--radius-pill); background: #f1f0eb; font-size: 12px; font-weight: 600; }
.best-for-chip--out { background: #fff1d6; }
.best-for-row-action { justify-self: end; }
@media (max-width: 760px) {
  .best-for-card .product-media { aspect-ratio: 2 / 1; }
  .best-for-row { grid-template-columns: 20px 56px minmax(0, 1fr); row-gap: 10px; }
  .best-for-row .score, .best-for-row-action { grid-column: 3; justify-self: start; }
  .best-for-row .product-media--thumb { width: 56px; height: 56px; }
}