@charset "UTF-8";
/*
 * BLACK NOVEMBER – LANDINGSSIDE
 * Alle regler er scopet til .bn-root / html.bn-page, så resten af shoppen
 * ikke påvirkes. html.bn-page sættes kun af black-november.js på selve
 * kampagnesiden.
 *
 * Designprincipper: flade farvefelter (ingen gradienter, skygger eller
 * tynde streger), én varm accent til handling/priser, få skriftstørrelser.
 */

/* ---------- Kun på kampagnesiden: skjul temaets indholdsramme ---------- */
html.bn-page .bn-hidden { display: none !important; }
html.bn-page .site-slider { display: none !important; }

/* ---------- Header + menulinje: sorte på kampagnesiden (temaet er ellers uændret) ---------- */
/* Logobjælken er brun i temaet. På denne side gøres den sort, så den ikke
   støder direkte op mod den sorte side. */
html.bn-page .site-header,
html.bn-page .site-navigation {
  position: relative;
  border-bottom: 0;
}
html.bn-page .site-header {
  background: #2B110B;
  border-color: #2B110B;
}
html.bn-page .site-navigation,
html.bn-page .site-navigation.fixed {
  background: #2B110B;
  border-color: #2B110B;
  box-shadow: none; /* taste-skill-ignore: fjerner temaets egen skygge */
}

/* Hvert menupunkt får sin egen flade, så menulinjen er til at få øje på.
   Nøddesymbolet sættes via temaets egne klasser .category--<id>. Skifter et
   id i shoppen, falder punktet pænt tilbage til en flade uden symbol. */
html.bn-page .site-navigation .category--list { gap: 8px; }
html.bn-page .site-navigation .category--item { margin: 4px 3px; }
html.bn-page .site-navigation .category--title a,
html.bn-page .site-navigation .category--title a:hover,
html.bn-page .site-navigation .category--title a:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: #EDA63B;
  color: #1A0C07;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease;
}
html.bn-page .site-navigation .category--title a span {
  border-bottom: 0 !important;
  color: inherit;
}
/* Nøddesymbolet */
html.bn-page .site-navigation .category--title a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-image: var(--bn-nut-dark, var(--bn-nut, none));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Hover og det aktive punkt vendes om: mørk flade med lyst symbol */
html.bn-page .site-navigation .category--title a:hover,
html.bn-page .site-navigation .category--item.active .category--title a {
  background: #0A0A0A;
  color: #FFFFFF;
}
html.bn-page .site-navigation .category--title a:hover::before,
html.bn-page .site-navigation .category--item.active .category--title a::before {
  background-image: var(--bn-nut, none);
}

/* Symbol pr. kategori. Lys variant (accentfarve) og mørk variant til hover. */
html.bn-page .site-navigation .category--3,
html.bn-page .site-navigation .category--9 {
  --bn-nut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23EDA63B'%3E%3Cpath d='M33 5c2 1 2 3 1 5-4 4-6 9-6 14 0 5 2 9 5 13 2 2 1 4-2 5-10 2-19-6-19-18C12 11 23 2 33 5z'/%3E%3C/svg%3E");
  --bn-nut-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%231A0C07'%3E%3Cpath d='M33 5c2 1 2 3 1 5-4 4-6 9-6 14 0 5 2 9 5 13 2 2 1 4-2 5-10 2-19-6-19-18C12 11 23 2 33 5z'/%3E%3C/svg%3E");
}
html.bn-page .site-navigation .category--4,
html.bn-page .site-navigation .category--6 {
  --bn-nut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23EDA63B'%3E%3Cpath d='M24 3c7 7 11 14 11 20 0 10-5 18-11 18S13 33 13 23c0-6 4-13 11-20z'/%3E%3C/svg%3E");
  --bn-nut-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%231A0C07'%3E%3Cpath d='M24 3c7 7 11 14 11 20 0 10-5 18-11 18S13 33 13 23c0-6 4-13 11-20z'/%3E%3C/svg%3E");
}
html.bn-page .site-navigation .category--10,
html.bn-page .site-navigation .category--8,
html.bn-page .site-navigation .category--13 {
  --bn-nut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23EDA63B'%3E%3Cpath d='M24 45c-8 0-14-6-14-14s6-14 14-14 14 6 14 14-6 14-14 14z'/%3E%3Cpath d='M13 16c3-4 6-6 11-6s8 2 11 6c-3 2-7 3-11 3s-8-1-11-3z'/%3E%3C/svg%3E");
  --bn-nut-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%231A0C07'%3E%3Cpath d='M24 45c-8 0-14-6-14-14s6-14 14-14 14 6 14 14-6 14-14 14z'/%3E%3Cpath d='M13 16c3-4 6-6 11-6s8 2 11 6c-3 2-7 3-11 3s-8-1-11-3z'/%3E%3C/svg%3E");
}
html.bn-page .site-navigation .category--12,
html.bn-page .site-navigation .category--7 {
  --bn-nut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23EDA63B'%3E%3Cpath d='M24 6c10 0 18 8 18 18s-8 18-18 18S6 34 6 24 14 6 24 6z'/%3E%3Cpath d='M23 7h2v34h-2z' opacity='.45'/%3E%3C/svg%3E");
  --bn-nut-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%231A0C07'%3E%3Cpath d='M24 6c10 0 18 8 18 18s-8 18-18 18S6 34 6 24 14 6 24 6z'/%3E%3Cpath d='M23 7h2v34h-2z' opacity='.45'/%3E%3C/svg%3E");
}
html.bn-page .site-navigation .category--5 {
  --bn-nut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23EDA63B'%3E%3Ccircle cx='16' cy='18' r='9'/%3E%3Ccircle cx='32' cy='15' r='7'/%3E%3Ccircle cx='25' cy='33' r='10'/%3E%3C/svg%3E");
  --bn-nut-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%231A0C07'%3E%3Ccircle cx='16' cy='18' r='9'/%3E%3Ccircle cx='32' cy='15' r='7'/%3E%3Ccircle cx='25' cy='33' r='10'/%3E%3C/svg%3E");
}
html.bn-page .site-navigation .navbar-header .search-module svg path,
html.bn-page .site-navigation .navbar-header .search-module svg g {
  fill: #F3F1EE;
}
html.bn-page .site-navigation .shopping-cart-container svg path {
  fill: #EDA63B;
}
html.bn-page .site-navigation .shopping-cart-number,
html.bn-page .site-navigation .shopping-cart-number span {
  color: #F3F1EE;
}
html.bn-page .site-navigation .navbar-header .burg,
html.bn-page .site-navigation .navbar-header .burg::before,
html.bn-page .site-navigation .navbar-header .burg::after {
  background-color: #F3F1EE;
}


