/* ==========================================================
   OLB BLANDSELV ADAPTER v0.4
   Klassifikation: component adapter (OLB Runtime)
   Requires: OLB Design System v1.0 LOCKED – kun tokens + canonical classes
   Scope: .olb-bs-module (wrapper om Assorted Products' modul, sat af OLB Runtime),
          .olb-bs-bag (OLB-posebar) og .olb-bs-sheet (OLB bottom sheet / sideskuffe)
   Owns: fuld-bredde varegrid, slikkort, "Indlæs mere", skjult original pose,
         posebar og bottom sheet (filtre + pose)
   Does NOT own: Assorted Products' pose-/kurvlogik, AJAX og felter – pluginets pose
         ligger uændret i DOM'en og i <form> som funktionel motor.
   ========================================================== */

.olb-bs-module {
  position: relative;
  font-family: var(--font-family-ui);
  color: var(--color-text-primary);
}

/* ---------- Produktsiden (Bricks .olb-pdp) på Bland Selv: intet produktbillede,
   ingen "0,00 €", ingen "g"/lagerlinje – slikmodulet får hele sidens bredde.
   body.olb-bs-page sættes af OLB Runtime kun på assorted_product-siden. */
.olb-bs-page .olb-pdp__gallery,
.olb-bs-page .olb-pdp__price,
.olb-bs-page .olb-pdp__meta,
.olb-bs-page .olb-pdp__info,      /* "Om varen" / "Produktdetaljer" */
.olb-bs-page .olb-pdp__related,   /* "Relaterede varer" (enkeltposer) */
.olb-bs-page .olb-pdp__brand:empty { display: none !important; }

.olb-bs-page .olb-pdp__buy,
.olb-bs-page .olb-pdp__info {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* WooCommerce-bekræftelse efter "Færdig – læg i kurven": flyttes af JS ind over modulet */
.olb-bs-page .woocommerce-notices-wrapper.olb-bs-notices--empty { display: none !important; }
.olb-bs-module .olb-bs-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline) var(--gap-component);
  box-sizing: border-box;
  inline-size: 100%;
  margin: 0 0 var(--gap-component) !important;
  padding: var(--space-3) var(--space-4) !important;
  border: var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-surface-cool) !important;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  list-style: none;
}
.olb-bs-module .olb-bs-notice::before,
.olb-bs-module .olb-bs-notice::after { content: none; display: none; }
.olb-bs-module .olb-bs-notice:focus { outline: none; } /* WooCommerce fokuserer beskeden programmatisk; role=alert annoncerer den */
.olb-bs-module .olb-bs-notice .olb-button { float: none; order: 2; margin: 0; }

/* Assorted Products' egen mobil-posebar (i wp_footer) erstattes af OLB-posebaren */
.olb-bs-page .abp_footer_bar_mobile { display: none !important; }

/* ---------- Pluginets layout nulstilles: varerne får fuld bredde */
.olb-bs-module .abp_custom_assorted_product,
.olb-bs-module .abp_custom_assorted_product_content { inline-size: 100%; margin: 0; padding: 0; }

.olb-bs-module .abp_custom_assorted_product_content > .abp_assorted_row {
  display: block;
  margin: 0;
}
.olb-bs-module .abp_custom_assorted_product_content > .abp_assorted_row::before,
.olb-bs-module .abp_custom_assorted_product_content > .abp_assorted_row::after { content: none; }

.olb-bs-module .abp-col-9 {
  float: none !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Original pose (.abp-col-3): skjult, men i DOM, i <form> og med layoutboks,
   så pluginets JavaScript, felter og submit fungerer uændret. Ikke fokusérbar. */
.olb-bs-module .abp-col-3 {
  position: absolute !important;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Vareliste: container-baseret grid */
.olb-bs-module .apb_products_items_container { container-type: inline-size; }

.olb-bs-module .apb_products_items_container > ul.abp_assorted_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card-list);
  margin: 0;
  padding: 0;
  list-style: none;
}
.olb-bs-module .apb_products_items_container > ul.abp_assorted_row::before,
.olb-bs-module .apb_products_items_container > ul.abp_assorted_row::after { content: none; }

@container (max-width: 339px) { .olb-bs-module .apb_products_items_container > ul.abp_assorted_row { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 600px) { .olb-bs-module .apb_products_items_container > ul.abp_assorted_row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 800px) { .olb-bs-module .apb_products_items_container > ul.abp_assorted_row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .olb-bs-module .apb_products_items_container > ul.abp_assorted_row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Slikkort (DS Cards). Pluginets bredder/floats/flex nulstilles hårdt. */
.olb-bs-module .apb_products_items_container li.abp-col-4 {
  float: none !important;
  flex: none !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.olb-bs-module .apb_products_items_container li.abp-col-4 .abp-figure,
.olb-bs-module .apb_products_items_container li.abp-col-4 .abp-captions {
  float: none !important;
  position: static !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  flex: none !important;
}
.olb-bs-module .apb_products_items_container li.abp-col-4 .abp-figure img {
  display: block;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: 100% !important;
  border-radius: 0 !important;
  object-fit: contain;
}

.olb-bs-module .apb_products_items_container li.abp-col-4 > .abp-inner {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  inline-size: auto !important;
  block-size: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--card-padding-product);
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface-product);
  text-align: start;
}

.olb-bs-module .abp-figure {
  aspect-ratio: 1 / 1;
  margin: 0 0 var(--product-media-to-text);
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.olb-bs-module .abp-captions {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column;
  gap: var(--product-name-to-variant);
  padding: 0;
  text-align: start;
}

.olb-bs-module .apb-title,
.olb-bs-module .apb-title a,
.olb-bs-module .apb-title strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--product-name-lines, 2);
  color: var(--color-text-primary);
  font-size: var(--font-size-product-name);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
  text-decoration: none;
}
.olb-bs-module .apb-title a:hover strong { text-decoration: underline; }

