/* Jaktplagg stylesheet
   Colors: forest green + gold
   Layout: sticky header, hero, product cards, footer
*/

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Arimo");
  size-adjust: 93%;
  ascent-override: 110.11%;
  descent-override: 43.01%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Times"), local("Tinos");
  size-adjust: 112.9%;
  ascent-override: 91.76%;
  descent-override: 29.67%;
  line-gap-override: 0%;
}
:root {
  --skog: #12241c;
  --skog-2: #1b3227;
  --mossa: #2d4a3a;
  --barr: #4a6b56;
  --guld: #c4a056;
  --guld-2: #e0c27a;
  --cream: #f1ebe1;
  --paper: #faf7f1;
  --kort: #fffdf8;
  --text: #1b1f1c;
  --muted: #5c675f;
  --linje: #ddd4c4;
  --annons: #8a4b12;
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: "Source Sans 3", "Source Sans 3 Fallback", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 400px at 10% -10%, #e7efe6 0%, transparent 50%),
    var(--cream);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1140px, calc(100% - 32px)); margin: 0 auto; }

.topbar {
  background: var(--skog);
  color: #efe8d8;
  font-size: 0.82rem;
  padding: 8px 16px;
  text-align: center;
}
.topbar strong { color: var(--guld-2); }

/* Hide until keyboard focus. :not(:focus) avoids Safari failing to undo clip. */
.skip-link:not(:focus):not(:active) {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  background: var(--skog);
  color: #f4efe4;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  outline: 3px solid var(--guld-2);
  outline-offset: 2px;
}

/* Keyboard focus is visible on light pages, and light on the dark hero and footer. */
:focus-visible {
  outline: 3px solid var(--skog);
  outline-offset: 2px;
}
.hero :focus-visible,
footer :focus-visible {
  outline-color: var(--guld-2);
}

