/* Envana designsystem: Bagoss Standard (rubrik, bildlabels, sigill, VS) +
     Hanken Grotesk (radtext). Tokens i envana-custom.css (--env-*). */

  /* Sektion: vit bakgrund — gamla persiko/orange-gradienten borttagen */
  .epdp-comparison { background: var(--env-bg-base); padding: 48px 0 56px; }

  /* Dubbelklass slår .epdp-regeln i envana-pdp-base.css, som laddas om av
     ännu inte ombyggda epdp-sektioner längre ner på sidan och annars vinner
     källordningen. Tas ned till .epdp-comparison när alla sektioner bytt. */
  .epdp.epdp-comparison { font-family: var(--env-font-body); color: var(--env-text-body); }

  .epdp-comparison__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

  /* Rubrik: H1-skala 40/45, Bagoss Regular, ink, centrerad */
  .epdp-comparison__title { margin: 0 0 32px; font-family: var(--env-font-heading); font-weight: 400; font-size: 40px; line-height: 45px; letter-spacing: -0.03em; color: var(--env-text-heading); text-align: center; }

  .epdp-comparison__table { max-width: 900px; margin: 0 auto; }

  /* Bildrad */
  .epdp-comparison__vs { position: relative; display: flex; gap: 12px; margin-bottom: 24px; }
  .epdp-comparison__side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .epdp-comparison__photo { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--env-bg-subtle); }
  .epdp-comparison__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* Bildlabels: H3-skala 22/28, Bagoss Regular ink — inte kursiv serif */
  .epdp-comparison__caption { font-family: var(--env-font-heading); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; color: var(--env-text-heading); text-align: center; }

  /* VS-cirkel: enda mörka ytan (bg/ink), Bagoss Medium versaler.
     top-offset -20px = halva (caption 28px + gap 12px) så cirkeln
     centreras på fotoraden, inte på hela blocket inkl. labels. */
  .epdp-comparison__badge { position: absolute; left: 50%; top: calc(50% - 20px); transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--env-bg-ink); color: var(--env-text-on-ink); font-family: var(--env-font-heading); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: 0.03em; }

  /* Jämförelserader */
  .epdp-comparison__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; margin-top: 12px; }
  .epdp-comparison__text { min-width: 0; }
  .epdp-comparison__ico { flex-shrink: 0; }

  /* Vänster: röd pill, vit Hanken Medium, vit check via currentColor.
     Text högerställd så check-ikonerna radar upp sig mot VS-axeln. */
  .epdp-comparison__pro { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; background: var(--env-action-primary); border-radius: 999px; color: var(--env-text-on-primary); font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; text-align: right; }

  /* Höger: vit rad med hairline, kryss i ink */
  .epdp-comparison__con { display: flex; align-items: center; gap: 10px; padding: 11px 20px; background: var(--env-bg-base); border: 1px solid var(--env-border-subtle); border-radius: 999px; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--env-text-body); }
  .epdp-comparison__con .epdp-comparison__ico { color: var(--env-text-heading); }

  @media screen and (max-width: 989px) {
    .epdp-comparison { padding: 40px 0 48px; }
    .epdp-comparison__title { font-size: 32px; line-height: 36px; margin-bottom: 24px; }
    .epdp-comparison__vs { gap: 8px; margin-bottom: 16px; }
    .epdp-comparison__side { gap: 8px; }
    .epdp-comparison__photo { border-radius: 12px; }
    /* -18px = halva (caption 28px + gap 8px), samma logik som desktop */
    .epdp-comparison__badge { width: 48px; height: 48px; font-size: 16px; top: calc(50% - 18px); }
    .epdp-comparison__row { gap: 8px; margin-top: 8px; }
    /* Kompakta pills på mobil som livesidan: mindre text (max en
       radbrytning), tightare padding — Rasmus 2026-08-11. Medvetet
       undantag från 16px-regeln, pills är UI-rader, inte brödtext. */
    .epdp-comparison__pro { padding: 8px 14px; gap: 6px; font-size: 13px; line-height: 18px; }
    .epdp-comparison__con { padding: 8px 14px; gap: 6px; font-size: 13px; line-height: 18px; }
    .epdp-comparison__ico { width: 16px; height: 16px; }
  }