@import url('/modules/creativeelements/views/css/ce/2020101.css');
/**
 * Dahls skin for bm_headerfooter.
 *
 * The module owns the markup (mh-* / bmhf-* classes) and ships views/css/front.css
 * at priority 55. This file is the theme-level overlay: it re-states the values the
 * live dahl theme uses so the builder output reads as Dahls, not as the myhair build
 * front.css was written for. Declared in config/theme.yml at priority 1020, i.e.
 * after front.css (55) and after custom-bullbird.css (1010).
 *
 * Numbers are ported from themes/dahl/assets/css/custom.css — the line refs are in
 * the comments so a later reskin (REBASE-PLAN R4) can trace each one back.
 */

body#product .breadcrumb__wrapper .container,
body#category .breadcrumb__wrapper .container {
  padding: 0 !important;
}

/* ---------------------------------------------------------------- topbar ---
   custom.css:125 #topshipping, :137 ul, :143 li, :152 li img, :157/:163 the two
   right-hand links, :176/:180 the <992px rules. */
.bmhf-area--header .dg-topbar {
  background: #F2EFE9;
}
.bmhf-area--header .dg-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bmhf-area--header .dg-topbar__items,
.bmhf-area--header .dg-topbar__links {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bmhf-area--header .dg-topbar__item {
  padding: 5px 40px 5px 20px;
  font-size: 12px;
  font-weight: 500;
  background: url(../img/check.svg) no-repeat center left;
  text-decoration: underline;
}
.bmhf-area--header .dg-topbar__item a {
  color: inherit;
  text-decoration: inherit;
}
.bmhf-area--header .dg-topbar__link {
  padding: 5px 0 5px 40px;
}
.bmhf-area--header .dg-topbar__link a {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
}
.bmhf-area--header .dg-topbar__link img {
  width: 20px;
  margin-right: 4px;
}

@media (max-width: 992px) {
  /* Production uses two centered rows: delivery/engraving, then service. */
  .bmhf-area--header .dg-topbar .container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    min-height: 58px;
  }
  .bmhf-area--header .dg-topbar__link:last-child { display: none; }
  .bmhf-area--header .dg-topbar__items,
  .bmhf-area--header .dg-topbar__links {
    width: 100%;
    height: 29px;
    justify-content: center;
    overflow: visible;
  }
  .bmhf-area--header .dg-topbar__item {
    padding: 5px 10px 5px 20px;
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
  }
  .bmhf-area--header .dg-topbar__item:nth-child(n + 3) { display: none; }
  .bmhf-area--header .dg-topbar__link { padding: 5px 0; }
  .bmhf-area--header .dg-topbar__link a { font-size: 11px; line-height: 20px; }
}

/* ----------------------------------------------------------- header main ---
   custom.css:242 #header .header-top padding, :235 .right-nav, :1896 .head_gratis,
   :1502 the <1200px padding. */
