/* ==========================================================================
   boss.css — BOSS-brandsiden (NORDUR-BOSS-LAYOUT-REF-001)
   Indlæses EFTER css/style.css. Alt er scoped under body.bb, så intet her
   rammer resten af sitet. Første blok nulstiller de regler fra style.css,
   der ellers lækker ind (body, h1-h3, p, a, ::selection, .cart-badge).
   Breakpoints: 480 · 600 · 768 · 1024 · 1280 · 1380 (kontrakt §9).
   Selektorer holdes flade (højst to led efter .bb-præfikset).
   ========================================================================== */

/* --------------------------------------------------------------------------
   §10 Designtokens (på body.bb, ikke :root, så style.css' tokens er urørte)
   Nordurs mørke identitet: sort side (#080808), sorte flader (#101010) og
   guld tekst (#d4af37 / #e9c96a) — samme palet som css/style.css.
   Produktfotoerne er fritlagte (WebP med alfa), så de ligger på samme mørke
   radiale "scene" som på produktsiderne (.product__stage i style.css).
   -------------------------------------------------------------------------- */
body.bb {
  --color-page-bg: #080808;
  --color-surface: #101010;
  --color-surface-raised: #181818;
  --color-photo: #0c0c0d;
  --photo-stage: radial-gradient(circle at 50% 38%, #141417 0%, #0c0c0d 55%, #080808 100%);
  /* Al tekst er hvid; guld er kun til kanter, ikoner og fyldte knapper — som menuen (brugerens valg 23-09-2026). */
  --guld: #d4af37;
  --guld-lys: #e9c96a;
  --color-text: #f4f2ec;
  --color-text-strong: #ffffff;
  --color-text-label: #f4f2ec;
  --color-text-secondary: #bdbab3;
  --color-text-muted: #8f8c86;
  --color-text-subtle: #bdbab3;

  --color-header-bg: #080808;
  --color-header-fg: #f4f2ec;
  --color-topbar-bg: #101010;
  --color-footer-bg: #080808;
  --color-footer-link: #a8a49c;
  --color-footer-heading: #f4f2ec;

  --color-primary: #d4af37;
  --color-primary-fg: #080808;
  --color-sale: #F0334F;
  --color-member: #e06a7f;
  --color-accent: #d4af37;
  --color-badge-neutral: #1c1c1c;
  --color-campaign-bg: #161616;
  --color-skeleton: #1c1c1c;

  --color-border: rgba(244, 242, 236, .12);
  --color-border-input: rgba(212, 175, 55, .45);
  --color-border-soft: rgba(212, 175, 55, .35);
  --color-border-strong: #d4af37;
  --color-chip-outline: rgba(212, 175, 55, .6);
  --color-track: #2a2a2a;
  --color-marker: #d4af37;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-price: "Oswald", "Arial Narrow", sans-serif;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-card: 0 10px 15px -3px rgb(0 0 0 / .45), 0 4px 6px -4px rgb(0 0 0 / .45);
  --shadow-btn-hover: 0 20px 25px -5px rgb(0 0 0 / .45), 0 8px 10px -6px rgb(0 0 0 / .45);
  --shadow-filterbar: 0 5px 30px 5px rgb(0 0 0 / .7);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);

  --container-max: 1380px;
  --container-pad: 16px;
  --header-h: 125px;
  --topbar-h: 32px;
  --gap-grid: 8px;
  --gap-columns: 32px;
  --dur: 300ms;

  /* Læses af JS via getComputedStyle (kontrakt §8.3 og §8.4) */
  --slides: 3;          /* antal USP-slides i topbjælken; JS sætter den på #bbTopbar (3 = standard-config) */
  --tiles-per-view: 2;  /* fliser pr. visning; sættes pr. breakpoint herunder */
}

/* --------------------------------------------------------------------------
   §9 Nulstilling af style.css (kun det, der lækker ind på BOSS-siderne)
   -------------------------------------------------------------------------- */
body.bb {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.bb.is-locked { overflow: hidden; }

/* :where() holder specificiteten på (0,1,0), så komponentreglerne nedenfor
   (.bb-btn-filter, .bb-header__menu, .bb-footer__link …) vinder på kildeorden. */
.bb :where(h1, h2, h3, h4) {
  font-family: var(--font-sans);
  font-weight: 700;
  color: inherit;
  margin: 0;
  letter-spacing: 0;
  text-wrap: initial;
}
.bb :where(p) { margin: 0; line-height: 24px; color: inherit; }
.bb :where(a) { color: inherit; text-decoration: none; }
.bb :where(img) { max-width: 100%; display: block; }
.bb :where(button, input, select, textarea) { font-family: inherit; font-size: inherit; color: inherit; }
.bb :where(button) { cursor: pointer; }
.bb ::selection { background: var(--guld-lys); color: var(--color-page-bg); }
.bb [hidden] { display: none !important; }

/* Skjult for øjet, læst af skærmlæsere (§16) */
.bb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Synlig fokusring: 2 px guld med 2 px sort luft (kontrakt §9) */
.bb :focus-visible {
  outline: 2px solid var(--guld-lys);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-page-bg);
}
.bb-header :focus-visible, .bb-footer :focus-visible {
  outline-color: var(--guld-lys);
  box-shadow: 0 0 0 2px var(--color-header-bg);
}

/* --------------------------------------------------------------------------
   §16 Spring til indhold
   -------------------------------------------------------------------------- */
.bb-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--guld-lys);
  color: var(--color-page-bg);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.bb-skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Container (§5: maks. 1380 px, 24 px luft; 16 px under 1024)
   -------------------------------------------------------------------------- */
.bb-container, .bb-topbar__inner, .bb-header__inner, .bb-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.bb-main { display: block; }

/* --------------------------------------------------------------------------
   §6.1 Topbjælke
   -------------------------------------------------------------------------- */
.bb-topbar {
  height: var(--topbar-h);
  background: var(--color-topbar-bg);
  color: var(--color-text-label);
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}
.bb-topbar__list {
  position: relative;
  height: var(--topbar-h);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-topbar__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  animation: bb-topbar-roll 20s ease-in-out infinite;
  /* Hvert slide starter forskudt med 20 s / antal slides */
  animation-delay: calc(var(--i, 0) * 20s / var(--slides, 1));
}
.bb-topbar__item:nth-child(2) { --i: 1; }
.bb-topbar__item:nth-child(3) { --i: 2; }
.bb-topbar__item:nth-child(4) { --i: 3; }
.bb-topbar__item:nth-child(5) { --i: 4; }
.bb-topbar__item:nth-child(6) { --i: 5; }
.bb-topbar__item:only-child { animation: none; opacity: 1; transform: none; }
.bb-topbar__item a { display: inline-flex; align-items: center; gap: 8px; }
.bb-topbar__item strong { font-weight: 700; }
.bb-topbar__item svg { width: 16px; height: 16px; flex: none; }

