/* =============================================================
   v2.css — nyt design-system for Bodenhoff/BakerPOS webshops.
   Portet 1:1 fra temp/bodenhoff_mockup.html.
   Design-tokens leveres af tokens.inc.asp (injected som <style>
   før dette stylesheet). Overskrives per-klient via PageHeader.
   ============================================================= */

/* ---------- Override gamle Bootstrap-tokens fra EKStyleSheet.StyleSheet2 ----------
   Klientens StyleSheet2 (rendered i bootstrap.min.css.asp) sætter --focus-color,
   --bs-primary m.fl. til grøn. I v2-designet bruger vi brand/accent i stedet, så
   knap-focus/hover ikke pludselig blev grønt. Højere specificitet (body.v2) slår
   :root-variablerne fra StyleSheet2. */
body.v2 {
  --focus-color:        var(--brand);
  --bs-primary:         var(--accent);
  --bs-primary-hover:   var(--accent-dark);
  --btn-primary-color:  var(--surface);
  --bs-primary-rgb:     var(--accent-rgb); /* matcher --accent (#b19888 default) */
  --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
}

/* Text-inputs, select og textarea: INGEN visuel focus-ring (kunde-ønske).
   Chrome trigger :focus-visible på text-inputs selv ved mus-klik, så vi er
   nødt til at override alle :focus-pseudostates uden undtagelser. Brugeren
   ser hvor cursoren er via selve text-cursoren i feltet. Vi target'er både
   .form-control/.form-select og raw input[type]/textarea/select. */
body.v2 .form-control:focus,
body.v2 .form-control:focus-visible,
body.v2 .form-control:valid:focus,
body.v2 .form-control:invalid:focus,
body.v2 .form-control.is-valid:focus,
body.v2 .form-control.is-invalid:focus,
body.v2 .form-select:focus,
body.v2 .form-select:focus-visible,
body.v2 .form-select:valid:focus,
body.v2 .form-select:invalid:focus,
body.v2 input[type="text"]:focus,
body.v2 input[type="text"]:focus-visible,
body.v2 input[type="email"]:focus,
body.v2 input[type="email"]:focus-visible,
body.v2 input[type="tel"]:focus,
body.v2 input[type="tel"]:focus-visible,
body.v2 input[type="password"]:focus,
body.v2 input[type="password"]:focus-visible,
body.v2 input[type="number"]:focus,
body.v2 input[type="number"]:focus-visible,
body.v2 input[type="search"]:focus,
body.v2 input[type="search"]:focus-visible,
body.v2 input[type="date"]:focus,
body.v2 input[type="date"]:focus-visible,
body.v2 input[type="time"]:focus,
body.v2 input[type="time"]:focus-visible,
body.v2 textarea:focus,
body.v2 textarea:focus-visible,
body.v2 select:focus,
body.v2 select:focus-visible {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Knapper, checkbox, radio: behold brand-tonet focus-ring så brugeren kan
   se at de interagerer rigtigt. Ingen grøn fra klient-stylesheet. */
body.v2 .form-check-input:focus,
body.v2 .form-check-input:focus-visible,
body.v2 .form-check-input:valid:focus,
body.v2 .form-check-input:invalid:focus,
body.v2 .btn:focus,
body.v2 .btn:focus-visible,
body.v2 .btn-check:focus + .btn,
body.v2 .btn.active,
body.v2 .btn:active {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2) !important;
  outline: none !important;
}

/* Bootstrap btn-primary bruger --bs-primary / --bs-primary-hover. Sikrer at
   primary-knapper (fx i kurv.asp, loginmodal.asp) matcher v2-accent. */
body.v2 .btn-primary,
body.v2 .btn-primary:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
body.v2 .btn-primary:hover,
body.v2 .btn-primary:active,
body.v2 .btn-primary.active {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--surface);
}

/* Back-to-top "scroll up"-knappen er .btn.btn-primary med <i class="bi bi-arrow-up">.
   For at pilen er tydelig uanset klient-tema bruger vi hvid pil på --accent-dark
   (mørkere accent-variant) — giver ca. 5-6:1 kontrast i stedet for ~3.4:1
   som hvid på den lyse --accent ville give. */
body.v2 .back-to-top,
body.v2 .back-to-top:hover,
body.v2 .back-to-top:focus,
body.v2 .back-to-top:active {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
body.v2 .back-to-top i,
body.v2 .back-to-top i::before {
  color: #fff !important;
  font-size: 1.4rem;
  font-weight: 900;
  opacity: 1;
}
/* På mobil med sticky cartbar (~68 px høj) skubber vi back-to-top-knappen op
   så den ikke lægger sig oven på "Se kurv"-knappen i cartbaren. Default-stilen
   (style.css) er bottom: 30px — vi tilføjer cartbar-højden ~70 px. */
@media (max-width: 640px) {
  body.v2.v2-has-cartbar .back-to-top { bottom: 100px; }
}
/* På desktop med kurv-sidebar (≥1280px, body.kurv-sidebar) optager sidebar
   højre 372px af viewporten — back-to-top default på right:30px ender BAG
   sidebaren oven på "Gå til kurv"-knappen. Skub den til venstre for sidebaren. */
@media (min-width: 1280px) {
  body.v2.kurv-sidebar .back-to-top { right: calc(372px + 30px); }
}

/* ---------- Base / reset (scoped med .v2 på body) ---------- */
body.v2 { font-family: var(--font-sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.6; font-weight: 500; font-size: 16px; }
body.v2 img { max-width: 100%; display: block; }
body.v2 a { color: inherit; text-decoration: none; }
body.v2 button { font: inherit; cursor: pointer; }

body.v2 .v2-container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 24px; }

/* ---------- Utility bar ---------- */
.v2-utility {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.v2-utility .v2-row {
  display: flex; justify-content: space-between; align-items: center;
  height: 40px; gap: 16px;
}
.v2-utility a { color: inherit; transition: color .2s; }
.v2-utility a:hover { color: var(--brand); }
.v2-utility .v2-meta { display: flex; gap: 20px; align-items: center; }
.v2-utility .v2-meta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.v2-utility .v2-socials { display: flex; gap: 12px; }
.v2-utility .v2-socials a { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Header ---------- */
.v2-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--sky);
  border-bottom: 1px solid var(--border);
}
.v2-header .v2-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: 88px;
}

/* App-visning (MyLoyals webview): headeren skal smelte sammen med appens egen
   ramme i stedet for at ligne endnu en header. Logoet er allerede fjernet
   server-side i navbar.asp — her ryger baggrundsfarven, kanten og det meste af
   højden, så der kun står en lav række med knapperne tilbage.
   Den forbliver sticky: kurv og login skal kunne nås uden at scrolle op. */
.v2-app .v2-header {
  background: transparent;
  border-bottom: 0;
}
.v2-app .v2-header .v2-row {
  min-height: 52px;
  gap: 12px;
}

/* App-visning: ingen login-knap. MyLoyals app logger kunden ind via SSO, så
   der er intet at logge ind på — men #loginBtn har TO roller: udlogget er den
   "Log ind", indlogget bliver den kundens fornavn og linker til Min profil.
   Kun den første rolle skjules, ellers mistede kunden vejen til sine stempler,
   point og fordele. Tilstanden sættes klientside (.v2-logged-in fra
   loginmodal.asp updateNavbar), så den kan kun rammes herfra og ikke i ASP. */
.v2-app #loginBtn:not(.v2-logged-in) { display: none; }
.v2-brand { display: inline-flex; align-items: center; line-height: 1; }
.v2-brand img { height: 56px; width: auto; display: block; }
/* SVG-logo som CSS-baggrund — kilde er --logo-url i tokens.inc.asp.
   Aspect-ratio 209.698:74.182 ≈ 2.826 fastholdes af width derived from
   height. Ingen <img>-fil-reference behøves. */
.v2-brand-logo {
  display: block;
  height: 56px;
  width: 158px; /* 56 × 209.698/74.182 ≈ 158 */
  background-image: var(--logo-url);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.v2-brand .v2-brand-text {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.23;
  color: var(--brand-dark);
  letter-spacing: -.01em;
}
.v2-footer .v2-brand img { height: 64px; margin-bottom: 12px; }
.v2-footer .v2-brand-logo { height: 64px; width: 181px; margin-bottom: 12px; } /* 64 × ratio ≈ 181 */
.v2-nav { display: flex; gap: 8px; justify-self: center; flex-wrap: wrap; }
.v2-nav a {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.v2-nav a:hover { background: var(--bg-2); }
.v2-nav a.active { color: var(--brand); }

/* ===== Dropdown-undermenuer (OverMenu -> children) ===== */
.v2-nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.v2-nav-caret-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text);
  padding: 6px; margin-left: -10px; border-radius: 999px; cursor: pointer;
}
.v2-nav-caret-btn:hover { background: var(--bg-2); }
.v2-nav-caret { transition: transform .2s var(--ease); }
.v2-nav-dropdown.open .v2-nav-caret { transform: rotate(180deg); }
.v2-nav-submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 8px;
  margin-top: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: var(--z-dropdown, 50);
}
/* Usynlig bro over margin-gap'et, så hover ikke falder ud mellem toggle og menu. */
.v2-nav-submenu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.v2-nav-dropdown:hover .v2-nav-submenu,
.v2-nav-dropdown.open .v2-nav-submenu { display: flex; }
.v2-nav-submenu a {
  padding: 9px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 500;
  color: var(--text); white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.v2-nav-submenu a:hover { background: var(--bg-2); }
.v2-nav-submenu a.active { color: var(--brand); }

/* Mobil-drawer: undermenu listet indrykket under forælder (ingen JS). */
.v2-drawer-submenu { display: flex; flex-direction: column; }
.v2-drawer-submenu .v2-drawer-subitem { padding-left: 28px; font-size: 15px; opacity: .85; }

/* ===== Leverings-check widget ({{leveringscheck}}) ===== */
.v2-leveringscheck { margin: 20px 0; }
.v2-lc-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.v2-leveringscheck input {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius, 12px);
  font-size: 16px; max-width: 100%; background: var(--surface); color: var(--text);
}
.v2-leveringscheck input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.v2-lc-postnr { width: 160px; }
.v2-lc-result { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius, 12px); font-size: 15px; line-height: 1.45; }
.v2-lc-result.v2-lc-ok   { background: var(--sky-soft, #e6f4ea); color: var(--brand-dark, #14532d); }
.v2-lc-result.v2-lc-no   { background: #fdecea; color: #8a1c1c; }
.v2-lc-result.v2-lc-warn { background: #fff4e5; color: #8a5a00; }
.v2-lc-info { opacity: .85; font-size: 14px; }

/* ===== Webshop-formularer (formular-blok) ===== */
.v2-form { margin: 20px 0; }
.v2-form-intro { margin: 0 0 18px; }
.v2-field-hint { font-size: 13px; opacity: .75; line-height: 1.4; }
/* Afkrydsning: .v2-field er column, men en checkbox skal staa foran teksten */
.v2-field-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.v2-field-check input { width: auto; flex: 0 0 auto; margin-top: 2px; }
.v2-field-check > span { font-weight: 400; }
.v2-cond.v2-field-check.v2-cond-vis { display: flex; }
.v2-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .v2-form-grid { grid-template-columns: 1fr; } }
.v2-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.v2-field > span { font-weight: 500; color: var(--text); }
.v2-field input, .v2-field select, .v2-field textarea {
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius, 12px);
  font-size: 15px; background: var(--surface); color: var(--text); width: 100%; font-family: inherit;
}
.v2-field input:focus, .v2-field select:focus, .v2-field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.v2-field-full { grid-column: 1 / -1; }
.v2-req { color: #c0392b; }
.v2-form-submit { margin-top: 18px; }
.v2-form-takpanel { margin: 20px 0; padding: 18px 22px; border-radius: var(--radius, 12px); background: var(--sky-soft, #e6f4ea); color: var(--brand-dark, #14532d); font-size: 16px; }
/* Honeypot — skjult for mennesker, synlig for bots */
.v2-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Betingede felter (kontakt-formular) — skjult indtil trigger matcher */
.v2-cond { display: none; }
.v2-cond.v2-cond-vis { display: flex; }

/* Indholds-galleri (inline billeder lagt ind i side-tekst) */
.v2-article-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 24px 0; }
.v2-article-gallery figure { margin: 0; }
.v2-article-gallery img { width: 100%; border-radius: var(--radius, 12px); display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.v2-actions { display: flex; gap: 8px; align-items: center; }
.v2-icon-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: transform .15s var(--ease), box-shadow .2s, background .2s;
}
.v2-icon-btn:hover { background: var(--bg-2); box-shadow: var(--shadow-1); transform: translateY(-1px); }

/* Login-knap (Thomas 274 runde 2): pille med ikon + tekst så det er
   tydeligt at man kan logge ind. Når brugeren ER logget ind skjules
   .v2-login-label og fornavnet vises i .v2-login-name (toggles fra
   loginmodal.asp updateNavbar via .v2-logged-in klasse). */
.v2-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .15s var(--ease), box-shadow .2s, transform .15s;
}
.v2-login-btn:hover {
  background: var(--bg-2);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.v2-login-btn .v2-ic { width: 18px; height: 18px; flex-shrink: 0; }
.v2-login-btn .v2-login-label,
.v2-login-btn .v2-login-name {
  white-space: nowrap;
}
/* Logget ind: skift label "Log ind" ud med personens navn */
.v2-login-btn.v2-logged-in .v2-login-label { display: none; }
.v2-login-btn.v2-logged-in .v2-login-name { display: inline !important; }
.v2-login-btn.v2-logged-in {
  background: var(--bg-2);
  border-color: var(--border);
}
.v2-icon-btn .v2-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent); color: var(--surface);
  font-size: 11px; font-weight: 600;
  min-width: 18px; height: 18px;
  border-radius: 999px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* ---------- Breadcrumb + page head ---------- */
.v2-breadcrumbs { font-size: 13px; color: var(--text-muted); padding: 20px 0 8px; }
.v2-breadcrumbs a:hover { color: var(--brand); }
.v2-breadcrumbs .v2-sep { margin: 0 8px; opacity: .5; }
.v2-breadcrumbs span[aria-current] { color: var(--text); }

.v2-pagehead {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: 20px;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.v2-pagehead h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.23;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: var(--brand-dark);
}
.v2-pagehead .v2-sub { color: var(--text-muted); font-size: 15px; }

/* Bodenhoff-runde: kurv-sidens overskrift skal være sort (ikke brand-dark
   som default — visse klient-temaer har mørk-blå brand-dark som blander sig
   med bg-cream og ser falmet ud i kurv-konteksten). Andre klienter beholder
   brand-dark via default-reglen ovenfor. */
.v2-kurv-page .v2-pagehead h1 { color: #000; }

/* Rabat-tekst på linjer i fuld kurv-side (ikke offcanvas) skjules — Bodenhoff
   ønsker ikke "spar X kr"-ord ved hver linje fordi prisen allerede er
   rabatteret. Behold .v2-kurv-line-rabat-elementet i DOM så regneflowet
   stadig kan opdatere data-linje-rabatter; bare skjul visuelt. Andre klienter
   beholder rabat-teksten i deres /kurv via default-stil. */
.v2-kurv-page .v2-kurv-line-rabat { display: none; }
/* Samme for badge på selve produkt-billedet (vare.rabat — fx "3 stk. for 69,-")
   der placeres position-absolute top-venstre i billed-cellen. Klassen bg-discount
   bruges andre steder (fx produktkort på shop-listen), så vi scoper kun til
   .v2-kurv-page så de øvrige steder bevarer badge'en. */
.v2-kurv-page .bg-discount { display: none; }
/* Besparelses-tekst når mængderabat/kampagne udløser besparelse på linjen —
   grøn farve så det signalerer en positiv ting, lille tekst så det ikke
   konkurrerer med navn/pris. */
.v2-kurv-page .v2-kurv-besparelse { color: var(--status-open, #3a7d3a); font-weight: 600; }
.v2-kurv-page .v2-kurv-besparelse small { font-size: 12px; }

/* Kurv-side to-kolonne layout på desktop: formular i venstre, summary
   (linjer + kampagnekode + total) i højre. På mobil/tablet stack'es de
   under hinanden i kilde-rækkefølge (summary først, så formular) så
   kunden ser kurven uden at scrolle først. */
.v2-kurv-grid { display: block; }
@media (min-width: 992px) {
  .v2-kurv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "formular summary";
    gap: 40px;
    align-items: start;
  }
  .v2-kurv-grid .v2-kurv-formular { grid-area: formular; min-width: 0; }
  .v2-kurv-grid .v2-kurv-summary  { grid-area: summary;  min-width: 0; }
  /* Formularen indeholder en del col-md-6-wrappers fra Bootstrap (kontakt-
     felter, levering, dato/tid) der antager 50 % af viewporten. I venstre
     grid-kolonne (~55 %) er det visuelt for smalt at have to felter ved
     siden af hinanden; lad dem brede sig til fuld kolonnebredde. */
  .v2-kurv-grid .v2-kurv-formular .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  /* Nogle felt-wrappers (adresse, postnr/by, dato/tid, afhentningssted) ligger
     DIREKTE i formularen og ikke i en .row. Uden .row'ens negative gutter-margin
     slog col-paddingen + width:50 % igennem, så de blev smallere og indrykket og
     ikke flugtede med navn/email (der ligger i rows). Normalisér alle direkte
     col-børn (men ikke dem der selv er en .row) til fuld bredde uden gutter. */
  .v2-kurv-grid .v2-kurv-formular > [class*="col-"]:not(.row) {
    width: 100%; max-width: 100%; flex: 0 0 100%;
    padding-left: 0; padding-right: 0;
  }

  /* Kurv-linjerne i summary-kolonnen (~520 px bred) bruger Bootstrap
     col-lg-2/col-4/col-2/col-1 som krymper antal-input + slet-knap til
     ulæselige bredder i den smalle kolonne. Override til flex med faste
     widths så foto, navn/pris, antal og slet får passende plads. */
  .v2-kurv-summary .productline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #e7e2da);
  }
  .v2-kurv-summary .productline > .col-lg-2 {
    flex: 0 0 80px; max-width: 80px; width: 80px;
    padding: 0;
  }
  .v2-kurv-summary .productline > .col-4 {
    flex: 1 1 auto; max-width: none; min-width: 0; padding: 0;
  }
  .v2-kurv-summary .productline > .col-2 {
    flex: 0 0 116px; max-width: 116px; padding: 0;
  }
  .v2-kurv-summary .productline > .col-2 .input-group {
    margin-bottom: 0 !important;
    flex-wrap: nowrap;
    width: 100%;
  }
  .v2-kurv-summary .productline > .col-2 .input-group .kurv-minus,
  .v2-kurv-summary .productline > .col-2 .input-group .kurv-plus {
    flex: 0 0 32px; max-width: 32px;
    padding: 6px 0;
    display: flex; align-items: center; justify-content: center;
  }
  .v2-kurv-summary .productline > .col-2 .input-group .kurv-antal-input {
    flex: 1 1 auto; min-width: 0; max-width: none;
    text-align: center;
    padding: 4px;
  }
  .v2-kurv-summary .productline > .col-1 {
    flex: 0 0 40px; max-width: 40px; padding: 0;
  }
  /* Total-row + kampagnekode-row har egne col-lg-* — strip percent-cols
     i summary-kolonnen så total-tallet ikke ender klemt i 17 % af 520 px. */
  .v2-kurv-summary > .row .col-lg-10,
  .v2-kurv-summary > .row .col-lg-6 { flex: 1 1 auto; max-width: none; }
  .v2-kurv-summary > .row .col-lg-2 { flex: 0 0 auto; max-width: none; }
}
.v2-toolbar { display: flex; align-items: center; gap: 12px; }

.v2-select {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2315345a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center / 12px;
  padding: 10px 40px 10px 16px;
  font-size: 14px;
  border-radius: 999px;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.v2-select:hover { border-color: var(--brand); }
.v2-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12); }

/* ---------- Layout: enkelt kolonne med sticky chip-bar ----------
   Sidebar er fjernet — alle varegrupper renderes som sektioner på samme
   side, og chip-baren er primær navigation (sticky øverst). Klik på chip
   smooth-scroller til kategori-sektion; IntersectionObserver markerer
   aktiv chip ud fra hvilken sektion der er synlig. */
.v2-layout {
  display: block;
  padding-bottom: 80px;
}
.v2-chip-scroll {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 0;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.v2-chip-scroll::-webkit-scrollbar { display: none; }
.v2-chip-scroll .v2-cat {
  flex: 0 0 auto; white-space: nowrap;
  /* Minimal chip-look: ren tekst i sort med tynd underline-indikator
     under aktiv kategori. Ingen "boble"/baggrund/border — designet skal
     virke roligere og lade produktbillederne dominere. */
  padding: 8px 8px 6px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 15px; color: #000;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.v2-chip-scroll .v2-cat-has-img {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Lidt mindre lodret padding når billede er med — matcher chip-højden
     med billedets diameter (34px) + padding for textuelle chips uden
     billede. */
  padding-top: 2px; padding-bottom: 0;
}
.v2-chip-scroll .v2-cat-thumb {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-2, #f4f4f4);
}
.v2-chip-scroll .v2-cat:hover {
  color: var(--brand);
}
.v2-chip-scroll .v2-cat.active {
  color: #000;
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* Sticky placering — klistret under navbar når man scroller. Højden af
   navbar varierer per klient (logo, utility-bar, test-banner), så
   --v2-navbar-height sættes af main.js dynamisk via getBoundingClientRect. */
:root { --v2-navbar-height: 88px; }
.v2-cat-chips-sticky {
  position: sticky;
  /* Standard: chip-bar klistrer direkte under navbar. */
  top: var(--v2-navbar-height);
  z-index: var(--z-dropdown);
  background: var(--bg);
  margin-bottom: 12px;
  border-bottom: 1px solid #000;
  transition: top .25s ease;
}
/* Når siden har en hero (sticky-bottom pattern), skubbes chip-baren ned så
   den klistrer LIGE UNDER hero-stripens 112 px — så søgning, chips og
   produkter ligger pænt stablet uden at overlappe. */
body:has(.v2-hero) .v2-cat-chips-sticky {
  top: calc(var(--v2-navbar-height) + 112px);
}
/* Når hero er collapsed (scroll-down) skal chip-baren også glide op til
   navbar, så der ikke opstår et tomt gap hvor stripen plejede at være. */
body:has(.v2-hero.is-collapsed) .v2-cat-chips-sticky {
  top: var(--v2-navbar-height);
}

/* Hver kategori-sektion: header + grid. Chip-baren er ~50px høj og
   sticker på --v2-navbar-height under viewport-top. Scroll-offsetten
   er navbar-højde + chip-bar-højde + lille buffer så sektion-headeren
   er synlig ved klik på chip. */
.v2-cat-section {
  margin-bottom: 48px;
  scroll-margin-top: calc(var(--v2-navbar-height) + 70px);
}
.v2-cat-section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  /* Klient-specifik override via --webshop-h2-color (sat på <html> eller
     <body> for de klienter der ønsker andre farver end brand-dark, fx
     ren sort #000 til "Dagens tilbud" og varegruppe-headers). */
  color: var(--webshop-h2-color, var(--brand-dark));
  margin: 0 0 16px;
  letter-spacing: -.01em;
}

/* Skjul gammel sidebar (sikkerhed — markup er fjernet, men hvis nogen klient
   stadig har gammelt cache eller anden side bruger .v2-sidebar). */
.v2-sidebar { display: none; }

/* ---------- Hero-banner + butiks-bjælke ---------- */
/* Hero med parallax-effekt: billedet er højere end containeren og
   flyttes via translateY i JS (initHeroParallax) så det føles som om
   det bevæger sig langsommere end resten af siden. Overlay-gradient
   sikrer at h1 + søgeboks er læsbare oven på fotoet.
   STICKY-BOTTOM: Hero har position:sticky med top = navbarH - (heroH - stripH).
   Det gør at hero "klapper sammen" når man scroller ned — kun den nederste
   strip (80 px) med søgeboksen forbliver klistret under navbar. Når man
   scroller op igen ruller resten af hero frem 1:1 med scroll-hastigheden. */
.v2-hero {
  position: sticky;
  /* Bottom-strip 112 px under navbar: 380 (hero h) - 112 (strip) = 268 væk.
     Strip-højden = pill-højde 48 + padding 32 over + 32 under = symmetrisk
     luft omkring søgepillen. */
  top: calc(var(--v2-navbar-height, 88px) - 268px);
  /* z-index lavere end navbar (--z-sticky=40) så navbar dækker hero, men
     højere end chip-bar så hero-stripen tegnes ovenpå chip-baren når begge
     er stuck. Vi giver chip-baren en top der holder den UNDER hero-stripen. */
  z-index: 25;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: var(--bg-2);
  /* Headroom-pattern: ved scroll-down tilføjer JS .is-collapsed der skubber
     hero helt op (translateY 112 px) så stripen forsvinder. Ved scroll-up
     fjernes klassen og stripen glider tilbage. */
  transition: transform .25s ease;
}
.v2-hero.is-collapsed {
  transform: translateY(-112px);
}
.v2-hero-img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.v2-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--shadow-rgb),.10) 0%, rgba(var(--shadow-rgb),.35) 60%, rgba(var(--shadow-rgb),.55) 100%);
  pointer-events: none;
}
.v2-hero-with-content .v2-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 32px;
  z-index: var(--z-overlay);
}
.v2-hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  color: var(--surface);
  margin: 0 0 8px;
  letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(var(--shadow-rgb),.35);
}
.v2-hero-sub {
  font-size: 16px;
  color: rgba(var(--surface-rgb),.92);
  margin: 0 0 18px;
  max-width: 600px;
  text-shadow: 0 1px 8px rgba(var(--shadow-rgb),.35);
}
.v2-hero-search {
  max-width: 480px;
  background: rgba(var(--surface-rgb),.96);
  border-radius: 999px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(var(--shadow-rgb),.18);
}
.v2-hero-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  outline: none;
  min-width: 0;
}
.v2-hero-search svg { color: var(--text-muted); flex-shrink: 0; }

