/* bm_headerfooter — structural helpers only.
   The mh-* header/footer look comes from the theme's custom-bullbird.css.
   One section tree is rendered per request, chosen by device in renderArea(). */
.bmhf-area { display: block; }
.bm-hf-col { box-sizing: border-box; }
.bm-hf-spacer { width: 100%; }

/* ===========================================================================
 * Rich content widgets — self-contained styling (the theme has no mh-* rules
 * for these). Brand blue accent; neutral, modern, responsive.
 * =========================================================================== */
.bmhf-area { --bmhf-blue: #0553FE; --bmhf-ink: #15171c; --bmhf-muted: #5b6473; --bmhf-line: #e6e8ef; }

/* announcement bar */
.bmhf-announce { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 18px; background: var(--bmhf-blue); color: #fff; font-size: 14px; font-weight: 600; }
.bmhf-announce--center { justify-content: center; text-align: center; }
.bmhf-announce__msg { display: inline-flex; align-items: center; gap: 8px; }
.bmhf-announce__msg i { font-size: 18px; }
.bmhf-announce__link { color: inherit; text-decoration: underline; font-weight: 700; }

/* USP icon strip */
.bmhf-usps { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; padding: 12px 16px; }
.bmhf-usps__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--bmhf-ink); }
.bmhf-usps__item i { font-size: 20px; color: var(--bmhf-blue); }