header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid #c9bda6;
  box-shadow: 0 2px 8px rgba(18, 36, 28, .08);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--skog);
}
.brand img, .brand svg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.logo-text {
  color: #1c3828;
  font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.logo-text span { color: #c4a056; }
.logo-sub {
  display: block;
  font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.menu {
  display: flex;
  gap: 4px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.menu a {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.94rem;
  color: var(--skog-2);
}
.menu a:hover, .menu a.active { background: #ece6d8; }
.nav nav { margin-left: auto; }
.burger {
  display: none;
  background: none;
  border: 1px solid var(--skog);
  border-radius: 8px;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--skog);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.burger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}
.burger-icon span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--skog);
  border-radius: 1px;
}

.hero {
  position: relative;
  background: #12241c;
  color: #f7f1e4;
  padding: 56px 0 48px;
  overflow: hidden;
  border-bottom: 1px solid var(--linje);
}
.hero picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(12,24,18,.82) 0%, rgba(12,24,18,.35) 55%, rgba(12,24,18,.2) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .kicker { color: var(--guld); }
.hero h1 {
  font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.12;
  max-width: 14ch;
  font-weight: 700;
}
.hero p { max-width: 44ch; margin: 16px 0 28px; font-size: 1.16rem; color: #e7dfcf; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-actions .btn { width: auto; min-height: 48px; margin-top: 0; padding: 10px 18px; line-height: 1.3; font-size: 1rem; }

/* Compact filter chips and the homepage quick-pick row. */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.filter-row a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--linje);
  background: var(--kort);
  color: var(--skog);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.95rem;
}
.filter-row a:hover { background: #ece6d8; border-color: var(--guld); }

section.tight { padding: 28px 0 40px; }
section.tight .lead { margin-bottom: 12px; }
section.tight .disclosure { margin: 8px 0 12px; }
section.tight h2 { margin-bottom: 8px; }

.hero .filter-row { margin: 16px 0 0; }
.hero .filter-row a {
  background: var(--skog);
  color: #f7f1e4;
  border-color: #e0c27a;
  min-height: 44px;
}
.hero .filter-row a:hover { background: var(--skog-2); color: #fff; }

.quick-picks { column-gap: 12px; }
.quick-picks .product-img { height: 148px; padding: 10px; }
.quick-picks .product-body { padding: 12px 14px 14px; }
.quick-picks .btn-shop { margin-top: 8px; }

/* Early CTA = compact Snabbval row near the start of a buying guide (renderEarlyBuyCta):
   product + price, one shop button (data-position="early") and "Jämför alla ↓" to the cards.
   Same card tokens as .product (radius, line, shadow). Mobile first; wraps, never scrolls. */
div.early-cta {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(18,36,28,.04);
}
.prose .early-cta-pick { margin: 0; }
.early-cta-pick { line-height: 1.35; text-wrap: pretty; }
.early-cta-lead { color: var(--skog); }
.early-cta-name { font-weight: 600; color: var(--skog); }
.early-cta-price { font-weight: 700; color: var(--skog); white-space: nowrap; }
.early-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
.early-cta-actions .btn-shop { width: auto; flex: 1 1 15rem; max-width: 100%; margin-top: 0; }
.early-cta-compare {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  font-weight: 600;
  color: var(--skog-2);
  text-underline-offset: 0.15em;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .early-cta-actions .btn-shop { flex: 0 1 auto; }
}
.early-cta.shop-buttons {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.early-cta.shop-buttons .btn-shop { width: 100%; max-width: 100%; }

.shop-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.shop-buttons .btn,
.shop-buttons .btn-shop { margin-top: 0; }
.table-more {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: underline;
}
.link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.link-chips a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  text-decoration: none;
  background: var(--kort);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-ghost { background: transparent; color: #fff; border-color: #d7c9a4; }
.btn-shop {
  background: var(--skog);
  color: #f4efe4;
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  padding: 10px 16px;
  line-height: 1.3;
  /* One button text on the whole site: 16 px / 600. Long shop names wrap, never shrink. */
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  gap: 6px;
}
.btn-shop:hover { background: var(--mossa); }
.btn-shop small { font-weight: 500; opacity: .8; margin-left: 0; }
.btn-shop:not([rel~="sponsored"]) { width: auto; }

section { padding: 56px 0; }
h1.page, h2 {
  font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
}
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; }
h1.page { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 12px; }
.lead { color: var(--muted); max-width: 62ch; margin-bottom: 28px; }
.grid-3, .grid-4 { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card, .product, .guide-card, .pick {
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(18,36,28,.04);
}
.card, .guide-card, .pick { padding: 22px; }
.card h3, .product h3, .guide-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.pick h2 {
  font-family: inherit;
  font-size: 1.17rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.kicker {
  color: #8a5a18;
  font-size: 0.78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

.cat-card {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: #f7f1e4;
  box-shadow: 0 10px 28px rgba(18,36,28,.12);
}
.cat-card picture {
  position: absolute;
  inset: 0;
}
.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(12,24,18,.82));
  z-index: 1;
}
.cat-card span {
  position: relative;
  z-index: 2;
  padding: 20px;
  font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  font-size: 1.35rem;
}

.product-img {
  width: 100%;
  height: 210px;
  padding: 16px;
  object-fit: contain;
  background-color: #1c241f;
}

.product {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 16px 18px;
}
.product-body > .badge { align-self: flex-start; }
.product h3 { line-height: 1.3; text-wrap: balance; }
.product-text { margin: 0; }
/* Price, shop and button stay together at the bottom of the card. */
.offer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-top: auto;
  padding-top: 10px;
}
.price { font-weight: 700; margin: 8px 0 4px; }
.price s { color: var(--muted); font-weight: 500; margin-right: 8px; }
.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0;
  line-height: 1.2;
  min-height: 1.7rem;
}
.price-amount {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--skog);
}
.price-flag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5a4310;
  background: #f6ead4;
  border: 1px solid #e4cf9d;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.4;
}
.price-was {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}
.price-was::before { content: "("; }
.price-was::after { content: ")"; }
.shop-name { font-size: .88rem; color: var(--muted); }
.product .shop-name { margin: 0; }
.product .shop-buttons {
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 0;
  margin-top: 8px;
  container-type: inline-size;
  container-name: shop;
}
.product .shop-buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  align-self: end;
}
.product .btn-shop {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 0;
  white-space: normal;
  padding: 10px 12px;
  gap: 0 0.3em;
  flex-wrap: wrap;
  font-size: 1rem;
  line-height: 1.2;
}