/* Slot ≈ 1/3 af cyklussen: 3 slides (standard-config) giver en glidende
   kæde, 4 slides et lille overlap i skiftet, hvor det ene ruller ud opad,
   mens det næste ruller ind nedefra. */
@keyframes bb-topbar-roll {
  0%   { opacity: 0; transform: translateY(100%); }
  5%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(-100%); }
}

/* --------------------------------------------------------------------------
   §6.2 Header (2 rækker / 125 px under 1024; 1 række / 73 px fra 1024)
   -------------------------------------------------------------------------- */
.bb-header-slot { height: var(--header-h); }
.bb-header {
  position: relative;
  z-index: 50;
  width: 100%;
  background: var(--color-header-bg);
  color: var(--color-header-fg);
  transition: transform var(--dur) ease-in-out;
}
.bb-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; }
.bb-header.is-hidden { transform: translateY(-100%); }

/* Under 1024: række 1 = menu + logo + ikoner, række 2 = søgefelt i fuld bredde */
.bb-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.bb-header__menu { order: 1; }
.bb-header__logo { order: 2; }
.bb-header__icons { order: 3; }
.bb-search { order: 4; flex: 1 0 100%; }
.bb-header__row { display: flex; align-items: center; gap: 12px; }
.bb-header__row--search { margin-top: 12px; }

/* Menu-knap: 40×40 trykflade, kun de tre streger — ingen ramme (brugerens ønske 23-09-2026) (mobil) */
.bb-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  border: 0;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bb-header__menu svg { width: 24px; height: 24px; flex: none; }
/* CSS-tegnet ☰ når knappen ikke rummer et svg */
.bb-header__menu-icon {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.bb-header__menu-text { display: none; }
/* Under computerbredden er knappen kun stregerne — og de er forsidens, 1:1 (.nav__burger i style.css): tre hvide
   linjer, 26 px brede, 1 px tykke, 6 px imellem, guld ved hover. Trykfladen er stadig 40×40. */
@media (max-width: 1023px) {
  .bb-header__menu svg { display: none; }
  .bb-header__menu::before {
    content: ''; display: block; width: 26px; height: 1px; background: #f4f2ec;
    box-shadow: 0 -6px 0 #f4f2ec, 0 6px 0 #f4f2ec; transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  .bb-header__menu:hover::before { background: #d4af37; box-shadow: 0 -6px 0 #d4af37, 0 6px 0 #d4af37; }
  .bb-header__menu:active::before { opacity: 0.5; }
}

.bb-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 131px;
  color: var(--color-header-fg);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bb-header__logo img { width: 28px; height: 28px; flex: none; }

.bb-header__icons { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.bb-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--guld);
}
.bb-header__icon svg { width: 24px; height: 24px; }
/* Kurv-badge: style.css' guld-badge gøres til et rødt tal på mørk header */
.bb-header .cart-badge {
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  line-height: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--color-sale);
  color: #fff;
}

/* Søgefelt: sort med guld kant, 41 px, afrunding 8, lup til højre */
.bb-search { position: relative; flex: 1 1 auto; min-width: 0; }
.bb-search__input {
  width: 100%;
  height: 41px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--color-border-input);
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  line-height: 39px;
}
.bb-search__input:focus { border-color: var(--guld); }
.bb-search__input::placeholder { color: var(--color-text-muted); }
.bb-search__input::-webkit-search-decoration,
.bb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bb-search__btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 41px;
  height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-text);
}
.bb-search__btn svg { width: 20px; height: 20px; }
.bb-search__btn:empty::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Forslagspanel under feltet (§6.2) */
.bb-search__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--color-border-input);
}
.bb-search__group {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.bb-search__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: 0;
  font-size: 14px;
}
.bb-search__item:hover, .bb-search__item.is-active, .bb-search__item[aria-selected="true"] { background: var(--color-surface-raised); }
.bb-search__item img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.bb-search__item small { margin-left: auto; color: var(--color-text-muted); white-space: nowrap; }
.bb-search__empty { padding: 12px 16px; font-size: 14px; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   §6.3 Menu (skuffe fra venstre, maks. 448 px, sort side, sorte kort)
   -------------------------------------------------------------------------- */
.bb-menu { position: fixed; inset: 0; z-index: 70; }
.bb-menu__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.bb-menu__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 448px;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-page-bg);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  transform: translateX(-100%);
  transition: transform var(--dur) ease;
}
.bb-menu.is-open .bb-menu__panel { transform: none; }

.bb-menu__head { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-bottom: 8px; }
.bb-menu__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bb-menu__logo img { width: 24px; height: 24px; }
.bb-menu__login {
  margin-left: auto;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-chip-outline);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
}
.bb-menu__close, .bb-menu__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.bb-menu__close svg, .bb-menu__back svg { width: 20px; height: 20px; }
.bb-menu__title { flex: 1; text-align: center; font-size: 18px; font-weight: 700; }

