/* ── Self-hostede fonte ────────────────────────────────────────────
   Produktionens CSP (`style-src 'self'`, `font-src 'self' data:`) BLOKEREDE
   Google Fonts — målt: stylesheetet blev afvist og document.fonts var tom,
   så butikken kørte på systemfonte uden at nogen opdagede det. Fontene
   ligger nu lokalt: CSP'en er glad, der er ingen IP-overførsel til Google
   (som persondatapolitikken tidligere havde stående som en åben ting), og
   der er to færre eksterne opslag før første maling.
   Hanken Grotesk er ÉN variabel fil — Google serverede byte-identiske filer
   for alle fire vægte, så det er spild at hente dem hver for sig. */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('vendor/hanken/hanken-var.woff2') format('woff2');
}
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/inter/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('vendor/inter/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('vendor/inter/inter-700.woff2') format('woff2'); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #f9f7f4;
      --surface: #ffffff;
      --border: #e4dfd8;
      --text: #1a1714;
      --muted: #6e675e;      /* var 4.37:1 på --bg, under AA. 5.22 nu. */
      --accent: #3a6b47;
      --accent-dark: #2c5237;
      --accent-light: #e8f2ec;
      --accent-mid: #d4e9db;     /* stærkere accent-flade end --accent-light */
      --accent-ring: rgba(58,107,71,.3);
      --clay: #55725c;        /* var 3.63:1 bag .product-cat. 4.97 nu. */
      --clay-light: #e4ecdf;
      --clay-bg: #f0e0d5;        /* billed-pladsholder */
      --nav-h: 100px;

      /* Flader ─────────────────────────────────────────────────────
         Erstatter en håndfuld næsten-ens neutraler (#f8f9fb, #f9f5f2,
         #f4f0ec, #f2f2f2, #e2e8f0, #e2d8d0) der lå spredt i filen. */
      --surface-2: #faf8f5;      /* svag inset-flade i et kort */
      --border-soft: #efece6;    /* lette linjer: under --border */

      /* Semantiske par (tekst / flade / streg) ── */
      --green: #2e7d32; --green-bg: #e8f5e9;
      --red:   #c53030; --red-bg:   #fdecea;
      --warn:  #b45309; --warn-bg:  #fef3c7; --warn-line: #fde68a;
      --dark:  #1f2937;                        /* testbanner, mørk flade */
      --star:  #e0a829;                        /* visnings-stjerner: dekorative, står med tal ved siden af */
      --star-pick: #b5821a;                   /* stjerne-VÆLGEREN er interaktiv → 3:1 påkrævet (målt 3.40) */
      /* Produktmærkerne har deres EGNE tokens, så de aldrig låner en farve
         der betyder noget andet. "Ny" lånte oprindeligt --green, altså
         succesfarven, og var derfor græsgrøn i ENHVER palet.
         Skemaet: Ny = butikkens accent, Bestseller = palettens dæmpede
         sekundærfarve, Tilbud = rød, fordi udsalg er en retail-konvention.
         Alle tre bliver dermed i palettens familie undtagen Tilbud.
         --green/--red forbliver urørte til succes og fejl. */
      --tag-ny: var(--accent); --tag-best: var(--clay); --tag-tilbud: #c53030;
      --heart: #e0395e; --heart-line: #c2566e; /* ønskeliste */
      --peach: #e8a87c;                        /* hero-fremhævning */
      --lime:  #a8cc64;                        /* hero-eyebrow */

      /* Form: radius er en skala, ikke et frit valg ── */
      --radius-xs: 6px;
      --radius-sm: 8px;
      --radius: 10px;
      --radius-lg: 14px;
      --radius-pill: 50px;

      --shadow: 0 2px 12px rgba(0,0,0,.08);
      --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

      /* Bevægelse ── */
      --ease-out: cubic-bezier(.32, .72, 0, 1);
      --ease-inout: cubic-bezier(.65, 0, .35, 1);
      --dur-fast: .13s;
      --dur-base: .19s;
      --dur-slow: .3s;

      --focus-ring: 0 0 0 3px var(--accent-ring);

      /* Luft ──────────────────────────────────────────────────────
         Sektionernes rytme er en token, ikke en værdi pr. sektion, så
         et tema kan skrue på luften ét sted. Før stod padding'en direkte
         på `section`, og tre temaer overskrev den hver for sig — hvilket
         betød at en ændring af standarden tavst ikke nåede dem. */
      --section-y: clamp(4.5rem, 9vw, 7.5rem);
      --section-x: clamp(1.25rem, 5vw, 4rem);

      /* Mærkater: små versaler med bred sperring (kategori, eyebrow,
         knapper). Sperringen er størrelsesafhængig — jo mindre skrift,
         jo mere luft mellem bogstaverne. */
      --tracking-label: .12em;
      --tracking-head: -.022em;

      --font-head: 'Hanken Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      /* Korte sider (fx Min konto, Følg din ordre) sluttede før skærmens bund,
         så der lå en stribe baggrund UNDER den mørke footer. Kolonne-layout +
         margin-top:auto på footeren skubber den ned til bunden. */
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }
    img, svg { max-width: 100%; }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      height: var(--nav-h);
      display: flex; align-items: center;
      padding: 0 clamp(1rem, 4vw, 3rem);
      gap: 2rem;
    }
    .nav-logo {
      display: flex; align-items: center; gap: .6rem;
      font-size: 1.3rem; font-weight: 700; color: var(--text);
      text-decoration: none; flex-shrink: 0;
    }
    .nav-logo img { height: 22px; width: auto; }
    .nav-links {
      display: flex; gap: 1.5rem; list-style: none;
      margin: 0 auto;
    }
    .nav-links a {
      text-decoration: none; color: var(--muted); font-size: .95rem;
      transition: color var(--dur-base) var(--ease-out);
    }
    .nav-links a:hover { color: var(--accent); }

    /* ── NAV: kategori-dropdown ── */
    .nav-dd-wrap { position: relative; }
    .nav-dd-toggle { display: inline-flex; align-items: center; gap: .3rem; }
    .nav-dd-caret { transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; }
    .nav-dd-wrap:hover .nav-dd-caret { transform: rotate(180deg); }
    .nav-dd {
      position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
      min-width: 210px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: .5rem; margin: 0;
      list-style: none; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index: 200;
    }
    .nav-dd::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* hover-bro */
    .nav-dd-wrap:hover .nav-dd, .nav-dd-wrap:focus-within .nav-dd {
      opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px);
    }
    .nav-dd li { margin: 0; }
    .nav-dd a {
      display: block; padding: .55rem .8rem; border-radius: var(--radius-sm); font-size: .9rem;
      color: var(--text) !important; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .nav-dd a:hover { background: var(--accent-light); color: var(--accent) !important; }
    .nav-dd-all { border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .35rem; }
    .nav-dd-all a { font-weight: 600; color: var(--accent) !important; }
    /* Drawer (mobil): kategori-underpunkter under "Produkter" */
    .drawer-sub-item a { padding-left: 2rem !important; font-size: .92rem; }
    .drawer-sub-item a::before { content: '– '; opacity: .5; }
    /* Kategori-side intro-tekst */
    .cat-intro { max-width: 640px; margin: .4rem auto .3rem; color: var(--muted); line-height: 1.6; }

    /* ── TESTTILSTAND: banner + landingsside ── */
    .test-banner {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
      background: var(--dark); color: #fff; border-top: 3px solid var(--warn);
      display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
      padding: .7rem 1rem; font-size: .88rem; box-shadow: 0 -2px 14px rgba(0,0,0,.22);
    }
    .test-banner strong { color: var(--warn-line); }
    .test-banner button {
      background: var(--warn); color: var(--dark); border: none; border-radius: var(--radius-pill);
      padding: .35rem 1.1rem; font-weight: 700; font-family: inherit; font-size: .82rem; cursor: pointer;
    }
    .test-banner button:hover { background: var(--warn-line); }
    .test-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg); padding: 2.5rem; max-width: 460px; width: 100%; text-align: center;
    }
    .test-icon { font-size: 3rem; margin-bottom: .4rem; }
    .test-card h1 { font-size: 1.55rem; margin-bottom: .7rem; }
    .test-lead { color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; font-size: .94rem; }
    .test-form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
    .test-form input {
      flex: 1; min-width: 160px; padding: .7rem .9rem; border: 1.5px solid var(--border);
      border-radius: var(--radius); font-size: 1rem; font-family: inherit; color: var(--text);
    }
    .test-form input:focus { border-color: var(--accent); }
    .test-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
    .test-msg { display: none; margin-top: 1rem; font-weight: 600; font-size: .9rem; }

    /* ── VEDLIGEHOLDELSE / LUKKET BUTIK (landingsside i shoppens tema) ── */
    .maint-hero, #maintOverlay {
      position: relative; min-height: 100vh; width: 100%;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 3rem);
      text-align: center; color: #fff; overflow: hidden;
      background:
        linear-gradient(140deg, rgba(8,14,4,.93) 0%, rgba(8,14,4,.78) 45%, rgba(44,82,55,.6) 100%),
        url('../Baggrund.jpg') center/cover no-repeat;
      background:
        linear-gradient(140deg, rgba(8,14,4,.93) 0%, rgba(8,14,4,.78) 45%, rgba(44,82,55,.6) 100%),
        image-set(url('../Baggrund.webp') type('image/webp'), url('../Baggrund.jpg') type('image/jpeg')) center/cover no-repeat;
    }
    #maintOverlay { position: fixed; inset: 0; z-index: 99999; }
    .maint-inner { position: relative; z-index: 2; max-width: 640px; animation: maintFade .8s ease both; }
    @keyframes maintFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    .maint-logo2 { height: 36px; width: auto; filter: invert(1) brightness(1.9); opacity: .95; margin-bottom: 2rem; }
    .maint-eyebrow { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); font-weight: 700; margin-bottom: 1.1rem; }
    .maint-hero h1, #maintOverlay h1 { font-family: var(--font-head); font-size: clamp(2.2rem, 5.5vw, 3.7rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.3rem; text-shadow: 0 2px 22px rgba(0,0,0,.45); }
    .maint-divider { width: 56px; height: 3px; background: var(--lime); border-radius: 2px; margin: 0 auto 1.5rem; }
    .maint-msg { font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.75; color: rgba(255,255,255,.9); white-space: pre-line; max-width: 520px; margin: 0 auto 2.2rem; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
    .maint-dots { display: inline-flex; gap: .5rem; margin-bottom: 2.4rem; }
    .maint-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); animation: maintPulse 1.4s ease-in-out infinite; }
    .maint-dots span:nth-child(2) { animation-delay: .2s; }
    .maint-dots span:nth-child(3) { animation-delay: .4s; }
    @keyframes maintPulse { 0%, 100% { opacity: .25; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.1); } }
    .maint-contact { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
    .maint-contact-label { font-size: .76rem; letter-spacing: .08em; color: rgba(255,255,255,.55); text-transform: uppercase; }
    .maint-contact-row { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; font-size: .95rem; font-weight: 500; }
    .maint-contact-row a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; opacity: .92; transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
    .maint-contact-row a:hover { color: var(--lime); opacity: 1; }
    .maint-social { display: flex; gap: .75rem; margin-top: .2rem; }
    .maint-social a { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
    .maint-social a:hover { background: var(--lime); border-color: var(--lime); color: var(--text); transform: translateY(-3px); }
    .maint-gear { position: absolute; color: color-mix(in srgb, var(--lime) 7%, transparent); z-index: 1; pointer-events: none; animation: maintSpin 30s linear infinite; }
    .maint-gear.g1 { top: -70px; right: -70px; width: 280px; height: 280px; }
    .maint-gear.g2 { bottom: -90px; left: -80px; width: 340px; height: 340px; animation-direction: reverse; animation-duration: 44s; }
    @keyframes maintSpin { to { transform: rotate(360deg); } }
    @media (max-width: 600px) { .maint-gear { display: none; } }
    .nav-cart {
      position: relative; cursor: pointer;
      background: none; border: none; padding: .5rem;
      color: var(--text); transition: color var(--dur-base) var(--ease-out);
    }
    .nav-cart:hover { color: var(--accent); }
    .cart-badge {
      position: absolute; top: 0; right: 0;
      background: var(--accent); color: #fff;
      font-size: .65rem; font-weight: 700;
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: scale(0);
      transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    }
    .cart-badge.visible { opacity: 1; transform: scale(1); }

    /* nav-ikoner (søg · konto · kurv) + mobil-burger */
    .nav-icons { display: flex; align-items: center; gap: .2rem; flex-shrink: 0; }
    .nav-icon {
      background: none; border: none; color: var(--text); cursor: pointer;
      padding: .5rem; border-radius: var(--radius); display: flex; align-items: center;
      text-decoration: none; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
    }
    .nav-icon:hover { color: var(--accent); background: var(--bg); }
    .nav-burger {
      display: none; background: none; border: none; color: var(--text);
      cursor: pointer; padding: .4rem; border-radius: var(--radius);
    }
    .nav-burger:hover { color: var(--accent); }

    /* udfoldeligt søgefelt under nav */
    .nav-search {
      max-height: 0; overflow: hidden; background: var(--surface);
      /* width 0 når lukket, så der ikke står en 1px-streg under nav'en (kanten
         + hvid baggrund var synlig over hero-fotoet på forsiden) */
      border-bottom: 0 solid var(--border); transition: max-height var(--dur-slow) var(--ease-out), border-bottom-width var(--dur-slow) var(--ease-out);
    }
    .nav-search.open { max-height: 120px; border-bottom-width: 1px; }
    .nav-search form { display: flex; flex-wrap: nowrap; gap: .6rem; padding: 1rem clamp(1rem, 4vw, 3rem); max-width: 760px; margin: 0 auto; }
    .nav-search input {
      flex: 1; min-width: 0; padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: 1rem; background: var(--surface); color: var(--text);
    }
    .nav-search form .btn { flex-shrink: 0; }
    .nav-search input:focus { border-color: var(--accent); }

    /* mobil-menu (drawer i venstre side) */
    .nav-scrim {
      position: fixed; inset: 0; background: rgba(0,0,0,.35);
      opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out); z-index: 200;
    }
    .nav-scrim.open { opacity: 1; visibility: visible; }
    .nav-drawer {
      position: fixed; top: 0; left: 0; bottom: 0; width: min(290px, 80vw);
      background: var(--surface); z-index: 201; transform: translateX(-100%);
      transition: transform var(--dur-slow) var(--ease-out); padding: 1.2rem;
      box-shadow: 8px 0 30px -8px rgba(0,0,0,.25); overflow-y: auto;
    }
    .nav-drawer.open { transform: translateX(0); }
    .nav-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .nav-drawer-head span { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; }
    .nav-drawer-x { background: none; border: none; font-size: 1.4rem; color: var(--muted); cursor: pointer; line-height: 1; }
    .nav-drawer ul { list-style: none; }
    .nav-drawer li { border-bottom: 1px solid var(--border); }
    .nav-drawer a {
      font-family: var(--font-head); font-weight: 600; color: var(--text); text-decoration: none;
      font-size: 1.05rem; padding: .85rem .2rem; display: flex; align-items: center; gap: .7rem;
    }
    .nav-drawer a:hover { color: var(--accent); }

    /* ── HERO ── */
    /* Hero-fotoet var en 1,77 MB PNG — den tungeste enkeltdel på hele siden.
       Samme billede som WebP (99 kB) med JPEG-fallback (201 kB) for browsere
       uden image-set(). Første background: er fallback'en; anden linje vinder
       hvor image-set() forstås. */
    .hero {
      background:
        linear-gradient(90deg, rgba(8,14,4,.88) 0%, rgba(8,14,4,.66) 42%, rgba(8,14,4,.25) 75%, rgba(8,14,4,0) 100%),
        url('../Baggrund.jpg') center/cover no-repeat;
      background:
        linear-gradient(90deg, rgba(8,14,4,.88) 0%, rgba(8,14,4,.66) 42%, rgba(8,14,4,.25) 75%, rgba(8,14,4,0) 100%),
        image-set(url('../Baggrund.webp') type('image/webp'), url('../Baggrund.jpg') type('image/jpeg')) center/cover no-repeat;
      color: #fff;
      padding: clamp(4.5rem, 11vw, 9rem) var(--section-x);
      display: grid; grid-template-columns: 1fr; gap: 3rem;
      align-items: center; min-height: min(78vh, 660px);
    }
    .hero-content { max-width: 640px; }
    .hero-content h1,
    .hero-content > p,
    .hero-eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.6); }
    @media (max-width: 720px) {
      .hero {
        text-align: center;
        background:
          linear-gradient(rgba(8,14,4,.72), rgba(8,14,4,.72)),
          url('../Baggrund.jpg') center/cover no-repeat;
        background:
          linear-gradient(rgba(8,14,4,.72), rgba(8,14,4,.72)),
          image-set(url('../Baggrund.webp') type('image/webp'), url('../Baggrund.jpg') type('image/jpeg')) center/cover no-repeat;
      }
      .hero-content { margin: 0 auto; }
    }
    /* Eyebrow og fremhævning i overskriften var --lime (#a8cc64) og --peach
       (#e8a87c): to lyse, mættede farver oven på et mørkt foto. De to var det
       mest iøjnefaldende på hele forsiden og trak udtrykket mod "startup".
       Nu adskilles de i TONE i stedet for i kulør — hvidt i tre styrker. */
    .hero-eyebrow {
      font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
      color: rgba(255,255,255,.72); font-weight: 500; margin-bottom: 1.1rem;
    }
    .hero h1 {
      font-size: clamp(1.85rem, 4.6vw, 3.6rem); font-weight: 600;
      letter-spacing: var(--tracking-head);
      line-height: 1.08; margin-bottom: 1.35rem;
    }
    .hero h1 span { color: rgba(255,255,255,.72); }
    .hero p { font-size: 1.02rem; opacity: .82; max-width: 460px; line-height: 1.7; margin-bottom: 2.4rem; }
    .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
    .btn {
      display: inline-block; padding: .9rem 2rem;
      border-radius: var(--radius-sm);
      font-size: .78rem; font-weight: 600;
      letter-spacing: var(--tracking-label); text-transform: uppercase;
      cursor: pointer; text-decoration: none; border: 1px solid transparent;
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
    .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
    /* .btn-outline var hardcodet til hvid tekst på en gennemsigtig flade —
       den var lavet til heroen, men bruges også på LYSE sider (guide.php
       "← Alle guides", Instagram-knappen under galleriet). Der stod den som
       hvid tekst på en næsten hvid baggrund, altså reelt usynlig.
       Standarden er nu den lyse variant; heroen overskriver den. */
    .btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
    .btn-outline:hover { background: var(--accent); color: #fff; }
    .hero .btn-outline, .maint-hero .btn-outline {
      color: #fff; border-color: rgba(255,255,255,.38); background: transparent;
    }
    .hero .btn-outline:hover, .maint-hero .btn-outline:hover {
      border-color: #fff; background: rgba(255,255,255,.12); color: #fff;
    }
    /* ── SECTIONS ── */
    section { padding: var(--section-y) var(--section-x); scroll-margin-top: var(--nav-h); }
    .section-header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
    .section-header h2 {
      font-size: clamp(1.75rem, 3.6vw, 2.9rem); font-weight: 600;
      letter-spacing: var(--tracking-head); line-height: 1.15;
    }
    .section-header p { color: var(--muted); margin-top: .85rem; max-width: 560px; margin-inline: auto; }

    /* ── PRODUCTS ── */
    #produkter { background: var(--bg); }
    .filter-bar {
      display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;
      margin-bottom: 2.25rem;
    }
    .filter-btn {
      padding: .55rem 1.1rem; border-radius: var(--radius-sm);
      font-size: .74rem; letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600;
      border: 1px solid var(--border); background: transparent;
      cursor: pointer; color: var(--muted); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .filter-btn.active {
      background: var(--accent); border-color: var(--accent); color: #fff;
    }
    .product-search {
      display: flex; justify-content: center; margin-bottom: 1.4rem;
    }
    /* Søgefeltet havde 🔍 i sin placeholder. Ikonet hører i fladen, ikke i
       teksten: emoji tegnes af styresystemet og kan hverken tage butikkens
       farve eller stå ens på tværs af enheder. */
    .product-search-field { position: relative; width: 100%; max-width: 460px; }
    .product-search-field svg {
      position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
      width: 17px; height: 17px; color: var(--muted); pointer-events: none;
    }
    .product-search input {
      width: 100%;
      padding: .8rem 1rem .8rem 2.75rem; border-radius: var(--radius-sm);
      border: 1px solid var(--border); background: var(--surface);
      font-size: .92rem; font-family: inherit; color: inherit;
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    .product-search input:focus { border-color: var(--accent);
    }
    /* ── ANMELDELSER ── */
    .stars { color: var(--star); letter-spacing: 2px; }
    .pd-rating {
      display: inline-flex; align-items: center; gap: .4rem;
      margin: .35rem 0 .5rem; font-size: .9rem; color: var(--muted);
      text-decoration: none;
    }
    .pd-rating:hover { color: var(--accent); }
    .reviews { max-width: 1000px; margin: 3rem auto 0; }
    .reviews-avg { font-size: 1.05rem; margin-bottom: 1.25rem; }
    .review {
      border-top: 1px solid var(--border); padding: 1rem 0;
    }
    .review-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
    .review-date { font-size: .8rem; color: var(--muted); }
    /* Verificeret køb: sat af serveren når anmelderens mail matcher en ordre
       på netop dette produkt. Selve mailen forlader aldrig serveren. */
    .review-verified {
      display: inline-flex; align-items: center; gap: .25rem;
      background: var(--green-bg); color: var(--green); font-size: .72rem; font-weight: 700;
      padding: .12rem .5rem; border-radius: 20px; white-space: nowrap;
    }
    .review-email-hint {
      font-size: .78rem; color: var(--muted); line-height: 1.5;
      margin: -.35rem 0 .15rem;
    }
    .review-email-hint a { color: var(--accent); }
    .review-text { white-space: pre-wrap; color: var(--text, inherit); }
    .review-form {
      margin-top: 2rem; padding: 1.5rem; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius);
      display: flex; flex-direction: column; gap: .75rem; max-width: 540px;
    }
    .review-form h3 { margin-bottom: .25rem; }
    .review-form input, .review-form textarea {
      padding: .65rem .85rem; border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; color: inherit;
      background: var(--bg, #fff);
    }
    .review-form input:focus, .review-form textarea:focus { border-color: var(--accent); }
    .review-form button { align-self: flex-start; }
    .review-stars-input { font-size: 1.8rem; color: var(--star-pick); cursor: pointer; user-select: none; line-height: 1; }
    .review-stars-input span { padding: 0 .05rem; }
    /* Spring-til-indhold for tastatur/skærmlæser: skjult indtil den får fokus. */
    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 100000;
      background: var(--accent); color: #fff; padding: .7rem 1.2rem;
      border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
    }
    .skip-link:focus { left: 0; }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
      gap: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.2vw, 2rem);
      /* 1100px + 24px gap gav plads til præcis 3 kort (4×260+3×24 = 1112), så en
         1440px-skærm viste tre kort og ~340px tom margen i hver side.
         Fire kort skal stadig kunne stå på en bred skærm: 4×272 + 3×32 = 1184. */
      max-width: 1320px; margin: 0 auto;
    }
    /* Kortet var en kasse: ramme OG skygge OG hover-løft OG en skillestreg
       inde i sig selv. Det gav fire konkurrerende kanter omkring hvert
       produkt, så rammen — ikke varen — var det man så. Nu bærer billedet
       kortet, og teksten står stille nedenunder uden nogen kasse omkring.
       (Husets regel: har et element både border og skygge, gør den ene
       ingen gavn.) */
    .product-card {
      background: transparent; border: none; box-shadow: none;
      display: flex; flex-direction: column;
    }
    .product-card[data-hidden="true"] { display: none; }
    .product-img {
      width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      background: var(--clay-light); position: relative; overflow: hidden;
    }
    .product-img svg { width: 60%; height: 60%; opacity: .7; }
    /* Zoom aldrig mere end 1.03: derover skifter kortet selv højde et par
       pixels og teksten under billedet flimrer. */
    .product-img img { transition: transform var(--dur-slow) var(--ease-out); }
    .product-card:hover .product-img img { transform: scale(1.03); }
    .product-card:hover .product-name { color: var(--accent); }
    .product-badge {
      position: absolute; top: .8rem; left: .8rem;
      background: var(--accent); color: #fff;
      font-size: .64rem; font-weight: 700; padding: .3rem .6rem;
      border-radius: var(--radius-xs); letter-spacing: var(--tracking-label);
      text-transform: uppercase;
    }
    /* Strukturerede tags (vælges pr. produkt i admin) */
    .product-badge.tag-ny         { background: var(--tag-ny); }
    .product-badge.tag-bestseller { background: var(--tag-best); }
    .product-badge.tag-tilbud     { background: var(--tag-tilbud); }
    .product-body { padding: 1.05rem 0 0; flex: 1; display: flex; flex-direction: column; }
    .product-cat { font-size: .68rem; color: var(--clay); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: .45rem; }
    .product-name {
      font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .4rem;
      transition: color var(--dur-fast) var(--ease-out);
    }
    /* Uddraget har fri længde og gjorde rækkerne takkede, fordi hvert kort
       fik sin egen højde. To linjer og ikke mere: gitteret får en rolig
       grundlinje, og teksten er stadig med. */
    .product-desc {
      font-size: .84rem; color: var(--muted); flex: 1; line-height: 1.6;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      line-clamp: 2; overflow: hidden;
    }
    .product-footer {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: .6rem; margin-top: .9rem;
    }
    .product-price { font-size: 1.02rem; font-weight: 600; color: var(--text); }
    /* Knappen var en fyldt grøn pille og var dermed det kraftigste element på
       hele kortet — kraftigere end produktbilledet. Den er stadig synlig og
       lige så let at ramme (den skjules IKKE bag hover: så ville den være
       usynlig på telefon og et blindt klikmål på desktop), men den er nu
       rolig i hvile og fylder først ved berøring. */
    .add-btn {
      background: transparent; color: var(--accent); border: 1px solid var(--accent);
      border-radius: var(--radius-sm); padding: .5rem 1rem;
      font-size: .72rem; font-weight: 600;
      letter-spacing: var(--tracking-label); text-transform: uppercase;
      cursor: pointer; white-space: nowrap;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }
    .add-btn:hover { background: var(--accent); color: #fff; }
    .add-btn:active { transform: scale(.96); }
    /* Restordre: varen kan bestilles, men er ikke på lager. Lå før som en
       inline style="background:var(--muted)" på knappen — med den nye
       outline-knap ville den inline-baggrund give grøn tekst på mørkegrå. */
    .add-btn.is-backorder { background: var(--muted); border-color: var(--muted); color: #fff; }
    .add-btn.is-backorder:hover { background: var(--text); border-color: var(--text); }

    /* ── FEATURES ── */
    #features { background: var(--surface); }
    .features-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 1.75rem; max-width: 1000px; margin: 0 auto;
    }
    @media (max-width: 860px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 440px) { .features-grid { grid-template-columns: 1fr; } }
    .feature { text-align: center; }
    /* Den fyldte accent-flade bag ikonet gjorde fire små farveklatter til det
       tungeste i sektionen. En hårfin ring bærer det samme uden at råbe. */
    .feature-icon {
      width: 54px; height: 54px; border-radius: var(--radius-lg);
      background: transparent; border: 1px solid var(--border);
      margin: 0 auto 1.15rem;
      display: flex; align-items: center; justify-content: center;
    }
    .feature-icon svg { width: 24px; height: 24px; color: var(--accent); }
    .feature h3 { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; letter-spacing: -.005em; }
    .feature p { font-size: .87rem; color: var(--muted); line-height: 1.65; }

    /* ── OM OS ──
       Var to spalter: tekst til venstre, en håndtegnet 3D-printer i SVG til
       højre. Illustrationen var tegnet med den GAMLE ler-orange accent
       (#c1440e/#8b4513/#a0522d), altså hardcodede farver der ikke fulgte
       nogen af de otte paletter. Den er væk; sektionen er nu én rolig
       tekstspalte med luft omkring. */
    #om-os { background: var(--clay-light); }
    .about-grid {
      display: grid; grid-template-columns: 1fr; gap: 3rem;
      align-items: center; max-width: 720px; margin: 0 auto; text-align: center;
    }
    .about-text h2 {
      font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 600;
      letter-spacing: var(--tracking-head); line-height: 1.15; margin-bottom: 1.35rem;
    }
    .about-text p { color: var(--muted); margin-bottom: 1rem; font-size: 1rem; line-height: 1.75; }
    /* Tallene stod i fire hvide kasser med skygge — et konverterings-greb der
       hører til i en discountbutik. Samme tal, ingen kasser. */
    .about-stats {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 2rem clamp(2.25rem, 6vw, 4rem); margin-top: 2.75rem;
    }
    .stat { background: none; box-shadow: none; border-radius: 0; padding: 0; text-align: center; }
    .stat-num { font-size: 1.75rem; font-weight: 600; color: var(--text); letter-spacing: -.02em; line-height: 1.1; }
    .stat-label {
      font-size: .68rem; color: var(--muted); margin-top: .5rem;
      text-transform: uppercase; letter-spacing: var(--tracking-label);
    }

    /* ── KONTAKT ── */
    #kontakt { background: var(--surface); }
    .contact-wrap {
      display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
      max-width: 860px; margin: 0 auto;
    }
    @media (max-width: 660px) { .contact-wrap { grid-template-columns: 1fr; } }
    .contact-info h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
    .contact-item {
      display: flex; gap: .75rem; align-items: flex-start;
      margin-bottom: .9rem; font-size: .92rem; color: var(--muted);
    }
    .contact-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
    form { display: flex; flex-direction: column; gap: .75rem; }
    form label { font-size: .82rem; font-weight: 600; color: var(--text); }
    form input, form textarea, form select {
      width: 100%; padding: .65rem .85rem;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: .9rem; background: var(--bg); color: var(--text);
      transition: border-color var(--dur-base) var(--ease-out);
      font-family: inherit;
    }
    form input:focus, form textarea:focus, form select:focus { border-color: var(--accent);
    }
    form textarea { min-height: 110px; resize: vertical; }
    .form-submit {
      background: var(--accent); color: #fff; border: none;
      border-radius: var(--radius-sm); padding: .9rem 1.9rem;
      font-size: .78rem; font-weight: 600;
      letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
      align-self: flex-start;
    }
    .form-submit:hover { background: var(--accent-dark); }
    .form-msg {
      display: none; padding: .75rem 1rem; border-radius: var(--radius);
      background: var(--green-bg); color: var(--green); font-size: .87rem; font-weight: 600;
    }
    .form-msg.visible { display: block; }

    /* ── CART DRAWER ── */
    .cart-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.4);
      z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out);
    }
    .cart-overlay.open { opacity: 1; pointer-events: all; }
    .cart-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: min(400px, 100vw);
      background: var(--surface); z-index: 201;
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
      box-shadow: -4px 0 24px rgba(0,0,0,.12);
    }
    .cart-drawer.open { transform: translateX(0); }
    .cart-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
    }
    .cart-header h3 { font-size: 1.1rem; font-weight: 700; }
    .cart-close {
      background: none; border: none; cursor: pointer; color: var(--muted);
      padding: .25rem; border-radius: var(--radius-xs); transition: color var(--dur-base) var(--ease-out);
    }
    .cart-close:hover { color: var(--accent); }
    .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
    .cart-empty { text-align: center; color: var(--muted); padding: 3rem 0; font-size: .9rem; }

    /* Kryds-salg i kurven: tilbehør der passer til varerne i kurven */
    .xsell { margin-top: 1.25rem; padding-top: 1rem; border-top: 1.5px solid var(--border); }
    .xsell-title { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .6rem; }
    .xsell-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; }
    .xsell-img { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-xs); overflow: hidden; background: var(--clay-bg); display: block; }
    .xsell-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
    .xsell-name { font-size: .84rem; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.25; }
    .xsell-name:hover { color: var(--accent); }
    .xsell-price { font-size: .8rem; color: var(--accent); font-weight: 700; }
    .xsell-btn {
      flex-shrink: 0; padding: .35rem .7rem; border: 1.5px solid var(--accent); border-radius: var(--radius-xs);
      background: none; color: var(--accent); font-family: inherit; font-size: .78rem; font-weight: 700;
      cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .xsell-btn:hover { background: var(--accent); color: #fff; }
    .cart-item {
      display: flex; gap: 1rem; align-items: center;
      padding: .85rem 0; border-bottom: 1px solid var(--border);
    }
    .cart-item-img {
      width: 56px; height: 56px; border-radius: var(--radius-sm);
      background: var(--clay-light); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .cart-item-img svg { width: 32px; height: 32px; opacity: .6; }
    .cart-item-info { flex: 1; }
    .cart-item-name { font-size: .9rem; font-weight: 600; }
    .cart-item-price { font-size: .85rem; color: var(--accent); font-weight: 600; }
    .cart-qty {
      display: flex; align-items: center; gap: .5rem; margin-top: .3rem;
    }
    .qty-btn {
      width: 24px; height: 24px; border-radius: 50%;
      border: 1.5px solid var(--border); background: var(--bg);
      font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    .qty-btn:hover { border-color: var(--accent); color: var(--accent); }
    .qty-val { font-size: .85rem; font-weight: 600; min-width: 20px; text-align: center; }
    .cart-remove { background: none; border: none; cursor: pointer; color: var(--muted); padding: .25rem; }
    .cart-remove:hover { color: var(--red); }
    .cart-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border); }
    .cart-total {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 1rem; font-weight: 700; margin-bottom: 1rem;
    }
    .cart-total span:last-child { color: var(--accent); font-size: 1.2rem; }
    .checkout-btn {
      width: 100%; padding: 1rem; background: var(--accent); color: #fff;
      border: none; border-radius: var(--radius-sm);
      font-size: .82rem; font-weight: 600;
      letter-spacing: var(--tracking-label); text-transform: uppercase;
      cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
    }
    .checkout-btn:hover { background: var(--accent-dark); }
    .cart-note { font-size: .75rem; color: var(--muted); text-align: center; margin-top: .6rem; }
    /* Fragt-status i kurven. Totalen stod før nøgen, og kunden mødte først
       fragten på checkout-siden — nu vises fri-fragt-grænsen mens man handler. */
    .cart-ship-note {
      margin: -.35rem 0 .85rem; padding: .45rem .6rem; border-radius: var(--radius-sm);
      background: var(--accent-light, var(--accent-light)); color: var(--accent-dark, var(--accent));
      font-size: .78rem; text-align: center; line-height: 1.4;
    }
    .cart-ship-note.is-won { background: var(--green-bg); color: var(--green); }

    /* ── FOOTER ── */
    footer {
      margin-top: auto;              /* holder footeren i bunden på korte sider */
      background: var(--text); color: rgba(255,255,255,.7);
      padding: clamp(2.75rem, 5vw, 4rem) var(--section-x);
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1.5rem;
    }
    footer a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .8rem; }
    footer a:hover { color: #fff; }
    .footer-logo { color: #fff; font-weight: 700; font-size: 1rem; }
    /* wrap er UBETINGET: den lå tidligere kun i @media (max-width: 640px),
       så mellem 641px og ~860px stod linkene på én linje og skubbede hver
       eneste side ud i bredden (målt: 863px indhold i et 768px vindue). */
    .footer-links { display: flex; gap: .9rem 1.6rem; flex-wrap: wrap; justify-content: center; }

    /* ── CHECKOUT MODAL ── */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.5);
      z-index: 1100; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out);
    }
    .modal-overlay.open { opacity: 1; pointer-events: all; }
    .checkout-modal {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.96);
      background: #fff; border-radius: var(--radius-lg); padding: 2rem;
      width: min(500px, 94vw); max-height: 90vh; overflow-y: auto;
      z-index: 1200; box-shadow: 0 8px 40px rgba(0,0,0,.2);
      opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    .checkout-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1); }
    .checkout-modal h3 { font-size: 1.2rem; margin-bottom: 1.25rem; }
    .checkout-modal .order-summary {
      background: var(--surface-2); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .88rem;
    }
    .checkout-modal .order-summary-row { display: flex; justify-content: space-between; padding: .2rem 0; }
    .checkout-modal .order-total { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--border-soft); margin-top: .4rem; padding-top: .4rem; }
    .checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
    .checkout-fields input { grid-column: span 2; padding: .65rem .9rem; border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit; }
    .checkout-fields input.half { grid-column: span 1; }
    .checkout-fields input:focus { border-color: var(--accent); }
    .checkout-note { font-size: .78rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.5; }
    .checkout-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%);
      background: var(--text); color: #fff; padding: .65rem 1.25rem;
      border-radius: var(--radius-pill); font-size: .88rem; font-weight: 600;
      z-index: 300; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
      white-space: nowrap; box-shadow: var(--shadow-lg);
      /* Uden besked er boblen kun ~20px høj, og translateY(120%) er så ikke nok
         til at skubbe den ud af skærmen — den sad som en tom sort plet nederst
         på hver side. Den skjules derfor helt indtil der er noget at vise. */
      opacity: 0; visibility: hidden;
    }
    .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

    /* ── MOBIL ──
       Nav-skiftet ligger i sit EGET breakpoint: menupunkterne holder op med
       at passe ved ~715px, men blev først skjult ved 640px, så hver eneste
       side flød ud i bredden mellem 641 og 715 (målt: 715px indhold i et
       700px vindue). Resten af mobil-tilpasningen hører stadig til ved 640. */
    @media (max-width: 760px) {
      .nav-burger { display: flex; }
      .nav-links { display: none; }
      .nav-icons { gap: 0; margin-left: auto; }
      .nav-icon, .nav-cart { padding: .4rem; }
    }
    @media (max-width: 640px) {
      :root { --nav-h: 64px; }   /* så hero-margin/padding matcher den lavere mobil-nav */
      nav { height: var(--nav-h); gap: .4rem; padding: 0 .9rem; position: sticky; }
      .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
      .nav-logo img { height: 18px; }
      /* Hero-overskriften havde her en fast mobil-størrelse der fightede med
         clamp()'en ovenfor; clamp'ens nedre grænse gør nu arbejdet.
         .btn-outline havde en margin-left som .hero-cta's gap har overtaget. */
      footer { flex-direction: column; text-align: center; }
    }