@media (max-width: 600px) {
  .v2-hero {
    height: 280px;
    /* Mobil: mindre luft omkring søgepillen — strip 88 px (= 20 padding +
       48 pill + 20 padding) i stedet for desktopens 112 px. */
    top: calc(var(--v2-navbar-height, 88px) - 192px);
  }
  .v2-hero.is-collapsed {
    transform: translateY(-88px);
  }
  .v2-hero-with-content .v2-hero-content { padding-bottom: 20px; }
  body:has(.v2-hero) .v2-cat-chips-sticky {
    top: calc(var(--v2-navbar-height) + 88px);
  }
  /* Mobil: navbar-logo halv størrelse (footer-logoet er uændret). */
  .v2-header .v2-brand-logo {
    height: 28px;
    width: 79px;
  }
}

/* Smal info-bjælke under navbar — pickup-info + dagens åbningstid */
.v2-butiks-bjaelke {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  padding: 8px 0;
}
.v2-butiks-bjaelke-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.v2-butiks-bjaelke-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.v2-butiks-bjaelke-info svg { color: var(--brand); flex-shrink: 0; }
.v2-butiks-bjaelke-label { color: var(--text-muted); }
.v2-butiks-bjaelke-info strong { color: var(--brand-dark); font-weight: 600; }
.v2-butiks-bjaelke-adresse {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-butiks-bjaelke-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.v2-butiks-bjaelke-aabent { color: var(--status-open); font-weight: 600; }
.v2-butiks-bjaelke-lukket { color: var(--status-closed); font-weight: 600; }
/* Tre-tilstands-status (open/warning/closed) på bjælken — samme farvekonvention
   som butiksvalg-modalen. Label-tekst og dot farves via data-status på parent. */
.v2-butiks-bjaelke-status[data-status="open"]    .v2-bjaelke-label,
.v2-butiks-bjaelke-status[data-status="open"]    .v2-status-dot    { color: var(--status-open); }
.v2-butiks-bjaelke-status[data-status="warning"] .v2-bjaelke-label,
.v2-butiks-bjaelke-status[data-status="warning"] .v2-status-dot    { color: var(--status-warning); }
.v2-butiks-bjaelke-status[data-status="closed"]  .v2-bjaelke-label,
.v2-butiks-bjaelke-status[data-status="closed"]  .v2-status-dot    { color: var(--status-closed); }
.v2-butiks-bjaelke-status .v2-bjaelke-label { font-weight: 600; }
/* Pulse-animation på "Åbent i dag"-prikken — let opacity-fade så det
   signalerer "live status" uden at være distraherende. Kun prikken
   blinker (ikke teksten), og kun for "åbent"-versionen. */
.v2-status-dot { display: inline-block; }
.v2-status-dot-pulse { animation: v2-pulse var(--animation-pulse-duration) ease-in-out infinite; }
@keyframes v2-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-status-dot-pulse { animation: none; }
}
.v2-butiks-bjaelke-tid { color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .v2-butiks-bjaelke { font-size: 12px; }
  .v2-butiks-bjaelke-adresse { display: none; }
}

.v2-sidebar h3 {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.v2-catlist { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 2px; }
.v2-catlist a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 15px;
  transition: background .2s var(--ease), color .2s, transform .1s;
}
.v2-catlist a:hover { background: var(--bg-2); }
.v2-catlist a.active { background: var(--brand); color: var(--surface); font-weight: 600; }
.v2-catlist a .v2-count {
  font-size: 12px; color: var(--text-muted);
  background: rgba(var(--shadow-rgb),.05);
  padding: 2px 8px; border-radius: 999px;
}
.v2-catlist a.active .v2-count { background: rgba(var(--surface-rgb),.18); color: var(--surface); }

.v2-promo {
  background: linear-gradient(165deg, var(--sky) 0%, var(--sky-deep) 100%);
  color: var(--brand-dark);
  border-radius: var(--radius);
  padding: 22px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}
.v2-promo::after {
  content: "";
  position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(var(--surface-rgb),.25);
}
.v2-promo h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--brand-dark);
  position: relative;
}
.v2-promo p { margin: 0 0 14px; color: var(--brand-dark); opacity: .78; position: relative; }
.v2-promo a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
  position: relative;
}

/* ---------- Product grid ---------- */
.v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* ---------- Dagens tilbud ----------
   Fade-baggrund på hele sektionen + soft glow rundt om hvert kort så
   kategorien skiller sig ud. Klienter overrider fade-farven via
   --tilbud-bg i tokens.inc.asp / EKStyleSheet.PageHeader (default = lyseblå). */
.v2-grid-ugetilbud {
  background: linear-gradient(135deg, var(--tilbud-bg) 0%, transparent 70%);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0 -24px;
}

.v2-card-ugetilbud {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb),.10);
}
.v2-card-ugetilbud:hover {
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb),.20), var(--shadow-2);
}

.varegruppe-link[data-varegruppe-id="ugetilbud"] {
  font-weight: 700;
  color: #000 !important;
}
.varegruppe-link[data-varegruppe-id="ugetilbud"]::before {
  content: "★ ";
  color: var(--brand);
}
.varegruppe-link[data-varegruppe-id="ugetilbud"].active {
  color: #000 !important;
  border-bottom-color: var(--brand);
}

.v2-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  display: flex; flex-direction: column;
}
.v2-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

.v2-card .v2-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-2);
}
/* LQIP-baggrund (32×32 base64-jpeg). Inline-style sætter
   --lqip-img CSS-variable. Vi bruger den direkte som background-image
   på selve elementet — 32×32 skaleret op til ~250px ser naturligt
   blurry ud pga. browserens bilinear interpolation, så vi behøver
   ikke ::before + filter:blur (som havde stacking-problemer). */
.v2-card .v2-media-lqip {
  background-image: var(--lqip-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.v2-card .v2-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), opacity .5s ease-out;
  position: relative;
  z-index: var(--z-base);
}
/* Skjul img mens den loader så LQIP er synlig. Når onload fyrer
   tilføjes .v2-media-loaded class -> opacity 1 fade-in.
   transition-delay sikrer at selv cached/instant-loaded billeder viser
   LQIP i mindst et øjeblik (ellers springer vi LQIP over helt). */
.v2-card .v2-media-lqip img {
  opacity: 0;
  transition-delay: 120ms;
}
.v2-card .v2-media-lqip.v2-media-loaded img {
  opacity: 1;
}
.v2-card:hover .v2-media img { transform: scale(1.05); }

.v2-badge-discount {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent); color: var(--surface);
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.35);
  z-index: var(--z-overlay);
}
/* Modal-version af rabat-badge skal være tydeligere — det er den eneste
   visning af mængderabat på produkt-detalje (rabat-tekst i footer er
   fjernet for at undgå dublet). */
.v2-produkt-modal-media .v2-badge-discount {
  top: 16px; left: 16px;
  padding: 8px 14px;
  font-size: 14px;
}
.v2-badge-new {
  position: absolute; top: 12px; left: 12px;
  background: var(--surface); color: var(--brand);
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-strong);
  z-index: var(--z-overlay);
}

/* "Dagens tilbud"-badge på varekort i almindelige varegrupper. Sat i top-
   højre hjørne så den ikke overlapper med .v2-badge-discount (top-venstre). */
/* Bottom-venstre — top-højre er optaget af point-bobble (efter 2026-04-26
   omflytning), top-venstre af rabat-badge (.v2-badge-discount). */
.v2-badge-ugetilbud {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--brand); color: var(--surface);
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb),.35);
  z-index: var(--z-overlay);
}

/* "Bonus"-markør: varen er dækket af en aktivt valgt MyLoyal-bonus. Bottom-
   højre — de øvrige hjørner er optaget (rabat top-v, point top-h, ugetilbud
   bottom-v). Ren signal-markør UDEN pris: den faktiske rabat påføres i kurven,
   ikke i listeprisen (forbrugbar/begrænset belønning). Bruger loyalitets-
   farverne (--point-bg/--point-color) så den hører visuelt til klub/bonus. */