/* Undermenu-visninger skifter med en kort slide (§14.10) */
.bb-menu__view { animation: bb-menu-slide var(--dur) ease; }
@keyframes bb-menu-slide {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

.bb-menu__card {
  margin-top: 12px;
  padding: 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bb-menu__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}
.bb-menu__card > :first-child > .bb-menu__row,
.bb-menu__row:first-child { border-top: 0; }
.bb-menu__row svg { width: 20px; height: 20px; flex: none; color: var(--guld); }
.bb-menu__row--sub::after, .bb-menu__row[data-sub]::after {
  content: "\203A";
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
  color: var(--guld);
}
.bb-menu__row:hover { background: var(--color-surface-raised); }
.bb-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   §6.4 Brødkrumme-række (52 px; tilbage-knap 40×40; USP'er kun ≥ 1024)
   -------------------------------------------------------------------------- */
.bb-crumbs { display: flex; align-items: center; gap: 12px; height: 52px; font-size: 14px; }
.bb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 22px;
  line-height: 1;
}
.bb-back svg { width: 18px; height: 18px; }
.bb-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-crumbs__list li { display: inline-flex; align-items: center; font-weight: 300; white-space: nowrap; }
.bb-crumbs__sep { margin: 0 6px; color: var(--color-text-secondary); }
.bb-crumbs__list a { font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.bb-crumbs__list a:hover { text-decoration: underline; }
.bb-crumbs__list svg { width: 16px; height: 16px; }
.bb-crumbs__usps {
  display: none;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  gap: 24px;
  color: var(--color-text-subtle);
  font-weight: 300;
}
.bb-crumbs__usps li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bb-crumbs__usps svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   §6.5 Brand-banner (96 px fuld bredde < 768; 128 px afrundet ≥ 768)
   -------------------------------------------------------------------------- */
.bb-banner {
  height: 96px;
  margin: 0 calc(-1 * var(--container-pad));
  overflow: hidden;
  background: var(--color-header-bg);
}
.bb-banner picture { display: block; height: 100%; }
.bb-banner img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   §6.6 Kategorifliser (slider). --tiles-per-view læses af JS.
   -------------------------------------------------------------------------- */
.bb-tiles {
  --tiles-per-view: 2;
  position: relative;
  margin: 12px 0 32px -4px; /* 12 px venstre-luft på mobil; højre kant flugter med banneret */
  padding: 4px 0;
  overflow: hidden;
}
/* 40 px fade i højre kant (transparent → sidebaggrund) */
.bb-tiles::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, rgba(8, 8, 8, 0), var(--color-page-bg));
  pointer-events: none;
  z-index: 1;
}
.bb-tiles__track {
  display: flex;
  gap: 8px;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: transform var(--dur) ease;
}
.bb-tiles__track.is-dragging { transition: none; cursor: grabbing; }
/* Ringe inde i elementet, så overflow: hidden på slideren ikke klipper dem */
.bb-tiles__track:focus-visible { outline-offset: -2px; box-shadow: none; }
.bb-tile:focus-visible { outline-offset: -3px; box-shadow: none; }
.bb-tile {
  position: relative;
  display: block;
  /* N fliser + et kig på 0,4 flise, med 8 px mellemrum */
  flex: 0 0 calc((100% - var(--tiles-per-view) * 8px) / (var(--tiles-per-view) + 0.4));
  aspect-ratio: 6 / 7;
  overflow: hidden;
  background: var(--photo-stage);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.bb-tile:hover { border-color: var(--color-chip-outline); box-shadow: var(--shadow-sm); }
.bb-tile__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8% 8% 14%;
  box-sizing: border-box;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Art-directed tiles (assets/<brand>-brand/tiles/*.webp) are full-bleed
   compositions with the product already staged, so no padding and no
   contain-fit. */
.bb-tile--art { background: #000; }
.bb-tile--art .bb-tile__img { object-fit: cover; padding: 0; }
/* 64 px gradient fra sort til transparent i bunden */
.bb-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
.bb-tile__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  color: var(--color-text-strong);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-tiles__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 24px;
  margin-top: 12px;
}
.bb-tiles__dots { display: flex; align-items: center; gap: 4px; }
/* Prik 8 px (12 px ≥ 1024) med 6 px usynlig trykflade omkring */
.bb-tiles__dot, .bb-tiles__dots > button {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  padding: 6px;
  background: var(--color-track);
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
}
.bb-tiles__dot.is-active, .bb-tiles__dots > button.is-active,
.bb-tiles__dot[aria-selected="true"], .bb-tiles__dots > button[aria-selected="true"] { background-color: var(--guld-lys); }
.bb-tiles__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
}
.bb-tiles__arrow svg { width: 12px; height: 12px; }
.bb-tiles__arrow:disabled, .bb-tiles__arrow[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Smykkesiderne (07-10-2026): Diturs opstilling i Nordurs tøj — runde billeder med kategoriens navn i versaler,
   og på smykker.html to store kort. Billederne er by Aagaards egne (scripts/smykke-kategorier.py).
   Teksten er hvid; guld er kun ringen om den side, man står på, og stregen under de store kort. */
.bb-smykkehub { margin: 16px 0 28px; }
.bb-cirkler {
  display: flex; gap: 10px; list-style: none; margin: 0 calc(-1 * var(--container-pad)); padding: 4px var(--container-pad) 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.bb-cirkler::-webkit-scrollbar { display: none; }
.bb-cirkler > li { flex: 0 0 auto; scroll-snap-align: start; }
.bb-cirkel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; color: var(--color-text); text-decoration: none; }
.bb-cirkel__foto {
  display: block; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: #141210; box-shadow: 0 0 0 1px rgba(244, 242, 236, .14);
  transition: box-shadow .2s ease;
}
.bb-cirkel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bb-cirkel__navn { font-size: 10px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; text-align: center; font-weight: 500; }
.bb-cirkel:hover .bb-cirkel__foto, .bb-cirkel:focus-visible .bb-cirkel__foto, .bb-cirkel.is-aktiv .bb-cirkel__foto {
  box-shadow: 0 0 0 2px var(--color-page-bg), 0 0 0 3px var(--guld);
}
.bb-cirkel:hover img { transform: scale(1.05); }
.bb-cirkel:focus-visible { outline: none; }
.bb-store { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.bb-stor { position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--color-text); text-decoration: none; }
.bb-stor__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md, 8px); background: #141210; }
.bb-stor__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .5s ease; }
.bb-stor:hover img { transform: scale(1.03); }
.bb-stor__navn {
  align-self: flex-start; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  padding-bottom: 4px; border-bottom: 1px solid var(--guld);
}
@media (min-width: 768px) {
  .bb-smykkehub { margin: 24px 0 40px; }
  .bb-cirkler { gap: 14px; margin: 0; padding: 6px 4px 8px; justify-content: safe center; }
  .bb-cirkel { width: 110px; }
  .bb-cirkel__foto { width: 104px; height: 104px; }
  .bb-cirkel__navn { font-size: 11px; letter-spacing: .1em; }
  .bb-store { gap: 24px; margin-top: 36px; }
  .bb-stor__foto { aspect-ratio: 16 / 9; border-radius: var(--radius-lg, 12px); }
  .bb-stor__navn { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bb-cirkel img, .bb-stor img { transition: none; } }

/* --------------------------------------------------------------------------
   §6.8 Chip-bar (< 1024): vandret scroll, 24 px fade, Filtrer-knap + chips
   -------------------------------------------------------------------------- */
.bb-chipbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 calc(-1 * var(--container-pad));
  padding: 8px var(--container-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.bb-chipbar::-webkit-scrollbar { display: none; }
.bb-chipbar__chips { display: flex; gap: 8px; padding-right: 24px; }

/* Filtrer-knap: sort, 16/600, ikon, 36 px høj (§12) */
.bb-btn-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: 36px;
  padding: 8px 20px;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.bb-btn-filter::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bb-btn-filter svg { width: 16px; height: 16px; }
/* Rummer knappen sit eget svg-ikon, tegnes CSS-ikonet ikke oveni */
.bb-btn-filter:has(svg)::after { display: none; }

/* Filter-chip: sort, afrunding 8, 1 px guld kant (§12, §16) */
.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 20px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-chip-outline);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 18px;
  white-space: nowrap;
}
.bb-chip:hover { border-color: var(--guld); }
.bb-chip.is-active { border-color: var(--guld); font-weight: 600; }
.bb-chip__count { font-weight: 600; }
.bb-chip__remove, .bb-chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-secondary);
}
/* Valgte-filtre-chips (sidebar og fast bjælke) er lidt mindre */
.bb-filters__chips .bb-chip, .bb-stickybar__chips .bb-chip { padding: 6px 12px; font-size: 14px; line-height: 18px; }