/* button / CTA */
.bmhf-btn { --bmhf-btn: var(--bmhf-blue); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: 2px solid var(--bmhf-btn); transition: filter .15s, background .15s, color .15s; line-height: 1; }
.bmhf-btn--primary { background: var(--bmhf-btn); color: #fff; }
.bmhf-btn--primary:hover { filter: brightness(1.08); color: #fff; }
.bmhf-btn--outline { background: transparent; color: var(--bmhf-btn); }
.bmhf-btn--outline:hover { background: var(--bmhf-btn); color: #fff; }
.bmhf-btn--ghost { background: transparent; color: var(--bmhf-btn); border-color: transparent; }
.bmhf-btn--ghost:hover { text-decoration: underline; }
.bmhf-btn--block { display: flex; width: 100%; }
.bmhf-btn i { font-size: 17px; }

/* heading */
.bmhf-heading { margin: 0; padding: 4px 0; }
.bmhf-heading--center { text-align: center; }
.bmhf-heading--right { text-align: right; }
.bmhf-heading__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--bmhf-blue); margin-bottom: 6px; }
.bmhf-heading__title { margin: 0; font-weight: 800; color: var(--bmhf-ink); line-height: 1.15; }
.bmhf-heading--sm .bmhf-heading__title { font-size: 18px; }
.bmhf-heading--md .bmhf-heading__title { font-size: 24px; }
.bmhf-heading--lg .bmhf-heading__title { font-size: 32px; }
.bmhf-heading--xl .bmhf-heading__title { font-size: 42px; }
.bmhf-heading__sub { margin-top: 6px; color: var(--bmhf-muted); font-size: 15px; }

/* divider */
.bmhf-divider { width: 100%; }

/* newsletter — slim, centered, single-line bar */
.bmhf-newsbar { background: #eef4ff; border-bottom: 1px solid #dbe6ff; }
.bmhf-newsletter { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px 18px; flex-wrap: wrap; padding: 10px 16px; }
.bmhf-newsletter__head { font-size: 15px; font-weight: 800; color: var(--bmhf-ink); margin: 0; }
.bmhf-newsletter__text { font-size: 13px; color: var(--bmhf-muted); margin: 0; }
.bmhf-newsletter__row { display: flex; gap: 8px; flex: 0 1 440px; min-width: 240px; }
.bmhf-newsletter__input { flex: 1 1 auto; min-width: 0; padding: 9px 14px; border: 1px solid var(--bmhf-line); border-radius: 10px; font-size: 14px; background: #fff; }
.bmhf-newsletter__input:focus { outline: none; border-color: var(--bmhf-blue); box-shadow: 0 0 0 3px rgba(5,83,254,.12); }
.bmhf-newsletter .bmhf-btn { flex: 0 0 auto; white-space: nowrap; }

/* info card */
.bmhf-infocard { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--bmhf-line); border-radius: 12px; background: #fff; }
.bmhf-infocard__icon { font-size: 26px; color: var(--bmhf-blue); flex-shrink: 0; }
.bmhf-infocard__body strong { display: block; font-size: 15px; color: var(--bmhf-ink); }
.bmhf-infocard__body p { margin: 2px 0 0; font-size: 13px; color: var(--bmhf-muted); }

/* countdown */
.bmhf-countdown { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--bmhf-ink); color: #fff; font-weight: 700; }
.bmhf-countdown__label { font-size: 13px; opacity: .85; }
.bmhf-countdown__clock { font-variant-numeric: tabular-nums; font-size: 16px; letter-spacing: .5px; }

/* trust badges */
.bmhf-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bmhf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #f1f4fb; color: var(--bmhf-ink); font-size: 12px; font-weight: 600; }
.bmhf-badge i { font-size: 16px; color: var(--bmhf-blue); }

/* app store badges */
.bmhf-appbadges { display: flex; flex-wrap: wrap; gap: 10px; }
.bmhf-appbadge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 10px; background: var(--bmhf-ink); color: #fff; text-decoration: none; }
.bmhf-appbadge i { font-size: 26px; }
.bmhf-appbadge span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 15px; }
.bmhf-appbadge small { font-size: 10px; font-weight: 500; opacity: .8; text-transform: uppercase; letter-spacing: .4px; }

/* language / currency switcher */
.bmhf-switch { display: inline-flex; gap: 12px; align-items: center; }
.bmhf-switch__group { display: inline-flex; align-items: center; gap: 6px; color: var(--bmhf-muted); }
.bmhf-switch__select { border: 1px solid var(--bmhf-line); border-radius: 8px; padding: 5px 8px; font-size: 13px; background: #fff; color: var(--bmhf-ink); cursor: pointer; }

/* contact bar */
.bmhf-contactbar { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.bmhf-contactbar__item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--bmhf-ink); text-decoration: none; }
.bmhf-contactbar__item i { font-size: 18px; color: var(--bmhf-blue); }
.bmhf-contactbar__item:hover { color: var(--bmhf-blue); }

/* back to top */
.bmhf-totop { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--bmhf-line); background: #fff; color: var(--bmhf-ink); font-weight: 600; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.bmhf-totop:hover { border-color: var(--bmhf-blue); color: var(--bmhf-blue); }
.bmhf-totop i { font-size: 16px; }

@media (max-width: 767px) {
  .bmhf-heading--xl .bmhf-heading__title { font-size: 30px; }
  .bmhf-heading--lg .bmhf-heading__title { font-size: 26px; }
  .bmhf-usps { gap: 10px 18px; }
}

/* ===========================================================================
 * Footer band alignment (Freja Skind dark ".ft-*" footer, injected inline).
 *
 * The footer bands have padding:var(--gutter); their CONTENT lands on the
 * global var(--max) band only if the box is max-width:calc(var(--max) + 2*gutter).
 * The DB/builder rule resets to max-width:var(--max) (so content ends up one
 * gutter inside the band), and it gets re-seeded on every header/footer import.
 * Force the widened box here (specificity 0,3,0 beats the inline 0,2,0 rule) so
 * the footer content + divider lines align with the header/page band and stay
 * aligned across re-imports.
 *
 * The two divider lines are moved onto pseudo-elements inset by one gutter so
 * they sit on the band edge (not on the wider outer box). Specificity 0,2,0
 * (.bmhf-area--footer .ft-top) beats the inline 0,1,0 `.ft-top` border rule.
 * =========================================================================== */
.bmhf-area.bmhf-area--footer .ft-top,
.bmhf-area.bmhf-area--footer .ft-grid,
.bmhf-area.bmhf-area--footer .ft-bottom { max-width: calc(var(--max) + 2 * var(--gutter)); }
.bmhf-area--footer .ft-top { position: relative; }
.bmhf-area--footer .ft-top::after,
.bmhf-area--footer .ft-bottom::before {
  content: ""; position: absolute;
  left: var(--gutter, 3rem); right: var(--gutter, 3rem);
  pointer-events: none;
}
.bmhf-area--footer .ft-top::after { bottom: 0; border-bottom: 1px solid rgba(216, 192, 160, .15); }
.bmhf-area--footer .ft-bottom::before { top: 0; border-top: 1px solid rgba(216, 192, 160, .12); }

/* ===========================================================================
 * Header bar side gutter on mobile.
 *
 * The inline header CSS sets `.bmhf-area--header .nav-top { padding-left:0;
 * padding-right:0 }` with no media query, so on phones the hamburger / logo /
 * cart sit flush against the screen edges. Restore the gutter at <=768px only
 * (desktop keeps its centered, padding-free band). Specificity 0,3,0 beats the
 * inline 0,2,0 rule, so no !important needed.
 * =========================================================================== */
@media (max-width: 768px) {
  .bmhf-area.bmhf-area--header .nav-top { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ===========================================================================
 * Header search: drop the 380px cap on tablet + mobile so it fills the row.
 *
 * The inline header CSS has a trailing `.bmhf-area--header .nav-search
 * { max-width: 380px }` (no media) that overrides its own
 * @media(max-width:768px){max-width:none}, so the cap survives on small
 * screens. Force max-width:none at <=1100px (specificity 0,3,0 beats 0,2,0).
 * =========================================================================== */
@media (max-width: 1100px) {
  .bmhf-area.bmhf-area--header .nav-search { max-width: none; }
}

/* announcement bar tweaks (0,3,0 beats the inline 0,2,0 rules) */
.bmhf-area.bmhf-area--header .announce-track { gap: 1.5rem; }
.bmhf-area.bmhf-area--header .announce { font-size: .65rem; letter-spacing: 0.05em; }
/* no marquee on mobile — keep it static/centered like desktop */
@media (max-width: 768px) {
  .bmhf-area.bmhf-area--header .announce-track {
    flex-wrap: wrap; white-space: normal; padding-left: 0;
    animation: none; justify-content: center;
  }
  /* show only the first 2 messages + the dot between them; hide the rest.
     !important because the last item (flag) carries an inline display style. */
  .bmhf-area.bmhf-area--header .announce-track > span:nth-child(n+4) { display: none !important; }
}

/* ===========================================================================
 * bm_menu integration — style the bull menu (.bmhf-area--header #bm-menu) to match the old static
 * .nav-menu bar. The static menu is gone; bm_menu now renders the nav. These
 * overrides live here (header module), bm_menu itself is untouched.
 * --------------------------------------------------------------------------- *
 * DESKTOP (>=992px): horizontal centered bar, replicating .nav-menu-inner. */

/* Remap bm_menu's own palette vars (defined :root in its mega-menu.css as
 * #fff/#333/#000/#e5e5e5) onto the frejaskind header tokens. Scoped to the
 * header .bmhf-area--header #bm-menu so the whole dropdown — panel bg, borders, shadow, link and
 * accent colours — adopts the theme without touching bm_menu. Applies on all
 * viewports (desktop flyout + mobile drawer) for one consistent palette. */
.bmhf-area--header #bm-menu {
  --bm-bg: #fff;
  --bm-text: var(--ink, #1C1814);
  --bm-accent: var(--bg-walnut, #2A1F18);
  --bm-border: var(--line-soft, #E8E0D2);
  --bm-shadow: 0 16px 28px rgba(28, 24, 20, .08);
}

@media (min-width: 992px) {
  /* No border-top here: the header already has a single bottom border below
     the menu. A border-top + that bottom border bracketed the menu in TWO
     lines ("double border"). Keep the subtle bg tint for separation only. */
  .bmhf-area--header #bm-menu { display: block; width: 100%; position: relative;
    background: rgba(245, 241, 234, .55); }
  .bmhf-area--header #bm-menu > .bm-toggle.toggle-open { display: none; }
  .bmhf-area--header #bm-menu .bm-nav {
    position: static; transform: none; width: auto;
    max-width: var(--max); margin: 0 auto;
    flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
    gap: 1.5rem; padding: .85rem var(--gutter); background: transparent; box-shadow: none;
  }
  .bmhf-area--header #bm-menu .bm-nav-header { display: none; }
  .bmhf-area--header #bm-menu .bm-item { list-style: none; position: relative; }
  /* top-level links — concept .nav-menu-inner a (uppercase, tracked, ink) */
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > a {
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); white-space: nowrap; padding: .35rem 0; position: relative;
    display: inline-flex; align-items: center; gap: .4rem;
  }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > a:hover,
  .bmhf-area--header #bm-menu .bm-nav > .bm-item.open > a { color: var(--bg-walnut); }
  /* center-out underline (concept .nav-menu-inner a::after) */
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > a::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 1px;
    background: var(--bg-walnut);
    transition: left var(--t) var(--ease-out), right var(--t) var(--ease-out);
  }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item:hover > a::after,
  .bmhf-area--header #bm-menu .bm-nav > .bm-item.open > a::after { left: 0; right: 0; }
  /* chevron caret on dropdown triggers (concept .chev) */
  .bmhf-area--header #bm-menu .bm-nav > .bm-item.has-dropdown > a::before {
    content: ''; width: 9px; height: 9px; margin-left: .1rem; opacity: .55;
    background: currentColor; flex: 0 0 auto;
    -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    order: 9; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item.has-dropdown:hover > a::before { transform: rotate(180deg); opacity: 1; }

  /* ===== Dropdown: COMPACT panel anchored under the trigger (concept .nav-dropdown).
     bm_menu ships a full-width band (.bm-drop{left:0;right:0}); override to a
     centered, contained cream card. Scoped to top-level triggers only. ===== */
  /* full-width dropdown band: anchor to .bm-nav (relative) by making the item
     static, then stretch the panel left:0/right:0 across the menu band. */
  .bmhf-area--header #bm-menu .bm-nav { position: relative; }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item { position: static; }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop {
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto;
    transform: translateY(8px);
    width: max-content; min-width: 560px;
    /* Width tracks bm_menu's per-item --cols (column_count) so the configured
       number of columns actually fits, capped to the viewport. */
    max-width: min(calc(100vw - 2rem), calc(var(--cols, 3) * 220px));
    background: #fff;
    border: 1px solid var(--line, #D9D0C0); border-radius: 2px;
    box-shadow: 0 24px 60px -20px rgba(28, 24, 20, .18);
    padding: 1.5rem 1.75rem; overflow: visible;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility var(--t);
    z-index: 90;
  }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item:hover > .bm-drop,
  .bmhf-area--header #bm-menu .bm-nav > .bm-item.open > .bm-drop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
  }
  /* transparent bridge over the 12px gap so the panel doesn't snap shut on travel */
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop::before {
    content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
    background: transparent; display: block; transform: none;
  }
  /* Megamenu content spans the full content grid width (centered band), so the
     brand columns distribute across the whole grid instead of clustering left. */
  .bmhf-area--header #bm-menu .bm-drop > .container {
    /* Match the main site content band (.container.hed): same max-width + gutter,
       so the megamenu columns line up with the rest of the site rather than a
       narrower 1480/16px box. (--max/--gutter are undefined → were falling back.) */
    max-width: calc(1480px + 2 * clamp(1.25rem, 4vw, 3rem)); width: 100%; margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem); display: block; box-sizing: border-box;
  }
  /* Respect bm_menu's per-item column count (--cols, set inline on the top-level
     <li> from column_count); inherits to .bm-sub as a descendant. Falls back to
     3 when bm_menu emits no value. !important keeps it ahead of the base rule. */
  .bmhf-area--header #bm-menu .bm-drop .bm-sub { grid-template-columns: repeat(var(--cols, 3), 1fr) !important; }

  /* Dim + blur the page behind an open megamenu. The pseudo lives inside the
     sticky #header stacking context (z 222) at z-index:-1, so it paints ABOVE
     page content but BELOW the header bar (z 0) and the dropdown (z 90) — i.e.
     header + menu stay crisp, everything beneath is dimmed. Toggled with :has. */
  .bmhf-area--header::after {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t, .2s) var(--ease-out, ease), visibility var(--t, .2s);
  }
  .bmhf-area--header:has(#bm-menu .bm-nav > .bm-item.has-dropdown:hover)::after {
    opacity: 1; visibility: visible;
  }
  /* link list -> multi-column grid (concept columns); flat brand list flows into 3 */
  .bmhf-area--header #bm-menu .bm-drop .bm-sub {
    display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(140px, 1fr));
    gap: 0 1.75rem; list-style: none; margin: 0; padding: 0;
  }
  .bmhf-area--header #bm-menu .bm-sub > .bm-item { position: relative; border: 0; }
  /* dropdown links (concept .nav-dd-col li a) — ink, tan-deep hover, no underline */
  .bmhf-area--header #bm-menu .bm-sub .bm-item > a {
    text-transform: none; letter-spacing: 0; font-weight: 500;
    font-size: .85rem; color: var(--ink); white-space: nowrap;
    padding: .26rem 0; display: inline-flex; align-items: center; gap: .45rem;
    transition: color var(--t) var(--ease);
  }
  .bmhf-area--header #bm-menu .bm-sub .bm-item > a::after { display: none; }
  .bmhf-area--header #bm-menu .bm-sub .bm-item > a:hover { color: var(--tan-deep, #8A6A47); }

  /* column heading, if bm_menu emits one (concept .nav-dd-col h5) */
  .bmhf-area--header #bm-menu .bm-flyout-heading {
    grid-column: 1 / -1;
    font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-muted, #8A8079); margin: 0 0 .85rem; padding-bottom: .55rem;
    border-bottom: 1px solid var(--line, #D9D0C0);
  }

  /* nested sub-links + category rows: kill bm_menu's grey/teal/purple defaults */
  .bmhf-area--header #bm-menu .bm-cats a,
  .bmhf-area--header #bm-menu .bm-sub .bm-sub .bm-item > a {
    color: var(--ink-soft); transition: color var(--t) var(--ease);
  }
  .bmhf-area--header #bm-menu .bm-cats a:hover,
  .bmhf-area--header #bm-menu .bm-sub .bm-sub .bm-item > a:hover { color: var(--tan-deep, #8A6A47); background: transparent; }
  /* defensive: neutralise vertical-variant tinted hovers if that markup appears */
  .bmhf-area--header #bm-menu .bm-vertical .bm-sub > .bm-item > a:hover,
  .bmhf-area--header #bm-menu .bm-vertical .bm-sub .bm-sub .bm-item > a:hover {
    background: transparent; color: var(--tan-deep, #8A6A47);
  }

  /* dropdown banner image spans the panel */
  .bmhf-area--header #bm-menu .bm-banner { grid-column: 1 / -1; border-radius: 2px; }
}