/* Rows of cards: line up image, badge, title, text, price, shop and button. */
.product-grid { row-gap: 0; align-items: stretch; }
.quick-picks.product-grid,
.cms-products-grid.product-grid { row-gap: 0; }
@supports (grid-template-rows: subgrid) {
  .product-grid > .product {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 11;
    height: auto;
    margin-bottom: 18px;
  }
  .product-grid > .product > .product-body,
  .product-grid > .product > .product-body > .offer { display: contents; }
  .product-grid > .product .product-body > .badge {
    justify-self: start;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 16px 16px 8px;
  }
  .product-grid > .product .product-body > h3,
  .product-grid > .product .product-text,
  .product-grid > .product .price,
  .product-grid > .product .shop-name,
  .product-grid > .product .shop-buttons {
    padding-inline: 16px;
    min-width: 0;
  }
  .product-grid > .product .price { padding-top: 8px; }
  .product-grid > .product .shop-buttons { padding-bottom: 18px; }
  .quick-picks.product-grid > .product { margin-bottom: 12px; }
  /* Fixed row per part: image, badge, title, text, extra lines, price, shop, buttons. A card without
     image or badge leaves that row empty (no height when no card in the row has it), so
     the title, price and button still line up with the other cards. The inline cards in
     the guide text (one card per row) keep their own layout. */
  .product-grid:not(.inline-cards *) > .product > .product-img { grid-row: 1; }
  .product-grid:not(.inline-cards *) > .product .product-body > .badge { grid-row: 2; }
  .product-grid:not(.inline-cards *) > .product .product-body > h3 { grid-row: 3; }
  .product-grid:not(.inline-cards *) > .product .product-body > .product-text { grid-row: 4; }
  /* Extra card lines written straight in the card (not inside .product-text) get their
     own rows between the text and the price, so they never land on the button. */
  .product-grid:not(.inline-cards *) > .product .product-body > .card-choose { grid-row: 5; }
  .product-grid:not(.inline-cards *) > .product .product-body > .card-spec { grid-row: 6; }
  .product-grid:not(.inline-cards *) > .product .product-body > .card-notice { grid-row: 7; }
  .product-grid:not(.inline-cards *) > .product .product-body > .card-stock { grid-row: 8; }
  .product-grid:not(.inline-cards *) > .product .offer > .price { grid-row: 9; }
  .product-grid:not(.inline-cards *) > .product .offer > .shop-name { grid-row: 10; }
  .product-grid:not(.inline-cards *) > .product .offer > .shop-buttons { grid-row: 11; }
  .product-grid:not(.quick-picks) > .product .product-body > :is(.card-choose, .card-spec, .card-stock) {
    margin: 8px 0 0;
    padding-inline: 16px;
    min-width: 0;
  }
  .product-grid:not(.quick-picks) > .product .product-body > .card-notice {
    margin: 8px 16px 0;
    min-width: 0;
  }
}
.badge {
  display: inline-block;
  font-size: .75rem;
  background: #efe3c4;
  color: #5a4310;
  border-radius: 999px;
  padding: 3px 8px;
  margin-bottom: 8px;
}
.annons {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--annons);
  border: 1px solid #e4c8a6;
  background: #fbf3e8;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.disclosure {
  background: #f6ead4;
  border: 1px solid #e4cf9d;
  color: #5a4310;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .92rem;
  margin: 18px 0 28px;
}