.v2-badge-bonus {
  position: absolute; bottom: 12px; right: 12px;
  background: var(--point-bg); color: var(--point-color);
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: var(--z-overlay);
}

/* Point-bobble: rund "X point"-bobble i top-højre af varekort.
   Klienter kan overrule farven via --point-bg / --point-color i tokens.inc.asp. */
.v2-point-bobble {
  position: absolute; right: 14px; top: 14px;
  background: var(--point-bg); color: var(--point-color);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(var(--shadow-rgb),.12);
  z-index: var(--z-overlay);
  letter-spacing: -.02em;
}
.v2-point-bobble-num { font-weight: 800; line-height: 1; }
.v2-point-bobble-label {
  font-size: 9px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
  opacity: .8;
}
@media (max-width: 600px) {
  .v2-point-bobble { width: 46px; height: 46px; font-size: 14px; right: 10px; top: 10px; }
  .v2-point-bobble-label { font-size: 8px; }
}

/* Større variant til produkt-modalen (overlay på det store billede).
   Placeres bottom-højre — top-højre er optaget af luk-knappen og top-venstre
   af rabat-badgen. */
.v2-point-bobble-modal {
  width: 80px; height: 80px;
  font-size: 22px;
  /* top:auto override af parent .v2-point-bobble (som er top:14px på listen).
     I modalen står bobblen i bottom-højre — top-højre er optaget af luk-knap. */
  top: auto;
  bottom: 16px; right: 16px;
}
.v2-point-bobble-modal .v2-point-bobble-label { font-size: 11px; margin-top: 3px; }
@media (max-width: 600px) {
  .v2-point-bobble-modal { width: 64px; height: 64px; font-size: 18px; top: auto; bottom: 12px; right: 12px; }
  .v2-point-bobble-modal .v2-point-bobble-label { font-size: 9px; }
}

/* Point-tekst i produkt-modal — fx "Optjen 25 point hos Klub" */
.v2-produkt-modal-point {
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  margin: -8px 0 8px;
}
/* Subtil brand-blå border på kortet — mere afdæmpet end .v2-card-ugetilbud
   (som bruges inde i selve "Dagens tilbud"-grid'et). */
.v2-card-dagenstilbud {
  border-color: var(--brand);
}

/* ---------- Udsolgt i dag ----------
   Webshop-mode: kun badge, ingen gråtoning — kunden kan stadig bestille varen
   til næste dag, og gråtone ville signalere "utilgængelig" i stedet for
   "kun i dag udsolgt".
   Kiosk-mode (body.v2-kiosk): gråtoning + dim så varen klart virker
   utilgængelig — kunden kan ikke bestille på anden dato ved en kiosk. */
body.v2-kiosk .v2-card.v2-card-udsolgt .v2-media img {
  filter: grayscale(70%) brightness(.95);
  opacity: .7;
  transition: filter .25s, opacity .25s;
}
body.v2-kiosk .v2-card.v2-card-udsolgt .v2-body,
body.v2-kiosk .v2-card.v2-card-udsolgt .v2-card-actions {
  opacity: .7;
}
body.v2-kiosk .v2-card.v2-card-udsolgt:hover .v2-media img {
  filter: grayscale(40%) brightness(1);
  opacity: .85;
}
.v2-udsolgt-badge {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: var(--z-overlay); /* over .v2-media img (--z-base) — ellers dækkes badgen når billedet loader */
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--udsolgt-overlay-bg);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
}
.v2-udsolgt-badge svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .v2-udsolgt-badge { font-size: 12px; padding: 6px 10px; }
  .v2-udsolgt-badge span { display: inline; }
}

/* ---------- Forudbestilling (B2BOrdreDeadline / VareBestillingsDage) ----------
   Sort bjælke i TOPPEN af kortet. Sidder i toppen så den ikke kolliderer
   med .v2-udsolgt-badge (bund) — begge kan vises samtidig.
   Bodenhoff-runde: sort (før udsolgt-rød fallback) og ~30% lavere
   (vertikal padding 8→3px / 6→2px) så den tager mindre af billedet. */
.v2-forudbestilling-badge {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: var(--z-overlay); /* over .v2-media img (--z-base) */
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 3px 12px;
  background: var(--forudbestilling-overlay-bg, rgba(0, 0, 0, .92));
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
}
.v2-forudbestilling-badge svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .v2-forudbestilling-badge { font-size: 12px; padding: 2px 10px; }
  .v2-forudbestilling-badge span { display: inline; }
}
/* Når forudbestilling-bjælken (top:0, ~26px høj / ~22px på mobil) er til
   stede, skub de øvrige top-placerede overlays (rabat-badge, ny-badge,
   point-bobble) ned under den så de ikke overlapper bjælke-teksten.
   Matcher base-top + bjælkehøjde. */
.v2-card-forudbestilling .v2-badge-discount,
.v2-card-forudbestilling .v2-badge-new { top: 38px; }
.v2-card-forudbestilling .v2-point-bobble { top: 38px; }
@media (max-width: 640px) {
  .v2-card-forudbestilling .v2-badge-discount,
  .v2-card-forudbestilling .v2-badge-new { top: 30px; }
}
@media (max-width: 600px) {
  .v2-card-forudbestilling .v2-point-bobble { top: 32px; }
}

.v2-fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(var(--surface-rgb),.92);
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s, color .2s, background .2s;
}
.v2-card:hover .v2-fav { opacity: 1; transform: translateY(0); }
.v2-fav:hover { color: var(--accent); background: var(--surface); }
.v2-fav.active { color: var(--accent); opacity: 1; }

.v2-card .v2-body {
  padding: 16px 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.v2-card .v2-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.005em;
  margin: 0;
  color: var(--text);
}

/* Klikbart link der wrapper titel + beskrivelse på vare-kortet — åbner
   produkt-modalen ligesom klik på billedet eller "se detaljer"-knappen.
   Skal se ud som ren tekst (ingen underline, arver farve), men cursor
   skifter til pointer på hover så kunden ser at det er klikbart. */
.v2-card .v2-card-textlink {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.v2-card .v2-card-textlink:hover .v2-title { color: var(--brand); }
.v2-card .v2-desc {
  color: var(--text-muted); font-size: 13px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-card .v2-price-row {
  margin-top: auto;
  padding-top: 10px;
  display: flex; align-items: baseline; gap: 8px;
}
.v2-price {
  font-weight: 700; font-size: 18px; color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.v2-price-old {
  font-size: 13px; color: var(--text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.v2-unit { font-size: 12px; color: var(--text-muted); }

.v2-card .v2-card-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 0 16px 16px;
}

/* ---------- Buttons (scoped .v2-btn) ---------- */
.v2-btn {
  appearance: none; border: 1px solid transparent;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .2s var(--ease), border-color .2s, color .2s, transform .08s;
  text-decoration: none;
}
.v2-btn:active { transform: scale(.98); }
.v2-btn-ghost {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text);
}
.v2-btn-ghost:hover { background: var(--bg-2); }
.v2-btn-primary,
body.v2 a.v2-btn-primary {
  background: var(--accent);
  color: var(--surface);
  box-shadow: 0 1px 2px rgba(var(--accent-rgb),.3);
}
.v2-btn-primary:hover,
body.v2 a.v2-btn-primary:hover { background: var(--accent-dark); color: var(--surface); }

/* v2-btn-ghost som <a> — samme arve-problem som primary */
body.v2 a.v2-btn-ghost { color: var(--text); }
body.v2 a.v2-btn-ghost:hover { color: var(--text); background: var(--bg-2); }
.v2-btn-square { padding: 10px 12px; }

/* ---------- Antals-stepper på produktkort ([− antal +]) ----------
   Erstatter "Tilføj i kurv"-knappen når varen ligger i kurven (JS i
   kurvoffcanvas.asp). Stylet som en "udfoldet" primary-knap så skiftet
   knap → stepper opleves som samme element. touch-action + user-select
   er nødvendige for hold-inde/auto-repeat uden long-press-kontekstmenu
   og tekstmarkering (mobil + kiosk). */
/* Når stepperen er aktiv skjules "Tilføj i kurv"-knappen. !important fordi
   klient-CSS (EKStyleSheet) kan sætte display på .v2-btn-primary med
   !important og dermed vinde over et inline style.display fra JS. */
.v2-card .v2-card-actions.har-stepper [data-bs-add-productid] { display: none !important; }

.v2-card .v2-stepper {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--surface);
  box-shadow: 0 1px 2px rgba(var(--accent-rgb),.3);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.v2-stepper-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.v2-stepper-btn:hover { background: var(--accent-dark); }
.v2-stepper-btn:active { background: var(--accent-dark); }
.v2-stepper-count {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}

/* ---------- Front / side / article ---------- */
.v2-hero {
  padding: 56px 0 40px;
  text-align: center;
}
.v2-hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.23;
  letter-spacing: -.015em;
  color: var(--brand-dark);
  margin: 0 0 12px;
}
.v2-hero p { color: var(--text-muted); font-size: 17px; max-width: 640px; margin: 0 auto 24px; }

.v2-article {
  max-width: 840px;
  margin: 0 auto;
  padding: 12px 0 64px;
}
.v2-article .v2-article-media {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--bg-2);
}
.v2-article .v2-article-media img { width: 100%; height: auto; display: block; }
.v2-article h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.23;
  letter-spacing: -.015em;
  color: var(--brand-dark);
  margin: 0 0 8px;
}
.v2-article .v2-teaser { font-size: 18px; color: var(--text-muted); margin: 0 0 24px; }
.v2-article p { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 16px; }

.v2-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding-bottom: 80px;
}
.v2-news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.v2-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.v2-news-card .v2-news-media { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.v2-news-card .v2-news-media img { width: 100%; height: 100%; object-fit: cover; }
.v2-news-card .v2-news-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.v2-news-card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1.23; margin: 0; color: var(--brand-dark); }
.v2-news-card p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ---------- Afhentningssteder ---------- */
.v2-locations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding-bottom: 80px;
}
.v2-location {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.v2-location:hover { box-shadow: var(--shadow-1); border-color: var(--border-strong); }
.v2-location.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12); }
.v2-location h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.23; color: var(--brand-dark); margin: 0 0 12px; }
.v2-location p { font-size: 14px; color: var(--text); margin: 0 0 6px; }
.v2-location .v2-location-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; margin: 8px 0 16px; }
.v2-location table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v2-location table td { padding: 4px 6px; color: var(--text-muted); }
.v2-location table td:first-child { color: var(--text); width: 80px; }
.v2-location table td:nth-child(2) { width: 10px; text-align: center; }
/* Ugedags-cellen er nu <th scope="row"> (a11y: td-has-header). Neutralisér
   browserens default fed+centrering så den ser ud som den tidligere td. */
.v2-location table th { padding: 4px 8px 4px 6px; color: var(--text); width: auto; white-space: nowrap; text-align: left; font-weight: 400; font-size: inherit; }
.v2-location-day-today th { font-weight: 700; }

/* ---------- Butiksvalg-modal ----------
   Ny opbygning (Thomas 274): søgefelt øverst + scrollbar liste af butikker
   med live status-prik (åben/lukker snart/lukket), blå fade-baggrund per
   kort, og scroll-snap så listen "klikker" pænt mellem butikker. */
.v2-butiksvalg-modal .modal-content { border-radius: var(--radius); overflow: hidden; }
/* Header er den eneste plet hvor lyseblå må overleve — kunden synes
   bjælken som "Vælg butik"-identitet er fin. Resten af modalen følger
   shoppens beige/accent-palette så modalen ikke står i kontrast til
   resten af sitet. body.v2-prefix nødvendigt fordi `body.v2 .modal-header`
   højere oppe i v2.css ellers vinder med specificity 0,0,2,1. */
body.v2 .v2-butiksvalg-modal .modal-header {
  background: var(--sky);
  border-bottom: 1px solid var(--border);
}
body.v2 .v2-butiksvalg-modal .modal-header .modal-title {
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: 700;
}
/* Body har shop-baggrund (creme/beige) i stedet for hvid — modalen
   smelter sammen med shoppen i stedet for at føles som et separat blåt
   panel. */
body.v2 .v2-butiksvalg-modal .modal-body {
  padding: 20px;
  background: var(--bg);
}