.olb-bs-module .abp-captions .mix {
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-ui);
}

/* Mærke + vægt på én linje: "Haribo | ca. 50g". Mærket er et link, der filtrerer på mærket. */
.olb-bs-module .olb-bs-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--font-size-meta);
  line-height: var(--line-height-ui);
}
.olb-bs-module .olb-bs-card-meta__brand {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.olb-bs-module .olb-bs-card-meta__brand:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.olb-bs-module .olb-bs-card-meta__brand:focus-visible {
  outline: var(--border-width-strong) solid var(--color-link);
  outline-offset: var(--gap-hairline);
  border-radius: var(--radius-control);
}
.olb-bs-module .olb-bs-card-meta__sep {
  align-self: stretch;
  border-inline-start: var(--border-control);
}

.olb-bs-module .abp_assorted_item_price {
  margin-block-start: var(--product-variant-to-price);
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-price);
}

/* Quick View skjules – navnet linker allerede til varen */
.olb-bs-module .quick-view-button { display: none !important; }

/* "Kom i posen": sekundær knap i kortets bund (pluginets egen knap – kun præsentation) */
.olb-bs-module .abp_button {
  display: block;
  margin-block-start: auto;
  padding-block-start: var(--product-data-to-cta);
}
.olb-bs-module .abp_button .add-product-to-assorted {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  box-sizing: border-box;
  min-block-size: var(--button-height);
  margin: 0;
  padding: 0 var(--space-2);
  border: var(--border-width-strong) solid var(--color-link);
  border-radius: var(--button-radius);
  background: var(--color-surface);
  color: var(--color-link);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-button-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
  text-align: center;
  text-transform: none;
  cursor: pointer;
  transition: background-color var(--olb-motion-base) ease;
}
.olb-bs-module .abp_button .add-product-to-assorted:hover { background: var(--color-surface-cool); }
.olb-bs-module .abp_button .add-product-to-assorted:focus-visible {
  outline: var(--border-width-strong) solid var(--color-link);
  outline-offset: var(--gap-hairline);
}

/* ---------- "Indlæs mere" */
.olb-bs-module .abp_products_footer {
  display: flex;
  justify-content: center;
  margin-block-start: var(--gap-block);
}
.olb-bs-module #abp-load-more-btn {
  min-block-size: var(--button-height);
  padding: 0 var(--button-padding-x-large);
  border: var(--border-width-strong) solid var(--color-link);
  border-radius: var(--button-radius);
  background: var(--color-surface);
  color: var(--color-link);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-button-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* ==========================================================
   POSEBAR – vises kun når der er slik i posen. Fast nederst til højre i viewporten
   (desktop) / fuld bredde nederst (mobil), over mobil-bundnavigationen (målt af JS).
   ========================================================== */
.olb-bs-bag {
  position: fixed;
  inset-inline-end: var(--space-4);
  inset-block-end: calc(var(--olb-bs-bottom-offset, 0px) + var(--space-4));
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-component);
  box-sizing: border-box;
  inline-size: auto;
  max-inline-size: calc(100vw - 2 * var(--space-4));
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.olb-bs-bag[hidden] { display: none; }

.olb-bs-bag__open {
  display: grid;
  justify-items: start;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.olb-bs-bag__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-ui);
}
.olb-bs-bag__summary {
  display: flex;
  gap: var(--gap-inline);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
}
.olb-bs-bag__price {
  color: var(--color-text-primary);
  font-family: var(--font-family-numeric);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-bag__hint {
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.olb-bs-bag__open:focus-visible {
  outline: var(--border-width-strong) solid var(--color-link);
  outline-offset: var(--gap-hairline);
  border-radius: var(--radius-control);
}
.olb-bs-bag__submit { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .olb-bs-bag.is-bumped { animation: olb-bs-bump var(--olb-motion-base) ease 2; }
  @keyframes olb-bs-bump { 50% { border-color: var(--color-link); } }
}

@media (max-width: 767.98px) {
  .olb-bs-bag { inset-inline: var(--space-3); inset-block-end: calc(var(--olb-bs-bottom-offset, 0px) + var(--space-3)); max-inline-size: none; }
  .olb-bs-bag__hint { display: none; }
}

/* ==========================================================
   BOTTOM SHEET (mobil) / SIDESKUFFE (desktop) – bruges af filtre og pose
   ========================================================== */
.olb-bs-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-raised) + 1000);
  font-family: var(--font-family-ui);
  color: var(--color-text-primary);
}
.olb-bs-sheet[hidden] { display: none; }

.olb-bs-sheet__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-text-primary) 45%, transparent);
}

.olb-bs-sheet__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-block-size: 85dvh;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-surface);
  overflow: hidden;
}

.olb-bs-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-block-end: var(--border-divider);
}
.olb-bs-sheet__close {
  flex: none;
  inline-size: var(--button-height);
  min-inline-size: var(--button-height);
  block-size: var(--button-height);
  padding: 0;
  font-size: var(--font-size-price-lg);
  line-height: 1;
  text-decoration: none;
}
.olb-bs-sheet__close .olb-icon { inline-size: 1em; block-size: 1em; }
.olb-bs-sheet__title {
  margin: 0;
  font-size: var(--font-size-price-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subheading);
}

.olb-bs-sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}

.olb-bs-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-inline);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--border-divider);
}
.olb-bs-sheet__foot > .olb-button--primary { flex: 1 1 auto; }

/* Desktop: sideskuffe fra højre */
@media (min-width: 768px) {
  .olb-bs-sheet__panel {
    inset-block: var(--wp-admin--admin-bar--height, 0px) 0;
    inset-inline: auto 0;
    inline-size: min(28rem, 100%);
    max-block-size: none;
    border-radius: 0;
  }
}

html.olb-bs-sheet-open { overflow: hidden; }