/* MOBILE (<=991px): use a static hamburger in the top row (left of the logo);
 * hide bm_menu's own bundled toggle. The static .nav-burger is wired to bm_menu's
 * drawer by a small shim in area.tpl (bm_menu JS only binds toggles inside
 * .bmhf-area--header #bm-menu, so the class alone can't reach it). */
.bmhf-area--header .nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 0; }
@media (max-width: 991px) {
  .bmhf-area--header #bm-menu .bm-toggle.toggle-open { display: none; }
  .bmhf-area--header .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    padding: .5rem; align-self: center; justify-self: start;
  }
  .bmhf-area--header .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); }
  /* drawer header (close-button bar) padding on tablet + mobile */
  .bmhf-area--header #bm-menu .bm-nav-header { padding: 0.5rem; }
}

/* ============================================================
   FREJA CLEANUP — 2026-06-16 · header mobile refinement
   Logo truly centered + sleeker full-width search. Specificity
   .bmhf-area.bmhf-area--header (0,3,0) beats the inline header
   <style> (0,2,0). Fold into the base rules once signed off.
   ============================================================ */
@media (max-width: 991px) {
  /* Logo dead-center: equal 1fr rails either side so the centre
     auto-column (logo) lands on the true viewport centre, instead
     of being pushed left by the wider actions cluster on the right. */
  .bmhf-area.bmhf-area--header .nav-top      { grid-template-columns: 1fr auto 1fr; }
  /* burger: shrink to the icon and hug the left gutter (it was stretching to
     fill the 1fr column, so the icon floated in the middle ~108px) */
  .bmhf-area.bmhf-area--header .nav-burger   {
    justify-self: start !important;
    width: -webkit-fit-content !important;
    width: fit-content !important;
    align-items: flex-start !important;
    padding: .35rem !important;
  }
  .bmhf-area.bmhf-area--header .nav-logo     { justify-self: center; }
  .bmhf-area.bmhf-area--header .nav-actions  { justify-self: end; }

  /* trim total header height to <= the Myhair reference (was 154px).
     USP/announce bar = 24px: it was DOUBLE-padded (.announce 5px +
     .announce-track 5px around 16px text = 36px). Collapse to one 4px pad. */
  .bmhf-area.bmhf-area--header .announce        { padding-top: 0 !important; padding-bottom: 0 !important; }
  .bmhf-area.bmhf-area--header .announce-track  { padding-top: 8.5px !important; padding-bottom: 8.5px !important; }
  /* announce text: normal case, not uppercase */
  .bmhf-area.bmhf-area--header .announce,
  .bmhf-area.bmhf-area--header .announce-track,
  .bmhf-area.bmhf-area--header .announce-track * { text-transform: none !important; letter-spacing: .01em !important; }
  /* nav-top: pad the TOP only (3px — header a touch smaller); no bottom pad so
     the full-bleed search sits flush against the content (no whitespace strip). */
  .bmhf-area.bmhf-area--header .nav-top         { padding-top: 3px !important; padding-bottom: 0 !important; }
  /* cart + wishlist vertically centered with each other (align the flex row;
     do NOT force display on children — that was un-hiding the desktop-only
     Trustpilot + "Skriv til Lasse" elements on mobile). */
  .bmhf-area.bmhf-area--header .nav-actions      { align-items: center !important; }
  .bmhf-area.bmhf-area--header .nav-actions > *  { align-self: center !important; }
  /* keep the desktop trust/contact bits out of the mobile header + menu */
  .bmhf-area.bmhf-area--header .nav-trust,
  .bmhf-area.bmhf-area--header .nav-cs           { display: none !important; }

  /* Search dead-zone fix: the inline CSS hides .nav-search between ~768px
     and the 992px desktop breakpoint, so tablet widths had NO search at all.
     Force the full-width mobile search to show on its own row for the whole
     range below the desktop menu — and make it EDGE-TO-EDGE full-bleed like
     the Myhair reference (negative margins cancel the nav-top gutter). */
  .bmhf-area.bmhf-area--header .nav-search {
    display: block !important;
    grid-column: 1 / -1 !important;
    order: 2 !important;
    max-width: none !important;
    width: auto !important;
    margin-left: calc(-1 * var(--gutter, 1.25rem)) !important;
    margin-right: calc(-1 * var(--gutter, 1.25rem)) !important;
    margin-top: 2px !important;
  }
  /* flat full-bleed search bar: square edges, no side borders, subtle grey fill,
     slim height to keep the header compact */
  .bmhf-area.bmhf-area--header .nav-search .bm-search-trigger-mock {
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    border-top: 0 !important;                 /* no border above the search */
    border-bottom: 0 !important;              /* no line below the search bar */
    background: #f4f4f4 !important;
    padding: .8rem var(--gutter, 1.25rem) !important;   /* taller search bar */
  }
  /* The line under the search is actually drawn by the nav + the theme #header
     wrapper, not the search field. Kill both on mobile. */
  .bmhf-area.bmhf-area--header .nav { border-bottom: 0 !important; }
  #header { border-bottom: 0 !important; }
  /* logo: nudge down a few px so it reads optically centered in the row */
  .bmhf-area.bmhf-area--header .nav-logo { transform: translateY(3px) !important; }
  /* logo 2px bigger on mobile (inline DB sets 26px) */
  .bmhf-area.bmhf-area--header .nav-logo img { height: 28px !important; width: auto !important; }
  /* cart + wishlist icons a touch bigger (were 17–18px) */
  .bmhf-area.bmhf-area--header .nav-actions .nav-icon svg,
  .bmhf-area.bmhf-area--header .bm-cart-icon svg { width: 21px !important; height: 21px !important; }
  .bmhf-area.bmhf-area--header .bm-cart-custom-icon { width: 21px !important; height: 21px !important; }
}

