/* ====================================================================
   BAGGRUNDSTEMAER
   Skift sæsontema ét sted: se AKTIVT_TEMA øverst i js/tema.js.
   Standardtemaet herunder (uden data-tema) er sidens nuværende
   udseende og må ikke ændres — nye temaer tilføjes som ekstra
   [data-tema="..."]-blokke, der genbruger de samme variabelnavne.
   ==================================================================== */

:root {
  /* Standardtema — nuværende udseende */
  --color-bg: #fffaf8;
  --color-text: #2b2320;
  --color-muted: #6b5f5a;
  --color-primary: #d9879b;
  --color-primary-dark: #b9647a;
  --color-surface: #ffffff;
  --color-border: #eee1dd;
  --font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
  --radius: 14px;
}

/* Efterårstema — varme orange/gyldne toner */
:root[data-tema="efteraar"] {
  --color-bg: #fdf6ec;
  --color-muted: #7a6152;
  --color-primary: #c96a2e;
  --color-primary-dark: #9c4f1e;
  --color-surface: #fffaf3;
  --color-border: #f0ddbf;
}

/* Halloween-tema — orange og dyb lilla */
:root[data-tema="halloween"] {
  --color-bg: #f7f1ea;
  --color-text: #241f2e;
  --color-muted: #5c5566;
  --color-primary: #e0701e;
  --color-primary-dark: #4a2f63;
  --color-surface: #ffffff;
  --color-border: #e7c9a3;
}

/* Juletema — rød og grøn */
:root[data-tema="jul"] {
  --color-bg: #fdf5f2;
  --color-primary: #b7383f;
  --color-primary-dark: #7c2226;
  --color-surface: #ffffff;
  --color-border: #e3ecdf;
}
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  padding-block-end: 0;
}

img,
.foto {
  max-inline-size: 100%;
}

a {
  color: inherit;
}

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