/* ---------- Posens indhold i sheet'et */
.olb-bs-bag__lines {
  display: grid;
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
}
.olb-bs-bag__line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: var(--border-divider);
  font-size: var(--font-size-small);
}
/* Miniature (samme flade som varekortets billede) */
.olb-bs-bag__thumb {
  inline-size: var(--button-height);
  block-size: var(--button-height);
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--color-surface-product);
}
.olb-bs-bag__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Antal-vælger [−] n [+] – samme form som DS' kurv-stepper: kontrol-kant, pill */
.olb-bs-bag__stepper {
  display: inline-flex;
  align-items: center;
  border: var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.olb-bs-bag__step {
  display: inline-grid;
  place-items: center;
  inline-size: var(--button-height);
  block-size: var(--button-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
}
.olb-bs-bag__step:hover:not(:disabled) { background: var(--color-surface-cool); }
.olb-bs-bag__step:focus-visible { outline: var(--border-width-strong) solid var(--color-link); outline-offset: calc(-1 * var(--border-width-strong)); }
.olb-bs-bag__step:disabled { color: var(--color-text-muted); cursor: default; }
.olb-bs-bag__qty {
  min-inline-size: 2ch;
  text-align: center;
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-bag__remove { padding-inline: var(--space-2); font-size: var(--font-size-small); }

@media (max-width: 479.98px) {
  /* Smal skærm: navn over, stepper + fjern under */
  .olb-bs-bag__line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb name name" "thumb step rm"; row-gap: var(--space-1); }
  .olb-bs-bag__thumb { grid-area: thumb; }
  .olb-bs-bag__line-name { grid-area: name; }
  .olb-bs-bag__stepper { grid-area: step; justify-self: start; }
  .olb-bs-bag__remove { grid-area: rm; }
}
.olb-bs-bag__line-name { font-weight: var(--font-weight-semibold); }
.olb-bs-bag__line-meta { color: var(--color-text-secondary); font-family: var(--font-family-numeric); }
.olb-bs-bag__line--empty { grid-template-columns: 1fr; grid-template-areas: none; color: var(--color-text-muted); }

.olb-bs-bag__field { display: grid; gap: var(--gap-tight); }
.olb-bs-bag__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-bag__field .olb-input { box-sizing: border-box; inline-size: 100%; }

.olb-bs-bag__extra {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.olb-bs-bag__total {
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-bag__total-price { font-family: var(--font-family-numeric); font-weight: var(--font-weight-bold); }

/* ==========================================================
   "OVERRASK MIG" – beløb + mix (+ undgå), personalet blander posen.
   Genbruger filter-mønstrene: miniature-boks (beløb) og chip (mix/undgå) med samme
   hvile/valgt/deaktiveret-tilstande. Ingen nye farver, radius eller spacing.
   ========================================================== */
.olb-bs-surprise {
  display: grid;
  gap: var(--gap-component);
  margin: 0 0 var(--gap-block);
  padding: var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-family: var(--font-family-ui);
  color: var(--color-text-primary);
}

.olb-bs-surprise__intro { display: grid; gap: var(--gap-tight); }
.olb-bs-surprise__kicker {
  margin: 0;
  color: var(--color-link);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-meta);
  line-height: var(--line-height-ui);
  text-transform: uppercase;
}
.olb-bs-surprise__heading {
  margin: 0;
  font-size: var(--font-size-price-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subheading);
}
.olb-bs-surprise__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.olb-bs-surprise__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-component);
  margin: 0;
}
.olb-bs-surprise__group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.olb-bs-surprise__group > legend { padding: 0; margin-block-end: var(--space-2); }

/* Skjult, men fokusérbar input – tilstanden vises på boksen/chip'en */
.olb-bs-surprise__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  margin: 0;
}
.olb-bs-surprise__form .olb-bs-surprise__size { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.olb-bs-surprise__form .olb-bs-surprise__chip { position: relative; display: flex; margin: 0; padding: 0; cursor: pointer; }

/* Beløb: 4 bokse på én række (desktop), 2 × 2 på mobil */
.olb-bs-surprise__sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
.olb-bs-surprise__size-box {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--gap-hairline);
  block-size: 100%;
  box-sizing: border-box;
  min-block-size: var(--button-height-large);
  padding: var(--space-3) var(--space-2);
  border: var(--border-control);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  text-align: center;
  transition: border-color var(--olb-motion-base) ease, background-color var(--olb-motion-base) ease;
}
.olb-bs-surprise__size-label {
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-price);
}
.olb-bs-surprise__size-name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
}

/* Mix / Undgå: chips (samme form som filter-chips) */
.olb-bs-surprise__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.olb-bs-surprise__chip-box {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  white-space: nowrap;
  transition: border-color var(--olb-motion-base) ease, background-color var(--olb-motion-base) ease;
}

/* Hover / valgt / fokus / deaktiveret – samme mønster som filtrene */
.olb-bs-surprise__size:hover .olb-bs-surprise__size-box,
.olb-bs-surprise__chip:hover .olb-bs-surprise__chip-box { border-color: var(--color-link); }

