/** Shopify CDN: Minification failed

Line 605:0 Unexpected "}"

**/
/* =========================================================
   Belle Maison – Shopify Header 1 sync with WordPress front
   Scope: Shopify Header 1 / top row only.
   Skyddat: PDP Header 2, collection Header 2, filters, product grid.
   ========================================================= */

@media screen and (min-width: 990px) {

  /* =========================================================
     1. HEADERNS TOTALA HÖJD
     Justera dessa två värden tillsammans.
     Testa t.ex. 82px / 86px / 90px / 94px.
     ========================================================= */

  .header__row--top {
    height: 72px !important;
    min-height: 72px !important;
    border-bottom: 0.5px solid #000000 !important;
    overflow: visible !important;
  }

  .header__row--top .header__columns {
    height: 86px !important;
    min-height: 86px !important;
    align-items: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: visible !important;
  }


  /* =========================================================
     2. HEADERNS SIDOLUFT
     Justera om loggan/menyn ska längre in eller längre ut.
     Ändra padding-left och padding-right tillsammans.
     Testa t.ex. 18px / 20px / 24px / 28px.
     ========================================================= */

  .header__row--top .header__columns {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }


  /* =========================================================
     3. LOGGANS STORLEK
     Justera alla 82px-värden i detta område tillsammans.
     Testa t.ex. 78px / 82px / 86px / 90px.
     ========================================================= */

  .header__row--top .header__column--left {
    align-items: center !important;
    display: flex !important;
    overflow: visible !important;
  }

  .header__row--top .header-logo,
  .header__row--top a[href="https://bellemaison.wine"] {
    width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .header__row--top .header-logo img,
  .header__row--top .header-logo svg,
  .header__row--top a[href="https://bellemaison.wine"] img,
  .header__row--top a[href="https://bellemaison.wine"] svg {
    width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* =========================================================
     4. LOGGANS VERTIKALA POSITION
     Negativt värde flyttar loggan upp.
     Positivt värde flyttar loggan ned.
     Testa t.ex. -4px / -2px / 0px / 2px.
     ========================================================= */

  .header__row--top .header-logo img,
  .header__row--top .header-logo svg,
  .header__row--top a[href="https://bellemaison.wine"] img,
  .header__row--top a[href="https://bellemaison.wine"] svg {
    transform: translateY(-10px) !important;
  }


  /* =========================================================
     5. MENYNS AVSTÅND MELLAN LÄNKAR
     Styr luft mellan menyval och ikoner.
     Testa t.ex. 26px / 30px / 34px / 38px.
     ========================================================= */

  .header__row--top .header__column--right {
    align-items: center !important;
    justify-content: flex-end !important;
    column-gap: 20px !important;
  }


  /* =========================================================
     6. MENYTEXTENS STORLEK OCH UTTRYCK
     font-size styr storlek.
     font-weight styr tyngd.
     letter-spacing styr spärrning.
     Testa font-size 12px / 13px / 14px.
     ========================================================= */

  .header__row--top .header__column--right a,
  .header__row--top .header__column--right button,
  .header__row--top .header__column--right summary {
    font-family: "Inter Tight", Inter, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }


  /* =========================================================
     7. MENYTEXTENS VERTIKALA POSITION
     Negativt värde flyttar menyn upp.
     Positivt värde flyttar menyn ned.
     Testa t.ex. -2px / 0px / 2px.
     ========================================================= */

  .header__row--top .header__column--right a,
  .header__row--top .header__column--right button,
  .header__row--top .header__column--right summary {
    transform: translateY(-10.75px) !important;
  }


  /* =========================================================
     8. IKONERNAS STORLEK
     Gäller konto/varukorgsikoner i Shopify Header 1.
     Testa t.ex. 14px / 15px / 16px.
     ========================================================= */

  .header__row--top .header__column--right svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 1.6 !important;
  }


  /* =========================================================
     9. IKONERNAS VERTIKALA POSITION
     Negativt värde flyttar ikonerna upp.
     Positivt värde flyttar ikonerna ned.
     Testa t.ex. -2px / 0px / 2px.
     ========================================================= */

  .header__row--top .header__column--right svg {
    transform: translateY(-11px) !important;
  }
}

/* Belle Maison - lock Header 1 on collection pages */
@media screen and (max-width: 1200px) {
  body:has(main#MainContent[data-template="collection"]) #header-group,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component,
  body:has(main#MainContent[data-template="collection"]) #header-component.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    transform: none !important;
    translate: none !important;
    background: #FFFDFAFF !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__columns {
    transform: none !important;
    translate: none !important;
  }
}

/* Belle Maison - lock Header 2 / filterbar only in tablet-mid-width */
@media screen and (min-width: 750px) and (max-width: 1200px) {
  body:has(main#MainContent[data-template="collection"]) main#MainContent .facets-toggle {
    position: sticky !important;
    top: var(--header-height, 61px) !important;
    z-index: 90 !important;
    background: #FFFDFAFF !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 desktop account/cart stable vertical tune

   Purpose:
   - Account component moves after Shopify loads, so use top instead of transform.
   - Cart moves as one unit so cart bubble stays attached.
   - Desktop only.
   ========================================================= */

@media screen and (min-width: 990px) {
  header-component#header-component .header__row--top .account-button,
  header-component#header-component .header__row--top .account-button.header-actions__action {
    position: relative !important;
    top: 0px !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  header-component#header-component .header__row--top .account-button shopify-account {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  header-component#header-component .header__row--top cart-drawer-component,
  header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    position: relative !important;
    top: -4px !important;
    transform: none !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 cart bubble desktop/tablet tune

   Purpose:
   - Adjust cart bubble on everything except mobile.
   - Keep mobile Header 1 untouched.
   - Make cart bubble Belle Maison red.
   ========================================================= */

@media screen and (min-width: 750px) {
  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon {
    --bm-cart-bubble-x: 8px;
    --bm-cart-bubble-y: -1px;
    --bm-cart-bubble-size: 20px;
    --bm-cart-bubble-red: #EF4C4CFF;
  }

  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    width: var(--bm-cart-bubble-size) !important;
    height: var(--bm-cart-bubble-size) !important;
    min-width: var(--bm-cart-bubble-size) !important;
    top: var(--bm-cart-bubble-y) !important;
    right: var(--bm-cart-bubble-x) !important;
    transform: none !important;
  }

  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__background {
    background-color: var(--bm-cart-bubble-red) !important;
  }

  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__text,
  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__text-count {
    color: #ffffff !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 cart bubble number typography

   Purpose:
   - Make cart bubble number bold Inter Tight.
   - Applies to everything except mobile.
   ========================================================= */

@media screen and (min-width: 750px) {
  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__text,
  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__text-count {
    font-family: "Inter Tight", Inter, sans-serif !important;
    font-weight: 700 !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 Shopify account typography force

   Purpose:
   - Force Shopify account component to use bold Inter Tight.
   - Needed because account letters can be rendered inside shopify-account.
   - Applies to everything except mobile.
   ========================================================= */

@media screen and (min-width: 750px) {
  header-component#header-component .header__row--top shopify-account {
    --shopify-account-font-body: "Inter Tight", Inter, sans-serif !important;
    --shopify-account-font-body-weight: 700 !important;
    --shopify-account-font-heading: "Inter Tight", Inter, sans-serif !important;
    --shopify-account-font-heading-weight: 700 !important;

    font-family: "Inter Tight", Inter, sans-serif !important;
    font-weight: 700 !important;
  }

  header-component#header-component .header__row--top .account-button__text,
  header-component#header-component .header__row--top .account-button__icon,
  header-component#header-component .header__row--top .account-button__fallback {
    font-family: "Inter Tight", Inter, sans-serif !important;
    font-weight: 700 !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 responsive account/cart bubble typography

   Purpose:
   - Apply account typography below desktop.
   - Apply cart bubble red color and bold Inter Tight number below desktop.
   - Does not move account, cart, hamburger, or bubble.
   ========================================================= */

@media screen and (max-width: 989px) {
  header-component#header-component .header__row--top shopify-account {
    --shopify-account-font-body: "Inter Tight", Inter, sans-serif !important;
    --shopify-account-font-body-weight: 700 !important;
    --shopify-account-font-heading: "Inter Tight", Inter, sans-serif !important;
    --shopify-account-font-heading-weight: 700 !important;

    font-family: "Inter Tight", Inter, sans-serif !important;
    font-weight: 700 !important;
  }

  header-component#header-component .header__row--top .account-button__text,
  header-component#header-component .header__row--top .account-button__icon,
  header-component#header-component .header__row--top .account-button__fallback {
    font-family: "Inter Tight", Inter, sans-serif !important;
    font-weight: 700 !important;
  }

  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__background {
    background-color: #EF4C4CFF !important;
  }

  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__text,
  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble__text-count {
    font-family: "Inter Tight", Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }
}

/* =========================================================
   Belle Maison – Header 1 cart icon size desktop/tablet

   Purpose:
   - Make Header 1 cart icon larger on desktop and responsive tablet widths.
   - Keep mobile below 750px untouched.
   ========================================================= */

@media screen and (min-width: 750px) {
  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .svg-wrapper {
    width: 24px !important;
    height: 24px !important;
  }

  header-component#header-component .header__row--top cart-icon.header-actions__cart-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* =========================================================
   Belle Maison – PDP Header 1 actions alignment phase 1

   Purpose:
   - Product display page only.
   - Hide unwanted left search icon on PDP.
   - Keep/search-align the right Header 1 search icon.
   - Give right side room for account, cart and cart bubble.
   - Align search, account, cart and cart bubble vertically.
   - Applies to desktop/tablet/responsive widths except mobile.
   - Does not touch collection Header 1.
   - Does not touch mobile below 750px.
   ========================================================= */

@media screen and (min-width: 750px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-header-search-top: -10px;
    --bm-pdp-header-account-top: -11.5px;
    --bm-pdp-header-cart-top: -10px;
    --bm-pdp-header-bubble-x: -5px;
    --bm-pdp-header-bubble-y: -6px;
    --bm-pdp-header-right-room: 28px;
  }

  /* Give the right side enough room so cart bubble is not squeezed against the edge */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__columns {
    padding-right: var(--bm-pdp-header-right-room) !important;
  }

  /* Hide the unwanted drawer/mobile search that appears left of the BM logo */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--left .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--left search-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .search-action--hidden-on-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Force the intended right-side search to stay visible on PDP */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action--hidden-on-drawer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    top: var(--bm-pdp-header-search-top) !important;
    transform: none !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button button {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action svg,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button svg {
    transform: none !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    position: relative !important;
    top: var(--bm-pdp-header-account-top) !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button shopify-account {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    position: relative !important;
    top: var(--bm-pdp-header-cart-top) !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon {
    --cart-bubble-top: var(--bm-pdp-header-bubble-y) !important;
    --cart-bubble-right: var(--bm-pdp-header-bubble-x) !important;
    position: relative !important;
    transform: none !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    top: var(--bm-pdp-header-bubble-y) !important;
    right: var(--bm-pdp-header-bubble-x) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon svg {
    transform: none !important;
  }

  /* Let cart bubble overflow outside the cart icon/container on PDP */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .svg-wrapper {
    overflow: visible !important;
    min-width: 34px !important;
    width: 34px !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action {
    padding-right: 8px !important;
  }
  /* Add breathing room between account and cart on PDP */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    margin-left: 6px !important;
  }

    /* Make PDP Header 1 search icon slightly larger */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action .svg-wrapper,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button .svg-wrapper {
    width: 20px !important;
    height: 20px !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action svg,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button svg {
    width: 22px !important;
    height: 22px !important;
  }

    /* Fine tune PDP Header 1 spacing around right-side search */
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button {
    margin-left: 10px !important;
    margin-right: 8px !important;
  }


}

/* =========================================================
   Belle Maison – PDP Header 1 tablet compact menu

   Purpose:
   - Product display page only.
   - Fix Header 1 menu jumping upward in the responsive tablet range.
   - Applies only between mobile and desktop.
   - Does not touch mobile below 750px.
   - Does not touch desktop 990px and up.
   ========================================================= */

body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top {
  --bm-collection-tablet-account-y: 3px;
  --bm-collection-tablet-cart-y: 4px;

  min-height: 78px !important;
  height: 78px !important;
  overflow: visible !important;
}

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__columns {
    min-height: 78px !important;
    height: 78px !important;
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 14px !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--left,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--center,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right {
    align-items: center !important;
    min-width: 0 !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right {
    column-gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top header-menu,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-menu,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-menu__inner,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .menu-list,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .overflow-menu {
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .menu-list__link,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .menu-list__link-title {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-logo,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-logo img,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-logo svg {
    max-width: 64px !important;
    width: 64px !important;
  }
}

/* =========================================================
   Belle Maison – PDP Header 1 tablet action baseline tune

   Purpose:
   - Product display page only.
   - In tablet responsive range, align search/account/cart with menu text.
   - Does not touch desktop 990px and up.
   - Does not touch mobile below 750px.
   ========================================================= */

@media screen and (min-width: 750px) and (max-width: 989px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-tablet-actions-top: 6px;
    --bm-pdp-tablet-bubble-y: -5px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button.header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    position: relative !important;
    top: var(--bm-pdp-tablet-actions-top) !important;
    transform: none !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon {
    --cart-bubble-top: var(--bm-pdp-tablet-bubble-y) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    top: var(--bm-pdp-tablet-bubble-y) !important;
  }
}

/* =========================================================
   Belle Maison – PDP Header 1 tablet action hard baseline tune

   Purpose:
   - Last-pass tablet correction for PDP Header 1 actions.
   - Moves the visible search/account/cart controls together.
   - Does not touch desktop 990px and up.
   - Does not touch mobile below 750px.
   ========================================================= */

@media screen and (min-width: 750px) and (max-width: 989px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-tablet-actions-shift-y: 0px;
    --bm-pdp-tablet-bubble-shift-y: -3px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button.header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button shopify-account,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component button.header-actions__action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon {
    top: auto !important;
    transform: translateY(var(--bm-pdp-tablet-actions-shift-y)) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-icon.header-actions__cart-icon .cart-bubble {
    transform: translateY(var(--bm-pdp-tablet-bubble-shift-y)) !important;
  }
}

/* Belle Maison – PDP Header 1 account + action spacing tune
   Gäller bara PDP, desktop/tablet.
   Steg 1: flytta Account nedåt och jämna ut luft mot Sök/Cart.
*/
@media screen and (min-width: 750px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-account-top: 0px;
    --bm-pdp-search-account-gap: 13px;
    --bm-pdp-account-cart-gap: 13px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    top: var(--bm-pdp-account-top) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header__column--right search-button {
    margin-right: var(--bm-pdp-search-account-gap) !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    margin-left: var(--bm-pdp-account-cart-gap) !important;
  }
}

/* Belle Maison – Firefox-only PDP account height correction
   Firefox placerar Account lägre än Safari, så vi lyfter bara Account i Firefox.
*/
@-moz-document url-prefix() {
  @media screen and (min-width: 750px) {
    body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
      --bm-pdp-account-top: -10px;
    }
  }
}

/* Belle Maison – Header 1 logo align with Header 2 filters
   Desktop only. Flyttar BM-loggan så den linjerar med filterradens vänsterkant.
*/
@media screen and (min-width: 990px) {
  header-component#header-component .header__row--top {
    --bm-header-logo-align-x: -20px;
  }

  header-component#header-component .header__row--top .header-logo {
    transform: translateX(var(--bm-header-logo-align-x)) !important;
  }
}

/* Belle Maison – Header 1 logo left alignment test
   Flyttar bara BM-logotypen i sidled på desktop.
*/
@media screen and (min-width: 990px) {
  header-component#header-component .header__row--top {
    --bm-header-logo-x: 10px;
  }

  header-component#header-component .header__row--top .header-logo {
    transform: translateX(var(--bm-header-logo-x)) !important;
  }
}

/* Belle Maison – PDP Header 1/Header 2 left alignment test
   Rör bara PDP.
   Mobil: flyttar BM-loggan vänster.
   Mellanläge: flyttar Header 2-filterraden höger.
*/

/* Mobil */
@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-mobile-logo-x: -213px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .header-logo {
    transform: translateX(var(--bm-pdp-mobile-logo-x)) !important;
  }
}

/* Mellanläge, precis efter mobil */
@media screen and (min-width: 750px) and (max-width: 989px) {
  main[data-template="product"] .bm-pdp-shop-nav__inner {
    padding-left: 28px !important;
  }
}

/* Belle Maison – narrow desktop-browser Header 1 logo/search position
   Gäller bara smalt browserfönster på dator.
   Ska inte påverka riktig iPhone/touch-mobil.
*/

/* Safari + övriga desktop-webbläsare */
@media screen and (max-width: 749px) and (hover: hover) and (pointer: fine) {
  header-component#header-component .header__row--top .header-logo,
  header-component#header-component .header__row--top .header-logo__image-container {
    position: relative !important;
    left: -40px !important;
    transform: none !important;
  }

  header-component#header-component .header__row--top .search-action,
  header-component#header-component .header__row--top search-button {
    position: relative !important;
    left: 168px !important;
    transform: none !important;
  }
}

/* Firefox på smalt browserfönster på dator */
@-moz-document url-prefix() {
  @media screen and (max-width: 749px) and (hover: hover) and (pointer: fine) {
    header-component#header-component .header__row--top .header-logo,
    header-component#header-component .header__row--top .header-logo__image-container {
      left: -20px !important;
    }

    header-component#header-component .header__row--top .search-action,
    header-component#header-component .header__row--top search-button {
      left: 94px !important;
    }
  }
}

/* Belle Maison – PDP Header 2 full-width bottom line
   Fixar linjen under "TILLBAKA TILL ALLA VINER" i smalt desktop-browserläge.
   Rör inte riktig iPhone/touch-mobil.
*/
@media screen and (max-width: 749px) and (hover: hover) and (pointer: fine) {
  body:has(main#MainContent[data-template="product"]) .bm-pdp-shop-nav {
    border-bottom: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) .bm-pdp-shop-nav::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: #000000 !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
}

/* Belle Maison – PDP mobile/narrow product top spacing
   Sätter 20px luft mellan Header 2 och produktbilden.
   Gäller både riktig mobil och smalaste desktop-browserläge.
*/
@media screen and (max-width: 749px) {
  body:has(main#MainContent[data-template="product"]) main#MainContent .product-information.section {
    padding-top: 20px !important;
    padding-block-start: 20px !important;
    --padding-block-start: 20px !important;
    margin-top: 0 !important;
  }

  body:has(main#MainContent[data-template="product"]) main#MainContent .product-information__grid,
  body:has(main#MainContent[data-template="product"]) main#MainContent .product-information__media,
  body:has(main#MainContent[data-template="product"]) main#MainContent media-gallery {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Belle Maison – PDP mobile Header 2 thick line full width
   Gör den nedre/tjockare linjen under "TILLBAKA TILL ALLA VINER"
   full skärmbredd på riktig mobil.
*/
@media screen and (max-width: 749px) and (hover: none), screen and (max-width: 749px) and (pointer: coarse) {
  body:has(main#MainContent[data-template="product"]) .bm-pdp-shop-nav {
    position: relative !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) .bm-pdp-shop-nav::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: #000000 !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }
}

/* Belle Maison – PDP mobile Header 2 lower line full width
   Förlänger den undre linjen under "TILLBAKA TILL ALLA VINER".
   Belle Maison-standard: 0.5px svart.
*/
@media screen and (max-width: 749px) and (hover: none), screen and (max-width: 749px) and (pointer: coarse) {
  body:has(main#MainContent[data-template="product"]) .bm-pdp-shop-nav {
    position: relative !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="product"]) .bm-pdp-shop-nav::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -0.5px !important;
    width: 100vw !important;
    height: 0.5px !important;
    transform: translateX(-50%) !important;
    background: #000000 !important;
    pointer-events: none !important;
    z-index: 20 !important;
  }
}

/* =========================================================
   Belle Maison – Collection Header 1 tablet baseline lock
   Date: 22 May 2026

   Scope:
   - Collection page only.
   - Tablet / first desktop-like responsive range only: 750px–989px.
   - Does not touch mobile below 750px.
   - Does not touch full desktop 990px and up.

   Purpose:
   - Align menu items, search, account and cart on the same horizontal line.
   - Account and cart can be fine-tuned with the two variables below.
   ========================================================= */

@media screen and (min-width: 750px) and (max-width: 989px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top {
    --bm-collection-tablet-account-y: 3px;
    --bm-collection-tablet-cart-y: -7px;

    min-height: 78px !important;
    height: 78px !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__columns {
    min-height: 78px !important;
    height: 78px !important;
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 14px !important;
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--left,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--center,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right {
    align-items: center !important;
    min-width: 0 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-menu,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header-menu,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header-menu__inner,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .menu-list,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .overflow-menu {
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .menu-list__link,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .menu-list__link-title {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right search-button {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: translateY(var(--bm-collection-tablet-account-y)) !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top cart-drawer-component.cart-drawer {
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: translateY(var(--bm-collection-tablet-cart-y)) !important;
  }
}

/* =========================================================
   Belle Maison – PDP Header 1 account desktop lock
   Date: 22 May 2026

   Scope:
   - PDP only.
   - Desktop only: 990px and up.
   - Account icon only.
   - Does not touch Header 2.
   - Does not touch sticky.
   - Does not touch search.
   - Does not touch cart.
   - Does not touch mobile/tablet.
   ========================================================= */

@media screen and (min-width: 990px) {
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top {
    --bm-pdp-desktop-account-y: -12px;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button.header-actions__action {
    position: relative !important;
    top: 0 !important;
    transform: translateY(var(--bm-pdp-desktop-account-y)) !important;
    display: flex !important;
    align-items: center !important;
  }

  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button shopify-account,
  body:has(main#MainContent[data-template="product"]) header-component#header-component .header__row--top .account-button .account-button__icon {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }
}


/* =========================================================
   Belle Maison – Collection Header 1 search icon restore only
   Date: 22 May 2026

   Scope:
   - Collection page only.
   - Narrow desktop / wide tablet range only: 990px–1199px.
   - Search icon only.
   - Does not change header grid.
   - Does not touch logo/menu/account/cart/Header 2/sticky.
   ========================================================= */

@media screen and (min-width: 990px) and (max-width: 1199px) {
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top {
    --bm-collection-search-size: 20px;
    --bm-collection-search-x: -62px;
    --bm-collection-search-y: 19px;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__columns,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__column--right {
    overflow: visible !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right .search-action,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right search-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    right: 88px !important;
    top: 50% !important;
    transform: translate(
      var(--bm-collection-search-x),
      calc(-50% + var(--bm-collection-search-y))
    ) !important;
    width: var(--bm-collection-search-size) !important;
    height: var(--bm-collection-search-size) !important;
    min-width: var(--bm-collection-search-size) !important;
    min-height: var(--bm-collection-search-size) !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right .search-action button,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right search-button button,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right .search-action .svg-wrapper,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right search-button .svg-wrapper,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right .search-action svg,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header__column--right search-button svg {
    width: var(--bm-collection-search-size) !important;
    height: var(--bm-collection-search-size) !important;
    min-width: var(--bm-collection-search-size) !important;
    min-height: var(--bm-collection-search-size) !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

    body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top {
    --bm-collection-menu-x: -20px;
  }

  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top header-menu,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .header-menu,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .menu-list,
  body:has(main#MainContent[data-template="collection"]) header-component#header-component .header__row--top .overflow-menu {
    transform: translateX(var(--bm-collection-menu-x)) !important;
  }

}