/* --------------------------------------------------------------------------
   §6.7 Listeområde: sidebar 1/5 + liste 4/5 fra 1024 (32 px gap)
   -------------------------------------------------------------------------- */
.bb-catalog { display: block; }
.bb-filters { display: none; }
.bb-list { min-width: 0; }

/* Sidebar */
.bb-filters__title {
  margin: 0 0 32px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--color-text-strong);
}
.bb-filters__selected { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bb-filters__selected-label { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-text-label); }
.bb-filters__clear {
  padding: 0;
  background: none;
  border: 0;
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
  color: var(--color-text);
}
.bb-filters__clear:disabled { color: var(--color-text-secondary); cursor: not-allowed; text-decoration: none; }
.bb-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bb-filters__empty { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }

/* Grupper: linje over (1 px #E5E7EB) med 16 px luft over og under */
.bb-group { border-top: 1px solid var(--color-border); padding-top: 16px; margin-top: 16px; }
.bb-group__toggle, .bb-filters__groups button[aria-expanded] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text-label);
  text-align: left;
}
.bb-group__toggle::after, .bb-filters__groups button[aria-expanded]::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--guld);
  border-radius: var(--radius-md);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--dur) ease;
}
.bb-group__toggle[aria-expanded="true"]::after, .bb-filters__groups button[aria-expanded="true"]::after { transform: rotate(180deg); }
.bb-group__badge { margin-left: auto; margin-right: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }

/* Panel: max-height + opacity over 300 ms; JS sætter evt. max-height inline */
.bb-group__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--dur) ease, opacity var(--dur) ease;
}
.bb-group__panel.is-open { max-height: var(--panel-max, 640px); opacity: 1; }

.bb-group__search, .bb-filters__groups input[type="search"], .bb-sheet__body input[type="search"] {
  width: 100%;
  height: 40px;
  margin: 8px 0 0;
  padding: 0 12px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.bb-group__search::placeholder { color: var(--color-text-muted); }

/* Værdiliste: scroll + fade i bunden */
.bb-group__list {
  max-height: 264px;
  margin: 8px 0 0;
  padding: 0 2px 20px;
  overflow-y: auto;
  list-style: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 20px), transparent);
}
.bb-group__list li { list-style: none; }
.bb-group__none { font-size: 14px; color: var(--color-text-secondary); padding: 8px 0; }

/* Ét valg: checkbox 20 px + tekst + antal i gråt til højre */
.bb-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.bb-option__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-option__count { flex: none; margin-left: auto; color: var(--color-text-secondary); }
.bb-option.is-zero { color: var(--color-text-muted); cursor: not-allowed; }
.bb-option input:disabled { cursor: not-allowed; opacity: .5; }

.bb-option input[type="checkbox"], .bb-checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-chip-outline);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.bb-option input[type="checkbox"]:checked, .bb-checkbox:checked { background: var(--color-primary); border-color: var(--color-primary); }
.bb-option input[type="checkbox"]:checked::before, .bb-checkbox:checked::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pris-panel: to felter, antal, histogram, dobbelt skyder, toggle */
.bb-price__inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 6px; margin-top: 8px; }
.bb-price__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.bb-price__sep { align-self: end; padding-bottom: 11px; color: var(--color-text-secondary); }
.bb-price__input, .bb-price__field input {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 14px;
  text-align: center;
  color: var(--color-text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.bb-price__input::-webkit-outer-spin-button, .bb-price__input::-webkit-inner-spin-button,
.bb-price__field input::-webkit-outer-spin-button, .bb-price__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bb-price__count { margin: 12px 0 8px; font-size: 14px; line-height: 20px; }
.bb-price__count strong { font-weight: 700; }
.bb-price__hist { display: flex; align-items: flex-end; gap: 2px; height: 48px; padding: 0 10px; }
.bb-price__bar {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--h, 0) * 100%);
  min-height: 2px;
  background: var(--guld-lys);
  border-radius: 1px 1px 0 0;
}
/* To range-inputs oven på hinanden, tegnet som én skyder med to håndtag */
.bb-price__slider { position: relative; height: 24px; margin: 0 0 4px; }
.bb-price__slider::before, .bb-price__slider::after {
  content: "";
  position: absolute;
  top: 11px;
  height: 2px;
  border-radius: 1px;
  pointer-events: none;
}
.bb-price__slider::before { left: 0; right: 0; background: var(--color-track); }
.bb-price__slider::after { left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: var(--guld-lys); }
.bb-price__range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
.bb-price__range:focus { z-index: 3; outline: none; }
.bb-price__range::-webkit-slider-runnable-track { height: 2px; background: transparent; border: 0; }
.bb-price__range::-moz-range-track { height: 2px; background: transparent; border: 0; }
.bb-price__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  background: var(--color-primary);
  border: 2px solid var(--color-page-bg);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / .6);
  pointer-events: auto;
  cursor: pointer;
}
.bb-price__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border: 2px solid var(--color-page-bg);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / .6);
  pointer-events: auto;
  cursor: pointer;
}
.bb-price__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--color-page-bg), 0 0 0 4px var(--guld-lys); }
.bb-price__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--color-page-bg), 0 0 0 4px var(--guld-lys); }
.bb-price__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); }
/* Valgfri hurtigvalg (prisbånd) */
.bb-price__bands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bb-price__bands .bb-chip { padding: 4px 10px; font-size: 13px; }