.olb-bs-surprise__input:checked + .olb-bs-surprise__size-box {
  padding: calc(var(--space-3) - 1px) calc(var(--space-2) - 1px);
  border: var(--border-width-strong) solid var(--color-link);
  background: var(--color-surface-cool);
  color: var(--color-link);
}
.olb-bs-surprise__input:checked + .olb-bs-surprise__chip-box {
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
  border: var(--border-width-strong) solid var(--color-link);
  background: var(--color-surface-cool);
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-surprise__input:focus-visible + .olb-bs-surprise__size-box,
.olb-bs-surprise__input:focus-visible + .olb-bs-surprise__chip-box {
  outline: var(--border-width-strong) solid var(--color-link);
  outline-offset: var(--gap-hairline);
}
.olb-bs-surprise__input:disabled + .olb-bs-surprise__chip-box {
  border-color: var(--color-cta-disabled-bg);
  color: var(--color-text-muted);
  cursor: default;
}
.olb-bs-surprise__chip:has(.olb-bs-surprise__input:disabled) { cursor: default; }
.olb-bs-surprise__chip:has(.olb-bs-surprise__input:disabled):hover .olb-bs-surprise__chip-box { border-color: var(--color-cta-disabled-bg); }

/* Knap + status */
.olb-bs-surprise__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--gap-component);
}
.olb-bs-surprise__status {
  margin: 0;
  color: var(--color-success);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-surprise__status:empty { display: none; }
.olb-bs-surprise__form[aria-busy="true"] .olb-bs-surprise__submit { cursor: progress; }

/* Desktop/tablet: intro til venstre, valg til højre; mix og undgå side om side */
@media (min-width: 768px) {
  .olb-bs-surprise {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--gap-block);
  }
  .olb-bs-surprise__form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .olb-bs-surprise__group--size,
  .olb-bs-surprise__actions { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .olb-bs-surprise__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olb-bs-surprise__submit { inline-size: 100%; }
}

/* ---------- "Overrask mig" som popup: teaser i titellinjen + panel */
.olb-bs-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline) var(--gap-component);
  min-width: 0;
}
.olb-bs-titlebar > h1 { margin: 0; }

.olb-bs-surprise-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline) var(--space-3);
  font-family: var(--font-family-ui);
}
.olb-bs-surprise-teaser[hidden] { display: none; }
.olb-bs-surprise-teaser__text {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
}
.olb-bs-surprise-teaser__cta { flex: none; }

/* Sektionen inde i panelet: panelet giver ramme og titel; ét-kolonne layout */
.olb-bs-surprise.is-in-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-component);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.olb-bs-surprise.is-in-sheet .olb-bs-surprise__kicker,
.olb-bs-surprise.is-in-sheet .olb-bs-surprise__heading { display: none; }
.olb-bs-surprise.is-in-sheet .olb-bs-surprise__form { grid-template-columns: minmax(0, 1fr); }
.olb-bs-surprise.is-in-sheet .olb-bs-surprise__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.olb-bs-surprise.is-in-sheet .olb-bs-surprise__submit { inline-size: 100%; }

@media (min-width: 768px) {
  .olb-bs-sheet--surprise .olb-bs-sheet__panel { inline-size: min(32rem, 100%); }
}

@media (max-width: 767.98px) {
  .olb-bs-titlebar { align-items: flex-start; }
  .olb-bs-surprise-teaser { inline-size: 100%; justify-content: space-between; }
}
.olb-bs-surprise-teaser__note {
  color: var(--color-success);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}
.olb-bs-surprise-teaser__note:empty { display: none; }

/* WooCommerce' automatiske "Se kurv"-link ved knapper vises ikke i Bland Selv-modulet */
.olb-bs-page .olb-bs-surprise-teaser .added_to_cart,
.olb-bs-page .olb-bs-surprise .added_to_cart { display: none !important; }

/* ==========================================================
   POSEBAR v2 – miniature-stak, antal + vægt, pris, "røg i posen"-besked
   ========================================================== */
.olb-bs-bag { gap: var(--space-3); padding: var(--space-2); }

.olb-bs-bag__open {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2) 0 0;
  border-radius: var(--radius-control);
}
.olb-bs-bag__open:focus:not(:focus-visible) { outline: none; }

/* Overlappende miniaturer af de senest lagte slags */
.olb-bs-bag__stack { display: flex; align-items: center; padding-inline-start: var(--space-3); }
.olb-bs-bag__stack:empty { display: none; }
.olb-bs-bag__chip {
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: var(--button-height);
  block-size: var(--button-height);
  margin-inline-start: calc(-1 * var(--space-3));
  overflow: hidden;
  border: var(--border-width-strong) solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-surface-product);
}
.olb-bs-bag__chip img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.olb-bs-bag__chip--more {
  background: var(--color-surface-cool);
  color: var(--color-link);
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.olb-bs-bag__text { display: grid; justify-items: start; min-width: 0; }
.olb-bs-bag__summary { gap: var(--space-2); }
.olb-bs-bag__weight:not(:empty)::before { content: "·"; margin-inline-end: var(--space-2); color: var(--color-text-muted); }
.olb-bs-bag__price {
  margin-inline-start: var(--space-2);
  color: var(--color-text-primary);
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-price);
  white-space: nowrap;
}

/* "Amazon Sour røg i posen" – lille besked over baren */
.olb-bs-bag__toast {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-end: 0;
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-strong) solid var(--color-link);
  border-radius: var(--radius-pill);
  background: var(--color-surface-cool);
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.olb-bs-bag.has-toast .olb-bs-bag__toast { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .olb-bs-bag__toast { transform: translateY(var(--space-2)); transition: opacity var(--olb-motion-base) ease, transform var(--olb-motion-base) ease, visibility 0s linear var(--olb-motion-base); }
  .olb-bs-bag.has-toast .olb-bs-bag__toast { transform: none; transition: opacity var(--olb-motion-base) ease, transform var(--olb-motion-base) ease; }
  .olb-bs-bag__chip.is-new { animation: olb-bs-pop calc(var(--olb-motion-base) * 2) ease; }
  @keyframes olb-bs-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
}

@media (max-width: 767.98px) {
  .olb-bs-bag__hint { display: none; }
  .olb-bs-bag__chip:nth-child(n+4) { display: none; }
  .olb-bs-bag__toast { inset-inline: 0; text-align: center; }
}
@media (max-width: 479.98px) {
  .olb-bs-bag__text { display: none; }
  .olb-bs-bag__chip:nth-child(n+3):not(.olb-bs-bag__chip--more) { display: none; }
  .olb-bs-bag__count, .olb-bs-bag__price { white-space: nowrap; }
  .olb-bs-bag__price { margin-inline-start: 0; font-size: var(--font-size-body); }
  .olb-bs-bag__open { gap: var(--space-2); }
  .olb-bs-bag__submit { padding-inline: var(--space-3); white-space: nowrap; }
}