/* Desktop search dead-zone: the inline CSS also hides .nav-search across the
   ~992–1280px range, leaving a sparse logo+icons header. Keep it visible
   (inline, capped width) so there is always a search on desktop too. */
@media (min-width: 992px) {
  .bmhf-area.bmhf-area--header .nav-search {
    display: block !important;
    max-width: 360px !important;
    width: 100% !important;
  }

  /* Sleek, full-width search: subtle cream fill instead of a boxed
     white field with a hard border; thinner row, soft radius. */
  .bmhf-area.bmhf-area--header .nav-search .bm-search-trigger-mock {
    border-color: transparent;
    background: var(--bg-cream, #EFE8DC);
    border-radius: 12px;
    padding: .62rem .9rem;
  }
  .bmhf-area.bmhf-area--header .nav-search .bm-search-trigger-mock:hover {
    background: #f3f3f3; border-color: #ececec;
  }
}

/* ------------------------------------------------------------
   Footer background — keep it across ALL pages.
   The footer's dark band comes from the inline rule
   `.mh-footer{ background:var(--bg-walnut) }`, but on the PRODUCT
   page a more specific theme rule repaints it white, so the footer
   loses its background. Re-assert the walnut band from the module
   (wins everywhere) so home / category / product all match.
   ------------------------------------------------------------ */
.bmhf-area--footer .mh-footer {
  background: var(--bg-walnut, #2A1F18) !important;
  color: var(--cream, #FBF7F0) !important;
}

/* ------------------------------------------------------------
   Footer mobile accordions.
   The footer columns are custom HTML (`.ft-grid > div > h4 + ul`),
   so the module's built-in `.mh-footer__group` <details> accordion
   never matches. Wire collapsing to the REAL structure here; a small
   toggle script in area.tpl adds `.is-open`. The brand/showroom
   column uses <strong> (not <h4>) so it is never collapsed.
   Desktop (>768px) is untouched — lists render fully open.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .bmhf-area--footer .ft-grid > div > h4 {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 0; padding: .85rem 0;
    border-bottom: 1px solid rgba(216, 192, 160, .14);
  }
  .bmhf-area--footer .ft-grid > div > h4::after {
    content: ''; width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform .25s ease; opacity: .7;
  }
  .bmhf-area--footer .ft-grid > div.is-open > h4::after { transform: rotate(225deg); }
  .bmhf-area--footer .ft-grid > div > ul {
    overflow: hidden; max-height: 0;
    transition: max-height .32s ease, opacity .2s ease, margin .2s ease;
    opacity: 0; margin: 0;
  }
  .bmhf-area--footer .ft-grid > div.is-open > ul {
    max-height: 640px; opacity: 1; margin: .55rem 0 .85rem;
  }
}

/* ------------------------------------------------------------
   Footer compression on mobile.
   The bands shipped 64px top+bottom padding and a 128px decorative
   "Freja Skind" mark, making the footer ~1370px tall (≈2× viewport).
   Tighten the band padding, shrink the oversized mark + phone, and
   close the vertical gaps so the footer reads compact.
   (Specificity .bmhf-area--footer .ft-* (0,2,0) beats the inline
   footer <style> 0,1,0 rules.)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .bmhf-area--footer .ft-top    { padding-top: 16px !important; padding-bottom: 14px !important; }
  .bmhf-area--footer .ft-grid   { padding-top: 12px !important; padding-bottom: 12px !important; }
  .bmhf-area--footer .ft-bottom { padding-top: 10px !important; padding-bottom: 12px !important; }
  /* giant decorative wordmark — far too big on a phone */
  .bmhf-area--footer .ft-mark   { font-size: 32px !important; line-height: 1 !important; margin-bottom: .25rem !important; }
  /* big phone number */
  .bmhf-area--footer .ft-phone  { font-size: 22px !important; line-height: 1.1 !important; }
  /* close the gaps between brand / newsletter / contact blocks */
  .bmhf-area--footer .ft-brand  { margin-bottom: 10px !important; }
  .bmhf-area--footer .ft-nl     { margin-top: 8px !important; }
  .bmhf-area--footer .ft-contact{ margin-top: 6px !important; }
  .bmhf-area--footer .ft-nl-form{ padding-top: 2px !important; padding-bottom: 2px !important; }
  /* brand column: tighten stacked items */
  .bmhf-area--footer .ft-brand > *   { margin-bottom: 6px !important; }
  .bmhf-area--footer .ft-brand p     { margin-bottom: 5px !important; line-height: 1.35 !important; }
  .bmhf-area--footer .ft-brand .ft-social { margin-bottom: 0 !important; }
  /* collapsed accordion headers — tighter rows */
  .bmhf-area--footer .ft-grid > div > h4 { padding-top: .45rem !important; padding-bottom: .45rem !important; }
  /* legal band */
  .bmhf-area--footer .ft-bottom { padding-top: 10px !important; padding-bottom: 12px !important; }
  .bmhf-area--footer .ft-nl     { margin-top: 6px !important; }
}

/* ------------------------------------------------------------
   Footer compression — DESKTOP/TABLET (>=769px).
   The bands shipped 96px/64px padding, a 321px decorative wordmark
   and a 51px phone, making the footer ~890px tall. Tighten.
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  .bmhf-area--footer .ft-top    { padding-top: 40px !important; padding-bottom: 32px !important; }
  .bmhf-area--footer .ft-grid   { padding-top: 36px !important; padding-bottom: 32px !important; }
  .bmhf-area--footer .ft-bottom { padding-top: 18px !important; padding-bottom: 24px !important; }
  /* the giant decorative "Freja Skind" wordmark */
  .bmhf-area--footer .ft-mark   { font-size: 64px !important; line-height: 1 !important; margin-bottom: .4rem !important; }
  /* phone number */
  .bmhf-area--footer .ft-phone  { font-size: 32px !important; line-height: 1.1 !important; }
  /* tighten the brand column stack gaps */
  .bmhf-area--footer .ft-brand > * { margin-bottom: 12px !important; }
  .bmhf-area--footer .ft-brand p   { margin-bottom: 10px !important; }
  .bmhf-area--footer .ft-brand .ft-social { margin-bottom: 0 !important; }
}

/* ============================================================
   TWO-FONT SYSTEM in header + footer (2026-06-16).
   The inline .bmhf-area CSS set GothamPro as the primary font, so the
   whole header (search/menu/announce) and footer rendered in GothamPro.
   Force DM Sans for all UI text and HansenGrotesque for headings + the
   footer wordmark. Specificity .bmhf-area.bmhf-area--* (0,2,0) beats the
   inline 0,1,0 declaration; !important guards against the inline body
   <style> coming after this file in the DOM.
   ============================================================ */
.bmhf-area.bmhf-area--header,
.bmhf-area.bmhf-area--header *,
.bmhf-area.bmhf-area--footer,
.bmhf-area.bmhf-area--footer * {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.bmhf-area--header h1, .bmhf-area--header h2, .bmhf-area--header h3,
.bmhf-area--header h4, .bmhf-area--header h5,
.bmhf-area--footer h1, .bmhf-area--footer h2, .bmhf-area--footer h3,
.bmhf-area--footer h4, .bmhf-area--footer h5,
.bmhf-area--footer .ft-mark {
  font-family: "HansenGrotesque", "Hansen Grotesque", sans-serif !important;
}

/* ============================================================
   Header background: WHITE (was warm cream rgba(245,241,234)).
   .nav = the main header band, #bm-menu = the menu bar tint. The dark
   announce strip on top is kept for contrast. Search field gets a light
   grey fill so it stays visible on the white header.
   ============================================================ */
.bmhf-area.bmhf-area--header .nav      { background: #fff !important; }
.bmhf-area.bmhf-area--header #bm-menu  { background: #fff !important; }
.bmhf-area.bmhf-area--header .nav-search .bm-search-trigger-mock {
  background: #f3f3f3 !important;
  border-color: #ececec !important;
}
.bmhf-area.bmhf-area--header .nav-search .bm-search-trigger-mock:hover {
  background: #f3f3f3 !important; border-color: #ececec !important;
}

/* Menu (nav bar + dropdowns + mobile drawer) in HansenGrotesque per request.
   The #bm-menu id raises specificity above the header DM Sans default. */
.bmhf-area.bmhf-area--header #bm-menu,
.bmhf-area.bmhf-area--header #bm-menu * {
  font-family: "HansenGrotesque", "Hansen Grotesque", sans-serif !important;
}

/* Announce/USP bar text: normal case as typed, not uppercase (all widths). */
.bmhf-area.bmhf-area--header .announce,
.bmhf-area.bmhf-area--header .announce *,
.bmhf-area.bmhf-area--header .announce-track,
.bmhf-area.bmhf-area--header .announce-track * {
  text-transform: none !important;
}

/* ============================================================
   Mobile menu drawer — compact, Myhair-like rows (keeps HansenGrotesque).
   Was tall (~95px) heavy rows; tighten to ~50px with a calmer size.
   ============================================================ */
@media (max-width: 991px) {
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > a {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
  }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item { border-bottom: 1px solid #efefef !important; }
  /* drawer header (close row) tighter */
  .bmhf-area--header #bm-menu .bm-nav-header { padding: .6rem .9rem !important; }
}

/* reduce the space above the desktop menu bar (~10px) */
@media (min-width: 992px) {
  .bmhf-area--header #bm-menu .bm-nav { padding-top: .25rem !important; }
}

/* submenu: FULL-viewport-width background, no border; content centered in band */
@media (min-width: 992px) {
  .bmhf-area--header #bm-menu { position: relative; }
  .bmhf-area--header #bm-menu .bm-nav { position: static !important; }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item { position: static !important; }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > .bm-drop {
    left: 0 !important; right: 0 !important; width: auto !important;
    max-width: none !important; min-width: 0 !important; transform: translateY(8px) !important;
    border: 0 !important; border-radius: 0 !important;
    padding: 1.6rem 0 !important;
    box-shadow: 0 18px 34px -24px rgba(28,24,20,.28) !important;
  }
  .bmhf-area--header #bm-menu .bm-nav > .bm-item:hover > .bm-drop,
  .bmhf-area--header #bm-menu .bm-nav > .bm-item.open > .bm-drop { transform: translateY(0) !important; }
  /* Align the megamenu content to the EXACT site band (.container.hed):
     max-width 1480 + 2×gutter, gutter = clamp(1.25rem,4vw,3rem). The submenu
     grid then fills the container (no extra gutter) so its columns line up
     with the breadcrumb/products/footer on every width. */
  .bmhf-area--header #bm-menu .bm-drop > .container {
    max-width: calc(1480px + 2 * clamp(1.25rem, 4vw, 3rem)) !important;
    margin-left: auto !important; margin-right: auto !important;
    padding-left: clamp(1.25rem, 4vw, 3rem) !important; padding-right: clamp(1.25rem, 4vw, 3rem) !important;
  }
  .bmhf-area--header #bm-menu .bm-drop .bm-sub {
    max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
}

/* mobile menu drawer polish: gutter on items + close row, tidy spacing */
@media (max-width: 991px) {
  .bmhf-area--header #bm-menu .bm-nav > .bm-item > a {
    padding-left: var(--gutter, 1.25rem) !important;
    padding-right: var(--gutter, 1.25rem) !important;
  }
  .bmhf-area--header #bm-menu .bm-nav-header { padding: .5rem var(--gutter, 1.25rem) !important; }
  .bmhf-area--header #bm-menu .bm-nav { padding-bottom: .5rem !important; }
}