/* Toggle: mørk skinne + guld knap; tændt = guld skinne med sort knap (§12) */
.bb-price__toggle, .bb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.bb-toggle {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  margin: 0;
  background: var(--color-track);
  border: 0;
  border-radius: var(--radius-full);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background var(--dur) ease;
}
.bb-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / .5);
  transition: transform var(--dur) ease, background var(--dur) ease;
}
.bb-toggle:checked { background: var(--guld-lys); }
.bb-toggle:checked::before { transform: translateX(20px); background: var(--color-page-bg); }

/* --------------------------------------------------------------------------
   §6.9 Antal og sortering (rigtig <select> usynligt ovenpå)
   -------------------------------------------------------------------------- */
.bb-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 24px; }
.bb-toolbar__count { font-size: 14px; line-height: 20px; }
.bb-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.bb-sort__label { font-weight: 700; }
.bb-sort__chevron {
  width: 8px;
  height: 8px;
  margin: 0 2px 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.bb-sort__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.bb-sort:focus-within { outline: 2px solid var(--guld-lys); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-page-bg); border-radius: 2px; }

/* --------------------------------------------------------------------------
   §6.10 Produktgitter + skelet-kort
   -------------------------------------------------------------------------- */
.bb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  margin: 16px 0 48px;
}
.bb-grid.is-loading { pointer-events: none; }
.bb-empty { margin: 16px 0 48px; padding: 48px 16px; text-align: center; color: var(--color-text-secondary); }

.bb-skeleton { background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; padding-bottom: 12px; }
.bb-skeleton::before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-skeleton);
  animation: bb-pulse 1.5s ease-in-out infinite;
}
/* Tre streger på 1/3, 1/1 og 3/4 bredde, tegnet med gradienter */
.bb-skeleton::after {
  content: "";
  display: block;
  height: 56px;
  margin: 12px 8px 0;
  background-image: linear-gradient(var(--color-skeleton), var(--color-skeleton)),
                    linear-gradient(var(--color-skeleton), var(--color-skeleton)),
                    linear-gradient(var(--color-skeleton), var(--color-skeleton));
  background-size: 33.333% 12px, 100% 12px, 75% 12px;
  background-position: 0 0, 0 22px, 0 44px;
  background-repeat: no-repeat;
  animation: bb-pulse 1.5s ease-in-out infinite;
}
@keyframes bb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* --------------------------------------------------------------------------
   §6.11 Produktkort (markup i kontrakt §7.1)
   -------------------------------------------------------------------------- */
.bb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bb-card__link { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; color: inherit; }
.bb-card__link:focus-visible { outline-offset: -2px; box-shadow: none; }

.bb-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: 21px;
  padding: 2px 4px;
}
.bb-card__badges { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.bb-badge {
  display: inline-block;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  white-space: nowrap;
}
/* Mørkere rødt bag den hvide tekst: #F0334F gav 3,97:1, #E0213D 4,71:1 (WCAG kræver 4,5). Prisen i rødt er uændret. */
.bb-badge--sale { background: #E0213D; color: #fff; }
.bb-badge--new { background: var(--color-badge-neutral); color: var(--color-text); }
.bb-card__rating { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; line-height: 18px; white-space: nowrap; }

/* Billede: kvadratisk mørk scene (fotoerne er fritlagte),
   strimmel på 200 % med to billeder */
.bb-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0 4px 12px;
  overflow: hidden;
  background: var(--photo-stage);
  border-radius: var(--radius-sm);
  touch-action: pan-y;
}
.bb-card__strip {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform var(--dur) ease-out;
}
.bb-card__media[data-count="1"] .bb-card__strip { width: 100%; transform: none; }
.bb-card__strip.is-second { transform: translateX(-50%); }
/* Intet fast will-change paa strimlen: det gav hvert kort sit eget lag, og saa kostede
   enhver aendring paa siden (fx Nords knap, der flyttes) ~6 ms ekstra pr. billede paa en telefon.
   Skiftet mellem fotoerne er en transition og faar sit lag af sig selv, mens den koerer. */
.bb-card__strip.is-dragging { transition: none; }
.bb-card__img {
  flex: none;
  width: 50%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  box-sizing: border-box;
  background: transparent;
  -webkit-user-drag: none;
}
.bb-card__media[data-count="1"] .bb-card__img { width: 100%; }

/* Swipe-indikator, 2 px (kun < 1024) */
.bb-card__swipe {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--color-track);
  border-radius: 1px;
  overflow: hidden;
}
.bb-card__swipe i {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--color-marker);
  transition: transform var(--dur) ease-out;
}
.bb-card__strip.is-second ~ .bb-card__swipe i { transform: translateX(100%); }

/* Diameter-pille: 8 px fra bunden, 0 px fra højre (< 768), venstre side rund */
.bb-card__diameter {
  position: absolute;
  right: 0;
  bottom: 8px;
  padding: 4px 8px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-right: 0;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* Kampagnelinje: 16 px (24 px ≥ 1024), holder kortene lige høje */
.bb-card__campaign {
  height: 16px;
  padding: 0 4px;
  background: var(--color-campaign-bg);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-card__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 4px; }
.bb-card__title { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.bb-card__brand {
  display: block;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-card__name {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-card__member { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-member); }
.bb-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin: auto 0 8px;
  padding-top: 4px;
  font-family: var(--font-price);
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--color-text);
}
.bb-card__price.is-sale { color: var(--color-sale); }
.bb-card__now { font-variant-numeric: tabular-nums; }
.bb-card__unit { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--color-text); }
.bb-card__price.is-sale .bb-card__unit { color: var(--color-sale); }
.bb-card__was {
  margin-left: 4px;
  font-family: var(--font-price);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   §6.12 Sideskift (4 kolonner) og "Varer pr. side"
   -------------------------------------------------------------------------- */
.bb-pager {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
}
.bb-pager__prev, .bb-pager__next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: none;
  border: 0;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
}
.bb-pager__prev { grid-column: 1; justify-self: start; }
.bb-pager__next { grid-column: 4; justify-self: end; }
.bb-pager__prev:hover, .bb-pager__next:hover { text-decoration: underline; }
.bb-pager__prev:disabled, .bb-pager__next:disabled,
.bb-pager__prev.is-disabled, .bb-pager__next.is-disabled,
.bb-pager__prev[aria-disabled="true"], .bb-pager__next[aria-disabled="true"] { opacity: .8; cursor: not-allowed; text-decoration: none; }
.bb-pager__pos {
  grid-column: 2 / 4;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
/* Side-vælger: synlig boks + usynlig <select> ovenpå (samme mønster som sortering) */
.bb-pager__select { position: relative; display: inline-flex; align-items: center; }
.bb-pager__box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
/* Uden wrapper vises selve <select> som boksen */
.bb-pager select {
  display: inline-block;
  padding: 8px 32px 8px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.bb-pager__box::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 0 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.bb-pager__select select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; background: none; }
.bb-pager__select:focus-within { outline: 2px solid var(--guld-lys); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-page-bg); border-radius: var(--radius-sm); }
/* iOS zoomer ind på et felt under 16 px, når man trykker i det, og siden bliver stående forstørret.
   Kun på berøringsskærme — på en computer er felterne som før. Står efter sidevælgerens regler, så den vinder. */