/* Varegrid: flere slags pr. række på store skærme (Bland Selv-specifik undtagelse) */
@container (min-width: 1000px) { .olb-bs-module .apb_products_items_container > ul.abp_assorted_row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (min-width: 1150px) { .olb-bs-module .apb_products_items_container > ul.abp_assorted_row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } }
/* Nyeste miniature øverst i stakken */
.olb-bs-bag__chip { position: relative; }
.olb-bs-bag__chip:nth-child(1) { z-index: 5; }
.olb-bs-bag__chip:nth-child(2) { z-index: 4; }
.olb-bs-bag__chip:nth-child(3) { z-index: 3; }
.olb-bs-bag__chip:nth-child(4) { z-index: 2; }
.olb-bs-bag__chip:nth-child(5) { z-index: 1; }

/* ==========================================================
   v0.7.8 – posen på højkant (desktop/tablet) + mindre "Kom i posen"-knapper
   ========================================================== */
@media (min-width: 768px) {
  .olb-bs-bag {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    inline-size: 15rem;
    padding: var(--space-3);
  }
  .olb-bs-bag__open {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: 0;
    text-align: start;
  }
  .olb-bs-bag__stack { padding-inline-start: var(--space-3); min-block-size: var(--button-height); }
  .olb-bs-bag__text { justify-items: start; }
  .olb-bs-bag__price {
    margin: 0;
    font-size: var(--font-size-price-lg);
  }
  .olb-bs-bag__submit { inline-size: 100%; justify-content: center; }
  .olb-bs-bag__toast { inset-inline: 0; text-align: center; white-space: normal; }
}

/* "Kom i posen" på varekortene: kompakt og altid inden for kortet */
.olb-bs-module .abp_button .add-product-to-assorted {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  min-block-size: 0;
  padding: var(--space-2) var(--space-2);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
}
.olb-bs-module .abp_button { min-width: 0; padding-block-start: var(--space-3); }

/* ==========================================================
   v0.8.0/0.8.1 – top ("hero-light") på Bland Selv-siden
   Én samlet flade: tekst + billede (Varegalleri-foto eller spredning af Sliktype-billederne)
   og under dem "Hvad er du til?" (billedfiltrene, flyttet hertil af JS) som primær navigation.
   ========================================================== */
.olb-bs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--gap-block);
  overflow: hidden;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.olb-bs-hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.olb-bs-hero__text {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
}
.olb-bs-hero__title { margin: 0; }
.olb-bs-hero__payoff {
  margin: 0;
  color: var(--color-link);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-ui);
}
.olb-bs-hero__lead {
  margin: 0;
  max-inline-size: 36rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* Billedfeltet: kant til kant i fladen (ingen løs boks) */
.olb-bs-hero__media {
  position: relative;
  order: -1;                       /* mobil: lav billedstribe øverst */
  margin: 0;
  block-size: 7.5rem;
  min-width: 0;
  overflow: hidden;
}
.olb-bs-hero__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;
}

/* Spredning af Sliktype-billederne: runde "skåle" i forskellige størrelser, let skæve */
.olb-bs-hero__media--scatter { background: var(--color-surface-cool); }
.olb-bs-hero__piece {
  position: absolute;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border-width-strong) solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.olb-bs-hero__piece img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  transform: scale(1.18);          /* skjuler billedets egen baggrundskant */
}
/* Positioner (procent af billedfeltet) – fast komposition, uafhængig af billedernes indhold */
.olb-bs-hero__piece:nth-child(1) { inline-size: 26%; inset-inline-start: 3%;  inset-block-start: 18%; rotate: -6deg; }
.olb-bs-hero__piece:nth-child(2) { inline-size: 19%; inset-inline-start: 26%; inset-block-start: 4%;  rotate: 8deg; }
.olb-bs-hero__piece:nth-child(3) { inline-size: 28%; inset-inline-start: 41%; inset-block-start: 30%; rotate: -3deg; }
.olb-bs-hero__piece:nth-child(4) { inline-size: 19%; inset-inline-start: 64%; inset-block-start: 6%;  rotate: 10deg; }
.olb-bs-hero__piece:nth-child(5) { inline-size: 20%; inset-inline-start: 22%; inset-block-start: 60%; rotate: 5deg; }
.olb-bs-hero__piece:nth-child(6) { inline-size: 24%; inset-inline-start: 71%; inset-block-start: 46%; rotate: -9deg; }
.olb-bs-hero__piece:nth-child(7) { inline-size: 16%; inset-inline-start: 87%; inset-block-start: 12%; rotate: 4deg; }