/* mobile drawer = side panel (not full-width) + dim backdrop, Myhair-style */
@media (max-width: 991px) {
  .bmhf-area--header #bm-menu.overlay { background: rgba(20,16,12,.45) !important; }
  .bmhf-area--header #bm-menu.overlay .bm-nav {
    width: 87% !important;
    max-width: 360px !important;
    box-shadow: 8px 0 40px -10px rgba(0,0,0,.35) !important;
  }
}

/* no line under the mobile search field */
@media (max-width: 991px) {
  .bmhf-area.bmhf-area--header .nav-search .bm-search-trigger-mock { border-bottom: 0 !important; }
}

/* ============================================================
   Mobile drawer header + dividers (matas.dk style)
   ============================================================ */
@media (max-width: 991px) {
  /* drawer top bar: "Menu" title on the left, X close on the right */
  .bmhf-area--header #bm-menu .bm-nav-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: .9rem var(--gutter, 1.25rem) !important;
    border-bottom: 1px solid #ededed !important;
  }
  .bmhf-area--header #bm-menu .bm-nav-header::before {
    content: "Menu";
    font-family: "HansenGrotesque","Hansen Grotesque",sans-serif;
    font-size: 1.15rem; font-weight: 600; color: var(--ink, #1C1814);
    margin-right: auto;
  }
  .bmhf-area--header #bm-menu .bm-nav-header .bm-toggle.toggle-close,
  .bmhf-area--header #bm-menu .bm-nav-header .toggle-close { order: 9; margin-left: auto !important; }
  /* lighter divider lines between menu items */
  .bmhf-area--header #bm-menu .bm-nav > .bm-item { border-bottom-color: #f3f1ee !important; }
}