/* ---------- Footeren: sort flade, så siden lukkes i samme toneleje ---------- */
html.bn-page .site-footer {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #D9D2C9;
}
html.bn-page .site-footer h4,
html.bn-page .site-footer .h4 {
  color: #F3F1EE;
}
html.bn-page .site-footer,
html.bn-page .site-footer li,
html.bn-page .site-footer span,
html.bn-page .site-footer p {
  color: #D9D2C9;
}
html.bn-page .site-footer a,
html.bn-page .site-footer .see-more-button {
  color: #D9D2C9;
}
html.bn-page .site-footer a:hover,
html.bn-page .site-footer a:focus,
html.bn-page .site-footer .see-more-button:hover {
  color: #EDA63B;
}
/* Ikonerne har deres egen farve i temaet, derfor også i og .fa */
html.bn-page .site-footer .social-link,
html.bn-page .site-footer .social-link i,
html.bn-page .site-footer .social-link .fa { color: #F3F1EE; }
html.bn-page .site-footer .social-link:hover,
html.bn-page .site-footer .social-link:hover i,
html.bn-page .site-footer .social-link:hover .fa { color: #EDA63B; }
/* Nyhedsbrevsfeltet styres af Klaviyo og har mørk tekst. Det får derfor sin
   egen lyse flade, så det stadig kan læses på den sorte footer. */
html.bn-page .site-footer .w-newsletter-signup {
  padding: 18px 20px;
  border-radius: 14px;
  background: #F3EFE7;
}
html.bn-page .site-footer .w-newsletter-signup h4,
html.bn-page .site-footer .w-newsletter-signup .h4,
html.bn-page .site-footer .w-newsletter-signup p,
html.bn-page .site-footer .w-newsletter-signup span {
  color: #2B110B;
}

/* ---------- Tokens ---------- */
.bn-root {
  --bn-dark: #2B110B;         /* husets mørke brune: hero og menu (Black November-toppen) */
  --bn-bg: #4A2819;           /* sidens bund under toppen: en lysere, varm brun */
  --bn-brand: #33190F;        /* flader ovenpå: kort, bånd, håndværk */
  --bn-brand-2: #5C3523;      /* ét tonetrin lysere: hover/sekundære flader */
  --bn-accent: #EDA63B;
  --bn-accent-2: #F4BC63;     /* hover på accent */
  --bn-on-accent: #1A0C07;
  --bn-text: #F3EFE7;         /* husets cremefarve: tekst, lyse mærkater og håndværksfeltet */
  --bn-text-2: #D9D2C9;       /* brødtekst (læsbar, ikke grå) */
  --bn-muted: #A89C90;        /* kun førpriser og noter */
  --bn-radius: 6px;
  --bn-ease: cubic-bezier(.2, .7, .2, 1);
  --bn-font: "Lato", "Helvetica Neue", Arial, sans-serif;

  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bn-bg);
  color: var(--bn-text);
  font-family: var(--bn-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hvis siden ikke kan flyttes ud af containeren: bryd ud til fuld bredde */
.bn-root.bn-root--inline {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
html.bn-page body { overflow-x: hidden; }
@supports (overflow: clip) {
  html.bn-page body { overflow-x: clip; }
}

/* ---------- Lokal reset (overstyrer temaets globale h1/a/p/img/ul) ---------- */
.bn-root *, .bn-root *::before, .bn-root *::after { box-sizing: border-box; }
.bn-root h1, .bn-root h2, .bn-root h3, .bn-root p, .bn-root ul, .bn-root ol,
.bn-root li, .bn-root figure, .bn-root s {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--bn-font);
  text-transform: none;
  letter-spacing: normal;
}
.bn-root ul, .bn-root ol { list-style: none; }
.bn-root img { display: block; max-width: 100%; height: auto; border: 0; }
.bn-root a { color: inherit; text-decoration: none; }
.bn-root a:hover, .bn-root a:focus { color: inherit; text-decoration: none; }
.bn-root :focus { outline: none; }
.bn-root :focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 3px; }
.bn-root .bn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: skjult tekst til skærmlæsere */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bn-root .bn-icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Layout ---------- */
.bn-root .bn-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.bn-root .bn-h2 {
  color: var(--bn-text);
  font-size: clamp(34px, 9vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.bn-root .bn-sub {
  color: var(--bn-text-2);
  font-size: 18px;
  line-height: 1.5;
  margin-top: 14px;
  max-width: 32em;
}
.bn-root .bn-head { margin-bottom: 32px; }

/* ---------- Knapper: flade, runde, én fyldfarve ---------- */
.bn-root .bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--bn-font);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--bn-ease), background-color .2s, color .2s;
}
.bn-root .bn-btn:active { transform: scale(.97); }
.bn-root .bn-btn .bn-icon { transition: transform .25s var(--bn-ease); }
.bn-root .bn-btn--primary,
.bn-root .bn-btn--primary:focus {
  background: var(--bn-accent);
  color: var(--bn-on-accent);
}
.bn-root .bn-btn--primary:hover { background: var(--bn-accent-2); color: var(--bn-on-accent); }
.bn-root .bn-btn--primary:hover .bn-icon--down { transform: translateY(3px); }
.bn-root .bn-btn--primary:hover .bn-icon--up { transform: translateY(-3px); }
.bn-root .bn-btn--quiet,
.bn-root .bn-btn--quiet:focus {
  background: var(--bn-brand-2);
  color: var(--bn-text);
}
.bn-root .bn-btn--quiet:hover { background: #6A3E2A; color: var(--bn-text); }
.bn-root .bn-btn--quiet:hover .bn-icon { transform: translateX(3px); }

/* ---------- Hero (altid synlig – ingen scroll-animation) ---------- */
.bn-root .bn-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 40px;
  background: var(--bn-dark);
}
.bn-root .bn-hero__title {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-size: clamp(52px, 16.5vw, 200px);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--bn-text);
}
.bn-root .bn-hero__line { display: block; max-width: 100%; white-space: nowrap; }
.bn-root .bn-hero__line--bottom { color: var(--bn-accent); }
.bn-root .bn-hero__date {
  margin-top: 18px;
  color: var(--bn-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.bn-root .bn-hero__lead {
  margin-top: 22px;
  max-width: 30em;
  color: var(--bn-text-2);
  font-size: 18px;
  line-height: 1.5;
}
.bn-root .bn-hero__actions { margin-top: 28px; }

/* Fakta: et fladt brandfelt i fuld bredde under hero'en */
.bn-root .bn-facts { background: var(--bn-brand); padding: 26px 0; }
.bn-root .bn-facts__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.bn-root .bn-facts__item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bn-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.bn-root .bn-facts__item::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--bn-accent);
}