/* "Hvad er du til?" i toppen – uden egen ramme */
.olb-bs-hero__nav { min-width: 0; padding: 0 var(--space-4) var(--space-4); }
.olb-bs-hero__nav:empty { display: none; }
.olb-bs-hero .olb-filters--blandselv.olb-filters--inline {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* "Gider du ikke selv? Vi blander for dig →" – diskret, under brødteksten */
.olb-bs-hero__alt:empty { display: none; }
.olb-bs-hero__alt .olb-bs-surprise-teaser {
  inline-size: auto;
  justify-content: flex-start;
  gap: var(--gap-tight);
  margin-block-start: var(--space-1);
}
.olb-bs-hero__alt .olb-bs-surprise-teaser__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}
.olb-bs-hero__alt .olb-bs-surprise-teaser__cta {
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.olb-bs-hero__alt .olb-bs-surprise-teaser__cta:hover { text-decoration-thickness: 2px; }

@media (min-width: 768px) {
  .olb-bs-hero__intro {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    min-block-size: 13.75rem;      /* ca. 220 px */
  }
  .olb-bs-hero--no-media .olb-bs-hero__intro { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
  .olb-bs-hero__text { padding: var(--space-4) var(--space-4) var(--space-3); }
  .olb-bs-hero__media { order: 0; block-size: auto; min-block-size: 13.75rem; }
  /* Fotoet styrer ikke højden – det fylder feltet ved siden af teksten */
  .olb-bs-hero__media--photo .olb-bs-hero__img { position: absolute; inset: 0; }
}

@media (max-width: 767.98px) {
  .olb-bs-hero { margin-block-end: var(--space-4); }
  .olb-bs-hero__text { gap: var(--space-1); padding: var(--space-3); }
  .olb-bs-hero__nav { padding: 0 0 var(--space-3); }
  .olb-bs-hero__nav .olb-filters__list--visual { padding-inline: var(--space-3); margin: 0; scroll-padding-inline: var(--space-3); }
  /* Stribe: kun 5 skåle, større i forhold til højden */
  .olb-bs-hero__piece:nth-child(n + 6) { display: none; }
  .olb-bs-hero__piece:nth-child(1) { inline-size: 26%; inset-inline-start: 2%;  inset-block-start: 4%; }
  .olb-bs-hero__piece:nth-child(2) { inline-size: 22%; inset-inline-start: 24%; inset-block-start: -18%; }
  .olb-bs-hero__piece:nth-child(3) { inline-size: 26%; inset-inline-start: 42%; inset-block-start: 10%; }
  .olb-bs-hero__piece:nth-child(4) { inline-size: 22%; inset-inline-start: 62%; inset-block-start: -14%; }
  .olb-bs-hero__piece:nth-child(5) { inline-size: 24%; inset-inline-start: 78%; inset-block-start: 20%; }
}

/* Filterfeltet under toppen: kun søgning + smag/ønsker → ingen ramme, søgning mindre dominerende */
.olb-bs-module .olb-bs-filter .olb-filters--blandselv.olb-filters--inline {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
@media (min-width: 768px) {
  .olb-bs-module:has(.olb-filters--hero) .olb-bs-filter {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    grid-template-areas: "filters top" "meta meta";
    align-items: start;
    column-gap: var(--gap-block);
  }
  .olb-bs-module:has(.olb-filters--hero) .olb-bs-filter > .olb-bs-filter__top { grid-area: top; }
  .olb-bs-module:has(.olb-filters--hero) .olb-bs-filter > .olb-filters { grid-area: filters; }
  .olb-bs-module:has(.olb-filters--hero) .olb-bs-filter > .olb-bs-filter__meta { grid-area: meta; }
  .olb-bs-module:has(.olb-filters--hero) .olb-bs-filter .olb-filter-search { flex: 1 1 100%; min-width: 0; }
}

/* ==========================================================
   v0.8.2 – toppen pudset af
   - Spredningen: ingen farvet boks, fast proportion (ingen afskårne skåle), rolig klynge,
     tynd kant som fliserne. Står lodret centreret ved teksten.
   - Mere luft i fladen; tekst og billede på linje med fliserne.
   - "Hvad er du til?": fliserne fylder hele bredden (lige store), ikke kun venstre 2/3.
   ========================================================== */
.olb-bs-hero__intro { gap: var(--space-4); padding: var(--space-4) var(--space-5, var(--space-4)); }
.olb-bs-hero__text { padding: 0; }
.olb-bs-hero__nav { padding: 0 var(--space-5, var(--space-4)) var(--space-5, var(--space-4)); }
.olb-bs-hero__nav .olb-filters__heading { margin-block-end: var(--space-1); }

/* Foto (Varegalleri): afrundet felt i fladen, samme højde som teksten */
.olb-bs-hero__media--photo { border-radius: var(--radius-card); }

/* Spredning */
.olb-bs-hero__media--scatter {
  align-self: center;
  block-size: auto;
  min-block-size: 0;
  aspect-ratio: 2.2;
  overflow: visible;
  background: none;
}
.olb-bs-hero__piece {
  border: var(--border-card);
  background: var(--color-surface-product);
}
.olb-bs-hero__piece img { transform: scale(1.12); }
.olb-bs-hero__piece:nth-child(1) { inline-size: 29%; inset-inline-start: 1%;  inset-block-start: 20%; rotate: -6deg; }
.olb-bs-hero__piece:nth-child(2) { inline-size: 21%; inset-inline-start: 25%; inset-block-start: 0;   rotate: 7deg; }
.olb-bs-hero__piece:nth-child(3) { inline-size: 32%; inset-inline-start: 38%; inset-block-start: 28%; rotate: -3deg; }
.olb-bs-hero__piece:nth-child(4) { inline-size: 21%; inset-inline-start: 63%; inset-block-start: 1%;  rotate: 9deg; }
.olb-bs-hero__piece:nth-child(5) { inline-size: 19%; inset-inline-start: 21%; inset-block-start: 57%; rotate: 5deg; }
.olb-bs-hero__piece:nth-child(6) { inline-size: 24%; inset-inline-start: 72%; inset-block-start: 45%; rotate: -8deg; }
.olb-bs-hero__piece:nth-child(7) { inline-size: 15%; inset-inline-start: 84%; inset-block-start: 6%;  rotate: 4deg; }

@media (min-width: 768px) {
  .olb-bs-hero__intro { align-items: center; min-block-size: 0; gap: var(--gap-block); }
  /* Klyngen holder en fast, moderat størrelse (ca. 200 px høj), så toppen ikke vokser */
  .olb-bs-hero__media--scatter { justify-self: end; inline-size: min(100%, 28rem); }
  .olb-bs-hero__media--photo { align-self: stretch; min-block-size: 12.5rem; }
  /* Fliserne fordeles over hele bredden */
  .olb-bs-hero .olb-filters__list--visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }
  .olb-bs-hero .olb-filters__list--visual > .olb-filters__item { min-inline-size: 0; }
}

@media (max-width: 767.98px) {
  .olb-bs-hero__intro { gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3); }
  .olb-bs-hero__nav { padding: 0 0 var(--space-3); }
  .olb-bs-hero__media { order: -1; }
  .olb-bs-hero__media--photo { block-size: 7.5rem; }
  .olb-bs-hero__media--scatter { aspect-ratio: 2.8; }
  .olb-bs-hero__piece:nth-child(1) { inline-size: 24%; inset-inline-start: 2%;  inset-block-start: 10%; }
  .olb-bs-hero__piece:nth-child(2) { inline-size: 20%; inset-inline-start: 24%; inset-block-start: 0; }
  .olb-bs-hero__piece:nth-child(3) { inline-size: 26%; inset-inline-start: 40%; inset-block-start: 20%; }
  .olb-bs-hero__piece:nth-child(4) { inline-size: 20%; inset-inline-start: 62%; inset-block-start: 2%; }
  .olb-bs-hero__piece:nth-child(5) { inline-size: 22%; inset-inline-start: 77%; inset-block-start: 18%; }
}

/* ==========================================================
   v0.8.3 – strammere top (mere sortiment over folden)
   Mål: toppen ca. 300 px på desktop (før ca. 450 px).
   - Mindre padding og mellemrum; slikklyngen ca. 20rem bred (ca. 145 px høj).
   - "Hvad er du til?" står til venstre for fliserne (som "Vælg din smag"), ikke over dem.
   - Kompakte fliser: mindre billede (3.75rem) og tættere tekst.
   ========================================================== */
.olb-bs-hero { margin-block-end: var(--space-4); }
.olb-bs-hero__text { gap: var(--space-1); }
.olb-bs-hero__payoff { margin-block-start: calc(-1 * var(--gap-hairline)); }
.olb-bs-hero__alt .olb-bs-surprise-teaser { margin-block-start: 0; }

.olb-bs-hero .olb-filters__list--visual > .olb-filters__item { min-inline-size: 6.5rem; }
.olb-bs-hero button.olb-filters__option--visual { gap: var(--gap-tight); padding: var(--space-1) var(--space-1) var(--space-2); }
.olb-bs-hero button.olb-filters__option--visual[aria-pressed="true"] { padding: calc(var(--space-1) - 1px) calc(var(--space-1) - 1px) calc(var(--space-2) - 1px); }
.olb-bs-hero .olb-filters__media { block-size: 3.75rem; }
.olb-bs-hero .olb-filters__check { inline-size: 1.125rem; block-size: 1.125rem; }

@media (min-width: 768px) {
  .olb-bs-hero__intro {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gap-block);
    padding: var(--space-4) var(--space-5, var(--space-4)) var(--space-3);
  }
  .olb-bs-hero__media--scatter { inline-size: 20rem; }
  .olb-bs-hero__media--photo { inline-size: 20rem; min-block-size: 9rem; }
  .olb-bs-hero__nav { padding: 0 var(--space-5, var(--space-4)) var(--space-4); }
  /* Overskrift til venstre for fliserne – samme kolonne som "Vælg din smag" */
  .olb-bs-hero .olb-filters--inline .olb-filters__group--visual {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
  }
  .olb-bs-hero .olb-filters__group--visual .olb-filters__heading { margin: 0; font-size: var(--font-size-small); }
  .olb-bs-hero .olb-filters__list--visual { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-2); }
}