.plusminus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.plusminus ul { padding-left: 18px; font-size: .95rem; }
.plusminus h4 { font-size: .85rem; margin-bottom: 6px; }

article.prose { max-width: 72ch; }
.prose p, .prose li { margin-bottom: 12px; }
.prose h2 { margin-top: 28px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.cms-products-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Compare table: a real table when there is room, one card per row when there is not.
   Container query on the wrapper (sizes to the column, not the viewport). Browsers without
   container queries keep the table and scroll it sideways inside the wrapper. */
.compare-scroll { container: compare / inline-size; overflow-x: auto; max-width: 100%; min-width: 0; margin: 4px 0 28px; }
.compare-scroll table { margin: 0; min-width: 44rem; }
.compare-scroll th[scope="row"] { background: none; color: inherit; font-weight: 400; } /* looks like the old <td> */
.compare-scroll .btn { padding: 8px 12px; white-space: nowrap; min-height: 44px; }
@container compare (width < 44rem) {
  .compare-scroll table { display: block; min-width: 0; background: none; border-radius: 0; overflow: visible; }
  .compare-scroll thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .compare-scroll tbody { display: grid; gap: 14px; }
  .compare-scroll tr {
    display: grid;
    grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px;
    background: var(--kort);
    border: 1px solid var(--linje);
    border-radius: var(--radius, 18px);
    box-shadow: 0 8px 24px rgba(18, 36, 28, .04);
  }
  .compare-scroll :is(th, td) { grid-column: 1 / -1; padding: 6px 0; border: 0; font-size: .95rem; }
  .compare-scroll td[data-label] {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr); /* fallback */
    grid-template-columns: subgrid; /* labels line up in one column per card */
    align-items: baseline;
  }
  .compare-scroll td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / ""; /* screen readers already get the column header */
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
  }
  .compare-scroll th[scope="row"] {
    display: block;
    margin-bottom: 4px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--linje);
    color: var(--skog);
    font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
  }
  .compare-scroll .compare-price { font-weight: 700; font-size: 1.05rem; }
  .compare-scroll td.compare-shop { display: block; padding-top: 12px; }
  .compare-scroll td.compare-shop::before { content: none; }
  .compare-scroll .compare-shop .shop-buttons { align-items: stretch; }
  .compare-scroll .compare-shop .btn { width: 100%; min-height: 48px; flex-wrap: wrap; gap: 0 6px; white-space: normal; text-align: center; }
  .compare-scroll .compare-shop .shop-buttons { gap: 4px; }
  .compare-scroll .compare-shop .table-more { min-height: 44px; }
}
.guide-hero { margin: 8px 0 24px; }
.guide-hero picture,
.guide-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--kort);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0 28px;
}
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linje); font-size: .95rem; }
th { background: var(--skog); color: #f4efe4; }

footer {
  background: var(--skog);
  color: #d9d2c3;
  padding: 44px 0 24px;
  margin-top: 8px;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; margin-bottom: 24px; }
footer a { color: #f0e6cf; }
.fineprint { font-size: .85rem; border-top: 1px solid #314438; padding-top: 16px; color: #b7b0a1; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.foot-brand img { width: 36px; height: 36px; border-radius: 50%; }
footer .logo-text { color: #f4efe4; }
footer .logo-text span { color: #e0c27a; }
.foot-social { margin: 14px 0 0; }
/* Instagram: round icon like the footer logo, gold on the dark footer. 40px tap target. */
footer a.foot-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(224, 194, 122, .45);
  color: var(--guld-2);
  transition: background-color .15s ease, border-color .15s ease;
}
footer a.foot-ig:hover { background: var(--mossa); border-color: var(--guld); }
footer a.foot-ig svg { display: block; }

.produkt-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 800px) {
  .produkt-layout { grid-template-columns: 1fr; }
  header .nav {
    position: relative;
    justify-content: flex-start;
    gap: 12px;
  }
  .burger {
    display: inline-flex;
    margin-left: auto;
    margin-right: 0;
  }
  .nav nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin-left: 0;
  }
  .menu {
    display: none;
    background: var(--paper);
    border: 1px solid var(--linje);
    border-radius: 12px;
    flex-direction: column;
    padding: 10px;
  }
  .menu.open { display: flex; }
  .menu a { display: flex; align-items: center; min-height: 44px; }
  .grid-3, .grid-4, .foot-grid, .plusminus { grid-template-columns: 1fr; }
  .hero { padding: 28px 0 32px; }
  .quick-picks .product-body > .product-text,
  .quick-picks .product-body > p:not(.price):not(.shop-name) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Tablet: image beside the text. Subgrid is for the multi-column rows only. */
  .quick-picks.product-grid > .product,
  .quick-picks.product-grid > .product:has(> .product-body > .badge),
  .quick-picks .product {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto;
    grid-row: auto;
    height: auto;
    align-items: start;
    margin-bottom: 12px;
  }
  .quick-picks .product-img {
    width: 120px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 8px;
    background-color: var(--kort);
  }
  .quick-picks.product-grid > .product > .product-body,
  .quick-picks .product-body {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 12px;
  }
  .quick-picks.product-grid > .product > .product-body > .offer {
    display: flex;
    flex-direction: column;
    padding: 10px 0 12px;
  }
  .quick-picks.product-grid > .product .product-body > .badge,
  .quick-picks .product-body .badge {
    align-self: flex-start;
    width: auto;
    max-width: none;
    margin: 0 0 8px;
  }
  .quick-picks.product-grid > .product .product-body > h3,
  .quick-picks.product-grid > .product .product-text,
  .quick-picks.product-grid > .product .price,
  .quick-picks.product-grid > .product .shop-name,
  .quick-picks.product-grid > .product .shop-buttons {
    padding: 0;
  }
  .quick-picks.product-grid > .product .shop-buttons { margin-top: 8px; }
}

/* Phone: image on top, then tag, name, why, price, shop, button. */
@media (max-width: 480px) {
  .hero { padding: 14px 0 20px; }
  .hero h1 { font-size: 1.85rem; }
  .hero p { margin: 8px 0 12px; font-size: 1rem; }
  .hero .kicker { margin: 0 0 6px; font-size: 0.78rem; }
  .hero-actions { gap: 8px; }
  .hero .filter-row { margin-top: 10px; }
  .quick-picks.product-grid > .product,
  .quick-picks.product-grid > .product:has(> .product-body > .badge),
  .quick-picks .product {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-row: auto;
    height: auto;
  }
  .quick-picks .product-img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    min-height: 0;
    padding: 12px;
    background-color: var(--kort);
  }
}

/* Compact buy box: image, facts, then the buy button. Container query, not a fixed breakpoint. */
.answer { max-width: 62ch; margin: 0 0 12px; }
.checked { color: var(--muted); font-size: .92rem; margin: 0 0 16px; }
.buybox {
  container: buybox / inline-size;
  display: grid;
  grid-template-columns: clamp(64px, 20cqi, 96px) minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  margin: 0 0 18px;
  padding: 12px;
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(18,36,28,.04);
}
.buybox img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--kort);
  border-radius: 8px;
}
.buybox h2, .buybox h3 {
  font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  font-size: 1.15rem;
  margin: 0 0 4px;
  line-height: 1.3;
}
.buybox p { margin: 0 0 4px; }
.buybox .shop-buttons {
  grid-column: 1 / -1;
  width: 100%;
  gap: 4px;
}
.buybox .btn-shop {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
  margin-top: 0;
  white-space: normal;
  padding: 10px 12px;
  font-size: 1rem;
}
@container buybox (min-width: 520px) {
  .buybox {
    grid-template-columns: 96px minmax(0, 1fr) max-content;
    align-items: center;
  }
  .buybox .shop-buttons {
    grid-column: 3;
    width: max-content;
    max-width: 24rem;
    align-self: center;
  }
  .buybox .btn-shop {
    width: max-content;
    max-width: 24rem;
    white-space: nowrap;
  }
}
.product .shop-buttons .btn-shop { width: 100%; }