/* ---------- Lysindfald ---------- */
/* Svagt lys, som faldt det ind gennem et vindue. Det er bevidst bygget med
   bløde overgange (ellers kan lys ikke falde af), og lagene ligger bag
   indholdet uden at kunne klikkes. taste-skill-ignore: ønsket af kunden. */
.bn-root .bn-hero::before,
.bn-root .bn-products::before,
.bn-root .bn-craft::before,
.bn-root .bn-slider::before,
.bn-root .bn-outro::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* Hero: to skrå stråler fra øverste højre hjørne + en blød lyspøl.
   Lyset tones ud mod toppen, så der ikke opstår en kant mod menulinjen. */
.bn-root .bn-hero::before {
  inset: 0 -5% -10% -5%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 20%, #000 62%); /* taste-skill-ignore: blød overgang til menulinjen */
  mask-image: linear-gradient(to bottom, transparent 0, transparent 20%, #000 62%); /* taste-skill-ignore: blød overgang til menulinjen */
  background:
    linear-gradient(104deg, transparent 40%, rgba(247, 214, 150, .10) 46%, rgba(247, 214, 150, .10) 53%, transparent 59%), /* taste-skill-ignore: lysindfald, ønsket af kunden */
    linear-gradient(104deg, transparent 62%, rgba(247, 214, 150, .06) 66%, rgba(247, 214, 150, .06) 70%, transparent 75%), /* taste-skill-ignore: lysindfald, ønsket af kunden */
    radial-gradient(55% 60% at 80% -5%, rgba(237, 166, 59, .16), transparent 72%); /* taste-skill-ignore: lysindfald, ønsket af kunden */
}
/* Produkter: en rolig pøl i venstre side, så fladen ikke er helt plan */
.bn-root .bn-products::before {
  background: radial-gradient(45% 40% at 2% 12%, rgba(237, 166, 59, .09), transparent 70%); /* taste-skill-ignore: lysindfald, ønsket af kunden */
}
/* Håndværk: lyset kommer fra højre, modsat produkterne */
.bn-root .bn-craft::before {
  background:
    linear-gradient(-100deg, transparent 44%, rgba(247, 214, 150, .07) 49%, rgba(247, 214, 150, .07) 55%, transparent 61%), /* taste-skill-ignore: lysindfald, ønsket af kunden */
    radial-gradient(50% 55% at 96% 0%, rgba(237, 166, 59, .12), transparent 72%); /* taste-skill-ignore: lysindfald, ønsket af kunden */
}
.bn-root .bn-slider::before {
  background: radial-gradient(50% 45% at 85% 100%, rgba(237, 166, 59, .08), transparent 70%); /* taste-skill-ignore: lysindfald, ønsket af kunden */
}
/* Outro: lyset samler sig bag knapperne */
.bn-root .bn-outro::before {
  background: radial-gradient(45% 55% at 50% 110%, rgba(237, 166, 59, .14), transparent 70%); /* taste-skill-ignore: lysindfald, ønsket af kunden */
}

/* ---------- Baggrundslag: nødder der daler langsomt ---------- */
.bn-root .bn-fall {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Elementet er lige så højt som sektionen, så faldet altid passer til den
   (uanset vinduets højde). Selve nødden tegnes i toppen. */
.bn-root .bn-fall__item {
  position: absolute;
  top: 0;
  left: var(--bn-x);
  width: var(--bn-size);
  height: 100%;
  opacity: var(--bn-o);
  will-change: transform;
  animation: bn-fall var(--bn-dur) linear var(--bn-delay) infinite;
}
.bn-root .bn-fall__nut {
  display: block;
  width: var(--bn-size);
  height: var(--bn-size);
  fill: var(--bn-accent);
}
@keyframes bn-fall {
  from { transform: translate3d(0, -100%, 0) rotate(0deg); }
  to   { transform: translate3d(0, 100%, 0) rotate(var(--bn-rot)); }
}
/* Indholdet ligger over laget */
.bn-root .bn-hero__inner,
.bn-root .bn-outro__inner,
.bn-root .bn-products > .bn-wrap,
.bn-root .bn-craft > .bn-wrap,
.bn-root .bn-slider > .bn-wrap,
.bn-root .bn-slider__track { position: relative; z-index: 1; }

/* ---------- Bånd (rullende tekst) ---------- */
.bn-root .bn-ticker {
  overflow: hidden;
  background: var(--bn-accent);
  color: var(--bn-on-accent);
  padding: 12px 0;
}
.bn-root .bn-ticker__track {
  display: flex;
  width: max-content;
  animation: bn-marquee 42s linear infinite;
}
.bn-root .bn-ticker__group { display: flex; align-items: center; flex: none; }
.bn-root .bn-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.bn-root .bn-ticker__item::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
@keyframes bn-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Produkter ---------- */
.bn-root .bn-products { position: relative; overflow: hidden; padding: 64px 0 80px; scroll-margin-top: 16px; }
.bn-root .bn-products:focus { outline: none; }

.bn-root .bn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 28px 12px;
}
/* Kortet har ingen ramme: billedet er flisen, teksten ligger direkte på siden */
.bn-root .bn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bn-root .bn-card__visual {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bn-brand);
}
.bn-root .bn-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.bn-root .bn-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--bn-ease);
}
.bn-root .bn-card:hover .bn-card__img { transform: scale(1.05); }
.bn-root .bn-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--bn-accent);
  color: var(--bn-on-accent);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  transform-origin: left center;
  animation: bn-badge 3.6s var(--bn-ease) infinite;
}
/* En lille vejrtrækning, så emblemet fanger øjet uden at larme */
@keyframes bn-badge {
  0%, 62%, 100% { transform: scale(1) rotate(0deg); }
  72%           { transform: scale(1.07) rotate(-2.5deg); }
  84%           { transform: scale(1.02) rotate(1deg); }
}
/* Rund handlingsknap i billedets hjørne; teksten er kun til skærmlæsere */
.bn-root .bn-btn--card,
.bn-root .bn-btn--card:focus {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  gap: 0;
  font-size: 0;
  background: var(--bn-text);
  color: var(--bn-on-accent);
}
.bn-root .bn-btn--card span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bn-root .bn-btn--card .bn-icon { width: 20px; height: 20px; }
.bn-root .bn-btn--card:hover,
.bn-root .bn-card:hover .bn-btn--card {
  background: var(--bn-accent);
  color: var(--bn-on-accent);
}
.bn-root .bn-card:hover .bn-btn--card .bn-icon { transform: translateX(2px); }