/* heart (wishlist) icon on mobile: sized + nudged 5px down */
@media (max-width: 991px) {
  .bmhf-area.bmhf-area--header .nav-actions .nav-icon svg { width: 23px !important; height: 23px !important; }
  .bmhf-area.bmhf-area--header .nav-actions .nav-icon { transform: translateY(2px) !important; }
}

/* Desktop: the BullmadePS cart icon shipped tiny (17px) — size it up to match
   the other header icons (wishlist heart ≈ 20px). */
@media (min-width: 992px) {
  .bmhf-area.bmhf-area--header .bm-cart-icon { width: 25px !important; height: 25px !important; transform: translateY(1px); }
  .bmhf-area.bmhf-area--header .bm-cart-icon svg { width: 25px !important; height: 25px !important; }
}

/* ===== Footer session-6 polish (2026-06-17) ===== */
/* Footer content width capped at 1100px (centered); dark band stays full-width. */
.bmhf-area--footer .mh-footer__inner {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px; padding-right: 20px;
  box-sizing: border-box;
}

/* 25) Decrease the line-height / spacing between each footer link by ~2px. */
.bmhf-area--footer .ft-grid > div > ul > li { margin-bottom: 9px !important; }
.bmhf-area--footer .ft-grid > div > ul > li > a { line-height: 21px !important; }