/* ── PRODUKTDETALJE-SIDE (produkt.php) ── */
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.product-detail { display: grid; grid-template-columns: 57fr 43fr; gap: 3rem; align-items: start; }
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; gap: 1.5rem; } }
.pd-main-img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: var(--radius-lg); background: var(--clay-bg); transition: opacity var(--dur-base) var(--ease-out); }
.pd-placeholder { display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.pd-thumbs { display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }
.pd-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid var(--border); transition: border-color var(--dur-fast) var(--ease-out); }
.pd-info .product-cat { margin-bottom: .3rem; }
/* Titel og pris fulgte forsidens gamle vægt (800). Med den nye typografiske
   skala var de to tungeste ting på siden — tungere end produktbilledet.
   Prisen er desuden ikke længere accentfarvet: den grønne pris konkurrerede
   med købsknappen om at være sidens ene accent. */
.pd-title { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 600; letter-spacing: var(--tracking-head); margin-bottom: .6rem; line-height: 1.15; }
.pd-badge { position: static; display: inline-block; margin-bottom: .5rem; }
.pd-price { font-size: 1.45rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); margin-bottom: 1rem; }
.pd-desc { color: var(--muted); margin-bottom: 1.5rem; line-height: 1.7; }
.pd-desc p { margin: 0 0 1rem; }
.pd-desc p:last-child { margin-bottom: 0; }
.pd-desc strong { color: var(--text); font-weight: 700; }
.pd-desc .pd-h {
  font-size: 1.15rem; font-weight: 800; color: var(--text);
  margin: 1.75rem 0 .85rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border); line-height: 1.3;
}
.pd-desc > .pd-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pd-desc .pd-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.pd-desc .pd-list > li {
  position: relative; padding-left: 1.4rem; margin-bottom: .5rem;
}
.pd-desc .pd-list > li::before {
  content: ""; position: absolute; left: .35rem; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.pd-desc .pd-sublist { list-style: none; margin: .5rem 0 .25rem; padding: 0; }
.pd-desc .pd-sublist > li {
  position: relative; padding-left: 1.4rem; margin-bottom: .35rem; font-size: .95em;
}
.pd-desc .pd-sublist > li::before {
  content: ""; position: absolute; left: .35rem; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  border: 1.5px solid var(--accent); background: transparent;
}
.pd-desc .pd-rule { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.pd-sizes { margin-bottom: 1.5rem; }
.pd-sizes-label { font-weight: 700; margin-bottom: .75rem; font-size: .95rem; }
#pd-size-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.pd-size-btn {
  padding: .65rem 1.15rem;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  font-size: .88rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  line-height: 1.3;
}
.pd-size-btn:hover:not(:disabled):not(.sel) { border-color: var(--accent); background: #fff; box-shadow: 0 2px 8px rgba(58,107,71,.12); }
.pd-size-btn.sel { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(58,107,71,.28); }
.pd-size-btn:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* Mål pr. valgt størrelse (højde / bredde top / bredde bund) */
.pd-variant-dims {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .9rem;
}
.pd-dim-item {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .45rem .7rem;
  background: var(--surface, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 92px;
}
.pd-dim-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pd-dim-val { font-size: .95rem; font-weight: 700; color: var(--text); }

/* Tilbehør der passer til den valgte størrelse */
.pd-accessories { margin: 1.4rem 0 .5rem; }
.pd-acc-title { font-weight: 700; font-size: .95rem; margin-bottom: .7rem; }
.pd-acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .7rem;
}
.pd-acc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pd-acc-card:hover { border-color: var(--accent); box-shadow: 0 3px 12px rgba(58,107,71,.14); transform: translateY(-2px); }
.pd-acc-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.pd-acc-img { aspect-ratio: 1 / 1; background: var(--clay-bg); }
.pd-acc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-acc-info { padding: .5rem .6rem .6rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.pd-acc-name { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.pd-acc-price { font-size: .82rem; color: var(--accent); font-weight: 700; }
/* "Læg i kurv" direkte på tilbehørskortet – kunden skal ikke forlade siden */
.pd-acc-btn {
  display: block; width: 100%; box-sizing: border-box;
  padding: .5rem .4rem; border: none; border-top: 1px solid var(--border);
  background: var(--accent-light, var(--surface-2)); color: var(--accent);
  font-family: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  text-align: center; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pd-acc-btn:hover { background: var(--accent); color: #fff; }
.pd-acc-btn.is-added { background: var(--green); color: #fff; }
.pd-acc-btn-alt { font-weight: 600; }
.pd-acc-btn-off { background: var(--surface-2); color: var(--muted); cursor: default; }
.pd-acc-btn-off:hover { background: var(--surface-2); color: var(--muted); }
.pd-acc-bundle {
  margin-top: .7rem; padding: .55rem 1.1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent); background: none; color: var(--accent);
  font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pd-acc-bundle:hover { background: var(--accent); color: #fff; }
.pd-acc-group + .pd-acc-group { margin-top: 1.1rem; }

.pd-add { max-width: 320px; }
.pd-related-title { font-size: 1.3rem; font-weight: 700; margin: 3rem 0 1.5rem; }

/* ── KUNDEKONTO (konto.php) ── */
.konto-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.konto-input { width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; margin-bottom: .7rem; }
.konto-input:focus { border-color: var(--accent); }
.konto-tab { flex: 1; padding: .6rem; border: none; border-bottom: 2px solid var(--border); background: none; cursor: pointer; font-weight: 600; color: var(--muted); font-size: .95rem; }
.konto-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.konto-order { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: .6rem; }

/* ── JURIDISKE SIDER (handelsbetingelser / persondatapolitik) ── */
.legal { max-width: 760px; margin: 0 auto; }
/* clamp + break-word: "Handelsbetingelser" er ét ord på 18 tegn og flød
   ud af et 288px indholdsområde ved 320px skærmbredde. */
.legal h1 { font-size: clamp(1.35rem, 6vw, 1.9rem); font-weight: 800; margin-bottom: 1rem; letter-spacing: -.02em; }
.legal h1, .legal h2, .legal h3 { overflow-wrap: break-word; }
.legal h2 { font-size: clamp(1.02rem, 4vw, 1.15rem); font-weight: 700; margin: 1.75rem 0 .5rem; }
.legal p, .legal li { color: var(--text); line-height: 1.7; margin-bottom: .6rem; font-size: .95rem; }
.legal ul, .legal ol { padding-left: 1.25rem; margin-bottom: .6rem; }
.legal a { color: var(--accent); }
.legal-note { background: var(--accent-light); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .85rem; color: var(--accent-dark); margin-bottom: 1.5rem; }
.legal-form { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.1rem 0; font-size: .9rem; }
.legal-form p { margin-bottom: .8rem; }
.legal-updated { margin-top: 2rem; font-size: .8rem; color: var(--muted); }

/* ── Step-by-step guide ── */
.guide-steps { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: none; }
.guide-step { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.guide-step:last-child { border-bottom: none; margin-bottom: 0; }
.guide-step .step-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.guide-step .step-content { flex: 1; min-width: 0; }
.guide-step .step-title { font-size: 1.2rem; font-weight: 700; margin: .25rem 0 .6rem; }
.guide-step .step-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-lg); margin: .25rem 0 .85rem; }
.guide-step .step-text p, .guide-step .step-text li { color: var(--text); line-height: 1.7; font-size: .95rem; margin-bottom: .5rem; }
.guide-step .step-text h2 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .4rem; }
.guide-step .step-text ul, .guide-step .step-text ol { padding-left: 1.25rem; margin-bottom: .5rem; }

/* ── FAQ ── */
.faq-cat { margin-top: 2rem; }
.faq-item { border: 1.5px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; background: var(--surface); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; font-size: .98rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-size: 1.35rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-a { padding: 0 1.1rem 1rem; color: var(--muted); line-height: 1.7; font-size: .94rem; }
.faq-item .faq-a a { color: var(--accent); }

/* ── TRYGHEDSBJÆLKE ── */
/* Tryghedsbjælken var bygget af emoji (🇩🇰 🔒 ↩️ 📦). Emoji tegnes af
   styresystemet: den kan hverken tage butikkens farve eller stå ens på tværs
   af enheder, og "🔒 Sikker handel" er et discount-signal. Nu samme
   stregikoner som resten af butikken. */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.15rem clamp(2rem, 5vw, 3.5rem); padding: 1.9rem var(--section-x); background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.trust-item svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* ── BETALINGSRESULTAT ── */
.pay-result { padding: 2.5rem 0; }
.pay-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; font-size: 2rem; font-weight: 800; }
.pay-result h1 { font-size: 1.6rem; margin-bottom: .75rem; }
.pay-result p { color: var(--muted); margin-bottom: 1rem; line-height: 1.65; }

/* ── FØLG DIN ORDRE ── */
.track-form { display: flex; flex-direction: column; gap: .6rem; }
.track-form input { padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; }

/* ── KAMPAGNE-BANNER ── */
.promo-banner { display: block; background: var(--accent); color: #fff; text-align: center; padding: .6rem 1rem; font-size: .88rem; font-weight: 600; text-decoration: none; }
a.promo-banner:hover { background: var(--accent-dark); }

/* ── GALLERI "SE DEM I BRUG" ── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; max-width: 1100px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.gallery-grid .gitem { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--clay-light); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-grid a.gitem:hover img { transform: scale(1.06); }

/* ── COOKIE-BANNER ── */
.cookie-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 560px; margin: 0 auto; background: var(--text); color: #fff; border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow-lg); z-index: 300; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .85rem; line-height: 1.5; }
.cookie-banner a { color: var(--peach); }
.cookie-banner > span { flex: 1 1 240px; }
.cookie-actions { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.cookie-banner button { padding: .5rem 1.2rem; border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cookie-banner button.cookie-btn-sec { background: transparent; border: 1.5px solid rgba(255,255,255,.45); color: #fff; }

/* ── SPECIALMÅL-SIDE (specialmaal.php) ── */
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 960px; margin: 0 auto; align-items: start; }
@media (max-width: 760px) { .sp-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.sp-check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .85rem; font-size: .92rem; color: var(--text); }
.sp-check svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .15rem; }
.sp-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; margin-top: .3rem; }
.sp-msg { display: none; margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--green-bg); color: var(--green); font-size: .9rem; }
.sp-msg.visible { display: block; }
.sp-msg.error { background: var(--red-bg); color: var(--red); }

/* ── SORTERING + FILTER-RÆKKE ── */
.shop-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.shop-controls .filter-bar { margin-bottom: 0; }
.sort-select {
  padding: .55rem 2.2rem .55rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .9rem center;
  font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--text);
  cursor: pointer; -webkit-appearance: none; appearance: none; flex-shrink: 0;
}
.sort-select:focus { border-color: var(--accent); }
@media (max-width: 560px) { .sort-select { width: 100%; } }

/* ── ØNSKELISTE-HJERTE PÅ PRODUKTKORT ── */
.wish-heart {
  position: absolute; top: .65rem; right: .65rem; z-index: 3;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wish-heart svg { width: 19px; height: 19px; fill: none; stroke: var(--heart-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill var(--dur-fast) var(--ease-out), stroke var(--dur-fast) var(--ease-out); }
.wish-heart:hover { transform: scale(1.12); background: #fff; }
.wish-heart.on svg { fill: var(--heart); stroke: var(--heart); }

/* ── ØNSKELISTE-DRAWER (genbruger .cart-drawer) ── */
.wish-add {
  display: inline-block; margin-top: .4rem; padding: .35rem .85rem; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out);
}
.wish-add:hover { opacity: .9; }

/* ── "GEM PÅ ØNSKELISTE"-KNAP PÅ PRODUKTSIDE ── */
.pd-wish {
  margin-top: .85rem; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: .65rem 1.1rem; font-family: inherit; font-size: .92rem; font-weight: 600;
  color: var(--text); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pd-wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: fill var(--dur-fast) var(--ease-out); }
.pd-wish:hover { border-color: var(--heart); color: var(--heart); }
.pd-wish.on { border-color: var(--heart); color: var(--heart); }
.pd-wish.on svg { fill: var(--heart); }
.pd-wish.on .pd-wish-txt::after { content: " ✓"; }

/* ── SENEST SET-SEKTION ── */
.recent-section { margin-top: 1rem; }

/* ── Del-knapper ─────────────────────────────────────────── */
.pd-share { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.pd-share-label { font-size: .8rem; color: var(--muted); }
.share-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; padding: .3rem .75rem;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  color: var(--text); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.share-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

/* ── Antal-vælger (produktside) ───────────────────────────── */
.pd-qty-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .25rem 0; }
.pd-qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pd-qty-btn { background: none; border: none; padding: .5rem .9rem; font-size: 1.1rem; cursor: pointer; color: var(--text); transition: background var(--dur-fast) var(--ease-out); }
.pd-qty-btn:hover { background: var(--accent-light); }
.pd-qty-input { width: 2.5rem; text-align: center; border: none; font-size: .95rem; font-weight: 600; font-family: inherit; color: var(--text); padding: 0; background: transparent; }

/* ── Footer sociale links ─────────────────────────────────── */
.footer-social { display: flex; gap: .75rem; margin: .6rem 0; }
.social-link { color: rgba(255,255,255,.7); transition: color var(--dur-fast) var(--ease-out); }
.social-link:hover { color: #fff; }

/* ── Betalingsmærker i footer/checkout ────────────────────────
   Kortmærkerne vises kun når kortbetaling faktisk er slået til (se
   vs_pay_badges i chrome.php) — ellers lovede footeren betalingsformer
   butikken ikke tog imod. */
.footer-pay { display: flex; align-items: center; margin: .4rem 0 .6rem; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.footer-pay-label { font-size: .78rem; color: rgba(255,255,255,.55); margin-right: .2rem; }
/* Brandfarverne herunder er MobilePay, Dankort og VISA's egne og skal blive
   literaler — de må ikke følge butikkens tema. Samme regel som stregkoden. */
.pay-badge {
  display: inline-block; background: #5a2ba3; color: #fff;
  font-size: .78rem; font-weight: 700; padding: .2rem .7rem;
  border-radius: var(--radius-xs); letter-spacing: .03em; white-space: nowrap;
}
.pay-dankort { background: #c8102e; }
.pay-visa    { background: #1a1f71; font-style: italic; letter-spacing: .08em; }
.pay-mc      { background: var(--dark); }
/* Samme mærker i checkout, hvor baggrunden er lys */
.co-pay-row { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin: .1rem 0 .75rem; }
.co-pay-row .pay-badge { font-size: .7rem; padding: .15rem .55rem; }

/* ── Lightbox / billedeforstørrelse ───────────────────────── */
.pd-lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.88);
  z-index: 9000; align-items: center; justify-content: center;
}
.pd-lightbox.open { display: flex; }
.pd-lightbox-inner {
  position: relative; max-width: min(94vw, 1000px); max-height: 90vh;
}
.pd-lightbox-inner img {
  max-width: 100%; max-height: 88vh; object-fit: contain;
  border-radius: var(--radius-sm); display: block;
}
.pd-lightbox-close {
  position: absolute; top: -1.6rem; right: -.5rem;
  background: none; border: none; color: #fff; font-size: 1.5rem;
  cursor: pointer; line-height: 1; padding: .25rem .5rem;
}

/* ── Digitalt produkt note ────────────────────────────────── */
.pd-digital-note { font-size: .85rem; color: var(--green); font-weight: 600; margin: .3rem 0; }

    /* ── Forside: gennemsigtig nav oven på hero-foto (billedet starter i toppen) ── */
    body.home nav {
      background: linear-gradient(to bottom, rgba(8,14,4,.5) 0%, rgba(8,14,4,0) 100%);
      transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
    }
    /* Ingen bundkant mens nav er gennemsigtig — den 1px (transparente) kant gav
       ellers en synlig mørk komposit-streg lige under menuen over hero-fotoet. */
    body.home nav:not(.scrolled) { border-bottom-width: 0; }
    /* Træk hero op under nav, så fotoet går helt til toppen; ekstra top-luft
       så hero-teksten ikke ligger under menuen. */
    body.home .hero {
      margin-top: calc(-1 * var(--nav-h));
      padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vw, 3.5rem));
    }
    /* Lyse nav-elementer mens menuen er gennemsigtig over det mørke foto */
    body.home nav:not(.scrolled) .nav-links a,
    body.home nav:not(.scrolled) .nav-icon,
    body.home nav:not(.scrolled) .nav-cart,
    body.home nav:not(.scrolled) .nav-burger { color: #fff; }
    body.home nav:not(.scrolled) .nav-links a:hover,
    body.home nav:not(.scrolled) .nav-cart:hover,
    body.home nav:not(.scrolled) .nav-icon:hover { color: var(--peach); }
    body.home nav:not(.scrolled) .nav-icon:hover { background: rgba(255,255,255,.12); }
    body.home nav:not(.scrolled) .cart-badge { background: #fff; color: var(--accent); }
    body.home nav:not(.scrolled) .nav-logo img { filter: invert(1) brightness(1.8); }
    /* Når man scroller forbi toppen → massiv hvid nav (læsbar over indholdet) */
    body.home nav.scrolled {
      background: var(--surface);
      border-bottom-color: var(--border);
    }

    /* ── Gratis download-knapper (produktside, én pr. fil) ─────── */
    .pd-free-dl { margin: .6rem 0 .25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
    .pd-free-dl-title { flex: 1 1 100%; font-weight: 700; font-size: .9rem; margin: 0 0 .1rem; }
    .pd-dl-btn {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .65rem 1.3rem; border-radius: var(--radius-sm);
      font-weight: 600; font-size: .9rem; text-decoration: none;
      border: 2px solid var(--accent); color: var(--accent);
      background: var(--accent-light); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .pd-dl-btn:hover { background: var(--accent); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   FORBEDRET PRODUKTSIDE v2  (Shopify-inspireret redesign)
══════════════════════════════════════════════════════════════════════ */

/* Side-wrapper + container */
.pd-page { scroll-margin-top: var(--nav-h); padding: 2.5rem 0 5rem; }
.pd-container { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.pd-page .reviews { max-width: none; }
.pd-page .product-grid { max-width: none; }

/* Sticky galleri-kolonne på desktop */
.pd-gallery { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 760px) { .pd-gallery { position: static; } }
.pd-illustrative-note { display: flex; align-items: flex-start; gap: .4rem; margin-top: .7rem; font-size: .78rem; line-height: 1.45; color: var(--muted); font-style: italic; }
.pd-illustrative-note svg { flex-shrink: 0; margin-top: .12rem; color: var(--muted); }

/* Wrap til pil-knapper og tæller */
.pd-gallery-wrap { position: relative; }

/* Fade-transition ved billedskift */
.pd-img-fading { opacity: 0 !important; }

/* Pile-knapper */
.pd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255,255,255,.9); border: none; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out); color: var(--text);
}
.pd-arrow:hover { background: #fff; }
.pd-arrow:disabled { opacity: .2; cursor: default; pointer-events: none; }
.pd-prev { left: .75rem; }
.pd-next { right: .75rem; }

/* Billedtæller (1 / 3) */
.pd-img-counter {
  position: absolute; bottom: .75rem; right: .9rem;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: .75rem; font-weight: 600; padding: .22rem .6rem;
  border-radius: var(--radius-pill); pointer-events: none; letter-spacing: .03em;
}

/* Thumbnail-klasse (erstatter generel img-selektor) */
.pd-thumb { border-radius: var(--radius-sm); cursor: pointer; }
.pd-thumb-active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pd-thumb:hover:not(.pd-thumb-active) { border-color: var(--muted); }

/* Pris-wrap (pris + inkl. moms) */
.pd-price-wrap { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .9rem; }
.pd-vat-note { font-size: .8rem; color: var(--muted); }

/* Meta-række (rating + badge side om side) */
.pd-meta-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .7rem; }

/* Lavt lager-advarsel */
.pd-stock-low {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--warn);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm); padding: .55rem .85rem; margin-bottom: .9rem;
}
.pd-stock-low svg { flex-shrink: 0; color: var(--warn); }

/* Tryghedsbadges */
.pd-trust {
  display: flex; flex-wrap: wrap; gap: .55rem 1.25rem;
  margin: 1.25rem 0; padding: .85rem 1rem;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius);
}
.pd-trust-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--text); font-weight: 500;
}
.pd-trust-item svg { color: var(--accent); flex-shrink: 0; }

/* Handlingsrække: ønskeliste + del side om side */
.pd-actions-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.pd-actions-row .pd-wish { margin-top: 0; }
.pd-actions-row .pd-share { margin-top: 0; }

/* Levering/retur-accordion */
.pd-accord { border: 1.5px solid var(--border); border-radius: var(--radius); margin-top: 1.1rem; overflow: hidden; }
.pd-accord-item { border-top: 1px solid var(--border); }
.pd-accord-item:first-child { border-top: none; }
.pd-accord-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text); text-align: left;
}
.pd-accord-toggle:hover { background: var(--bg); }
.pd-accord-toggle svg { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.pd-accord-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pd-accord-body { padding: 0 1rem 1rem; font-size: .875rem; color: var(--muted); line-height: 1.75; display: none; }
.pd-accord-body.open { display: block; }
.pd-accord-body a { color: var(--accent); }
.pd-accord-body p + p { margin-top: .4rem; }

/* Sticky "Læg i kurv"-bjælke */
.pd-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: .75rem 1.25rem; box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.pd-sticky-bar.visible { transform: translateY(0); }
.pd-sticky-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
.pd-sticky-thumb { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.pd-sticky-title { flex: 1; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pd-sticky-price { font-weight: 800; font-size: 1.1rem; color: var(--accent); flex-shrink: 0; }
.pd-sticky-bar .checkout-btn { flex: 0 1 auto; width: auto; padding: .65rem 1.4rem !important; white-space: nowrap; }
@media (max-width: 480px) {
  .pd-sticky-title { display: none; }
  .pd-sticky-bar { padding: .6rem .85rem; }
  .pd-sticky-inner { gap: .6rem; }
  .pd-sticky-thumb { width: 40px; height: 40px; }
  .pd-sticky-price { font-size: 1rem; }
  .pd-sticky-bar .checkout-btn { flex: 1 1 auto; padding: .75rem .6rem !important; }
}

/* Størrelses-pulse animation (sticky bar → scroll til varianter) */
@keyframes pdSizePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
}
.pd-size-pulse { animation: pdSizePulse .35s ease 2; }

/* Anmeldelsesresumé med stjerne-fordeling */
.rev-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center;
  margin-bottom: 2rem; padding: 1.5rem;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
}
@media (max-width: 560px) { .rev-summary { grid-template-columns: 1fr; gap: 1rem; } }
.rev-avg-block { text-align: center; min-width: 110px; }
.rev-avg-num { font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--text); display: block; font-family: var(--font-head); }
.rev-avg-stars { font-size: 1.35rem; letter-spacing: 2px; margin: .3rem 0 .2rem; }
.rev-avg-count { font-size: .82rem; color: var(--muted); }
.rev-dist { display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.rev-dist-row { display: flex; align-items: center; gap: .65rem; }
.rev-dist-label { min-width: 24px; text-align: right; font-size: .8rem; color: var(--muted); }
.rev-dist-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.rev-dist-fill { height: 100%; background: var(--star); border-radius: 4px; }
.rev-dist-count { min-width: 16px; font-size: .8rem; color: var(--muted); }

/* Honeypot mod bots: usynligt felt som rigtige brugere aldrig ser/udfylder.
   Undgå display:none — nogle bots springer skjulte felter over; her flyttes
   feltet blot ud af syne, men er stadig i DOM'en og "udfyldbart" for bots. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ══════════════════════════════════════════════════════════════════
   FÆLLES TILSTANDE  —  se .claude/skills/vs-ui/
   Ligger til sidst med vilje: reglerne skal kunne vinde over de
   komponent-specifikke regler ovenfor uden brug af !important.
   ══════════════════════════════════════════════════════════════════ */

/* ── Fokus ────────────────────────────────────────────────────────
   Otte regler slog tidligere tastaturets fokusring fra med
   "outline: none" og satte kun en border-color i stedet. Knapper,
   links og produktkort havde dermed INGEN synlig fokus. Browseren
   viser kun ringen ved tastatur-fokus, så den koster en musebruger
   ingenting. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
footer :focus-visible, .hero :focus-visible, .test-banner :focus-visible { outline-color: #fff; }
.cart-drawer :focus-visible, .checkout-modal :focus-visible { outline-offset: 1px; }

/* ── Tryk-feedback ────────────────────────────────────────────────
   Feedback hører på tryk, ikke på slip. .add-btn gjorde det allerede
   rigtigt; resten af knapperne gjorde ikke. */
.btn:active:not(:disabled),
.checkout-btn:active:not(:disabled),
.filter-btn:active,
.pd-size-btn:active:not(:disabled),
.pd-qty-btn:active,
.wish-heart:active,
.pd-wish:active,
.cart-close:active,
.acc-btn:active { transform: scale(.97); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: none; }

/* Disabled skal stadig kunne LÆSES. "Udsolgt" stod som hvid tekst på #ccc
   (kontrast 1.61:1) fra en inline style — ordet var reelt væk. Formelt er
   disabled undtaget WCAG 1.4.3, men kunden skal kunne se hvorfor hun ikke
   kan købe. */
.btn:disabled, .checkout-btn:disabled, .add-btn:disabled {
  cursor: not-allowed; transform: none; box-shadow: none;
  background: var(--border) !important;
  color: var(--text) !important;
  border-color: var(--border);
}

/* ── Aktiv tilstand slår hover ────────────────────────────────────
   En :hover-regel har mindst samme specificitet som en tilstands-
   klasse og kan overtage den — og på touch hænger :hover fast efter
   et tap, så et valgt punkt kan se uvalgt ud. .pd-size-btn lærte os
   det; her er resten. */
.filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.sort-select:hover:not(:focus) { border-color: var(--accent); }

/* ── Touch ────────────────────────────────────────────────────────
   Butikken bruges overvejende på telefon, så rammerne løftes til
   44 px hele vejen — ikke kun ved grov pegeenhed. */
@media (pointer: coarse) {
  .filter-btn { padding: .6rem 1.1rem; }
  .cart-close, .wish-heart, .pd-qty-btn { min-width: 44px; min-height: 44px; }
  .footer-links a, .nav-links a { padding: .35rem 0; display: inline-block; }
}

/* ── Typografi ────────────────────────────────────────────────────
   Tracking er størrelsesafhængig, og tal der skifter sættes med
   tabular-nums så de ikke rykker i bredden ved opdatering. */
.product-price, .pd-price, .cart-total, .co-total { font-variant-numeric: tabular-nums; }

/* ── Reduced motion ───────────────────────────────────────────────
   Ikke "ingen feedback" — blidere feedback. Farve og opacity bliver,
   flytning og skalering går. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }          /* sat ubetinget i toppen af filen */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn:active, .product-card:hover,
  .product-card:hover .product-img img,
  .checkout-btn:active, .filter-btn:active,
  .pd-size-btn:active, .gallery-grid img { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   TEMAER OG FARVEPALETTER
   Sættes som data-theme / data-palette på <html>. Temaet styrer FORM
   (radius, skygge, skrift, bevægelse, luft), paletten styrer FARVE —
   de to akser er uafhængige, så alle 25 kombinationer virker.
   En egen temafarve fra Indstillinger sættes som inline style på
   <html> og vinder derfor over paletten, som den skal.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. TEMAER (form) ─────────────────────────────────────────────
   Serif-stakken er bevidst system-fonte: butikken må ikke hente flere
   eksterne filer (CSP + hastighed), og Georgia/Iowan findes overalt. */
:root {
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Studio — standard: blød, varm, afrundet */
:root[data-theme="studio"] {
  --radius-xs: 6px; --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-pill: 50px;
  --shadow: 0 2px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --font-head: 'Hanken Grotesk', system-ui, sans-serif;
  --dur-fast: .13s; --dur-base: .19s; --dur-slow: .3s;
}

/* Galleri — editorial: skarpe hjørner, serif, hårfine streger, ingen skygger */
:root[data-theme="galleri"] {
  --radius-xs: 0px; --radius-sm: 0px; --radius: 2px; --radius-lg: 2px; --radius-pill: 2px;
  --shadow: 0 1px 0 rgba(0,0,0,.06); --shadow-lg: 0 2px 0 rgba(0,0,0,.08);
  --font-head: var(--serif);
  --dur-fast: .16s; --dur-base: .24s; --dur-slow: .36s;
}
:root[data-theme="galleri"] h1,
:root[data-theme="galleri"] h2 { font-weight: 600; letter-spacing: -.015em; }
:root[data-theme="galleri"] .card { box-shadow: none; border: 1px solid var(--border); }
:root[data-theme="galleri"] { --section-y: clamp(5rem, 10vw, 8.5rem); }

/* Atelier — modebutik: rektangulært, versaler med bred sperring, høj kontrast */
:root[data-theme="atelier"] {
  --radius-xs: 0px; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px;
  --shadow: 0 1px 6px rgba(0,0,0,.07); --shadow-lg: 0 10px 30px rgba(0,0,0,.14);
  --font-head: 'Hanken Grotesk', system-ui, sans-serif;
  --dur-fast: .1s; --dur-base: .15s; --dur-slow: .24s;
}
:root[data-theme="atelier"] h1,
:root[data-theme="atelier"] h2 { font-weight: 800; letter-spacing: -.03em; }
:root[data-theme="atelier"] .btn,
:root[data-theme="atelier"] .checkout-btn,
:root[data-theme="atelier"] .add-btn { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 700; }
:root[data-theme="atelier"] .hero-eyebrow { letter-spacing: .22em; }
:root[data-theme="atelier"] .section-header h2 { text-transform: uppercase; letter-spacing: .06em; }

/* Nordisk — minimal: næsten ingen skygge, hårfine streger, meget luft */
:root[data-theme="nordisk"] {
  --radius-xs: 3px; --radius-sm: 4px; --radius: 5px; --radius-lg: 6px; --radius-pill: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.045); --shadow-lg: 0 4px 14px rgba(0,0,0,.07);
  --font-head: 'Hanken Grotesk', system-ui, sans-serif;
  --dur-fast: .15s; --dur-base: .22s; --dur-slow: .32s;
}
:root[data-theme="nordisk"] h1,
:root[data-theme="nordisk"] h2 { font-weight: 600; letter-spacing: -.01em; }
:root[data-theme="nordisk"] .card { box-shadow: none; border: 1px solid var(--border-soft); }
:root[data-theme="nordisk"] { --section-y: clamp(5.5rem, 11vw, 9.5rem); }
:root[data-theme="nordisk"] .btn { font-weight: 600; }

/* Boutique — luksus: store radier, dybe bløde skygger, serif, generøs luft */
:root[data-theme="boutique"] {
  --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 22px; --radius-pill: 50px;
  --shadow: 0 4px 18px rgba(30,22,14,.10); --shadow-lg: 0 18px 48px -12px rgba(30,22,14,.24);
  --font-head: var(--serif);
  --dur-fast: .16s; --dur-base: .26s; --dur-slow: .4s;
}
:root[data-theme="boutique"] h1,
:root[data-theme="boutique"] h2 { font-weight: 600; letter-spacing: -.02em; }
:root[data-theme="boutique"] .btn,
:root[data-theme="boutique"] .checkout-btn { padding-block: 1rem; }
:root[data-theme="boutique"] { --section-y: clamp(5.5rem, 11vw, 9.5rem); }

/* Laboratorium — apotek/laboratorium. Monospace-mærkater, versaler med bred
   sperring, nul runde hjørner, ingen skygger, hårfine streger.
   Inspireret af Le Labo. To bevidste afvigelser fra forlægget:
   (1) BRØDTEKST bliver ikke monospace — handelsbetingelserne er 2.000 ord, og
       monospace er hårdt at læse i lange afsnit. Monospace bruges hvor det
       bærer udtrykket: overskrifter, mærkater, knapper, priser, produktnavne.
   (2) Baggrunden forbliver lys. Le Labos nær-sorte lærred kræver at hele
       fladen vendes om, og det hører til på palet-aksen, ikke her. */
:root[data-theme="laboratorium"] {
  --radius-xs: 0px; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px;
  --shadow: none; --shadow-lg: none;
  --font-head: var(--mono);
  --dur-fast: .12s; --dur-base: .18s; --dur-slow: .28s;
}
:root[data-theme="laboratorium"] h1,
:root[data-theme="laboratorium"] h2,
:root[data-theme="laboratorium"] .section-header h2 {
  text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.5rem); line-height: 1.35;
}
:root[data-theme="laboratorium"] .btn,
:root[data-theme="laboratorium"] .checkout-btn,
:root[data-theme="laboratorium"] .add-btn,
:root[data-theme="laboratorium"] .filter-btn,
:root[data-theme="laboratorium"] .product-cat,
:root[data-theme="laboratorium"] .product-badge,
:root[data-theme="laboratorium"] .hero-eyebrow,
:root[data-theme="laboratorium"] .product-price,
:root[data-theme="laboratorium"] .pd-price {
  font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
:root[data-theme="laboratorium"] .btn,
:root[data-theme="laboratorium"] .checkout-btn,
:root[data-theme="laboratorium"] .add-btn { font-size: .74rem; font-weight: 700; }
:root[data-theme="laboratorium"] .product-name {
  font-family: var(--mono); letter-spacing: .06em; font-size: .84rem; font-weight: 700;
}
:root[data-theme="laboratorium"] .nav-links a,
:root[data-theme="laboratorium"] .footer-links a {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
}
:root[data-theme="laboratorium"] .product-card,
:root[data-theme="laboratorium"] .card { box-shadow: none; border: 1px solid var(--border); }
:root[data-theme="laboratorium"] .product-card:hover { box-shadow: none; border-color: var(--accent); }
:root[data-theme="laboratorium"] section { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* ── 2. FARVEPALETTER ─────────────────────────────────────────────
   --peach og --lime står IKKE her: de sidder kun på hero-fotoet, den
   mørke vedligeholdelsesside og cookie-banneret, altså aldrig på en
   palet-flade. De arver derfor :root i alle paletter.
   --clay blev første gang afledt som bland(accent, text, 25%) — en formel
   der pr. definition kun kan ramme MELLEM de to farver den skal skelnes
   fra. Kontrasten til --text faldt fra 4.92 til 1.35, så kategorinavnet
   fik samme vægt som produktnavnet under det. Værdierne er nu håndvalgte
   med accentens kulør, halveret mætning og lyshed sat efter kontrast.
   Alle er kontrast-verificeret: accent som tekst på hvid OG på bg,
   hvid tekst på accent, accent-dark på hvid og muted på bg ligger
   alle over 4.5:1; brødtekst over 7:1. */
/* Skovgrøn — standard.
   Værdierne herunder er PRÆCIS dem der står i :root øverst i filen, ikke
   afledte. Første udgave af paletterne regnede dem ud af accentfarven, og
   det ændrede 11 af 17 tokens for ALLE kunder — også dem der aldrig havde
   valgt en palet. Butikkens varme toner (fersken i hero, lys ler under
   produktbillederne, salviegrøn kategoritekst) blev til afdæmpet grønt.
   Skovgrøn skal være en no-op i forhold til standarden. */
/* Undtagelsen: --muted og --clay er løftet efter aftale, fordi de
   oprindelige værdier lå under AA (4.37 og 3.63 på --bg). Begge er en
   anelse mørkere; alt andet er uændret. */
:root[data-palette="skovgroen"] {
  --accent: #3a6b47; --accent-dark: #2c5237; --accent-light: #e8f2ec;
  --accent-mid: #d4e9db; --accent-ring: rgba(58,107,71,.3);
  --bg: #f9f7f4; --surface: #ffffff; --surface-2: #faf8f5;
  --border: #e4dfd8; --border-soft: #efece6;
  --text: #1a1714; --muted: #6e675e;
  --clay: #55725c; --clay-light: #e4ecdf; --clay-bg: #f0e0d5;
}

:root[data-palette="terrakotta"] {
  --accent: #9C4A22; --accent-dark: #7A3818; --accent-light: #f3e9e4;
  --accent-mid: #e9d7ce; --accent-ring: rgba(156,74,34,.3);
  --bg: #FAF5F0; --surface: #ffffff; --surface-2: #fcfaf7;
  --border: #e0dad6; --border-soft: #ede8e3;
  --text: #1F1815; --muted: #77675A;
  --clay: #87624f; --clay-light: #efe2dc; --clay-bg: #e7dfd8;
  --tag-tilbud: #A8253C;
}
/* Midnat */
:root[data-palette="midnat"] {
  --accent: #1E3A5F; --accent-dark: #152A46; --accent-light: #e4e7ec;
  --accent-mid: #ced4dc; --accent-ring: rgba(30,58,95,.3);
  --bg: #F5F7FA; --surface: #ffffff; --surface-2: #fafbfc;
  --border: #dadce0; --border-soft: #e7eaed;
  --text: #131A22; --muted: #616C7A;
  --clay: #536c8d; --clay-light: #dbdfe5; --clay-bg: #e2e0dd;
  --tag-tilbud: #c53030;
}
/* Kul & Messing */
:root[data-palette="messing"] {
  --accent: #7E5F2C; --accent-dark: #5F4720; --accent-light: #f0ece6;
  --accent-mid: #e3dcd1; --accent-ring: rgba(126,95,44,.3);
  --bg: #F7F5F0; --surface: #ffffff; --surface-2: #fbfaf7;
  --border: #dcdad6; --border-soft: #eae8e3;
  --text: #1A1815; --muted: #6F675A;
  --clay: #78664a; --clay-light: #eae5dd; --clay-bg: #e7e1d8;
  --tag-tilbud: #c53030;
}
/* Blomme */
:root[data-palette="blomme"] {
  --accent: #63304A; --accent-dark: #4A2237; --accent-light: #ece6e9;
  --accent-mid: #ddd1d7; --accent-ring: rgba(99,48,74,.3);
  --bg: #FAF6F7; --surface: #ffffff; --surface-2: #fcfafb;
  --border: #dfdbdc; --border-soft: #ede8ea;
  --text: #1D1418; --muted: #736069;
  --clay: #875f73; --clay-light: #e6dee2; --clay-bg: #e7dedb;
  --tag-tilbud: #B22B2B;
}

/* Midcentury — dyb petroleum + rust, støvet varm bund */
:root[data-palette="midcentury"] {
  --accent: #0A4544; --accent-dark: #083635; --accent-light: #e6ecec;
  --accent-mid: #cedada; --accent-ring: rgba(10,69,68,.3);
  --bg: #F8F3F2; --surface: #ffffff; --surface-2: #fbf8f8;
  --border: #dfd9d8; --border-soft: #ebe6e5;
  --text: #241B1D; --muted: #716c6c;
  --clay: #a25524; --clay-light: #f0e4dc; --clay-bg: #e7d3c6;
  --tag-tilbud: #B0303A;
}

/* Klassisk — næsten sort skovgrøn + guld, kølig lavendel-hvid bund */
:root[data-palette="klassisk"] {
  --accent: #12401A; --accent-dark: #0e3214; --accent-light: #e7ece8;
  --accent-mid: #d0d9d1; --accent-ring: rgba(18,64,26,.3);
  --bg: #F5F5FA; --surface: #ffffff; --surface-2: #fafafc;
  --border: #dbdbe0; --border-soft: #e8e8ed;
  --text: #1D1D24; --muted: #6f6f74;
  --clay: #866e32; --clay-light: #f0ece0; --clay-bg: #e7e0cd;
  --tag-tilbud: #c53030;
}

/* Nude — mørkebrun + varm taupe, creme bund */
:root[data-palette="nude"] {
  --accent: #3A2D28; --accent-dark: #2d231f; --accent-light: #ebeaea;
  --accent-mid: #d8d5d4; --accent-ring: rgba(58,45,40,.3);
  --bg: #F1EDE6; --surface: #ffffff; --surface-2: #f7f5f1;
  --border: #d8d4cd; --border-soft: #e5e0da;
  --text: #241C17; --muted: #6e6a65;
  --clay: #80665a; --clay-light: #f0ebe9; --clay-bg: #e7dfdb;
  --tag-tilbud: #B0463A;
}

/* ── 404-SIDE ──────────────────────────────────────────────────────
   Fejlsiden skal ligne butikken, ikke en serverfejl: samme luft, samme
   typografi, og en vej videre frem for en blindgyde. */
.err-page { text-align: center; max-width: 620px; margin: 0 auto; }
.err-code {
  font-family: var(--font-head); font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 600;
  line-height: 1; letter-spacing: var(--tracking-head); color: var(--border); margin-bottom: .5rem;
}
.err-page h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600;
  letter-spacing: var(--tracking-head); line-height: 1.15; margin-bottom: 1rem;
}
.err-lead { color: var(--muted); line-height: 1.75; margin-bottom: 2rem; }
.err-search { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2rem; }
.err-search input {
  flex: 1 1 220px; min-width: 0; max-width: 340px;
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-family: inherit; font-size: .92rem; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.err-search input:focus { border-color: var(--accent); }
.err-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.25rem; }
.err-links a {
  padding: .5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .74rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.err-links a:hover { border-color: var(--accent); color: var(--accent); }
.err-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
/* Skjult for øjet, men læst op af skærmlæsere. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}