/* Pakkestørrelsen vises som mærkat på billedet, så den ikke kan overses */
.bn-root .bn-card__size {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bn-text);
  color: var(--bn-on-accent);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
}
.bn-root .bn-card--featured .bn-card__size { font-size: 24px; padding: 14px 22px; top: 16px; right: 16px; }

.bn-root .bn-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 2px 0;
}
.bn-root .bn-card__title {
  color: var(--bn-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.bn-root .bn-card__link, .bn-root .bn-card__link:hover, .bn-root .bn-card__link:focus { color: var(--bn-text); }
/* Hele kortet er klikbart via titel-linket */
.bn-root .bn-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Priserne ligger over klikfladen, så teksten kan markeres og læses af skærmlæsere */
.bn-root .bn-card__prices { position: relative; z-index: 1; }
.bn-root .bn-card__weight {
  margin-top: 2px;
  color: var(--bn-text-2);
  font-size: 15px;
  font-weight: 700;
}
.bn-root .bn-card--featured .bn-card__weight { font-size: 17px; }

.bn-root .bn-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px 16px;
}
.bn-root .bn-card__now {
  color: var(--bn-accent);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.bn-root .bn-card__was {
  padding: 4px 0;
  color: var(--bn-muted);
  font-size: 17px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.bn-root .bn-card__save {
  margin-top: 10px;
  color: var(--bn-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* Er der kun ét produkt øverst, fylder det hele bredden */
.bn-root .bn-grid--one { grid-template-columns: minmax(0, 1fr); }
.bn-root .bn-grid--one .bn-card--featured { grid-column: 1 / -1; grid-row: auto; }
.bn-root .bn-grid--one .bn-card--featured .bn-card__media { aspect-ratio: 4 / 3; height: auto; }

/* Fremhævet kort: dobbelt bredde, større billede og typografi */
.bn-root .bn-card--featured { grid-column: span 2; }
.bn-root .bn-card--featured .bn-card__media { aspect-ratio: 4 / 3; }
.bn-root .bn-card--featured .bn-card__visual { border-radius: 20px; }
.bn-root .bn-card--featured .bn-card__title { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.bn-root .bn-card--featured .bn-card__now { font-size: 32px; }
.bn-root .bn-card--featured .bn-card__was { font-size: 20px; padding: 6px 0; }
.bn-root .bn-card--featured .bn-card__price { gap: 6px 20px; }
.bn-root .bn-card--featured .bn-card__save { font-size: 16px; }
.bn-root .bn-card--featured .bn-card__badge { font-size: 18px; padding: 12px 18px; }
.bn-root .bn-card--featured .bn-btn--card { width: 56px; height: 56px; min-height: 56px; right: 14px; bottom: 14px; }

/* Enligt sidste kort på mobil: bredt, vandret layout */
@media (max-width: 899px) {
  .bn-root .bn-card--fill {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .bn-root .bn-card--fill .bn-card__visual { width: 46%; flex: none; }
  .bn-root .bn-card--fill .bn-card__body { padding: 0; }
}

.bn-root .bn-empty {
  padding: 40px 20px;
  border-radius: var(--bn-radius);
  background: var(--bn-brand);
  color: var(--bn-text-2);
  text-align: center;
}


/* ---------- Køb direkte fra kortet ---------- */
.bn-root .bn-buy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.bn-root .bn-qty {
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: var(--bn-brand);
  overflow: hidden;
}
.bn-root .bn-qty__btn {
  width: 38px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bn-text);
  font-family: var(--bn-font);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--bn-ease), color .2s var(--bn-ease);
}
.bn-root .bn-qty__btn:hover { background: var(--bn-accent); color: var(--bn-on-accent); }
.bn-root .bn-qty__input {
  width: 34px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bn-text);
  font-family: var(--bn-font);
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.bn-root .bn-qty__input:focus { outline: none; }
.bn-root .bn-buy:focus-within .bn-qty { outline: 2px solid var(--bn-accent); outline-offset: 2px; }

.bn-root .bn-btn--buy,
.bn-root .bn-btn--buy:focus {
  min-height: 44px;
  gap: 8px;
  padding: 0 16px;
  font-size: 15px;
  background: var(--bn-accent);
  color: var(--bn-on-accent);
}
.bn-root .bn-btn--buy:hover { background: var(--bn-accent-2); color: var(--bn-on-accent); }
/* "3 stk." er genvejen og fylder hele anden række */
.bn-root .bn-btn--three,
.bn-root .bn-btn--three:focus {
  grid-column: 1 / -1;
  min-height: 44px;
  gap: 8px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  background: var(--bn-brand);
  color: var(--bn-text);
}
.bn-root .bn-btn--three:hover { background: var(--bn-brand-2); color: var(--bn-text); }

/* Det store kort har plads til alt på én række */
.bn-root .bn-card--featured .bn-buy { grid-template-columns: auto auto; justify-content: start; }
.bn-root .bn-card--featured .bn-btn--three { grid-column: auto; }

/* ---------- Håndværk: helt brandfelt, tekst direkte på fladen ---------- */
.bn-root .bn-craft {
  position: relative;
  overflow: hidden;
  padding: 72px 0 72px;
  background: var(--bn-brand);
}
.bn-root .bn-craft .bn-sub { color: var(--bn-text); }
.bn-root .bn-craft__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.bn-root .bn-craft__title {
  color: var(--bn-accent);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.bn-root .bn-craft__figure {
  margin: 32px 0 0;
  border-radius: 16px;
  overflow: hidden;
}
.bn-root .bn-craft__img { width: 100%; height: 100%; object-fit: cover; }

.bn-root .bn-craft__text {
  margin-top: 10px;
  max-width: 30em;
  color: var(--bn-text-2);
  font-size: 16px;
  line-height: 1.6;
}


/* ---------- Slider: produkter man kan trække til siden ---------- */
.bn-root .bn-slider { position: relative; overflow: hidden; padding: 64px 0 80px; background: var(--bn-bg); }
.bn-root .bn-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.bn-root .bn-slider__nav { display: flex; gap: 10px; }
.bn-root .bn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bn-brand);
  color: var(--bn-text);
  cursor: pointer;
  transition: background-color .2s var(--bn-ease), color .2s var(--bn-ease), opacity .2s;
}
.bn-root .bn-round:hover { background: var(--bn-accent); color: var(--bn-on-accent); }
.bn-root .bn-round:active { transform: scale(.94); }
.bn-root .bn-round[disabled] { opacity: .35; cursor: default; }
.bn-root .bn-round[disabled]:hover { background: var(--bn-brand); color: var(--bn-text); }
.bn-root .bn-round .bn-icon { width: 22px; height: 22px; }

.bn-root .bn-slider__track {
  display: flex;
  gap: 12px;
  /* Samme indrykning som .bn-wrap, men kortene kan rulle ud til kanten */
  padding: 4px 16px 8px;
  /* Så snap-punkterne regner indrykningen med og slideren starter i nul */
  scroll-padding-left: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bn-root .bn-slider__track::-webkit-scrollbar { display: none; }
.bn-root .bn-slide {
  flex: 0 0 auto;
  width: 72%;
  max-width: 300px;
  scroll-snap-align: start;
}


/* ---------- Nedtælling ---------- */
.bn-root .bn-count { margin: 30px 0 4px; }
.bn-root .bn-count__label {
  color: var(--bn-text-2);
  font-size: 16px;
  font-weight: 700;
}
.bn-root .bn-count__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.bn-root .bn-count__item {
  min-width: 74px;
  padding: 12px 10px 10px;
  border-radius: 14px;
  background: var(--bn-brand);
}
.bn-root .bn-count__num {
  display: block;
  color: var(--bn-accent);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bn-root .bn-count__unit {
  display: block;
  margin-top: 6px;
  color: var(--bn-text-2);
  font-size: 14px;
  font-weight: 700;
}
.bn-root .bn-count__over {
  margin-top: 8px;
  color: var(--bn-accent);
  font-size: 20px;
  font-weight: 900;
}
@media (min-width: 640px) {
  .bn-root .bn-count__item { min-width: 96px; padding: 16px 14px 14px; }
  .bn-root .bn-count__num { font-size: 44px; }
}



/* ---------- Knaphed ---------- */
.bn-root .bn-hero__scarce {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bn-accent);
  color: var(--bn-on-accent);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}
.bn-root .bn-hero__scarce-dot,
.bn-root .bn-card__low-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: bn-blink 1.8s ease-in-out infinite;
}
@keyframes bn-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
.bn-root .bn-card__low {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  color: var(--bn-accent);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}
@media (min-width: 900px) {
  .bn-root .bn-hero__scarce { font-size: 20px; padding: 12px 22px; margin-top: 22px; }
}

/* ---------- Udsolgt ---------- */
.bn-root .bn-card__badge--sold { background: var(--bn-text); }
.bn-root .bn-card--soldout .bn-card__img { opacity: .45; }
.bn-root .bn-soldout {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--bn-brand);
  color: var(--bn-text-2);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Slider: træk og fokus ---------- */
.bn-root .bn-slider__track { cursor: grab; }
.bn-root .bn-slider__track.bn-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.bn-root .bn-slider__track:focus-visible { outline-offset: -4px; }
.bn-root .bn-slider__track img { -webkit-user-drag: none; user-select: none; }

/* ---------- Foto-band ---------- */
.bn-root .bn-band { padding-bottom: 80px; background: var(--bn-bg); }
.bn-root .bn-band__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- FAQ ---------- */
.bn-root .bn-faq { padding: 8px 0 88px; background: var(--bn-bg); }
.bn-root .bn-faq__inner { max-width: 880px; }
.bn-root .bn-faq__list { margin-top: 28px; display: grid; gap: 10px; }
.bn-root .bn-faq__item {
  border-radius: 14px;
  background: var(--bn-brand);
}
.bn-root .bn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: var(--bn-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.bn-root .bn-faq__q::-webkit-details-marker { display: none; }
.bn-root .bn-faq__q::after {
  content: "+";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bn-brand-2);
  color: var(--bn-accent);
  font-size: 22px;
  font-weight: 900;
  line-height: 32px;
  text-align: center;
  transition: transform .25s var(--bn-ease), background-color .25s;
}
.bn-root .bn-faq__item[open] .bn-faq__q::after { transform: rotate(45deg); background: var(--bn-accent); color: var(--bn-on-accent); }
.bn-root .bn-faq__a {
  padding: 0 20px 20px;
  max-width: 40em;
  color: var(--bn-text-2);
  font-size: 16px;
  line-height: 1.6;
}

/* Sektion nr. 2 (efter håndværksfeltet) hænger tættere på slideren */
.bn-root .bn-products--after { padding-top: 72px; padding-bottom: 24px; }

/* ---------- Outro ---------- */
.bn-root .bn-outro { position: relative; overflow: hidden; padding: 72px 0 88px; background: var(--bn-bg); }
.bn-root .bn-outro__inner { text-align: center; }
.bn-root .bn-outro .bn-sub { margin-left: auto; margin-right: auto; }
.bn-root .bn-outro__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Scroll-animationer (kun når JS har slået dem til) ---------- */
.bn-root.bn-anim .bn-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--bn-ease), transform .7s var(--bn-ease);
  transition-delay: var(--bn-delay, 0ms);
}
.bn-root.bn-anim .bn-reveal.bn-in { opacity: 1; transform: none; }
/* Kort bevarer hover-transition efter reveal */
.bn-root.bn-anim .bn-card.bn-reveal.bn-in {
  transition: opacity .7s var(--bn-ease), transform .7s var(--bn-ease), background-color .3s var(--bn-ease);
}

@media (prefers-reduced-motion: reduce) {
  .bn-root *, .bn-root *::before, .bn-root *::after {
    animation: none !important;
    transition: none !important;
  }
  .bn-root .bn-reveal { opacity: 1 !important; transform: none !important; }
  /* Uden bevægelse: nødderne ligger stille, spredt ned over fladen */
  .bn-root .bn-card__badge { transform: none !important; }
  .bn-root .bn-fall__item { transform: translate3d(0, calc(var(--bn-i) * 11%), 0) rotate(var(--bn-rot)) !important; }
  .bn-root .bn-ticker__track { transform: none; }
  .bn-root .bn-btn:active, .bn-root .bn-round:active { transform: none; }
  .bn-root .bn-card:hover .bn-card__img,
  .bn-root .bn-btn:hover .bn-icon { transform: none; }
}

/* ---------- Små telefoner (360px) ---------- */
@media (max-width: 380px) {
  .bn-root .bn-grid { gap: 24px 10px; }
  .bn-root .bn-card__title { font-size: 15px; }
  .bn-root .bn-card__now { font-size: 19px; }
  .bn-root .bn-btn--card { width: 44px; height: 44px; min-height: 44px; }
  .bn-root .bn-hero__date { font-size: 20px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .bn-root .bn-wrap { padding: 0 28px; }
  .bn-root .bn-hero { padding: 72px 0 56px; }
  .bn-root .bn-hero__date { font-size: 28px; }
  .bn-root .bn-hero__lead { font-size: 20px; }
  .bn-root .bn-facts { padding: 34px 0; }
  .bn-root .bn-facts__list {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 16px 48px;
  }
  .bn-root .bn-facts__item { font-size: 18px; }
  .bn-root .bn-grid { gap: 36px 18px; }
  .bn-root .bn-card__title { font-size: 18px; }
  .bn-root .bn-card__now { font-size: 24px; }
  .bn-root .bn-craft__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .bn-root .bn-ticker__item { font-size: 24px; gap: 28px; padding-right: 28px; }
  .bn-root .bn-slider__track { gap: 18px; padding-left: 28px; padding-right: 28px; scroll-padding-left: 28px; }
  .bn-root .bn-slide { width: 40%; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .bn-root .bn-wrap { padding: 0 40px; }
  .bn-root .bn-hero { padding: 72px 0 72px; }
  /* Titlen får hele bredden; tekst og knap står under den, så intet kan overlappe. */
  .bn-root .bn-hero__title { font-size: clamp(100px, 11.5vw, 168px); }
  .bn-root .bn-hero__date { margin-top: 28px; font-size: 32px; }
  .bn-root .bn-hero__side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin-top: 20px;
  }
  .bn-root .bn-hero__lead { margin-top: 0; }
  .bn-root .bn-hero__actions { margin-top: 0; flex: none; }
  .bn-root .bn-btn--primary.bn-btn--hero { min-height: 60px; padding: 0 36px; font-size: 18px; }
  .bn-root .bn-products { padding: 120px 0 136px; }
  .bn-root .bn-head { margin-bottom: 48px; }
  .bn-root .bn-head--split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: end;
  }
  .bn-root .bn-head--split .bn-sub { margin-top: 0; }
  .bn-root .bn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
  .bn-root .bn-card--featured { grid-column: span 2; grid-row: span 2; }
  /* Billedet fylder resten af cellen, så der ikke bliver et tomt hul under kortet */
  .bn-root .bn-card--featured .bn-card__visual { flex: 1 1 auto; min-height: 0; display: flex; }
  .bn-root .bn-card--featured .bn-card__media { aspect-ratio: auto; width: 100%; height: auto; flex: 1; display: flex; }
  .bn-root .bn-card--featured .bn-card__img { height: auto; min-height: 100%; flex: 1; }
  .bn-root .bn-card--featured .bn-card__body { flex: none; }
  .bn-root .bn-card--featured .bn-card__title { font-size: 32px; }
  .bn-root .bn-card--featured .bn-card__now { font-size: 40px; }
  .bn-root .bn-card--featured .bn-card__body { padding-top: 18px; }
  .bn-root .bn-craft { padding: 128px 0 136px; }
  .bn-root .bn-craft .bn-head { margin-bottom: 72px; }
  .bn-root .bn-craft__list { gap: 56px; }
  /* Fotoet står til venstre, de tre punkter til højre */
  .bn-root .bn-craft__body {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .bn-root .bn-craft__figure { margin: 0; }
  .bn-root .bn-craft__figure .bn-craft__img { aspect-ratio: 1 / 1; }
  .bn-root .bn-craft__body .bn-craft__list { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bn-root .bn-craft__title { font-size: 28px; }
  .bn-root .bn-slider { padding-bottom: 136px; }
  .bn-root .bn-slider__track { gap: 24px; padding-left: 40px; padding-right: 40px; scroll-padding-left: 40px; }
  .bn-root .bn-slide { width: 26%; max-width: 340px; }
  .bn-root .bn-outro { padding: 128px 0 144px; }
}

@media (min-width: 900px) {
  .bn-root .bn-grid--one .bn-card--featured .bn-card__media { aspect-ratio: 21 / 9; }
}

/* Stort kort: ét stort produkt med de andre ved siden af og under.
   Gitteret har 6 kolonner, så rækkerne altid går op: normale kort fylder 2,
   det store 4 (og 2 rækker), og de sidste kort deler bredden, hvis de ikke
   fylder en hel række. */
@media (min-width: 900px) {
  .bn-root .bn-grid.bn-grid--featured { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bn-root .bn-grid.bn-grid--featured > .bn-card { grid-column: span 2; }
  .bn-root .bn-grid.bn-grid--featured > .bn-card--featured { grid-column: span 4; grid-row: span 2; }
  .bn-root .bn-grid.bn-grid--featured > .bn-card--span3 { grid-column: span 3; }
  .bn-root .bn-grid.bn-grid--featured > .bn-card--span6 { grid-column: span 6; }
  /* Spejlvendt: det store kort til højre, de små stables til venstre */
  .bn-root .bn-grid.bn-grid--mirror > .bn-card--featured { grid-column: 3 / span 4; grid-row: 1 / span 2; }
  /* De brede kort får et liggende billede, så de ikke bliver for høje */
  .bn-root .bn-card--span3 .bn-card__media { aspect-ratio: 4 / 3; }
  .bn-root .bn-card--span6 .bn-card__media { aspect-ratio: 21 / 9; }
}

/* Jævnt gitter uden stort kort: sidste række centreres */
@media (min-width: 900px) {
  .bn-root .bn-grid.bn-grid--even {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px 24px;
  }
  .bn-root .bn-grid--even > .bn-card { flex: 0 0 calc((100% - 48px) / 3); }
  .bn-root .bn-band__img { height: 380px; }
}

/* Brede skærme: 3 kolonner, så produktbillederne bliver store. */
@media (min-width: 1200px) {
  .bn-root .bn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
  .bn-root .bn-grid.bn-grid--featured { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 28px; }
  .bn-root .bn-grid--even > .bn-card { flex-basis: calc((100% - 56px) / 3); }
  .bn-root .bn-grid.bn-grid--even { gap: 56px 28px; }
  .bn-root .bn-band__img { height: 440px; }
  .bn-root .bn-slide { width: 31%; max-width: 420px; }
  .bn-root .bn-card__title { font-size: 20px; }
  .bn-root .bn-card__now { font-size: 28px; }
  .bn-root .bn-card__was { font-size: 18px; }
  .bn-root .bn-card__save { font-size: 15px; }
}

/* ---------- Bland selv ---------- */
/* Den faste bjælke (position: sticky) virker kun, hvis roden ikke er en
   scroll-container. overflow: clip skærer det samme væk som hidden, men
   uden at blive en. Ældre browsere beholder hidden (bjælken står så bare stille). */
@supports (overflow: clip) {
  .bn-root { overflow: clip; }
}
/* Samme brune bund som resten af siden; kortene er et trin lysere */
.bn-root .bn-mix {
  --bn-mix-card: #5A3322;
  --bn-mix-card-on: #683C28;
  --bn-mix-well: #33190F;
  position: relative;
  padding: 64px 0 80px;
  background: var(--bn-bg);
  scroll-margin-top: 16px;
}
.bn-root .bn-mix::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 45% at 15% 0%, rgba(237, 166, 59, .12), transparent 70%); /* taste-skill-ignore: lysindfald, ønsket af kunden */
}
.bn-root .bn-mix .bn-wrap { position: relative; }
.bn-root .bn-mix .bn-head { margin-bottom: 28px; }
.bn-root .bn-mix__per {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bn-accent);
  color: var(--bn-on-accent);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

/* Sorterne: kort med stort billede, navn og antal */
.bn-root .bn-mix__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bn-root .bn-mix__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 8px 12px;
  border-radius: 18px;
  background: var(--bn-mix-card);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: background-color .2s var(--bn-ease), outline-color .2s var(--bn-ease);
}
.bn-root .bn-mix__item--on { background: var(--bn-mix-card-on); outline-color: var(--bn-accent); }
.bn-root .bn-mix__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  background: var(--bn-brand);
}
.bn-root .bn-mix__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--bn-ease);
}
.bn-root .bn-mix__item:hover .bn-mix__img { transform: scale(1.04); }
.bn-root .bn-mix__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--bn-accent);
  color: var(--bn-on-accent);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.bn-root .bn-mix__badge:empty { display: none; }