.side-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-inline: 20px;
  padding-block: 2px;
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.header-info-baelte {
  padding-inline: 12px;
  padding-block: 10px;
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

/* Mobil: alt stablet og centreret, så teksten kan være stor. Bredere skærme: to kolonner. */
.header-info-raekke {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  justify-items: center;
  column-gap: 24px;
  row-gap: 4px;
  font-size: 0.85rem;
  color: var(--color-text);
}

/* Adresse- og rejseinfo åbner rutevejledningen (fx Google Maps) til hovedindgangen.
   Kun adressen er markeret med kortnålen. */
.header-kortlink {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  /* Reserve for ældre browsere uden :has(): linjen under markøren (og begge adresselinjer) understreges. */
  .header-kortlink:hover [data-tekst],
  .header-kortlink[data-tekst]:hover,
  .header-adresse:hover [data-tekst] {
    text-decoration: underline;
  }

  /* Adresse og rejseinfo fører alle til hovedindgangen: peger man på én af linjerne, understreges alle.
     (Egen regel, så browsere uden :has() ikke dropper reserven ovenfor.) */
  .header-info-raekke:has(.header-kortlink:hover) [data-tekst] {
    text-decoration: underline;
  }
}

.side-footer .header-info-raekke {
  margin-block-end: 16px;
}

.header-adresse {
  display: contents;
  font-style: normal;
  text-align: center;
}

/* Adressens to linjer er links til hovedindgangen (koordinater) i kortet/rutevejledningen. */
.header-adresse > * {
  display: block;
  white-space: nowrap;
  line-height: 1.3;
}

.header-adresse > :nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.header-adresse > :nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

/* Gadelinjen med kortnålen foran */
.header-adresse > .header-adresse-gade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.header-faciliteter {
  display: contents;
}

.header-facilitet:nth-child(1) {
  grid-row: 3;
  grid-column: 1;
}

.header-facilitet:nth-child(2) {
  grid-row: 4;
  grid-column: 1;
}

.header-adresse > *,
.header-facilitet {
  align-self: center;
}

.header-facilitet {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: start;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .header-info-baelte {
    padding-inline: 20px;
  }

  /* To kolonner (adressen og rejseinfo) — hver linje centreret i sin kolonne (user: centreret, også på to linjer) */
  .header-info-raekke {
    grid-template-columns: auto auto;
    justify-items: center;
    row-gap: 5px;
    font-size: 0.8rem;
  }

  .header-facilitet:nth-child(1) {
    grid-row: 1;
    grid-column: 2;
  }

  .header-facilitet:nth-child(2) {
    grid-row: 2;
    grid-column: 2;
  }
}

@media (min-width: 600px) {
  .header-info-raekke {
    font-size: 0.9rem;
  }
}

.skilt {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.35em;
  block-size: 1.35em;
  border-radius: 3px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78em;
  line-height: 1;
}

.skilt-p {
  background: #0a5eb5;
}

.skilt-s {
  background: #d6202c;
}

/* Kortnål ved adressen */
.skilt-kort {
  background: #0b8043;
}

.skilt-kort svg {
  inline-size: 82%;
  block-size: 82%;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-billede {
  display: block;
  block-size: 52.5px;
  inline-size: auto;
}

@media (min-width: 600px) {
  .logo-billede {
    block-size: 64.5px;
  }
}

.hovednav-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  inline-size: 100%;
  max-inline-size: 100%;
}

.hovednav {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding-block: 2px;
  padding-inline: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-inline-size: 0;
}

.hovednav::-webkit-scrollbar {
  display: none;
}

.hovednav li {
  flex: none;
}

/* "Ledige tider" i menuen vises kun, når online booking er åben (js/header.js) */
.hovednav li[hidden] {
  display: none;
}

.hovednav a {
  display: block;
  padding: 3px 11px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Den aktive side i menuen (aria-current): let lyserød baggrund */
.hovednav a[aria-current] {
  background: #f9e3e9;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

/* Indkøbskurven sidst i menuen: åbner kvitteringen (js/prisliste.js aabnKvittering). Sort; er der valgt noget, står
   antallet af valgte procedurer i en grøn cirkel øverst til højre på kurven (js/header.js visKurvAntal). */
.hovednav a.hovednav-kurv {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px 0 8px;
  color: #111111;
}

.hovednav-kurv:hover {
  background: #f1f1f1;
}

/* Indkøbskurve-skiltet (med uret inde i kurven): i menuen */
.hovednav-kurv .kurv-ikon {
  display: block;
  inline-size: 26px;
  block-size: 26px;
}

.kurv-antal {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 1px;
  box-sizing: border-box;
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  border-radius: 999px;
  background: #2f9e44;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--color-surface);
  pointer-events: none;
}

.kurv-antal[hidden] {
  display: none;
}

/* Side-skift med swipe (mobil): siden følger fingeren og glider ud (js/header.js); den nye side glider ind fra
   den anden side (js/side-overgang.js). Mens siden står skævt, må den ikke kunne rulles til siden. */
html.side-swipe-aktiv,
html.side-ind-fra-hoejre,
html.side-ind-fra-venstre {
  overflow-x: clip;
}

@keyframes side-ind-fra-hoejre {
  from {
    transform: translateX(40%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes side-ind-fra-venstre {
  from {
    transform: translateX(-40%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

html.side-ind-fra-hoejre body > :not(script) {
  animation: side-ind-fra-hoejre 0.26s ease-out;
}

html.side-ind-fra-venstre body > :not(script) {
  animation: side-ind-fra-venstre 0.26s ease-out;
}

/* Kalenderen under "Ledige tider" glider ind fra højre, når den åbnes med et swipe */
@keyframes kalender-ind-fra-hoejre {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}

.bk-dialog.side-ind-fra-hoejre {
  animation: kalender-ind-fra-hoejre 0.26s ease-out;
}

.hovednav-pil {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}

.hovednav-pil[hidden] {
  display: none;
}

.hovednav-pil svg {
  inline-size: 14px;
  block-size: 14px;
}

.hovednav.hovednav--rul {
  justify-content: flex-start;
}

/* ☰ Menu yderst til højre (js/header.js opsaetMenu): listen med de øvrige sider (fx Priser) folder ud under knappen */
.hovednav-menu {
  position: relative;
  flex: none;
}

.hovednav-menu-knap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border: none;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.hovednav-menu-knap:hover,
.hovednav-menu-knap[aria-expanded="true"] {
  background: #f1f1f1;
}

/* Den aktive side er i listen (fx Priser): knappen er markeret som de andre aktive menupunkter */
.hovednav-menu-knap.hovednav-menu-knap--aktiv {
  background: #f9e3e9;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

.menu-ikon {
  display: block;
  flex: none;
  inline-size: 1.2em;
  block-size: 1.2em;
}

.hovednav-menu-liste {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 30;
  min-inline-size: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.hovednav-menu-liste[hidden] {
  display: none;
}

.hovednav-menu-liste a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.hovednav-menu-liste a:hover {
  background: #f1f1f1;
}

.hovednav-menu-liste a[aria-current] {
  background: #f9e3e9;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

/* Menuen står i midten af sidehovedet, selvom ☰ Menu står til højre: et tomt felt til venstre, lige så bredt som
   knappen. Det giver sig først, når der ikke er plads. */
.hovednav-wrap:has(> .hovednav-menu)::before {
  content: "";
  flex: 0 1000 87px;
}

/* Telefon: kun ☰ (ordet "Menu" læses stadig op af skærmlæsere) — og lidt mindre luft i menuen, uden det tomme felt til
   venstre, så Galleri, Bestil, Tider, kurven og ☰ er der uden at rulle, helt ned til 320 px (user 2026-10-29: "Bestil";
   skriften er den normale). Kurven beholder sin luft til højre: den grønne cirkel med antallet må ikke dække uret i den. */
@media (max-width: 479px) {
  .side-header {
    padding-inline: 10px;
  }

  .hovednav-wrap:has(> .hovednav-menu)::before {
    flex-basis: 0;
  }

  .hovednav {
    gap: 2px;
  }

  .hovednav a:not(.hovednav-kurv) {
    padding-inline: 7px;
  }

  .hovednav-menu-knap {
    padding-inline: 5px;
  }

  .hovednav-menu-tekst {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: 24px;
  border-radius: 999px;
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.knap:hover {
  background: var(--color-primary-dark);
}

/* ---------- Gallerisektion (forside) ---------- */

.galleri-sektion {
  padding-inline: 16px;
  padding-block-start: 4px;
  padding-block-end: 40px;
}

/* "Se hele galleri" og "Vælg behandling" (til Book, med kurven med uret) ved siden af hinanden over det rullende
   galleri — så brede som deres tekst, i midten */
.galleri-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-block-end: 12px;
}

.galleri-cta .knap {
  gap: 8px;
  min-block-size: 46px;
  min-inline-size: 200px;
  padding-inline: 28px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* "Vælg behandling": grøn som "Læg tid i kurv" (user) */
.galleri-cta .knap-vaelg-behandling {
  background: #2f9e44;
}

.galleri-cta .knap-vaelg-behandling:hover {
  background: #24803a;
}

.knap-ikon {
  flex: none;
  inline-size: 1.35em;
  block-size: 1.35em;
}

/* Telefon: de to knapper på én linje — tekst, luft og ikon følger skærmens bredde (fra ca. 320px) */
@media (max-width: 600px) {
  .galleri-cta {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .galleri-cta .knap {
    flex: 0 1 auto;
    gap: 5px;
    min-inline-size: 0;
    min-block-size: 42px;
    padding-inline: clamp(10px, 3.6vw, 20px);
    font-size: clamp(0.78rem, 4vw, 1rem);
    letter-spacing: 0;
  }
}

/* Knapperne på billedet har samme forhold som de to over galleriet (user): "Bestil dette neglesæt" er --knap-forhold
   gange så bred som "Brug billede". På forsiden måles forholdet på knapperne over galleriet (js/main.js
   knapForholdFraCta); ellers (galleriets store visning, ønskerne på Se & Book) som på en telefon. Bredderne regnes ud af
   rækkens bredde minus mellemrummet, så forholdet er præcist — uanset knappernes luft. */
:root {
  --knap-forhold: 2.3;
}

.design-aktioner .design-aktion-gem {
  flex: 0 0 calc((100% - var(--mellemrum)) / (1 + var(--knap-forhold)));
}

.design-aktioner .design-aktion-se {
  flex: 0 0 calc((100% - var(--mellemrum)) * var(--knap-forhold) / (1 + var(--knap-forhold)));
}

/* Ét rullende galleri, centreret (fuld bredde på telefonen, højst 440px) */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-inline-size: 440px;
  margin-inline: auto;
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: white;
  touch-action: pan-y pinch-zoom; /* vandret swipe skifter billede (js/main.js); op og ned ruller siden */
}

.tile .foto-link {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-primary);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.tile .foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.tile .foto svg,
.tile .foto img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.tile .foto.synlig {
  opacity: 1;
}

.tile-aktioner {
  margin-block-end: 0;
}

.tile-knap-raekke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 0;
}

.tile .se-alle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 36px;
  padding-inline: 14px;
  border-radius: var(--radius);
  background: rgba(20, 14, 13, 0.55);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  text-decoration: none;
}

.tile .se-alle:hover {
  background: rgba(20, 14, 13, 0.75);
}

/* Billedet med de diskrete knapper inde i rammen (user), helt ude ved kanten: nederst tilbage-pilen til venstre,
   pause/afspil i midten og frem-pilen til højre. Uden baggrund (user: cirklen helt gennemsigtig) — kun de hvide skilte
   med en skygge, så de ses på både lyse og mørke billeder. */
.tile-ramme {
  --pil: 34px; /* knappernes størrelse (mindre på en liggende telefon) */
  --pil-kant: 4px; /* afstanden til billedets kant */
  position: relative;
}

.tile-pil {
  position: absolute;
  inset-block-end: var(--pil-kant);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--pil);
  block-size: var(--pil);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Trykfeltet er større end skiltet (ud til billedets kant og lidt omkring), så et tryk lige ved siden af ikke åbner
   billedet i fuld skærm. */
.tile-pil::before {
  content: "";
  position: absolute;
  inset: -8px;
  inset-block-end: calc(-1 * var(--pil-kant));
}

.tile-knap-forrige::before {
  inset-inline-start: calc(-1 * var(--pil-kant));
}

.tile-knap-naeste::before {
  inset-inline-end: calc(-1 * var(--pil-kant));
}

/* (Pause er mindre: trykfeltet går lige så langt ned som pilenes.) */
.tile-knap-pause::before {
  inset-block-end: calc(-1 * (var(--pil-kant) + (var(--pil) - var(--pause)) / 2));
}

/* Med tastaturet: en hvid ring med en mørk kant udenom, så den ses på både lyse og mørke billeder */
.tile-pil:focus-visible {
  outline: 2px solid white;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(20, 14, 13, 0.8);
}

.tile-pil svg {
  inline-size: calc(var(--pil) * 0.6);
  block-size: calc(var(--pil) * 0.6);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: transform 120ms ease;
}

/* (Kun med en mus: på en telefon bliver :hover hængende efter et tryk) */
@media (hover: hover) {
  .tile-pil:hover svg {
    transform: scale(1.12);
  }
}

.tile-pil:active svg {
  transform: scale(0.92);
}

.tile-knap-forrige {
  inset-inline-start: var(--pil-kant);
}

.tile-knap-naeste {
  inset-inline-end: var(--pil-kant);
}

/* Pause/afspil: nederst i midten (user), på linje med pilene — en anelse mindre */
.tile-knap-pause {
  --pause: max(24px, calc(var(--pil) * 0.85)); /* (mindst 24px, så den er nem at ramme) */
  inset-block-end: calc(var(--pil-kant) + (var(--pil) - var(--pause)) / 2);
  inset-inline-start: calc(50% - var(--pause) / 2);
  inline-size: var(--pause);
  block-size: var(--pause);
}

.tile-pil[hidden] {
  display: none;
}

/* reduced motion: single static image + arrow, no auto-rotation */
.reduceret .tile .foto {
  transition: none;
}

/* ---------- Design-aktioner (delt: tile, lysboks) ---------- */

.design-aktioner {
  --mellemrum: 2px; /* (knappernes bredder: se .galleri-cta) */
  position: relative; /* menuen under "Brug billede" (.gem-menu) */
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mellemrum);
  background: transparent;
}

.design-aktioner .knap-lille {
  flex-direction: column;
  align-items: stretch;
  min-block-size: 46px;
  padding-inline: 12px;
  border-radius: 0;
  white-space: normal;
  line-height: 1.2;
}

.design-aktioner .knap-lille:first-child {
  border-start-start-radius: var(--radius);
}

.design-aktioner .knap-lille:last-child {
  border-start-end-radius: var(--radius);
}

/* "Bestil dette neglesæt" er --knap-forhold gange så bred som "Brug billede" — som knapperne over galleriet (user;
   bredderne står ved .galleri-cta) */
.design-aktioner .design-aktion-gem {
  border-start-end-radius: var(--radius); /* også mens menuen står efter den (så er den ikke :last-child) */
}

/* "Gem billede til senere": menuen under knappen med "Download" og "Tilføj til ønsker" / "Fjern fra ønsker"
   (js/lysboks.js aabnGemMenu) — den lægger sig hen over billedet */
.gem-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 5;
  display: grid;
  gap: 4px;
  min-inline-size: 210px;
  max-inline-size: calc(100vw - 32px);
  padding: 8px;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(20, 14, 13, 0.3);
}

.gem-menu-knap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.gem-menu-knap:hover,
.gem-menu-knap:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.gem-menu-knap svg {
  flex: none;
  color: var(--color-primary-dark);
}

.gem-menu-besked {
  margin: 2px 4px 0;
  color: #2b7a3b;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Krydset i menuens øverste hjørne lukker menuen (der er plads til det over den første knap) */
.gem-menu {
  padding-block-start: 40px;
}

.gem-menu-luk {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.gem-menu-luk:hover,
.gem-menu-luk:focus-visible {
  background: var(--color-border);
}

.gem-menu-luk svg {
  inline-size: 14px;
  block-size: 14px;
}

/* "Tilføj til ønsker": kopien af knappen, der flyver op i "Se & Book" i sidehovedet, og ringen, hvor den lander
   (js/lysboks.js flyvTilSeBook) — over lysboksen */
.gem-flyver {
  position: fixed;
  z-index: 1000;
  margin: 0;
  box-shadow: 0 6px 18px rgba(20, 14, 13, 0.35);
  pointer-events: none;
}

.gem-flyver-ring {
  position: fixed;
  z-index: 1000;
  inline-size: 46px;
  block-size: 46px;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.knap-linje {
  display: block;
  text-align: center;
}

.knap-linje:first-child {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.lysboks-billede-gruppe {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

/* ---------- Overlays: fuldskærms-lysboks + "se og bestil"-infoboks ---------- */

body.overlay-aaben {
  overflow: hidden;
}

.lysboks-overlay,
.info-boks-overlay,
.galleri-vaelger-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 13, 0.78);
  padding: 16px;
}

.lysboks-indhold {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-inline-size: 480px;
  inline-size: 100%;
  max-block-size: 100%;
  overflow-y: auto;
}

.lysboks-tilbage {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 14px;
  min-block-size: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

.lysboks-tilbage svg {
  inline-size: 18px;
  block-size: 18px;
}

.lysboks-billede-ramme {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-primary);
  flex: none;
}

.lysboks-billede-ramme img,
.lysboks-fallback {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Zoom i lysboksen (js/lysboks.js goerZoombar): fingre og mus på billedet styres af siden selv (knib, træk,
   dobbelttryk) — ikke af browseren */
.lysboks-billede-ramme--zoombar {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lysboks-billede-ramme--zoombar:focus-visible {
  outline: 3px solid var(--color-surface);
  outline-offset: 2px;
}

/* Rammen har billedets form (--billede-forhold = bredde / højde, sat af js/lysboks.js), og billedet er højst så stort,
   at "Tilbage", knapperne over billedet og lup-knapperne under det kan være på skærmen — også på en telefon på tværs */
.lysboks-billede-gruppe.lysboks-zoom-holder {
  align-self: center;
  inline-size: min(100%, calc((100vh - 210px) * var(--billede-forhold, 1)));
  inline-size: min(100%, calc((100dvh - 210px) * var(--billede-forhold, 1)));
}

.lysboks-billede-ramme.lysboks-zoom-holder {
  inline-size: min(100%, calc((100vh - 180px) * var(--billede-forhold, 1)));
  inline-size: min(100%, calc((100dvh - 180px) * var(--billede-forhold, 1)));
}

.lysboks-billede-ramme--zoom {
  cursor: grab;
}

.lysboks-billede-ramme--zoom:active {
  cursor: grabbing;
}

/* De store lup-knapper (formindsk / forstør) lige under billedrammen — store nok til en finger */
.lysboks-zoom {
  display: flex;
  flex: none;
  justify-content: center;
  gap: 18px;
  align-self: center;
  margin-block-start: 12px;
}

.lysboks-zoom-knap {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  color: var(--color-primary-dark);
  cursor: pointer;
}

.lysboks-zoom-knap svg {
  inline-size: 32px;
  block-size: 32px;
}

/* Frem/tilbage (flere billeder, fx dine ønsker på Se & Book): på hver side af lup-knapperne, i sidens farve */
.lysboks-nav-knap {
  background: var(--color-primary);
  color: #fff;
}

/* Meget smalle skærme: fire knapper skal kunne være i rækken uden at blive skåret af */
@media (max-width: 330px) {
  .lysboks-zoom {
    gap: 8px;
  }

  .lysboks-zoom-knap {
    inline-size: 50px;
    block-size: 50px;
  }
}

/* Ved grænsen (normal størrelse / største zoom): grå, men knappen beholder fokus */
.lysboks-zoom-knap[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.lysboks-zoom-knap:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.info-boks {
  position: relative;
  max-inline-size: 360px;
  inline-size: 100%;
  max-block-size: 100%; /* små skærme: boksen ruller i stedet for at blive skåret af */
  overflow-y: auto;
  padding: 30px 22px 24px;
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}

.info-boks-luk {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.info-boks h2 {
  margin: 0 0 16px;
  color: var(--color-primary-dark);
}

/* ---------- Galleri-vælger (byg: vælg referencebillede fra galleriet) ---------- */

.galleri-vaelger {
  position: relative;
  max-inline-size: 640px;
  max-block-size: 100%;
  inline-size: 100%;
  padding: 30px 22px 24px;
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
  overflow-y: auto;
}

.galleri-vaelger h2 {
  margin: 0 0 16px;
  color: var(--color-primary-dark);
}

.galleri-vaelger-luk {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.galleri-vaelger .filter-knap {
  margin-inline: auto;
  margin-block-end: 16px;
}

.galleri-vaelger-filtre {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-end: 20px;
}

.galleri-vaelger-filtre[hidden] {
  display: none;
}

/* "Færdig" står fast nederst i galleri-vælgeren, mens billederne rulles bag den.
   Bjælken går ud over vælgerens side- og bundpolstring (22px / 24px), så den dækker hele bredden. */
.galleri-vaelger-bund {
  position: sticky;
  inset-block-end: -24px;
  z-index: 1;
  margin: 20px -22px -24px;
  padding: 12px 22px 16px;
  background: var(--color-surface);
  box-shadow: 0 -8px 12px -10px rgba(20, 14, 13, 0.35);
}

.galleri-vaelger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 500px) {
  .galleri-vaelger-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.galleri-vaelger-kort {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
}

.galleri-vaelger-kort img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Valgte billeder markeres grønt, som valg andre steder på siden. */
.galleri-vaelger-kort.valgt {
  outline: 3px solid #2f9e44;
  outline-offset: -3px;
}

.galleri-vaelger-hak {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  inline-size: 30px;
  block-size: 30px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(20, 14, 13, 0.55);
  box-shadow: 0 1px 4px rgba(20, 14, 13, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.galleri-vaelger-hak svg {
  inline-size: 18px;
  block-size: 18px;
}

.galleri-vaelger-kort.valgt .galleri-vaelger-hak {
  opacity: 1;
  background: #2f9e44;
}

/* ---------- Galleriside ---------- */

.galleri-side {
  padding-inline: 16px;
  padding-block: 32px;
  max-inline-size: 1100px;
  margin-inline: auto;
  text-align: center;
}

.filter-knap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 20px;
}

/* Galleriets filter (js/galleri.js): kunden vælger det, hun vil se — intet valgt = alle billeder.
   Øverst Alle / Hænder / Fødder og designene; længde, form og tilvalg under "Flere filtre".
   Valgt = grøn ramme og flueben (som knapperne på prislisten); grå = ville give 0 billeder. */
/* minmax(0, 1fr): rækkerne må ikke gøre siden bredere end skærmen — de ruller i stedet til siden */
.gf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-block-end: 20px;
}

.gf-kropsdel {
  display: inline-flex;
  justify-self: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}

.gf-segment {
  min-block-size: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.gf-segment[aria-pressed="true"] {
  background: var(--color-primary);
  color: #ffffff;
}

.gf-segment:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Antallet af billeder ved et valg, fx "French (6)" */
.gf-tal {
  font-weight: 400;
  opacity: 0.8;
}

.gf-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}

.gf-flere-knap {
  padding: 6px 14px;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.gf-flere-knap[hidden] {
  display: none;
}

.gf-flere-knap::before {
  content: "+ ";
  font-weight: 700;
}

.gf-flere-knap[aria-expanded="true"]::before {
  content: "\2212  ";
}

/* Hele filteret er foldet sammen, når siden åbnes: "Filtre" folder det ud (js/galleri.js) */
.gf-fold-knap {
  padding: 8px 18px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.95rem;
}

.gf-indhold {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.gf-indhold[hidden] {
  display: none;
}

.gf-indhold > .gf-flere-knap {
  justify-self: center;
}

.gf-antal {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.gf-flere {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 12px 16px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.gf-flere[hidden],
.gf-gruppe[hidden],
.gf-note[hidden] {
  display: none;
}

.gf-gruppe-titel {
  margin: 0 0 6px;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gf-note {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.gf-vis {
  justify-self: center;
}

/* De valgte som mærker med × over billederne */
.gf-valgte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gf-valgte[hidden] {
  display: none;
}

.gf-valgt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1.5px solid #2f9e44;
  border-radius: 999px;
  background: #f1faf3;
  color: #2b7a3b;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.gf-nulstil {
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.gf-ingen {
  margin: 24px 0;
  color: var(--color-muted);
}

.gf-ingen[hidden] {
  display: none;
}

.byg-side {
  padding-inline: 16px;
  padding-block: 32px;
  max-inline-size: 640px;
  margin-inline: auto;
  text-align: center;
}

.byg-info-link {
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  font-size: 0.8rem;
  cursor: pointer;
}

.byg-info-link::before {
  content: "+";
  display: inline-block;
  inline-size: 1em;
  font-weight: 700;
}

.byg-info-link[aria-expanded="true"]::before {
  content: "\2212";
}

/* Overskrift, der folder en valgrække ud og sammen, fx "Form (valgfrit)" */
.byg-fold-knap {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.byg-fold-knap::before {
  content: "+";
  display: inline-block;
  inline-size: 1em;
  font-weight: 700;
}

.byg-fold-knap[aria-expanded="true"]::before {
  content: "\2212";
}

.chip-raekke[hidden] {
  display: none;
}

.byg-info {
  margin: 0 0 24px;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.byg-reference {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-block-end: 28px;
}

.byg-reference-billede {
  inline-size: 100%;
  max-inline-size: 288px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.byg-reference-billede[hidden] {
  display: none;
}

.byg-reference-miniature,
.byg-reference-tom-ramme {
  position: relative;
  flex: 0 0 calc(50% - 4px);
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
}

.byg-reference-miniature {
  background: var(--color-primary);
}

.byg-reference-tom-ramme {
  border: 2px dashed var(--color-border);
  background: #f7f0ee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.byg-reference-miniature,
.byg-reference-tom-ramme {
  cursor: pointer;
}

/* Forstørret tom billedramme i lysboksen, med knapperne i midten */
.lysboks-billede-ramme.lysboks-tom-ramme {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  border: 3px dashed var(--color-border);
  border-radius: 6px;
  background: #f7f0ee;
}

.lysboks-tom-ramme .knap {
  inline-size: min(100%, 260px);
}

.byg-reference-placeholder {
  padding-inline: 8px;
  color: var(--color-muted);
  font-size: 0.7rem;
  text-align: center;
}

.byg-reference-miniature img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.byg-reference-fjern {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 14, 13, 0.65);
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.byg-reference-knapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.byg-reference-knapper[hidden] {
  display: none;
}

.billedevalg-knap {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  text-align: start;
  /* Ikonets højde: fra toppen af bogstaverne i 1. linje (versalhøjden, 1cap)
     til grundlinjen i 2. linje (én linjehøjde, 1,3em, længere nede).
     1cap følger den skrifttype, telefonen faktisk bruger; 2,07em er reserve. */
  --billedevalg-ikon: 2.07em;
}

@supports (block-size: 1cap) {
  .billedevalg-knap {
    --billedevalg-ikon: calc(1.3em + 1cap);
  }
}

.knap-lille.billedevalg-knap {
  /* Skalerer ned på smalle skærme, så hver linje holder sig på én linje */
  font-size: min(0.82rem, calc((100vw - 32px) / 28.2));
  padding: 0.75em 1.25em;
}

.billedevalg-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  /* Plads til ikonet + mellemrum */
  padding-inline-start: calc(var(--billedevalg-ikon) + 0.6em);
}

.billedevalg-linje1,
.billedevalg-linje2 {
  white-space: nowrap;
}

.billedevalg-linje2 {
  font-weight: 600;
}

/* Upload-ikon (pil op af en bakke). Ikonet står i 1. linje: dets nederste
   margenkant sidder på grundlinjen, og den negative bundmargen (én linjehøjde)
   trækker den synlige bund ned på 2. linjes grundlinje. */
.billedevalg-ikon {
  display: inline-block;
  vertical-align: baseline;
  inline-size: var(--billedevalg-ikon);
  block-size: var(--billedevalg-ikon);
  margin-inline: calc(-1 * var(--billedevalg-ikon) - 0.6em) 0.6em;
  margin-block-end: -1.3em;
}

.billedevalg-ikon svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.billedevalg-knap[hidden] {
  display: none;
}

.knap-lille.knap-luk-billedevalg {
  padding-inline: 0;
  inline-size: 36px;
  border-radius: 50%;
}

.byg-kropsdel-sektion {
  margin-block-start: 20px;
  padding: 20px;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius);
}

.byg-kropsdel-sektion--udfyldt {
  border-color: #2f9e44;
}

.byg-kropsdel-sektion:first-child {
  margin-block-start: 24px;
}

.byg-kropsdel-sektion h2 {
  margin: 0 0 16px;
  color: var(--color-primary-dark);
}

.byg-delresultat {
  margin-block-start: 8px;
}

.kvittering {
  margin-block-start: 12px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px dashed var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(20, 14, 13, 0.08);
  text-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

/* Det valgte galleribillede øverst på kvitteringen ("Bestil dette neglesæt") */
.kvittering-billede {
  align-self: center;
  inline-size: 140px;
  aspect-ratio: 1 / 1;
  margin-block-end: 12px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(20, 14, 13, 0.15);
}

.kvittering-gruppe {
  margin-block-end: 10px;
}

.kvittering-gruppe h4 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
}

/* Kurven: krydset foran overskriften (fx "Pedicure") står i samme spalte som linjernes kryds */
.kvittering-gruppe h4:has(.pl-fjern) {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kvittering-gruppe h4 .kvittering-fjern.pl-fjern {
  margin: 0;
  vertical-align: 0;
}

.kvittering-linje {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px;
  border-block-end: 1px dotted var(--color-border);
  font-size: 0.88rem;
}

/* Prisen står altid samlet til højre, også når punktets tekst fylder to linjer. */
.kvittering-linje > span:last-child {
  flex: none;
  white-space: nowrap;
}

/* Forklaringen foran punktet, fx "Længde:" i "Længde: Lang" */
.kvittering-etiket {
  color: var(--color-muted);
}

/* Procedurens navn på kvitteringen, fx "Nyt sæt negle" — med fed */
.kvittering-procedure {
  font-weight: 700;
}

.kvittering-gevinst {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2f9e44;
}

.kvittering-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 8px;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}

/* "I alt" og summen: sort og understreget */
.kvittering-total > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kvittering-tid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block: 12px;
  color: var(--color-muted);
  font-weight: 600;
}

.kvittering-tid svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
}

.kvittering .knap-lille,
.kvittering .knap {
  align-self: center;
}

/* "Bestil dette neglesæt": lyserøde "Tilføj matchende pedicure" og "Tilføj flere procedurer",
   og nederst den grønne "Se ledige tider og bestil" — under hinanden */
.kvittering-knapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kvittering-knapper .knap {
  align-self: stretch;
  padding-inline: 16px;
  font-family: inherit;
  text-align: center;
}

/* De lyserøde tilvalgsknapper er mindre end den grønne "Se ledige tider og bestil". */
.kvittering-knapper .knap-tilvalg {
  align-self: center;
  inline-size: 82%;
  min-block-size: 34px;
  font-size: 0.82rem;
}

/* Manicure + matchende pedicure på samme kvittering: hver del har en overskrift med "Fjern" */
.kvittering-gruppe-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-end: 4px;
}

.kvittering-gruppe-top h4 {
  margin: 0;
}

/* Rundt kryds-knap (kun ikon) */
.kvittering-fjern {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  cursor: pointer;
}

.kvittering-fjern:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

/* Det lille kryds foran hver valgt mulighed i kurven (js/prisliste.js kurvLinjeHtml/kurvKryds): fjerner netop det
   valg (fx længden, sten eller hele proceduren) */
.kvittering-fjern.pl-fjern {
  inline-size: 20px;
  block-size: 20px;
  margin-inline-end: 6px;
  vertical-align: -4px;
}

.kvittering-fjern.pl-fjern svg {
  inline-size: 10px;
  block-size: 10px;
}

.kvittering-fjern.pl-fjern:hover {
  border-color: #e03131;
  color: #e03131;
}

/* Kurvens linjer (js/prisliste.js kurvLinjeHtml): kryds foran hver valgt mulighed, og et tryk på linjen fører hen
   til valget i prislisten. Linjer uden kryds (Naturel ved "Brug flere designs") får samme indrykning. */
.pl-kurv-linje {
  cursor: pointer;
}

.pl-kurv-linje > span:first-child {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-inline-size: 0;
}

.pl-kurv-linje .kvittering-fjern.pl-fjern {
  margin: 0;
  vertical-align: 0;
}

.pl-fjern-plads {
  flex: none;
  inline-size: 20px;
}

/* Linjens tekst (og afsnittets overskrift) er en knap, der ser ud som tekst */
.pl-gaa {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.pl-kurv-linje:hover .pl-gaa,
.kvittering-gruppe h4 .pl-gaa:hover {
  text-decoration: underline;
}

/* "+ Tilføj pedicure" osv. i kurven (js/prisliste.js tilfoejHtml): stiplede knapper øverst, til de afsnit, der
   ikke er valgt noget i — et tryk fører hen til afsnittets menu */
.pl-tilfoej-raekke {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block: 0 12px;
}

/* Grøn tekst og stiplet grøn ramme (teksten lidt mørkere grøn, så den er let at læse) */
.pl-tilfoej {
  min-block-size: 36px;
  padding: 4px 14px;
  border: 1.5px dashed #2f9e44;
  border-radius: 999px;
  background: var(--color-surface);
  color: #2b7a3b;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.pl-tilfoej:hover {
  border-style: solid;
  background: #eaf7ee;
}

.knap-lille {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-block-size: 36px;
  padding-inline: 16px;
  border-radius: 999px;
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  white-space: nowrap;
}

.knap-lille:hover {
  background: var(--color-primary-dark);
}

.knap-book-denne {
  background: #2f9e44;
}

.knap-book-denne:hover {
  background: #24803a;
}

.byg-total {
  margin-block-start: 20px;
}

.byg-fremdrift-pil {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: 24px; /* Book nemt har ingen fast "Book tid"-knap forneden */
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(20, 14, 13, 0.25);
  cursor: pointer;
  animation: byg-fremdrift-hop-ned 1.6s ease-in-out infinite;
}

.byg-fremdrift-pil--kvittering,
.byg-fremdrift-pil--glemt {
  inline-size: auto;
  gap: 6px;
  padding-inline: 18px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.byg-fremdrift-pil--kvittering {
  background: #2f9e44;
}

/* En menu længere nede (eller en, kunden er rullet forbi) mangler et valg, der påvirker pris eller tid:
   gul med menuens overskrift. Lange overskrifter må bryde over to linjer i stedet for at gå ud over skærmen. */
.byg-fremdrift-pil--glemt {
  /* max-content: knappen står fra skærmens midte (left: 50%) og ville ellers kun få den halve bredde. */
  inline-size: max-content;
  block-size: auto;
  min-block-size: 44px;
  max-inline-size: calc(100vw - 32px);
  padding-block: 6px;
  background: #fcc419;
  color: var(--color-text);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

/* "Match med manicure" øverst i pedicure (Book nemt og prislisten) */
.byg-match {
  margin: 0 0 16px;
  text-align: center;
}

.byg-match[hidden] {
  display: none;
}

.byg-match .knap-lille:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.byg-match-hint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.byg-match-hint[hidden] {
  display: none;
}

/* Den menu, kunden er sendt hen til med den gule knap */
.byg-glemt-markering {
  border-radius: 14px;
  outline: 3px solid #fcc419;
  outline-offset: 8px;
}

.byg-fremdrift-pil[hidden] {
  display: none;
}

.byg-fremdrift-pil-tekst {
  display: none;
}

.byg-fremdrift-pil--kvittering .byg-fremdrift-pil-tekst,
.byg-fremdrift-pil--glemt .byg-fremdrift-pil-tekst {
  display: inline;
}

.byg-fremdrift-pil svg {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  transition: transform 0.2s ease;
}

.byg-fremdrift-pil--op {
  animation-name: byg-fremdrift-hop-op;
}

.byg-fremdrift-pil--op svg {
  transform: rotate(180deg);
}

@keyframes byg-fremdrift-hop-ned {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@keyframes byg-fremdrift-hop-op {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.filter-gruppe {
  margin-block-end: 20px;
}

.filter-gruppe h3 {
  font-size: 0.85rem;
  text-transform: none;
  color: var(--color-muted);
  margin-block-end: 8px;
}

.byg-side .filter-gruppe h3 {
  color: var(--color-primary-dark);
}

.byg-overskrift-udfyldt {
  color: #2f9e44 !important;
}

.byg-overskrift-valgfrit {
  color: #d97706 !important;
}

.byg-overskrift-udfyldt::after {
  content: "";
  display: inline-block;
  inline-size: 14px;
  block-size: 14px;
  margin-inline-start: 6px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5L6.5 12L13 4' fill='none' stroke='%232f9e44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.chip-raekke {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.kropsdel-plus {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  align-self: center;
}

#valg-kropsdel {
  align-items: stretch;
}

.kropsdel-linjeskift {
  display: none;
}

/* På telefoner er der ikke plads til alle valg på én linje: lamineringerne
   rykkes ned på en ny linje i stedet for at rækken skal scrolles sidelæns. */
@media (max-width: 599.98px) {
  #valg-kropsdel {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 10px;
  }

  .kropsdel-linjeskift {
    display: block;
    flex-basis: 100%;
    block-size: 0;
  }
}

#valg-kropsdel .chip-mini-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.chip-raekke--lige-hoejde {
  align-items: stretch;
}

.chip-raekke--lige-hoejde .chip-mini-label {
  flex: 1 1 auto;
}

.byg-gevinst {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2f9e44;
}

.byg-gevinst--nul {
  color: #555555;
}

/* Laminering: kopi af den valgte knap fra toppen med en kort tekst ved siden af */
.byg-tilkoeb-valgt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
}

.byg-tilkoeb-kopi {
  flex: none;
  cursor: default;
}

.byg-tilkoeb-tekst {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: start;
}

.byg-note-checkbox-raekke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: center;
}

.byg-note-checkbox-raekke[hidden] {
  display: none;
}

.byg-note-checkbox-raekke input {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  accent-color: #2f9e44;
  cursor: pointer;
}

.byg-note-valgfrit {
  flex: none;
}

.byg-note-boks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

.byg-note-boks[hidden] {
  display: none;
}

.byg-note-boks textarea {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  resize: vertical;
}

.byg-note-boks .knap-lille {
  align-self: center;
}

/* "(valgfrit) Ønsker og kommentarer til din behandling" — Book nemt og prislisten */
.behandling-kommentar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 20px;
  text-align: start;
}

.behandling-kommentar label {
  font-size: 0.85rem;
  font-weight: 600;
}

.behandling-kommentar textarea {
  min-block-size: 70px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  resize: vertical;
}

.behandling-kommentar textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.byg-note-gemt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #f7f0ee;
}

.byg-note-gemt[hidden] {
  display: none;
}

.byg-note-gemt p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.byg-note-gemt .knap-lille {
  align-self: center;
}

.chip {
  min-block-size: 36px;
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.chip-mini {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  min-block-size: auto;
  inline-size: 72px;
  padding: 0;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.chip-afkryds {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  background: rgba(20, 14, 13, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.chip-afkryds svg {
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
}

/* .chip-mini--valgt: vises som valgt uden at være en knap (fx kopien i lamineringssektionen) */
.chip-mini[aria-pressed="true"] .chip-afkryds,
.chip-mini--valgt .chip-afkryds {
  background: #2f9e44;
  border-color: #2f9e44;
}

.chip-mini[aria-pressed="true"] .chip-afkryds svg,
.chip-mini--valgt .chip-afkryds svg {
  opacity: 1;
}

.chip-mini .chip-mini-visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-block-size: 0;
  overflow: hidden;
  background: #f7f0ee;
  padding-block-end: 6px;
}

.chip-mini .chip-mini-visual svg,
.chip-mini .chip-mini-visual img {
  inline-size: 68%;
  block-size: 92%;
  object-fit: contain;
}

/* Negleskiltenes fotos (js/mini-negl.js neglFoto) er stående: feltet bliver højere end de tegnede skilte, og
   fotoet står i fuld højde midt i feltet, hvis baggrund har fotoets blågrå farve */
.chip-mini .chip-mini-visual:has(.negl-foto) {
  aspect-ratio: 2 / 3;
  padding: 0;
  background: #5d8197;
}

.chip-mini .chip-mini-visual .negl-foto {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.chip-mini .chip-mini-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 36.5px;
  padding-block: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
}

.chip-mini[aria-pressed="true"],
.chip-mini--valgt {
  border-color: #2f9e44;
  background: var(--color-surface);
}

.chip-mini[aria-pressed="true"] .chip-mini-label,
.chip-mini--valgt .chip-mini-label {
  color: #2f9e44;
}

/* Tilvalg, der først kan vælges, når noget andet er valgt (fx "Lak efterbehandling") */
.chip-mini:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.45;
}

/* Knapper med antal (Sten, Mix-designs, reparationens "Reparation af negl" / "Udskiftning af negl" / "Ukendt reparation"): samme størrelse som de
   andre knapper. Det valgte antal står i et lille mærke nederst i knappen, under tegningen. Et tryk
   et sted på knappen åbner antal-tabellen. */
.antal-kort {
  flex-direction: column;
  cursor: pointer;
}

.antal-kort .chip-mini-visual svg {
  block-size: 60%; /* tegningen holder sig i den øverste del, så tallet har plads */
}

.antal-tal {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  min-inline-size: 24px;
  block-size: 20px;
  margin-inline: auto;
  padding-inline: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none; /* tryk går igennem til kortet */
}

/* Antal-tabellen, der springer frem ved et kort med antal */
.antal-tabel {
  position: fixed;
  z-index: 19; /* under det faste sidehoved */
  padding: 8px 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(43, 35, 32, 0.18);
}

.antal-tabel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-end: 6px;
  max-inline-size: 224px;
}

.antal-tabel-titel {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.antal-tabel-luk {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  margin-inline-end: -8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.antal-tabel-luk:hover {
  background: var(--color-border);
}

/* 0 på sin egen række øverst; 1–5, 6–10 … i fem kolonner derunder (placeres i byg.js) */
.antal-tabel-gitter {
  position: relative; /* så de enkelte tal kan rulles frem i en lang liste */
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 6px;
}

.antal-tabel-gitter--rul {
  max-block-size: 222px; /* godt 5 rækker; resten ruller inde i tabellen */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.antal-tabel-tal {
  block-size: 36px;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.antal-tabel-tal:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.antal-tabel-tal[aria-pressed="true"] {
  border-color: #2f9e44;
  background: #2f9e44;
  color: #ffffff;
}

.antal-tabel-tal:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Over det fælles loft (fx 10 negle i alt): gul, men kan vælges — så vises de andre valg, der kan mindskes. */
.antal-tabel-tal--graense {
  border-color: #fcc419;
  background: #fff3bf;
}

.antal-tabel-tal--graense:hover:not(:disabled) {
  border-color: #f59f00;
}

.antal-tabel [hidden] {
  display: none;
}

/* Panelet, der viser de andre valg, når kunden har valgt et gult tal */
.antal-graense {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: 224px; /* samme bredde som talrækkerne */
}

.antal-graense-tekst {
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #fcc419;
  border-radius: 8px;
  background: #fff3bf;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: start;
}

/* De andre valg vises som de samme knapper med skilt og antal — i rækker, tre pr. række. */
.antal-graense-poster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
}

.antal-graense-post {
  flex-direction: column;
  inline-size: 68px;
  border-color: #2f9e44;
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
}

.antal-graense-post .chip-mini-label {
  color: #2f9e44;
}

/* "−1" øverst på knappen: et tryk trækker 1 fra */
.antal-graense-minus {
  display: block;
  padding-block: 2px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.antal-graense-post:hover .antal-graense-minus {
  background: var(--color-primary-dark);
}

.antal-graense-post .chip-mini-visual svg {
  block-size: 60%; /* plads til antallet nederst */
}

.antal-graense-post .antal-tal {
  border-color: #2f9e44;
  background: #2f9e44;
  color: #ffffff;
}

.antal-graense-post:hover {
  background: #f1faf3;
}

.antal-graense-post:active {
  transform: scale(0.96);
}

.antal-tabel-bund {
  display: flex;
  gap: 6px;
  margin-block-start: 8px;
}

.antal-tabel-bund > button {
  flex: 1;
}

.antal-tabel-flere {
  block-size: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #ffffff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.antal-tabel-flere:hover {
  background: var(--color-primary-dark);
}

.antal-kort--valgt {
  border-color: #2f9e44;
}

.antal-kort--valgt .chip-mini-label {
  color: #2f9e44;
}

.antal-kort--valgt .antal-tal {
  border-color: #2f9e44;
  background: #2f9e44;
  color: #ffffff;
}

/* Kort med antal: tekst + tegning er én knap, der åbner antal-tabellen. */
.antal-kort-vaelg {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* "6 af 10 negle har fået et design" under designmenuen ved Mix negledesigns */
.byg-mix-status {
  margin: 8px 0 0;
  color: #d97706;
  font-size: 0.8rem;
  font-weight: 600;
}

.byg-mix-status--faerdig {
  color: #2f9e44;
}

.byg-mix-status[hidden] {
  display: none;
}

/* Knap uden skilt: teksten fylder hele knappen, der er lige så høj som naboknapperne. */
.chip-mini--tekst {
  align-self: stretch;
  inline-size: 84px; /* lidt bredere end billedknapperne, så lange ord som "nuværende" har plads */
}

.chip-mini--tekst .chip-mini-label {
  flex: 1 1 auto;
  padding-inline: 4px;
}

@media (max-width: 599.98px) {
  .chip-raekke {
    flex-wrap: nowrap;
    justify-content: safe center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-block: 3px 6px; /* plads til den grønne ring om et markeret valg */
    margin-inline: -16px;
    padding-inline: 16px;
    /* Knapperne snapper til indersiden af sidemargenen, hvor rullepilene ligger. */
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }

  .chip-raekke::-webkit-scrollbar {
    display: none;
  }

  .chip-raekke .chip,
  .chip-raekke .chip-mini {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* I "Book nemt" (inkl. galleri-vælgeren til referencebilleder) ruller valgrækkerne ikke sidelæns:
     knapperne stables på flere linjer, når der ikke er plads. */
  .byg-side .chip-raekke,
  .galleri-vaelger .chip-raekke {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 10px;
  }
}

/* ---------- Rullepile på valgrækker, der kan rulles sidelæns (js/rullepile.js) ---------- */

.chip-raekke-wrap {
  position: relative;
}

.rulle-pil {
  display: none;
}

@media (max-width: 599.98px) {
  /* Pilene ligger i rækkens sidemargen (16px), så de ikke dækker knapperne i start- og slutposition. */
  .chip-raekke-wrap--rul > .rulle-pil {
    position: absolute;
    inset-block: 0 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 16px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary-dark);
    filter: drop-shadow(0 0 1.5px #ffffff);
    cursor: pointer;
    /* Pile-tegningen (18px) er bredere end knappen (16px); uden klipning stikker den 1px ud over
       skærmkanten, så hele siden kan rulles sidelæns. Selve pilen sidder i midten og klippes ikke. */
    overflow: hidden;
  }

  .rulle-pil-venstre {
    inset-inline-start: -16px;
  }

  .rulle-pil-hoejre {
    inset-inline-end: -16px;
  }

  .rulle-pil svg {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
  }
}

.resultat-tael {
  margin-block: 18px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.resultat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 600px) {
  .resultat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .resultat-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.resultat-kort {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  inline-size: 100%;
}

.resultat-kort img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.vis-flere {
  display: block;
  margin-block: 28px;
  margin-inline: auto;
}

/* ---------- "Se & Book" forneden på galleriet (js/se-book.js) ---------- */
/* De fire knapper fra Se & Book (samme udseende som .pl-nav forneden dér). Siden får luft forneden svarende til
   bjælkens højde (js/se-book.js). */
.se-book {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  border-block-start: 1px solid var(--color-border);
  background: #e3f2fd;
  box-shadow: 0 -4px 12px rgba(20, 14, 13, 0.08);
}

/* Overskriften "Se & Book" står ikke i linjen — på ingen skærme (user: lavere linje, mere plads). Den navngiver stadig
   knapperne for skærmlæsere (aria-labelledby), og knappen "Vælg behandling" over galleriet fører til Se & Book. */
.se-book-titel {
  display: none;
}

/* Knapperne er links på galleriet */
a.pl-nav-knap {
  text-decoration: none;
}

/* ---------- Prisliste: se priser, sæt behandlingen sammen og bestil (js/prisliste.js) ---------- */

.pl-side {
  padding-inline: 16px;
  padding-block: 32px;
  max-inline-size: 1100px;
  margin-inline: auto;
}

/* Øverst: "Her kan du skrive og vise ønsker til din behandling" — kontaktboksen med billederne og beskeden
   (js/forberedelse.js, js/kontakt.js) i hele bredden (user) */
.forberedelse {
  margin: 0 auto 20px;
  padding: 8px 16px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.forberedelse legend {
  padding-inline: 8px;
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Overskriften folder rammen ud og sammen. Foldet ud: "− Her kan du skrive og vise ønsker til din behandling". Foldet
   sammen: et kort med talebobblen og galleri-skiltet og teksten ved siden af (nedenfor) */
.forberedelse-fold {
  min-block-size: 44px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.forberedelse-fold[aria-expanded="true"]::before {
  content: "\2212";
  display: inline-block;
  inline-size: 1em;
  font-weight: 700;
}

.forberedelse-fold-kort,
.forberedelse--lukket .forberedelse-fold-titel {
  display: none;
}

/* Foldet sammen: kortet i hele bredden — et tryk et vilkårligt sted på det folder kontaktboksen ud */
.forberedelse--lukket legend,
.forberedelse--lukket .forberedelse-fold {
  inline-size: 100%;
}

.forberedelse--lukket .forberedelse-fold {
  padding: 10px 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: start;
}

.forberedelse--lukket .forberedelse-fold:hover {
  border-color: var(--color-primary);
}

.forberedelse--lukket .forberedelse-fold-kort {
  display: flex;
  align-items: center;
  gap: 12px;
}

.forberedelse-skilte {
  display: flex;
  flex: none;
  gap: 6px;
}

/* Talebobblen og galleri-skiltet: tegnet i sidens farver (temaet), på en lys flise */
.forberedelse-skilt {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fdf1f4, #f5dbe2);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 8%, #fff), color-mix(in srgb, var(--color-primary) 26%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, #fff);
}

.forberedelse-skilt svg {
  display: block;
  inline-size: 42px;
  block-size: 42px;
}

.forberedelse-fold-tekst {
  display: grid;
  flex: 1;
  gap: 3px;
  min-inline-size: 0;
}

.forberedelse-fold-tekst strong {
  color: var(--color-primary-dark);
  font-size: 0.95rem;
  line-height: 1.3;
}

.forberedelse-fold-tekst span {
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
}

/* "+" til højre: kortet kan foldes ud */
.forberedelse-fold-plus {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* Smal telefon: lidt mindre skilte (under hinanden) og tekst, så teksten får plads ved siden af */
@media (max-width: 400px) {
  .forberedelse--lukket .forberedelse-fold {
    padding: 8px;
  }

  .forberedelse--lukket .forberedelse-fold-kort {
    gap: 8px;
  }

  .forberedelse-skilte {
    flex-direction: column;
    gap: 4px;
  }

  .forberedelse-skilt {
    inline-size: 42px;
    block-size: 42px;
    border-radius: 11px;
  }

  .forberedelse-skilt svg {
    inline-size: 34px;
    block-size: 34px;
  }

  .forberedelse-fold-tekst strong {
    font-size: 0.85rem;
  }

  .forberedelse-fold-tekst span {
    font-size: 0.78rem;
  }

  .forberedelse-fold-plus {
    inline-size: 24px;
    block-size: 24px;
    font-size: 1rem;
  }
}

/* Foldet sammen: kun overskriften ses — uden ramme */
.forberedelse--lukket {
  margin-block-end: 4px;
  padding: 0;
  border-color: transparent;
  background: none;
}

.forberedelse--lukket legend {
  padding-inline: 0;
}

.forberedelse--lukket .forberedelse-indhold {
  display: none;
}

/* Billederne til venstre (user) — i en søjle med to pr. række — og beskeden ved siden af. På en smal skærm står
   billederne over beskeden. */
.forberedelse-indhold {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.forberedelse .byg-reference-billede {
  flex: none;
  justify-content: flex-start;
  align-items: flex-start; /* (en høj "Tilføj flere"-ramme må ikke strække billedet ved siden af) */
  inline-size: clamp(290px, 30%, 320px); /* (rammerne mindst ca. 140px, så skiltene kan være i "Tilføj flere") */
  max-inline-size: none;
  /* Billedrammens øverste kant flugter med tekstfeltets (user): søjlen rykkes ned med overskriften "Din besked"
     (0.85rem, linjehøjde 1.35) og afstanden under den (6px) */
  margin: calc(0.85rem * 1.35 + 6px) 0 0;
  gap: 10px;
}

.forberedelse .kommentar-rediger > label[for="behandling-kommentar"] {
  line-height: 1.35;
}

.forberedelse .behandling-kommentar {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
}

@media (max-width: 640px) {
  .forberedelse-indhold {
    flex-direction: column;
    align-items: stretch;
  }

  .forberedelse .byg-reference-billede {
    inline-size: 100%;
    margin-block-start: 0;
  }
}

.kontakt-besked {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kontakt-besked[hidden] {
  display: none;
}

.kontakt-besked label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* (Mindst 16px tekst i felterne: ellers zoomer iPhone ind, når man trykker i dem) */
.kontakt-besked input:not([type="checkbox"]),
.kontakt-besked textarea {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}

.kontakt-besked input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* "Jeg vil have svar på": telefon og e-mail under hinanden, hver med feltet ved siden af krydset (user) */
.kontakt-svar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
  margin: 2px 0 0;
  padding: 0;
  border: none;
}

.forberedelse .kontakt-svar legend {
  margin-block-end: 6px;
  padding: 0;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.kontakt-svar-raekke {
  display: grid;
  grid-template-columns: 96px minmax(0, 320px);
  align-items: center;
  gap: 10px;
}

.kontakt-besked .kontakt-svar-valg {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  font-weight: 500;
  cursor: pointer;
}

.kontakt-svar-valg input {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: #2f9e44;
  cursor: pointer;
}

.kontakt-svar-valg input[aria-invalid="true"] {
  outline: 2px solid #c92a2a;
  outline-offset: 1px;
}

/* Knapperne nederst: "Vedhæft til bestilling" (lysegrøn som "Forudbestem pris") og "Send som besked" */
.kontakt-knapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.kontakt-knapper[hidden] {
  display: none;
}

.kontakt-vedhaeft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 0 16px;
  border: 2px solid #8fd19e;
  border-radius: 999px;
  background: #d3f0da;
  color: #1e6b31;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.kontakt-vedhaeft:hover {
  background: #bfe8c9;
}

.kontakt-ikon {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
}

/* Feltet, som kun robotter udfylder (kontakt.php) — ikke synligt */
.kontakt-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kontakt-note {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.kontakt-note[hidden] {
  display: none;
}

/* (Står altid i siden — også tom — så skærmlæsere læser beskeden op, når den kommer) */
.kontakt-status {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.kontakt-besked .kontakt-status:empty {
  margin-block-start: -8px; /* (ingen ekstra luft, når den er tom) */
}

.billede-besked:not(:empty) {
  margin-block-end: 10px;
}

.forberedelse--lukket .billede-besked {
  display: none;
}

.kontakt-besked [aria-invalid="true"] {
  border-color: #c92a2a;
}

.kontakt-status--fejl {
  color: #c92a2a;
}

.kontakt-status--ok {
  color: #1e6b31;
}

/* En rigtig billedramme i sidens farver: rosa ramme med lys kant, hvidt passepartout og skygge */
.forberedelse .byg-reference-tom-ramme,
.forberedelse .byg-reference-miniature {
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 9px solid transparent;
  border-image: linear-gradient(145deg, #f4d3dc 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%) 1;
  border-radius: 0;
  background: #fffaf8;
  box-shadow:
    inset 0 0 0 3px #ffffff,
    inset 0 0 0 4px rgba(185, 100, 122, 0.35),
    0 4px 10px rgba(20, 14, 13, 0.18);
  overflow: visible;
}

/* Den tomme ramme (user): smal, "TILFØJ BILLEDER som vi skal se" over flere linjer og upload-skiltet over galleri-skiltet.
   Et tryk et andet sted i rammen viser valget mellem de to (js/forberedelse.js). Uden billeder er billedsøjlen kun så
   bred som rammen, så beskeden får resten. */
.forberedelse .byg-reference-tom-ramme {
  flex-direction: column;
  gap: 10px;
  inline-size: 140px;
  aspect-ratio: auto;
  padding: 12px 8px;
  border-style: solid;
  cursor: pointer;
}

.forberedelse:not(.forberedelse--med-billeder) .byg-reference-billede {
  inline-size: auto;
}

/* Med billeder: kvadratiske rammer, to pr. række — også den tomme "Tilføj flere billeder" */
.forberedelse--med-billeder .byg-reference-tom-ramme,
.forberedelse--med-billeder .byg-reference-miniature {
  inline-size: calc(50% - 5px);
  aspect-ratio: 1 / 1;
}

.forberedelse--med-billeder .byg-reference-tom-ramme {
  gap: 6px;
  padding: 6px 4px;
}

.billedramme-skilte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.billedramme-skilt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-inline-size: 80px;
  padding: 2px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.billedramme-skilt:hover .forberedelse-skilt {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.billedramme-skilt:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.billedramme-skilt .billedramme-ikon {
  inline-size: 28px;
  block-size: 28px;
}

/* Med billeder ("Tilføj flere billeder" i et kvadrat): mindre skilte og navnene kun for skærmlæsere */
.forberedelse--med-billeder .billedramme-skilte {
  gap: 4px;
}

.forberedelse--med-billeder .billedramme-skilt-navn {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.forberedelse--med-billeder .billedramme-skilt .forberedelse-skilt {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 9px;
}

.forberedelse--med-billeder .billedramme-skilt .forberedelse-skilt svg {
  inline-size: 30px;
  block-size: 30px;
}

.forberedelse--med-billeder .billedramme-skilt .forberedelse-skilt .billedramme-ikon {
  inline-size: 20px;
  block-size: 20px;
}

/* Tilføjede billeder vises uden billedramme — kun den tomme "Tilføj flere" har ramme */
.forberedelse .byg-reference-miniature {
  border: none;
  border-image: none;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  overflow: hidden;
}

.billedramme-tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-primary-dark);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: center;
}

.billedramme-tekst strong {
  display: block;
  font-size: 0.78rem;
}

.billedramme-ikon {
  inline-size: 26px;
  block-size: 26px;
}

/* Beskeden: tekstfeltet, "Jeg vil have svar på" og noten (knapperne står under, .kontakt-knapper) */
.kommentar-rediger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  block-size: 100%;
}

.kommentar-rediger[hidden],
.kommentar-gemt[hidden] {
  display: none;
}

.kommentar-rediger textarea {
  flex: 1;
}

.kommentar-gemt {
  margin: 0;
}

.kommentar-gemt .kommentar-gemt-titel {
  color: #2f9e44;
  font-size: 0.82rem;
  font-weight: 700;
}

.pl-layout {
  display: grid;
  gap: 20px;
  align-items: start;
}

/* På store skærme står kurven fast i højre side, mens man vælger. */
@media (min-width: 960px) {
  .pl-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  /* Lige under sidehovedet og højst så høj, som der er plads til mellem det og bjælken forneden (--pl-header-hoejde og
     --pl-bjaelke-hoejde sættes af js/prisliste.js opdaterBjaelke) — en lang kvittering kan så rulles i sig selv. (Kun
     kurven ved siden af listen — ikke kvitteringen i arket, som Prislisten også viser på store skærme.) */
  .pl-layout > .pl-kurv {
    position: sticky;
    /* (Under den valgte starttid, når den står fast øverst: --pl-valgt-tid-hoejde, 0 uden) */
    inset-block-start: calc(var(--pl-header-hoejde, 116px) + var(--pl-valgt-tid-hoejde, 0px));
    max-block-size: calc(100vh - var(--pl-header-hoejde, 116px) - var(--pl-valgt-tid-hoejde, 0px) - var(--pl-bjaelke-hoejde, 80px) - 12px);
    max-block-size: calc(100dvh - var(--pl-header-hoejde, 116px) - var(--pl-valgt-tid-hoejde, 0px) - var(--pl-bjaelke-hoejde, 80px) - 12px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* minmax(0, 1fr): kolonnen må ikke blive bredere end skærmen (ellers kan fx Refill på pedicure skubbe siden
   ud til siden) — indholdet brydes i stedet om. */
.pl-afsnit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* Et afsnit pr. behandling (Manicure, Pedicure, SPA, Vipper & bryn) */
.pl-kort {
  padding: 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pl-kort--valgt {
  border-color: #2f9e44;
}

.pl-kort-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 12px;
}

.pl-kort-ikon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 12px;
  background: #f7f0ee;
}

.pl-kort-ikon img,
.pl-kort-ikon svg {
  inline-size: 36px;
  block-size: 36px;
  object-fit: contain;
}

/* Foto-skilt (Manicure, Pedicure, SPA og Vipper & bryn, ikoner/…-skilt.jpg): fylder hele feltet med de runde hjørner */
.pl-kort-ikon--foto {
  overflow: hidden;
}

.pl-kort-ikon--foto img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.pl-kort-top h2 {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 1.25rem;
}

.pl-kort-top p {
  margin: 2px 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Overskrifterne over valgene (fx "Vælg behandling", "Vælg design", "Vælg hvad der skal tages af"): tydelige — mørk,
   fed skrift lidt større end brødteksten i skiltene */
.pl-gruppe-titel {
  margin: 12px 0 6px;
  color: var(--color-text);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pl-kort-top + .pl-gruppe-titel {
  margin-block-start: 0;
}

.pl-procedurer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* En behandling: rund vælger · navn og forklaring · pris og tid — og nederst en linje med knapperne og "Se priser"
   (fold-knappen). Et tryk på et tomt sted i den nederste linje folder ud / sammen; et tryk over den viser boksen med
   knapperne (js/prisliste.js). */
.pl-procedure-raekke {
  position: relative;
}

.pl-procedure {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  inline-size: 100%;
  padding: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
}

/* Den nederste linje i hele kortets bredde: knapperne til venstre, "Se priser" / "Skjul priser" til højre — på én linje
   fra ca. 360px brede telefoner */
.pl-raekke-bund {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pl-procedure-fold {
  display: inline-flex;
  align-items: center;
  min-block-size: 34px;
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.pl-procedure-fold:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.pl-procedure-raekke:hover .pl-procedure {
  border-color: var(--color-primary);
}

.pl-procedure--valgt,
.pl-procedure-raekke:hover .pl-procedure--valgt {
  border-color: #2f9e44;
  background: #f1faf3;
}

/* En behandling, der ikke kan vælges sammen med den valgte: grålagt (den kan stadig foldes ud og vælges i stedet) */
.pl-procedure--graa {
  background: #f3f1f0;
}

.pl-procedure--graa .pl-procedure-navn,
.pl-procedure--graa .pl-pris {
  color: #9a908c;
}

.pl-procedure--graa .pl-procedure-forklaring,
.pl-procedure--graa .pl-tid,
.pl-procedure--graa .pl-pris-etiket,
.pl-procedure--graa .pl-fold-tekst {
  color: #b3aaa6;
}

.pl-procedure--graa .pl-radio,
.pl-procedure--graa .pl-procedure-vaelg:hover .pl-radio {
  border-color: #ddd5d2;
  background: #f3f1f0;
}

/* "Vælg i stedet for …" under forklaringen på en grålagt behandling (foldet ud eller ej): lysegrøn knap. Runde hjørner,
   der ikke afhænger af højden, så knappen også ser pæn ud, når en lang tekst brydes over flere linjer. */
.pl-istedet-knap {
  position: relative;
  align-self: flex-start;
  margin-block-start: 6px;
  padding: 5px 12px;
  border: 1px solid #8fd19e;
  border-radius: 12px;
  background: #d3f0da;
  color: #1e6b31;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
}

.pl-istedet-knap:hover {
  background: #bfe8c9;
}

/* Pilen ved "Se priser": peger ned, når behandlingen er foldet sammen, og op, når den er foldet ud */
.pl-procedure-pil {
  inline-size: 16px;
  block-size: 16px;
  color: var(--color-muted);
  transition: rotate 0.2s ease;
}

.pl-procedure-fold[aria-expanded="true"] .pl-procedure-pil {
  rotate: 180deg;
}

/* Vælgeren forrest: et større felt at ramme end selve cirklen/firkanten */
.pl-procedure-vaelg {
  display: flex;
  margin: -10px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.pl-procedure-vaelg:hover .pl-radio {
  border-color: #2f9e44;
}

.pl-radio {
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
}

.pl-procedure-vaelg[aria-pressed="true"] .pl-radio {
  border: 6px solid #2f9e44;
}

/* Procedurer, der kan vælges sammen (Refill, Reparation, Garanti-reparation): firkantet afkrydsning */
.pl-radio.pl-afkryds {
  border-radius: 5px;
}

.pl-procedure-vaelg[aria-pressed="true"] .pl-radio.pl-afkryds {
  border: 2px solid #2f9e44;
  background: #2f9e44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,8.5 L6.5,12 L13,4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* I kurven med et valgt design: fotoet af det valgte negleskilt i stedet for markeringen (forreste kolonne bredere),
   med et lille grønt hak i hjørnet */
.pl-procedure--foto {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.pl-procedure-vaelg--foto {
  border-radius: 14px;
}

.pl-valgt-foto {
  position: relative;
  display: block;
  inline-size: 34px;
}

.pl-valgt-foto .negl-foto {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 6px;
  background: #5d8197;
}

.pl-valgt-foto::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inset-inline-end: -7px;
  inline-size: 18px;
  block-size: 18px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2f9e44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,8.5 L6.5,12 L13,4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.pl-procedure-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

/* Navnet (fx "Refill") virker ved et tryk som vælgeren forrest — som resten af rækken over den nederste linje
   (js/prisliste.js) */
.pl-procedure-navn {
  align-self: flex-start;
  font-weight: 700;
}

.pl-procedure-navn:hover {
  text-decoration: underline;
}

.pl-procedure-forklaring {
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.pl-procedure-pris {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}

.pl-pris {
  font-weight: 700;
  white-space: nowrap;
}

/* Prisen før samlerabat, overstreget foran prisen med samlerabat (det, der ikke er i kurven, når noget andet er) */
.pl-pris-foer-linje {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Grunden til, at prisen er overstreget (fx "Samlerabat") — grøn som samlerabatten i kvitteringen */
.pl-pris-foer-grund {
  color: #1e6b31;
  font-weight: 600;
}

.pl-pris-foer {
  color: var(--color-muted);
  white-space: nowrap;
}

/* SPA / Vipper & bryn: den gamle pris over den nye i højre side af rækken */
.pl-til-priser {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-inline-start: auto;
  line-height: 1.2;
}

/* Nederst i en udfoldet behandling (og mindre i rækken, når den er foldet sammen): "Læg tid i kurv" (grøn) — eller
   "I kurven" — og "Forudbestem pris" (bestillingsvinduet) */
.pl-kurv-knapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 0 12px 12px;
}

.pl-laeg-i-kurv,
.pl-bestil-vindue,
.pl-anden-tid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 6px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
}

.pl-laeg-i-kurv {
  border: 2px solid #2f9e44;
  background: #2f9e44;
  color: #fff;
}

.pl-laeg-i-kurv:hover {
  border-color: #24803a;
  background: #24803a;
}

/* "Forudbestem pris" og "Vælg et andet tidspunkt" (en behandling, der ikke er tid nok til efter den valgte starttid):
   lysegrønne (som "Vælg i stedet for …") */
.pl-bestil-vindue,
.pl-anden-tid {
  border: 2px solid #8fd19e;
  background: #d3f0da;
  color: #1e6b31;
}

.pl-bestil-vindue:hover,
.pl-anden-tid:hover {
  background: #bfe8c9;
}

/* Hvorfor en behandling er grålagt efter den valgte starttid, fx "Ikke tid nok kl. 14:00: …" */
.pl-ikke-tid {
  display: block;
  margin-block-start: 4px;
  color: #8a6100;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

.pl-kurv-knapper .pl-ikke-tid,
.vb-knapper .pl-ikke-tid {
  flex-basis: 100%;
  margin: 0;
}

/* Valgmuligheder i en procedure, der ikke er tid til efter den valgte starttid (fx et design, alm. lak, flere negle):
   grålagte — de kan ikke vælges (js/prisliste.js ikkeTidTilValg). Under menuen står hvorfor (.pl-ikke-tid-hint). */
/* (Med en ekstra klasse for skiltene, rækkerne og boksene, så deres egne regler længere nede — hvid baggrund, hånd og
   farvet kant ved hover — ikke vinder: et gråt valg må ikke se ud, som om det kan vælges.) */
.pl-ikke-tid-valg,
.pl-ikke-tid-valg:hover,
.pl-valg.pl-ikke-tid-valg,
.pl-valg.pl-ikke-tid-valg:hover,
.pl-til.pl-ikke-tid-valg,
.pl-til.pl-ikke-tid-valg:hover,
.tv-boks.pl-ikke-tid-valg,
.tv-boks.pl-ikke-tid-valg:hover,
.pl-ikke-tid-valg .pl-valg:disabled,
.pl-ikke-tid-valg .pl-valg:disabled:hover {
  border-color: var(--color-border);
  background: #f6f4f3;
  cursor: not-allowed;
}

.tv-boks.pl-ikke-tid-valg .tv-cirkel {
  cursor: not-allowed;
}

/* Kun indholdet er gråt — begrundelsen (.pl-ikke-tid-grund, med forslagene) står tydeligt, også inde i en boks. (Hver
   regel med :has() for sig: en browser uden :has() springer kun den over og gør stadig indholdet gråt.) */
.pl-ikke-tid-valg > :not(.pl-ikke-tid-grund) {
  opacity: 0.45;
  filter: grayscale(1);
}

.pl-ikke-tid-valg > :has(.pl-ikke-tid-grund) {
  opacity: 1;
  filter: none;
}

.pl-ikke-tid-valg > :has(.pl-ikke-tid-grund) > :not(.pl-ikke-tid-grund) {
  opacity: 0.45;
  filter: grayscale(1);
}

/* Hvorfor valget er grålagt (js/prisliste.js ikkeTidGrundHtml / boksIkkeTidHtml) — i rækker og bokse under teksten */
.pl-ikke-tid-grund {
  display: block;
  color: #8a6100;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: default;
}

.pl-til.pl-ikke-tid-valg {
  flex-wrap: wrap;
  row-gap: 2px;
}

.pl-til > .pl-ikke-tid-grund {
  flex-basis: 100%;
  padding-inline-start: 28px; /* under navnet: boksen (18px) og mellemrummet (10px) */
}

.pl-til--rund > .pl-ikke-tid-grund {
  padding-inline-start: 30px;
}

/* På et skilt med foto: over fotoet (user: "skrevet over selve skiltet") */
.pl-valg--ikon.pl-ikke-tid-valg {
  position: relative;
}

.pl-valg--ikon > .pl-ikke-tid-grund {
  position: absolute;
  inset-inline: 3px;
  inset-block-start: 40%;
  padding: 3px 2px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Den valgte starttid øverst i spørgsmålsvinduet (den faste boks på siden står bag vinduet) */
.sp-starttid {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.sp-starttid strong {
  color: var(--color-text);
}

option.pl-ikke-tid-valg {
  color: #9a908c;
}

.pl-ikke-tid-hint {
  color: #8a6100;
  font-weight: 600;
}

/* SPA / Vipper & bryn, der ikke er tid nok til: grålagt som procedurerne (.pl-til.… slår .pl-til-reglerne længere nede) */
.pl-til.pl-til--graa {
  background: #f3f1f0;
}

.pl-til.pl-til--graa > .pl-til-navn,
.pl-til.pl-til--graa .pl-pris {
  color: #9a908c;
}

.pl-kurv-ikon {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
}

/* I procedurens række (foldet sammen): de samme knapper, mindre — i den nederste linje under navnet, med "Se priser"
   til højre */
.pl-raekke-bund > .pl-kurv-knapper--lille {
  gap: 6px;
  padding: 0;
}

.pl-kurv-knapper--lille .pl-laeg-i-kurv,
.pl-kurv-knapper--lille .pl-bestil-vindue,
.pl-kurv-knapper--lille .pl-anden-tid {
  gap: 4px;
  min-block-size: 34px;
  padding: 3px 8px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pl-kurv-knapper--lille .pl-kurv-ikon {
  inline-size: 18px;
  block-size: 18px;
}

.pl-raekke-bund .pl-procedure-pil {
  inline-size: 14px;
  block-size: 14px;
}

.pl-kurv-knapper--lille .pl-i-kurven {
  font-size: 0.8rem;
}

/* Smal telefon: knapperne lidt tættere og mindre (og procedurens kant lidt smallere), så "Læg tid i kurv", "Forudbestem
   pris" og "Se priser" står på én linje fra ca. 360px (udfoldet med "Skjul priser" fra ca. 375px) */
@media (max-width: 440px) {
  .pl-procedure {
    padding-inline: 9px;
  }

  .pl-raekke-bund,
  .pl-raekke-bund > .pl-kurv-knapper--lille {
    gap: 4px;
  }

  .pl-kurv-knapper--lille .pl-laeg-i-kurv,
  .pl-kurv-knapper--lille .pl-bestil-vindue,
  .pl-kurv-knapper--lille .pl-anden-tid {
    gap: 3px;
    padding-inline: 5px;
    font-size: 0.72rem;
  }

  .pl-raekke-bund .pl-fold-tekst {
    font-size: 0.72rem;
  }
}

/* Endnu smallere: "Se priser" / "Skjul priser" på to linjer ("Se" over "priser") — stadig på niveau med knapperne —
   og knapperne en anelse tættere, så linjen også holder i en udfoldet procedure (med dens ramme) fra ca. 360px */
@media (max-width: 400px) {
  .pl-raekke-bund,
  .pl-raekke-bund > .pl-kurv-knapper--lille {
    gap: 3px;
  }

  .pl-kurv-knapper--lille .pl-laeg-i-kurv,
  .pl-kurv-knapper--lille .pl-bestil-vindue,
  .pl-kurv-knapper--lille .pl-anden-tid {
    padding-inline: 4px;
  }

  .pl-raekke-bund .pl-fold-ord {
    inline-size: min-content;
    white-space: normal;
    text-align: end;
    line-height: 1.1;
  }
}

/* "Se priser" / "Skjul priser" med pilen i den nederste linje (fold-knappen). Pilen har tekstens farve (i en grålagt
   række begge grå). */
.pl-fold-tekst .pl-procedure-pil {
  color: inherit;
}

.pl-fold-tekst {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.pl-i-kurven {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1e6b31;
  font-weight: 700;
}

/* Boksen ved markeringen (js/prisliste.js aabnValgBoks): procedurens navn, pris og knapper — og "Tilbage" */
.tv-dialog.vb-dialog {
  inline-size: min(420px, calc(100vw - 24px));
}

.vb-knapper {
  padding: 0;
}

.vb-knapper .vb-ud {
  min-block-size: 44px;
  border: 2px solid #e03131;
  background: var(--color-surface);
  color: #c92a2a;
  font-size: 0.95rem;
}

.vb-knapper .vb-ud:hover {
  background: #fff5f5;
}

/* "Pris uden tilvalg:" over procedurens pris (brydes om i en smal spalte) */
.pl-pris-etiket {
  max-inline-size: 7.5em;
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: end;
}

.pl-tid {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Prisen og tiden svæver øverst til højre i procedurens ramme, når dens række er rullet væk, mens man er i dens
   valgområde (js/prisliste.js opdaterPrisSvaev). Under sidehovedet og bag ark/lysboks. Et tryk på boksen ruller op
   til procedurens række (det, der står under boksen, kan ikke ses — så det skal heller ikke kunne trykkes på). */
.pl-pris-svaev {
  cursor: pointer;
  position: fixed;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  border: 2px solid var(--color-muted);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(20, 14, 13, 0.18);
  text-align: end;
}

.pl-pris-svaev[hidden] {
  display: none;
}

/* Øverste linje: procedurens navn og evt. "Pris uden tilvalg:" (lange navne brydes) */
.pl-pris-svaev-hoved {
  max-inline-size: min(16em, 60vw);
  font-size: 0.72rem;
  line-height: 1.25;
}

.pl-pris-svaev-navn {
  color: var(--color-text);
  font-weight: 700;
}

.pl-pris-svaev .pl-pris-etiket {
  max-inline-size: none;
  white-space: nowrap; /* "Pris uden tilvalg:" holdes samlet */
}

/* En valgt procedure: grøn ramme som procedurens egen */
.pl-pris-svaev--valgt {
  border-color: #2f9e44;
  background: #f1faf3;
}

/* Mangler der valg, der bestemmer prisen (fx design og længde): let gul baggrund som de gule skilte */
.pl-pris-svaev--mangler {
  background: #fff9db;
}

/* Prisen er klar (alle valg, der bestemmer den, er truffet) — i kurven eller ej: grøn baggrund og ramme */
.pl-pris-svaev--klar {
  border-color: #2f9e44;
  background: #d3f0da;
}

/* Tilvalgene til den valgte behandling, lige under den */
.pl-detaljer {
  padding: 0 12px 12px;
}

/* Den valgte behandling: én grøn ramme rundt om navnet og alle valgmulighederne. Navnet mister sin egen ramme, men
   beholder den grønlige baggrund — og den fylder hele feltet ud til undermenuerne, som selv er hvide indeni. */
.pl-procedure-aaben {
  border: 3px solid #2f9e44;
  border-radius: 12px;
  background: #f1faf3;
}

.pl-procedure-aaben .pl-gruppe {
  background: var(--color-surface);
}

.pl-procedure-aaben .pl-procedure,
.pl-procedure-udfoldet .pl-procedure {
  border-color: transparent;
  border-radius: 9px 9px 0 0;
}

/* En behandling, der kun er foldet ud (ikke i kurven): tydelig mørkegrå ramme rundt om navnet og valgmulighederne, så
   man kan se priserne — "Læg tid i kurv" står nederst. (En behandling i kurven, foldet ud, har en lige så tyk grøn.) */
.pl-procedure-udfoldet {
  border: 3px solid var(--color-muted);
  border-radius: 12px;
  background: var(--color-surface);
}

/* En gruppe valg (Længde, Design, Tilvalg …) i en ramme, der skifter farve:
   lyserød = der skal vælges her, grøn = der er valgt, grå = valgfri og intet valgt. Den blinker ikke. */
.pl-gruppe {
  margin-block-start: 10px;
  padding: 2px 10px 10px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.pl-gruppe .pl-gruppe-titel {
  margin-block-start: 8px;
}

/* Overskrift, der folder gruppen ud og sammen: "+ Vælg form (valgfrit)" / "− Vælg form (valgfrit)" */
.pl-fold-knap {
  display: block;
  inline-size: 100%;
  min-block-size: 32px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.pl-fold-knap::before {
  content: "+";
  display: inline-block;
  inline-size: 1.1em;
  font-size: 1.2em;
  font-weight: 700;
}

.pl-fold-knap[aria-expanded="true"]::before {
  content: "\2212";
}

/* En menu i en valgt procedure, der mangler et valg: gul ramme (samme gule som pilen og de gule skilte) */
.pl-gruppe--mangler {
  border-color: #fcc419;
}

.pl-gruppe--mangler .pl-gruppe-titel {
  color: #8a6100;
}

.pl-gruppe--valgt {
  border-color: #2f9e44;
}

.pl-gruppe--valgt .pl-gruppe-titel {
  color: #1e7b34;
}

/* Den menu, kunden skal vælge i nu (den næste mulige — eller den, kunden er i gang med): fed grøn ramme, der
   svagt toner ind og ud (js/prisliste.js, markerRamme). Den samme ramme om et andet sted, kunden er ført hen til
   med en knap (js/prisliste.js rammeOm): et afsnit, en procedure, et SPA- eller vippe-valg eller kurven. */
.pl-gruppe--aktiv,
.pl-ramme-aktiv {
  border-color: #2f9e44;
  box-shadow: 0 0 0 2px #2f9e44;
  animation: pl-gruppe-puls 2s ease-in-out infinite;
}

@keyframes pl-gruppe-puls {
  50% {
    border-color: rgba(47, 158, 68, 0.3);
    box-shadow: 0 0 0 2px rgba(47, 158, 68, 0.3);
  }
}

/* Mangler menuen med rammen et valg, er den fede ramme gul (grøn betyder valgt) */
.pl-gruppe--aktiv.pl-gruppe--mangler {
  border-color: #fcc419;
  box-shadow: 0 0 0 2px #fcc419;
  animation-name: pl-gruppe-puls-gul;
}

@keyframes pl-gruppe-puls-gul {
  50% {
    border-color: rgba(252, 196, 25, 0.35);
    box-shadow: 0 0 0 2px rgba(252, 196, 25, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-gruppe--aktiv,
  .pl-gruppe--aktiv.pl-gruppe--mangler,
  .pl-ramme-aktiv {
    animation: none;
  }
}

.pl-valg-raekke {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* "Vælg design" (js/prisliste.js designGrupper, user 2026-10-31): en ramme om hver kategori — øverst navnet og prisen
   ("Design +100 kr.") med en markeringscirkel foran, under den designene. Et tryk i rammen markerer kategorien; den
   markerede ramme er grøn som de valgte skilte. "Tilvalg" står over tilvalgene til sidst (uden ramme). */
/* (Tydelig ramme — user 2026-10-31: en mørkere og tykkere kant og en let skygge) */
.pl-design-gruppe {
  margin-block-end: 10px;
  padding: 6px 8px 8px;
  border: 2px solid #b5a6a1;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 1px 4px rgba(20, 14, 13, 0.1);
}

.pl-design-gruppe[data-design-kategori] {
  cursor: pointer;
}

.pl-design-gruppe--valgt {
  border-color: #2f9e44;
  background: #f1faf3;
  box-shadow: 0 1px 6px rgba(47, 158, 68, 0.25);
}

.pl-design-kategori {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: start;
}

button.pl-design-kategori {
  cursor: pointer;
}

/* (Prisen sort og fed — user 2026-10-31) */
.pl-design-kategori-pris {
  color: #111111;
  font-weight: 800;
}

/* Markeringscirklen: tom — markeret en grøn prik (eget navn: .pl-radio er procedurernes) */
.pl-kategori-radio {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid #8a7d78;
  border-radius: 50%;
  background: var(--color-surface);
}

.pl-design-kategori[aria-pressed="true"] .pl-kategori-radio {
  border-color: #2f9e44;
}

.pl-design-kategori[aria-pressed="true"] .pl-kategori-radio::after {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: #2f9e44;
}

.pl-design-pris {
  margin: 12px 0 5px;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.pl-valg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-inline-size: 76px;
  padding: 6px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.pl-valg:hover {
  border-color: var(--color-primary);
}

/* Et valgt skilt: lidt kraftigere grøn end de andre lysegrønne baggrunde (fx den valgte behandling), så kundens
   valg skiller sig ud — mørk tekst */
.pl-valg[aria-pressed="true"],
.pl-valg--valgt,
.pl-valg[aria-pressed="true"]:hover,
.pl-valg--valgt:hover {
  border-color: #2f9e44;
  background: #b2f2bb;
}

/* Skilte med foto har samme bredde: en fjerdedel af rækken (minus mellemrummene), så der står ca. 4 på række på en
   telefon — højst 88px (som på større skærme) og mindst 64px (på en meget smal skærm 3 på række). Et langt navn
   (fx "Double French") går over flere linjer i stedet for at gøre skiltet bredere. */
.pl-valg--ikon {
  inline-size: clamp(64px, calc((100% - 3 * 6px) / 4), 88px);
  min-inline-size: 0;
  padding-inline: 4px;
}

/* Smal telefon: lidt mindre skrift i de smalle skilte, så et navn som "Ensfarvet" står på én linje */
@media (max-width: 400px) {
  .pl-valg--ikon {
    font-size: 0.76rem;
  }
}

.pl-valg {
  max-inline-size: 132px;
}

/* Skilte med rullemenu: "Antal sten" og — ved "Brug flere designs" — designskiltene (antal negle), Naturel med
   resten (fast tal). Rullemenuen sidder i fotoets hjørne (.pl-valg--hjoerne nedenfor). */
.pl-valg--antal {
  cursor: default;
}

/* Et markeret valg har en tydelig, fed grøn ramme: kanten plus en grøn ring udenom (en ring flytter ikke knappens
   indhold, som en tykkere kant ville). Gælder prislistens knapper og tilvalg, tidsboksene og
   galleriets filterknapper. */
.pl-valg[aria-pressed="true"],
.pl-valg--valgt,
.pl-til[aria-pressed="true"],
.pl-til--valgt,
.tv-boks--valgt,
.chip-mini[aria-pressed="true"],
.chip-mini--valgt,
.antal-kort--valgt {
  box-shadow: 0 0 0 2px #2f9e44;
}

.pl-valg[aria-pressed="true"] .pl-valg-navn,
.pl-valg--valgt .pl-valg-navn {
  color: #1b5e20;
}

.pl-valg-ikon svg {
  display: block;
  inline-size: 24px;
  block-size: 36px;
}

/* Negleskiltene står på samme lyse baggrund som i galleriets filter (og afsnittenes skilte), så hvide
   detaljer — fx French-spidsen, Chrome-glansen og Babyboomer — ikke flyder sammen med den hvide knap. */
.pl-valg-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f7f0ee;
}

.pl-valg-ikon {
  align-self: stretch;
  margin-block-end: 2px;
  padding-block: 4px;
}

/* Negleskiltenes fotos (js/mini-negl.js neglFoto): et stående foto i feltet, hvis baggrund har fotoets
   blågrå farve, så fotoet går i ét med feltet — også når knappen er bredere end fotoet. */
.pl-valg-ikon:has(.negl-foto) {
  overflow: hidden;
  padding: 0;
  background: #5d8197;
}

.pl-valg-ikon .negl-foto {
  display: block;
  inline-size: 48px;
  block-size: 102px;
}

.pl-valg-navn {
  max-inline-size: 100%;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

.pl-valg .pl-pris {
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
}

/* Til/fra-tilvalg som rækker (Med lak, SPA, laminering …) og antal negle (Reparation, Garanti-reparation) */
.pl-til,
.pl-antal {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-start: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  text-align: start;
}

.pl-til {
  cursor: pointer;
}

.pl-til:hover {
  border-color: var(--color-primary);
}

.pl-til[aria-pressed="true"],
.pl-til[aria-pressed="true"]:hover,
.pl-til--valgt,
.pl-til--valgt:hover {
  border-color: #2f9e44;
  background: #b2f2bb;
}

.pl-til-boks {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
}

/* SPA / Vipper & bryn (js/prisliste.js plTilKurvHtml): rækken er ikke selv en knap. Afkrydsningen forrest viser, om
   behandlingen er i kurven (et større felt at ramme end selve boksen), og "Læg tid i kurv" / "I kurven" står under navnet. */
.pl-til--kurv {
  flex-wrap: wrap;
  row-gap: 6px;
}

.pl-til-vaelg {
  display: flex;
  flex: none;
  margin: -8px;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.pl-til--kurv > .pl-kurv-knapper {
  flex-basis: 100%;
  padding: 0 0 0 28px; /* under navnet: boksen (18px) og mellemrummet (10px) */
}

/* Ét af flere valg (fx gel / akryl, uden / med alm. lak): rund markeringscirkel som procedurernes — valgt: tyk grøn kant */
.pl-til--rund .pl-til-boks {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
}

.pl-til--rund[aria-pressed="true"] .pl-til-boks {
  border: 6px solid #2f9e44;
  background: var(--color-surface);
}

.pl-til[aria-pressed="true"]:not(.pl-til--rund) .pl-til-boks,
.pl-til-vaelg[aria-pressed="true"] .pl-til-boks,
.pl-valg[aria-pressed="true"] .pl-til-boks {
  border-color: #2f9e44;
  background: #2f9e44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,8.5 L6.5,12 L13,4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* "Brug flere designs", Mat top, Glitter og "Ændring af negleform" som skilte forrest i design-gitteret
   (js/prisliste.js plValgBoksKnap): afkrydsningsboksen sidder i skiltets øverste venstre hjørne, så man kan se,
   at de vælges til og fra (sammen med et design). */
.pl-valg--boks .pl-valg-ikon,
.pl-valg--hjoerne .pl-valg-ikon {
  position: relative;
}

.pl-valg-boks {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  inline-size: 16px;
  block-size: 16px;
}

/* Mat top / Glitter ved "Brug flere designs" (js/prisliste.js plTilvalgAntalSkilt): afkrydsningsboksen er sin egen
   knap, og rullemenuen med antal negle sidder lige ved siden af den. Et tryk på resten af skiltet vælger til/fra. */
.pl-valg--tilvalg-antal {
  cursor: pointer;
}

button.pl-valg-boks {
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  cursor: pointer;
}

.pl-valg-boks[aria-pressed="true"] {
  border-color: #2f9e44;
  background: #2f9e44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,8.5 L6.5,12 L13,4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.pl-valg--hjoerne.pl-valg--tilvalg-antal .pl-antal-select {
  inset-inline-start: 28px;
}

/* "Antal sten" og designskiltene ved "Brug flere designs" (pl-valg--hjoerne): rullemenuen sidder på
   afkrydsningsboksens plads i fotoets hjørne — lille og smal, så den kun dækker lidt af lange, spidse negle
   (stiletto, almond, coffin). Naturels faste antal står samme sted. */
.pl-valg--hjoerne .pl-antal-select {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  inline-size: 30px;
  min-inline-size: 0;
  block-size: 20px;
  min-block-size: 0;
  margin: 0;
  padding: 0 1px 0 2px;
  border-width: 2px;
  border-radius: 4px;
  font-size: 0.7rem;
  line-height: 1;
}

.pl-valg--hjoerne .pl-antal-fast {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  min-inline-size: 30px;
  min-block-size: 20px;
  margin: 0;
  padding: 0 4px;
  border-width: 2px;
  border-radius: 4px;
  background: var(--color-surface);
  font-size: 0.7rem;
  line-height: 1;
}

/* Hvor listen tegnes i siden, er boksen kun så bred som tallet (30 px — lidt bredere ved 100) */
@supports (appearance: base-select) {
  .pl-valg--hjoerne .pl-antal-select {
    inline-size: auto;
    min-inline-size: 30px;
  }

  .pl-valg--hjoerne .pl-antal-select::picker-icon {
    margin-inline-start: 1px;
    font-size: 0.55rem;
  }

  /* Listen har samme skrift som de andre rullemenuer (kun boksen i hjørnet er lille) */
  .pl-valg--hjoerne .pl-antal-select option {
    font-size: 0.8rem;
  }
}

.pl-til-navn {
  flex: 1;
  min-inline-size: 0;
}

/* "Brug flere designs" (Mix): tre fotonegle med hvert sit design side om side
   (js/mini-negl.js). Hvert foto beskæres i siderne (1 : 3), så neglene står tæt som på en hånd; feltet har
   fotoenes blågrå farve. */
.negl-mix {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5d8197;
}

.negl-mix .negl-foto {
  display: block;
  inline-size: 16px;
  block-size: auto;
  aspect-ratio: 1 / 3;
  object-fit: cover;
}

/* På skiltet "Brug flere designs" i design-gitteret: tre smalle fotos side om side under et bånd foroven, så
   afkrydsningsboksen ikke dækker spidsen af den første negl (fx ved Lang) */
.pl-valg-ikon .negl-mix {
  padding-block-start: 22px;
}

.pl-valg-ikon .negl-mix .negl-foto {
  inline-size: 24px;
  block-size: 80px;
  aspect-ratio: auto;
}

/* I galleriets filter: de tre negle fylder feltets bredde */
.chip-mini .chip-mini-visual .negl-mix {
  inline-size: 100%;
  block-size: 100%;
}

.chip-mini .chip-mini-visual .negl-mix .negl-foto {
  inline-size: 33.333%;
  block-size: auto;
  aspect-ratio: 1 / 3;
  object-fit: cover;
}

.pl-til-navn .pl-tid {
  display: block;
}

.pl-antal-select {
  padding: 4px 6px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
}

/* Tal, der fører over det fælles loft (fx 10 negle i alt): mild gullig baggrund — de kan stadig vælges */
.pl-antal-select option.pl-over-graense {
  background-color: #fff3bf;
}

/* Browsere, der kan tegne listen selv (Chrome og Edge — også på Android), viser den i siden,
   så den gullige baggrund også ses på mobilen. Andre browsere bruger deres egen liste. */
@supports (appearance: base-select) {
  .pl-antal-select,
  .pl-antal-select::picker(select) {
    appearance: base-select;
  }

  .pl-antal-select {
    min-inline-size: 64px;
    min-block-size: 36px;
  }

  .pl-antal-select::picker(select) {
    max-block-size: min(50vh, 360px);
    padding: 4px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  .pl-antal-select option {
    min-block-size: 36px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
  }

  .pl-antal-select option:hover,
  .pl-antal-select option:focus-visible {
    background-color: var(--color-border);
  }

  .pl-antal-select option.pl-over-graense:hover,
  .pl-antal-select option.pl-over-graense:focus-visible {
    background-color: #ffe98a;
  }

  .pl-antal-select option:checked {
    font-weight: 700;
  }
}

.pl-antal .pl-pris {
  font-size: 0.8rem;
  font-weight: 600;
}

/* En antal-boks, der blev trukket fra, fordi der blev valgt flere end loftet: fast rød ramme om selve boksen */
.pl-antal-select.pl-trukket-fra {
  border-color: #e03131;
  box-shadow: 0 0 0 2px #e03131;
}

/* Naturel er resten af neglene ved "Brug flere designs": antallet står fast (kan ikke vælges) */
.pl-antal-fast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-inline-size: 64px;
  min-block-size: 36px;
  padding: 4px 6px;
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  font-weight: 700;
}

.pl-hint {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* De gule skilte: mild gul baggrund og et lille informationsskilt foran teksten */
.pl-mangler {
  position: relative;
  margin: 8px 0 0;
  padding: 6px 8px 6px 30px;
  border: 1px solid #ffe066;
  border-radius: 8px;
  background: #fff9db;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Informationsskiltet foran teksten i de gule skilte (prislisten, kurven, tidsvalget og kalenderens demo-besked),
   midt på første linje */
.pl-mangler::before,
.tv-mangler::before,
.bk-demo::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: 7px;
  inline-size: 16px;
  block-size: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23f08c00'/%3E%3Ccircle cx='10' cy='5.6' r='1.5' fill='%23fff'/%3E%3Crect x='8.7' y='8.3' width='2.6' height='7.5' rx='1.3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Den understregede del af de gule skilte, fx "Vælg længde og design" — et tryk fører hen til valget */
.pl-mangler-link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* I de gule infoskilte: de manglende valg (fx "længde" og "design") som små grønne knapper midt i teksten — med
   samme skrift som resten af teksten (størrelse, farve, ikke fed eller understreget) */
.pl-mangler .pl-mangler-link {
  display: inline-block;
  margin-block: 1px;
  padding: 0 8px;
  border: 1.5px solid #2f9e44;
  border-radius: 999px;
  background: #d3f0da;
  line-height: 1.3;
  text-decoration: none;
}

.pl-mangler .pl-mangler-link:hover {
  background: #bde7c8;
}

/* Kurven: samme kvittering som i Book nemt */
.pl-kurv {
  scroll-margin-block-start: 112px; /* "Se og bestil" ruller kurven frem under sidehovedet */
  padding: 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pl-kurv h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  text-align: center;
}

/* Kurven med uret foran "Din tidsbestilling" — sort som i menuen, og med samme grønne cirkel med antallet af valgte
   procedurer (js/header.js visKurvAntal) */
.kurv-med-antal {
  position: relative;
  display: inline-flex;
  flex: none;
  padding: 5px 12px 0 0;
  color: #111111;
}

.kurv-med-antal .kurv-ikon {
  display: block;
  inline-size: 28px;
  block-size: 28px;
}

.pl-kurv .kvittering {
  margin-block-start: 8px;
}

/* Det gule infoskilt i kvitteringen står over kropsdelens overskrift (user): luft under det, ikke over */
.kvittering-gruppe > .pl-mangler {
  margin-block: 2px 6px;
}

/* Med kropsdelens navn (kurven): øverst "Manicure" med informationsskiltet foran — teksten nedenunder i hele bredden */
.pl-mangler--navn {
  padding-inline-start: 8px;
}

.pl-mangler--navn::before {
  content: none;
}

.pl-mangler-titel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 2px;
  font-weight: 700;
}

.pl-mangler-titel::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23f08c00'/%3E%3Ccircle cx='10' cy='5.6' r='1.5' fill='%23fff'/%3E%3Crect x='8.7' y='8.3' width='2.6' height='7.5' rx='1.3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pl-kurv-tom {
  margin: 8px 0 0;
  color: var(--color-muted);
  text-align: center;
}

/* Krydset i de røde "Ryd alle valg"-knapper (kurven og bjælken forneden) */
.ryd-kryds {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
}

/* "Ryd alle valg" i kurven: aflang rød knap med kryds og hvid skrift (som "Ryd Valg" i bjælken forneden) */
.pl-ryd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  min-block-size: 36px;
  margin-block-start: 8px;
  padding: 4px 20px 4px 16px;
  border: none;
  border-radius: 999px;
  background: #e03131;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.pl-ryd:hover {
  background: #c92a2a;
}

.knap:disabled,
.knap.pl-deaktiveret {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Den tid, kunden har valgt under "Ledige tider": "Valgt starttid: lørdag 24. oktober kl. 09:00. Ledig 1 t. 0 min."
   Den står fast øverst lige under sidehovedet, mens kunden ruller og vælger (sticky) — resten af siden regner med dens
   højde (js/prisliste.js skaermTop, --pl-valgt-tid-hoejde). */
.pl-valgt-tid {
  position: sticky;
  inset-block-start: var(--pl-header-hoejde, 116px);
  z-index: 16; /* over prislisten og prisboksen, under sidehovedet */
  /* Teksten til venstre, knapperne til højre (så boksen er lav, også på en telefon) — advarslen under begge */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 2px solid #2f9e44;
  border-radius: var(--radius);
  background: #f1faf3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  scroll-margin-block-start: 120px;
}

.pl-valgt-tid[hidden] {
  display: none;
}

.pl-valgt-tid-tekst {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.pl-valgt-tid-tekst span {
  color: var(--color-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Med den faste boks øverst: det, der rulles frem (fx med tastaturet), lægges under sidehovedet og boksen — kurvens egen
   margen for sidehovedet er så ikke nødvendig */
html:has(#pl-valgt-tid:not([hidden])) {
  scroll-padding-block-start: calc(var(--pl-header-hoejde, 116px) + var(--pl-valgt-tid-hoejde, 0px));
}

html:has(#pl-valgt-tid:not([hidden])) .pl-kurv {
  scroll-margin-block-start: 8px;
}

/* Forslag til de nærmeste ledige starttider (før og efter den valgte), hvor der er plads til en grålagt behandling:
   knapper, der skifter starttiden (js/prisliste.js forslagHtml). De to knapper står samlet (.pl-forslag-knapper): er
   der ikke plads til begge efter overskriften, kommer de begge på linjen under. */
.pl-forslag-raekke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-block-start: 6px;
}

.pl-forslag-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-inline-size: 0;
}

/* "Vælg et andet tidspunkt" ved "Match med manicure": på en linje for sig under forslagene, til venstre */
.byg-match .pl-anden-tid {
  display: flex;
  inline-size: fit-content;
  margin-block-start: 6px;
}

.pl-kurv-knapper .pl-forslag-raekke,
.vb-knapper .pl-forslag-raekke {
  flex-basis: 100%;
  margin: 0;
}

/* I en procedurerække: en linje for sig under teksten og prisen — fra teksten og helt ud til højre kant, så forslagene
   står ved siden af hinanden, også når prisen og tiden til højre er brede (fx Refill) */
.pl-forslag-linje {
  grid-column: 2 / -1;
}

.pl-forslag-linje .pl-forslag-raekke {
  margin: 0;
}

/* Telefon: linjen starter helt ude til venstre (under markeringen), så de to tider kan stå ved siden af hinanden */
@media (max-width: 600px) {
  .pl-forslag-linje {
    grid-column: 1 / -1;
  }
}

.pl-forslag-titel {
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.pl-forslag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: 32px;
  padding: 3px 10px;
  border: 2px solid #2f9e44;
  border-radius: 999px;
  background: var(--color-surface);
  color: #1e6b31;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.pl-forslag:hover {
  background: #eaf7ee;
}

.pl-forslag .pl-kurv-ikon {
  inline-size: 16px;
  block-size: 16px;
}

/* Meget smalle skærme (fx 320 px) — og i en boks i spørgsmålsvinduet på en telefon (smallere): knapperne en anelse
   mindre, så de to tider stadig står ved siden af hinanden */
@media (max-width: 350px) {
  .pl-forslag {
    gap: 3px;
    padding-inline: 6px;
    font-size: 0.72rem;
  }

  .pl-forslag .pl-kurv-ikon {
    inline-size: 14px;
    block-size: 14px;
  }
}

@media (max-width: 440px) {
  .tv-boks .pl-forslag {
    gap: 3px;
    padding-inline: 6px;
    font-size: 0.72rem;
  }

  .tv-boks .pl-forslag .pl-kurv-ikon {
    inline-size: 14px;
    block-size: 14px;
  }
}

.pl-valgt-tid-knapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Skift tid": lysegrøn (user) som "Forudbestem pris" — "Fravælg starttid": hvid med grå kant */
.knap-lille.pl-valgt-tid-skift {
  border: 2px solid #8fd19e;
  background: #d3f0da;
  color: #1e6b31;
}

.knap-lille.pl-valgt-tid-skift:hover {
  background: #bfe8c9;
}

.knap-lille.pl-valgt-tid-fjern {
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.knap-lille.pl-valgt-tid-fjern:hover {
  background: #f3eeec;
}

.pl-valgt-tid-advarsel {
  grid-column: 1 / -1;
}

/* Telefon: lidt mindre tekst og knapper i den faste boks — knapperne på en linje for sig under teksten (til højre), så
   teksten ikke bliver klemt sammen */
@media (max-width: 600px) {
  .pl-valgt-tid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-valgt-tid-tekst {
    font-size: 0.8rem;
  }

  .pl-valgt-tid-knapper {
    justify-content: flex-end;
    gap: 6px;
  }

  .pl-valgt-tid-knapper .knap-lille {
    min-block-size: 32px;
    padding: 3px 10px;
    font-size: 0.8rem;
  }
}

/* Tidsvalg ved bestilling: en boks pr. tid med en markeringscirkel foran */
.tv-dialog {
  inline-size: min(560px, calc(100vw - 24px));
  max-block-size: calc(100dvh - 24px);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.tv-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.tv-indre {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
}

.tv-indre h2 {
  margin: 0;
  font-size: 1.15rem;
}

/* Overskriften og lukkekrydset øverst til højre (som i kalenderen) */
.tv-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.tv-spoergsmaal {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
  min-inline-size: 0;
}

.tv-spoergsmaal legend {
  margin-block-end: 8px;
  padding: 0;
  font-weight: 700;
}

.tv-boks {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  cursor: pointer;
}

.tv-boks:hover {
  border-color: var(--color-primary);
}

.tv-boks--valgt,
.tv-boks--valgt:hover {
  border-color: #2f9e44;
  background: #f1faf3;
}

.tv-cirkel {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  accent-color: #2f9e44;
  cursor: pointer;
}

.tv-boks-indhold {
  display: grid;
  flex: 1;
  gap: 6px;
  min-inline-size: 0;
}

.tv-boks-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  font-weight: 700;
}

.tv-boks-tid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* "Bestil 400 - 500 kr." øverst til højre i boksen: vælger tiden og går videre til bestilling. Er der ikke
   plads ved siden af tiden (smal mobil), står den til højre lige under. */
.knap-lille.tv-boks-bestil {
  margin-inline-start: auto;
  min-block-size: 40px;
  padding-inline: 14px;
  font-size: 0.9rem;
}

.tv-boks-hint {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.tv-sum {
  margin: 0;
}

.tv-mangler {
  position: relative;
  margin: 0;
  padding: 6px 8px 6px 30px;
  border: 1px solid #ffe066;
  border-radius: 8px;
  background: #fff9db;
  font-size: 0.82rem;
  line-height: 1.4;
}

.tv-knapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Bestillingsvinduet (js/prisliste.js aabnBestilVindue): én menu ad gangen med "Tilbage", "Spring over" og "Frem" —
   til sidst det valgte med "Bestil mere" og "Bestil tid". Knapperne står fast forneden, mens menuen ruller. På
   telefonen næsten hele skærmens bredde, så der er plads til 4 skilte på række. */
.bv-dialog {
  inline-size: min(560px, calc(100vw - 12px));
  max-inline-size: calc(100vw - 12px); /* browserens egen dialog-stil giver ellers 2em + 6px mindre */
  scroll-padding-block-end: 90px; /* det, der får fokus, rulles frem over knapperne forneden */
}

.bv-indre {
  padding-inline: 12px;
}

.bv-titel {
  display: grid;
  gap: 2px;
}

.bv-trin {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.bv-trin:focus {
  outline: none;
}

/* I vinduet står ét valg ad gangen: gruppen har ingen ramme (user 2026-10-31: "Fjern den gule ramme") — hverken gul
   (mangler), grøn eller den blinkende — og overskriften har den almindelige farve */
.bv-indhold .pl-gruppe {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  animation: none;
}

.bv-indhold .pl-gruppe .pl-gruppe-titel {
  color: var(--color-text);
}

.bv-kvittering {
  margin-block-end: 8px;
}

.bv-pris {
  margin: 0;
  font-size: 0.95rem;
}

.bv-pris .pl-pris-foer-linje {
  margin-inline-end: 6px;
  font-size: 0.85rem;
}

.bv-knapper {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 -12px -18px;
  padding: 10px 12px 14px;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}

.bv-hoejre {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-inline-start: auto;
}

.bv-knapper .knap-lille {
  min-block-size: 42px;
  padding-inline: 18px;
  font-size: 0.9rem;
}

/* Smal telefon: lidt mindre knapper, så fx "Tilbage", "Bestil mere" og "Book 2 t. 0 min." står på én linje */
@media (max-width: 400px) {
  .bv-knapper .knap-lille {
    padding-inline: 12px;
    font-size: 0.85rem;
  }
}

.bv-knapper .bv-tilbage,
.bv-knapper .bv-spring,
.bv-knapper .bv-mere {
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.bv-knapper .bv-tilbage:hover,
.bv-knapper .bv-spring:hover,
.bv-knapper .bv-mere:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.bv-knapper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bv-knapper .knap-lille {
  gap: 6px;
}

/* Spørgsmålsvinduet (js/prisliste.js aabnSpoergsmaal): et valg, der bestemmer tiden, før proceduren kommer i kurven —
   en boks pr. tid (som tidsvalget ved bestilling) med muligheden (fx "Med alm. lak"), tiden og prisen */
.sp-boks-navn {
  font-weight: 700;
}

.sp-boks-detalje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.sp-hint {
  margin: 0 0 2px;
}

/* Små skilte i boksene (js/prisliste.js spSkilteHtml): mulighederne med samme tid, fx designs — foto og navn, mindre
   end skiltene i prislisten, så de fleste står på én eller to linjer */
.sp-skilte {
  gap: 4px;
}

.pl-valg--ikon.sp-skilt {
  inline-size: 60px;
  padding: 3px 2px 4px;
  font-size: 0.7rem;
}

.sp-skilt .pl-valg-ikon .negl-foto {
  inline-size: 32px;
  block-size: 68px;
}

/* ---------- Online booking (js/booking.js): månedsoversigt med ledige tider ---------- */
.bk-dialog {
  inline-size: min(720px, calc(100vw - 24px));
  max-block-size: calc(100dvh - 24px);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.bk-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* På mobilen fylder bookingen hele skærmen */
@media (max-width: 600px) {
  .bk-dialog {
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

.bk-indre {
  display: grid;
  gap: 10px;
  padding: 14px 12px 20px;
}

/* Måneden (js/booking.js): swipe mod venstre / højre skifter måned — måneden følger fingeren, og den nye måned
   glider ind fra siden. Vinduet må ikke kunne rulles til siden, mens måneden står skævt. */
.bk-dialog {
  overflow-x: hidden;
}

.bk-maaned {
  display: grid;
  gap: 10px;
}

@keyframes bk-maaned-ind-fra-hoejre {
  from {
    transform: translateX(60%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes bk-maaned-ind-fra-venstre {
  from {
    transform: translateX(-60%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.bk-maaned.bk-ind-fra-hoejre {
  animation: bk-maaned-ind-fra-hoejre 0.24s ease-out;
}

.bk-maaned.bk-ind-fra-venstre {
  animation: bk-maaned-ind-fra-venstre 0.24s ease-out;
}

.bk-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bk-top h2 {
  flex: 1;
  margin: 0;
  font-size: 1.15rem;
}

/* "‹ Tilbage" øverst ved "Dine oplysninger": tilbage til kalenderen (som "Skift tid") */
.bk-tilbage {
  flex: none;
  min-block-size: 40px;
  padding: 0 14px 0 10px;
  border: none;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.bk-tilbage:hover {
  background: color-mix(in srgb, var(--color-border) 80%, var(--color-text));
}

.bk-luk,
.tv-luk {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.bk-behandling,
.bk-note {
  margin: 0;
  font-size: 0.85rem;
}

/* "Din tidsbestilling: … ⌄" — et tryk folder kvitteringen ud under linjen (js/booking.js bkBehandlingHtml) */
.bk-behandling-knap {
  display: flex;
  align-items: center;
  gap: 6px;
  inline-size: 100%;
  padding: 4px 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: start;
  cursor: pointer;
}

.bk-behandling-knap svg {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  transition: transform 150ms ease;
}

.bk-behandling-knap[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .bk-behandling-knap:hover > span {
    text-decoration: underline;
  }
}

/* (Kvitteringen har sin egen ramme, som i kurven) */
.bk-kvittering-boks {
  font-size: 0.85rem;
}

.bk-kvittering-boks[hidden] {
  display: none;
}

.bk-kvittering {
  margin: 0;
}

.bk-note {
  color: var(--color-muted);
}

/* "Dine ønsker og billeder er sendt til os (mail nr. …)" */
.bk-note.bk-mail-ok {
  color: #1e6b31;
  font-weight: 600;
}

/* Instruksen lige over kalenderen: "Tryk på ønsket dag og vælg tid:" */
.bk-instruks {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.bk-demo,
.bk-fejl {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.82rem;
}

.bk-demo {
  position: relative;
  padding-inline-start: 30px;
  border: 1px solid #ffe066;
  background: #fff9db;
  line-height: 1.4;
}

.bk-fejl {
  border: 1px solid #e03131;
  background: #fff5f5;
  color: #c92a2a;
}

.bk-maaned-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bk-maaned-top h3 {
  margin: 0;
  font-size: 1.05rem;
}

.bk-pil {
  inline-size: 44px;
  block-size: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.bk-pil:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bk-ugedage,
.bk-gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.bk-ugedage span {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

/* En dag: datoen øverst og de første ledige tider under (som i Google Kalender). De tre uger fylder vinduets højde
   (--bk-uge-hoejde, js/booking.js bkTilpasUger) — dog mindst 92px. */
.bk-dag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-inline-size: 0;
  min-block-size: var(--bk-uge-hoejde, 92px);
  padding: 4px 2px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: center;
}

.bk-dag--fri {
  border-color: #b2dfbd;
  cursor: pointer;
}

.bk-dag--fri:hover {
  border-color: #2f9e44;
}

.bk-dag--valgt {
  border-color: #2f9e44;
  box-shadow: 0 0 0 2px #2f9e44;
}

.bk-dag--ingen {
  background: var(--color-bg);
  color: var(--color-muted);
}

.bk-dag--fortid {
  opacity: 0.45;
}

.bk-dato {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

/* De tomme felter foran den 1. (ugedagene passer — js/booking.js bkVisteDage) */
.bk-dag--tom {
  border-color: transparent;
  background: none;
}

/* Dagens striber (som begivenheder i Google Kalender): ledig grøn, optaget lyserød; lukket står tomt. Ved en
   booking er ledig tid, hvor behandlingen ikke kan nå at ligge, grå. */
:root {
  --bk-ledig: #51cf66;
  --bk-optaget: #f2b8c6;
  --bk-kort: #ced4da;
}

/* Dagens stribe i hele dagens bredde: én farveovergang med skarpe skift (sat i booking.js) — ingen
   skillelinjer mellem ledig og optaget. Tidsskalaens klokkeslæt (09:00 … 21:00) står inde i striben. */
.bk-bjaelke {
  position: relative;
  display: block;
  flex: 1;
  inline-size: 100%;
  min-block-size: 70px;
  /* Plads til 09:00 og 21:00, der rager halvt ud over stribens kanter */
  margin-block: 5px;
  border-radius: 3px;
  outline: 1px solid var(--color-border);
  color: rgba(0, 0, 0, 0.62);
  font-size: 0.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Hvert klokkeslæt midt på sin plads, så tallene står med jævne mellemrum (09:00 og 21:00 på kanterne) */
.bk-skala-tid {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* 09:00 og 21:00 rager halvt ud over striben: dagens start-/slutfarve bag tallet (sat i booking.js),
   kun lige om tallet — ikke i hele bredden */
.bk-skala-tid--kant {
  padding: 1px 3px;
  border-radius: 3px;
}

/* Meget smalle telefoner: lidt mindre klokkeslæt */
@media (max-width: 359px) {
  .bk-bjaelke {
    font-size: 0.55rem;
  }
}

.bk-felt--ledig {
  background: var(--bk-ledig);
}

.bk-felt--optaget {
  background: var(--bk-optaget);
}

.bk-felt--kort {
  background: var(--bk-kort);
}

/* Behandlingens ramme på dagens stribe (js/booking.js bkRammeHtml): fra starttiden og behandlingens længde ned,
   med starttiden i et lille skilt ved rammens top. Musen over en dag (svæv) og den valgte dag. */
.bk-ramme {
  position: absolute;
  z-index: 2;
  inset-inline: -2px;
  border: 2px solid #1b5e20;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Den markerede tids ramme på den valgte dags stribe kan trækkes op og ned med fingeren (js/booking.js
   bkLodretTraek) — med et større felt at tage fat i end selve rammen; et strøg andre steder på striben ruller. Med
   mus (data-bk-input="mus") følger rammen pilen, og et klik på striben bestiller, så den trækkes ikke. */
.bk-dialog[data-bk-input="finger"] .bk-ramme--valgt {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.bk-ramme--valgt::before {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

/* Med finger: "Bestil" og den markerede tid ved siden af rammen (på dagens stribe og den forstørrede dagsstolpe). Et
   tryk bestiller tiden, og knappen følger med, når rammen trækkes (også når der tages fat i knappen). På dagens
   stribe står klokkeslættet så kun i knappen; på den forstørrede dagsstolpe står tidsrummet (fx 10:30–12:00) også i
   rammen. */
.bk-ramme-bestil {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(100% + 6px);
  z-index: 3;
  display: none;
  border: 1.5px solid #fff;
  background: #1b5e20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

/* Den lille pil fra knappen hen mod rammen */
.bk-ramme-bestil::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  border: 5px solid transparent;
  border-inline-start-color: #1b5e20;
  transform: translateY(-50%);
}

/* Månedskalenderen: "Bestil 15:00" på én linje i stor skrift, vandret til venstre for rammen — så den kun dækker et
   smalt bånd hen over de to dage til venstre (resten af dem kan stadig trykkes på), og så en højre tommelfinger på
   håndtaget ikke dækker den. Mandag–onsdag (ikke plads nok til venstre på en smal telefon): til højre for rammen. */
.bk-ramme--valgt > .bk-ramme-bestil {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.15;
  transform: translateY(-50%);
}

.bk-gitter > :nth-child(7n + 1) .bk-ramme--valgt > .bk-ramme-bestil,
.bk-gitter > :nth-child(7n + 2) .bk-ramme--valgt > .bk-ramme-bestil,
.bk-gitter > :nth-child(7n + 3) .bk-ramme--valgt > .bk-ramme-bestil {
  inset-inline-start: calc(100% + 6px);
  inset-inline-end: auto;
}

.bk-gitter > :nth-child(7n + 1) .bk-ramme--valgt > .bk-ramme-bestil::after,
.bk-gitter > :nth-child(7n + 2) .bk-ramme--valgt > .bk-ramme-bestil::after,
.bk-gitter > :nth-child(7n + 3) .bk-ramme--valgt > .bk-ramme-bestil::after {
  inset-inline-start: auto;
  inset-inline-end: 100%;
  border-inline-start-color: transparent;
  border-inline-end-color: #1b5e20;
}

/* Den forstørrede dag: "Bestil" og tiden på to linjer */
.bk-zoom-ramme .bk-ramme-bestil-tid {
  display: block;
}

.bk-dialog[data-bk-input="finger"] .bk-ramme-bestil {
  display: block;
}

.bk-dialog[data-bk-input="finger"] .bk-ramme--valgt > .bk-ramme-tid {
  display: none;
}

/* Med finger: håndtaget under rammen — en stang med en knop. Fingeren tager fat i knoppen og trækker rammen
   (js/booking.js bkLodretTraek), så den ikke dækker rammen og "Bestil". Et tryk på håndtaget bestiller ikke. */
.bk-ramme-haandtag {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  z-index: 3;
  display: none;
  inline-size: 3px;
  block-size: 30px;
  background: #1b5e20;
  transform: translateX(-50%);
}

.bk-dialog[data-bk-input="finger"] .bk-ramme-haandtag {
  display: block;
}

.bk-ramme-knop {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1b5e20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: grab;
  transform: translateX(-50%);
}

/* Et højere felt at tage fat i end selve knoppen (ikke bredere). Et tryk uden træk i feltet rundt om knoppen gælder
   det, der ligger under — og et tryk på knoppen over dagens lup åbner lupen (js/booking.js bkHaandterKlik) */
.bk-ramme-knop::before {
  content: "";
  position: absolute;
  inset: -10px -2px;
}

.bk-ramme-knop svg {
  inline-size: 15px;
  block-size: 20px;
}

.bk-zoom-ramme .bk-ramme-haandtag {
  block-size: 46px;
}

.bk-zoom-ramme .bk-ramme-knop {
  inline-size: 52px;
  block-size: 52px;
}

.bk-zoom-ramme .bk-ramme-knop svg {
  inline-size: 19px;
  block-size: 26px;
}

.bk-ramme-tid {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  padding: 1px 4px;
  border-radius: 4px;
  background: #1b5e20;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, -60%);
}

/* Peger musen på den valgte dag, står kun musens ramme (ikke to rammer med hver sit klokkeslæt) */
.bk-bjaelke:has(.bk-ramme--svaev) .bk-ramme--valgt {
  display: none;
}

/* Den valgte tid blandt de ledige tider (samme som rammen) */
.bk-tid.bk-tid--ramme {
  background: #2f9e44;
  color: #fff;
}

.bk-tid.bk-tid--ramme:hover {
  background: #24803a;
}

/* "Bestil kl. …" på den forstørrede dag */
.bk-vaelg-ramme {
  inline-size: 100%;
  margin-block: 4px 10px;
}

/* Forklaringen på farverne over kalenderen */
.bk-forklaring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.bk-forklaring > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bk-prik {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
}

.bk-prik--lukket {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.bk-gitter--henter {
  opacity: 0.4;
}

/* Mens de ledige tider hentes: en tydelig besked med et ur, der drejer, så man ved, at der sker noget */
.bk-henter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--color-primary);
  border-radius: 10px;
  background: var(--color-bg);
  font-size: 0.9rem;
  font-weight: 600;
}

.bk-spinner {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: bk-spinner 0.9s linear infinite;
}

@keyframes bk-spinner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-spinner {
    animation-duration: 2.5s;
  }
}

/* Den aktiverede dags ledige tider (js/booking.js bkArkHtml): et felt, der glider op fra bunden af vinduet og står
   fast forneden, mens kalenderen rulles bag det (sticky). Det dækker kun den nederste del af vinduet, så den valgte
   dag kan stå synlig over det (bkVisValgtDag). Pilen øverst lukker det — eller det swipes ned (bkOpsaetArk). */
.bk-ark {
  position: sticky;
  inset-block-end: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-block-size: min(42dvh, 340px);
  /* Plads over feltet til rammens håndtag på den nederste uge — og ned over vinduets kant forneden */
  margin-block: 40px -20px;
  margin-inline: -12px;
  padding: 4px 12px 14px;
  border-radius: 18px 18px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}

@keyframes bk-ark-op {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* Glider op kun på mobilen, hvor bookingen fylder hele skærmen (js/booking.js bkArkGlider sætter klassen) */
.bk-ark--ind {
  animation: bk-ark-op 0.28s ease-out;
}

/* Feltets top (gribestreg, overskrift og pil ned) kan trækkes ned uden at vinduet ruller */
.bk-ark-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding-block-end: 8px;
  touch-action: none;
}

.bk-ark-greb {
  grid-column: 1 / -1;
  justify-self: center;
  inline-size: 44px;
  block-size: 5px;
  margin-block: 2px 4px;
  border-radius: 3px;
  background: #cfc6c3;
}

.bk-ark-top h3 {
  margin: 0;
  font-size: 0.95rem;
}

.bk-ark-ned {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  cursor: pointer;
}

.bk-ark-ned svg {
  inline-size: 22px;
  block-size: 22px;
}

.bk-ark-liste {
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* En dag med ledige tider (js/booking.js bkKalenderHtml) i tre felter: øverst datoen (aktiverer datoen), i midten
   striben (behandlingens ramme, når musen peger; et tryk aktiverer dagen ved den tid) og nederst lupen (dagen
   forstørret). Datoens og lupens felt er hver sin knap i hele dagens bredde — peger musen på et af dem, står der en
   ramme om feltet (og ikke behandlingens ramme på striben). */
.bk-dag--fri .bk-bjaelke {
  cursor: pointer;
}

.bk-dag-dato,
.bk-dag-lup {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  margin: 0;
  padding: 2px 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Datoen er understreget, så man kan se, at den kan trykkes på — på den aktiverede dag grøn */
.bk-dag-dato .bk-dato {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.bk-dag--valgt .bk-dag-dato {
  color: #2b7a3b;
}

.bk-dag-lup {
  min-block-size: 24px;
  color: #2b7a3b;
  cursor: zoom-in;
}

.bk-dag-lup svg {
  inline-size: 18px;
  block-size: 18px;
}

.bk-dag-dato:hover,
.bk-dag-lup:hover,
.bk-dag-dato:focus-visible,
.bk-dag-lup:focus-visible {
  outline: 2px solid #2f9e44;
  outline-offset: -1px;
  background: #f1faf3;
}

/* Rammen og "Bestil kl. …" står skjult, til der er valgt en tid (js/booking.js) */
.bk-dagslinje-ramme[hidden],
.bk-zoom-ramme[hidden],
.bk-vaelg-ramme[hidden] {
  display: none;
}

/* Dagen forstørret (js/booking.js bkZoomHtml): klokkeslæt · høj dagsstolpe med behandlingens ramme (et tryk på
   stolpen vælger den nærmeste ledige starttid) · "Bestil kl. …" og de ledige starttider som de samme knapper som
   under kalenderen */
.bk-zoom {
  scroll-margin-block-start: 8px;
}

.bk-zoom-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bk-zoom-top h3 {
  margin: 0;
  font-size: 1.05rem;
}

.bk-zoom-dag {
  display: grid;
  grid-template-columns: 40px 64px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-block: 16px 14px;
}

.bk-zoom-skala,
.bk-zoom-bjaelke {
  block-size: min(68vh, 640px);
}

.bk-zoom-skala {
  position: relative;
}

.bk-zoom-tider {
  display: grid;
  gap: 8px;
}

.bk-zoom-tider .bk-vaelg-ramme {
  margin: 0;
}

.bk-zoom-skala span {
  position: absolute;
  inset-inline-end: 0;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

.bk-zoom-bjaelke {
  position: relative;
  border-radius: 6px;
  outline: 1px solid var(--color-border);
}

.bk-zoom-bjaelke[data-bk-zoom-bjaelke] {
  cursor: pointer;
}

/* Rammen på den forstørrede dagsstolpe kan trækkes op og ned (js/booking.js bkLodretTraek) */
.bk-zoom-ramme {
  position: absolute;
  inset-inline: -3px;
  border: 3px solid #1b5e20;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: grab;
  touch-action: none;
}

.bk-zoom-ramme .bk-ramme-tid {
  inset-block-start: 4px;
  font-size: 0.75rem;
  transform: translateX(-50%);
}

/* På den forstørrede dag står "Bestil" til venstre over klokkeslættene — så smal, at den kan være dér */
.bk-zoom-ramme .bk-ramme-bestil {
  inset-inline-end: calc(100% + 5px);
  padding: 4px;
  border-radius: 7px;
  font-size: 0.9rem;
  line-height: 1.15;
  transform: translateY(-50%);
}

.bk-tidsknapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.bk-tid {
  min-block-size: 44px;
  border: 1.5px solid #2f9e44;
  border-radius: 10px;
  background: var(--color-surface);
  color: #2b7a3b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bk-tid:hover {
  background: #f1faf3;
}

.bk-valgt-tid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #2f9e44;
  border-radius: 12px;
  background: #f1faf3;
}

.bk-form {
  display: grid;
  gap: 10px;
}

.bk-form label {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.bk-form input {
  min-block-size: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.bk-faerdig {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.bk-faerdig p {
  margin: 0;
}

/* "Ledige tider": de ledige tidsrum pr. dag */
.bk-tidsrum {
  margin: 10px 0 6px;
  color: #2b7a3b;
  font-size: 0.85rem;
  font-weight: 700;
}

.bk-faerdig-titel {
  color: #2f9e44;
  font-size: 1.15rem;
  font-weight: 700;
}

/* "Din bestilling" på kvitteringen efter en booking: præcis det, kunden har bestilt */
.bk-bestilling {
  justify-self: stretch;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.bk-bestilling-titel {
  margin: 0 0 4px;
  font-weight: 700;
}

.bk-bestilling ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.bk-bestilling-gruppe {
  margin-block-start: 6px;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.bk-bestilling-punkt {
  padding-inline-start: 10px;
}

.bk-bestilling-ialt {
  margin-block-start: 6px;
  font-weight: 700;
}

/* Fast bjælke forneden: knapper til de fire afsnit (altid) og — på mobil — summen af kurven, indtil
   kurven selv kan ses. Siden får luft forneden svarende til bjælkens højde (js/prisliste.js). */
.pl-bjaelke {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -4px 12px rgba(20, 14, 13, 0.08);
}

/* Pilen over bjælken (js/prisliste.js opdaterPil): let gul og stille, fører hen til det næste, der kan vælges, og der
   står det i én sætning — fx "Vælg længde for Manicure Refill og se nøjagtig pris". Pilen viser retningen. */
.pl-pil {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  /* max-content: knappen står fra skærmens midte (left: 50%) og ville ellers kun få den halve bredde. */
  inline-size: max-content;
  max-inline-size: calc(100vw - 32px);
  min-block-size: 44px;
  padding: 6px 12px 6px 16px;
  border: 1.5px solid #fcc419;
  border-radius: 14px; /* teksten kan brydes over to linjer */
  background: #fff3bf;
  color: #2b1d17;
  box-shadow: 0 4px 14px rgba(20, 14, 13, 0.2);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transform: translateX(-50%);
}

.pl-pil[hidden] {
  display: none;
}

.pl-pil-tekst {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
}

.pl-pil svg {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  color: #b07d00;
}

.pl-pil--op svg {
  transform: rotate(180deg);
}

.pl-bjaelke-sum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-inline-size: 720px;
  margin-inline: auto;
  padding: 8px 12px 2px;
  touch-action: none; /* rækken kan trækkes op (arket med kvitteringen) — siden ruller ikke med */
}

/* Lille håndtag øverst i midten: rækken kan trækkes op */
.pl-bjaelke-sum::before {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 50%;
  inline-size: 36px;
  block-size: 4px;
  border-radius: 2px;
  background: #cfc3bf;
  transform: translateX(-50%);
}

.pl-bjaelke-sum[hidden] {
  display: none;
}

/* Summen og "Bestil": en grøn ramme fortsætter fra knappen rundt om summen med den samme runde ende og fylder
   hele pladsen mellem "Ryd Valg" og "Bestil". Knappen dækker rammens kant foroven, forneden og til højre, så de
   ser ud som ét. */
.pl-bjaelke-ramme {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-inline-size: 0;
  border: 2px solid #2f9e44;
  border-radius: 999px;
  background: #eaf7ee; /* blid grøn bag teksten */
}

/* En pil på hver side af summen med "Se" under: her kan man trække op (eller trykke) og se kvitteringen. De står stille
   og er tydelige (user 2026-10-31: ikke vippe op og ned, men mere synlige). I arkets overskrift (ses, mens arket
   trækkes — og på Prislisten på en computer, når kvitteringen er oppe) peger pilene ned, og "Se" er væk (pladsen
   bevares, så intet flytter sig). */
.pl-bjaelke-pil-boks {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.pl-bjaelke-pil {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  color: #1f7a34;
}

.pl-bjaelke-se {
  color: #1f6b30;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.pl-ark-hoved .pl-bjaelke-pil {
  rotate: 180deg;
}

.pl-ark-hoved .pl-bjaelke-se {
  visibility: hidden;
}

/* Feltet er en knap: tryk (eller træk op) — så kører kvitteringen op som et ark (js/prisliste.js). Pilene står
   yderst, og indkøbskurven med summen står i midten. */
.pl-bjaelke-tekst {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-inline-size: 0;
  margin: 0;
  /* 2px mere til højre end til venstre (rammens kant): summen står midt i det grønne felt */
  padding: 2px 12px 2px 10px;
  border: none;
  border-radius: 999px 0 0 999px;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

/* Indkøbskurven (to linjer høj) og summen: prisen og tiden på hver sin linje */
.pl-bjaelke-indhold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-inline-size: 0;
}

.pl-bjaelke-kurv {
  flex: none;
  inline-size: 2.5em; /* to linjer (line-height 1.25) */
  block-size: 2.5em;
  color: #2f9e44;
}

.pl-bjaelke-sum-tal {
  display: grid;
  justify-items: start;
  text-align: start;
}

.pl-bjaelke-linje span {
  white-space: nowrap;
}

/* Kun til skærmlæsere: "Din tidsbestilling:" foran summen (indkøbskurven står i stedet for teksten) */
/* Tekst kun for skærmlæsere (fx galleriets overskrift) */
.pl-skjult-tekst,
.skjult-tekst {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Uden valg kan der hverken ryddes eller bestilles (summen står på 0 kr. og 0 min.) */
.pl-bjaelke-ryd[aria-disabled="true"],
.pl-bjaelke-bestil[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}


/* "Ryd Valg" i bjælken forneden: aflang rød knap med kryds og hvid skrift til venstre, samme højde som "Bestil" */
.pl-bjaelke-ryd {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  block-size: 44px;
  padding: 0 14px 0 12px;
  border: none;
  border-radius: 999px;
  background: #e03131;
  color: #fff;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
}

.pl-bjaelke-ryd:hover {
  background: #c92a2a;
}

/* "Bestil" i bjælken forneden: så stor skrift, som knappen kan bære */
.knap-lille.pl-bjaelke-bestil {
  min-block-size: 44px;
  margin: -2px -2px -2px 0;
  padding-inline: 26px;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

/* Mobil: kvitteringen som ark, der kører op fra bjælken (js/prisliste.js aabnArk/lukArk). Arket går fra toppen af
   skærmen ned til navigationen (bottom sættes af JS); panelet flyttes med transform. Nede står kun overskriften
   (kopien af summen) lige oven på summen i bjælken; helt oppe (arkAabenY = minus overskriftens højde) er
   overskriften gemt over skærmens top, og panelet er forlænget tilsvarende forneden (bottom sættes af JS i
   placerArk). Det, der er under overskriften, kommer frem nedefra, efterhånden som arket kører op.
   --pl-ark-frem: 0 (nede) … 1 (oppe) — siden bag dæmpes tilsvarende. */
/* Kun selve panelet tager imod tryk — ikke den gennemsigtige del over det (fx mens arket glider ned) */
.pl-ark {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.pl-ark[hidden] {
  display: none;
}

.pl-ark-baggrund {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 13, 0.45);
  opacity: var(--pl-ark-frem, 0);
}

.pl-ark-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: 0 -4px 12px rgba(20, 14, 13, 0.08);
  pointer-events: auto;
  will-change: transform;
}

.pl-ark-panel--glid {
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .pl-ark-panel--glid {
    transition: none;
  }
}

/* Overskriften ser ud som bjælken (samme kant foroven) — den kan trækkes ned igen eller trykkes på */
.pl-ark-hoved {
  flex: none;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
  touch-action: none; /* hele overskriften kan trækkes — også luften ved siden af rækken på brede skærme */
}

/* Håndtaget øverst i arket, når det er oppe: en lille streg midt på — kan trækkes ned eller trykkes på (lukker) */
.pl-ark-greb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  block-size: 22px;
  padding: 0;
  border: none;
  background: var(--color-bg);
  cursor: grab;
  touch-action: none;
}

.pl-ark-greb span {
  inline-size: 40px;
  block-size: 5px;
  border-radius: 3px;
  background: #cfc3bf;
}

.pl-ark-indhold {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px 24px;
}

/* Kvitteringen i arket: samme kort som kurven på computeren */
.pl-ark-indhold .pl-kurv {
  max-inline-size: 480px;
  margin-inline: auto;
}

.pl-ark-indhold .pl-kurv h2:focus {
  outline: none;
}

/* Mens arket er oppe, ruller siden bag det ikke — og pladsen til rullebjælken (på en computer) bliver stående, så siden og
   bjælken forneden ikke hopper til siden */
html.pl-ark-aaben,
html.pl-ark-aaben body {
  overflow: hidden;
}

html.pl-ark-aaben {
  scrollbar-gutter: stable;
}

/* Smalle skærme: lidt smallere "Bestil" og mindre tekst, så teksten fylder færre linjer */
@media (max-width: 479px) {
  .pl-bjaelke-tekst {
    gap: 4px;
    padding-inline: 7px 9px;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .pl-bjaelke-indhold {
    gap: 6px;
  }

  .pl-bjaelke-kurv {
    inline-size: 2.4em; /* to linjer (line-height 1.2) */
    block-size: 2.4em;
  }

  .knap-lille.pl-bjaelke-bestil {
    padding-inline: 18px;
  }
}

/* Navigationen: Manicure, Pedicure, SPA og Vipper & bryn med skilt og status. Farven følger status:
   grå = ikke valgt, lyserød = delvis udfyldt (præciser), grøn = helt udfyldt (eksakt pris). */
/* Mild blå baggrund rundt om knapperne i hele bjælkens bredde — knapperne selv fylder højst 720px i midten */
.pl-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 5px max(4px, calc((100% - 720px) / 2)) max(5px, env(safe-area-inset-bottom));
  background: #e3f2fd;
}

.pl-nav-knap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-inline-size: 0;
  padding: 3px 2px 4px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pl-nav-ikon img,
.pl-nav-ikon svg {
  display: block;
  inline-size: 26px;
  block-size: 26px;
  object-fit: contain;
}

/* Fotoskiltene (de samme som ved afsnittenes overskrifter): fylder feltet med runde hjørner */
.pl-nav-ikon img.pl-nav-foto {
  object-fit: cover;
  border-radius: 6px;
}

/* Vippe-skiltet fylder kun midten af sin tegning — forstørres, så det er lige så stort som de andre */
.pl-nav-knap[data-nav="lash"] .pl-nav-ikon svg {
  transform: scale(1.7);
}

.pl-nav-navn {
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.pl-nav-status {
  color: var(--color-muted);
  font-size: 0.64rem;
}

.pl-nav-pris {
  white-space: nowrap;
}

/* Ikke helt udfyldt (Præciser): let gul baggrund — samme gule som infoskiltene */
.pl-nav-knap--delvis {
  border-color: var(--color-primary);
  background: #fff9db;
}

.pl-nav-knap--delvis .pl-nav-status {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.pl-nav-knap--udfyldt {
  border-color: #2f9e44;
  background: #f1faf3;
}

.pl-nav-knap--udfyldt .pl-nav-status {
  color: #2b7a3b;
  font-weight: 700;
}

/* Afsnit, der står på skærmen lige nu (js/prisliste.js opdaterNavSynlig): fed grøn ramme, der står stille — to
   afsnit på skærmen, to knapper med ramme */
.pl-nav-knap--synlig {
  border-color: #2f9e44;
  box-shadow: 0 0 0 2px #2f9e44;
}

/* Meget smalle telefoner: lidt mindre tekst, så "Vipper & bryn" og priserne kan være i knapperne */
@media (max-width: 359px) {
  .pl-nav-navn {
    font-size: 0.6rem;
  }

  .pl-nav-status {
    font-size: 0.58rem;
  }
}

/* Logoet i bjælken forneden — "Negle Nu" med én gennemgående linje i stedet for sloganet. Ses kun på en liggende
   telefon (se nedenfor). */
.bjaelke-logo {
  display: none;
}

/* ---------- Liggende telefon (lav skærm) ---------- */
/* Logoet øverst forsvinder, så menuen står helt oppe. Forneden bliver knaplinjen lavere: de fire knapper er det halve
   (skiltet til venstre for navn og status) og står til højre i linjen, og i pladsen til venstre står logoet med den
   gennemgående linje. Galleriets overskrift "Se & Book" er kun for skærmlæsere her (ingen tekst i linjen). */
@media (orientation: landscape) and (max-height: 500px) {
  .side-header .logo {
    display: none;
  }

  .pl-nav-linje,
  .se-book {
    display: flex;
    align-items: stretch;
    background: #e3f2fd;
  }

  /* Logoet skubber resten til højre. Er linjen for smal, giver logoet plads først (det bliver mindre, dog ikke under
     117px, så det kan læses) — derefter bliver knapperne smallere. Linjens skilte, tekster og luft er 1,3 gange så store
     som først (0,65 af knapperne på en stående telefon). */
  .bjaelke-logo {
    display: flex;
    flex: 0 1000 auto;
    align-items: center;
    min-inline-size: 117px;
    margin-inline-end: auto;
    padding-inline: 16px 10px;
  }

  .bjaelke-logo img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 36px;
  }

  /* Lige brede knapper (så brede som den bredeste) i én række. Er der ikke plads nok — heller ikke uden logoet — bliver
     de smallere, og status brydes over to linjer. */
  .pl-nav-linje .pl-nav,
  .se-book .pl-nav {
    flex: 0 1 auto;
    min-inline-size: 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 4px 10px max(4px, env(safe-area-inset-bottom)) 0;
    background: none;
  }

  /* Skiltet til venstre; navnet og status over hinanden til højre for det */
  .pl-nav-knap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 0 5px;
    padding: 3px 9px 3px 5px;
    border-radius: 10px;
    line-height: 1.15;
    text-align: start;
  }

  .pl-nav-ikon {
    grid-row: span 2;
  }

  .pl-nav-ikon img,
  .pl-nav-ikon svg {
    inline-size: 26px;
    block-size: 26px;
  }

  .pl-nav-navn {
    font-size: 0.806rem;
  }

  .pl-nav-status {
    font-size: 0.754rem;
  }

  /* ---- Forsiden: det rullende galleri ----
     Galleriet bliver mindre, så knapperne over billedet og billedet kan ses på én gang mellem sidehovedet og bjælken
     forneden (--header-hoejde og --se-book-hoejde: js/se-book.js; svh: med browserens adresselinje fremme — browsere
     uden svh bruger vh, se @supports). --tile-foto er billedets side. Knapperne bliver mindre i samme forhold som
     billedet: alle mål er en brøkdel af --tile-foto, så de har samme størrelse i forhold til billedet som på en
     stående telefon (billedet 358px). Knapperne over billedet fylder 0,1285 af billedets side, og 12px er luft:
     side = (plads − 12px) / 1,1285.
     Opstillingen: "Bestil dette neglesæt" og "Brug billede" over billedet (to linjer som ellers); pilene og
     pause/afspil inde i billedet som ellers (mindre); den grå "Se hele galleriet" er skjult; "Se galleri" og "Vælg din
     behandling" (mindre) står til højre for billedet. */
  .galleri-sektion {
    --tile-foto: max(120px, calc((100vh - var(--header-hoejde, 36px) - var(--se-book-hoejde, 34px) - 12px) / 1.1285));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: calc(var(--tile-foto) * 0.045);
  }

  @supports (height: 100svh) {
    .galleri-sektion {
      --tile-foto: max(120px, calc((100svh - var(--header-hoejde, 36px) - var(--se-book-hoejde, 34px) - 12px) / 1.1285));
    }
  }

  .galleri-sektion .tile-grid {
    grid-column: 2;
    grid-row: 1;
    max-inline-size: none;
    margin: 0;
  }

  /* Den lyserøde "Se hele galleri" og den grønne "Vælg behandling": til højre for billedet, under hinanden og lige brede,
     ud for dets midte (knapperne over billedet skubber dem ned) */
  .galleri-sektion .galleri-cta {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: calc(var(--tile-foto) * 0.03);
    margin: calc(var(--tile-foto) * 0.1285) 0 0;
  }

  .galleri-cta .knap {
    flex: none;
    gap: calc(var(--tile-foto) * 0.02);
    min-block-size: calc(var(--tile-foto) * 0.1285);
    min-inline-size: calc(var(--tile-foto) * 0.5587);
    padding-inline: calc(var(--tile-foto) * 0.078);
    font-size: calc(var(--tile-foto) * 0.0469);
  }

  /* Galleriet: knapperne over billedet og billedet (med pilene og pause/afspil inde i det) — så bredt som billedet */
  .tile .tile-aktioner,
  .tile .tile-ramme {
    inline-size: var(--tile-foto);
  }

  .tile .tile-ramme {
    --pil: max(26px, calc(var(--tile-foto) * 0.095));
    --pil-kant: max(3px, calc(var(--tile-foto) * 0.011));
  }

  .tile .tile-knap-raekke {
    display: none; /* (kun den grå "Se hele galleriet", som er skjult her) */
  }

  /* "Bestil dette neglesæt" og "Gem billede til senere": på to linjer som ellers — bare mindre, i samme forhold til
     billedet (højde 46px, skrift 0,82rem og luft 12px i siderne, når billedet er 358px) */
  .tile .design-aktioner .knap-lille {
    min-block-size: calc(var(--tile-foto) * 0.1285);
    padding-inline: calc(var(--tile-foto) * 0.0335);
    font-size: calc(var(--tile-foto) * 0.03665);
  }

  /* Menuen under "Gem billede til senere" kan være højere end det mindre billede: den står oven på bjælken forneden
     (z-index 30), så dens nederste knap og beskeder (fx "Du har allerede 10 billeder …") ikke gemmer sig bag den */
  .tile .gem-menu {
    z-index: 31;
  }

  .tile .design-aktioner .knap-lille:first-child {
    border-start-start-radius: calc(var(--tile-foto) * 0.039);
  }

  .tile .design-aktioner .knap-lille:last-child,
  .tile .design-aktioner .design-aktion-gem {
    border-start-end-radius: calc(var(--tile-foto) * 0.039);
  }
}

/* Smal liggende telefon (fx iPhone SE på siden): ingen plads til logoet ved siden af knapperne (de fylder mindst ca.
   570px — "Vipper & bryn" står på én linje — og logoet mindst 117px) — kun knapperne, i midten af linjen med lige
   meget luft i begge sider */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 699px) {
  .bjaelke-logo {
    display: none;
  }

  .pl-nav-linje .pl-nav,
  .se-book .pl-nav {
    margin-inline: auto;
    padding-inline: 5px;
  }
}

/* Smallere end de mindste telefoner på siden: knappernes navne må brydes over to linjer, så de kan være der */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 559px) {
  .pl-nav-navn {
    white-space: normal;
  }
}

/* Mobil: afstanden mellem rammerne på prislisten er halveret (siden, afsnittene, procedurerne, menuerne, skiltene,
   kurven og kvitteringen), så der er mere plads til indholdet. Luften inde i de mindste kasser (procedurekort,
   skilte, rækker) er den samme som på computeren. */
@media (max-width: 767px) {
  .pl-side {
    padding-inline: 8px;
    padding-block: 16px;
  }

  .forberedelse {
    margin-block-end: 10px;
    padding: 4px 8px 8px;
  }

  .pl-valgt-tid {
    margin-block-end: 8px;
    padding: 6px 7px;
  }

  .pl-layout {
    gap: 10px;
  }

  .pl-afsnit {
    gap: 8px;
  }

  .pl-kort {
    padding: 8px;
  }

  .pl-kort-top {
    margin-block-end: 6px;
  }

  .pl-gruppe-titel {
    margin: 6px 0 3px;
  }

  .pl-kort-top + .pl-gruppe-titel {
    margin-block-start: 0;
  }

  .pl-procedurer {
    gap: 4px;
  }

  .pl-detaljer {
    padding: 0 6px 6px;
  }

  .pl-gruppe {
    margin-block-start: 5px;
    padding: 1px 5px 5px;
  }

  .pl-gruppe .pl-gruppe-titel {
    margin-block-start: 4px;
  }

  .pl-valg-raekke {
    gap: 3px;
  }

  .pl-til,
  .pl-antal {
    margin-block-start: 3px;
  }

  .pl-mangler,
  .pl-hint {
    margin-block-start: 4px;
  }

  .pl-kurv {
    padding: 8px;
  }

  .pl-kurv .kvittering {
    margin-block-start: 4px;
    padding: 10px;
  }

  .pl-kurv .kvittering-gruppe {
    margin-block-end: 5px;
  }

  .pl-tilfoej-raekke {
    gap: 3px;
    margin-block-end: 6px;
  }

  .pl-ark-indhold {
    padding: 6px 6px 12px;
  }

  .pl-bjaelke-sum {
    gap: 5px;
    padding-inline: 6px;
  }
}

/* ---------- Footer ---------- */

.side-footer {
  padding-inline: 20px;
  padding-block: 32px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  border-block-start: 1px solid var(--color-border);
}

.side-footer p {
  margin: 4px 0;
}

/* Links til siderne i bunden af alle sider (de samme som i ☰ Menu — Google følger dem) */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-block-end: 12px;
}

.footer-links a {
  color: var(--color-primary-tekst, var(--color-primary-dark)); /* (se Kontakt nedenfor) */
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ---------- Priser (priser.html): den klassiske prisliste — tabellerne skrives af .claude/lav-prisliste.ps1 ---------- */
.pk-side {
  max-inline-size: 1100px;
  margin-inline: auto;
  padding: 20px 16px 32px;
}

.pk-side h1 {
  margin: 0 0 6px;
  color: var(--color-primary-dark);
  font-size: 1.6rem;
}

.pk-intro {
  max-inline-size: 70ch;
  margin: 0 0 14px;
  color: var(--color-muted);
}

.pk-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

/* Manicure til venstre og pedicure, SPA og vipper & bryn til højre — på en smal skærm under hinanden */
.pk-kolonner,
.pk-kolonne {
  display: grid;
  gap: 18px;
  align-content: start;
}

@media (min-width: 860px) {
  .pk-kolonner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.pk-afsnit {
  padding: 14px 16px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pk-afsnit h2 {
  margin: 0 0 6px;
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Foto-skiltet foran Manicure, Pedicure, SPA og Vipper & bryn — det samme som på Book (lav-prisliste.ps1) */
.pk-skilt-overskrift {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-skilt {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.pk-afsnit h3 {
  margin: 18px 0 4px;
  color: var(--color-primary-dark);
  font-size: 1rem;
}

/* Den første underoverskrift lige under afsnittets overskrift (fx "Nyt sæt negle" under Manicure) */
.pk-afsnit h2 + h3,
.pk-afsnit h2 + .pk-gruppe > h3,
.pk-afsnit h2 + .pb-se-alle + .pk-gruppe > h3 {
  margin-block-start: 10px;
}

/* Underoverskrift bag info-skiltet (ⓘ) (user): kun skiltet ses; et tryk folder overskriften, dens beskrivelse og alle
   behandlingernes beskrivelser ud (js/priser-side.js). (Lidt luft om skiltet, så det er nemt at ramme med en finger —
   den negative margen holder det på plads.) */
.pk-gruppe-knap {
  margin: -4px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--color-primary-tekst, var(--color-primary-dark)); /* (knaptekst — mørk nok på hvid) */
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Foldet sammen er overskriften hidden="until-found" (skærmlæsere får den fra knappens aria-label). until-found virker
   ikke på en inline-tekst — så inline-block, og content-visibility selv til browsere, der ikke kender until-found (de
   ville ellers vise den). Uden content-visibility skjuler [hidden] den helt. */
@supports (content-visibility: hidden) {
  .pk-gruppe-titel[hidden] {
    display: inline-block;
    content-visibility: hidden;
  }
}

.pk-gruppe-titel:not([hidden]) {
  margin-inline-end: 0.3em;
}

/* Rammen om Længdetillæg og Tilvalg (user): "Tilvalg for nyt sæt eller refill" afbryder rammens øverste linje (legend). Den
   går ud i afsnittets luft (negativ margen = kant + luft), så tabellerne er lige så brede som de andre, og priserne
   flugter — også på en telefon. */
.pk-ramme {
  min-inline-size: 0; /* (en fieldset er ellers mindst så bred som sit indhold) */
  margin: 18px -8px 0;
  padding: 0 6px 8px;
  border: 2px solid var(--color-primary); /* (kortets egen kantfarve er for lys til en ramme inde i kortet) */
  border-radius: var(--radius);
}

.pk-ramme-titel {
  padding-inline: 6px;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
}

.pk-ramme > .pk-gruppe:first-of-type > h3 {
  margin-block-start: 2px;
}

/* "(pris for kort længde u. tilvalg)" ved Nyt sæt negle og Refill (user): sort, højrejusteret på linje med skiltet —
   over priserne. Skiltet tager den plads, det skal bruge (også med overskriften foldet ud); noten får resten, mindst
   9em, og brydes over to linjer, hvis den ikke kan være der. (Kun en synlig gruppe — grid ville ellers sætte hidden ud
   af kraft. Uden grid: noten på sin egen linje.) */
div.pk-med-pris-note:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(9em, 1fr);
  column-gap: 10px;
  align-items: baseline;
}

div.pk-med-pris-note > :not(h3):not(.pk-pris-note) {
  grid-column: 1 / -1;
}

.pk-pris-note {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: end;
}

.pk-gruppe-knap:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--color-primary-tekst, var(--color-primary-dark)); /* (mindst 3:1 mod det hvide kort) */
  outline-offset: 2px;
}

/* (hidden="until-found" giver stadig en kasse — margenen kun, når teksten er foldet ud) */
.pk-gruppe-tekst {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.pk-gruppe-tekst:not([hidden]) {
  margin-block-end: 6px;
}

.pk-gruppe-tekst a {
  color: var(--color-primary-tekst, var(--color-primary-dark));
  font-weight: 600;
}

/* Det overordnede info-skilt ved SPA og Vipper & bryn (user): lige efter titlen i overskriften, tættere på end
   overskriftens 10px afstand */
.pk-skilt-overskrift > .pk-gruppe-knap {
  display: flex;
  margin-inline-start: -8px;
}

.pk-tabel {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pk-tabel th[scope="row"] {
  padding: 7px 8px 7px 0;
  font-weight: 600;
  text-align: start;
  vertical-align: top;
}

/* Info-skiltet (ⓘ) ud for hver behandling (user): et tryk på navnet eller skiltet folder beskrivelsen ud under navnet
   (<details>, lav-prisliste.ps1) */
.pk-laes summary {
  display: block; /* (ingen trekant) */
  cursor: pointer;
  list-style: none;
}

.pk-laes summary::-webkit-details-marker {
  display: none;
}

.pk-laes summary:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--color-primary-tekst, var(--color-primary-dark));
  outline-offset: 2px;
}

.pk-laes-knap {
  display: inline-flex;
  vertical-align: -3px;
  margin-inline-start: 2px;
  color: var(--color-primary-tekst, var(--color-primary-dark));
}

/* Info-skiltet: en cirkel med et "i" i den lyserøde tekstfarve */
.pk-laes-knap::before {
  content: "";
  flex: none;
  inline-size: 17px;
  block-size: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 11v6' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.3' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 11v6' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.3' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Foldet ud: skiltet bliver fyldt — en lyserød cirkel med et hvidt "i". Med musen over også — men kun med en mus (på
   en telefon bliver :hover hængende efter et tryk, og en lukket række ville se ud, som om den var foldet ud). */
.pk-laes[open] .pk-laes-knap::before,
.pk-gruppe-knap[aria-expanded="true"] .pk-laes-knap::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22a11 11 0 1 1 0-22zM10.8 11v6a1.2 1.2 0 0 0 2.4 0v-6a1.2 1.2 0 0 0-2.4 0zM12 5.8a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22a11 11 0 1 1 0-22zM10.8 11v6a1.2 1.2 0 0 0 2.4 0v-6a1.2 1.2 0 0 0-2.4 0zM12 5.8a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .pk-laes summary:hover .pk-laes-knap::before,
  .pk-gruppe-knap:hover .pk-laes-knap::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22a11 11 0 1 1 0-22zM10.8 11v6a1.2 1.2 0 0 0 2.4 0v-6a1.2 1.2 0 0 0-2.4 0zM12 5.8a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22a11 11 0 1 1 0-22zM10.8 11v6a1.2 1.2 0 0 0 2.4 0v-6a1.2 1.2 0 0 0-2.4 0zM12 5.8a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z'/%3E%3C/svg%3E");
  }
}

/* "læs om" og en pil ved siden af skiltet (user), så det ses, at et tryk folder noget ud — pilen vender op, når det er
   foldet ud. (Teksten står i css: knappens navn for skærmlæsere er dens aria-label "… – læs om", og "læs om" kommer
   ikke ind i den tekst, Google læser.) */
.pk-gruppe-knap .pk-laes-knap {
  align-items: center;
}

.pk-gruppe-knap .pk-laes-knap::after {
  content: "læs om";
  margin-inline-start: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.pk-gruppe-knap::after {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-start: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  vertical-align: 2px;
  rotate: 45deg;
}

.pk-gruppe-knap[aria-expanded="true"]::after {
  vertical-align: -1px;
  rotate: -135deg;
}

/* Windows' høje kontrast (tvungne farver) erstatter baggrundsfarven med sidens baggrund — så ville skiltet forsvinde.
   Der tegnes det i tekstfarven. */
@media (forced-colors: active) {
  .pk-laes-knap::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

.pk-laes p,
.pk-raekke-tekst {
  margin: 4px 0 2px;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
}

/* (Rækkernes beskrivelser under en underoverskrift — hidden="until-found" giver stadig en kasse, så ingen margen der) */
.pk-raekke-tekst[hidden] {
  margin: 0;
}

/* Designskiltene i beskrivelsen af Nyt sæt negle og Refill (user): fotoet som på Book, mindre, med navnet under. De må bruge hele
   rækkens bredde — også under tid og pris, der kun står på rækkens første linje — ellers bliver de en høj søjle i den
   smalle navnekolonne på en telefon. Bredden er gruppens (container query; 32px er pladsen til markeringsboksen) — som
   negativ margen, så den ikke gør navnekolonnen (og tabellen) bredere; uden container query: kun navnekolonnen. */
div.pk-gruppe {
  container-type: inline-size;
}

.pk-designs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-block: 2px 6px;
  margin-inline-end: calc(100% + 32px - 100cqi);
}

.pk-design {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  inline-size: 56px;
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* I en række med skilte står tid og pris på én linje (user 2026-10-30): skiltene går ind under dem — en pris over to
   linjer ("pr. negl" / "+20 kr.") lå ellers bag skiltene (navnecellen er placeret, så den tegnes øverst) */
.pk-tabel tr:has(.pk-designs) > td {
  white-space: nowrap;
}

.pk-design img,
.pk-laengde-linje img {
  display: block;
  inline-size: 32px;
  block-size: 68px;
  border-radius: 6px;
  background: #5d8197;
}

/* Længdeskiltet ved Længde: Kort, Medium og Lang (user): fotoet som på Book, på linje med beskrivelsen */
.pk-laengde-linje {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pk-laengde-linje img {
  flex: none;
}

/* ---------- Markeringsboksene i prislisten: bestil direkte fra Priser (js/priser-bestil.js) ---------- */
/* Pladsen til boksen er sat af fra start (rækkerne med data-valg), så teksten ikke flytter sig, når boksene sættes ind —
   siden "hopper" ikke (det tæller også hos Google). Prislistens tekst er den samme. */
.pk-tabel tr[data-valg] > th[scope="row"] {
  position: relative;
  padding-inline-start: 32px;
}

/* Boksen i et felt på 32 × 32 px (nemt at ramme med en finger) */
.pb-boks-felt {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  cursor: pointer;
}

.pb-boks {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: #2f9e44;
  cursor: pointer;
}

label.pb-navn {
  cursor: pointer;
}

/* Hele linjen kan trykkes på (js/priser-bestil.js): markerer behandlingen som boksen — med musen lyser linjen svagt op */
.pk-tabel tr.pb-raekke {
  cursor: pointer;
}

@media (hover: hover) {
  .pk-tabel tr.pb-raekke:not(.pb-valgt):not(.pb-venter):not(.pb-graa):hover > * {
    background: #f6fbf7;
  }
}

/* Valgt: let grøn som kurven på Book */
.pk-tabel tr.pb-valgt > * {
  background: #eef8f0;
}

/* Markeret, men venter (user): en længde / et tilvalg, der er markeret uden Nyt sæt negle / Refill — ikke i kurven endnu
   (lys gul i stedet for grøn), og en note lige over rammen siger hvorfor */
.pk-tabel tr.pb-venter > *,
.pk-tabel tr.pb-venter + tr.pb-antal-raekke > td {
  background: #fdf6e3;
}

.pb-venter-note {
  margin: 14px 0 -8px; /* (10px over rammen — dens margen er 18px) */
  color: #7a4f00;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Grålagt (user): kan ikke vælges sammen med det valgte — men kan stadig vælges og afløser det så (eller kræver en
   anden behandling først). Teksten er dæmpet, men stadig læselig (mindst 4,5:1). */
.pk-tabel tr.pb-graa > * {
  background: #f6f3f2;
  color: var(--color-muted);
}

.pk-tabel tr.pb-graa .pk-tid {
  color: var(--color-muted);
}

/* (Boksen selv dæmpes ikke: dens kant skal stå tydeligt — mindst 3:1 — for den kan stadig vælges.) */

/* Antal negle / sten: − 1 negl + i en række for sig under behandlingen, når den er valgt */
.pk-tabel tbody tr.pb-antal-raekke > td {
  padding: 0 0 8px 32px;
  border-block-start: 0;
  text-align: start;
}

.pk-tabel tr.pb-valgt + tr.pb-antal-raekke > td {
  background: #eef8f0;
}

.pb-antal {
  display: flex;
  align-items: center;
  gap: 6px;
  inline-size: fit-content;
  font-size: 0.85rem;
  font-weight: 600;
}

.pb-antal-knap {
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 1px solid #8fd19e;
  border-radius: 50%;
  background: #d3f0da;
  color: #1e6b31;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.pb-antal-knap:disabled {
  opacity: 0.45;
  cursor: default;
}

.pb-antal-tal {
  min-inline-size: 4.5em;
  text-align: center;
}

/* En meget smal skærm (fx 320 px): lidt mindre luft om tabellerne, så boksene er der plads til uden, at siden bliver
   bredere end skærmen */
@media (max-width: 360px) {
  .pk-afsnit:has(tr[data-valg]) {
    padding-inline: 12px;
  }

  .pk-tabel tr[data-valg] > th[scope="row"] {
    padding-inline: 26px 4px;
  }

  .pk-designs {
    margin-inline-end: calc(100% + 26px - 100cqi);
  }

  .pk-tabel tr[data-valg] > td {
    padding-inline-start: 6px;
  }

  .pb-boks-felt {
    inset-inline-start: -8px;
  }

  .pk-tabel tbody tr.pb-antal-raekke > td {
    padding-inline-start: 26px;
  }
}

/* "Vis alle valg igen" / "Skjul igen" lige under afsnittets overskrift (user): de grålagte behandlinger er skjult, når
   der er valgt noget — knappen viser dem igen. Fyldt med den mørke lyserøde, så den ses (user: mere fremtrædende; hvid
   tekst 5,6:1). Pilen peger ned (foldet sammen) eller op. */
.pb-se-alle {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: fit-content;
  min-block-size: 34px;
  margin: 4px 0 6px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary-tekst, var(--color-primary-dark));
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 14, 13, 0.15);
}

.pb-se-alle[hidden] {
  display: none;
}

.pb-se-alle::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  translate: 0 -2px;
}

.pb-se-alle[aria-expanded="true"]::after {
  rotate: -135deg;
  translate: 0 2px;
}

.pb-se-alle:hover {
  filter: brightness(0.9);
}

.pb-se-alle:focus-visible {
  outline: 2px solid var(--color-primary-tekst, var(--color-primary-dark));
  outline-offset: 2px;
}

/* "Vælges sammen med …" under navnet, når en række kræver en anden behandling først */
.pb-hint {
  margin: 4px 0 0;
  color: #7a4f00;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Prislisten (user 2026-10-31: Bestils kvittering): Bestils sum — "Ryd Valg", indkøbskurven med pris og tid og "Bestil"
   — øverst i Book-bjælken forneden (js/priser-bestil.js), altid. Hvid i hele bjælkens bredde over de blå knapper, som på
   Bestil; selve rækken højst 720px i midten (.pl-bjaelke-sum). Arket med kvitteringen kører op fra den (.pl-ark). */
.se-book > .pl-bjaelke-sum {
  background: var(--color-surface);
  box-shadow: 0 0 0 100vmax var(--color-surface);
  clip-path: inset(0 -100vmax);
}

/* "Fold sammen" og pilene i hjørnerne af håndtaget ses kun i det kompakte ark (nedenfor) */
.pl-ark-greb-tekst,
.pl-ark-greb-hjoerne {
  display: none;
}

/* Prislisten på en stor skærm (user 2026-10-31: "ikke fuld side på computer"): kvitteringen kommer kun op i sin egen
   højde, lige så bred som summen (højst 720px) og lige over den. Mens den kører op, skæres summen øverst i arket væk
   foroven (--pl-ark-frem 0 … 1 gange dens højde, js/prisliste.js) — foldet ud ses den ikke (user); øverst står så
   håndtaget med "Fold sammen" og en pil nedad i hvert hjørne. Et klik ved siden af folder den også sammen.
   (js/prisliste.js arkKompakt: samme grænse, 960px.) */
@media (min-width: 960px) {
  .pk-side > .pl-ark .pl-ark-panel {
    inset-block-start: auto;
    inset-inline: max(0px, calc((100% - 720px) / 2));
    max-block-size: calc(100% - 24px);
    overflow: hidden;
    box-shadow: none;
    clip-path: inset(calc(var(--pl-ark-hoved-hoejde, 55px) * var(--pl-ark-frem, 0)) 0 0 0 round 16px 16px 0 0);
  }

  .pk-side > .pl-ark .pl-ark-hoved {
    border-block-start: none;
  }

  .pk-side > .pl-ark .pl-ark-greb {
    position: relative;
  }

  .pk-side > .pl-ark .pl-ark-greb-hjoerne {
    position: absolute;
    inset-block-start: 50%;
    display: block;
    inline-size: 26px;
    block-size: 26px;
    transform: translateY(-50%);
  }

  .pk-side > .pl-ark .pl-ark-greb-hjoerne--v {
    inset-inline-start: 14px;
  }

  .pk-side > .pl-ark .pl-ark-greb-hjoerne--h {
    inset-inline-end: 14px;
  }

  .pk-side > .pl-ark .pl-ark-indhold {
    flex: 0 1 auto;
  }

  .pk-side > .pl-ark .pl-ark-baggrund {
    pointer-events: auto;
    cursor: pointer;
  }

  .pk-side > .pl-ark .pl-ark-greb {
    block-size: auto;
    padding-block: 8px;
    border-block: 1px solid var(--color-border);
    color: #2b7a3b;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
  }

  .pk-side > .pl-ark .pl-ark-greb:hover {
    background: #f1faf3;
  }

  .pk-side > .pl-ark .pl-ark-greb > span:first-child {
    display: none;
  }

  .pk-side > .pl-ark .pl-ark-greb-tekst {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    inline-size: auto;
    block-size: auto;
    border-radius: 0;
    background: none;
  }

  .pl-ark-greb-tekst svg {
    inline-size: 18px;
    block-size: 18px;
  }
}

/* Liggende telefon: summen på sin egen linje, og under den logoet og knapperne i én linje (.pl-nav-linje, sat ind af
   js/priser-bestil.js — se "Liggende telefon" ovenfor) — som på Bestil. */
@media (orientation: landscape) and (max-height: 500px) {
  .se-book:has(> .pl-bjaelke-sum) {
    display: block;
  }
}

/* (Tal og enhed hænger sammen i teksten — &nbsp; — så en smal skærm kun deler fx "pr. negl" og "25 kr.") */
.pk-tabel td {
  padding: 7px 0 7px 10px;
  text-align: end;
  vertical-align: top;
}

/* (Stregen mellem rækkerne — kun under en synlig række: er grålagte behandlinger skjult (js/priser-bestil.js), får
   den første synlige ingen streg foroven) */
.pk-tabel tbody tr:not([hidden]) ~ tr:not(.pb-antal-raekke) > * {
  border-block-start: 1px solid var(--color-border);
}

.pk-tid {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.pk-pris {
  font-weight: 700;
}

/* Et link i en beskrivelse (fx "galleri" ved Nyt sæt negle med nailart) — mørk nok på hvid */
.pk-laes p a,
.pk-raekke-tekst a {
  color: var(--color-primary-tekst, var(--color-primary-dark));
  font-weight: 600;
}

.pk-note {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.pk-bund {
  margin: 20px 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------- Kontakt og åbningstider (kontakt.html): samme kort som Priser ---------- */
/* Små links og knaptekster i standardtemaets --color-primary-dark er for lyse på hvid (4,1:1 — kravet er 4,5:1): en
   mørkere tone til dem. (Standardtemaet øverst i filen røres ikke; temaerne har mørk nok primary-dark og bruger den.) */
:root:not([data-tema]) {
  --color-primary-tekst: #a14f65;
}

.kt-side .pk-afsnit a {
  color: var(--color-primary-tekst, var(--color-primary-dark));
  font-weight: 600;
}

/* "Ring 52 78 88 21" ved siden af "Book tid": hvid med lyserød kant */
.knap.kt-ring {
  gap: 6px;
  background: var(--color-surface);
  color: var(--color-primary-tekst, var(--color-primary-dark));
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.knap.kt-ring:hover {
  background: #f9e3e9;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

.kt-efter-aftale {
  margin: 0 0 2px;
  font-size: 0.92rem;
}

.kt-tider {
  font-size: 0.98rem;
}

/* "Vi er som regel kun i salonen, når der er bestilte tider …": lys gul boks under tiderne (som de gule skilte på
   Book-siden) */
.kt-vigtigt {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid #ffe066;
  border-radius: 8px;
  background: #fff9db;
  color: #2b2320;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.kt-tider td {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kt-liste {
  margin: 0;
}

.kt-liste dt {
  margin-block-start: 10px;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.kt-liste dt:first-child {
  margin-block-start: 0;
}

.kt-liste dd {
  margin: 2px 0 0;
  line-height: 1.45;
}

.kt-liste a[href^="tel:"] {
  font-size: 1.25rem;
  font-weight: 700;
}

.kt-adresse {
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}

.kt-fakta {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.kt-fakta li,
.kt-ruter a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kt-fakta .skilt,
.kt-ruter .skilt {
  font-size: 1rem;
}

.kt-ruter {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.kt-firma {
  margin: 0;
  line-height: 1.45;
}

/* Telefon og åbningstider i bunden af alle sider */
.side-footer .footer-kontakt {
  margin-block-end: 10px;
  color: var(--color-text);
}

.footer-kontakt a {
  color: var(--color-primary-tekst, var(--color-primary-dark));
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* "Åbningstider: efter aftale …" rykker samlet ned på næste linje, når der ikke er plads (ikke midt i teksten) */
.footer-tider {
  display: inline-block;
}

.footer-klokken {
  white-space: nowrap;
}