/* Søgefelt — neutral pille på shop-baggrunden, ikke blå */
.v2-butiksvalg-search {
  position: relative;
  margin-bottom: 16px;
}
.v2-butiksvalg-search input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 999px;
  font-size: 14px;
  outline: none;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.v2-butiksvalg-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.v2-butiksvalg-search svg {
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Liste-container — responsive grid: 3 kolonner på bredt, 2 på medium, 1 på smal.
   Scroll-snap holdes så listen "klikker" når der er mange butikker. */
.v2-butiksvalg-modal .v2-locations {
  padding: 0;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  scroll-snap-type: y proximity;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.v2-butiksvalg-modal .v2-location {
  padding: 10px 12px;
  /* Shop-farver: hvid surface på beige modal-baggrund. Tidligere blå
     fade-gradient blev fjernet (Thomas 274 runde 2) — kortene skal
     matche resten af shoppens look og ikke stå som et blåt sidespor. */
  background: var(--surface);
  border: 1px solid var(--border);
  scroll-snap-align: start;
  position: relative;
}
.v2-butiksvalg-modal .v2-location:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.v2-butiksvalg-modal .v2-location.active {
  border-color: var(--accent);
  background: var(--bg-2, #f7f3ec);
  box-shadow: 0 0 0 2px rgba(177,152,136,.25);
}
.v2-butiksvalg-modal .v2-location h3 {
  font-size: 15px;
  margin: 0 0 2px;
  color: var(--text);
  line-height: 1.2;
}
.v2-butiksvalg-modal .v2-location p {
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.35;
}
.v2-butiksvalg-modal .v2-location .v2-location-phone {
  margin: 4px 0 6px;
  font-size: 12px;
  /* Shop-farve (accent-brun) i stedet for var(--brand) blå */
  color: var(--accent);
}
.v2-butiksvalg-modal .v2-location table {
  font-size: 11px;
  margin-top: 4px;
}
.v2-butiksvalg-modal .v2-location table td { padding: 1px 4px; }
.v2-butiksvalg-modal .v2-location > div[style*="margin-top"] {
  margin-top: 8px !important;
}
.v2-butiksvalg-modal .v2-location .v2-btn { padding: 6px 12px; font-size: 13px; }

/* Adresse-linje med Maps-pin til højre (ny i butiksvalg-modal). Pin-knappen
   åbner Google Maps på koordinater (eller adresse-streng som fallback). */
.v2-butiksvalg-modal .v2-location .v2-location-adresse {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.v2-butiksvalg-modal .v2-location .v2-location-adresse > span { flex: 1; }
.v2-location-map {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--brand);
  border: 1px solid var(--border-strong);
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s var(--ease);
}
.v2-location-map:hover {
  background: var(--brand);
  color: var(--surface);
  transform: scale(1.05);
}
.v2-location-map svg { width: 18px; height: 18px; }

/* Mobil-filter på butiksvalg-modal: skjul åbningstid-rækker for andre dage end
   i dag — kunden behøver kun se hvornår butikken er åben "nu". "I dag"-rækken
   markeres allerede med .v2-location-day-today fra ASP-rendering.
   Desktop bevarer alle 7 dage. */
@media (max-width: 767px) {
  .v2-butiksvalg-modal .v2-location table tr:not(.v2-location-day-today) {
    display: none;
  }
}

/* Skjul rabat-badge på produktbillede i kurven (mobil) — på smal viewport
   overlapper den varenavn til ulæselighed, og rabat-info vises i forvejen
   som tekst i pris-rækken (data-linje-rabatter-span). */
@media (max-width: 767px) {
  .v2-kurv-page .productline .bg-discount { display: none; }
}

/* Hjælpetekster under navn/mobilnr/email-felter — Bootstrap's standard 1.5
   line-height giver for meget luft mellem linjerne på en så lille tekst.
   14px matcher font-størrelsen 1:1 så linjerne ligger helt tæt. */
.v2-kurv-page .form-text { line-height: 14px; }

/* "Afhentning" / "Levering"-vælger på kurv-siden: på mobil skal de fylde fuld
   bredde med luft imellem (ikke Bootstrap's standard btn-group der klistrer
   knapperne sammen og kun fylder natural-width). */
@media (max-width: 767px) {
  .v2-kurv-leveringsvalg {
    display: flex;
    gap: 12px;
    width: 100%;
  }
  .v2-kurv-leveringsvalg .btn {
    flex: 1 1 0;
    border-radius: var(--bs-border-radius, 6px) !important;
  }
}

/* Header-række i kort: navn til venstre + status-badge til højre */
.v2-butiksvalg-loc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* Status-pille — prik + tekst. Tre states: open (grøn pulserende),
   warning (amber, "Lukker snart") og closed (rød). */
.v2-butiksvalg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-butiksvalg-status .v2-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.v2-butiksvalg-status[data-status="open"]    { color: var(--status-open); }
.v2-butiksvalg-status[data-status="open"]    .v2-status-dot { background: var(--status-open); animation: v2-pulse var(--animation-pulse-duration) ease-in-out infinite; }
.v2-butiksvalg-status[data-status="warning"] { color: var(--status-warning); }
.v2-butiksvalg-status[data-status="warning"] .v2-status-dot { background: var(--status-warning); animation: v2-pulse var(--animation-pulse-duration) ease-in-out infinite; }
.v2-butiksvalg-status[data-status="closed"]  { color: var(--status-closed); }
.v2-butiksvalg-status[data-status="closed"]  .v2-status-dot { background: var(--status-closed); }

/* Sekundær linje under status — viser fx "Lukker kl. 18:00" eller
   "Åbner i morgen kl. 07:30". Tæt på status, men subtilt afdæmpet. */
.v2-butiksvalg-status-sub {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Tom-resultat-besked når søg ikke giver hits */
.v2-butiksvalg-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  display: none;
}
.v2-butiksvalg-empty.show { display: block; }

@media (prefers-reduced-motion: reduce) {
  .v2-butiksvalg-status .v2-status-dot { animation: none; }
}
.v2-location-day-today td { font-weight: 700; color: var(--text); }
/* Dag-kolonnen må ikke wrappe når "(i dag)" er tilføjet. */
.v2-location table td:first-child { white-space: nowrap; width: auto; padding-right: 8px; }
/* Tiderne står tæt sammen: fra-tid højrejusteres, dash centreres, til-tid venstrejusteres. */
.v2-location table td:nth-child(3) { width: 1%; white-space: nowrap; text-align: right; padding: 4px 2px; }
.v2-location table td:nth-child(4) { width: 1%; padding: 4px 2px; text-align: center; color: var(--text-muted); }
.v2-location table td:nth-child(5) { text-align: left; padding: 4px 2px; color: var(--text-muted); white-space: nowrap; }
.v2-location-day-today td:nth-child(5) { color: var(--text); }
/* Butiksvalg-knappen i navbaren bruger samme pille-stil som login-knappen
   (.v2-login-btn) — class'en sættes på buttonen i navbar.asp så base-styling
   (height, padding, border-radius, font, hover-effekt) genbruges. Her er
   kun specifikke overrides: trunkering af butiksnavnet og drawer-layout. */
.v2-butiksvalg-trigger .v2-butiksvalg-navn {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) {
  .v2-butiksvalg-trigger .v2-butiksvalg-navn { display: none; }
}
.v2-drawer-butiksvalg { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.v2-drawer-butiksvalg .v2-butiksvalg-trigger { width: 100%; justify-content: flex-start; }
.v2-drawer-butiksvalg .v2-butiksvalg-trigger .v2-butiksvalg-navn,
.v2-drawer-butiksvalg .v2-butiksvalg-trigger span { display: inline; max-width: none; }

/* ---------- Footer ---------- */
.v2-footer {
  background: var(--sky);
  color: var(--brand-dark);
  padding: 72px 0 24px;
  margin-top: 0;
  position: relative;
}
.v2-footer::before {
  content: "";
  position: absolute; top: -40px; left: 0; right: 0; height: 40px;
  background: linear-gradient(to bottom, var(--bg), var(--sky));
  pointer-events: none;
  z-index: -1; /* ellers dækker gradient'en content der ligger lige over footer (fx "Bestil her!" knap i kurv) */
}

/* ---------- Carousel-video fade til footer-sky ----------
   Når carousel-slide er video, ligger en gradient-overlay på de
   nederste ~50px af videoen så den fader transparent → sky. Footer-
   gradient (::before) erstattes med solid sky så det smelter ind. */
.v2-carousel-media-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent 0%, var(--sky) 100%);
  pointer-events: none;
  z-index: var(--z-overlay);
}
body.v2:has(.v2-carousel-media-video) .v2-footer::before {
  background: var(--sky);
}
/* Fjern carousel-wrap's bund-margin når der er video — ellers bliver
   der en cream-stribe mellem video-fade og footer-strip. */
body.v2:has(.v2-carousel-media-video) .v2-carousel-wrap {
  margin-bottom: 0;
}
.v2-footer .v2-grid4 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .v2-footer .v2-grid4 { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.v2-footer .v2-brand { margin-bottom: 12px; }
.v2-footer p { color: var(--brand-dark); opacity: .78; font-size: 14px; line-height: 1.6; }
.v2-footer h5 {
  color: var(--brand-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 16px;
}
.v2-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.v2-footer a { color: var(--brand-dark); opacity: .85; transition: opacity .2s; }
.v2-footer a:hover { opacity: 1; }
.v2-footer .v2-newsletter { display: flex; gap: 8px; margin-top: 14px; }
.v2-footer input[type=email] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--sky-deep);
  color: var(--brand-dark);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font: inherit;
  outline: none;
}
.v2-footer input[type=email]::placeholder { color: rgba(var(--brand-dark-rgb),.45); }
.v2-footer input[type=email]:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.14); }
.v2-footer .v2-btn-primary { padding: 12px 18px; }
.v2-footer .v2-legal {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid rgba(var(--brand-dark-rgb),.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--brand-dark); opacity: .7;
}
.v2-footer .v2-powered { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v2-footer .v2-powered .v2-powered-logo { height: 28px; width: auto; display: block; flex: none; }
.v2-footer .v2-socials-foot { display: flex; gap: 10px; margin-top: 16px; }
.v2-footer .v2-socials-foot a {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  color: var(--brand);
  opacity: 1;
  transition: transform .2s var(--ease), background .2s;
}
.v2-footer .v2-socials-foot a:hover { transform: translateY(-2px); background: var(--brand); color: var(--surface); }

/* ---------- Icons ---------- */
.v2-ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v2-ic-sm { width: 14px; height: 14px; }

/* ---------- Mobile drawer (hidden på desktop) ---------- */
.v2-burger { display: none; }
.v2-drawer, .v2-drawer-overlay { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.v2 .v2-container { padding: 0 20px; }
  .v2-header .v2-row { min-height: 72px; gap: 16px; }
  .v2-brand img { height: 44px; }
  .v2-brand .v2-brand-text { font-size: 22px; }
  .v2-nav { display: none; }
  .v2-burger { display: inline-flex; }
  .v2-pagehead { align-items: flex-start; }
  .v2-pagehead h1 { font-size: clamp(28px, 6vw, 40px); }
  .v2-toolbar { width: 100%; justify-content: flex-end; }
  .v2-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
}

@media (max-width: 640px) {
  body.v2 .v2-container { padding: 0 16px; }

  .v2-utility { font-size: 12px; }
  .v2-utility .v2-row { height: 36px; gap: 8px; }
  .v2-utility .v2-meta > span:first-child,
  .v2-utility .v2-meta > a:nth-child(2) { display: none; }

  .v2-header .v2-row { min-height: 64px; gap: 10px; }
  .v2-brand img { height: 38px; }
  .v2-brand .v2-brand-text { font-size: 20px; }
  .v2-icon-btn { width: 40px; height: 40px; }
  .v2-hide-mobile { display: none !important; }
  .v2-actions { gap: 4px; }

  /* Login-knap som kompakt icon-only på mobil — så den passer ind ved
     siden af butiksvalg og kurv-ikon uden at fylde "Log ind"-teksten.
     Når kunden er logget ind viser .v2-login-name fornavnet — det får
     lov at folde ud så kunden kan se de er logget ind. */
  .v2-login-btn {
    width: 40px; height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
  }
  .v2-login-btn .v2-login-label { display: none; }
  .v2-login-btn.v2-logged-in {
    width: auto;
    padding: 0 12px;
  }

  body.v2.v2-has-cartbar { padding-bottom: 68px; }
  /* Når modal er åben skjules cartbaren (se body.modal-open .v2-cartbar i
     sticky cart bar-blokken), så de 68px padding-bottom på body skubber
     modal-content op og afslører shop-baggrunden under modal-footeren. Fjern
     padding-bottom mens modalen er åben — så fylder modal hele viewporten. */
  body.v2.v2-has-cartbar.modal-open { padding-bottom: 0; }

  .v2-breadcrumbs { padding: 14px 0 4px; font-size: 12px; }
  .v2-breadcrumbs .v2-sep { margin: 0 6px; }

  .v2-pagehead {
    flex-direction: column; align-items: stretch;
    gap: 12px; padding: 4px 0 18px; margin-bottom: 18px;
  }
  .v2-pagehead .v2-sub { font-size: 13px; }
  .v2-toolbar { justify-content: space-between; }
  .v2-select { flex: 1; padding: 9px 36px 9px 14px; font-size: 13px; }

  .v2-chip-scroll { margin: 0 -16px; padding: 4px 16px 12px; }

  .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .v2-card .v2-body { padding: 12px 12px 8px; }
  .v2-card .v2-title { font-size: 15px; line-height: 1.25; }
  .v2-card .v2-desc { display: none; }
  .v2-price { font-size: 16px; }
  .v2-card .v2-card-actions { padding: 0 10px 10px; gap: 6px; }
  .v2-btn { padding: 9px 10px; font-size: 13px; }
  .v2-card .v2-card-actions .v2-btn-primary span { display: none; }
  .v2-card .v2-card-actions .v2-btn-primary::after { content: "I kurv"; font-weight: 600; }
  .v2-stepper-btn { flex-basis: 34px; padding: 9px 0; }
  .v2-stepper-count { font-size: 13px; }
  .v2-badge-discount, .v2-badge-new { font-size: 11px; padding: 4px 8px; top: 8px; left: 8px; }
  .v2-badge-ugetilbud { font-size: 11px; padding: 4px 8px; bottom: 8px; left: 8px; }
  .v2-badge-bonus { font-size: 11px; padding: 4px 8px; bottom: 8px; right: 8px; }
  .v2-fav { opacity: 1; width: 32px; height: 32px; }

  .v2-footer { padding: 56px 0 20px; }
  .v2-footer .v2-grid4 { grid-template-columns: 1fr; gap: 28px; }
  .v2-footer .v2-legal { flex-direction: column; gap: 4px; font-size: 12px; }
}

@media (max-width: 380px) {
  .v2-grid { grid-template-columns: 1fr; }
  .v2-card .v2-desc { display: -webkit-box; }
}

/* ---------- Drawer ---------- */
.v2-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(var(--brand-dark-rgb),.45);
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.v2-drawer-overlay[data-open] { opacity: 1; }
.v2-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg);
  z-index: var(--z-drawer);
  transform: translateX(-100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: 0 16px 40px rgba(var(--brand-dark-rgb),.25);
  overflow-y: auto;
}
.v2-drawer[data-open] { transform: translateX(0); }
.v2-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.v2-drawer-head .v2-brand img { height: 40px; }
.v2-drawer-nav { padding: 12px 12px 0; display: flex; flex-direction: column; }
.v2-drawer-nav a {
  padding: 14px 12px;
  font-size: 17px;
  font-weight: 500;
  border-radius: var(--radius-md);
  color: var(--text);
}
.v2-drawer-nav a.active { color: var(--brand); background: var(--sky-soft); }
.v2-drawer-section {
  padding: 20px 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.v2-drawer-section h5 {
  margin: 0 12px 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.v2-drawer-section a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
}
.v2-drawer-section a.active { color: var(--brand); font-weight: 600; background: var(--sky-soft); }
.v2-drawer-foot {
  margin-top: auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
}
.v2-drawer-contact {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand);
  padding: 6px 0;
}
.v2-drawer-contact svg { width: 16px; height: 16px; }
body.v2-drawer-open { overflow: hidden; }

/* Hide drawer on desktop regardless of display:none default */
@media (max-width: 900px) {
  .v2-drawer, .v2-drawer-overlay { display: block; }
  .v2-drawer-overlay:not([hidden]) { display: block; }
}

/* ---------- Sticky mobile cart bar ---------- */
.v2-cartbar { display: none; }
@media (max-width: 640px) {
  .v2-cartbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(var(--bg-rgb),.96);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(var(--brand-dark-rgb),.08);
  }
  /* Skjul cartbar når en modal er åben — ellers ligger den oven på modal-footer
     ("Tilføj i kurv" inde i produktModal) og det giver to overlappende +I-kurv-knapper. */
  body.modal-open .v2-cartbar { display: none; }
  .v2-cartbar .v2-cartbar-summary { display: flex; flex-direction: column; line-height: 1.15; }
  .v2-cartbar .v2-cartbar-summary strong { font-size: 15px; color: var(--brand-dark); }
  .v2-cartbar .v2-cartbar-summary small { font-size: 12px; color: var(--text-muted); }
  .v2-cartbar .v2-btn { flex: 0 0 auto; padding: 11px 18px; font-size: 14px; }
}

/* Override Bootstrap container-xxl padding inside v2 body so our .v2-container behaves */
body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4,
body.v2 h5 { font-family: var(--font-serif); }

/* Keep Bootstrap modal fonts sane inside v2 */
body.v2 .modal h1,
body.v2 .modal h2,
body.v2 .modal h3,
body.v2 .modal h4,
body.v2 .modal h5 { font-family: var(--font-serif); color: var(--brand-dark); }
/* Produkt-detalje-modal (Thomas 274): sort tekst frem for brand-dark, så
   produktet selv (billede, badges, allergener) får visuelt forrang. */
body.v2 .v2-produkt-modal h2.v2-produkt-modal-title,
body.v2 .v2-produkt-modal .v2-produkt-modal-desc,
body.v2 .v2-produkt-modal .v2-produkt-modal-desc p,
body.v2 .v2-produkt-modal .v2-produkt-modal-pris,
body.v2 .v2-produkt-modal .v2-produkt-modal-pris .v2-price,
body.v2 .v2-produkt-modal .v2-produkt-modal-allergener,
body.v2 .v2-produkt-modal .v2-produkt-modal-allergener strong { color: #000; }

/* ---------- Offcanvas (kurv, tilvalg) ---------- */
body.v2 .v2-offcanvas {
  background: var(--surface); /* hvid — adskiller offcanvas tydeligt fra side-bg */
  border-left: 1px solid var(--border);
  color: var(--text);
  width: min(var(--offcanvas-width), 100vw);
}
body.v2 .v2-offcanvas .offcanvas-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
}
body.v2 .v2-offcanvas .offcanvas-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.23;
  color: var(--brand-dark);
}
body.v2 .v2-offcanvas .offcanvas-body { padding: 16px 20px; display: flex; flex-direction: column; }