/* Comparison cards: one column of facts, not a wide table. */
.compare-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  margin-bottom: 8px;
}
/* Do not set container-type on these cards. Inline-size containment stops the
   shared subgrid row from growing, so the kampanj badge overlaps Annons. */
.compare-cards .product-img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.compare-cards .btn-shop {
  white-space: normal;
}

.faq details { border-bottom: 1px solid var(--linje); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq details p { margin: 0 0 12px; }

@media (max-width: 480px) {
  section.tight.atf { padding-top: 12px; }
  .atf .answer { margin-bottom: 8px; font-size: 1rem; }
  .atf .disclosure { margin: 8px 0 12px; padding: 8px 12px; }
  .atf > .wrap > h2 { margin-top: 8px; }
  .buybox { padding: 10px; gap: .5rem; }
  .buybox p { font-size: .95rem; }
}

/* ---------- Guide pages: cards in the text, short answer, tables (v41–42) ----------
   Mobile first. The cards reuse .compare-cards/.product-grid (subgrid rows) and the shop
   buttons from renderShopButtons, so affiliate_click tracking and Annons labels are shared. */
.inline-cards {
  container: cards / inline-size;
  margin: clamp(12px, 3vw, 20px) 0 clamp(20px, 4vw, 28px);
}
.inline-cards .compare-cards {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
/* Wide column: one card per row, photo on the left. No orphan card in a 2-column grid. */
@container cards (width >= 34rem) {
  .inline-cards .product-grid > .product {
    display: grid;
    grid-template-columns: clamp(9rem, 30cqi, 13rem) minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-row: auto;
    align-content: start;
  }
  .inline-cards .product > .product-img { grid-column: 1; grid-row: 1 / span 5; height: 100%; max-height: 16rem; aspect-ratio: auto; align-self: center; }
  .inline-cards .product > .product-body,
  .inline-cards .product :is(h3, .product-text, .price, .shop-name, .shop-buttons) { grid-column: 2; }
  .inline-cards .product h3 { padding-top: 16px; }
}
.inline-cards .product h3 { font-family: "Source Sans 3", "Source Sans 3 Fallback", "Segoe UI", sans-serif; font-size: 1.1rem; margin: 0 0 6px; }
.prose .inline-cards .product-text p { margin: 0 0 6px; font-size: .95rem; line-height: 1.45; }
.prose .inline-cards .product p.price,
.prose .inline-cards .product p.shop-name { margin: 0; }
.inline-cards .product-img { height: auto; aspect-ratio: 16 / 9; padding: 12px; background-color: var(--kort); }
.card-choose strong, .card-stock span { color: var(--skog); }
.card-spec { color: var(--muted); }
.card-stock { color: var(--muted); }
.card-notice {
  padding: 6px 10px;
  border-left: 3px solid var(--annons);
  background: #fbf3e8;
  border-radius: 0 8px 8px 0;
  color: #5a3a10;
}
.product:has(.card-notice) { border-color: #e4c8a6; }
.price-checked { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.prose .cards-date { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.inline-cards 
/* Short answer box ("> **Kort svar:** …" in Markdown, or the answer field). */
.prose .answer {
  max-width: 62ch;
  margin: 0 0 clamp(14px, 3vw, 20px);
  padding: clamp(12px, 3vw, 16px) clamp(14px, 3.5vw, 18px);
  background: var(--kort);
  border: 1px solid var(--linje);
  border-left: 4px solid var(--guld);
  border-radius: 12px;
}
.prose .answer p { margin: 0 0 8px; }
.prose .answer p:last-child { margin-bottom: 0; }
.prose blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--linje); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--linje); margin: 24px 0; }
.prose :is(h2, h3)[id] { scroll-margin-top: 84px; }

/* Markdown tables: a table when the column is wide, one card per row when it is not. */
.md-table { container: mdtable / inline-size; max-width: 100%; margin: 4px 0 20px; overflow-x: auto; }
.prose .md-table table { display: table; width: 100%; border-collapse: collapse; overflow: visible; }
.md-table :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--linje); text-align: left; vertical-align: top; }
.md-table th[scope="row"] { background: none; color: inherit; font-weight: 700; }
@container mdtable (width < 34rem) {
  .md-table table, .md-table tbody { display: block; }
  .md-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .md-table tbody { display: grid; gap: 10px; }
  .md-table tr {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    column-gap: 10px;
    padding: 12px 14px;
    background: var(--kort);
    border: 1px solid var(--linje);
    border-radius: 12px;
  }
  .md-table :is(th, td) { grid-column: 1 / -1; padding: 4px 0; border: 0; }
  .md-table th[scope="row"] { padding-bottom: 8px; border-bottom: 1px solid var(--linje); color: var(--skog); }
  .md-table td[data-label] { display: grid; grid-template-columns: 6rem minmax(0, 1fr); grid-template-columns: subgrid; }
  .md-table td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--muted); font-size: .85rem; font-weight: 600; }
}
/* A row of links separated by " · " in the text: same words, 44 px tap targets. */
.prose p.link-row a { display: inline-flex; align-items: center; min-height: 44px; }