@media (hover: none) and (pointer: coarse) {
  .bb-search__input, .bb-pager select,
  .bb-group__search, .bb-filters__groups input[type="search"], .bb-sheet__body input[type="search"],
  .bb-price__input, .bb-price__field input { font-size: 16px; }
}

.bb-perpage {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
}
.bb-perpage__label { margin-right: 4px; }
.bb-perpage__option, .bb-perpage button, .bb-perpage a {
  padding: 4px;
  background: none;
  border: 0;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: underline;
}
.bb-perpage__option.is-active, .bb-perpage button.is-active, .bb-perpage a.is-active,
.bb-perpage [aria-current="true"] { font-weight: 700; }

/* --------------------------------------------------------------------------
   §6.13 SEO-tekstblok (foldet til 288 px med fade + "Læs mere")
   -------------------------------------------------------------------------- */
.bb-seo { margin: 24px 0 48px; }
.bb-seo__body { position: relative; }
.bb-seo__body.is-collapsed { max-height: 288px; overflow: hidden; }
.bb-seo__body.is-collapsed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, var(--color-page-bg));
  pointer-events: none;
}
.bb-seo__body h2 { font-size: 30px; line-height: 36px; font-weight: 700; margin: 24px 0 14px; }
.bb-seo__body .bb-seo__titel { font-size: 36px; line-height: 40px; margin: 0 0 20px; }
.bb-seo__body h3 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 16px 0 14px; }
.bb-seo__body p { font-size: 16px; line-height: 24px; margin: 0 0 8px; }
.bb-seo__body a { color: var(--color-text); text-decoration: underline; }
.bb-seo__body a:hover { text-decoration-thickness: 2px; }
.bb-seo__body ul, .bb-seo__body ol { margin: 0 0 8px; padding-left: 24px; }
.bb-seo__body li { margin-bottom: 4px; }
.bb-seo__body img { max-width: 400px; height: auto; margin: 8px 0 16px; border-radius: var(--radius-md); }
.bb-seo__body table {
  width: 100%;
  margin: 8px 0 16px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}
.bb-seo__body th, .bb-seo__body td { border: 1px solid var(--color-border-input); padding: 8px; text-align: center; vertical-align: top; }
.bb-seo__body th { font-weight: 700; }
.bb-seo__table-wrap { overflow-x: auto; }
.bb-seo__more { display: flex; width: 256px; max-width: 100%; height: 48px; margin: 16px auto 0; }

/* --------------------------------------------------------------------------
   §12 Knapper
   -------------------------------------------------------------------------- */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  padding: 10px 35px;
  max-height: 48px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-chip-outline);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  transition: box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.bb-btn--primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); font-weight: 700; }
.bb-btn--primary:hover { box-shadow: var(--shadow-btn-hover); }
.bb-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  text-transform: uppercase;
}
.bb-btn--secondary:hover { border-color: var(--guld-lys); box-shadow: inset 0 0 0 1px var(--guld-lys); }
.bb-btn--ghost { background: var(--color-surface); color: var(--color-text); border-color: var(--color-chip-outline); }
.bb-btn--ghost:hover { border-color: var(--guld); }
.bb-btn:disabled, .bb-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* --------------------------------------------------------------------------
   §6.15 Footer (sort med guld overskrifter)
   -------------------------------------------------------------------------- */
.bb-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-link);
  padding: 48px 0 88px; /* plads til den faste filterbjælke under 1024 */
  border-top: 1px solid var(--color-border);
  font-size: 16px;
  line-height: 24px;
}
.bb-footer a { color: var(--color-footer-link); transition: color var(--dur) ease; }
.bb-footer a:hover { color: var(--color-text-strong); }

/* a) Nyhedsbrevskort */
.bb-news {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.bb-news__img {
  display: none;
  flex: none;
  width: 100%;
  max-width: 320px;
  height: 256px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.bb-news__body { flex: 1 1 auto; min-width: 0; }
.bb-news__title { margin: 0 0 12px; font-size: 30px; line-height: 36px; font-weight: 700; color: var(--color-footer-heading); }
.bb-news__text { margin: 0 0 16px; color: var(--color-footer-link); }
.bb-news__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--color-text);
}
.bb-news__benefits li { display: flex; align-items: flex-start; gap: 10px; }
.bb-news__benefits li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--guld);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.bb-news__form { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-news__input {
  flex: 1 1 220px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: var(--color-page-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
}
.bb-news__input::placeholder { color: var(--color-footer-link); }
.bb-news__btn {
  padding: 12px 32px;
  background: var(--color-accent);
  color: var(--color-primary-fg);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.bb-news__btn:hover { box-shadow: var(--shadow-btn-hover); }
.bb-news__btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-chip-outline); }
.bb-news__status { min-height: 20px; margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--color-text); }
.bb-news__link { display: inline-block; margin-top: 8px; font-size: 14px; text-decoration: underline; }

/* b) Linkkolonner: 2 kolonner (< 768) / 4 kolonner */
.bb-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 48px;
}
.bb-footer__heading, .bb-footer__col h3, .bb-footer__col h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color-footer-heading); }
.bb-footer__links, .bb-footer__col ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.bb-footer__links button, .bb-footer__action {
  padding: 0;
  background: none;
  border: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-footer-link);
  text-align: left;
  transition: color var(--dur) ease;
}
.bb-footer__links button:hover, .bb-footer__action:hover { color: var(--color-text-strong); }
.bb-footer__btn {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 16px;
  color: var(--color-text);
  border: 1px solid var(--color-chip-outline);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.bb-footer__btn:hover { border-color: var(--guld-lys); }

/* c) Betaling og fragt */
.bb-footer__pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.bb-footer__domain { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text); }
.bb-footer__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bb-footer__logos img { height: 24px; width: auto; }