.bmhf-area--header .dg-header-main {
  padding: 22px 0;
}
.bmhf-area--header .dg-header-main__row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bmhf-area--header .dg-col--logo { flex: 0 0 25%; max-width: 25%; }
.bmhf-area--header .dg-col--search { flex: 1 1 auto; min-width: 0; }
.bmhf-area--header .dg-col--right {
  /* Sized by its content, not a 25% track: at 25% the icon row ran out of room
     and the wishlist <img> (flex-shrink defaults to 1) collapsed to 0x0 while
     its text siblings kept their width. */
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.bmhf-area--header .dg-col--right > *,
.bmhf-area--header .dg-icons > *,
.bmhf-area--header .dg-icons img { flex: 0 0 auto; }
/* 150px, measured off dahlsgravering.dk — dahl's header.tpl says width="126" but
   the storefront CSS overrides it, so the template attribute is not the truth. */
.bmhf-area--header .mh-header__brand-img { width: 126px !important; height: auto !important; scale: 1.2; translate: 25px; }
.bmhf-area--header .dg-col--search { max-width: 710px; }
.bmhf-area--header .head_gratis {
  font-size: 14px;
  line-height: 18px;
  padding-right: 30px;
  color: #000;
  white-space: nowrap;
}
.bmhf-area--header .head_gratis span { display: block; }

/* Material Icons. ps_customersignin and ps_shoppingcart print their glyphs as
   <i class="material-icons">&#xE853;</i>. The @font-face is NOT declared here —
   dahlbb's own theme.css already ships it (family "Material Icons", woff2 in
   assets/fonts/). The font was never the problem; the cascade was.

   !important is not decoration here: the module's own front.css:563-568 sets
   `.bmhf-area.bmhf-area--header * { font-family: "DM Sans" … !important }`, so a
   normal declaration cannot win no matter how specific — that is what rendered
   the account/cart glyphs as tofu boxes on the first pass. */
.material-icons,
.bmhf-area.bmhf-area--header .material-icons,
.bmhf-area.bmhf-area--footer .material-icons {
  font-family: "Material Icons" !important;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* ------------------------------------------------------- header icon row ---
   Three modules, three different shapes: bm_wishlist ships a 26x22.8 <img>,
   ps_customersignin a 26x26 <svg viewBox="0 0 24 24">, bm_cart a 25x28 <img>.
   Left alone they sat at three different sizes and the cart hung 2.5px below
   the other two, because its taller image overflowed its own wrapper.

   So: one fixed square per icon, the icon centred inside it and free to keep its
   own aspect ratio (max-width/max-height, never a forced width+height, which
   would squash the non-square ones). Every ancestor between the square and the
   glyph has to be a centering flex box too, or the inner box re-introduces the
   offset. Spacing is then gap between equal squares, so the optical rhythm is
   even by construction. */
.bmhf-area--header .dg-col--right {
  --dg-icon-box: 26px;
  gap: 28px;
}
.bmhf-area--header .bm-wishlist-nav,
.bmhf-area--header #_desktop_user_info,
.bmhf-area--header .bm-cart-toggle-wrapper {
  flex: 0 0 auto;
  position: relative;               /* containing block for the glyph + badge */
  width: var(--dg-icon-box);
  height: var(--dg-icon-box);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* intermediate wrappers the three modules each add */
.bmhf-area--header .nxtal-wishlist-link,
.bmhf-area--header .bm-wishlist-nav > a,
.bmhf-area--header .user-info,
.bmhf-area--header .user-info .account,
.bmhf-area--header .blockcart,
.bmhf-area--header .bm-cart-toggle,
.bmhf-area--header .bm-cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.bmhf-area--header .bm-cart-toggle { cursor: pointer; }
/* Every one of these is marked position:relative by its own module (bm_cart gives
   .bm-cart-icon a hard 27x28 as well). Left alone they become the containing block
   for anything positioned inside and re-impose their own size, which is what kept
   the cart a pixel low and collapsed the heart. Neutralised. */
.bmhf-area--header .nxtal-wishlist-link,
.bmhf-area--header .bm-wishlist-nav a,
.bmhf-area--header .user-info,
.bmhf-area--header .user-info .account,
.bmhf-area--header .blockcart,
.bmhf-area--header .bm-cart-toggle {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
}
/* `display: contents` rather than sizing it: bm_cart's icon span kept resolving
   to 25px inside the 26px button and landing 1.5px low, and no width/height
   override moved it. Dropping its box makes the <img> a direct child of the
   button, centred by the button's own align-items — one less box to disagree.
   The count badge still anchors to the square, which is the positioned ancestor. */
.bmhf-area--header .bm-cart-icon { display: contents !important; }
/* The glyphs fill the square and letterbox themselves inside it.
   `object-fit: contain` rather than `width:auto` + max-*: the wishlist heart is
   an SVG file with a viewBox and NO width/height attributes, so `auto` resolves
   to 0 and the icon vanished; and letting each glyph size itself is what left
   the cart a pixel low. Both keep their aspect ratio — contain never distorts —
   and both are centred by the same rule, so their optical centres line up. */
/* One hard square per glyph — not a percentage, not `auto`. Percentages resolve
   against whichever wrapper happens to be positioned, which is exactly what went
   wrong twice; `auto` resolves to 0 for the heart, whose SVG file carries a
   viewBox but no width/height. object-fit/preserveAspectRatio then letterboxes
   each glyph inside its square, so all three share one box and one centre while
   keeping their own aspect ratio. */
.bmhf-area--header .bm-wishlist-nav img,
.bmhf-area--header .user-info .account svg,
.bmhf-area--header .bm-cart-icon svg,
.bmhf-area--header .bm-cart-custom-icon {
  position: static !important;
  width: var(--dg-icon-box) !important;
  height: var(--dg-icon-box) !important;
  /* the theme's `img { max-width: 100% }` reset was clamping the cart glyph to
     its wrapper's width, which is where the last stray pixel came from */
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;              /* letterbox, never distort */
  display: block;
  flex: 0 0 auto;
  color: #000;
}
/* Count bubble hangs off the square, not off the glyph, so it lands in the same
   spot no matter which icon file the shop configures. */
.bmhf-area--header .bm-cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

/* ------------------------------------------------------ megamenu backdrop ---
   Reproduces production's, which is `.ets_mm_megamenu::before`:
   rgba(0,0,0,0.5), position ABSOLUTE, z-index 9, `top: 50px` — i.e. it starts at
   the bottom edge of the nav bar and runs down the page. Nothing above the nav
   is ever covered, which is why production's header stays crisp.

   The module's own version (front.css:281-294) is `position: fixed; inset: 0`
   anchored on `.bmhf-area--header`. Inside `#header`'s stacking context
   (position:relative, z-index:50) at z-index:-1 it paints above the header's own
   background but below its text — so the whole header greyed out. Killed, and
   rebuilt here on the nav row instead. */
.bmhf-area--header::after,
.bmhf-area.bmhf-area--header:has(#bm-menu .bm-nav > .bm-item.has-dropdown:hover)::after {
  content: none !important;
}

/* The nav row is the anchor: the scrim hangs off its bottom edge (top: 100%),
   so no arithmetic against the header's height and nothing above it is dimmed. */
.bmhf-area--header .dg-header-nav { position: relative; z-index: 2; }
.bmhf-area--header .dg-header-nav::after {
  content: '';
  position: absolute;
  top: 100%;
  /* full-bleed: the nav is a 1450px band but the dim has to reach both edges */
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .5);   /* production's exact value */
  z-index: 1;                      /* panel is z-index 90 in this context */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;            /* never eat a click */
  transition: opacity .2s ease, visibility .2s;
}
.bmhf-area--header:has(#bm-menu .bm-nav > .bm-item.has-dropdown:hover) .dg-header-nav::after {
  opacity: 1;
  visibility: visible;
}
/* Header rows above the nav paint over the scrim regardless of its extent, so a
   future change to its geometry can't grey them out the way the module's did. */
.bmhf-area--header .dg-topbar,
.bmhf-area--header .dg-header-main { position: relative; z-index: 3; }

/* ------------------------------------------------------ megamenu panel ---
   bm_headerfooter restyles bm_menu's dropdown for the myhair build: the panel
   gets `width: max-content; min-width: 560px` and .bm-sub gets
   `grid-template-columns: repeat(var(--cols,3), minmax(140px,1fr))`.

   On this menu that combination feeds back on itself — `1fr` tracks inside a
   `max-content` box grow to the widest possible line, so a two-column dropdown
   measured 2250px wide inside a 1450px <nav>, and because left:0/right:0 plus an
   explicit width is over-constrained, the browser centred the overflow and put
   the first column ("Gaver til hende") at x = -732, off-screen. One column
   visible, an acre of white space, which is what broke the dropdowns.

   bm_menu's own layout is right for dahls and matches production: a panel that
   spans the nav band, with fixed 218px columns (mega-menu.css). So undo the
   module's overrides here and hand the geometry back. */
.bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Geometry and type below are measured off dahlsgravering.dk's own dropdown
   (ets_megamenu, "Til hvem"), not invented:
     panel   full-bleed white, flush under the nav, no shadow, 30px padding
     columns 237px wide, ~2px apart, content starting one band-gutter + 30px in
     heading 16px / 17.6px, weight 500, #000
     links   14px / 30px line-height, weight 300, #000, no padding
   The only thing deliberately NOT matched is the typeface: production is
   GT Walsheim, dahlbb is HansenGrotesque. Swapping it for the menu alone would
   leave the dropdown out of step with the rest of this theme — that is the R4
   reskin's call, not this file's. */
.bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop {
  /* full-bleed: escape the 1450px nav band to the viewport edges */
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  transform: none !important;          /* production has no drop-down offset */
  box-shadow: none !important;
  padding: 30px 0 !important;
  /* bullbird's custom-bullbird.css caps the panel inside @media (min-width:992px):
       .bm-menu .bm-item.has-dropdown > .bm-drop { max-height: calc(100vh - 200px); overflow: auto }
     On a 900px-tall window that is a 700px box around 750px of links, so the tail
     of a long menu ("Babytæppe", "Smykkeskrin") sat in an inner scroll area below
     the panel's own background. Production caps nothing — its panels grow from
     188px to 819px to fit — so neither do we. */
  max-height: none !important;
  overflow: visible !important;
}
.bmhf-area--header #bm-menu .bm-nav > .bm-item:hover > .bm-drop { transform: none !important; }
/* Inner band. Production nests `.mm_columns_ul` (full-bleed, 30px padding) >
   `.submenu-wrap` (max-width 1420px, centred) > 237px columns, which lands the
   first column at x≈98. Same two-step here. The selector carries the full
   `.bm-nav > .bm-item >` chain because front.css's own container rule does, and
   a shorter one loses on specificity. */
.bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop > .container {
  max-width: 1420px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
/* One row, fixed 237px columns, butted together — production measures a gap of
   0/-1 and every one of its panels is a single row. `auto-fill` with a fixed
   track cannot do that: it computes floor(1420 / 237) = 5 tracks, so the widest
   menu (Smykker, 6 columns) wrapped onto a second row. `grid-auto-flow: column`
   lays however many columns the menu has in one line instead of fitting them to
   the band. Max in this menu is 6 = 1422px, i.e. 2px over the band — invisible;
   a future menu with more columns would overflow and need a rethink. */
.bmhf-area--header #bm-menu .bm-drop .bm-sub {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 237px !important;
  justify-content: start !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}
.bmhf-area--header #bm-menu .bm-drop .bm-sub-col { width: 237px !important; }

/* Type. The column markup is
     li.bm-sub-col > ul.bm-col-list > li.bm-item > a            <- heading
                                    > li.bm-item.is-html > .bm-html-inline > a  <- links
   so the heading has to be selected by its position, not by a class, and the
   link rule must NOT be `li a` or it swallows the heading too. */
.bmhf-area--header #bm-menu .bm-drop .bm-sub-col > .bm-col-list > .bm-item:first-child > a,
.bmhf-area--header #bm-menu .bm-drop .bm-sub-col > .bm-col-list > .bm-item:first-child > a span {
  font-size: 16px !important;
  line-height: 17.6px !important;
  font-weight: 500 !important;
  color: #000 !important;
  padding: 0 !important;
}
.bmhf-area--header #bm-menu .bm-drop .bm-sub-col > .bm-col-list > .bm-item:first-child {
  margin-bottom: 13px !important;   /* production: heading top 204 -> first link 235 */
  padding-left: 5px !important;     /* production indents the block 5px (mm_blocks_li) */
}
.bmhf-area--header #bm-menu .bm-drop .bm-html-inline {
  padding-left: 5px !important;
}
.bmhf-area--header #bm-menu .bm-drop .bm-html-inline a {
  font-size: 14px !important;
  line-height: 30px !important;
  font-weight: 300 !important;
  color: #000 !important;
  padding: 0 !important;
}