/* Jul (theme: jul). Static decoration only: no animation. The garland (/img/jul/girlang.svg) is absolute on top of the
   hero image; on cards its height is reserved with padding-top. No CLS. */
:root { --julrod: #8e1b24; }
.jul-garland { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 640 / 84; background: url("/img/jul/girlang.svg") no-repeat center top / 100% auto; pointer-events: none; z-index: 1; }
.guide-hero--jul { position: relative; }
.guide-hero--jul .jul-garland { top: -6px; left: 0; right: 0; }
.theme-jul .prose .answer { border-left-color: var(--julrod); }
.guide-card--jul { position: relative; border-top: 3px solid var(--julrod); padding-top: calc(13.125% + 14px); }
.guide-card--jul .jul-garland { top: -2px; left: -4px; right: -4px; }
.guide-card--jul .kicker { color: var(--julrod); display: inline-flex; align-items: center; gap: 6px; }
.jul-icon { flex: none; }

/* Nyhetsbrev med prisbevakning: samma kortstil som produktkorten, ingen popup, inte sticky. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nyhetsbrev { margin: 32px 0; padding: 20px 16px; background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius); }
.nyhetsbrev h2 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.25; }
.nyhetsbrev p { margin: 0 0 12px; }
.nb-valen { border: 0; padding: 0; margin: 4px 0 12px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.nb-val { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 500; }
.nb-val input { flex: none; width: 20px; height: 20px; accent-color: var(--skog); }
.nb-epost input { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; border: 1px solid var(--linje); border-radius: 12px; background: #fff; }
.nb-epost input:focus-visible { outline: 3px solid var(--skog); outline-offset: 1px; }
.nyhetsbrev .nb-knapp { width: 100%; margin-top: 10px; font-family: inherit; }
.nb-samtycke { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.nb-fel { color: var(--annons); font-weight: 600; }
@media (min-width: 560px) { .nb-valen { grid-template-columns: 1fr 1fr; } .nyhetsbrev { padding: 24px; } }
.nb-etikett { display: block; font-weight: 600; margin-bottom: 4px; }
/* Säkerhetsnät: hamnar rutan ändå i en produktgrid tar den hela raden. */
.product-grid > .nyhetsbrev { grid-column: 1 / -1; }