.v2-kurv-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/* ---------- Persistent kurv-sidebar (Thomas 274) ----------
   Når body har klassen .kurv-sidebar OG viewporten er ≥1280px, omdannes
   #offcanvasKurv fra Bootstrap-offcanvas til en fast højre-side-sidebar.
   Aktiveres KUN på produktsider (entry.asp/index.asp injicerer klassen
   baseret på currentPage + WebShopKurvSidebar-egenskaben).

   Logikken:
   - .v2-container på produktsiden får 2-kolonne grid (main + sidebar)
   - #offcanvasKurv overrides Bootstrap-offcanvas-stil og bliver en
     position: sticky-blok i højre kolonne
   - Modal-backdrop og hide-animations skal IKKE køre — JS-laget skipper
     offcanvas.show()/hide() og kalder direkte renderKurv() i stedet.
   - "Fortsæt med at handle"-knappen skjules (dens funktion = "luk
     offcanvas" giver ikke mening når kurven altid er synlig).
*/
@media (min-width: 1280px) {
  /* Reservér plads til sidebaren i højre side. Sidebaren ligger som
     position:fixed, så vi padder main-content for ikke at gå under den.
     Container-max-width hæves også (fra 1280px → fyld viewport) så grid
     kan udnytte den ekstra bredde der er ved siden af sidebaren — ellers
     ville main-content stå i en smal centreret kolonne med tomme felter
     på begge sider, og den 4-kolonne v2-grid blev klemt. */
  body.kurv-sidebar main.v2-container {
    max-width: none;
    padding-right: calc(340px + 32px);
  }
  /* Hero-banner ligger udenfor main og er fuld bredde — det er ok at den
     går bag sidebaren da sidebaren rendres oven på (z-index: 1) og hero
     ikke har interaktive elementer i højre side. */

  /* Lidt mindre kort så 4 kolonner stadig passer i smallere main-bredde */
  body.kurv-sidebar .v2-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Override Bootstrap offcanvas så det bliver en fast højre-sidebar.

     Top-kanten (Bodenhoff-feedback 31/8-26, layout-punkt 8): kurven går op
     til den blå navbar-linje — dvs. starter LIGE UNDER navbarens underkant
     og må aldrig overskride "Log ind"-knappen. --v2-kurv-sidebar-top sættes
     af main.js (initKurvSidebarTop) til den FAKTISKE underkant af navbaren
     OG butiksbjælken ("Afhent fra … / Åben · Lukker kl.") målt med
     getBoundingClientRect — bjælken er ikke sticky, så scrollet væk glider
     kurven op til den blå linje.
     Kategorilinjen/hero indgår IKKE: kurven ligger til højre for chips'ene
     (main-container er paddet, så chips aldrig når ind under kurven) og
     oven på heroens højre side, som ikke har interaktivt indhold.
     Fallback (før JS kører): --v2-navbar-height.

     Z-orden: --z-sidebar (30) ligger OVER chipbar (--z-dropdown=20) og hero
     (25), men UNDER navbar (--z-sticky=40) — så skulle top-målingen et
     enkelt frame være bagud, tegnes den blå menulinje og Log ind stadig hen
     over kurven i stedet for omvendt. Ændr ALDRIG denne z-index til ≥ 40. */
  body.kurv-sidebar #offcanvasKurv {
    --kurv-top: calc(var(--v2-kurv-sidebar-top, var(--v2-navbar-height)) + 8px);
    position: fixed;
    top: var(--kurv-top);
    right: 16px;
    bottom: auto;
    left: auto;
    transform: none !important;          /* Bootstrap sætter translate(100%) ellers */
    visibility: visible !important;
    width: 340px;
    height: calc(100vh - var(--kurv-top) - 16px);
    max-height: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    z-index: var(--z-sidebar);
  }
  body.kurv-sidebar #offcanvasKurv .offcanvas-header { display: none; }
  body.kurv-sidebar #offcanvasKurv .offcanvas-body {
    height: 100%;
    overflow: hidden;
  }
  body.kurv-sidebar #offcanvasKurv .v2-kurv-scroll {
    max-height: 100%;
  }

  /* Skjul modal-backdrop når sidebar er aktiv (offcanvas.show kaldes ikke
     normalt, men hvis bruger på en eller anden måde trigger den så skal
     backdrop ikke dække UI). */
  body.kurv-sidebar .offcanvas-backdrop { display: none !important; }

  /* "Fortsæt med at handle"-knappen er overflødig når kurven altid er
     synlig — kunden kan bare klikke videre på produktlisten. */
  body.kurv-sidebar #offcanvasKurv #opdaterbestilling { display: none; }

  /* Ingen flash-animation i sidebar-mode — kurven er altid synlig og
     bruger ser varens linje blive tilføjet. Den oprindelige brightness(2)-
     flash ville bare blende sidebaren hvid kort, hvilket er forstyrrende
     når kurven sidder fast i højre side. Override så .oc-flash er en no-op
     når sidebar er aktiv. */
  body.kurv-sidebar #offcanvasKurv.oc-flash { animation: none; }

  /* Skjul evt. mobile sticky-cart bar når sidebar er aktiv på desktop */
  body.kurv-sidebar.v2-has-cartbar .v2-cartbar { display: none; }

  /* Skjul navbar-kurv-ikonet når sidebar er aktiv (kurven er altid synlig,
     ikon-klik giver ingen mening). Behold på mobil hvor offcanvas-flow
     stadig bruges. */
  body.kurv-sidebar .navbar-kurv-toggle { display: none; }

  /* Tom kurv → skjul sidebaren helt og lad produkterne fylde fuld bredde.
     `body.kurv-tom` toggles fra kurvbar.inc.asp baseret på antal varer.
     Når en vare lægges i kurven fjernes klassen og produkterne reflower
     for at give plads til sidebaren (340px + 32px gap). Gradient-CSS
     transition gør det glat så produkter ikke "hopper". */
  body.kurv-sidebar.kurv-tom main.v2-container {
    padding-right: var(--space-3, 16px);
  }
  body.kurv-sidebar.kurv-tom #offcanvasKurv { display: none; }
  body.kurv-sidebar main.v2-container {
    transition: padding-right .25s var(--ease, ease);
  }
}
.v2-kurv-lines {
  display: flex; flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.v2-kurv-line {
  display: grid;
  grid-template-columns: 56px 1fr 72px;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
/* Sidste vare har ingen skillelinje — .v2-kurv-total har sin egen border-top,
   så uden denne regel tegnes to streger lige over totalen. */
.v2-kurv-line:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.v2-kurv-line-media {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.v2-kurv-line-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-kurv-line-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-kurv-line-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
}
.v2-kurv-line-priceline {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 13px; color: var(--text-muted);
}
.v2-kurv-line-rabat { color: var(--accent); text-align: right; }
.v2-kurv-line-tilvalg {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 2px;
}
.v2-kurv-line-info {
  font-size: 12px;
  color: var(--brand);
  margin-top: 2px;
}
.v2-kurv-line-info--auto { opacity: 0.5; }
.v2-kurv-line-actions { display: flex; gap: 6px; margin-top: 6px; }
.v2-btn-sm { padding: 5px 10px; font-size: 12px; }
.v2-btn-danger { color: var(--alert-danger-text); border-color: var(--alert-danger-border); }
.v2-btn-danger:hover { background: var(--alert-danger-bg); color: var(--alert-danger-text); }

.v2-qty-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.v2-qty-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

.v2-kurv-total {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 4px;
  border-top: 2px solid var(--border-strong);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.v2-kurv-footer-actions {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.v2-kurv-footer-actions .v2-btn { width: 100%; padding: 12px 16px; font-size: 15px; }
/* Knap-trin-farver i kurv-footer: "Fortsæt med at handle" får en lys beige
   baggrund (afdæmpet sand) så den hænger visuelt sammen med den mørkere
   "Gå til kurv"-knap (accent-brun) — i stedet for at være helt transparent
   ghost-knap. Mønsteret giver to bløde brune nuancer der spejler PDF-
   designet (Thomas 274). */
.v2-kurv-footer-actions #opdaterbestilling.v2-btn-ghost {
  background: rgba(var(--accent-rgb), .14);
  border-color: rgba(var(--accent-rgb), .35);
  color: var(--text);
}
.v2-kurv-footer-actions #opdaterbestilling.v2-btn-ghost:hover {
  background: rgba(var(--accent-rgb), .24);
  border-color: rgba(var(--accent-rgb), .55);
}

/* Oc-flash-animation (fra kurvoffcanvas.asp) — OK, bevares */

/* ---------- Fejl-side (404) ---------- */
.v2-error { padding: 60px 0 100px; max-width: 640px; margin: 0 auto; text-align: center; }
.v2-error-hero { padding: 32px 0; }
.v2-error-code {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 140px);
  line-height: 1;
  color: var(--brand-dark);
  opacity: .35;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.v2-error h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.23;
  color: var(--brand-dark);
  margin: 0 0 12px;
}
.v2-error-actions {
  margin-top: 24px;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.v2-error-actions .v2-btn { padding: 12px 22px; }

/* ---------- Kvittering (accept.asp) ---------- */
.v2-accept { padding: 40px 0 80px; max-width: 720px; margin: 0 auto; }
.v2-accept-hero { text-align: center; padding: 32px 0; }
.v2-accept-icon {
  width: 88px; height: 88px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.v2-accept-icon svg { width: 44px; height: 44px; }
.v2-accept-success .v2-accept-icon { background: var(--alert-success-bg); color: var(--success); }
.v2-accept-warning .v2-accept-icon { background: var(--alert-warning-bg); color: var(--alert-warning-text); }
.v2-accept-danger  .v2-accept-icon { background: var(--alert-danger-bg); color: var(--alert-danger-text); }

.v2-accept h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.23;
  color: var(--brand-dark);
  margin: 0 0 12px;
}
.v2-accept-lead { font-size: 17px; color: var(--text); margin: 0 auto 8px; max-width: 540px; }
.v2-accept-meta { color: var(--text-muted); font-size: 14px; margin: 8px auto 0; max-width: 540px; }

.v2-accept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.v2-accept-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.23;
  color: var(--brand-dark);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.v2-accept-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.v2-accept-table th, .v2-accept-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.v2-accept-table th.num, .v2-accept-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.v2-accept-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.v2-accept-table tfoot th {
  padding-top: 14px; font-family: var(--font-serif); font-weight: 700; font-size: 18px;
  color: var(--brand-dark); border-bottom: none;
}
.v2-accept-bemarkning { color: var(--text-muted); font-size: 13px; }
.v2-accept-tilvalg { color: var(--text-muted); font-size: 13px; display: inline-block; }
.v2-accept-tilvalg-thumbs { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 4px; }
.v2-accept-tilvalg-thumb {
  width: 60px; height: 60px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border-color); vertical-align: middle;
}

.v2-accept-location { border-left: 4px solid var(--brand); }
.v2-accept-date { font-size: 16px; color: var(--brand-dark); margin: 0 0 12px; }
.v2-accept-loc-navn { font-family: var(--font-serif); font-weight: 700; color: var(--brand-dark); margin: 0 0 4px; font-size: 16px; }
.v2-accept-loc-adresse { color: var(--text-muted); font-size: 14px; white-space: pre-line; margin: 0 0 4px; }
.v2-accept-loc-telefon { display: flex; align-items: center; gap: 8px; color: var(--brand); margin: 8px 0 0; font-size: 14px; }
.v2-accept-loc-telefon a { color: inherit; font-weight: 600; }

.v2-accept-cta { text-align: center; margin-top: 24px; }

/* ---------- Kurv-side (kurv.asp) ----------
   kurv.asp renderer med Bootstrap-classes (.row, .col-*, .btn), vi styrer bare
   hvordan det visuelt præsenteres i v2-kontekst uden at røre JS-logikken. */
.v2-kurv-page { padding-bottom: 80px; }
.v2-kurv-page #kurv { padding: 0; max-width: 100%; }

body.v2 .v2-kurv-page .productline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px !important;
  margin: 0 0 16px !important;
  align-items: center;
}
body.v2 .v2-kurv-page .productline img {
  border-radius: var(--radius-md);
  aspect-ratio: 1/1;
  object-fit: cover;
}
body.v2 .v2-kurv-page .productline .bg-discount {
  background: var(--accent);
  color: var(--surface);
  font-size: 11px !important;
  font-weight: 600;
  padding: 4px 8px !important;
  border-radius: 999px !important;
}

/* Alle kurv-linje-knapper (Redigér, slet ×) får ens v2-radius
   på alle skærmstørrelser. Bootstrap's default .btn er kun 0.2rem = kantet. */
body.v2 .v2-kurv-page .productline .btn {
  border-radius: 10px;
}

/* Antal +/-: ensartet look på alle bredder (før var reglerne kun i mobile
   media-queryen, hvilket gav skiftende baggrundsfarve ved resize). */
body.v2 .v2-kurv-page .productline .input-group-text {
  background: var(--bg-2);
  border-color: var(--border-strong);
  color: var(--text);
  cursor: pointer;
  justify-content: center;
}
body.v2 .v2-kurv-page .productline .input-group-text:hover {
  background: var(--border);
}
body.v2 .v2-kurv-page .productline .kurv-antal-input {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Mobil-layout: overskriv Bootstrap-row/col med CSS Grid så elementer
       ikke klemmer sammen på smalle skærme. Aktiveres <= 767px fordi de
       oprindelige col-4/col-2/col-1 sidder hårdt fast hele vejen ned. ---- */
@media (max-width: 767px) {
  body.v2 .v2-kurv-page .productline {
    display: grid !important;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "foto  body    slet"
      "foto  body    slet"
      "qty   qty     qty";
    gap: 10px 12px;
    padding: 14px !important;
    align-items: start;
  }
  /* Nulstil Bootstrap-col-flex så grid-areas virker — col-* har flex: 0 0 ... */
  body.v2 .v2-kurv-page .productline > [class*="col-"] {
    flex: unset;
    max-width: 100%;
    width: auto;
    padding: 0;
  }
  body.v2 .v2-kurv-page .productline > .col-lg-2 { grid-area: foto; width: 72px; }
  body.v2 .v2-kurv-page .productline > .col-lg-2 img { width: 72px; height: 72px; }
  body.v2 .v2-kurv-page .productline > .col-4     { grid-area: body; min-width: 0; }
  body.v2 .v2-kurv-page .productline > .col-2     { grid-area: qty; }
  body.v2 .v2-kurv-page .productline > .col-1     { grid-area: slet; }

  /* Antal-input fylder ikke hele bredden — centrer i eget rum */
  body.v2 .v2-kurv-page .productline > .col-2 .input-group {
    max-width: 140px;
    margin: 0 auto !important;
  }
  body.v2 .v2-kurv-page .productline > .col-2 .input-group-text {
    width: 36px; flex: 0 0 36px; justify-content: center;
    background: var(--bg-2); border-color: var(--border-strong); color: var(--text);
    cursor: pointer;
  }
  body.v2 .v2-kurv-page .productline > .col-2 .kurv-antal-input {
    text-align: center;
    padding: 6px 4px;
  }

  /* Body-kolonnen: navn + pris/rabat + tilvalg + knapper stables pænt */
  body.v2 .v2-kurv-page .productline > .col-4 > p { margin-bottom: 4px; font-size: 15px; }
  body.v2 .v2-kurv-page .productline > .col-4 .d-flex { flex-wrap: wrap; gap: 4px 8px; }
  body.v2 .v2-kurv-page .productline > .col-4 [data-linje-stykpris] { font-weight: 600; color: var(--brand-dark); }
  body.v2 .v2-kurv-page .productline > .col-4 [data-linje-rabatter] { color: var(--accent); font-size: 13px; }

  /* Handling-knapperne pakkes i egen række under pris */
  body.v2 .v2-kurv-page .productline > .col-4 .btn {
    margin-top: 6px !important;
    margin-right: 6px !important;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
  }

  /* Slet-knap øverst til højre */
  body.v2 .v2-kurv-page .productline > .col-1 { text-align: right; }
  body.v2 .v2-kurv-page .productline > .col-1 .btn-slet-linje-kurv {
    padding: 6px 9px;
    font-size: 14px;
    border-radius: 8px;
  }

  /* Diskret skillelinje ml. vare og qty-række */
  body.v2 .v2-kurv-page .productline > .col-2 {
    border-top: 1px solid var(--border);
    padding-top: 10px !important;
  }
}
body.v2 .v2-kurv-page #kurvtotal {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
body.v2 .v2-kurv-page .afhentning .bg-white,
body.v2 .v2-kurv-page .levering .bg-white {
  background: var(--surface) !important;
  border-color: var(--brand) !important;
  border-radius: var(--radius);
}
body.v2 .v2-kurv-page .input-group .form-control {
  border-radius: 8px;
}
body.v2 .v2-kurv-page .btn-group .btn {
  border-radius: 10px !important;
}

/* "Bestil her!" submit-knap (#opdaterkurv) — kurv.asp renderer den som
   .btn.btn-primary.btn-sm i en tom .row; uden cols kan flex-row gøre den
   0 px bred. style.css har .btn.btn-primary { color: var(--hover-color) }
   og klientens StyleSheet2 (fra DB) sætter ofte --hover-color til samme
   som baggrund, så teksten forsvinder. Vi tvinger hvid + fuld bredde. */
body.v2 .v2-kurv-page #opdaterkurv {
  display: block !important;
  width: 100%;
  max-width: 360px;
  margin: 24px auto 0 !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--surface) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.25);
}
body.v2 .v2-kurv-page #opdaterkurv:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: var(--surface) !important;
}
/* Den omkringliggende .row skaber negative margins vi ikke behøver her */
body.v2 .v2-kurv-page #opdaterkurv:only-child,
body.v2 .v2-kurv-page .row:has(> #opdaterkurv) {
  margin: 0 !important;
  display: block;
}

/* Log ind-knap i kurven (#kurvLoginBtn) — mindre, diskret variant */
body.v2 .v2-kurv-page #kurvLoginBtn {
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: 13px;
}

/* ---------- Tilvalg-offcanvas ---------- */
.v2-tilvalg-gruppe {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.v2-tilvalg-gruppe:first-child { padding-top: 4px; }
.v2-tilvalg-gruppe-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--brand-dark);
  margin: 0 0 4px;
}
.v2-tilvalg-gruppe-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
body.v2 .v2-tilvalg-gruppe .form-check { padding-left: 2rem; margin-bottom: 6px; }
body.v2 .v2-tilvalg-gruppe .form-check-input { margin-top: .25rem; }
body.v2 .v2-tilvalg-gruppe .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
body.v2 .v2-tilvalg-gruppe .form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb),.25);
}
body.v2 .v2-tilvalg-gruppe .form-check-label { font-size: 14px; color: var(--text); }
body.v2 .v2-tilvalg-gruppe .tv-mul-antal,
body.v2 .v2-tilvalg-gruppe .tv-mul-tekst {
  width: 80px;
  margin-left: auto;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}
body.v2 .v2-tilvalg-gruppe .tv-mul-tekst { width: 100%; margin-left: 0; margin-top: 4px; }

.v2-tilvalg-gruppe .tv-skal-udfyldes {
  display: block;
  font-size: 12px;
  color: var(--alert-danger-text);
  margin-bottom: 8px;
  font-weight: 600;
}

.v2-tilvalg-antal {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.v2-tilvalg-antal .form-label { margin: 0; font-weight: 600; font-size: 14px; }
.v2-tilvalg-antal .v2-qty-input { width: 80px; }

.v2-tilvalg-fejl {
  background: var(--alert-danger-bg); color: var(--alert-danger-text);
  border: 1px solid var(--alert-danger-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.v2-tilvalg-submit { width: 100%; padding: 12px 16px; font-size: 15px; }

.v2-loading {
  display: flex; justify-content: center; align-items: center;
  padding: 60px 0;
  color: var(--brand);
}
body.v2 .v2-loading .spinner-border { color: var(--brand); }

/* ---------- Modal (v2-styling af Bootstrap-modaler) ---------- */
body.v2 .modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
body.v2 .modal-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  padding: 16px 20px;
}
body.v2 .modal-title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--brand-dark);
  font-size: 22px;
  line-height: 1.23;
}
body.v2 .modal-body { padding: 20px; color: var(--text); }
body.v2 .modal-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 14px 20px;
}

