/* ==========================================================================
   Pristabell — samma uppställning som kundens gamla sida:
   storlekarna är RADER, paketen kolumner, och allt syns på en gång.
   Ingen väljare: kunden sa att den gamla var lätt att förstå.
   ========================================================================== */

.priser-svep { overflow-x: auto; margin-top: clamp(24px, 3vw, 38px); }

table.priser {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
table.priser caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 1.4em;
  max-width: 62ch;
  color: var(--text-svag);
  font-size: 14px;
  line-height: 1.5;
}
table.priser th,
table.priser td {
  padding: clamp(13px, 1.4vw, 19px) clamp(10px, 1.1vw, 18px);
  text-align: right;
  border: 1px solid var(--linje);
  white-space: nowrap;
}
table.priser th:first-child,
table.priser td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 11ch;
}
/* paketnamnen i toppen */
table.priser thead th {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text);
  border-bottom-color: var(--linje-stark);
}
table.priser thead th:first-child {
  font-family: var(--bröd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-svag);
}
/* storleken i vänsterspalten */
table.priser tbody th {
  font-family: var(--bröd);
  font-weight: 600;
  font-size: clamp(.92rem, 1vw, 1rem);
  color: var(--text);
}
table.priser td {
  font-family: var(--data);
  font-weight: 500;
  font-size: clamp(.88rem, 1vw, 1rem);
  color: var(--krom);
}
/* Diamant är dyrast och längst till höger — låt den luta sig mot guldet */
table.priser td:last-child { color: var(--guld); }

@media (max-width: 620px) {
  table.priser th, table.priser td { padding: 11px 9px; font-size: .84rem; }
  table.priser thead th { font-size: .88rem; }
}

/* --- paketen: staplade rader, inte fyra lika kort ---
   Paketen är kumulativa: Guld är Silver plus vax, Platinum är Guld plus
   flygrost. Fyra lika breda rutor bredvid varandra döljer den trappan och
   är dessutom det AI-drag design.md uttryckligen varnar för. Som rader
   läser man trappan uppifrån och ned. */

.paketen { margin-top: clamp(32px, 4vw, 56px); }

.paket {
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: clamp(12px, 2.5vw, 44px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--linje);
}
.paketen > .paket:last-child { border-bottom: 1px solid var(--linje); }

.paket__topp { display: flex; flex-direction: column; gap: .45em; }
.paket__namn {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text);
}
.paket__fran {
  font-family: var(--data);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--guld);
}

.paket__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.6em;
}
.paket__lista li {
  color: var(--text-dämpad);
  font-size: clamp(.95rem, 1.05vw, 1.04rem);
  line-height: 1.5;
}
/* punkten mellan raderna, inte en ikon framför varje */
.paket__lista li + li::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: 1.05em;
  translate: 0 -.3em;
  background: var(--linje-stark);
  border-radius: 50%;
}

@media (max-width: 680px) {
  .paket { grid-template-columns: 1fr; gap: .9em; }
  .paket__topp { flex-direction: row; align-items: baseline; gap: .9em; }
}

/* --- tillägg --- */

.tillagg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spalt);
  margin-top: clamp(36px, 4.5vw, 60px);
}
@media (max-width: 760px) { .tillagg { grid-template-columns: 1fr; } }
.tillagg h3 { margin: 0 0 .4em; }

/* --- Professionell bilvård: fyra grupper med egna priser,
       samma uppdelning som på kundens gamla prissida ------------------- */

.prisgrupp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 64px) var(--spalt);
  margin-top: clamp(36px, 4.5vw, 60px);
}
@media (max-width: 860px) { .prisgrupp { grid-template-columns: 1fr; } }

.prisgrupp__rubrik {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.prisgrupp__utfors {
  margin: .7em 0 0;
  max-width: 48ch;
  color: var(--text-svag);
  font-size: 14px;
  line-height: 1.55;
}
.prisgrupp__del .pris { margin-top: 1.4em; }

/* Linjerna ska ligga i jämnhöjd över båda kolumnerna, även när den ena
   gruppen har sex prisrader och den andra en, och även när en beskrivning
   är en rad längre. Varje grupp blir därför ett subgrid som delar radspåren
   med gruppen bredvid: rubrik, beskrivning och varje prisrad får samma höjd
   på båda sidor. --spann = 2 (rubrik + beskrivning) + flest prisrader i paret,
   satt i html:en. Bara när kolumnerna står bredvid varandra; staplat på
   mobil behövs det inte, och de tomma radspåren gav stora luckor där. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 861px) {
  .prisgrupp__del {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--spann, 3);
    row-gap: 0;
  }
  .prisgrupp__del .prisgrupp__rubrik { grid-row: 1; }
  .prisgrupp__del .prisgrupp__utfors { grid-row: 2; }
  .prisgrupp__del .pris {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 3 / -1;
    row-gap: 0;
    align-content: start;
  }
}
}

/* Silver och Guld: vad den utvändiga tvätten innehåller, utskrivet */
.paket__tvatt {
  margin: 0 0 .55em;
  max-width: 62ch;
  color: var(--text-dämpad);
  font-size: clamp(.95rem, 1.05vw, 1.04rem);
  line-height: 1.5;
}
.paket__tvatt b { color: var(--text); font-weight: 600; }