@media (max-width: 767.98px) {
  .olb-bs-hero__intro { gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); }
  .olb-bs-hero__media--scatter { aspect-ratio: 3.4; }
  .olb-bs-hero__piece:nth-child(1) { inline-size: 22%; inset-inline-start: 3%;  inset-block-start: 12%; }
  .olb-bs-hero__piece:nth-child(2) { inline-size: 18%; inset-inline-start: 23%; inset-block-start: 0; }
  .olb-bs-hero__piece:nth-child(3) { inline-size: 24%; inset-inline-start: 39%; inset-block-start: 16%; }
  .olb-bs-hero__piece:nth-child(4) { inline-size: 18%; inset-inline-start: 62%; inset-block-start: 2%; }
  .olb-bs-hero__piece:nth-child(5) { inline-size: 20%; inset-inline-start: 78%; inset-block-start: 20%; }
  .olb-bs-hero__media--photo { block-size: 6rem; }
  .olb-bs-hero__lead { font-size: var(--font-size-small); line-height: var(--line-height-ui); }
  .olb-bs-hero .olb-filters__list--visual > .olb-filters__item { min-inline-size: 6rem; }
  .olb-bs-hero .olb-filters__media { block-size: 3.5rem; }
}

/* Smag/ønsker under toppen: tættere rækker */
.olb-bs-module:has(.olb-filters--hero) .olb-bs-filter { gap: var(--space-2); margin-block-end: var(--space-4); }
.olb-bs-module:has(.olb-filters--hero) .olb-bs-filter .olb-filters--inline { gap: var(--space-2); }

/* ==========================================================
   v0.8.4 – baggrundsfoto i toppen (første billede i Varegalleri), 60 % gennemsigtigt
   Ligger bag tekst, slikklynge og fliser; fladens hvide baggrund skinner igennem.
   ========================================================== */
.olb-bs-hero { position: relative; isolation: isolate; }
.olb-bs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* .olb-bs-hero foran: slår WooCommerce' ".woocommerce img { height: auto }" */
.olb-bs-hero .olb-bs-hero__bg-img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
}
/* Læsbarhed: blød lys glød bag teksten (fladens egen farve), så fotoet aldrig konkurrerer med teksten */
.olb-bs-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-surface) 75%, transparent) 40%,
    transparent 70%);
}
@media (max-width: 767.98px) {
  .olb-bs-hero__bg::after {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-surface) 80%, transparent) 28%,
      color-mix(in srgb, var(--color-surface) 80%, transparent) 70%,
      transparent 100%);
  }
}