/* Form inputs i v2-sammenhæng */
body.v2 .form-control,
body.v2 .form-select {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--text);
}
body.v2 .form-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
}

/* Alerts — mere diskret end bootstrap default */
body.v2 .alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 12px 16px;
  font-size: 14px;
}
body.v2 .alert-info    { background: var(--sky-soft); color: var(--brand-dark); border-color: var(--sky-deep); }
body.v2 .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); }
body.v2 .alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-text); border-color: var(--alert-warning-border); }
body.v2 .alert-danger  { background: var(--alert-danger-bg); color: var(--alert-danger-text); border-color: var(--alert-danger-border); }

/* Bootstrap btn-close — sikrer den er synlig på lys bg-2 header */
body.v2 .modal-header .btn-close { opacity: .7; }
body.v2 .modal-header .btn-close:hover { opacity: 1; }

/* ---------- Produkt-modal (v2-produkt-modal) ---------- */
/* Bredde styres via --modal-product-width-token (420px default ≈ 75% af
   tidligere 560px) — så modal-dialog skalerer sammen med det 75%-mindre
   billede. Ellers virker billedet uforholdsmæssigt smalt i en bred modal. */
body.v2 .v2-produkt-modal .modal-dialog { max-width: var(--modal-product-width); }
body.v2 .v2-produkt-modal .modal-content {
  position: relative;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
body.v2 .v2-produkt-modal .modal-body,
body.v2 .v2-produkt-modal .modal-header,
body.v2 .v2-produkt-modal .modal-footer { padding: 0; border: none; background: none; }

.v2-produkt-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: var(--z-overlay);
  width: 40px; height: 40px;
  border-radius: 999px;
  /* Brug background-color (ikke background-shorthand) så Bootstrap's
     .btn-close-baggrundsbillede med X-ikonet ikke overskrives. På top
     af et produkt-foto er en næsten-hvid baggrund nogle gange usynlig
     (hvidt mod hvidt papir / kagemand på lyst bord) — så vi bruger en
     solid hvid baggrund + 2px mørk border så krydset altid er tydeligt. */
  background-color: #fff;
  background-size: 16px;
  opacity: 1;
  border: 2px solid rgba(var(--brand-dark-rgb), .85);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background-color .2s, transform .15s var(--ease);
}
.v2-produkt-modal-close:hover { background-color: var(--surface); transform: scale(1.05); opacity: 1; }

.v2-produkt-modal-media {
  position: relative;
  /* Mindre billede så teksten under får mere vægt — kunden bruger
     primært modalen til at læse beskrivelse + ingredienser, ikke til
     at zoome på fotoet (fotos er ikke i høj nok opløsning).
     Selve modal-dialog'en er allerede skaleret til 75% (420px), så
     billedet fylder fuld bredde af den smallere modal. */
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  overflow: hidden;
  flex-shrink: 0;
}
.v2-produkt-modal-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .15s ease-out;
}
.v2-produkt-modal-media img.v2-modal-img-fade { opacity: 0; }

/* Prev/next-knapper på hovedbilledet — skjules hvis kun ét foto */
.v2-produkt-modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(var(--surface-rgb),.88);
  border: none;
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background .2s, transform .15s var(--ease);
  z-index: var(--z-overlay);
}
.v2-produkt-modal-nav:hover { background: var(--surface); transform: translateY(-50%) scale(1.05); }
.v2-produkt-modal-nav svg { width: 20px; height: 20px; }
.v2-produkt-modal-prev { left: 12px; }
.v2-produkt-modal-next { right: 12px; }

/* Dots i bunden af billedet — giver hurtig visuel oversigt over antal fotos */
.v2-produkt-modal-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.v2-produkt-modal-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(var(--surface-rgb),.55);
  border: none;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: background .2s, transform .15s var(--ease);
}
.v2-produkt-modal-dots button:hover { background: rgba(var(--surface-rgb),.85); }
.v2-produkt-modal-dots button.v2-modal-dot-active {
  background: var(--surface);
  transform: scale(1.25);
}

/* Thumbnail-række under billedet — gør det nemt at se alle fotos på én gang.
   overflow-y: hidden er eksplicit så browseren ikke trigger vertikal scrollbar
   ved thumbnail-række når overflow-x: auto er sat. */
.v2-produkt-modal-thumbs {
  display: flex; gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  flex-shrink: 0;
}
.v2-produkt-modal-thumbs::-webkit-scrollbar { height: 4px; }
.v2-produkt-modal-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.v2-modal-thumb {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color .15s, transform .15s var(--ease);
}
.v2-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-modal-thumb:hover { border-color: var(--border-strong); }
.v2-modal-thumb.v2-modal-thumb-active { border-color: var(--brand); }

@media (max-width: 480px) {
  .v2-produkt-modal-nav { width: 36px; height: 36px; }
  .v2-modal-thumb { flex: 0 0 54px; width: 54px; height: 54px; }
}

.v2-produkt-modal-body {
  padding: 24px 28px 8px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0; /* tillader flex-child at krympe under content-højde så scroll virker */
}
.v2-produkt-modal-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  color: #000;
  margin: 0 0 12px;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Info-knap ved siden af produktnavn — åbner popover med fuld varedeklaration.
   Holdt diskret (mindre end før — 22px) så den ikke konkurrerer med titlen. */
.v2-modal-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--brand);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .15s var(--ease);
}
.v2-modal-info-btn .v2-ic-sm { width: 14px; height: 14px; }
.v2-modal-info-btn:hover { background: var(--brand); color: var(--surface); transform: scale(1.08); }
.v2-modal-info-btn[aria-describedby] { background: var(--brand); color: var(--surface); }

/* Mindre variant til "i"-ikonet ud for tilvalgs-muligheder (Slik → Click Mix
   osv.) — samme cirkel-look som produkt-modalens info-knap, blot kompakt så
   den passer ved siden af en checkbox/radio-label. */
.v2-tilvalg-info-btn {
  width: 18px; height: 18px;
  margin-left: 2px;
  vertical-align: middle;
  padding: 0;
}
.v2-tilvalg-info-btn .v2-ic-sm { width: 11px; height: 11px; }

/* Vægt-pille ved siden af info-knappen — samme look (bg-2 + brand farve +
   border-strong border + 22px højde) men afrundet pille (ikke cirkel) så
   den kan rumme "X g"-teksten. Ingen cursor pointer, ingen hover-effekt
   — dette er ren info, ikke en knap. Mål-pillen deler styling så de to
   info-pille-typer matcher visuelt på siden af titlen. */
.v2-modal-vaegt,
.v2-modal-maal {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: #000;
  border: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  flex-shrink: 0;
}

/* Popover med ingrediensliste + evt. vægt-sektion. h6-overskrifter
   bruges når BEGGE sektioner vises (ellers vises kun popover-titel
   fra Bootstrap). */
.v2-modal-indhold-popover {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  max-height: 320px;
  overflow-y: auto;
}
.v2-modal-indhold-popover p { margin: 0 0 6px; }
.v2-modal-indhold-popover p:last-child { margin-bottom: 0; }
.v2-modal-indhold-popover h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 12px;
  margin: 0 0 4px;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.v2-modal-popover-skel {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

/* Allergen-badges — vises i en vandret række mellem beskrivelse og pris.
   Tekstene kommer fra CAPS-LOCK-ord i ingredienslisten. flex-wrap med gap
   så pills får luft mellem sig både horisontalt og vertikalt når de wrapper. */
.v2-produkt-modal-allergener {
  margin: 12px 0 0;
  font-size: 13px;
  color: #000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.v2-produkt-modal-allergener strong {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  margin-right: 4px;
  color: #000;
}
/* Allergen-pills i dæmpet sand-gul — afsætter sig som "advarsel" uden at
   råbe lige så højt som det rene var(--warning-soft-bg) (varmgul). Holdes
   tæt på pill-tekstens tekststørrelse så proportionerne mellem labelet
   "Allergener:" og pillsene er afstemt. Mindre padding + small font så pills
   ikke flyder sammen, og luft sikres via parent flex gap. */
.v2-allergen-badge {
  display: inline-block;
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.v2-produkt-modal-desc p {
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  margin: 0 0 10px;
}
.v2-produkt-modal-desc p:last-child { margin-bottom: 0; }

.v2-produkt-modal-indhold {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-muted);
}

/* Tilvalg-container i produkt-modal — vises mellem beskrivelse og footer
   når p.tilvalg > 0. Hver gruppe har afdæmpet baggrund så de visuelt
   adskiller sig fra beskrivelsen. */
.v2-produkt-modal-tilvalg {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.v2-produkt-modal-tilvalg .v2-loading {
  display: flex; justify-content: center; padding: 12px 0;
}
.v2-produkt-modal-tilvalg .v2-tilvalg-gruppe {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
  scroll-margin-top: 16px;
}
.v2-produkt-modal-tilvalg .v2-tilvalg-gruppe-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 8px;
  color: #000;
}
.v2-produkt-modal-tilvalg .v2-tilvalg-gruppe-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.v2-produkt-modal-tilvalg .form-check {
  margin-bottom: 4px;
}
.v2-produkt-modal-tilvalg .form-check-label {
  color: #000;
  font-size: 14px;
  cursor: pointer;
}

/* Flash-effekt når CTA-klik finder manglende obligatorisk valg —
   gruppen får kort en rød border + skygge så det er tydeligt hvor
   kunden skal kigge. */
@keyframes v2-tilvalg-flash {
  0%, 100% {
    border-color: transparent;
    box-shadow: none;
  }
  20%, 60% {
    border-color: var(--alert-danger-border);
    box-shadow: 0 0 0 3px rgba(132, 42, 42, .15);
  }
}
.v2-produkt-modal-tilvalg .v2-tilvalg-gruppe-flash {
  animation: v2-tilvalg-flash 1.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .v2-produkt-modal-tilvalg .v2-tilvalg-gruppe-flash {
    animation: none;
    border-color: var(--alert-danger-border);
  }
}
.v2-produkt-modal-indhold strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.v2-produkt-modal-indhold p { margin: 0 0 4px; line-height: 1.5; }
.v2-produkt-modal-indhold p:last-child { margin-bottom: 0; }

.v2-produkt-modal-udsolgt {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--alert-danger-bg);
  color: var(--alert-danger-text);
  border: 1px solid var(--alert-danger-border);
  border-radius: var(--radius-md);
}
.v2-produkt-modal-udsolgt svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.v2-produkt-modal-udsolgt strong { display: block; font-size: 14px; margin-bottom: 2px; }
.v2-produkt-modal-udsolgt p { margin: 0; font-size: 13px; color: var(--alert-danger-text-strong); line-height: 1.5; }

/* Forudbestillings-note i produktmodal — informativ (warning-palet), ikke fejl. */
.v2-produkt-modal-forudbestilling {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
  border: 1px solid var(--alert-warning-border);
  border-radius: var(--radius-md);
}
.v2-produkt-modal-forudbestilling svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.v2-produkt-modal-forudbestilling strong { display: block; font-size: 14px; margin-bottom: 2px; }
.v2-produkt-modal-forudbestilling p { margin: 0; font-size: 13px; line-height: 1.5; }

.v2-produkt-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 28px 20px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.v2-produkt-modal-pris { display: flex; flex-direction: column; line-height: 1.2; color: #000; }
.v2-produkt-modal-pris .v2-price {
  font-size: 22px;
  font-family: var(--font-serif);
  font-weight: 700;
  color: #000;
}
.v2-produkt-modal-pris .v2-price-old { font-size: 14px; color: var(--text-muted); }
.v2-produkt-modal-footer .v2-btn-primary { padding: 12px 24px; font-size: 15px; }

@media (max-width: 480px) {
  body.v2 .v2-produkt-modal .modal-dialog { margin: 0; max-width: 100%; height: 100%; }
  /* Hele modalen scroller som ét stykke (display:block + overflow-y:auto) i stedet
     for flex-column med inner scroll på body. Det får billedet til at scrolle ud
     af viewport så tilvalg får fuld plads — i stedet for at billedet bliver
     hængende i toppen og kun teksten scroller. */
  body.v2 .v2-produkt-modal .modal-content {
    height: 100%;
    border-radius: 0;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .v2-produkt-modal-media { aspect-ratio: 1 / 1; }
  .v2-produkt-modal-body {
    padding: 20px 20px 8px;
    overflow: visible;
    flex: none;
    min-height: 0;
    max-height: none;
  }
  /* Footer (pris + Tilføj-i-kurv) sticky-bottom så CTA altid er tilgængelig
     mens brugeren scroller gennem tilvalg. */
  .v2-produkt-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 14px 20px 18px;
  }
  /* Luk-knap fixed top-højre — modal-content er nu scroll-container, så uden
     fixed scroller × med billedet og brugeren kan ikke lukke uden scroll-tilbage.
     z-index skal være højere end Bootstrap modal-content (1050) og modal-backdrop
     (1040) ellers forsvinder × bag dem (position:fixed danner stacking-context
     på root, så de lokale 1050-værdier inde i modal-stakken gælder ikke). */
  .v2-produkt-modal-close {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    z-index: 1060;
  }
  .v2-produkt-modal-title { font-size: 22px; }
}

/* Intro-tekst i modal */
.v2-modal-intro { color: var(--text-muted); font-size: 14px; margin: 0 0 16px; }

/* Tekstlink — bruges i modaler til "send mig et kodeord" osv. */
.v2-btn-link {
  background: none; border: none; padding: 0;
  color: var(--brand);
  font-weight: 600; font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.v2-btn-link:hover { color: var(--brand-dark); }

/* Logged-in badge på navbar-login-ikon */
body.v2 .v2-icon-btn.v2-logged-in {
  background: var(--success);
  border-color: var(--success);
  color: var(--surface);
}
body.v2 .v2-icon-btn.v2-logged-in:hover { background: var(--success-dark); border-color: var(--success-dark); }

/* ---------- Carousel (forside hero) ---------- */
.v2-carousel-wrap { margin: 0 0 48px; }
.v2-carousel { position: relative; overflow: hidden; }
.v2-carousel .carousel-item { position: relative; min-height: clamp(360px, 56vw, 640px); }
.v2-carousel-media { position: absolute; inset: 0; }
.v2-carousel-media img,
.v2-carousel-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-carousel-media::after {
  content: ""; position: absolute; inset: 0;
  /* brand-dark-rgb (12,32,57) er meget tæt på den oprindelige (26,40,60) — bruger den centrale token. */
  background: linear-gradient(180deg, rgba(var(--brand-dark-rgb),0) 0%, rgba(var(--brand-dark-rgb),0) 40%, rgba(var(--brand-dark-rgb),.55) 100%);
}
.v2-carousel-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 0 48px;
  color: var(--surface);
}
.v2-carousel-text { max-width: 640px; }
.v2-carousel-text h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--surface);
  letter-spacing: -.01em;
}
.v2-carousel-teaser {
  font-size: clamp(16px, 2vw, 20px);
  margin: 0 0 24px;
  color: rgba(var(--surface-rgb),.92);
}
.v2-carousel-ctrl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(var(--surface-rgb),.9);
  color: var(--brand-dark);
  border: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s var(--ease);
  opacity: 1;
}
.v2-carousel-ctrl:hover { background: var(--surface); transform: translateY(-50%) scale(1.05); }
.v2-carousel-ctrl svg { width: 22px; height: 22px; }
.v2-carousel .carousel-control-prev.v2-carousel-ctrl { left: 16px; }
.v2-carousel .carousel-control-next.v2-carousel-ctrl { right: 16px; }
@media (max-width: 640px) {
  .v2-carousel-ctrl { width: 40px; height: 40px; }
  .v2-carousel .carousel-control-prev.v2-carousel-ctrl { left: 8px; }
  .v2-carousel .carousel-control-next.v2-carousel-ctrl { right: 8px; }
}

/* ---------- Live-søg i produktliste ---------- */
.v2-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 12px 4px 14px;
  transition: border-color .2s, box-shadow .2s;
  min-width: 240px;
}
/* Søgefeltet får ikke focus-ring (kunde-ønske). Ingen ændring ved fokus. */
.v2-search svg { color: var(--text-muted); flex-shrink: 0; }
.v2-search input[type=search] {
  border: none; background: transparent; outline: none;
  padding: 8px 10px; font: inherit; font-size: 14px;
  color: var(--text);
  flex: 1; min-width: 0;
}
.v2-search input::-webkit-search-cancel-button { display: none; }
.v2-search input::placeholder { color: var(--text-muted); }
.v2-search-clear {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 18px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0; line-height: 1;
  transition: background .15s, color .15s;
}
.v2-search-clear:hover { background: var(--bg-2); color: var(--text); }

@media (max-width: 900px) {
  .v2-search { min-width: 0; width: 100%; }
}