.bn-root .bn-mix__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 0;
}
.bn-root .bn-mix__name {
  color: var(--bn-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.bn-root .bn-mix__sold { color: var(--bn-muted); font-size: 15px; font-weight: 700; }
.bn-root .bn-mix__item--sold .bn-mix__img { opacity: .45; }
.bn-root .bn-mix__item--sold .bn-mix__name { color: var(--bn-muted); }

.bn-root .bn-mix__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  background: var(--bn-mix-well);
}
.bn-root .bn-mix__step {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bn-text);
  font-family: var(--bn-font);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--bn-ease), color .2s var(--bn-ease);
}
.bn-root .bn-mix__step[data-bn-mix-step="1"] { background: var(--bn-accent); color: var(--bn-on-accent); }
.bn-root .bn-mix__step[data-bn-mix-step="1"]:hover:not(:disabled) { background: var(--bn-accent-2); }
.bn-root .bn-mix__step[data-bn-mix-step="-1"]:hover:not(:disabled) { background: var(--bn-mix-card-on); }
.bn-root .bn-mix__step:disabled { color: #9C7A6A; cursor: default; }
.bn-root .bn-mix__step[data-bn-mix-step="1"]:disabled { background: #7A5140; color: #C4AA9D; }
.bn-root .bn-mix__n {
  min-width: 28px;
  color: var(--bn-text);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bn-root .bn-mix__item--on .bn-mix__n { color: var(--bn-accent); }

/* Bjælken følger med ned gennem sektionen */
.bn-root .bn-mix__bar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  margin-top: 20px;
  padding: 16px;
  border-radius: 20px;
  background: #683C28;
}
.bn-root .bn-mix__count { color: var(--bn-text); font-size: 18px; font-weight: 900; line-height: 1.2; }
.bn-root .bn-mix__hint { margin-top: 3px; color: var(--bn-text-2); font-size: 15px; line-height: 1.35; }
.bn-root .bn-mix--goal .bn-mix__hint { color: var(--bn-accent); font-weight: 700; }
.bn-root .bn-mix__meter {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #2B110B;
}
.bn-root .bn-mix__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--bn-accent);
  transition: width .35s var(--bn-ease);
}
.bn-root .bn-mix__total {
  align-self: start;
  color: var(--bn-accent);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.bn-root .bn-mix__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
.bn-root .bn-mix__reset {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #2B110B;
  color: var(--bn-text);
  font-family: var(--bn-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.bn-root .bn-mix__reset:hover:not(:disabled) { background: #1A0C07; }
.bn-root .bn-mix__reset:disabled { color: #8C7065; cursor: default; }
.bn-root .bn-mix__go { padding: 0 20px; }
.bn-root .bn-mix__go:disabled,
.bn-root .bn-mix__go:disabled:hover {
  background: #7A5140;
  color: #D2BCB1;
  cursor: default;
  transform: none;
}

@media (min-width: 640px) {
  .bn-root .bn-mix__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .bn-root .bn-mix__name { font-size: 16px; }
}
@media (min-width: 900px) {
  .bn-root .bn-mix { padding: 112px 0 120px; }
  .bn-root .bn-mix__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bn-root .bn-mix__item { padding: 10px 10px 14px; }
  .bn-root .bn-mix__name { font-size: 17px; }
  .bn-root .bn-mix__bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 18px 18px 18px 24px;
  }
  .bn-root .bn-mix__total { align-self: center; font-size: 26px; }
  .bn-root .bn-mix__actions { grid-column: auto; grid-template-columns: auto auto; }
  .bn-root .bn-mix__meter { max-width: 420px; }
}

/* Bland selv: pillerne under teksten og tom tilstand */
.bn-root .bn-mix__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bn-root .bn-mix__pills .bn-mix__per { margin-top: 0; }
.bn-root .bn-mix__ship {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bn-mix-card);
  color: var(--bn-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
/* Uden valg dækker bjælken ikke kortene; den står stille under dem */
.bn-root .bn-mix--empty .bn-mix__bar { position: relative; bottom: auto; }

/* ---------- Navigationsbjælke ---------- */
/* Genveje til sektionerne. Følger med ned ad siden og lægger sig under
   temaets menu, hvis den står fast (--bn-jump-top sættes af scriptet). */
.bn-root .bn-jump {
  position: sticky;
  top: var(--bn-jump-top, 0px);
  z-index: 5;
  background: #1A0C07;
}
.bn-root .bn-jump__list {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bn-root .bn-jump__list::-webkit-scrollbar { display: none; }
.bn-root .bn-jump__list li { flex: none; }
.bn-root .bn-jump__link,
.bn-root .bn-jump__link:focus {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #3D1C12;
  color: var(--bn-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s var(--bn-ease), color .2s var(--bn-ease);
}
.bn-root .bn-jump__link:hover { background: #4A2416; color: var(--bn-text); }
.bn-root .bn-jump__link--on,
.bn-root .bn-jump__link--on:hover,
.bn-root .bn-jump__link--on:focus { background: var(--bn-accent); color: var(--bn-on-accent); }

/* Sektionerne har tabindex, så fokus kan flyttes dertil efter et hop */
.bn-root .bn-mix:focus, .bn-root .bn-slider:focus, .bn-root .bn-faq:focus { outline: none; }

/* Hero: to knapper side om side, også på mobil */
.bn-root .bn-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Mobil ---------- */
@media (max-width: 639px) {
  /* Fakta fylder mindre, så tilbuddene kommer hurtigere frem */
  .bn-root .bn-facts { padding: 18px 0; }
  .bn-root .bn-facts__list { gap: 8px; }
  .bn-root .bn-facts__item { font-size: 15px; }

  .bn-root .bn-hero__actions .bn-btn { flex: 1 1 auto; padding: 0 20px; }

  /* Små kort: antal og knap under hinanden i fuld bredde, så "Læg i kurv"
     aldrig bliver skåret over. Genvejen "3 stk." vises kun på de store kort. */
  .bn-root .bn-card:not(.bn-card--featured) .bn-buy { grid-template-columns: minmax(0, 1fr); }
  .bn-root .bn-card:not(.bn-card--featured) .bn-qty { justify-content: space-between; }
  .bn-root .bn-card:not(.bn-card--featured) .bn-qty__btn { width: 44px; }
  .bn-root .bn-card:not(.bn-card--featured) .bn-btn--buy { width: 100%; padding: 0 10px; }
  .bn-root .bn-card:not(.bn-card--featured) .bn-btn--three { display: none; }
  .bn-root .bn-card--fill .bn-buy { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Købsknapper: pistaciegrøn ---------- */
/* Gul er sidens farve til priser, mærkater og tilbud. Knapperne, der lægger
   i kurv, får deres egen farve, så de er det første, øjet finder. */
.bn-root {
  --bn-buy: #9BC46A;
  --bn-buy-2: #AED681;        /* hover */
  --bn-on-buy: #13210A;
}
.bn-root .bn-btn--buy,
.bn-root .bn-btn--buy:focus,
.bn-root .bn-mix__go:not(:disabled),
.bn-root .bn-mix__go:not(:disabled):focus {
  background: var(--bn-buy);
  color: var(--bn-on-buy);
}
.bn-root .bn-btn--buy:hover,
.bn-root .bn-mix__go:not(:disabled):hover {
  background: var(--bn-buy-2);
  color: var(--bn-on-buy);
}

/* Bland selv: rabat og besparelse */
.bn-root .bn-mix__off {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bn-text);
  color: var(--bn-on-accent);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}
.bn-root .bn-mix__per-was { margin-left: 6px; font-weight: 700; opacity: .7; }
.bn-root .bn-mix__sum { align-self: start; text-align: right; }
.bn-root .bn-mix__sum .bn-mix__total { align-self: auto; }
.bn-root .bn-mix__saved {
  margin-top: 2px;
  color: var(--bn-text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.bn-root .bn-mix__saved s { margin-right: 4px; color: var(--bn-muted); font-weight: 400; }
@media (min-width: 900px) {
  .bn-root .bn-mix__sum { align-self: center; }
  .bn-root .bn-mix__saved { font-size: 15px; }
}

/* ---------- Håndværk på creme ---------- */
/* Et lyst pusterum midt på siden: risteriet står på husets cremefarve
   med mørkebrun tekst, så siden ikke er mørk hele vejen ned. */
.bn-root .bn-craft {
  --bn-cream: #F3EFE7;
  background: var(--bn-cream);
}
.bn-root .bn-craft::before { background: none; }
.bn-root .bn-craft .bn-h2 { color: var(--bn-dark); }
.bn-root .bn-craft .bn-sub { color: #4A2819; }
.bn-root .bn-craft__title { color: #9A5410; }
.bn-root .bn-craft__text { color: #5A3A2A; }
.bn-root .bn-craft :focus-visible { outline-color: var(--bn-dark); }

/* Bland selv på mobil: besparelsen må bryde over to linjer, så status til
   venstre ikke bliver klemt. */
@media (max-width: 899px) {
  .bn-root .bn-mix__saved { white-space: normal; max-width: 150px; margin-left: auto; line-height: 1.35; }
  .bn-root .bn-mix__saved s { display: block; margin-right: 0; }
  .bn-root .bn-mix__total { font-size: 21px; }
}