/* Footer column text 2px smaller (links + section headings). */
.bmhf-area--footer .ft-grid > div > ul > li > a { font-size: 12.72px !important; }
.bmhf-area--footer .ft-grid > div > h4 { font-size: 9.84px !important; }

/* 24) Newsletter section: longer (fill its column) + a bit more presence;
   nicer rounded input with a hairline so the field reads as tappable. */
@media (min-width: 769px) {
  .bmhf-area--footer .ft-nl { max-width: 100%; }
  .bmhf-area--footer .ft-nl-form { max-width: 100% !important; }
  .bmhf-area--footer .ft-nl-label {
    font-size: 17px !important; margin-bottom: 9px !important; letter-spacing: .01em;
  }
  .bmhf-area--footer .ft-nl-form input[type="email"] {
    border: 1px solid rgba(216, 192, 160, .35) !important;
    border-radius: 8px !important;
    padding: 0 18px !important;
    background: rgba(255, 255, 255, .04) !important;
  }
}

/* Smaller footer brand/about text (was 14.4px) — matches the footer link cols. */
.mh-footer .ft-brand p,
.mh-footer .ft-brand p a { font-size: 12px !important; line-height: 1.5 !important; }
.mh-footer .ft-brand .ft-store strong { font-size: 12px !important; }