/* FLIP-animation: .v2-card smooth flytter når de filtreres.
   transition sættes eksplicit af JS under animation så den ikke er aktiv
   på hover-transforms (som bruger .25s cubic-bezier via default-reglen). */
.v2-card.v2-hidden { display: none !important; }
.v2-cat-section.v2-hidden { display: none !important; }

/* "Ingen resultater"-besked når søgning ikke matcher */
.v2-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 15px;
}
.v2-no-results strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--brand-dark);
  margin-bottom: 6px;
}

/* Varegruppe filter pills — bruges af produkter-siden som supplement/replacement for chips på desktop */
.v2-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.v2-pills a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  transition: background .15s var(--ease), color .15s, border-color .15s;
}
.v2-pills a:hover { background: var(--bg-2); }
.v2-pills a.active { background: var(--brand); color: var(--surface); border-color: var(--brand); }

/* ---- Image-tilvalg upload-slots ----
   En slot per styk når kunden bestiller en vare med Tilvalg.Type='image'.
   Slot'et viser preview hvis der er uploadet et foto, ellers placeholder
   med "Vælg billede"-knap. Når kunden ændrer antal i offcanvasTilvalg,
   re-renderes alle slots så antal matcher. */
.v2-tilvalg-image-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.v2-tilvalg-image-slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-tilvalg-image-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.v2-tilvalg-image-preview {
  aspect-ratio: 1;
  background: var(--bg-2) center/cover no-repeat;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  border: 1px dashed var(--border-strong);
  transition: background-color .15s var(--ease), border-color .15s;
}
.v2-tilvalg-image-placeholder {
  text-align: center;
  padding: 8px;
  pointer-events: none; /* så drag-drop-events går til parent */
}
/* Hover på en tom slot: subtil hint om at man kan droppe en fil */
.v2-tilvalg-image-slot:not([data-foto-id]):hover .v2-tilvalg-image-preview,
.v2-tilvalg-image-slot[data-foto-id="0"]:hover .v2-tilvalg-image-preview {
  background-color: var(--bg);
  border-color: var(--accent);
}
/* Aktiv drag-drop: tydelig fremhævning så kunden ved at filen lander her */
.v2-tilvalg-image-slot-dropping {
  background-color: var(--bg-2) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(177,152,136,.30);
}
.v2-tilvalg-image-slot-dropping .v2-tilvalg-image-preview {
  background-color: var(--surface) !important;
  border-color: var(--accent);
  border-style: solid;
}
.v2-tilvalg-image-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.v2-tilvalg-image-actions .v2-btn {
  flex: 1 1 auto;
  font-size: 12px;
  padding: 6px 10px;
}
.v2-tilvalg-image-status {
  font-size: 11px;
  min-height: 14px;
}

/* Image-tilvalg thumbnails i kurv-linje (offcanvasKurv + kurv.asp).
   Bruges af _tilvalgSomTekst når gruppe.type='image' så kunden kan
   genkende uploadet billede direkte i kurven uden at skulle åbne
   redigér-tilvalg-offcanvas. */
.v2-kurv-tilvalg-image {
  margin-right: 4px;
}
.v2-kurv-tilvalg-thumbs {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  flex-wrap: wrap;
}
/* body.v2-prefix nødvendigt for at slå ned på
   `body.v2 .v2-kurv-page .productline img { border-radius: var(--radius-md);
   aspect-ratio: 1/1 }` (specificity 0,0,3,1) som ellers vinder og gør
   thumb'en stor og rundet. */
body.v2 img.v2-kurv-tilvalg-thumb,
body.v2 .v2-kurv-page .productline img.v2-kurv-tilvalg-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  display: inline-block;
  aspect-ratio: auto;
}

/* ----------------------------------------------------------------------
   A11y: skip-to-content link.
   Skjult uden for skærmen indtil :focus så tastatur-brugere kan springe
   over navbar/hero direkte til <main id="main-content">. Synlig position
   matcher v2-brand-tokens. */
.v2-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--brand, #000);
  color: var(--surface, #fff);
  font-weight: 600;
  text-decoration: none;
  border-bottom-right-radius: var(--radius, 6px);
  transition: top 0.2s ease;
}
.v2-skip-link:focus {
  top: 0;
  outline: 2px solid var(--surface, #fff);
  outline-offset: -4px;
}

/* ----------------------------------------------------------------------
   A11y: respektér prefers-reduced-motion globalt.
   Findes i forvejen som lokale regler for status-dot-pulse, butiksvalg-
   status-dot og tilvalg-gruppe-flash (linje 499, 1149, 2440), men v2-card
   hover-zoom, WOW.js-animations, Owl carousel auto-rotate og diverse
   transitions er ikke dækket. Denne globale fallback nedjusterer alt til
   ~0 ms for brugere der har slået reduced-motion til (OS-niveau). De
   lokale regler er stadig gyldige — de overrider ikke noget. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .v2-card:hover .v2-media img { transform: none !important; }
}

/* ---------- Checkout-redesign (Bodenhoff 12.6 pkt 8) ----------
   Mockup: sektions-overskrifter i CAPS, Afhentning/Levering som store
   valg-kort øverst, "Din ordre"-kort i anden farve til højre med betingelser
   + Bestil-knap + Shop mere samlet, runde hjørner på afhentningsstedet. */

.v2-kurv-overskrift {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--brand-dark);
  margin: 26px 0 10px;
}
.v2-kurv-formular > .v2-kurv-overskrift:first-child { margin-top: 0; }
.v2-kurv-overskrift .bi { font-size: 14px; }

/* Afhentning/Levering som to valg-kort med titel + undertekst.
   Fuld kolonnebredde (ingen max-width) så knapperne flugter med kontakt-
   og adressefelterne nedenunder. */
.v2-kurv-leveringsvalg { display: flex; gap: 12px; }
.v2-kurv-leveringsvalg .btn {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: left;
}
.v2-kurv-leveringsvalg .v2-lev-titel {
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.v2-kurv-leveringsvalg .v2-lev-sub { font-size: 12px; opacity: .75; }

/* Afhentningssted-boksen: runde hjørner, ren kant — accent-striben er væk.
   Fuld kolonnebredde (ingen max-width) så boksen flugter med felterne. */
.v2-kurv-butiksboks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* "Din ordre"-kortet: anden farve end siden + runde hjørner. Linjer,
   kampagnekode, total, betingelser og Bestil-knappen bor herinde. */
.v2-kurv-summary {
  background: #f4f0ea; /* lysere beige jf. Bodenhoff 12.6 3.0 pkt 5 (foer --bg-2) */
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
}
.v2-kurv-summary-titel {
  font-weight: 700;
  font-size: 18px;
  font-family: var(--font-serif);
  margin-bottom: 4px;
}
body.v2 .v2-kurv-page .v2-kurv-summary .productline {
  background: transparent;
  padding: 12px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
/* Fragt fra valgt leverings-quote (Wolt/Uber/egen) — diskret linje lige over
   totalen; vises/skjules af _opdaterFragtVisning i kurv.asp (display:flex). */
.v2-kurv-fragt-linje {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px;
  font-size: 14px;
}
.v2-kurv-total-linje {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-strong, var(--border));
  font-weight: 700;
}
.v2-kurv-total-beloeb {
  font-size: 22px;
  font-family: var(--font-serif);
  color: var(--brand-dark);
}
.v2-kurv-betingelser { font-size: 14px; }
.v2-kurv-bestil { padding-top: 10px; padding-bottom: 10px; font-size: 16px; border-radius: 12px; }

/* Mobil: formularen først, "Din ordre"-kortet (med Bestil-knappen) sidst —
   før lå kurven øverst, men nu hvor knappen bor i kortet skal den stå efter
   felterne så bestil-flowet læses oppefra og ned. */
@media (max-width: 991.98px) {
  .v2-kurv-grid { display: flex; flex-direction: column; }
  .v2-kurv-grid .v2-kurv-summary { order: 2; margin-top: 28px; }
}

/* Bestil-knappen bor nu i "Din ordre"-kortet — den gamle 360px-cap +
   auto-centrering (reglen ovenfor ved ~linje 2230) gjaldt knappen som
   fritstående i formularen; i kortet skal den fylde hele bredden. */
body.v2 .v2-kurv-page .v2-kurv-summary #opdaterkurv {
  max-width: none;
  margin: 16px 0 0 !important;
}

/* Checkout-finpudsning (Bodenhoff 12.6 3.0 pkt 5): felt-rækker med flere
   felter (postnr/by, dato/tid) som flex i stedet for nested Bootstrap-rows —
   de dobbelte gutters gjorde rækkerne ~24px smallere end navn/email-felterne
   så kanterne ikke flugtede. */
.v2-kurv-feltrk { display: flex; gap: 12px; }
.v2-kurv-felt-lille { flex: 0 0 120px; }
.v2-kurv-felt-rest  { flex: 1 1 auto; min-width: 0; }
.v2-kurv-feltrk .form-control { width: 100%; }

/* Dato/tid-rækken: den faste 120px til tidspunkt var for smal til "Vælg
   tidspunkt". Del i stedet ~2/3 (dato) / ~1/3 (tidspunkt) proportionelt.
   Gælder KUN dato/tid — postnr/by beholder den faste smalle postnr-kolonne. */
.v2-kurv-feltrk--datotid .v2-kurv-felt-rest  { flex: 2 1 0; }
.v2-kurv-feltrk--datotid .v2-kurv-felt-lille { flex: 1 1 0; min-width: 0; }

/* =====================================================================
   BLOK-SYSTEM (.v2-bl-*) — render-lag i blocks.inc.asp.
   Content-blokke til indholdssider (Link=13). Bruger UDELUKKENDE de
   eksisterende v2-design-tokens (tokens.inc.asp) → automatisk on-brand
   og re-skinnbart pr. klient via EKStyleSheet. Header/footer er urørt.
   ===================================================================== */

.v2-blocks { display: block; }
.v2-bl { position: relative; }
/* Auto-hero: side-billede (EKKonceptMenu.Billede) øverst på blok-sider */
.v2-bl-autohero { padding: 32px 0; }
.v2-bl-autohero-img { width: 100%; max-height: 440px; object-fit: cover; display: block; border-radius: var(--radius); }
.v2-bl-pad { padding: 64px 0; }
.v2-bl-center { text-align: center; }

/* Sektions-baggrunde */
.v2-bl-bg-surface { background: var(--surface); }
.v2-bl-bg-soft    { background: var(--bg-2); }
.v2-bl-bg-sky     { background: var(--sky-soft); }
.v2-bl-dark       { background: var(--brand-dark); color: var(--surface); }

/* Typografi */
.v2-bl-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.v2-bl-h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.06;
  color: var(--text); margin: 0 0 18px;
}
.v2-bl-h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 32px); line-height: 1.15;
  color: var(--text); margin: 0 0 14px;
}
.v2-bl-h2-left { text-align: left; }
.v2-bl-em { font-style: italic; color: var(--accent-dark); }
.v2-bl-lead { font-size: 17px; line-height: 1.7; color: var(--text-muted); max-width: 620px; margin: 0 auto 28px; }
.v2-bl-lead p { margin: 0 0 12px; }
.v2-bl-sub { font-size: 15px; color: var(--text-muted); max-width: 640px; margin: 6px auto 0; }
.v2-bl-sechead { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.v2-bl-body { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 18px; }
.v2-bl-body p { margin: 0 0 14px; }

/* Tjekliste */
.v2-bl-checklist { list-style: none; margin: 0 0 22px; padding: 0; }
.v2-bl-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); }
.v2-bl-checklist li:last-child { border-bottom: none; }
.v2-bl-li-ic { color: var(--brand); margin-top: 3px; flex-shrink: 0; }

/* Hero med dekorative ringe */
.v2-bl-hero { overflow: hidden; background: var(--bg-2); padding: 76px 0; text-align: center; }
.v2-bl-hero-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.v2-bl-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.v2-bl-rings span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(var(--brand-rgb), .10); }
.v2-bl-rings span:nth-child(1) { width: 680px; height: 680px; }
.v2-bl-rings span:nth-child(2) { width: 480px; height: 480px; }
.v2-bl-rings span:nth-child(3) { width: 300px; height: 300px; }
.v2-bl-herobtns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

/* Trin */
.v2-bl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 860px; margin: 0 auto; }
.v2-bl-step { text-align: center; }
.v2-bl-step-n { width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: var(--surface); font-family: var(--font-serif); font-size: 22px; font-style: italic; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.v2-bl-step-t { font-family: var(--font-serif); font-size: 18px; color: var(--text); margin: 0 0 7px; }
.v2-bl-step-b { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.v2-bl-step-b p { margin: 0 0 8px; }

/* Split foto + tekst */
.v2-bl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1040px; margin: 0 auto; }
.v2-bl-split-media img { width: 100%; border-radius: var(--radius); display: block; }
.v2-bl-split-rev .v2-bl-split-media { order: 2; }
.v2-bl-split-text .v2-bl-eyebrow { text-align: left; }

/* Ikon-kort-grid */
.v2-bl-cards { display: grid; gap: 16px; max-width: 920px; margin: 0 auto; }
.v2-bl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.v2-bl-cols-3 { grid-template-columns: repeat(3, 1fr); }
.v2-bl-cols-4 { grid-template-columns: repeat(4, 1fr); }
.v2-bl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-1); }
.v2-bl-card-ic { color: var(--brand); display: block; margin-bottom: 12px; }
.v2-bl-card-ic .bi { font-size: 24px; }
.v2-bl-card-t { font-family: var(--font-serif); font-size: 17px; margin: 0 0 6px; color: var(--text); }
.v2-bl-card-b { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.v2-bl-card-b p { margin: 0 0 8px; }

/* CTA-kort */
.v2-bl-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; }
.v2-bl-cta-one { grid-template-columns: 1fr; max-width: 520px; }
.v2-bl-cta-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; }
.v2-bl-cta-blue { background: var(--sky-soft); border-color: var(--sky-deep); }
.v2-bl-cta-ic { color: var(--brand); display: block; margin-bottom: 14px; }
.v2-bl-cta-ic .bi { font-size: 28px; }
.v2-bl-cta-t { font-family: var(--font-serif); font-size: 20px; margin: 0 0 8px; color: var(--text); }
.v2-bl-cta-b { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }

/* App-download-band */
.v2-bl-dl-t { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 44px); color: var(--brand-dark); margin: 0 0 14px; }
.v2-bl-dl-sub { color: var(--brand-dark); max-width: 460px; margin: 0 auto 32px; font-size: 15px; line-height: 1.6; }
.v2-bl-dl-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* body.v2-scope så hvid tekst slår body.v2 a { color: inherit } (specificitet) */
body.v2 .v2-bl-dl-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--brand-dark); color: var(--surface); border-radius: 10px; padding: 12px 24px; min-width: 180px; text-align: left; transition: background .2s var(--ease); }
body.v2 .v2-bl-dl-btn:hover { background: var(--brand); color: var(--surface); }
body.v2 .v2-bl-dl-btn small { color: var(--surface); }
.v2-bl-dl-ic .bi { font-size: 26px; }
.v2-bl-dl-btn span { display: flex; flex-direction: column; line-height: 1.15; font-size: 16px; font-weight: 600; }
.v2-bl-dl-btn small { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }

/* Klub-panel */
.v2-bl-klub { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--sky-soft); border: 1px solid var(--sky-deep); border-radius: var(--radius-lg); padding: 44px; max-width: 960px; margin: 0 auto; }
.v2-bl-klub-media img { width: 100%; border-radius: var(--radius); display: block; }

/* Stempelkort */
.v2-bl-stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 840px; margin: 0 auto; }
.v2-bl-stamp { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 340px; background-size: cover; background-position: center; background-color: var(--brand-dark); display: flex; flex-direction: column; justify-content: flex-end; }
.v2-bl-stamp-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--brand-dark-rgb), .85) 35%, rgba(var(--brand-dark-rgb), .15) 100%); }
.v2-bl-stamp-body { position: relative; z-index: 1; padding: 20px 22px 24px; }
.v2-bl-stamp-dots { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.v2-bl-dot { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--surface-rgb), .9); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 15px; color: var(--brand); flex-shrink: 0; }
.v2-bl-gift { width: 44px; height: 44px; border-radius: 50%; background: var(--sky); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-dark); }
.v2-bl-gift .bi { font-size: 18px; }
.v2-bl-stamp-t { font-family: var(--font-serif); font-size: 20px; color: var(--surface); margin: 0; }
.v2-bl-stamp-d { color: rgba(var(--surface-rgb), .85); font-size: 13px; margin: 6px 0 0; }