/* d) Bundlinje */
.bb-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
/* Domaenet over firmalinjen, som hos Ditur — uden landevaelger: vi har ét marked. */
.bb-footer__bottom .bb-footer__domain { margin: 0 0 4px; font-size: 16px; }
.bb-footer__socials {
  display: flex; justify-content: center; gap: 22px; list-style: none;
  width: 100%; margin: 4px 0 8px; padding: 20px 0 0; border-top: 1px solid var(--color-border);
}
.bb-footer__socials a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-footer-link); }
.bb-footer__socials a:hover, .bb-footer__socials a:focus-visible { color: var(--color-text-strong); }
.bb-footer__socials svg { width: 26px; height: 26px; }
.bb-footer__domain img { width: 20px; height: 20px; }
.bb-footer__company { margin: 0; }
.bb-footer__social { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.bb-footer__social a { display: inline-flex; width: 24px; height: 24px; }
.bb-footer__social svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   §6.8 Filterark (< 1024): overlay + panel fra bunden, ca. 2/3 skærm
   -------------------------------------------------------------------------- */
.bb-sheet { position: fixed; inset: 0; z-index: 80; }
.bb-sheet__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.bb-sheet__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 66vh;
  max-height: calc(100vh - 32px);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-filterbar);
  transform: translateY(100%);
  transition: transform var(--dur) ease;
}
.bb-sheet.is-open .bb-sheet__panel { transform: none; }
.bb-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.bb-sheet__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sheet__back, .bb-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-chip-outline);
  border-radius: var(--radius-sm);
  font-size: 20px;
  line-height: 1;
}
.bb-sheet__back svg, .bb-sheet__close svg { width: 16px; height: 16px; }
.bb-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 16px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Oversigt: én række pr. gruppe med › */
.bb-sheet__list { margin: 0; padding: 0; list-style: none; }
.bb-sheet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}
.bb-sheet__row-label { flex: none; }
.bb-sheet__row-meta, .bb-sheet__row-value {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-sheet__row-arrow { flex: none; font-size: 22px; line-height: 1; color: var(--guld); }
/* Rækker uden eget pil-element (ældre markup) får pilen fra CSS */
.bb-sheet__row:not(:has(.bb-sheet__row-arrow))::after { content: "\203A"; flex: none; font-size: 22px; line-height: 1; color: var(--guld); }
/* Gruppevisning genbruger .bb-option, blot med større trykflade */
.bb-sheet__body .bb-option { padding: 10px 0; font-size: 16px; line-height: 24px; border-bottom: 1px solid var(--color-border); }
.bb-sheet__body .bb-group__list { max-height: none; overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
.bb-sheet__body .bb-price__count { margin-top: 16px; }
.bb-sheet__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.bb-sheet__foot .bb-btn { width: 100%; padding-left: 12px; padding-right: 12px; }

/* --------------------------------------------------------------------------
   §6.8 Fast filterbjælke nederst (< 1024; vises kun når chip-baren er væk)
   -------------------------------------------------------------------------- */
.bb-stickybar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 8px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-filterbar);
  transform: translateY(calc(100% + 16px));
  transition: transform var(--dur) ease;
}
.bb-stickybar.is-visible { transform: none; }
.bb-stickybar__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.bb-stickybar__chips::-webkit-scrollbar { display: none; }
.bb-stickybar__chips > :last-child { margin-right: 24px; }

/* --------------------------------------------------------------------------
   §6.16 Cookie-samtykke: lille centreret kort
   -------------------------------------------------------------------------- */
.bb-cookie {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 24px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-filterbar);
  transform: translate(-50%, -50%);
}
.bb-cookie__title, .bb-cookie h2 { margin: 0 0 8px; font-size: 18px; line-height: 24px; font-weight: 700; }
.bb-cookie__text, .bb-cookie p { margin: 0 0 16px; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.bb-cookie__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bb-cookie__link:hover { color: var(--color-text); }
.bb-cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-cookie .bb-btn { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }

/* --------------------------------------------------------------------------
   §13 Responsiv adfærd
   -------------------------------------------------------------------------- */

/* 481–600: 3 fliser */
@media (min-width: 481px) {
  .bb-tiles { --tiles-per-view: 3; }
}

/* 601–1023: 4 fliser */
@media (min-width: 601px) {
  .bb-tiles { --tiles-per-view: 4; }
}

/* ≥ 768: banner i container med afrunding, 4 kolonner, 4 footerkolonner */
@media (min-width: 768px) {
  .bb-banner { height: 128px; margin: 0; border-radius: var(--radius-md); }
  .bb-tiles { margin-top: 16px; margin-left: 0; }
  .bb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-card__badges { gap: 8px; }
  .bb-card__diameter { right: 8px; }
  .bb-pager { gap: 24px; }
  .bb-perpage { display: flex; }
  .bb-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-news { padding: 32px; }
  .bb-news__benefits { grid-template-columns: 1fr 1fr; }
  .bb-footer__pay { flex-direction: row; justify-content: space-between; }
  .bb-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ≥ 1024: desktop-layout */
@media (min-width: 1024px) {
  body.bb {
    --container-pad: 24px;
    --header-h: 73px;
    --topbar-h: 28px;
    --gap-grid: 16px;
  }

  /* Topbjælke: alle USP'er på én række, rating til højre (§6.1) */
  .bb-topbar__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }
  .bb-topbar__item {
    position: static;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .bb-topbar__item--rating { justify-self: end; }

  /* Header: én række på 73 px (§6.2) */
  .bb-header__inner { display: flex; align-items: center; gap: 24px; min-height: 73px; padding-top: 0; padding-bottom: 0; }
  .bb-header__row { display: contents; }
  .bb-header__menu {
    order: 1;
    width: auto;
    height: 40px;
    padding: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--guld);
    border-radius: var(--radius-md);
  }
  .bb-header__menu-text { display: inline; }
  .bb-header__logo { order: 2; }
  .bb-search { order: 3; flex: 1 1 auto; max-width: 760px; margin: 0 auto; }
  .bb-header__icons { order: 4; gap: 32px; margin-left: 0; }

  /* Brødkrumme-række: USP'er til højre (§6.4) */
  .bb-crumbs__usps { display: flex; }

  /* Banner og fliser (§6.5, §6.6) */
  .bb-banner { border-radius: var(--radius-lg); }
  .bb-tiles { --tiles-per-view: 5; margin-bottom: 40px; }
  .bb-tile { border-radius: var(--radius-lg); }
  .bb-tile__label { font-size: 18px; line-height: 28px; }
  .bb-tiles__dot, .bb-tiles__dots > button { width: 12px; height: 12px; padding: 4px; }
  .bb-tiles__arrow { display: inline-flex; }

  /* Filtre: chip-bar, ark og fast bjælke væk; sidebar frem (§6.7) */
  .bb-chipbar, .bb-stickybar, .bb-sheet { display: none !important; }
  .bb-catalog {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap-columns);
    align-items: start;
  }
  .bb-filters { display: block; grid-column: span 1; min-width: 0; }
  .bb-list { grid-column: span 4; }

  /* Kort (§6.11) */
  .bb-card, .bb-skeleton { border-radius: var(--radius-lg); }
  .bb-card__top { height: 24px; padding: 4px 8px; }
  .bb-card__swipe { display: none; }
  .bb-card__diameter { border-right: 1px solid var(--color-border-soft); border-radius: var(--radius-full); }
  .bb-card__campaign { height: 24px; line-height: 24px; }
  .bb-card__info { padding: 8px; }
  .bb-card__price { font-size: 24px; line-height: 28px; }
  .bb-card__was { font-size: 14px; line-height: 18px; font-weight: 700; }

  /* Footer: billede til venstre i nyhedsbrevskortet (§6.15) */
  .bb-footer { padding-bottom: 48px; }
  .bb-news { flex-direction: row; align-items: center; gap: 32px; }
  .bb-news__img { display: block; }
}