/* ==========================================================
   v0.8.5 – mobil: posebaren går ikke længere ud over skærmkanten
   - DS-knappen (.olb-button) har en minimumsbredde; i den smalle bar må den krympe.
   - Indholdet i baren må krympe (miniaturer/pris før knappen); knapteksten afkortes aldrig
     til under læsbar – der er plads ned til ca. 320 px skærmbredde.
   - Siden må ikke kunne rulles vandret (et element bredere end skærmen gjorde
     layout-viewporten bredere, så den faste bar blev for bred). overflow-x: clip
     klipper uden at lave en scroll-container (sticky header påvirkes ikke).
   ========================================================== */
@media (max-width: 767.98px) {
  html:has(> body.olb-bs-page),
  body.olb-bs-page { overflow-x: clip; }
  .olb-bs-bag {
    inset-inline: var(--space-3);
    inline-size: auto;
    max-inline-size: calc(100vw - 2 * var(--space-3));
    gap: var(--space-2);
  }
  .olb-bs-bag__open { flex: 1 1 auto; min-width: 0; }
  .olb-bs-bag__stack { min-width: 0; padding-inline-start: var(--space-2); }
  .olb-bs-bag .olb-bs-bag__submit {
    flex: 0 1 auto;
    min-inline-size: 0 !important;
    max-inline-size: 100%;
    padding-inline: var(--space-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==========================================================
   v0.8.6 – mobil: alle sliktyper synlige på én gang (ingen sidelæns rulning)
   "Hvad er du til?" bliver et kompakt gitter med 4 pr. række (7 typer = 2 rækker).
   ========================================================== */
@media (max-width: 767.98px) {
  .olb-bs-hero__nav { padding: 0 var(--space-3) var(--space-3); }
  .olb-bs-hero .olb-filters--inline .olb-filters__list--visual,
  .olb-bs-hero__nav .olb-filters__list--visual {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .olb-bs-hero .olb-filters__list--visual > .olb-filters__item { min-inline-size: 0; }
  .olb-bs-hero button.olb-filters__option--visual { padding: var(--space-1) var(--gap-tight) var(--space-1); }
  .olb-bs-hero button.olb-filters__option--visual[aria-pressed="true"] { padding: calc(var(--space-1) - 1px) calc(var(--gap-tight) - 1px) calc(var(--space-1) - 1px); }
  .olb-bs-hero .olb-filters__media { block-size: 2.75rem; }
  .olb-bs-hero .olb-filters__option--visual .olb-filters__caption { padding-inline: 0; }
  .olb-bs-hero .olb-filters__option--visual .olb-filters__label { font-size: var(--font-size-meta); }
  .olb-bs-hero .olb-filters__option--visual .olb-filters__count { font-size: var(--font-size-meta); }
  .olb-bs-hero .olb-filters__check { inline-size: 1rem; block-size: 1rem; }
}
@media (max-width: 767.98px) {
  .olb-bs-hero button.olb-filters__option--visual { min-width: 0; overflow: hidden; }
  .olb-bs-hero .olb-filters__option--visual .olb-filters__caption { max-inline-size: 100%; }
  .olb-bs-hero .olb-filters__option--visual .olb-filters__label {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;   /* kun på meget smalle skærme (under ca. 360 px) */
  }
}
@media (max-width: 359.98px) {
  .olb-bs-hero .olb-filters--inline .olb-filters__list--visual,
  .olb-bs-hero__nav .olb-filters__list--visual { gap: var(--space-1); }
}
/* Fordeling: 12-kolonne gitter – 4 pr. række; når sidste række har færre, bliver de bredere
   (7 typer → 4 + 3, så lange navne som "Tyggegummi" får plads). */
@media (max-width: 767.98px) {
  .olb-bs-hero .olb-filters--inline .olb-filters__list--visual,
  .olb-bs-hero__nav .olb-filters__list--visual { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-1); }
  .olb-bs-hero .olb-filters__list--visual > .olb-filters__item { grid-column: span 3; }
  /* 7: sidste 3 bredere · 6: 3 + 3 · 5: 3 + 2 */
  .olb-bs-hero .olb-filters__list--visual:has(> :nth-child(7):last-child) > :nth-child(n + 5) { grid-column: span 4; }
  .olb-bs-hero .olb-filters__list--visual:has(> :nth-child(6):last-child) > * { grid-column: span 4; }
  .olb-bs-hero .olb-filters__list--visual:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { grid-column: span 4; }
  .olb-bs-hero .olb-filters__list--visual:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 6; }
  .olb-bs-hero button.olb-filters__option--visual { padding-inline: 0; }
  .olb-bs-hero button.olb-filters__option--visual[aria-pressed="true"] { padding-inline: 0; }
}

/* ==========================================================
   v0.4 (runtime 0.13.25) – tydeligere afslutning af posen
   Kunder troede, at "Kom posen i kurven" skulle trykkes efter hver slags.
   - Knappen hedder "Færdig – læg i kurven" (mobilbar: kort udgave "Færdig – i kurv").
   - Forklaring lige over knappen i posekortet (fra 768) og i "Se posen".
   - Første besked ("… røg i posen. Vælg flere slags …") må fylde to linjer.
   ========================================================== */
.olb-bs-bag__submit-short { display: none; }

.olb-bs-bag__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-ui);
  text-align: start;
}
.olb-bs-sheet__foot > .olb-bs-bag__note { flex: 1 0 100%; }

@media (max-width: 767.98px) {
  /* Bundbjælken har ikke plads til forklaringen – den står i "Se posen" og i første besked. */
  .olb-bs-bag > .olb-bs-bag__note { display: none; }
  .olb-bs-bag .olb-bs-bag__submit-long { display: none; }
  .olb-bs-bag .olb-bs-bag__submit-short { display: inline; }
}

.olb-bs-bag__toast.is-long {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  border-radius: var(--radius-card);
  text-align: center;
}