/* Loyalitets-niveauer */
.v2-bl-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1000px; margin: 0 auto; }
.v2-bl-level { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 14px; text-align: center; }
.v2-bl-level-feat { border-color: var(--brand); background: var(--sky-soft); }
.v2-bl-level-name { font-family: var(--font-serif); font-size: 15px; color: var(--text); margin-bottom: 5px; }
.v2-bl-level-pts { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.v2-bl-level-cb { font-family: var(--font-serif); font-size: 24px; color: var(--brand); margin-bottom: 8px; }
.v2-bl-level-perks { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; }
.v2-bl-level-perks li { font-size: 11px; color: var(--text-muted); padding: 3px 0; display: flex; gap: 5px; align-items: flex-start; border: none; }
.v2-bl-level-perks .v2-bl-li-ic { font-size: 11px; }

/* Rabattrappe (mørk sektion) */
.v2-bl-dark .v2-bl-eyebrow { color: var(--sky); }
.v2-bl-dark .v2-bl-h2, .v2-bl-dark .v2-bl-sub { color: var(--surface); }
.v2-bl-rabat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto 28px; }
.v2-bl-rabat-card { background: rgba(var(--surface-rgb), .06); border: 1px solid rgba(var(--surface-rgb), .14); border-radius: var(--radius); padding: 28px 24px; position: relative; }
.v2-bl-rabat-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--sky); color: var(--brand-dark); font-size: 10px; font-weight: 600; padding: 3px 12px; border-radius: 10px; white-space: nowrap; }
.v2-bl-rabat-range { text-align: center; font-size: 13px; color: var(--sky); margin-bottom: 16px; }
.v2-bl-rabat-grid { display: grid; gap: 2px; }
.v2-bl-rabat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(var(--surface-rgb), .10); }
.v2-bl-rabat-row:last-child { border-bottom: none; }
.v2-bl-rabat-lbl { font-size: 12px; color: rgba(var(--surface-rgb), .7); }
.v2-bl-rabat-pct { font-size: 18px; font-weight: 600; color: var(--sky); }
.v2-bl-rabat-pct.v2-bl-rabat-zero { font-size: 14px; opacity: .5; }
.v2-bl-rabat-note { text-align: center; font-size: 13px; color: rgba(var(--surface-rgb), .7); max-width: 760px; margin: 0 auto; }

/* Billede + prosa */
.v2-bl-image { margin: 0 auto; max-width: 900px; }
.v2-bl-image img { width: 100%; border-radius: var(--radius); display: block; }
.v2-bl-image-full { max-width: 100%; }
/* Skalerede billeder: KUN på desktop (≥641px). På mobil arver de basis-
   max-width (900px) → fylder bredden. Bruges fx til at gøre et stort
   portræt-/app-billede mindre på desktop uden at krympe det på mobil. */
@media (min-width: 641px) {
  .v2-bl-image-md { max-width: 520px; }
  .v2-bl-image-sm { max-width: 340px; }
}
.v2-bl-image-cap { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 10px; }
.v2-bl-prose { max-width: 820px; margin: 0 auto; }
/* Prosa-styles til fri-tekst/importerede sider (.v2-article styler kun h1+p) */
.v2-bl-prose h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; color: var(--text); margin: 32px 0 12px; }
.v2-bl-prose h3 { font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--text); margin: 24px 0 8px; }
.v2-bl-prose h4 { font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--text); margin: 18px 0 6px; }
.v2-bl-prose ul, .v2-bl-prose ol { margin: 0 0 16px; padding-left: 22px; }
.v2-bl-prose li { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 6px; }
.v2-bl-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.v2-bl-prose a:hover { color: var(--brand-dark); }
.v2-bl-prose strong { font-weight: 700; }
.v2-bl-prose blockquote { margin: 0 0 16px; padding: 8px 18px; border-left: 3px solid var(--border-strong); color: var(--text-muted); font-style: italic; }
.v2-bl-prose img { border-radius: var(--radius); margin: 8px 0 16px; }

/* Kategori-menulinje (submenu) — vandrette faner, scroller på mobil */
.v2-bl-submenu { background: var(--surface); border-bottom: 1px solid var(--border); }
.v2-bl-submenu-row { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.v2-bl-submenu-row::-webkit-scrollbar { display: none; }
/* body.v2-scope så tekst-farverne slår `body.v2 a { color: inherit }` (specificitet) */
.v2-bl-submenu-tab { font-family: var(--font-sans); font-size: 14px; padding: 15px 18px; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
body.v2 .v2-bl-submenu-tab { color: var(--text-muted); }
body.v2 .v2-bl-submenu-tab:hover { color: var(--text); }
body.v2 .v2-bl-submenu-active { color: var(--brand); font-weight: 600; }
.v2-bl-submenu-active { border-bottom-color: var(--brand); font-weight: 600; }

/* Billed-galleri (gallery) */
.v2-bl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2-bl-gallery-item { margin: 0; }
.v2-bl-gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }
.v2-bl-gallery-cap { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 8px; }
@media (max-width: 900px) { .v2-bl-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-bl-gallery { grid-template-columns: 1fr; } }

/* Tidslinje (timeline) — central linje, prik+år, skiftevis tekst/billede */
.v2-bl-tl { position: relative; max-width: 900px; margin: 0 auto; }
.v2-bl-tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); transform: translateX(-50%); }
.v2-bl-tl-item { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: start; margin-bottom: 48px; }
.v2-bl-tl-item:last-child { margin-bottom: 0; }
.v2-bl-tl-mid { grid-column: 2; display: flex; flex-direction: column; align-items: center; padding-top: 6px; position: relative; z-index: 1; }
.v2-bl-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
.v2-bl-tl-year { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--brand); margin-top: 8px; white-space: nowrap; }
.v2-bl-tl-text { grid-column: 1; text-align: right; padding-right: 28px; }
.v2-bl-tl-media { grid-column: 3; padding-left: 28px; }
.v2-bl-tl-item-alt .v2-bl-tl-text { grid-column: 3; text-align: left; padding-right: 0; padding-left: 28px; }
.v2-bl-tl-item-alt .v2-bl-tl-media { grid-column: 1; padding-left: 0; padding-right: 28px; }
.v2-bl-tl-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md, 10px); }
.v2-bl-tl-tag { font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.v2-bl-tl-ct { font-family: var(--font-serif); font-size: 19px; color: var(--text); margin: 0 0 8px; line-height: 1.2; }
.v2-bl-tl-cb { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.v2-bl-tl-cb p { margin: 0 0 8px; }
@media (max-width: 760px) {
  .v2-bl-tl-line { display: none; }
  .v2-bl-tl-item, .v2-bl-tl-item-alt { grid-template-columns: 1fr; gap: 10px; margin-bottom: 32px; }
  .v2-bl-tl-mid, .v2-bl-tl-text, .v2-bl-tl-media,
  .v2-bl-tl-item-alt .v2-bl-tl-text, .v2-bl-tl-item-alt .v2-bl-tl-media { grid-column: 1; text-align: left; padding: 0; }
  .v2-bl-tl-mid { flex-direction: row; gap: 10px; align-items: center; }
  .v2-bl-tl-media img { max-width: 420px; }
}

/* Kort-grid (cardgrid) — teaser-kort m. billede, pille, titel, beskrivelse, meta */
.v2-bl-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.v2-bl-cardgrid-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.v2-bl-cardgrid-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.v2-bl-cardgrid-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.v2-bl-cardgrid-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-bl-cardgrid-ph { display: block; width: 100%; height: 100%; background: var(--bg-2); }
.v2-bl-cardgrid-pill { position: absolute; top: 12px; left: 12px; background: rgba(var(--surface-rgb), .92); border-radius: 20px; padding: 3px 12px; font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); font-weight: 600; }
.v2-bl-cardgrid-cbody { padding: 18px 20px 22px; }
.v2-bl-cardgrid-name { font-family: var(--font-serif); font-size: 19px; color: var(--text); margin: 0 0 5px; }
.v2-bl-cardgrid-desc { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0 0 12px; }
.v2-bl-cardgrid-metarow { display: flex; gap: 14px; flex-wrap: wrap; }
.v2-bl-cardgrid-meta { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.v2-bl-cardgrid-meta .bi { font-size: 13px; }
@media (max-width: 900px) { .v2-bl-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-bl-cardgrid { grid-template-columns: 1fr; } }

/* Cardgrid: stor placeholder-ikon (fylder media-feltet når der ikke er foto) */
.v2-bl-cardgrid-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--bg-2); }
.v2-bl-cardgrid-ph-ic { font-size: 64px; color: var(--border-strong); opacity: .75; }

/* Cardgrid: kategori-filter (chips + antal) */
.v2-bl-cardgrid-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-bl-cardgrid-chips-bar { justify-content: center; max-width: 1080px; margin: 0 auto 20px; }
.v2-bl-chip { font-family: var(--font-sans); font-size: 13px; padding: 8px 18px; border-radius: 24px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.v2-bl-chip:hover { border-color: var(--brand); }
.v2-bl-chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--btn-primary-color, #fff); font-weight: 600; }
.v2-bl-cardgrid-count { font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin: 0 auto 24px; }
.v2-bl-cardgrid-card.is-hidden { display: none; }

/* Cardgrid: hero-billede med titel + chips ovenpå (opskrifts-forsiden) */
.v2-bl-cardgrid-wrap { overflow: hidden; }
.v2-bl-cardgrid-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.v2-bl-cardgrid-hero-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.05) 100%); }
/* body.v2-scope så .v2-container's shorthand `padding: 0 24px` (samme element,
   højere specificitet) ikke nulstiller den vertikale hero-padding — Amandas luft. */
body.v2 .v2-bl-cardgrid-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 56px; padding-bottom: 64px; }
.v2-bl-cardgrid-hero-ey { color: rgba(255,255,255,.72); }
.v2-bl-cardgrid-hero-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.02; color: #fff; margin: 0 0 28px; }
.v2-bl-cardgrid-hero .v2-bl-chip { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.4); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.v2-bl-cardgrid-hero .v2-bl-chip:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); }
.v2-bl-cardgrid-hero .v2-bl-chip.is-active { background: #fff; border-color: #fff; color: var(--text); }
@media (max-width: 560px) {
  .v2-bl-cardgrid-hero { min-height: 340px; }
  body.v2 .v2-bl-cardgrid-hero-inner { padding-bottom: 24px; }
}

/* Opskrift (recipe) — intro + meta-række + 2-kolonne ingredienser/fremgangsmåde + tip */
.v2-bl-recipe-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.v2-bl-recipe-cat { text-align: center; }
.v2-bl-recipe-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: var(--text); margin: 0 0 16px; }
.v2-bl-recipe-desc { font-family: var(--font-sans); font-size: 15px; color: var(--text-muted); line-height: 1.75; margin: 0 0 28px; }
.v2-bl-recipe-metarow { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.v2-bl-recipe-meta-item { text-align: center; }
.v2-bl-recipe-meta-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.v2-bl-recipe-meta-val { font-family: var(--font-serif); font-size: 16px; color: var(--text); }
.v2-bl-recipe-body { max-width: 760px; margin: 0 auto; padding-top: 40px; display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.v2-bl-recipe-group + .v2-bl-recipe-group { margin-top: 64px; }
.v2-bl-recipe-col-title { font-family: var(--font-serif); font-size: 18px; color: var(--text); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1.5px solid var(--border); }
.v2-bl-recipe-ingr-list { list-style: none; padding: 0; margin: 0; }
.v2-bl-recipe-ingr-list li { font-family: var(--font-sans); font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; }
.v2-bl-recipe-ingr-list li:last-child { border-bottom: none; }
.v2-bl-recipe-ingr-name { color: var(--text); }
.v2-bl-recipe-ingr-amount { color: var(--text-muted); font-size: 13px; text-align: right; white-space: nowrap; }
.v2-bl-recipe-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; margin-bottom: 22px; align-items: center; }
.v2-bl-recipe-step:last-child { margin-bottom: 0; }
.v2-bl-recipe-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--surface); font-family: var(--font-sans); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v2-bl-recipe-step-text { font-family: var(--font-sans); font-size: 14px; color: var(--text); line-height: 1.7; }
.v2-bl-recipe-tip { background: var(--sky-soft); border-radius: var(--radius-sm); padding: 18px 20px; margin-top: 24px; border-left: 3px solid var(--sky-deep); }
.v2-bl-recipe-tip-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.v2-bl-recipe-tip-text { font-family: var(--font-sans); font-size: 13px; color: var(--brand-dark); line-height: 1.6; }
@media (max-width: 700px) {
  .v2-bl-recipe-body { grid-template-columns: 1fr; gap: 32px; }
  .v2-bl-recipe-metarow { gap: 20px; }
}

/* Responsivt */
@media (max-width: 980px) {
  .v2-bl-levels { grid-template-columns: repeat(3, 1fr); }
  .v2-bl-rabat-cards { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 900px) {
  .v2-bl-split, .v2-bl-klub, .v2-bl-cta-grid { grid-template-columns: 1fr; gap: 28px; }
  .v2-bl-split-rev .v2-bl-split-media { order: 0; }
  .v2-bl-cards.v2-bl-cols-3, .v2-bl-cards.v2-bl-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .v2-bl-pad { padding: 44px 0; }
  .v2-bl-hero { padding: 52px 0; }
  .v2-bl-steps, .v2-bl-cards, .v2-bl-stamps { grid-template-columns: 1fr; }
  .v2-bl-levels { grid-template-columns: repeat(2, 1fr); }
  .v2-bl-rings span:nth-child(1) { width: 420px; height: 420px; }
  .v2-bl-rings span:nth-child(2) { width: 300px; height: 300px; }
  .v2-bl-rings span:nth-child(3) { width: 180px; height: 180px; }
  .v2-bl-klub { padding: 28px; }
}


/* ---------- Min profil ({{minprofil}}-shortcode) ----------
   Kundens medlemskab: wallet, point, stempelkort og fordele. Data hentes
   client-side (initMinProfil i main.js), saa siden selv kan caches. */
.v2-profil { margin: 8px 0 32px; }
.v2-profil-loader,
.v2-profil-login { padding: 24px 0; color: var(--text-muted, #777); }
/* Hilsen til venstre, Log ud til hoejre. Log ud hoerer hjemme her og ikke kun
   i login-modalen: naar navnet i navbaren foerer til profilsiden, er modalen
   ikke laengere en vej kunden kommer forbi. */
.v2-profil-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.v2-profil-hilsen { margin: 0; }
.v2-profil-email { margin: 4px 0 0; font-size: 14px; color: var(--text-muted, #777); }
/* "Vi kan ikke hente dine point..." — vises bl.a. når kunden er slettet hos
   MyLoyal. Som løs tekst klemte den sig ind uden luft (MyLoyal-QA punkt 6);
   nu en info-boks med samme ramme som tal-boksene. */
.v2-profil-intet {
  color: var(--text-muted, #777);
  margin: 16px 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.v2-profil-tal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.v2-profil-tal-boks {
  flex: 1 1 180px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.v2-profil-tal-label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #777);
  margin-bottom: 6px;
}
.v2-profil-tal-boks strong { font-size: 32px; line-height: 1.1; color: var(--brand); }
.v2-profil-tal-enhed { font-size: 16px; margin-left: 4px; color: var(--brand); }

.v2-profil-sektion { margin-bottom: 28px; }
.v2-profil-sektion h3 { font-size: 18px; margin: 0 0 12px; }

.v2-profil-stempel { margin-bottom: 14px; }
.v2-profil-stempel-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 14px;
}
.v2-profil-stempel-tal { color: var(--text-muted, #777); }
.v2-profil-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.v2-profil-bar-fyld {
  height: 100%;
  background: var(--accent);
  transition: width .3s ease;
}

/* Fuldt stempelkort — kunden mangler kun at få det indløst i butikken.
   Kortet bliver stående hos MyLoyal indtil da, så det skal skille sig ud fra
   de igangværende; ellers ser "5 / 5" ud som endnu en linje i rækken. */
.v2-profil-stempel-fuld .v2-profil-stempel-tal {
  color: var(--brand);
  font-weight: 600;
}
.v2-profil-stempel-fuld .v2-profil-bar-fyld { background: var(--brand); }

.v2-profil-fordel {
  /* Venstre-padding skal rumme Bootstrap-switchen: .form-switch trækker
     inputtet 2.5em til venstre for tekstkanten, så uden de 2.5em her stak
     switchen ud over boksens ramme (MyLoyal-QA punkt 1). */
  padding: 12px 14px 12px calc(2.5em + 14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.v2-profil-fordel strong { display: block; }
.v2-profil-fordel span { font-size: 14px; color: var(--text-muted, #777); }

/* Ordrehistorik + genbestilling. Samme markup i login-modalen og paa
   "Min profil"-siden - se window.bpOrdrehistorik i js/main.js. */
.v2-ordre {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.v2-ordre-top { display: flex; justify-content: space-between; gap: 10px; }
.v2-ordre-status { font-size: 14px; color: var(--text-muted, #777); }
.v2-ordre-linjer { margin-top: 3px; font-size: 14px; color: var(--text-muted, #777); }
.v2-ordre-hoejre { text-align: right; white-space: nowrap; }
.v2-ordre-hoejre .v2-reorder { padding: 6px 12px; font-size: 12px; margin-top: 6px; }
.v2-ordre-info { color: var(--text-muted, #777); font-size: 14px; }
.v2-ordre-fejl { color: var(--danger, #c0392b); font-size: 14px; }
.v2-profil-ordrer-besked { margin: 0 0 12px; font-size: 14px; color: var(--brand); }

@media (max-width: 640px) {
  .v2-profil-tal-boks { flex-basis: 100%; }
}