/* Hover til billede 2 kun på enheder med rigtig hover og ≥ 1024 (§6.11) */
@media (min-width: 1024px) and (hover: hover) {
  .bb-card__media[data-count="2"]:hover .bb-card__strip { transform: translateX(-50%); }
}

/* ≥ 1280: lidt mere luft mellem USP'erne i brødkrumme-rækken */
@media (min-width: 1280px) {
  .bb-crumbs__usps { gap: 40px; }
}

/* --------------------------------------------------------------------------
   §14.11 Reduceret bevægelse: alle animationer og overgange slås fra
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb *, .bb *::before, .bb *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Topbjælke uden rulning: vis kun den første USP under 1024 */
  .bb-topbar__item { opacity: 1; transform: none; }
  .bb-topbar__item:not(:first-child) { display: none; }
  .bb-tiles__track { will-change: auto; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .bb-topbar__item:not(:first-child) { display: flex; }
}

/* "Vis (N)" i filterarket: tekst og tal er separate flex-børn, så ingen gap */
#bbSheetApply { gap: 0; }

/* Favoritter: hjertet oeverst til hoejre paa kortet (js/favoritter.js) */
.bb-card { position: relative; }
.bb-card__fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,0.92); color: #1f2333; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.14); }
.bb-card__fav svg { width: 18px; height: 18px; display: block; }
.bb-card__fav:hover { background: #fff; }
.bb-card__fav.is-fav svg { fill: currentColor; }

/* Gult omrids, hvid tekst — som menuen (brugerens ønske 23-09-2026): al tekst er hvid (--color-text øverst), guld
   er kanter, ikoner og de fyldte knapper. Ikonerne tegnes med currentColor, så de får guldet her; på den fyldte
   Filtrer-knap følger de knappens mørke tekst. */
.bb .bb-icon { color: var(--guld); }
.bb .bb-btn-filter .bb-icon, .bb .bb-btn--primary .bb-icon { color: inherit; }
/* Login (seglet), posen, tilbagepilen og huset i stien er hvide — som toppen på de andre sider; guld ved hover */
.bb .bb-header__icon .bb-icon, .bb .bb-back .bb-icon, .bb .bb-crumbs__link .bb-icon { color: var(--color-text-strong); }
.bb .bb-header__icon:hover .bb-icon, .bb .bb-back:hover .bb-icon, .bb .bb-crumbs__link:hover .bb-icon { color: var(--guld); }
.bb-search__input::placeholder { color: rgba(244, 242, 236, .55); }
/* Sprogvælgeren i bunden (scripts/sprog/gen-sprog.js) — samme som i style.css; står under bundlinjen. */
.sprogvalg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin: 12px 0 0; }
.sprogvalg svg { width: 18px; height: 18px; color: var(--guld, #d4af37); margin-right: 4px; flex: none; }
.sprogvalg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--color-text-secondary); font-size: 14px; text-decoration: none; border-bottom: 1px solid transparent; }
.sprogvalg a:hover, .sprogvalg a:focus-visible { color: var(--color-text-strong); }
.sprogvalg a[aria-current="true"] { color: var(--color-text); border-bottom-color: var(--guld, #d4af37); }
/* Sprogudgaverne: tyske og svenske sammensatte ord er lange — de brydes (med bindestreg, hvor browseren kan)
   i stedet for at skubbe siden bredere end telefonen. Den danske udgave røres ikke. */
html:not([lang="da"]) body { overflow-wrap: anywhere; hyphens: auto; }

/* Portalkortet sidst i gitteret (fx "Alle armbånd" på From Soldier to Soldiers urside): samme mål som et varekort,
   tre armbånd vifter ud over hinanden, og hele kortet er ét link. */
.bb-portal { display: flex; flex-direction: column; border: 1px solid var(--guld); border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212,175,55,.12), transparent 70%), #0d0d0d; color: var(--color-text);
  text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.bb-portal:hover, .bb-portal:focus-visible { transform: translateY(-2px); border-color: var(--guld-lys); }
.bb-portal__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.bb-portal__img { position: absolute; top: 22%; width: 46%; height: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.7)); }
.bb-portal__img--0 { left: 6%; transform: rotate(-14deg); }
.bb-portal__img--1 { left: 27%; top: 14%; z-index: 2; }
.bb-portal__img--2 { right: 6%; transform: rotate(14deg); }
.bb-portal__info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; }
.bb-portal__titel { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bb-portal__antal { font-size: .85rem; color: var(--color-text-muted, #bdbab2); }
.bb-portal__pil { margin-top: 6px; font-size: .85rem; font-weight: 600; color: var(--color-text); text-decoration: underline; text-decoration-color: var(--guld); text-underline-offset: 4px; }