/* Burger: hidden on desktop, where bm_menu draws the full nav band itself. */
.bmhf-area--header .mh-header__mobile-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 0 10px 0 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1199px) {
  .bmhf-area--header .dg-header-main { padding: 14px 0; }
}
@media (max-width: 991px) {
  /* custom.css:3205 — the free-engraving pitch is desktop-only. */
  .bmhf-area--header .head_gratis { display: none !important; }
  .bmhf-area--header .dg-header-main { padding: 14px 0 7px; }
  .bmhf-area--header .dg-header-main__row {
    position: relative;
    flex-wrap: wrap;
    gap: 26px 0;
  }
  .bmhf-area--header .dg-col--logo,
  .bmhf-area--header .dg-col--right { flex: 0 0 50%; max-width: 50%; }
  .bmhf-area--header .dg-col--search {
    flex: 0 0 calc(100% + 20px);
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    margin-inline: -10px;
    order: 3;
  }
  .bmhf-area--header .bm-search-trigger-mock {
    height: 34px;
    min-height: 34px;
    padding-block: 7px;
  }
  .bmhf-area--header .dg-col--logo {
    position: relative;
    display: flex;
    align-items: center;
  }
  .bmhf-area--header .mh-header__mobile-toggle {
    display: inline-flex;
    width: 22px;
    height: 16px;
    margin-left: 15px;
    padding: 0;
    border: 0;
    font-size: 0;
    translate: 0 -1px;
    background: linear-gradient(to bottom, #000 0 2px, transparent 2px 7px, #000 7px 9px, transparent 9px 14px, #000 14px 16px);
  }
  .bmhf-area--header .mh-header__mobile-toggle .ph { display: none; }
  .bmhf-area--header .mh-header__brand {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 120px;
    transform: translate(-50%, -50%);
  }
  .bmhf-area--header .mh-header__brand-img {
    width: 120px !important;
    max-width: none;
    scale: 1.2;
    translate: 0 6px;
  }
  .bmhf-area--header .dg-col--right {
    gap: 12px;
  }
  .bmhf-area--header .dg-col--right > .bm-hf-text,
  .bmhf-area--header .dg-col--right > #_desktop_user_info {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- footer ---
   custom.css:2850 band colour, :1125 padding/colour, :1280 the base row,
   :1632 the mobile padding. The module renders each column as
   <details class="mh-footer__group"> inside .mh-footer__linkgrid. */
/* The band, not just the card. bullbird paints #footer dark; dahl's footer is one
   flat #f2efe9 block from the USP strip down to the copyright line, so the colour
   goes on the area wrapper and the layout's own <footer id="footer"> too. */
/* front.css paints `.mh-footer` with
   `background: var(--bg-walnut,#2A1F18) !important; color: var(--cream) !important`
   — it uses !important there to beat a theme rule on product pages, so nothing
   short of !important repaints it. Dahls' footer is cream with dark text. */
#footer,
.bmhf-area--footer,
.bmhf-area--footer .mh-footer,
.bmhf-area--footer .mh-footer__inner,
.bmhf-area--footer .dg-footer {
  background: #f2efe9 !important;
  color: #757575 !important;
}
/* dahlbb globally defers `.mh-footer` with content-visibility:auto.  That left
   the shared footer at an 800px placeholder and with blank innerText until it
   was nearly on screen; production lays the footer out immediately. */
.bmhf-area--footer .mh-footer {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}
/* Same reason: the USP strip is creativeelements content and inherits the cream
   text colour the walnut footer set, which left it invisible on cream. */

.bmhf-area--footer .dg-footer {
  padding: 70px 0 0;
  color: #757575;
  font-size: 14px;
}

/* Two tracks: the contact column (avatar, phone/email, socials, address, cards)
   and everything else. The contact blocks are separate grid items stacked in
   column 1; the link columns arrive as ONE .mh-footer__linkgrid because
   area.tpl wraps consecutive link_list blocks, and the newsletter sits under it. */
.bmhf-area--footer .dg-footer .container {
  display: grid;
  grid-template-columns: 225px 1fr;
  column-gap: 115px;
  max-width: 1450px;
  padding-left: 30px;
  padding-right: 30px;
  align-items: start;
}
.bmhf-area--footer .dg-footer .container > * { grid-column: 1; }
.bmhf-area--footer .dg-footer .container > .mh-footer__linkgrid { grid-column: 2; grid-row: 1 / span 5; }
.bmhf-area--footer .dg-footer .container > .dg-newsletter { grid-column: 2; grid-row: 6; }

/* contact column */
.bmhf-area--footer img.ava {
  width: 70px;
  height: 70px;
  border-radius: 0;
  object-fit: cover;
  margin-bottom: 14px;
}
/* The block prints eyebrow, email, phone, hours in that DOM order; production
   reads "Ring til os" / big phone number / email / opening note, so the order is
   set here rather than by forking the template. */
.bmhf-area--footer .mh-footer__contact {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}
.bmhf-area--footer .mh-footer__eyebrow { order: 1; color: #000 !important; font-size: 14px; margin-bottom: 6px; }
.bmhf-area--footer .mh-footer__phone {
  order: 2;
  font-size: 30px;
  line-height: 40px;
  font-weight: 500;
  color: #000 !important;
  margin: 0 0 25px;
}
.bmhf-area--footer .mh-footer__email { order: 3; color: #333 !important; font-size: 14px; line-height: 28px; font-weight: 400; }
.bmhf-area--footer .mh-footer__hours { order: 4; font-size: 14px; margin: 4px 0 0; }
.bmhf-area--footer .mh-footer__socials { display: flex; gap: 14px; margin: 18px 0; align-items: center; height: 48px; }
/* Plain glyphs on the cream, not the module's filled dark pills. */
.bmhf-area--footer .mh-footer__social svg { width: 24px; height: 24px; }
.bmhf-area--footer .mh-footer__social {
  color: #000 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex;
  padding: 0 !important;
}
.bmhf-area--footer .mh-footer__address { color: #757575 !important; font-style: normal; line-height: 1.9; margin: 0 0 18px; }
.bmhf-area--footer img.card-payment { max-width: 225px; height: auto; }

/* link columns */
.bmhf-area--footer .mh-footer__linkgrid {
  display: grid;
  grid-template-columns: repeat(4, 233px);
  column-gap: 29px;
  row-gap: 25px;
}
/* area.tpl moves "Dine fordele" from fifth to second so DOM and visual order
   match production; it still sits below Information on desktop. */
.bmhf-area--footer .mh-footer__linkgrid > *:nth-child(2) { grid-column: 1; grid-row: 2; }
.bmhf-area--footer .mh-footer__heading {
  font-size: 18px;
  line-height: 60px;
  font-weight: 500;
  color: #000 !important;
  list-style: none;
  cursor: default;
  margin-bottom: 0;
}
.bmhf-area--footer .mh-footer__heading::-webkit-details-marker { display: none; }
.bmhf-area--footer .mh-footer__chev { display: none; }
.bmhf-area--footer .mh-footer__list { margin: 0; padding: 0; list-style: none; }
.bmhf-area--footer .mh-footer__list li { margin-bottom: 3px; line-height: 28px; }
.bmhf-area--footer .mh-footer__list { margin-top: -4px; }
.bmhf-area--footer .mh-footer__list a { color: #666 !important; font-size: 14px; line-height: 28px; }
.bmhf-area--footer .mh-footer__list a:hover { color: #000 !important; }

/* "Dine fordele" is a checkmark list on production, not navigation. */
.bmhf-area--footer .mh-footer__linkgrid > *:nth-child(2) .mh-footer__list li {
  position: relative;
  padding-left: 24px;
}
.bmhf-area--footer .mh-footer__linkgrid > *:nth-child(2) .mh-footer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url(../img/check.svg) no-repeat center / contain;
}
.bmhf-area--footer .mh-footer__linkgrid > *:nth-child(2) .mh-footer__list a {
  pointer-events: none;
  cursor: default;
}

/* newsletter — Klaviyo mounts its own card into this div */
.bmhf-area--footer .dg-newsletter { margin-top: 40px; max-width: 780px; }
.bmhf-area--footer .dg-newsletter__fallback { color: #000; }
.bmhf-area--footer .dg-newsletter:has(.klaviyo-form-Vy8z7r:not(:empty)) .dg-newsletter__fallback {
  display: none;
}
.bmhf-area--footer .dg-newsletter__title,
.bmhf-area--footer .dg-newsletter__lead,
.bmhf-area--footer .dg-newsletter__legal { margin: 0; }
.bmhf-area--footer .dg-newsletter__title {
  font-family: 'GT Walsheim', sans-serif;
  font-size: 18px;
  line-height: 27px;
  font-weight: 500;
}
.bmhf-area--footer .dg-newsletter__lead { font-size: 14px; line-height: 26px; }
.bmhf-area--footer .dg-newsletter__form {
  display: flex;
  margin-top: 10px;
}
.bmhf-area--footer .dg-newsletter__input,
.bmhf-area--footer .dg-newsletter__button {
  height: 54px;
  border: 0;
  border-radius: 0;
  font: 14px/14px 'DM Sans', sans-serif;
}
.bmhf-area--footer .dg-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px;
  background: #fff;
  color: #000;
  opacity: 1;
}
.bmhf-area--footer .dg-newsletter__button {
  flex: 0 0 148px;
  padding: 0 12px;
  background: #228c60;
  color: #fff;
  opacity: 1;
}
.bmhf-area--footer .dg-newsletter__legal {
  max-width: 650px;
  padding-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

/* base row — copyright left, Bullmade credit right */
.bmhf-area--footer .dg-footer-base { background: #f2efe9; }
.bmhf-area--footer .dg-footer-base .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.bmhf-area--footer .mh-footer__copy { margin: 0; font-size: 14px; line-height: 29px; color: #757575 !important; }
.bmhf-area--footer .bulllogo img { width: 90px; height: auto; opacity: .5; }

/* The Instagram link is a floating pill on production, not a footer row item. */
.bmhf-area--footer .mh-footer__legal {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  margin: 0;
  padding: 12px 16px;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  max-width: 150px;
  text-align: center;
}
.bmhf-area--footer .mh-footer__legal a { color: #000; font-size: 13px; line-height: 1.3; }

@media (max-width: 991px) {
  .bmhf-area--footer .dg-footer { padding: 30px 0 20px; }
  .bmhf-area--footer .dg-footer .container { grid-template-columns: 1fr; row-gap: 30px; }
  .bmhf-area--footer .dg-footer .container > .mh-footer__linkgrid,
  .bmhf-area--footer .dg-footer .container > .dg-newsletter { grid-column: 1; grid-row: auto; }
  .bmhf-area--footer .mh-footer__linkgrid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .bmhf-area--footer .mh-footer__linkgrid > *:nth-child(2) { grid-column: auto; grid-row: auto; }
  .bmhf-area--footer .dg-footer-base .container { flex-direction: column; text-align: center; }
}
@media (max-width: 575px) {
  .bmhf-area--footer .mh-footer__linkgrid { grid-template-columns: 1fr; }
  .bmhf-area--footer .mh-footer__heading { cursor: pointer; }
  .bmhf-area--footer .mh-footer__legal { display: none; }
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('../fonts/GTWalsheim-Regular.woff2') format('woff2'), url('../fonts/GTWalsheim-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('../fonts/GTWalsheim-Medium.woff2') format('woff2'), url('../fonts/GTWalsheim-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('../fonts/GTWalsheim-Light.woff2') format('woff2'), url('../fonts/GTWalsheim-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('../fonts/GTWalsheim-Bold.woff2') format('woff2'), url('../fonts/GTWalsheim-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.bmhf-area--footer .mh-footer__heading,
.bmhf-area--footer .mh-footer__phone,
.bmhf-area--header .dg-topbar__item,
.bmhf-area--header .dg-topbar__link a,
.bmhf-area--header .head_gratis,
.bmhf-area--header #bm-menu .bm-nav > .bm-item > a,
.bmhf-area--header #bm-menu .bm-drop .bm-sub-col > .bm-col-list > .bm-item:first-child > a,
.bmhf-area--header #bm-menu .bm-drop .bm-sub-col > .bm-col-list > .bm-item:first-child > a span {
  font-family: 'GT Walsheim', sans-serif !important;
}

.bmhf-area--footer .mh-footer__list a,
.bmhf-area--footer .mh-footer__email,
.bmhf-area--footer .mh-footer__hours,
.bmhf-area--footer .mh-footer__eyebrow,
.bmhf-area--footer .mh-footer__address,
.bmhf-area--footer .mh-footer__copy,
.bmhf-area--footer .dg-foot-top,
.bmhf-area--footer .dg-foot-top *,
.bmhf-area--header #bm-menu .bm-drop .bm-html-inline a {
  font-family: 'DM Sans', sans-serif !important;
}

.bmhf-area--footer .dg-foot-top { padding: 70px 0 0; }
.bmhf-area--footer .dg-foot-top .container {
  max-width: 1450px;
  padding: 0 30px 70px;
  border-bottom: 1px solid #ddd;
}

.bmhf-area--footer .dg-foot-top .elementor-image-box-title {
  color: #232323 !important;
  line-height: 28.365px;
}
.bmhf-area--footer .dg-foot-top .elementor-image-box-description {
  color: #2d2d2d !important;
  line-height: 18px;
}

@media (max-width: 1024px) {
  body:has(.mh-mobnav.is-open) #header { z-index: 10060; }
  .mh-mobnav-overlay { z-index: 10040; }

  .mh-mobnav {
    width: 280px;
    max-width: none;
    padding: 10px 10px 20px;
    background: #f3ebdb;
    box-shadow: none;
    z-index: 10050;
  }

  .mh-mobnav__head {
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
  }

  .mh-mobnav__title {
    color: #484848;
    font-family: 'GT Walsheim', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .mh-mobnav__close {
    width: 38px;
    height: 38px;
    margin-right: -10px;
    border-radius: 0;
  }

  .mh-mobnav__close:hover { background: transparent; }
  .mh-mobnav__close img { width: 18px; height: 18px; }

  .mh-mobnav__nav {
    display: block;
    padding: 5px 0 0;
  }

  .mh-mobnav__primary,
  .mh-mobnav__categories {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mh-mobnav__categories { margin-top: 5px; }

  .mh-mobnav__primary > .mh-mobnav__link,
  .mh-mobnav__row {
    box-sizing: border-box;
    height: 59px;
    min-height: 59px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.067);
    border-radius: 0;
    background: #fff;
  }

  .mh-mobnav__primary > .mh-mobnav__link:first-child,
  .mh-mobnav__categories > .mh-mobnav__category:first-child .mh-mobnav__row { border-radius: 8px 8px 0 0; }

  .mh-mobnav__primary > .mh-mobnav__link:last-child,
  .mh-mobnav__categories > .mh-mobnav__category:last-child .mh-mobnav__row { border-radius: 0 0 8px 8px; }

  .mh-mobnav__link {
    min-width: 0;
    padding: 0 15px;
    border: 0;
    color: #484848;
    font-family: 'GT Walsheim', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 59px;
  }

  .mh-mobnav__primary > .mh-mobnav__link { font-weight: 500; }
  .mh-mobnav__categories .mh-mobnav__link { font-weight: 300; }

  .mh-mobnav__row {
    display: flex;
    align-items: center;
  }

  .mh-mobnav__row .mh-mobnav__link { flex: 1; }

  .mh-mobnav__submenu-toggle,
  .mh-mobnav__submenu-link {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 59px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .mh-mobnav__submenu-toggle span::before,
  .mh-mobnav__submenu-toggle span::after,
  .mh-mobnav__submenu-link span::before,
  .mh-mobnav__submenu-link span::after {
    position: absolute;
    top: 29px;
    right: 15px;
    width: 14px;
    height: 1px;
    background: #484848;
    content: '';
  }

  .mh-mobnav__submenu-toggle span::after,
  .mh-mobnav__submenu-link span::after { transform: rotate(90deg); }
  .mh-mobnav__submenu-toggle[aria-expanded='true'] span::after { transform: rotate(0); }

  .mh-mobnav__category:has(.mh-mobnav__submenu-toggle[aria-expanded='true']) .mh-mobnav__row {
    border-radius: 8px 8px 0 0;
  }

  .mh-mobnav__submenu {
    display: flex;
    flex-direction: column;
    padding: 4px 35px 14px;
    border-radius: 0 0 8px 8px;
    background: #fff;
  }

  .mh-mobnav__submenu[hidden] { display: none; }

  .mh-mobnav__submenu a {
    padding: 7px 0;
    border: 0;
    color: #484848;
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
  }

  .mh-mobnav__submenu .mh-mobnav__submenu-heading {
    padding: 4px 0 9px;
    margin-bottom: 9px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
  }

  .mh-mobnav__submenu-custom a { display: block; }
  .mh-mobnav__submenu-custom br { display: none; }
  .mh-mobnav__submenu-custom + .mh-mobnav__submenu-heading { margin-top: 18px; }

  .mh-mobnav__foot {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  .mh-mobnav__foot li {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 8px 12px;
    background: #fff;
    color: #484848;
    font-size: 15px;
  }

  .mh-mobnav__foot li:first-child { border-radius: 8px 8px 0 0; }
  .mh-mobnav__foot li:last-child { border-radius: 0 0 8px 8px; }
  .mh-mobnav__foot li + li { border-top: 1px solid rgba(0, 0, 0, 0.067); }
  .mh-mobnav__foot img { width: 32px; height: 33px; padding: 1px 6px; margin-right: 5px; }

  .mh-mobnav__contact {
    min-height: 51px !important;
    padding-left: 52px !important;
    background: #fff url('../img/elke_dahl.png') no-repeat 12px center !important;
  }

  .mh-mobnav__contact a,
  .mh-mobnav__contact strong,
  .mh-mobnav__contact span { display: block; color: #484848; }

  .mh-mobnav__contact strong { font-size: 15px; font-weight: 500; }
  .mh-mobnav__contact span { color: #56726f; font-size: 11px; }
}

@media (max-width: 991.98px) {
  .bmhf-area--header #bm-menu.bm-menu { display: block !important; }
  .bmhf-area--header #bm-menu.bm-menu > .toggle-open { display: none !important; }
  body:has(#bm-nav.open) #header { z-index: 10060; }

  .bmhf-area--header #bm-menu.overlay > .bm-nav {
    width: 280px !important;
    max-width: 280px !important;
    padding: 10px !important;
    scrollbar-gutter: stable;
    box-shadow: none !important;
  }

  .bmhf-area--header #bm-menu .bm-nav-header {
    min-height: 38px !important;
    padding: 0 10px !important;
  }

  .bmhf-area--header #bm-menu .bm-nav-header::before { content: none !important; }

  .bmhf-area--header #bm-menu .bm-nav > .bm-item > a {
    min-height: 58px !important;
    padding-block: 10px !important;
  }

  body:has(#bm-nav.open) .bmhf-area--header .dg-header-nav { z-index: 10070; }

  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 30px 22px !important;
  }

  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop .bm-sub {
    display: block !important;
    width: 100% !important;
    grid-template-columns: none !important;
  }

  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop .bm-sub-col {
    width: 100% !important;
  }

  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop .bm-sub-col + .bm-sub-col {
    margin-top: 28px !important;
  }
}

.bm-menu#bm-menu > .bm-nav { gap: 0 !important; }
.bm-menu .bm-item > a { padding-inline: 0.5rem !important; }