/* ══════════════════════════════════════════════════════════════════════
   PhoneLab — temats eget lager ovanpå designen

   Laddas EFTER phonelab.css. Den filen är en byte-för-byte-kopia av
   designen i templates/ och ska aldrig redigeras — allt temat lägger till
   eller rättar bor här i stället, så designen går att kopiera om.

   Innehåll i ordning:
     1–5. Inriktning: en vänsterlinje, sektionstopp i två spalter, m.m.
     6.   Butiksbilder (#butiken) — ny komponent, inte en rättning.
     7–15. Nya komponenter: se rubrikerna under.

   ── 1–5: INRIKTNING ─────────────────────────────────────────────────
   Vad de gör:
     1. En enda vänsterlinje för hela sidan (kontaktrad, header, sektioner,
        footer startar på exakt samma x).
     2. Sektionstoppen blir ett redaktionellt tvåspalt: rubrik till vänster,
        direktsvaret till höger — i stället för en tom högerhalva.
     3. Frågesektionen på hemmet slutar vara en smalare, centrerad kolumn
        som hoppar inåt jämfört med alla andra sektioner.
     4. Block som lämnade stora döda ytor (pristabellen, betygsraden,
        brödtexten) fyller nu sin bredd.
   ══════════════════════════════════════════════════════════════════════ */


  /* ══ 1. EN VÄNSTERLINJE ═════════════════════════════════════════
     section har max-width:1160px + 24px padding, alltså innehåll på
     1112px. Kontaktraden och footern hade 1160px UTAN padding och låg
     därför 24px längre ut än resten av sidan. Samma box överallt nu. */
  .cbar { padding-inline: 0; }
  footer { padding-inline: 0; }

  .cbar-inner,
  footer .foot-grid,
  footer .foot-legal {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }


  /* ══ 2. SEKTIONSTOPP I TVÅ SPALTER ══════════════════════════════
     Varje sektion inleds med .sec-head + .answer, båda vänsterställda
     och smala — vilket lämnade ~450px tomt till höger i varje sektion.
     De sitter nu bredvid varandra: rubriken i spalt 1, svaret i spalt 2
     med underkanten i linje med rubriken. Payloaden (kort, tabell,
     lista) spänner som förut över hela bredden.

     :has() gör att regeln bara träffar sektioner som faktiskt har paret
     — hero och slut-CTA:n rörs inte, och alla undersidor med samma
     mönster får samma behandling automatiskt. */
  main > section:has(> .sec-head + .answer) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-content: start;
  }
  main > section:has(> .sec-head + .answer) > * { grid-column: 1 / -1; min-width: 0; }

  main > section:has(> .sec-head + .answer) > .sec-head {
    grid-column: 1;
    margin-bottom: 36px;
  }
  main > section:has(> .sec-head + .answer) > .sec-head + .answer {
    grid-column: 2;
    align-self: end;          /* svaret hänger i rubrikens underkant */
    max-width: none;          /* spalten sätter radlängden (~60 tecken) */
    margin-bottom: 36px;
  }

  /* Den streckade avdelaren satt på .sec-head. När rubriken blir en
     halvspalt skulle linjen bara nå halva sidan — den flyttas därför
     till sektionen själv och spänner över hela linjen igen. */
  main > section + section:has(> .sec-head + .answer) > .sec-head {
    padding-top: 0;
    border-top: 0;
  }
  main > section + section:has(> .sec-head + .answer)::before {
    content: "";
    grid-column: 1 / -1;
    border-top: 2px dashed rgba(26, 35, 50, .16);
    margin-bottom: 46px;
  }


  /* ══ 3. FRÅGESEKTIONEN ══════════════════════════════════════════
     Sektionen var låst till 860px och centrerad, så rubrik, svar och
     avdelare hoppade ~126px inåt mitt i sidan medan allt annat låg
     kvar på linjen. Full bredd som alla andra; dragspelet blir två
     spalter i stället för en halvtom kolumn.

     Gäller både hemmet och /fragor/ — annars skulle sektionstoppen
     (som nu är ett tvåspalt) och listan under den hamna i olika
     bredder på frågesidan. */
  #fragor > .sec-head,
  #fragor > .answer,
  #fragor > .faq-list,
  #fragor > .qp-hint {
    max-width: none;
    margin-inline: 0;
  }
  #fragor > .faq-list {
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    align-content: start;
  }
  /* fem frågor på hemmet: den första spänner över båda spalterna så
     att 1 + 2 + 2 går jämnt ut utan hål i rutnätet */
  body.home #fragor > .faq-list > details:first-child { grid-column: 1 / -1; }


  /* ══ 4. BLOCK SOM FYLLER SIN BREDD ══════════════════════════════ */

  /* Betygsraden: knappen låg mitt i kortet med ett tomt högerfält
     efter sig. Nu ytterst till höger, som i alla andra kort. */
  .proof-cta { margin-left: auto; }

  /* Pristabellen: alla tre kolumner var vänsterställda, så priser och
     tider samlades i mitten och högra fjärdedelen stod tom. Siffrorna
     ställs höger — samma kant som tabellen. */
  table.prices th:nth-child(2), table.prices td:nth-child(2),
  table.prices th:nth-child(3), table.prices td:nth-child(3) { text-align: right; }

  /* Datumraden och "se alla priser" hamnar på samma rad, i kant med
     tabellens två ytterkanter. */
  body.home #priser > .upd {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Kartan slutade halvvägs ner medan kolumnen bredvid (adress + tider)
     fortsatte — de två spalterna får samma höjd, kartan växer i stället
     för att lämna en tom fjärdedel. */
  body.home #hitta-hit > .visit { align-items: stretch; }
  body.home #hitta-hit > .visit > .map-box { display: flex; flex-direction: column; }
  body.home #hitta-hit > .visit > .map-box iframe { flex: 1 1 auto; min-height: 420px; height: auto; }

  /* Brödtexten: 74ch i en 1112px-bred sektion lämnade halva ytan tom.
     Två spalter ger samma radlängd men fyller sektionen; mellanrubriken
     spänner över båda. */
  body.home #om > .prose {
    max-width: none;
    columns: 2;
    column-gap: 56px;
  }
  body.home #om > .prose p { break-inside: avoid; }
  /* mellanrubriken spänner inte över spalterna — då hamnar sista stycket
     ensamt i vänsterspalten. Den följer med sitt stycke i stället. */
  body.home #om > .prose h3 { break-after: avoid; break-inside: avoid; }


  /* ══ 5. RESPONSIVT ══════════════════════════════════════════════ */
  @media (max-width: 900px) {
    main > section:has(> .sec-head + .answer) { grid-template-columns: 1fr; }
    main > section:has(> .sec-head + .answer) > .sec-head {
      grid-column: 1 / -1;
      margin-bottom: 18px;
    }
    main > section:has(> .sec-head + .answer) > .sec-head + .answer {
      grid-column: 1 / -1;
      align-self: auto;
      max-width: 66ch;
      margin-bottom: 30px;
    }
    main > section + section:has(> .sec-head + .answer)::before { margin-bottom: 34px; }

    body.home #fragor > .faq-list { grid-template-columns: 1fr; }
    body.home #om > .prose { columns: 1; max-width: 66ch; }
  }

  @media (max-width: 640px) {
    /* sektionerna går ner till 20px padding — linjen följer med */
    .nav,
    .cbar-inner,
    footer .foot-grid,
    footer .foot-legal {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
    main > section + section:has(> .sec-head + .answer)::before { margin-bottom: 26px; }
  }


  /* ══ 6. BUTIKSBILDER (#butiken) ═════════════════════════════════
     Tre foton från butiken, valda under PhoneLab → Startsida.

     Rutnätet är strikt — tre lika spalter på samma linje som allt
     annat i sektionen. Det som lutar är korten i rutorna, var och en
     åt sitt håll, med ett färgat kort snett bakom sig. Snedheten är
     alltså en medveten rotation ovanpå ett rakt rutnät, inte ojämna
     kanter: ramarna hamnar aldrig utanför sektionens linje.

     Samma formspråk som resten av sajten: 3px inkram, hård offset-
     skugga, gul/teal/röd. Hovring rätar upp kortet och lyfter det, så
     att det färgade kortet bakom syns mer. */
  .shopshots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 30px;
    margin-top: 6px;
  }
  /* Ramarna ligger på linjen, men det lutande färgkortet bakom sticker
     medvetet ut i sektionens marginal. overflow-x: clip håller det inom
     sektionens yttermått så att sidan aldrig kan scrolla i sidled — clip,
     inte hidden: ingen scrollcontainer, och höjden förblir synlig. */
  #butiken { overflow-x: clip; }

  .sshot {
    --tilt: -2.2deg;
    --accent: var(--yellow);
    --cap-ink: var(--ink);
    position: relative;
    margin: 0;
    rotate: var(--tilt);
    transition: rotate .2s ease, translate .2s ease;
  }
  .sshot.s2 { --tilt: 1.7deg;  --accent: var(--teal); --cap-ink: #fff; }
  .sshot.s3 { --tilt: -1.2deg; --accent: var(--red);  --cap-ink: #fff; }

  /* Det färgade kortet bakom. Spegelvänd vinkel mot fotot och förskjutet
     nedåt höger, så det sticker fram i två hörn — det är färgen i
     sektionen, inte en kant som råkat hamna snett. */
  .sshot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--accent);
    border: 3px solid var(--ink);
    border-radius: 20px;
    /* Exakt spegelvänd vinkel (kortet lutar var(--tilt), det här lika
       mycket åt andra hållet). Mer än så och ett brett kort svallar ut
       bredare än sektionens marginal. */
    rotate: calc(var(--tilt) * -2);
    translate: 9px 11px;
    transition: rotate .2s ease, translate .2s ease;
  }

  .sshot-frame {
    position: relative;
    z-index: 1;
    border: 3px solid var(--ink);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-soft);
    box-shadow: 5px 5px 0 var(--ink);
    aspect-ratio: 4 / 3;
  }
  .sshot-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* bildtexten: färgad remsa som hänger i underkanten på ramen */
  .sshot figcaption {
    position: relative;
    z-index: 2;
    margin: -14px 14px 0;
    background: var(--accent);
    color: var(--cap-ink);
    border: 3px solid var(--ink);
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--ink);
    padding: 8px 14px;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.3;
  }

  .sshot:hover,
  .sshot:focus-within {
    rotate: 0deg;
    translate: 0 -4px;
  }
  .sshot:hover::before,
  .sshot:focus-within::before {
    rotate: calc(var(--tilt) * -2.6);
    translate: 13px 17px;
  }

  /* Färre än tre valda bilder ska inte lämna hål i rutnätet — och en
     ensam bild ställer sig på linjen till vänster, inte i mitten. */
  .shopshots[data-count="1"] { grid-template-columns: minmax(0, 520px); }
  .shopshots[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  @media (max-width: 900px) {
    /* Två spalter, och den tredje bilden behåller sin storlek i stället för
       att spänna över båda — ett foto i dubbel bredd bredvid två små blir
       en jättebild, inte en bildrad. Tom ruta bredvid är helt normalt i
       ett bildrutnät. */
    .shopshots,
    .shopshots[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
    .shopshots[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 560px) {
    .shopshots,
    .shopshots[data-count="2"],
    .shopshots[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
    /* mindre lutning på liten skärm: kortet är nästan lika brett som
       sidan och får inte luta ut över kanten */
    .sshot { --tilt: -1deg; }
    .sshot.s2 { --tilt: .9deg; }
    .sshot.s3 { --tilt: -.7deg; }
  }

  /* Rotationen är dekor. Den som bett om mindre rörelse får raka kort. */
  @media (prefers-reduced-motion: reduce) {
    .sshot,
    .sshot::before { rotate: 0deg; transition: none; }
    .sshot:hover, .sshot:focus-within { translate: none; }
    /* det färgade kortet blir en rak offset i stället för en snedställd */
    .sshot::before,
    .sshot:hover::before,
    .sshot:focus-within::before { translate: 9px 11px; }
  }

  /* ══ 7. IKONEN #i-redo ══════════════════════════════════════════
     Alla symboler i sprite:n sätter fill på sina former utom i-redo,
     som är ren kontur. Ikonrutorna (.glob-ic, .svc-ic) sätter bara
     stroke, så i-redo fylls svart och blir en klump. fill sätts på
     <use> — det ärvs in i symbolen eftersom formerna saknar eget fill,
     och rör ingen annan ikon. */
  .glob-ic svg use[href="#i-redo"],
  .svc-ic svg use[href="#i-redo"],
  .tr .ic svg use[href="#i-redo"] { fill: none; }


  /* ══ 8. VARUMÄRKESORDET ═════════════════════════════════════════
     "PhoneLab" skrivs med Lab i rött i all synlig text. Uppmärkningen
     sätts av inc/brand.php; här är bara färgen.

     Ordet ärver allt annat — vikt, storlek, kursiv — så att det följer
     med rubriker, brödtext och fetstil utan att sticka ut på fel sätt. */
  .pl-lab {     color: #ffffff;
    background-color: var(--teal);
    padding: 0 0.3ch 0 0.2ch;
    border-radius: 5px;
  }

  /* Inuti röda ytor skulle ordet försvinna. Där ärver det i stället
     omgivningens färg, precis som resten av meningen. */
  .btn-red .pl-lab,
  .tr.t .pl-lab,
  .sshot figcaption .pl-lab,
  .prov .pl-lab,
  .fill .pl-lab { color: inherit; }

  /* På mörka ytor är #D20000 för svagt mot nästan svart — en ljusare
     röd håller samma signal med läsbar kontrast. */
  .endcta .pl-lab,
  .map-box figcaption .pl-lab,
  table.prices thead .pl-lab,
  .layer-dark .pl-lab,
  .layer-fixed .pl-lab { color: #ff6b5e; }


  /* ══ 9. LOGOTYPENS HÖJD ═════════════════════════════════════════
     Designen sätter 62px i phonelab.css. Den filen är en kopia och
     redigeras aldrig — höjden justeras här i stället.

     Mobilregeln måste skrivas om: phonelab.css sätter 46px inuti
     @media (max-width:900px), men den här filen laddas efter, så en
     naken .logo svg-regel hade slagit igenom även på mobil. */
  .logo svg { height: 75px; }

  @media (max-width: 900px) {
    .logo svg { height: 46px; }
  }


  /* ══ 10. INGEN STRECKAD LINJE MELLAN STEGEN ═════════════════════
     phonelab.css ritar en streckad linje tvärs över .steps med ett
     ::before. Den tas bort här i stället för i designfilen.

     content: none gör att pseudoelementet aldrig skapas — till
     skillnad från display: none, som skapar det och sedan döljer det. */
  .steps::before { content: none; }


  /* ══ 11. MODELLER SOM INGÅR (gruppsidor) ═════════════════════════
     Ny komponent, inte en rättning: enhetssidor för en hel serie
     (iPhone, iPad, Samsung, Pixel, Övriga märken) listar de enskilda
     modellerna sidan gäller för. Samma pill-språk som .btn: 3px
     ink-kant, 999px radie — men vilande i stället för klickbar. */
  .variant-tags { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none;
    margin: 18px 0 0; padding: 0; }
  .variant-tags li { border: 3px solid var(--ink); border-radius: 999px; background: #fff;
    padding: 7px 16px; font-weight: 700; font-size: .88rem; }


  /* ══ 12. ENHETSVÄLJAREN (.dp) — parts/model-cards.php ═════════════
     Ny komponent (2026-09-25, v4): sök + märkesbrickor + generationer +
     priskort i ett vitt kort med hård skugga (samma språk som .qp).
     Utan JS: sök, brickor, hjälp och .dp-static (populära modeller som
     vanliga länkar). Med JS (.is-js): .dp-static göms, resten visas på plats. */
  .dp { position: relative; margin-top: 26px; background: #fff; border: 3px solid var(--ink);
    border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 22px; }
  .dp [hidden] { display: none !important; }
  .dp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dp svg.dp-ic { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .dp svg.dp-dev { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 2.2;
    stroke-linejoin: round; stroke-linecap: round; flex-shrink: 0; }

  /* Igenkänning / senast visade */
  .dp-hint { display: flex; gap: 14px; align-items: flex-start; position: relative;
    background: var(--yellow-soft); border: 3px solid var(--ink); border-radius: 16px;
    padding: 14px 44px 14px 16px; margin-bottom: 18px; }
  .dp-hint > div { flex: 1; min-width: 0; }
  .dp-hint svg.dp-dev { width: 36px; height: 36px; margin-top: 2px; }
  .dp-hint b { display: block; font-size: 1.05rem; font-weight: 900; }
  .dp-hint small { display: block; color: var(--muted); font-size: .9rem; font-weight: 700; }
  .dp-hint .btn { margin-top: 10px; padding: 10px 20px; font-size: .95rem; }
  .dp-hint .dp-pills { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .dp-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 1.5rem;
    line-height: 1; cursor: pointer; color: var(--ink); padding: 4px 8px; }

  /* Sök */
  .dp-search { position: relative; }
  .dp-field { display: flex; align-items: center; gap: 10px; background: var(--cream);
    border: 3px solid var(--ink); border-radius: 999px; padding: 5px 5px 5px 18px; }
  .dp-field:focus-within { box-shadow: 3px 3px 0 var(--red); }
  .dp-field input { flex: 1; min-width: 0; width: auto; border: 0; background: none; box-shadow: none;
    padding: 10px 0; font-size: 1.12rem; font-weight: 700; color: var(--ink); }
  .dp-field input:focus { box-shadow: none; }
  .dp-field input::placeholder { color: #9aa1ab; font-weight: 600; }
  .dp-field input::-webkit-search-cancel-button { display: none; }
  .dp-field .btn { box-shadow: none; padding: 10px 22px; white-space: nowrap; }
  .dp-field .btn:hover { transform: none; box-shadow: none; }
  .dp-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); list-style: none;
    margin: 0; padding: 0; background: #fff; border: 3px solid var(--ink); border-radius: 16px;
    box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
  .dp-list li { margin: 0; }
  .dp-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 11px 16px; color: var(--ink); text-decoration: none; border-bottom: 2px dashed #e3dccb; }
  .dp-list li:last-child a { border-bottom: 0; }
  .dp-list [aria-selected="true"] a, .dp-list a:hover { background: var(--yellow-soft); }
  .dp-list b { font-weight: 900; }
  .dp-list small { color: var(--muted); font-size: .85rem; font-weight: 700; white-space: nowrap; }
  .dp-list em, .dp-pill em { font-style: normal; font-weight: 900; color: var(--red); }
  .dp-list .dp-none { padding: 12px 16px; color: var(--muted); font-weight: 700; }
  .dp-results { margin-top: 18px; }
  .dp-results h2 { font-size: 1.15rem; margin: 0; }

  .dp-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--muted);
    font-size: .82rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
  .dp-or::before, .dp-or::after { content: ""; flex: 1; border-top: 2px dashed #e3dccb; }

  /* Märkesbrickor */
  .dp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .dp-tiles li { margin: 0; }
  .dp-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
    padding: 14px 6px 12px; text-align: center; color: var(--ink); text-decoration: none;
    background: var(--cream); border: 3px solid var(--ink); border-radius: 16px;
    transition: transform .12s, box-shadow .12s, background .12s; }
  .dp-tile:hover, .dp-tile:focus-visible { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); outline: none; }
  .dp-tile[aria-current="true"] { background: var(--yellow); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
  .dp-tile b { font-size: 1rem; font-weight: 900; line-height: 1.15; }
  .dp-tile small { font-size: .76rem; font-weight: 700; color: var(--muted); line-height: 1.2; }

  /* Generationer + modeller */
  .dp-browse { margin-top: 18px; padding-top: 16px; border-top: 2px dashed #e3dccb; }
  .dp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
    padding: 2px 2px 14px; scroll-snap-type: x proximity; }
  .dp-chips::-webkit-scrollbar { height: 6px; }
  .dp-chips::-webkit-scrollbar-track { background: transparent; }
  .dp-chips::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }
  /* Kantfade signalerar att raden går att skrolla; JS (initPicker) sätter
     can-scroll-l/-r efter render och vid scroll, se phonelab.js. */
  .dp-chips.can-scroll-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
  .dp-chips.can-scroll-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
  .dp-chips.can-scroll-l.can-scroll-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
  .dp-chip { flex-shrink: 0; scroll-snap-align: start; font: inherit; font-weight: 800; font-size: .92rem;
    padding: 7px 15px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
  .dp-chip:hover { background: var(--yellow-soft); }
  .dp-chip[aria-selected="true"] { background: var(--ink); color: var(--cream); }
  .dp-chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
  .dp-pills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
  .dp-pills li { margin: 0; }
  .dp-pill { display: flex; flex-direction: column; height: 100%; padding: 10px 14px; color: var(--ink);
    text-decoration: none; background: #fff; border: 2px solid var(--ink); border-radius: 12px;
    transition: background .1s, transform .1s; }
  .dp-pill:hover, .dp-pill:focus-visible { background: var(--yellow-soft); transform: translateY(-1px); outline: none; }
  .dp-pill b { font-size: .98rem; font-weight: 900; }
  .dp-pill small { font-size: .8rem; font-weight: 700; color: var(--muted); }
  .dp-pill.is-ask { border-style: dashed; }
  .dp-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: .92rem; font-weight: 700; }
  .dp-foot a { color: var(--red); font-weight: 900; }

  /* Priskortet */
  .dp-card { margin-top: 18px; padding-top: 18px; border-top: 2px dashed #e3dccb; outline: none;
    scroll-margin-top: calc(var(--cbar-h) + var(--hdr-h) + 16px); }
  .dp-browse { scroll-margin-top: calc(var(--cbar-h) + var(--hdr-h) + 16px); }
  .dp-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .dp-card-h small { display: block; color: var(--muted); font-weight: 800; font-size: .85rem; }
  .dp-card-h h3 { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -.5px; line-height: 1.1; }
  .dp-card-h button { margin-left: auto; font: inherit; font-weight: 800; font-size: .88rem; color: var(--ink);
    background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
  .dp-card-h button:hover { background: var(--yellow-soft); }
  .dp-rows { list-style: none; margin: 0; padding: 0; }
  .dp-rows li { margin: 0; }
  .dp-rows a { display: grid; grid-template-columns: 42px 1fr auto 18px; align-items: center; gap: 12px;
    padding: 13px 4px; color: var(--ink); text-decoration: none; border-bottom: 2px dashed #e3dccb; }
  .dp-rows a:hover { background: var(--cream); }
  .dp-ic-box { width: 42px; height: 42px; display: grid; place-items: center; background: var(--bg-soft);
    border: 2px solid var(--ink); border-radius: 11px; }
  .dp-rows b { display: block; font-size: 1.05rem; font-weight: 900; }
  .dp-rows small { color: var(--muted); font-size: .84rem; font-weight: 700; }
  .dp-rows em { font-style: normal; font-weight: 900; font-size: 1.12rem; color: var(--red); white-space: nowrap; text-align: right; }
  .dp-rows em span { margin-right: 4px; font-size: .78rem; color: var(--muted); font-weight: 800; }
  .dp-rows em.is-ask { font-size: .85rem; color: var(--muted); white-space: normal; }
  .dp-rows i { font-style: normal; font-weight: 900; }
  .dp-glob { margin: 14px 0 0; font-size: .92rem; color: var(--muted); font-weight: 700; }
  .dp-glob a { color: var(--ink); font-weight: 800; }
  .dp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
  .dp-trust { margin: 12px 0 0; font-size: .86rem; font-weight: 800; color: var(--teal-deep); }

  /* Hjälp + statisk lista (utan JS / för sökmotorer) */
  .dp-help { margin-top: 18px; background: var(--cream); border: 2px solid var(--ink); border-radius: 14px; }
  .dp-help summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px;
    font-weight: 900; cursor: pointer; list-style: none; }
  .dp-help summary::-webkit-details-marker { display: none; }
  .dp-help summary::after { content: "+"; color: var(--red); font-size: 1.3rem; line-height: 1; }
  .dp-help[open] summary::after { content: "–"; }
  .dp-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 0 16px 12px; font-size: .92rem; }
  .dp-help dt { font-weight: 900; }
  .dp-help dd { margin: 0; }
  .dp-help p { margin: 0; padding: 0 16px 14px; font-size: .92rem; color: var(--muted); font-weight: 700; }
  .dp-static { margin-top: 18px; }
  .dp-static h3 { font-size: 1.05rem; margin: 0 0 8px; }
  .dp-static > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .dp-static > ul > li > a { font-weight: 900; color: var(--ink); }
  .dp-static ul ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; padding: 0; font-size: .92rem; }
  .dp-static ul ul a { color: var(--ink); }
  .dp-static > p { margin: 12px 0 0; font-weight: 900; }
  .dp-static > p a { color: var(--red); }
  .dp.is-js .dp-static { display: none; }

  @media (max-width: 760px) {
    .dp { padding: 16px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
    .dp-hint { padding: 12px 40px 12px 12px; }
    .dp-hint > svg.dp-dev { display: none; }
    .dp-hint .dp-pills { grid-template-columns: 1fr 1fr; }
    .dp-field { padding-left: 14px; }
    .dp-field input { font-size: 1rem; }
    .dp-field .btn { padding: 9px 16px; }
    .dp-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .dp-tile { padding: 12px 4px 10px; }
    .dp-tile small { display: none; }
    .dp svg.dp-dev { width: 36px; height: 36px; }
    .dp-pills { grid-template-columns: 1fr 1fr; }
    .dp-pill { padding: 9px 11px; }
    .dp-card-h h3 { font-size: 1.3rem; }
    .dp-rows a { grid-template-columns: 36px 1fr auto 14px; gap: 10px; }
    .dp-ic-box { width: 36px; height: 36px; }
    .dp-rows em { font-size: 1rem; }
    .dp-rows em span { display: block; margin: 0; }
    .dp-cta .btn { flex: 1 1 100%; text-align: center; padding: 12px 18px; }
    .dp-trust { font-size: .8rem; }
    .dp-help dl { grid-template-columns: 1fr; gap: 2px; }
    .dp-help dd { margin-bottom: 8px; }
  }


  /* ══ 13. MODELLSÖK, PRISTABELL PER MODELL, FLER MODELLER ═════════
     Nya komponenter (2026-09-25), inga rättningar:
     • .msearch-list / -none / -results — träfflistan för /priser/?q=
       utan JS (sökfältet självt är .dp-search i §12).
     • .model-prices — märkessidans tabell, en rad per modell. Bygger
       på table.prices men med fler kolumner: första kolumnen bredast,
       alla priskolumner högerställda, rullar i sidled i sin egen ram
       på smala skärmar i stället för att trycka ut sidan.
     • .variant-links — "Andra iPhone-modeller" på modellsidan: samma
       piller som .variant-tags (§11), men klickbara. */
  .msearch-list { list-style: none; margin: 12px 0 0; padding: 0; border: 3px solid var(--ink);
    border-radius: 16px; overflow: hidden; background: #fff; }
  .msearch-list li + li { border-top: 2px solid rgba(26,35,50,.12); }
  .msearch-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 12px 16px; color: var(--ink); text-decoration: none; font-weight: 900; }
  .msearch-list a:hover, .msearch-list a.is-active, .msearch-list a:focus { background: var(--yellow-soft); outline: none; }
  .msearch-list small { color: var(--muted); font-weight: 700; font-size: .86rem; text-align: right; }
  .msearch-none { margin-top: 12px; font-weight: 700; color: var(--muted); }

  .mt-filter { max-width: 420px; margin-bottom: 16px; }
  .mt-filter label { display: block; font-weight: 900; font-size: .82rem; letter-spacing: .6px;
    margin-bottom: 6px; }
  .mt-empty { margin-top: 14px; font-weight: 700; color: var(--muted); }
  .tbl-wrap.mt-wrap { overflow-x: auto; }
  table.prices.model-prices th, table.prices.model-prices td { width: auto; text-align: right; }
  table.prices.model-prices th:first-child { width: 34%; text-align: left; }
  table.prices.model-prices .r-price { font-size: 1rem; }
  table.prices.model-prices .r-none { color: var(--muted); }
  table.prices.model-prices .r-ask { color: var(--muted); font-weight: 700; font-size: .88rem; }
  .variant-links li { padding: 0; }
  .variant-links a { display: block; padding: 7px 16px; color: var(--ink); text-decoration: none; border-radius: 999px; }
  .variant-links a:hover, .variant-links a:focus { background: var(--yellow-soft); }
  .mt-all { margin-top: 24px; }
  @media (max-width: 640px) {
    /* Översikten (modell + tre reparationer) ska rymmas utan sidledsrullning;
       bara nivåtabellen på kombosidan (fler kolumner) får rulla i sin ram. */
    table.prices.model-prices th, table.prices.model-prices td { padding: 10px 6px; }
    table.prices.model-prices th:first-child { width: 32%; padding-left: 12px; }
    table.prices.model-prices td:last-child { padding-right: 12px; }
    table.prices.model-prices thead th { font-size: .58rem; letter-spacing: .2px; }
    table.prices.model-prices .r-name { font-size: .86rem; }
    table.prices.model-prices .r-price { font-size: .86rem; }
    table.prices.model-prices--tiers { min-width: 460px; }
  }


  /* ══ 14. MODELLVÄLJAREN PÅ MÄRKESSIDAN (.mp) ═════════════════════
     Ny komponent (2026-09-25), ersätter pristabellen på märkessidan och
     valdes av användaren bland tre prototyper: en rullbar rad med flikar
     per generation, den valda generationens modeller som kort med pris.
     Flikarna = samma piller som .btn (3px ink, 999px radie, hård skugga),
     vald flik = ink-fylld. Korten = .glob-card-språket. Utan JS (.mp utan
     .is-js) göms flikraden och alla generationer står med rubrik. */
  .mp-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px 12px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .mp-tab { flex: 0 0 auto; font-weight: 900; font-size: .95rem; white-space: nowrap;
    border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
    padding: 9px 18px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; }
  .mp-tab:hover { background: var(--yellow-soft); }
  .mp-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
  .mp-tab:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
  .mp:not(.is-js) .mp-tabs { display: none; }
  .mp.is-js .mp-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mp:not(.is-js) .mp-panel { margin-bottom: 28px; }
  .mp-panel-h { font-size: 1.2rem; font-weight: 900; margin-bottom: 12px; }
  .mp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .mp-card { position: relative; display: flex; flex-direction: column; gap: 4px; background: #fff;
    border: 3px solid var(--ink); border-radius: 18px; padding: 16px 46px 16px 18px;
    box-shadow: 4px 4px 0 var(--ink); color: var(--ink); text-decoration: none;
    transition: transform .12s, box-shadow .12s, background .12s; }
  a.mp-card:hover, a.mp-card:focus-visible { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--ink);
    background: var(--yellow-soft); outline: none; }
  .mp-card b { font-size: 1.1rem; font-weight: 900; margin-bottom: 4px; }
  .mp-card span { font-size: .9rem; font-weight: 700; color: var(--muted); }
  .mp-card em { font-style: normal; font-weight: 900; color: var(--red); }
  .mp-card i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-style: normal; font-weight: 900; font-size: 1.3rem; }
  .mp-card.is-ask { box-shadow: none; border-style: dashed; }
  /* Bred skärm: flikarna radbryts i stället för att gömmas i en sidledsrad. */
  @media (min-width: 900px) {
    .mp-tabs { flex-wrap: wrap; overflow: visible; }
  }
  @media (max-width: 640px) {
    .mp-cards { grid-template-columns: 1fr; }
  }


  /* ══ 15. HELA MODELLISTAN PÅ /modeller/ (.dlist) ══════════════════
     Andra halvan av väljaren (2026-09-25): samma lista som prototyp B,
     nu en riktig sida. Varje modell ligger i HTML under ett märke
     (iPhone och iPad öppna), generation för generation, så sidan
     fungerar utan JS och för Google. Filterfältet (initDeviceListFilter)
     smalnar bara av listan.

     Listraden är .mp-card-språket i liggande variant: namn till vänster,
     "från"-pris till höger.

     H1-stycket: designen sätter .sec-head h2 men inte h1, så en H1 i
     sektionstoppen hamnar på webbläsarens standard (/priser/, /fragor/ m.m.
     har fortfarande det). Här ges den samma värden som h2. */
  #modeller .sec-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; letter-spacing: -1px; }
  .dlist-filter { margin: 0 0 26px; max-width: 460px; }
  .dlist-filter label { display: block; font-weight: 900; font-size: .82rem; letter-spacing: .6px;
    margin-bottom: 6px; }
  .dlist-filter input { width: 100%; font-size: 1.05rem; font-weight: 700; }
  .dlist-none { margin: 10px 0 0; font-weight: 700; color: var(--muted); }

  .dlist-brand { border: 3px solid var(--ink); border-radius: 18px; background: #fff;
    padding: 4px 20px 18px; margin-bottom: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .dlist-brand > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px;
    padding: 14px 0 12px; list-style: none; }
  .dlist-brand > summary::-webkit-details-marker { display: none; }
  .dlist-brand > summary b { font-size: 1.25rem; font-weight: 900; }
  .dlist-brand > summary small { color: var(--muted); font-weight: 700; }
  .dlist-brand > summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; font-weight: 900; }
  .dlist-brand[open] > summary::after { content: '−'; }
  .dlist-series { margin: 6px 0 18px; }
  .dlist-series h2 { font-size: .82rem; font-weight: 900; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
  .dlist-series ul, .dlist-flat { list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 18px; }
  .dlist-series a, .dlist-ask, .dlist-flat a { display: flex; justify-content: space-between;
    align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--ink);
    text-decoration: none; }
  .dlist-series a:hover, .dlist-flat a:hover { background: var(--yellow-soft); }
  .dlist-series em, .dlist-flat em { font-style: normal; font-weight: 900; color: var(--red);
    font-size: .86rem; white-space: nowrap; }
  .dlist-series .is-ask .dlist-ask { color: var(--muted); }
  .dlist-series .is-ask em { color: var(--muted); font-weight: 700; }
  .dlist-flat small { color: var(--muted); font-weight: 700; }
  .dlist-more { margin: 4px 0 0; }
  .dlist-more a { font-weight: 900; color: var(--ink); }
  .dlist-brand-last { border-style: dashed; box-shadow: none; padding-bottom: 14px; }
  .dlist-h { font-size: 1.05rem; font-weight: 900; margin: 14px 0 10px; }
  @media (max-width: 640px) {
    .dlist-series ul, .dlist-flat { grid-template-columns: 1fr; }
  }


  /* ══ 16. SMALA SKÄRMAR: LÅNGA MÄRKEN FÅR RADBRYTAS ═══════════════
     Rättning (2026-09-25): .fill (platshållare) och .prov (preliminära
     priser) har white-space: nowrap i designen och tryckte ut sidan i
     sidled på 390 px (startsidans omdömen, /priser/). */
  @media (max-width: 640px) {
    .fill, .prov { white-space: normal; max-width: 100%; }
  }

  /* ══ 17. COOKIEBANNER (.cookie-bar) — parts/cookie-banner.php ════
     EU-/ePrivacy-samtycke (2026-09-26). Renderas bara innan besökaren
     svarat (pl_consent-cookien), så ingen [hidden]-logik behövs här. */
  .cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    max-width: 640px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
    background: var(--cream); border: 3px solid var(--ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--ink); padding: 18px 22px;
  }
  .cookie-bar[hidden] { display: none; }
  .cookie-bar p { margin: 0; font-size: .92rem; line-height: 1.5; flex: 1 1 260px; }
  .cookie-bar p strong { display: block; font-size: 1.05rem; font-weight: 900; margin-bottom: 2px; }
  .cookie-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
  .cookie-bar-actions .btn { padding: 10px 18px; font-size: .92rem; box-shadow: 3px 3px 0 var(--ink); }
  .cookie-bar-actions .btn:hover { box-shadow: 5px 5px 0 var(--ink); }
  .cookie-necessary { display: inline-flex; align-items: center; padding: 10px 18px; font-size: .92rem;
    font-weight: 800; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink);
    text-decoration: none; cursor: pointer; transition: background .12s; }
  .cookie-necessary:hover { background: var(--yellow-soft); }
  @media (max-width: 640px) {
    .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
    .cookie-bar-actions { width: 100%; margin-left: 0; }
    .cookie-bar-actions .btn, .cookie-necessary { flex: 1 1 auto; text-align: center; }
  }