/** Shopify CDN: Minification failed

Line 1390:0 Expected "}" to go with "{"

**/
/*
 * Reformation 17.0 header styles for sections/header-reformation.liquid.
 * Only loaded by that section, so none of this applies while the old header is active.
 * Verbatim copy of the header block from 17.0 assets/app.css (.header-section → .menu-item-badge),
 * which overrides the older 8.4 header rules still present in our app.css. Additions at the end.
 */
.header-section {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}

.header {
  display: block;
  /* Headerens bundlinje: samme graa som footerens linjer, saa den hvide
     header ikke flyder sammen med den hvide side. Temaets globale
     "Lines and borders" (#E2E2E2) var for lys til det. */
  border-bottom: 1px solid #D9D9D9;
  position: relative;
  background: var(--color-header-bg, var(--bg-body, #fff));
  z-index: 30;
  width: 100%;
  --color-price: var(--color-header-text);
  --color-accent: var(--color-header-links);
  --color-accent-rgb: var(--color-header-links-rgb);
}
.header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
.header.header--shadow-small:after {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
.header.header--shadow-medium:after {
  box-shadow: 0 9px 38px rgba(0, 0, 0, 0.05), 0 5px 12px rgba(0, 0, 0, 0.1);
}
.header.header--shadow-large:after {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.1), 0 5px 22px rgba(0, 0, 0, 0.15);
}
.header.is-sticky:after {
  opacity: 1;
}
.header.transparent--true {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
}
.header.transparent--true.transparent-border--true {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.header.transparent--true:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: -1;
  background: var(--color-header-bg, var(--bg-body, #fff));
  transform: translateY(-100%);
}
/* Transparent header: den hvide baggrund kommer kun frem, når en dropdown er
   åben (musen er over et menupunkt med undermenu) eller headeren er sticky.
   Temaets original gjorde headeren hvid ved al hover, også over logo, ikoner
   og tom plads, hvilket gav et uroligt blink over hero'en. Tastaturfokus er
   bevidst ikke med: app.css' egne :not(:hover)-regler holder teksten hvid der,
   så headeren skal forblive transparent som i originalen. */
/* app.css (8.4-headeren) har stadig .header.transparent--true:hover:before, som
   header-ref.css før overskrev med samme selektor. Hold baggrunden skjult ved
   almindelig hover, så kun reglen nedenfor kan vise den. */
.header.transparent--true:hover:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)):before {
  transform: translateY(-100%);
}
.header.transparent--true:has(.thb-full-menu > li.menu-item-has-children:hover):before,
.header.transparent--true.is-sticky:before {
  transform: translateY(0%);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .logolink.text-logo {
  color: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .logolink .logoimg {
  opacity: 0;
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .logolink .logoimg--light {
  opacity: 1;
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-full-menu > li > a {
  color: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-full-menu > li > a:after {
  background: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-localization-forms.inside-header .select-arrow svg path {
  stroke: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-localization-forms.inside-header .select select {
  color: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-secondary-area .thb-item-count {
  background-color: var(--color-header-transparent-text, #fff);
  color: var(--color-header-icons, --color-accent);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-secondary-area-item.thb-secondary-myaccount {
  color: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) svg {
  --color-header-links: var(--color-header-transparent-text, #fff);
  --color-header-icons: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) shopify-account::part(signed-out-avatar) {
  color: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .mobile-toggle span {
  background: var(--color-header-transparent-text, #fff);
}
.header--transparent-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  background: var(--header-transparent-background);
}
.header > .row > .columns {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  /* Lavere header end 17.0-standarden (60/80px). Logo (20/26px), menu og
     ikoner har stadig luft, og header-ref.js maaler hoejden til dropdowns. */
  min-height: 56px;
}
@media only screen and (min-width: 1068px) {
  .header > .row > .columns {
    min-height: 68px;
  }
}
.header .logolink {
  position: relative;
}
/* Det lyse logo lagde sig som 100%x100% oven i boksen, som det moerke logo
   saetter. De to filer havde ikke samme sideforhold (moerk 541x69, lys 2000x200),
   saa object-fit: contain skalerede det lyse ned efter bredden og gjorde det
   ca. 20% mindre end i sticky-headeren. Hoejden styrer nu stoerrelsen, praecis
   som for det moerke logo, og bredden foelger med. pointer-events: none saa
   eventuel gennemsigtig overbredde ikke stjaeler klik fra menuen. */
.header .logolink .logoimg--light {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: left;
  pointer-events: none;
  opacity: 0;
}
.header.style1 .logolink {
  text-align: center;
  justify-content: center;
}
@media only screen and (min-width: 1068px) {
  .header.style1 .logolink {
    text-align: left;
    margin-right: auto;
    justify-content: flex-start;
  }
}
@media only screen and (min-width: 1068px) {
  .header.style1 > .row > .columns {
    grid-template-columns: auto minmax(auto, 70%) auto;
  }
}
.header.style2 .logolink {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  flex-shrink: 0;
}
@media only screen and (min-width: 1068px) {
  .header.style2 .logolink {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1068px) {
  .header.style2 > .row > .columns {
    grid-template-columns: auto 1fr;
  }
}
.header.style2 {
  /* Afstand mellem logo og topmenu. Læses også af header-ref.js (fitFullMenu). */
  --header-menu-gap: 25px;
}
.header.style2 .full-menu {
  margin-left: var(--header-menu-gap);
}
@media only screen and (min-width: 1068px) {
  .header.style2 .logolink {
    text-align: left;
  }
}
.header.style3 .logolink {
  text-align: center;
  justify-content: center;
}
.header.style3 .logolink .logoimg {
  object-position: center;
}
.header.style3 .full-menu {
  margin-left: 0;
}
[dir=rtl] .header.style3 .full-menu {
  margin-left: auto;
  margin-right: 0;
}
.header.style3 .thb-full-menu {
  text-align: left;
}
[dir=rtl] .header.style3 .thb-full-menu {
  text-align: right;
}
.header.style3 .thb-full-menu > li:first-child {
  padding-left: 0;
}
.header.style4 .full-menu {
  width: 100%;
  grid-column: span 3;
  justify-content: center;
}
@media only screen and (min-width: 1068px) {
  .header.style4 .logolink {
    margin: 15px 0;
  }
}
@media only screen and (min-width: 1068px) {
  .header.style4 > .row > .columns {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.header .menu-logo-container {
  display: flex;
  align-items: center;
}

.thb-secondary-area {
  margin-left: auto;
  line-height: 1;
  height: 100%;
  min-width: 70px;
  white-space: nowrap;
  justify-content: end;
  display: inline-flex;
}
@media only screen and (min-width: 768px) {
  .thb-secondary-area {
    min-width: 135px;
  }
}
[dir=rtl] .thb-secondary-area {
  margin-left: 0;
}
.thb-secondary-area-item {
  padding: 0 7px;
  height: 100%;
  align-items: center;
  display: inline-flex;
}
@media only screen and (min-width: 1068px) {
  .thb-secondary-area-item {
    padding: 0 10px;
  }
}
.thb-secondary-area-item:last-child {
  padding-right: 0;
}
[dir=rtl] .thb-secondary-area-item:last-child {
  padding: 0 7px;
}
@media only screen and (min-width: 1068px) {
  [dir=rtl] .thb-secondary-area-item:last-child {
    padding: 0 10px;
  }
}
.thb-secondary-area-item.thb-secondary-myaccount {
  display: none;
  font-family: var(--font-navigation-family, inherit);
  font-weight: var(--font-navigation-weight, var(--font-body-medium-weight, 500));
  font-style: var(--font-navigation-style, inherit);
  font-size: calc(var(--font-navigation-scale, 1) * 15px);
  color: var(--color-header-links, --color-accent);
}
.thb-secondary-area-item.thb-secondary-myaccount:hover {
  color: var(--color-header-links-hover, --color-accent2);
}
.navigation-uppercase-true .thb-secondary-area-item.thb-secondary-myaccount {
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .thb-secondary-area-item.thb-secondary-myaccount {
    display: inline-flex;
  }
}
.thb-secondary-area-item.thb-secondary-myaccount--icon-false span {
  position: relative;
  line-height: 1.7;
}
.thb-secondary-area-item.thb-secondary-myaccount--icon-false span:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scale(0, 1);
  transform-origin: left center;
  background: var(--color-header-links-hover, --color-accent);
}
.thb-secondary-area-item.thb-secondary-myaccount--icon-false:hover, .thb-secondary-area-item.thb-secondary-myaccount--icon-false:focus {
  color: var(--color-header-links-hover, --color-accent2);
}
.thb-secondary-area-item.thb-secondary-myaccount--icon-false:hover span:after, .thb-secondary-area-item.thb-secondary-myaccount--icon-false:focus span:after {
  transform: scale(1, 1);
}
.thb-secondary-area-item.thb-secondary-cart .thb-item-count svg {
  fill: var(--color-header-bg, var(--bg-body, #fff));
  width: 8px;
}
.thb-secondary-area-item svg {
  pointer-events: none;
}
.thb-secondary-area .thb-secondary-item-icon {
  position: relative;
}
.thb-secondary-area .thb-item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.625rem;
  font-weight: var(--font-body-bold-weight, 600);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--color-header-icons, --color-accent);
  color: var(--color-header-bg, var(--bg-body, #fff));
  position: absolute;
  top: -8px;
  right: -12px;
}
.thb-secondary-area shopify-account {
  display: none;
  align-items: center;
  --minimum-touch-target: 39px;
}
@media only screen and (min-width: 768px) {
  .thb-secondary-area shopify-account {
    display: inline-flex;
  }
}
.thb-secondary-area shopify-account::part(signed-out-avatar) {
  line-height: 0;
  --icon-stroke-width: 1.3px;
  padding: 0;
  color: var(--color-header-icons, --color-accent);
}
.thb-secondary-area .thb-localization-forms {
  display: none;
}
@media only screen and (min-width: 1068px) {
  .thb-secondary-area .thb-localization-forms {
    display: inline-flex;
    align-items: center;
  }
}

.logolink {
  display: inline-flex;
  margin: 20px 0;
}
.logolink.text-logo {
  font-size: 1.125rem;
  font-weight: var(--font-body-bold-weight, 600);
  line-height: 1;
  word-break: break-all;
  color: var(--color-header-links, --color-accent);
}
.logolink.text-logo:hover, .logolink.text-logo:focus {
  color: var(--color-header-links-hover, --color-accent2);
}
@media only screen and (min-width: 768px) {
  .logolink.text-logo {
    font-size: 1.5rem;
  }
}
/* Logoet har sin indstillede hoejde, saa laenge der er plads, og krymper
   ellers i bredden (med sideforholdet bevaret), saa det aldrig lapper ind
   over ikonerne til hoejre. Foer var hoejden fast: paa mobil er logoet
   (541x69 px, 28px hoejt = 220px bredt) plus burger (48px) og ikoner
   (min. 70px) bredere end en 320-340px viewport (iPhone SE, eller en
   360-390px telefon ved 110-125 % zoom), og logoet laa oven paa
   soegeikonet. Gridets midterkolonne har min-width 0 af samme grund. */
.logolink .logoimg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--logo-height-mobile, 30px);
  object-fit: contain;
  object-position: left;
}
@media only screen and (min-width: 768px) {
  .logolink .logoimg {
    max-height: var(--logo-height, 30px);
  }
}
.header .logolink {
  min-width: 0;
  max-width: 100%;
}
.header > .row > .columns {
  grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
}

.thb-header-mobile-left {
  display: inline-flex;
  margin-right: auto;
}
@media only screen and (min-width: 1068px) {
  .thb-header-mobile-left {
    display: none;
  }
}
[dir=rtl] .thb-header-mobile-left {
  margin-right: 0;
}

.thb-header-desktop-left {
  display: none;
  line-height: 1;
}
@media only screen and (min-width: 1068px) {
  .thb-header-desktop-left {
    display: inline-flex;
    margin-right: auto;
  }
  [dir=rtl] .thb-header-desktop-left {
    margin-right: 0;
  }
}

.mobile-toggle-wrapper {
  display: inline-flex;
}
.mobile-toggle-wrapper.active .mobile-toggle span:nth-child(1) {
  transform: rotateZ(45deg) translateY(-3px);
}
.mobile-toggle-wrapper.active .mobile-toggle span:nth-child(2) {
  opacity: 0;
}
.mobile-toggle-wrapper.active .mobile-toggle span:nth-child(3) {
  transform: rotateZ(-45deg) translateY(1px);
}
.mobile-toggle-wrapper summary::-webkit-details-marker {
  display: none;
}

.mobile-toggle {
  display: inline-flex;
  position: relative;
  width: 48px;
  height: 48px;
  margin-left: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-toggle span {
  width: 18px;
  height: 1.5px;
  background: var(--color-header-icons, --color-accent);
  position: absolute;
  border-radius: 1px;
  top: 18px;
  left: 15px;
}
.mobile-toggle span:nth-child(1) {
  transform-origin: top left;
}
.mobile-toggle span:nth-child(2) {
  top: 23px;
}
.mobile-toggle span:nth-child(3) {
  transform-origin: top left;
  top: 28px;
}

.mobile-menu-drawer {
  display: none;
}

@media only screen and (min-width: 1068px) {
  .header--drawer-menu.style2 .thb-header-mobile-left, .header--drawer-menu.style3 .thb-header-mobile-left {
    display: inline-flex;
  }
  .header--drawer-menu.style2 .full-menu, .header--drawer-menu.style3 .full-menu {
    display: none;
  }
  .header--drawer-menu.style2 > .row > .columns {
    grid-template-columns: auto auto 1fr;
  }
}

.full-menu {
  display: none;
  margin: 0 auto;
  max-width: 100%;
}
@media only screen and (min-width: 1068px) {
  .full-menu {
    display: inline-flex;
  }
}

.thb-full-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 0.9375rem;
}
.thb-full-menu--link {
  color: var(--color-header-links, --color-accent);
  position: relative;
  font-size: calc(var(--font-navigation-scale, 1) * 15px);
  font-family: var(--font-navigation-family, inherit);
  font-weight: var(--font-navigation-weight, inherit);
  font-style: var(--font-navigation-style, inherit);
}
.navigation-uppercase-true .thb-full-menu--link {
  text-transform: uppercase;
}
.thb-full-menu--link:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  will-change: transform;
  height: 1px;
  transform: scale(0, 1);
  transform-origin: left center;
  background: var(--color-header-links-hover, --color-accent);
}
.thb-full-menu--link:hover, .thb-full-menu--link:focus {
  color: var(--color-header-links-hover, --color-accent2);
}
.thb-full-menu--link:hover:after, .thb-full-menu--link:focus:after {
  transform: scale(1, 1);
}
.thb-full-menu--link:hover svg path, .thb-full-menu--link:focus svg path {
  stroke: var(--color-header-links-hover, --color-accent2);
}
.thb-full-menu > li {
  display: inline-flex;
  padding: 0 var(--navigation-item-spacing, 15px);
  align-items: center;
}
.thb-full-menu > li > a {
  margin: 10px 0;
  font-weight: var(--font-body-medium-weight, 500);
}
.thb-full-menu li.menu-item-has-children {
  position: relative;
  z-index: 1;
}
.thb-full-menu li.menu-item-has-children:hover {
  z-index: 2;
}
.thb-full-menu li.menu-item-has-children:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
}
.thb-full-menu li.menu-item-has-children:hover:before {
  content: attr(data-item-title);
  position: absolute;
  height: 100%;
  top: 0;
  margin-left: -30px;
  padding-left: 30px;
  padding-right: 30px;
  opacity: 0;
}
.thb-full-menu li.menu-item-has-children.left-submenu .sub-menu {
  left: auto;
  right: calc(100% + 35px);
}
.thb-full-menu li.menu-item-has-children.menu-item-has-megamenu {
  position: static;
}
.thb-full-menu li.menu-item-has-children.menu-item-has-megamenu .sub-menu {
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-header-border, var(--color-border));
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.thb-full-menu li.menu-item-has-children.menu-item-has-megamenu .sub-menu.mega-menu-container .mega-menu-promotion img {
  transform: scale(1);
}
.thb-full-menu li.menu-item-has-children.menu-item-has-megamenu .sub-menu.mega-menu-container .mega-menu-promotion:hover img {
  transform: scale(1.05);
}
.thb-full-menu li.menu-item-has-children > a {
  padding-right: 15px;
  position: relative;
}
.thb-full-menu li.menu-item-has-children > a:focus + .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.thb-full-menu li.menu-item-has-children > a svg {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;
}
.thb-full-menu li.menu-item-has-children:focus-within {
  z-index: 2;
}
.thb-full-menu li.menu-item-has-children:focus-within > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.thb-full-menu li.menu-item-has-children:focus-within > .sub-menu.mega-menu-container {
  display: flex;
}
.thb-full-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -15px;
  font-size: calc(var(--font-navigation-scale, 1) * 14px);
  line-height: 1;
  padding: 22px 30px;
  background: var(--color-header-bg, var(--bg-body, #fff));
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  line-height: 1.1;
  min-width: 190px;
  opacity: 0;
  visibility: hidden;
}
.thb-full-menu .sub-menu a:not(.text-button):after {
  top: calc(100% - 3px);
}
.thb-full-menu .sub-menu ul {
  line-height: inherit;
}
.thb-full-menu .sub-menu .thb-full-menu--link {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
}
.thb-full-menu .sub-menu .sub-menu {
  top: -22px;
  left: calc(100% + 35px);
}
.thb-full-menu .sub-menu li.menu-item-has-children:hover:before {
  width: calc(100% + 65px);
}
.thb-full-menu .sub-menu.mega-menu-container {
  padding: 0;
  display: flex;
  max-width: 100vw;
  overflow-y: auto;
  max-height: calc(100vh - (var(--header-height, 0px) + var(--header-offset, 0px) + 50px));
}
.thb-full-menu .mega-menu-container--inner {
  width: 100%;
}
.thb-full-menu .mega-menu-columns {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-column-gap: 20px;
  list-style: none;
  padding: 50px;
  margin: 0;
  white-space: initial;
  flex: 1;
}
@media only screen and (min-width: 1200px) {
  .thb-full-menu .mega-menu-columns {
    grid-column-gap: 30px;
  }
}
.thb-full-menu .mega-menu-columns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thb-full-menu .mega-menu-columns__heading {
  font-size: calc(var(--font-navigation-scale, 1) * 12px);
  text-transform: uppercase;
  font-weight: var(--font-body-bold-weight, 600);
  letter-spacing: 0.1em;
  padding: 0;
  margin-bottom: 10px;
}

.mega-menu-promotion {
  width: 25vw;
  position: relative;
  overflow: hidden;
}
.mega-menu-promotion > a {
  display: block;
  height: 100%;
}
.mega-menu-promotion > a:after {
  content: none;
}
.mega-menu-promotion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
  transition: all 0.5s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.mega-menu-promotion--cover {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 100%;
  color: #fff;
  white-space: normal;
  padding: 0 50px 50px 50px;
}
.mega-menu-promotion--cover p {
  font-size: 1rem;
  line-height: 1.375rem;
  letter-spacing: 0.1em;
  font-weight: var(--font-body-bold-weight, 600);
  text-transform: uppercase;
  margin-bottom: 15px;
}
.mega-menu-promotion--cover .text-button:before, .mega-menu-promotion--cover .text-button:after {
  top: calc(100% + 2px);
}
.mega-menu-promotion--cover .text-button:hover {
  color: #fff;
}
.mega-menu-promotion:hover img {
  transform: scale(1.05);
}
.mega-menu-promotion--small {
  width: 100%;
}
.mega-menu-promotion--small .mega-menu-promotion--cover {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 8px 15px;
  bottom: 10px;
  left: 10px;
  width: auto;
  max-width: 90%;
  background-color: var(--color-header-bg, var(--bg-body, #fff));
  font-weight: var(--font-body-medium-weight, 500);
  color: var(--color-header-links, --color-accent);
}
.mega-menu-promotion--small .mega-menu-promotion--cover p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 2px;
}

.mega-menu-sidebar {
  display: grid;
  grid-template-columns: 360px 1fr;
}
.mega-menu-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega-menu-sidebar--button {
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  gap: 15px;
  font-weight: var(--font-body-medium-weight, 500);
  white-space: normal;
  font-size: 1.125rem;
  color: rgba(var(--color-header-text-rgb, --color-body-rgb), 0.4);
  letter-spacing: 0.02em;
}
.navigation-uppercase-true .mega-menu-sidebar--button {
  text-transform: uppercase;
}
.mega-menu-sidebar--button svg {
  margin-left: auto;
  flex-shrink: 0;
}
.mega-menu-sidebar--button.active {
  color: var(--color-header-text, --color-body);
}
.mega-menu-sidebar--button.active:after {
  transform: scale(1, 1);
}
.mega-menu-sidebar--sidebar {
  padding: 40px 50px;
  width: 100%;
}
.mega-menu-sidebar--sidebar ul {
  position: sticky;
  top: 0;
  left: 0;
}
.mega-menu-sidebar--sidebar li {
  padding: 5px 0;
}
.mega-menu-sidebar--content {
  border-left: 1px solid var(--color-border);
  padding: 45px 50px;
}
.mega-menu-sidebar--content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.mega-menu-sidebar--content ul.active {
  display: grid;
}
.mega-menu-sidebar--content ul a {
  padding: 0;
  white-space: normal;
  font-size: 0.875rem;
}
.mega-menu-sidebar--content ul a span {
  line-height: inherit;
}
.mega-menu-sidebar--content .product-card {
  min-height: 100%;
  margin-bottom: 0;
}
.mega-menu-sidebar--content-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  color: var(--color-header-links);
}
@media only screen and (min-width: 768px) {
  .mega-menu-sidebar--content-container {
    gap: 15px;
  }
}
.mega-menu-sidebar--content-container span {
  text-transform: uppercase;
  display: inline-block;
}
.mega-menu-sidebar--content-image {
  overflow: hidden;
}

.mega-menu-promotions {
  width: 100%;
  max-width: 410px;
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  padding: 50px 50px 50px 0;
}

.menu-item-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: var(--font-body-bold-weight, 600);
  padding: 2px 6px;
  border-radius: 5px;
  margin-left: 10px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  transform: translateY(-5px);
  text-transform: uppercase;
  background: var(--menu-badge-bg);
  color: var(--menu-badge-text);
}



/* ---- Pedalatleten additions ---- */

/* Drawer overlay. OverlayManager (header-ref.js) uses its own body class, because
   layout/theme.liquid strips open-cc from body whenever no Clerk popup is open. */
body.header-ref-overlay-open {
  overflow: hidden;
}
body.header-ref-overlay-open #wrapper .click-capture {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Search runs through Clerk omnisearch (same as the old header), never the theme search drawer. */
.side-panel.search-drawer {
  display: none !important;
}

.thb-secondary-cart {
  position: relative;
}

/* Menupunkter der står for sig selv (header-indstillingen "Menupunkter der står for sig
   selv", fx Værksted). Ekstra luft + en hairline, så service-punktet ikke læses som en
   shop-kategori. Bruger ::after og ikke ::before, fordi :before er reserveret til
   hover-broen på .menu-item-has-children. */
.thb-full-menu > li.menu-item--standalone {
  position: relative;
  margin-left: calc(var(--navigation-item-spacing, 15px) * 1.4);
}
[dir=rtl] .thb-full-menu > li.menu-item--standalone {
  margin-left: 0;
  margin-right: calc(var(--navigation-item-spacing, 15px) * 1.4);
}
.thb-full-menu > li.menu-item--standalone::after {
  content: "";
  position: absolute;
  left: calc(var(--navigation-item-spacing, 15px) * -0.7);
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.3;
  pointer-events: none;
}
[dir=rtl] .thb-full-menu > li.menu-item--standalone::after {
  left: auto;
  right: calc(var(--navigation-item-spacing, 15px) * -0.7);
}
.thb-full-menu > li.menu-item--standalone > .thb-full-menu--link {
  color: var(--color-header-links, --color-accent);
}
/* Transparent header (forsiden, uden hover/sticky): hairlinen skal være hvid som
   resten af menuen, ellers forsvinder den i det mørke hero. Samme variabel som
   linkfarven og underlinjen ovenfor. */
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-full-menu > li.menu-item--standalone::after {
  background: var(--color-header-transparent-text, #fff);
  opacity: 0.4;
}

/* Topmenuen på desktop (style2, logo til venstre). Hamburger og skuffemenu
   bruges kun under 1068px (mobil og tablet); fra 1068px vises topmenuen altid.
   Listen er en nowrap-flex, og afstand og pladsen til chevronen glider ned fra
   temaets værdier ved 1720px til et minimum ved 1400px. Skriftstørrelsen
   krymper bevidst ikke (den blev for lille), så den følger temaets
   navigation_font_scale. --navigation-item-spacing-setting sættes i
   header-reformation.liquid ud fra temaindstillingen "navigation_item_spacing"
   og er loftet, så indstillingen stadig virker på brede skærme. */
@media only screen and (min-width: 1068px) {
  .thb-full-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    --navigation-item-spacing: clamp(5px, 3.125vw - 38.75px, var(--navigation-item-spacing-setting, 15px));
  }
  .thb-full-menu > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .thb-full-menu > li.menu-item-has-children > a {
    padding-right: clamp(11px, 1.25vw - 6.5px, 15px);
  }

  /* Er der ikke plads til menuen ved siden af logoet (smallere vindue, flere
     eller længere punkter, større skrift), sætter header-ref.js
     header--menu-stacked, og menuen får sin egen linje under logo og ikoner,
     fordelt over hele bredden. Det afgøres ved måling, ikke ved et fast
     breakpoint, så nye menupunkter håndteres automatisk. Er der heller ikke
     plads på den linje, sætter header-ref.js også header--menu-wrap, og
     punkterne ombrydes til flere linjer, så intet menupunkt skjules.
     .menu-logo-container forsvinder som boks (display: contents), så logo og
     menu bliver selvstændige celler i headerens grid. Listen har negativ
     margen på begge sider, så første og sidste punkts tekst flugter med logoet
     og ikonerne uden at ændre punkternes bredde (header-ref.js måler den). */
  .header.style2.header--menu-stacked .menu-logo-container {
    display: contents;
  }
  /* style1 (logo til venstre, menu i midten) har logo, menu og ikoner som
     tre celler i samme grid. På egen linje bliver det to kolonner: logo og
     ikoner øverst, menuen under dem i fuld bredde. */
  .header.style1.header--menu-stacked > .row > .columns {
    grid-template-columns: auto 1fr;
  }
  .header.style1.header--menu-stacked .logolink {
    grid-column: 1;
    grid-row: 1;
  }
  .header.style1.header--menu-stacked .thb-secondary-area {
    grid-column: 2;
    grid-row: 1;
  }
  .header.style2.header--menu-stacked .logolink,
  .header.style1.header--menu-stacked .logolink {
    margin-bottom: 10px;
  }
  .header.style2.header--menu-stacked .full-menu,
  .header.style1.header--menu-stacked .full-menu {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 4px;
  }
  .header.style2.header--menu-stacked .thb-full-menu,
  .header.style1.header--menu-stacked .thb-full-menu {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 calc(var(--navigation-item-spacing) * -1);
  }
  .header.style2.header--menu-stacked.header--menu-wrap .thb-full-menu,
  .header.style1.header--menu-stacked.header--menu-wrap .thb-full-menu {
    justify-content: flex-start;
  }
  /* "Menu altid på egen linje under logoet" (header--menu-below): punkterne
     står fra venstre i stedet for at blive spredt ud over hele bredden.
     Afstanden er temaets fra 1400px og glider ned til 6px ved 1068px, så
     punkterne bliver på én linje så længe som muligt. Klassen
     header--menu-stacked sættes allerede i Liquid, så layoutet er på plads,
     før header-ref.js har målt. */
  /* Tynd linje mellem logo-linjen og menulinjen, i hele headerens bredde
     (border-image rækker ud over kolonnens padding uden at give scroll). */
  .header.header--menu-stacked .full-menu {
    border-top: 1px solid transparent;
    border-image: linear-gradient(var(--header-divider-color), var(--header-divider-color)) 1 / 1px 0 0 / 0 100vw;
    padding-top: 2px;
  }
  /* Logo-linjen får en fast minimumshøjde, og logo og søgefelt centreres i
     den, i stedet for at hvile på margener. */
  .header.header--menu-stacked > .row > .columns {
    grid-template-rows: minmax(64px, auto) auto;
  }
  .header.style1.header--menu-stacked .logolink,
  .header.style2.header--menu-stacked .logolink {
    margin: 0;
  }
  .header.style2.header--menu-below .thb-full-menu,
  .header.style1.header--menu-below .thb-full-menu {
    justify-content: flex-start;
    --navigation-item-spacing: clamp(6px, 2.71vw - 22.9px, var(--navigation-item-spacing-setting, 15px));
  }
  /* Temaets usynlige hover-bro (li.menu-item-has-children:hover:before)
     holder mega-menuen åben, mens musen bevæger sig ned i den. Mega-menuens
     <li> er position: static, så broen går i hele headerens højde og lå
     oven på logoet og søgefeltet i linjen over, når et menupunkt under dem
     var åbent: klik på logoet eller i feltet gjorde ingenting. Logo og
     søgefelt lægges over broen. */
  .header.header--menu-stacked .logolink,
  .header.header--menu-stacked .header-search-bar {
    position: relative;
    z-index: 3;
  }
}

/* Mega-menuens kolonner lå alle på én række (grid-auto-flow: column med
   minmax(0, 1fr)), så en menu med 14 kollektioner fik ca. 68px brede kolonner,
   og lange overskrifter som "Cykelhandsker" løb ind i naboen. Nu har hver
   kolonne mindst 160px og ombryder til flere rækker, når der ikke er plads. */
@media only screen and (min-width: 1068px) {
  .thb-full-menu .mega-menu-columns {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-row-gap: 30px;
    align-items: start;
  }
}

/* Er en mega-menu højere end skærmen (fx Brands på en 1366x768-laptop), scroller
   den inde i sig selv. Scrollbaren er synlig som i menu-skuffen (se
   mobile-menu-ref.css), så man kan se, at der er flere punkter længere nede. */
.thb-full-menu .sub-menu.mega-menu-container {
  overscroll-behavior: contain;
}
.thb-full-menu .sub-menu.mega-menu-container::-webkit-scrollbar {
  width: 10px;
}
.thb-full-menu .sub-menu.mega-menu-container::-webkit-scrollbar-track {
  background: transparent;
}
.thb-full-menu .sub-menu.mega-menu-container::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 10px;
}
.thb-full-menu .sub-menu.mega-menu-container::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}
@supports not selector(::-webkit-scrollbar) {
  .thb-full-menu .sub-menu.mega-menu-container {
    scrollbar-width: thin;
    scrollbar-color: #c2c2c2 transparent;
  }
}

/* Skjul ved scroll ned / vis ved scroll op ("Sticky header behaviour" i
   sektionens indstillinger). header-ref.js sætter header--scrolled-away på
   <theme-header-ref>, når der scrolles ned forbi en tærskel, og igen når
   footeren er i viewport, så logoet kun vises ét sted ad gangen. Transformen
   ligger på selve headeren og ikke på .header-section, fordi den transparente
   forsidevariant er position: absolute og efterlader sektionen uden højde. */
.header.header-hide-on-scroll--active {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.header.header-hide-on-scroll--active.header--scrolled-away {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .header.header-hide-on-scroll--active {
    transition: none;
  }
}

/* Skillelinjens farve: headerens kantfarve, lys på den transparente header
   over hero-billedet. */
.header {
  --header-divider-color: var(--color-header-border, var(--color-border, #e5e5e5));
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) {
  --header-divider-color: rgba(255, 255, 255, 0.3);
}

/* Stort søgefelt ("Stort søgefelt i headeren", header--search-bar, kun
   sammen med header--menu-below). Som matas.dk: hvidt felt med grå kant og
   runde hjørner, teksten til venstre og luppen til højre. Søgeikonet skjules,
   men bliver i DOM'en, fordi Clerk åbner fra det.
   Desktop: logo til venstre, feltet i midten, ikonerne til højre.
   Mobil: menu-knap, logo (i midten) og ikoner på første linje, feltet i fuld bredde
   under dem. */
.header-search-bar {
  display: none;
}
.header.header--search-bar .thb-quick-search {
  display: none;
}
.header.header--search-bar .header-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 4px 0 16px;
  border: 1px solid #8f8f8f;
  border-radius: 6px;
  background: #fff;
  color: var(--color-header-text, #181E15);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s;
}
/* Hover som matas.dk: kun kanten bliver mørkere, stadig 1px. */
.header.header--search-bar .header-search-bar:hover {
  border-color: var(--color-header-text, #181E15);
}
/* Luppen står i en rund flade, der bliver grå ved hover, som matas.dk. */
.header.header--search-bar .header-search-bar svg {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 17px;
  height: 18px;
  padding: 7px 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}
.header.header--search-bar .header-search-bar:hover svg {
  background: #ececec;
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .header-search-bar:hover svg {
  background: rgba(255, 255, 255, 0.2);
}
.header.header--search-bar .header-search-bar svg path {
  stroke: currentColor;
}
.header.header--search-bar .header-search-bar__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #555;
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .header-search-bar {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-header-transparent-text, #fff);
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .header-search-bar .header-search-bar__text {
  color: inherit;
}
@media only screen and (max-width: 1067px) {
  /* Lige brede yderkolonner, så logoet står midt på skærmen og ikke lige
     efter menu-knappen. På smalle telefoner giver ikonerne plads før midten. */
  .header.header--search-bar > .row > .columns {
    grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 10px;
    padding-top: 8px;
    padding-bottom: 12px;
  }
  .header.header--search-bar .menu-logo-container {
    display: contents;
  }
  .header.header--search-bar .thb-header-mobile-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
  }
  .header.header--search-bar .logolink {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
  }
  .header.header--search-bar .thb-secondary-area {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .header.header--search-bar .header-search-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  /* Søgeikonet er væk, så der er plads til konto-ikonet på mobil (som
     matas.dk); temaet skjuler det ellers under 768px. */
  .header.header--search-bar .thb-secondary-area-item.thb-secondary-myaccount {
    display: inline-flex;
  }
}
@media only screen and (min-width: 1068px) {
  .header.header--menu-stacked.header--search-bar > .row > .columns {
    grid-template-columns: 1fr minmax(0, 560px) 1fr;
    column-gap: 30px;
  }
  .header.header--menu-stacked.header--search-bar .logolink {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .header.header--menu-stacked.header--search-bar .thb-secondary-area {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .header.header--menu-stacked.header--search-bar .header-search-bar {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Menu-knappen (hamburger) som en grå pille, som matas.dk. Gråtonen er
   footerens baggrund (footer-sektionen, "Light: background"). */
.mobile-toggle {
  width: 52px;
  height: 40px;
  margin-left: 0;
  border-radius: 20px;
  background: #f2f2f2;
  cursor: pointer;
  transition: background-color 0.2s;
}
.mobile-toggle:hover {
  background: #e6e6e6;
}
.mobile-toggle span {
  left: 17px;
  top: 14px;
}
.mobile-toggle span:nth-child(2) {
  top: 19px;
}
.mobile-toggle span:nth-child(3) {
  top: 24px;
}
.header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .mobile-toggle {
  background: rgba(255, 255, 255, 0.15);
}

/* Tekst under ikonerne ("Vis tekst under ikonerne", header--icon-labels),
   som matas.dk: ikon øverst, lille tekst under. Kun desktop; på mobil er der
   ikke plads, og teksten skjules. */
.thb-secondary-label {
  display: none;
}
@media only screen and (min-width: 1068px) {
  .header--icon-labels .thb-secondary-area-item {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 64px;
    padding: 0 8px;
  }
  .header--icon-labels .thb-secondary-area-item + .thb-secondary-area-item {
    margin-left: 12px;
  }
  .header--icon-labels .thb-secondary-area-item:last-child {
    padding-right: 0;
  }
  .header--icon-labels .thb-secondary-area-item > span:first-child,
  .header--icon-labels .thb-secondary-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
  }
  /* Ikonerne lidt større end temaets 17-20px, som hos matas.dk. 24px er den
     størrelse, "Tynd streg"-ikonerne (account-line, basket) er tegnet til, så
     de står skarpt 1:1. Stregerne holdes på deres egen tykkelse
     (non-scaling-stroke) i stedet for at blive skaleret til halve pixels,
     som ser uskarpt ud på skærme uden retina. */
  .header--icon-labels .thb-secondary-area-item > span:first-child svg,
  .header--icon-labels .thb-secondary-item-icon > svg {
    width: 24px;
    height: 24px;
  }
  .header--icon-labels .thb-secondary-area-item svg :is(path, circle) {
    vector-effect: non-scaling-stroke;
  }
  .header--icon-labels .thb-secondary-label {
    display: block;
    font-family: var(--font-body-family, inherit);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-header-text, #181E15);
    white-space: nowrap;
  }
  .header.transparent--true:not(.is-sticky):not(:has(.thb-full-menu > li.menu-item-has-children:hover)) .thb-secondary-label {
    color: var(--color-header-transparent-text, #fff);
  }

/* Tilgængelighed: topmenuen ligger i en <nav> (landmark "Hovedmenu") inde i
   <full-menu-ref>. Den skal opføre sig som listen gjorde, både i én linje og
   på egen linje (header--menu-stacked). Ikonerne i højre side er pakket i et
   <span class="thb-secondary-icon" aria-hidden="true">, så skærmlæsere kun læser den skjulte tekst. */
.full-menu__nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.thb-secondary-icon {
  display: inline-flex;
  align-items: center;
}