:root {
    /*! put your custom css here */
}

/* ------------------------------------------------------------------
   BugHerd 332 — header nav dropdowns ("Join Us") render as a compact
   box under the nav item instead of the full-width mega panel.
   Scoped to the DESKTOP nav bar only (.exp-mega-menu__nav-bar);
   the mobile drill-in drawer is untouched.
   Design reference: https://mockups.lctg.dev/b2b/#/shop
   ------------------------------------------------------------------ */

.exp-mega-menu__nav-bar > li {
    position: relative;
}

/* The dropdown panel: compact card centered under the trigger.
   !important needed to beat the component's inline `top` and its
   slds-is-fixed positioning. */
.exp-mega-menu__nav-bar > li > .exp-mega-menu__nav-content-container {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    /* no margin — a real gap here is a hover dead zone that closes the menu
       when the pointer crosses it slowly; visual spacing comes from the
       invisible bridge below instead */
    margin-top: 0;
}

/* Invisible hover bridge: spans the space between the trigger text and the
   card so the pointer never leaves the menu's hover area on the way down. */
.exp-mega-menu__nav-bar > li > .exp-mega-menu__nav-content-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
}

/* Neutralize the inner full-width/backdrop/grid wrappers (the backdrop
   is a fixed full-screen overlay by default — force it back into flow). */
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content-backdrop,
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content-fs {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Children stack vertically as plain menu items. */
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header {
    padding: 0;
    margin: 0;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header a {
    display: block;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 400;
    border-radius: 6px;
    white-space: nowrap;
    text-decoration: none;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header a:hover,
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header a:focus {
    background: #f2f5f7;
    text-decoration: none;
}

/* ------------------------------------------------------------------
   GH #4064 - the managed breadcrumb sits flush against the content
   below it: every component carries `.component-wrapper-spacer`, and
   the page emits an inline `.component-wrapper-spacer { margin-bottom:
   0 }` that a bare element selector cannot outrank. Element + class is
   specificity (0,1,1) vs (0,1,0), so it wins with no !important, and it
   still moves ONLY the breadcrumb - every other wrapper stays at 0.
   ------------------------------------------------------------------ */

commerce_builder-breadcrumbs.component-wrapper-spacer {
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------
   GH #7723: header account control: a labelled "Sign In" / "Account" pill.
   The managed commerce_builder:userProfileMenu renders an 18px
   icon-only link that shoppers (older ones especially) could not find,
   least of all over the home hero photo, and the layout hides it below
   1024px. This restyles it into the same white pill as the market
   selector beside it, with a visible word, on every width.
   Guests see "Sign In" (links to /login); signed-in shoppers see
   "Account" (opens the existing dropdown, audience twins intact).
   Labels live here because the managed button exposes no text
   attribute for the signed-in state; :lang() follows the locale route.
   Selectors are html + element + doubled class, (0,2,3), to outrank the
   component's scoped (0,2,0) rules and the site-wide
   a:link:not(.slds-button, ...) link colour (0,2,2) without !important.
   ------------------------------------------------------------------ */

:root {
    --lactigo-account-sign-in: "Sign In";
    --lactigo-account-signed-in: "Account";
    /* the managed layout header hides the profile menu <= 64em unless told otherwise */
    --com-c-layout-header-my-account-user-profile-icon-display: block;
}

:root:lang(fr) {
    --lactigo-account-sign-in: "Connexion";
    --lactigo-account-signed-in: "Compte";
}

:root:lang(es) {
    --lactigo-account-sign-in: "Entrar";
    --lactigo-account-signed-in: "Cuenta";
}

html commerce_my_account-user-profile-menu a.login-link.login-link,
html commerce_my_account-user-profile-menu button.menu-button.menu-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px 0 12px;
    border: 1px solid #d4d7dc;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #1f2328;
    --dxp-c-link-text-color: #1f2328;
    --dxp-c-link-text-color-hover: #1f2328;
    --dxp-c-link-color-background: #ffffff;
    --dxp-c-link-text-decoration: none;
    --dxp-c-link-text-decoration-hover: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

html commerce_my_account-user-profile-menu a.login-link.login-link:hover,
html commerce_my_account-user-profile-menu button.menu-button.menu-button:hover {
    border-color: #7ac144;
    box-shadow: 0 0 0 2px rgba(122, 193, 68, 0.45);
    text-decoration: none;
}

/* keyboard focus gets its own dark ring: the green hover glow is ~2.2:1 on white */
html commerce_my_account-user-profile-menu a.login-link.login-link:focus-visible,
html commerce_my_account-user-profile-menu button.menu-button.menu-button:focus-visible {
    outline: 2px solid #1f2328;
    outline-offset: 2px;
    text-decoration: none;
}

/* the guest link's inner wrapper truncates to a max width; let the label show */
html commerce_my_account-user-profile-menu a.login-link.login-link > div,
html commerce_my_account-user-profile-menu button.menu-button.menu-button > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
    max-width: none;
    overflow: visible;
}

html commerce_my_account-user-profile-menu button.menu-button.menu-button > span {
    flex-direction: row;
}

/* the configured login text (empty on home, "Log In" elsewhere) and the
   shopper's name (checkout and My Account layouts) give way to the one label;
   the button keeps its "User Profile <name>" aria-label */
html commerce_my_account-user-profile-menu a.login-link.login-link .login-text,
html commerce_my_account-user-profile-menu button.menu-button.menu-button .menu-trigger {
    display: none;
}

html commerce_my_account-user-profile-menu a.login-link.login-link > div::before {
    content: var(--lactigo-account-sign-in);
}

html commerce_my_account-user-profile-menu button.menu-button.menu-button > span::after {
    content: var(--lactigo-account-signed-in);
}

/* a dark icon to match the label, in place of the thin brand-green outline */
html commerce_my_account-user-profile-menu .icon-color.icon-color {
    --slds-c-icon-color-foreground-default: #1f2328;
    --slds-c-icon-color-foreground: #1f2328;
}

html commerce_my_account-user-profile-menu .icon-color.icon-color svg {
    fill: #1f2328;
    width: 20px;
    height: 20px;
}

@media only screen and (max-width: 47.9375em) {
    /* Inner-page (commerce layout) header on a phone: the managed grid is
       "auto max-content", so the right side never shrank. The start column
       (menu button + logo) keeps its own width and the right side takes what
       is left. GH #7772: this was fit-content(3rem), which squeezed the logo
       to 8px; the market selector is a flag chip here now, so the right side
       no longer needs the room. */
    div.header-content.header-content {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .header-content > .header-end.header-end,
    .header-end > .header-search.header-search {
        min-width: 0;
    }

    .header-end > .header-badge-icons.header-badge-icons {
        flex: none;
        margin-inline-start: 6px;
    }

    html commerce_my_account-user-profile-menu a.login-link.login-link,
    html commerce_my_account-user-profile-menu button.menu-button.menu-button {
        min-height: 36px;
        padding: 0 12px 0 10px;
        font-size: 14px;
    }

    html commerce_my_account-user-profile-menu a.login-link.login-link > div,
    html commerce_my_account-user-profile-menu button.menu-button.menu-button > span {
        gap: 6px;
    }
}

@media only screen and (max-width: 23.375em) {
    /* Smallest phones (<= 374px), home header only: the labelled pill needs
       the room the wishlist heart took, or the heart runs into the logo.
       Wishlist stays one tap away in the account menu. */
    c-ef_transparent-header commerce_builder-wishlist-shortcut {
        display: none;
    }
}

@media only screen and (max-width: 23.75em) {
    html commerce_my_account-user-profile-menu a.login-link.login-link,
    html commerce_my_account-user-profile-menu button.menu-button.menu-button {
        padding: 0 10px 0 8px;
        font-size: 13px;
    }

    html commerce_my_account-user-profile-menu a.login-link.login-link > div,
    html commerce_my_account-user-profile-menu button.menu-button.menu-button > span {
        gap: 4px;
    }

    html commerce_my_account-user-profile-menu .icon-color.icon-color svg {
        width: 16px;
        height: 16px;
    }
}

/* GH #7723 + #1365: #1365 reserves the account menu's settled width on inner pages so the
   market pill does not jump when the managed menu renders a beat late. The
   labelled pill is wider than the old "Log In" link, so reserve its width. */
@media (min-width: 48em) {
    commerce_builder-layout-header-three commerce_data_provider-navigation-menu-data-provider:has(commerce_builder-user-profile-menu) {
        min-width: 108px;
    }

    html[lang^="fr"] commerce_builder-layout-header-three commerce_data_provider-navigation-menu-data-provider:has(commerce_builder-user-profile-menu) {
        min-width: 136px;
    }

    html[lang^="es"] commerce_builder-layout-header-three commerce_data_provider-navigation-menu-data-provider:has(commerce_builder-user-profile-menu) {
        min-width: 102px;
    }
}

/* ------------------------------------------------------------------
   GH #7772: one header row, one control height, one order.
   The storefront header is composed from the managed commerce layout
   header (inner pages), c-ef_transparent-header (home), the site head
   markup (a legacy !important layer) and this file. This block is the
   single place that sets how the right-hand controls line up:
     [market chip] [Sign In / Account pill] [cart]
   on every page and width, vertically centred on the logo row.
   - Pills are 40px tall (36px below 48em) with one border, radius,
     shadow and type, so the market selector and account pill match.
   - Below 48em the market selector collapses to its flag + chevron
     (the component drops the text segment); its accessible name still
     reads the full language and market.
   - The head markup lifts the inner-page selector 7px (translateY) for
     an account/cart offset it no longer applies, stacks the home
     selector on its own row, and orders the account after the cart on
     home only. Those rules are !important, so the overrides here are
     too, with html body prefixes so they win on specificity.
   ------------------------------------------------------------------ */

:root {
    --lactigo-header-pill-height: 40px;
    --lactigo-header-pill-border: #d4d7dc;
    --lactigo-header-pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    --lactigo-header-pill-ink: #1f2328;
    --lactigo-header-gap: 12px;
}

/* The market selector wears the account pill's clothes on every page. */
html body c-lactigo-language-selector .language-selector__button.language-selector__button {
    height: var(--lactigo-header-pill-height) !important;
    min-height: var(--lactigo-header-pill-height) !important;
    padding: 0 14px 0 12px !important;
    gap: 8px !important;
    border: 1px solid var(--lactigo-header-pill-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: var(--lactigo-header-pill-shadow) !important;
    color: var(--lactigo-header-pill-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body c-lactigo-language-selector .language-selector__button.language-selector__button:hover {
    border-color: #7ac144 !important;
    box-shadow: 0 0 0 2px rgba(122, 193, 68, 0.45) !important;
}

html body c-lactigo-language-selector .language-selector__button.language-selector__button:focus-visible {
    outline: 2px solid var(--lactigo-header-pill-ink) !important;
    outline-offset: 2px !important;
}

html body c-lactigo-language-selector,
html body c-lactigo-language-selector .language-selector,
html body c-lactigo-language-selector .language-selector__button.language-selector__button {
    flex-shrink: 0 !important;
    min-width: auto !important;
    max-width: none !important;
}

html body c-lactigo-language-selector .language-selector__current.language-selector__current {
    max-width: none !important;
    overflow: visible !important;
}

/* Inner pages: drop the stale 7px lift and centre every control on one line. */
html body commerce_builder-layout-header-three c-lactigo-language-selector,
html body commerce_builder-layout-header-simple c-lactigo-language-selector {
    transform: none !important;
}

html body div.header-end.header-end,
html body .header-badge-icons-flex.header-badge-icons-flex {
    align-items: center !important;
    gap: var(--lactigo-header-gap) !important;
}

html body .header-end > .header-search.header-search {
    display: flex !important;
    align-items: center !important;
}

html body .header-end > .header-badge-icons.header-badge-icons {
    margin-inline-start: 0 !important;
}

/* Home: the selector joins the account and cart on the logo row. */
@media only screen and (min-width: 64.0625em) {
    html body c-ef_transparent-header .header-wrapper .right-region {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--lactigo-header-gap) !important;
    }

    html body c-ef_transparent-header .header-wrapper .right-region .slot-wrapper {
        gap: var(--lactigo-header-gap) !important;
    }
}

/* Home, tablet and phone: one row of burger | logo | controls. */
@media only screen and (max-width: 64em) {
    html body c-ef_transparent-header .header-wrapper {
        grid-template-rows: auto !important;
        min-height: 0 !important;
        align-items: center !important;
    }

    html body c-ef_transparent-header .header-wrapper .middle-region { grid-area: 1 / 1 !important; }
    html body c-ef_transparent-header .header-wrapper .left-region { grid-area: 1 / 2 !important; }

    html body c-ef_transparent-header .header-wrapper .right-region {
        grid-area: 1 / 3 !important;
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        grid-template-rows: none !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--lactigo-header-gap) !important;
        min-width: 0 !important;
    }

    html body c-ef_transparent-header .header-wrapper .right-region .slot-wrapper {
        gap: var(--lactigo-header-gap) !important;
    }

    /* Inner pages: the logo component's Builder style is padding-left: 8rem at
       every breakpoint; on tablets it pushed the logo into the market chip. */
    html body div.header-content .header-logo dxp_content_layout-site-logo {
        padding-left: 0 !important;
    }

    /* cart last, like every other page: [market] [account] [cart] */
    html body c-ef_transparent-header .header-wrapper .right-region .slot-wrapper > .individual-slot:has(commerce_builder-user-profile-menu),
    html body c-ef_transparent-header .header-wrapper .right-region .slot-wrapper > .individual-slot:has(commerce_my_account-user-profile-menu) {
        order: 1 !important;
    }

    html body c-ef_transparent-header .header-wrapper .right-region .slot-wrapper > .individual-slot:has(commerce_builder-cart-badge),
    html body c-ef_transparent-header .header-wrapper .right-region .slot-wrapper > .individual-slot:has(c-lactigo-mini-cart) {
        order: 2 !important;
    }
}

@media only screen and (max-width: 47.9375em) {
    :root {
        --lactigo-header-pill-height: 36px;
        --lactigo-header-gap: 6px;
    }

    html body c-lactigo-language-selector .language-selector__button.language-selector__button {
        padding: 0 8px 0 10px !important;
        gap: 4px !important;
        font-size: 14px !important;
    }

    /* Phones: wishlist lives in the account menu (home and inner pages); the logo gets its room back. */
    html body c-ef_transparent-header .header-wrapper {
        grid-template-columns: 28px auto minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    html body c-ef_transparent-header commerce_builder-wishlist-shortcut,
    html body c-ef_transparent-header .individual-slot:has(commerce_builder-wishlist-shortcut),
    html body div.header-content commerce_builder-wishlist-shortcut {
        display: none !important;
    }

    /* the chip's wrapper must not shrink under it, or the account pill slides over the flag */
    html body .header-end > .header-search.header-search {
        flex: none !important;
    }

    /* International and Mexico carry a BETA badge; on a phone it becomes a
       corner tag on the chip instead of a second pill beside it. It stays in
       flow (position: relative), so the selector itself can stay static. */
    html body div.header-content c-lactigo-language-selector .language-selector__beta,
    html body c-ef_transparent-header c-lactigo-language-selector .language-selector__beta {
        position: relative !important;
        top: -14px !important;
        margin-inline-start: -26px !important;
        z-index: 1 !important;
        padding: 2px 4px !important;
        font-size: 8px !important;
        pointer-events: none !important;
    }

    /* The dropdown and the cart-expiry notice hang off the selector, which on a
       phone sits mid-row, so a right-anchored 20rem panel ran off the left edge.
       Anchor both to the header instead: full width, just under it. */
    html body div.header-content.header-content {
        position: relative !important;
    }

    html body div.header-content c-lactigo-language-selector .language-selector,
    html body c-ef_transparent-header c-lactigo-language-selector .language-selector {
        position: static !important;
        gap: 0 !important;
    }

    html body div.header-content c-lactigo-language-selector .language-selector__menu,
    html body div.header-content c-lactigo-language-selector .language-selector__notice,
    html body c-ef_transparent-header c-lactigo-language-selector .language-selector__menu,
    html body c-ef_transparent-header c-lactigo-language-selector .language-selector__notice {
        top: calc(100% - 4px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }


    /* Inner pages: the logo component carries a Builder padding-left of
       8rem at every breakpoint, which pushed the image out of its box on
       phones, so the logo never showed. Pin it left at a phone size. */
    html body div.header-content .header-logo.header-logo {
        width: 104px !important;
        --dxp-c-s-logo-width: 104 !important;
        --dxp-c-s-alignment: left !important;
        overflow: hidden !important;
    }

    html body div.header-content .header-logo dxp_content_layout-site-logo,
    html body div.header-content .header-logo .logo-anchor,
    html body div.header-content .header-logo experience-responsive,
    html body div.header-content .header-logo img {
        width: 104px !important;
        max-width: 104px !important;
    }

    html body div.header-content .header-logo dxp_content_layout-site-logo,
    html body div.header-content .header-logo .logo-anchor {
        display: flex !important;
        justify-content: flex-start !important;
        width: 104px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html body div.header-content .header-logo img {
        height: auto !important;
        object-fit: contain !important;
        object-position: left center !important;
        margin: 0 !important;
    }
}

/* Logo sizes, shared by home and inner pages on phones. */
@media only screen and (max-width: 47.9375em) {
    html body .header-wrapper dxp_content_layout-site-logo,
    html body .header-wrapper .dxp-content-layout-site-logo,
    html body .header-wrapper .dxp-content-layout-site-logo experience-picture,
    html body .header-wrapper .dxp-content-layout-site-logo picture,
    html body .header-wrapper .dxp-content-layout-site-logo img {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        flex-basis: 104px !important;
    }
}

/* <= 416px: the logo steps down first, so the longest label (French
   "Connexion") and the chip clear it on 375-414px phones (402px = iPhone 16 Pro) */
@media only screen and (max-width: 26em) {
    html body .header-wrapper dxp_content_layout-site-logo,
    html body .header-wrapper .dxp-content-layout-site-logo,
    html body .header-wrapper .dxp-content-layout-site-logo experience-picture,
    html body .header-wrapper .dxp-content-layout-site-logo picture,
    html body .header-wrapper .dxp-content-layout-site-logo img,
    html body div.header-content .header-logo.header-logo,
    html body div.header-content .header-logo dxp_content_layout-site-logo,
    html body div.header-content .header-logo .logo-anchor,
    html body div.header-content .header-logo experience-responsive,
    html body div.header-content .header-logo img {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        flex-basis: 88px !important;
    }

    /* "Connexion" is the longest label: in French the word carries the pill */
    html:lang(fr) commerce_my_account-user-profile-menu .icon-color.icon-color {
        display: none !important;
    }
}

@media only screen and (max-width: 23.375em) {
    :root {
        --lactigo-header-gap: 4px;
    }

    html body c-ef_transparent-header .header-wrapper {
        grid-template-columns: 26px auto minmax(0, 1fr) !important;
        column-gap: 6px !important;
    }

    /* flag only: the chevron gives way before any label does */
    html body c-lactigo-language-selector .language-selector__chevron {
        display: none !important;
    }

    html body c-lactigo-language-selector .language-selector__button.language-selector__button {
        padding: 0 9px !important;
    }
}

@media only screen and (max-width: 22.4375em) {
    /* <= 359px (iPhone SE 1st gen): the pill keeps its word, the person icon gives way */
    html commerce_my_account-user-profile-menu .icon-color.icon-color {
        display: none !important;
    }

    html body div.header-content.header-content {
        padding-inline: 8px !important;
    }

    html body .header-wrapper dxp_content_layout-site-logo,
    html body .header-wrapper .dxp-content-layout-site-logo,
    html body .header-wrapper .dxp-content-layout-site-logo experience-picture,
    html body .header-wrapper .dxp-content-layout-site-logo picture,
    html body .header-wrapper .dxp-content-layout-site-logo img,
    html body div.header-content .header-logo.header-logo,
    html body div.header-content .header-logo dxp_content_layout-site-logo,
    html body div.header-content .header-logo .logo-anchor,
    html body div.header-content .header-logo experience-responsive,
    html body div.header-content .header-logo img {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        flex-basis: 80px !important;
    }
}

/* A landscape phone (844x390) is wider than the phone breakpoint but ~360px
   tall: let the market list scroll on any short screen. */
@media only screen and (max-height: 31.25em) {
    html body div.header-content c-lactigo-language-selector .language-selector__menu,
    html body c-ef_transparent-header c-lactigo-language-selector .language-selector__menu {
        max-height: calc(100dvh - 120px) !important;
        overflow-y: auto !important;
    }
}