/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,22): run-time error CSS1039: Token not allowed after unary operator: '-colors-neutral-gray0'
(17,21): run-time error CSS1039: Token not allowed after unary operator: '-breakpoints-desktop-small'
(23,22): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-14n'
(24,19): run-time error CSS1039: Token not allowed after unary operator: '-spacing-raised-3n'
(24,50): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-3n'
(31,27): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-4n'
(32,22): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-4n'
(36,22): run-time error CSS1035: Expected colon, found ','
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,28): run-time error CSS1039: Token not allowed after unary operator: '-colors-brand-primary'
(89,17): run-time error CSS1039: Token not allowed after unary operator: '-colors-neutral-gray0'
(155,14): run-time error CSS1030: Expected identifier, found '.'
(155,32): run-time error CSS1031: Expected selector, found ')'
(155,32): run-time error CSS1025: Expected comma or open brace, found ')'
(161,26): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-3n'
(162,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-3n'
(163,23): run-time error CSS1039: Token not allowed after unary operator: '-spacing-regular-3n'
(178,41): run-time error CSS1039: Token not allowed after unary operator: '-neutral-color-gray-3'
(279,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(326,24): run-time error CSS1039: Token not allowed after unary operator: '-pf-mobile-header-h'
(338,24): run-time error CSS1039: Token not allowed after unary operator: '-pf-mobile-header-h'
(349,39): run-time error CSS1039: Token not allowed after unary operator: '-pf-mobile-header-h'
(656,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(664,25): run-time error CSS1039: Token not allowed after unary operator: '-container-max-width'
(694,21): run-time error CSS1039: Token not allowed after unary operator: '-colors-neutral-gray0'
 */
.partnerFirstHeaderRoot {
    --teal: #005758;
    text-align: left;
    position: relative;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background: var(--colors-neutral-gray0, #ffffff);
    box-sizing: border-box;
    min-height: 84px;
    display: flex;
    align-items: center;
}

.partnerFirstHeaderInner {
    max-width: var(--breakpoints-desktop-small, 1280px);
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    align-items: center;
    column-gap: var(--spacing-regular-14n, 56px);
    padding: var(--spacing-raised-3n, 18px) var(--spacing-regular-3n, 12px);
}

.partnerFirstHeaderRightMenu {
    display: flex;
    align-items: center;
    flex-direction: row;
    -moz-column-gap: var(--spacing-regular-4n, 16px);
    column-gap: var(--spacing-regular-4n, 16px);
    margin-left: auto;
    
    /* FIXES FOR LEGACY ITEMS */
    .basket-container, .login-details-container {
        display: flex;
        align-items: center;
        flex-direction: row;
        margin: 0px;
        padding: 0;
        height: 24px;
        width: auto;
    }
    .div-user-info {
        margin: 0;
    }
}

/* Hidden region-selector placeholder is still a flex child and adds a second
   column-gap; remove it from the flex flow (is-hidden only hides its content). */
.partnerFirstHeaderRightMenu gds-microfrontend[module="web-partnerfirst-region-selector"],
.partnerFirstHeaderRightMenu web-partnerfirst-region-selector {
    display: none !important;
}

web-partnerfirst-fts {
    max-width: 640px;
    width: 100%;
}

/* Sales-login (switch account) top bar. Custom element defaults to inline; make it a
   full-width block so its self-styled bar fills the row. Target the gds-microfrontend
   wrapper too so the row is full-width before/without hydration. */
.partnerFirstSalesLoginRow gds-microfrontend[module="web-partnerfirst-sales-login"],
.partnerFirstSalesLoginRow web-partnerfirst-sales-login {
    display: block;
    width: 100%;
}

web-partnerfirst-private-taxonomy {
    --breakpoints-desktop-medium: 1376px;
}

web-partnerfirst-footer {
    --breakpoints-desktop-medium: 1376px;
}

.logo-outer web-partnerfirst-company-logo {
    float: left;
    margin-top: 11px;
    max-width: 200px;
}

.partnerFirstHeaderRightMenu .dvbasket-itemcount,
.partnerFirstHeaderRightMenu .dv-item-count,
.partnerFirstHeaderRightMenu .basketMastHead_basketAmount_5e4788e {
    background-color: var(--colors-brand-primary, #005758) !important;
    color: var(--colors-neutral-gray0, #ffffff) !important;
    border-radius: 100px !important;
}

/* Legacy cart badge (.dvbasket-itemcount): its pill styling lives in
   basketlistpopupstyle.css which is only loaded conditionally, so render the
   pill here too and overlap the icon's top-right corner. */
.partnerFirstHeaderRightMenu .dv-basket-cart {
    position: relative;
    height: 100%;
}
.partnerFirstHeaderRightMenu .dvbasket-itemcount {
    position: absolute;
    top: -8px;
    right: -8px;
    left: auto;
    height: 20px;
    box-sizing: border-box;
    padding: 0 6px;
    border: none;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

/* Keep the cart icon vertically in line with the other 24px header icons. */
.partnerFirstHeaderRightMenu .basket-container {
    height: 24px !important;
    align-items: center;
}

#topBarMicrositeAppLauncher {
    display: block;
    margin: 4px 15px 4px 10px;
}

#topBarMicrositeAppLauncher ul {
    height: auto;
    padding-right: 9px;
    float: none;
    box-sizing: border-box;
}

#topBarMicrositeAppLauncher ul li {
    float: none;
}

/* =====================================================================
   MVP mobile header (Figma "Header_MVP mobile")
   Row 1: hamburger + logo + account + basket (only 2 icons)
   Row 2: full-width search
   Mobile = below gds tablet-large breakpoint (1024px). Desktop untouched.
   ===================================================================== */
@media (max-width: 1023.98px) {
    /* Reserve scrollbar gutter so locking page scroll (overflow:hidden) on open
       doesn't shift the fixed header's right-aligned icons. */
    html {
        scrollbar-gutter: stable;
    }

    /* Legacy intouch.css forces body { min-width: 1280px }, which on mobile causes
       horizontal overflow (blank space) and pushes fixed overlays (sales-login sheet)
       off-screen. Drop it only when the PartnerFirst mobile header is active. */
    body:has(.pf-mobile-enabled) {
        min-width: 0;
    }

    .pf-mobile-enabled .partnerFirstHeaderInner {
        flex-wrap: wrap;
        column-gap: var(--spacing-regular-3n, 12px);
        row-gap: var(--spacing-regular-3n, 12px);
        padding: var(--spacing-regular-3n, 12px);
    }

    /* Mobile-only header bottom border + drop shadow (Figma). On a pseudo-element
       at z-index:1001 so it stays above the menu overlay (z-index:1000); anchored
       to the root's bottom, not the inner which can be shorter than min-height. */
    .partnerFirstHeaderRoot.pf-mobile-enabled::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* Needs a non-zero height: a 0px-tall source blurs to nothing, so give the
           shadow a 6px transparent body to cast from (border stays at the bottom). */
        height: 6px;
        border-bottom: 0.5px solid var(--neutral-color-gray-3, #D9D8D7);
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
        /* Clip the top edge so the blur only casts downward (and sideways), never
           back up into the header. */
        clip-path: inset(0 -50px -50px -50px);
        z-index: 1001;
        pointer-events: none;
    }

    /* Flyout sheet draws its own shadow flush under the header; hide the header's
       bottom border/shadow so they don't double up at the seam. */
    .partnerFirstHeaderRoot.pf-mobile-enabled.pf-flyout-basket::after,
    .partnerFirstHeaderRoot.pf-mobile-enabled.pf-flyout-user::after,
    .partnerFirstHeaderRoot.pf-mobile-enabled.pf-flyout-saleslogin::after {
        display: none;
    }

    /* Hamburger far left. Wrapper is display:contents, so order the inner element.
       display:flex wraps the button tightly (avoids the inline line-height
       descender that makes it look off-centre). */
    .pf-mobile-enabled .partnerFirstHeaderInner web-partnerfirst-mobile-menu {
        order: -1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    /* Logo stays on the top-left, next to the hamburger */
    .pf-mobile-enabled .partnerFirstHeaderInner .logo-img {
        order: 0;
        float: none;
        margin: 0;
        display: flex;
        align-items: center;
    }

    /* Mobile logo cap (Figma). Covers the <web-partnerfirst-company-logo> web
       component and the legacy .logo-img fallback. Overridden below for <=423px. */
    .pf-mobile-enabled .partnerFirstHeaderInner web-partnerfirst-company-logo img,
    .pf-mobile-enabled .partnerFirstHeaderInner .logo-img img {
        max-width: 243px;
    }

    /* Account + basket group stays on the top row, right-aligned */
    .pf-mobile-enabled .partnerFirstHeaderRightMenu {
        order: 1;
        margin-left: auto;
    }

    /* MVP shows only 2 icons -> hide App launcher and Orders (wrapper + element). */
    .pf-mobile-enabled .partnerFirstHeaderRightMenu gds-microfrontend[module="web-partnerfirst-app-launcher"],
    .pf-mobile-enabled .partnerFirstHeaderRightMenu gds-microfrontend[module="web-partnerfirst-orders"],
    .pf-mobile-enabled .partnerFirstHeaderRightMenu web-partnerfirst-app-launcher,
    .pf-mobile-enabled .partnerFirstHeaderRightMenu web-partnerfirst-orders {
        display: none !important;
    }

    /* Search drops to its own full-width row below the top bar. The wrapper is
       display:contents, so order the inner web-partnerfirst-fts element. */
    .pf-mobile-enabled .partnerFirstHeaderInner web-partnerfirst-fts {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Search hidden while the basket/user sheets are open (they replace it).
       Removing it from flow shrinks the header so the flyout (anchored via
       --pf-mobile-header-h) sits flush below the top row. */
    .pf-mobile-enabled.pf-flyout-basket .partnerFirstHeaderInner web-partnerfirst-fts,
    .pf-mobile-enabled.pf-flyout-user .partnerFirstHeaderInner web-partnerfirst-fts,
    .pf-mobile-enabled.pf-flyout-saleslogin .partnerFirstHeaderInner web-partnerfirst-fts {
        display: none !important;
    }

    /* With the search row gone, the root's min-height + align-items:center would
       re-center and drop the top row a few px (the "jump"). Pin it to the top
       instead. Scoped to the open state so the closed header is untouched. */
    .partnerFirstHeaderRoot.pf-mobile-enabled.pf-flyout-basket,
    .partnerFirstHeaderRoot.pf-mobile-enabled.pf-flyout-user,
    .partnerFirstHeaderRoot.pf-mobile-enabled.pf-flyout-saleslogin {
        min-height: 0;
        align-items: flex-start;
    }

    /* Collapse the empty Angular customer bar (.col-lg-12 keeps Bootstrap
       min-height:1px) so the header row sits flush under the top bar. */
    header.pf-mobile-sticky > .row > .col-lg-12:empty {
        min-height: 0;
    }

    /* Legacy basket & user pop-ups on mobile (Figma 5826-18802). Shown as a
       full-width sheet below the header, anchored via --pf-mobile-header-h.
       Show/hide is driven by a `pf-menu-open` class toggled on tap in
       PartnerFirstMobileMenu.tsx (desktop :hover/:focus don't fire on touch);
       :focus-within is kept as a fallback. --pf-mobile-header-h is tunable. */
    .pf-mobile-enabled .partnerFirstHeaderRoot {
        /* Size to content on mobile. The base 84px min-height + align-items:center
           would vertically center the top row and shift it down when the FTS search
           row is hidden for the basket/user flyouts, causing a jump. */
        min-height: 0;
        --pf-mobile-header-h: 120px;
    }

    /* Pin the header to the viewport. Uses fixed (not sticky) since host scroll/
       overflow rules make sticky unreliable on mobile; the web component pads
       <body> by the header height at runtime. z-index above sheets (1000), scrim
       (999) and the shadow strip (1001). pf-mobile-sticky set in Index.cshtml. */
    header.pf-mobile-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1002;
    }

    /* Customer bar (.CustBar_state0/1): fill the 44px slot with its opaque bg and
       drop the shadow/2px margin so no transparent seam shows above the header. */
    header.pf-mobile-sticky .CustBar_state0,
    header.pf-mobile-sticky .CustBar_state1 {
        height: 44px !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    .pf-mobile-enabled .basket-container.pf-menu-open .basket-cart-menu,
    .pf-mobile-enabled .login-details-container.pf-menu-open .login-details-content {
        display: block !important;
        margin-top: 0 !important;
    }

    /* On touch, the legacy desktop :hover reveal (from the remote
       basketlistpopupstyle.css / logoutpopupstyle.css) sticks after a tap and
       opens a second, independent flyout alongside the tap-driven .pf-menu-open
       sheet. On mobile make tap the single source of truth: hide the pop-up
       unless .pf-menu-open is set. Higher specificity + !important beats the
       remote `:hover { display:block !important }` rules. */
    .pf-mobile-enabled .basket-container:not(.pf-menu-open) .basket-cart-menu,
    .pf-mobile-enabled .login-details-container:not(.pf-menu-open) .login-details-content {
        display: none !important;
    }

    /* Dimming scrim behind the basket/user flyouts, from the header bottom down.
       Below the sheet (1000) and header (1002); tapping it closes the flyout. */
    .pf-mobile-enabled .basket-container.pf-menu-open::before,
    .pf-mobile-enabled .login-details-container.pf-menu-open::before {
        content: '';
        position: fixed;
        top: calc(var(--pf-mobile-header-h, 120px) - 1px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.40);
        z-index: 999;
    }

    .pf-mobile-enabled .basket-cart-menu,
    .pf-mobile-enabled .login-details-content {
        position: fixed !important;
        /* Pull up 1px to tuck under the header (z-index 1002 > 1000) and close the seam. */
        top: calc(var(--pf-mobile-header-h, 120px) - 1px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 2px !important;
        /* No top border: the header already draws the bottom border/shadow, so a
           border-top here would double it at the seam. */
        border-top: 0 !important;
        box-sizing: border-box !important;
        max-height: calc(100vh - var(--pf-mobile-header-h, 120px)) !important;
        overflow-y: auto !important;
        /* Just under the shadow strip (1001) so it looks like it slides out. */
        z-index: 1000 !important;
    }

    /* =====================================================================
       Basket pop-up internals — mobile styling per Figma (node 5826-18805),
       pinned here because the remote basketlistpopupstyle.css version may lag.
       Tokens: text #1C2222, teal #005758, separators #D9D8D7. Font: Arial. =====*/
    .pf-mobile-enabled .basket-cart-menu {
        padding: 20px !important;
    }

    /* List fills the panel (no fixed width / inner scroll); the whole sheet scrolls. */
    .pf-mobile-enabled .basket-cart-menu-basket-list,
    .pf-mobile-enabled #basketList {
        width: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Action links (Open/Create/Delete/Quick Add/Checkout): 48px rows with
       a 1px hairline separator between each (Figma list rows are 48px tall). */
    .pf-mobile-enabled .basket-cart-menu-actions {
        margin-bottom: 24px !important;
    }

        .pf-mobile-enabled .basket-cart-menu-actions a {
            display: block !important;
            padding: 12px 0 !important;
            border-bottom: 1px solid #D9D8D7 !important;
            font-family: Arial, sans-serif !important;
            font-style: normal !important;
            font-weight: 400 !important;
            font-size: 16px !important;
            line-height: 24px !important;
            color: #1C2222 !important;
        }

    /* "Basket list" section header. */
    .pf-mobile-enabled .basket-cart-menu-basket-list-header {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        font-family: Arial, sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        line-height: 24px !important;
        color: #005758 !important;
    }

    /* Basket rows: name left, line count right, 1px hairline separators. */
    .pf-mobile-enabled .basket-cart-menu-basket-list li {
        padding: 8px 0 !important;
        border-bottom: 1px solid #D9D8D7 !important;
    }

        .pf-mobile-enabled .basket-cart-menu-basket-list li a .basketName,
        .pf-mobile-enabled .basket-cart-menu-basket-list li a .numberOfLines {
            font-family: Arial, sans-serif !important;
            font-style: normal !important;
            font-weight: 400 !important;
            font-size: 16px !important;
            line-height: 24px !important;
            color: #1C2222 !important;
        }

        .pf-mobile-enabled .basket-cart-menu-basket-list li a .basketName {
            float: left !important;
        }

        .pf-mobile-enabled .basket-cart-menu-basket-list li a .numberOfLines {
            float: right !important;
            color: #005758 !important;
        }

    /* Active/selected basket: thicker teal underline, bold name, teal count pill. */
    .pf-mobile-enabled .basket-cart-menu-basket-list li.active-basket,
    .pf-mobile-enabled .basket-cart-menu-basket-list li[selectedbasket="true"] {
        border-bottom: 2px solid #005758 !important;
    }

        .pf-mobile-enabled .basket-cart-menu-basket-list li.active-basket a .basketName,
        .pf-mobile-enabled .basket-cart-menu-basket-list li[selectedbasket="true"] a .basketName {
            font-weight: 700 !important;
            color: #1C2222 !important;
        }

        .pf-mobile-enabled .basket-cart-menu-basket-list li.active-basket a .numberOfLines,
        .pf-mobile-enabled .basket-cart-menu-basket-list li[selectedbasket="true"] a .numberOfLines {
            width: max-content !important;
            background-color: #005758 !important;
            color: #FFFFFF !important;
            font-weight: 400 !important;
            line-height: 19px !important;
            border-radius: 100px !important;
            padding: 2px 8px !important;
        }

    /* =====================================================================
       User (login-details) pop-up — mobile styling per Figma (node 1458-20614):
       identity block above a 2px teal divider, then 48px menu rows with hairline
       separators and count pills. Tokens: teal #005758, email #727679, text
       #1C2222, account #262626, separators #D9D8D7, tag bg #EBF2F2. Arial. =====*/
    .pf-mobile-enabled .login-details-content {
        padding: 20px !important;
    }

        /* The little pointer/arrow frame is a desktop-dropdown affordance only. */
        .pf-mobile-enabled .login-details-content .white-frame {
            display: none !important;
        }

        .pf-mobile-enabled .login-details-content #ulActions {
            width: auto !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
            box-sizing: border-box !important;
        }

            /* Base row: Arial 16px/1.5 regular, gray6. Identity rows carry no
               separator; only the menu (.liaction) rows get hairlines below. */
            .pf-mobile-enabled .login-details-content #ulActions > li {
                padding: 12px 0 !important;
                border-bottom: none !important;
                font-family: Arial, sans-serif !important;
                font-style: normal !important;
                font-weight: 400 !important;
                font-size: 16px !important;
                line-height: 24px !important;
                color: #1C2222 !important;
            }

            /* Menu action rows: 48px tall, label left / badge right, hairline below. */
            .pf-mobile-enabled .login-details-content #ulActions > li.liaction {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 8px !important;
                min-height: 48px !important;
                box-sizing: border-box !important;
                border-bottom: 1px solid #D9D8D7 !important;
            }

            .pf-mobile-enabled .login-details-content #ulActions > li.liaction:last-child {
                border-bottom: none !important;
            }

            /* 2px teal divider between the identity block and the menu list. */
            .pf-mobile-enabled .login-details-content #ulActions > li:not(.liaction) + li.liaction {
                border-top: 2px solid #005758 !important;
                margin-top: 8px !important;
            }

        /* Menu row links take the dark gray6 row colour (not teal). */
        .pf-mobile-enabled .login-details-content #ulActions > li.liaction a {
            color: #1C2222 !important;
            text-decoration: none !important;
            font-family: Arial, sans-serif !important;
            font-weight: 400 !important;
            font-size: 16px !important;
            line-height: 24px !important;
            padding: 0 !important;
        }

        /* Identity: name bold teal, email small grey. */
        .pf-mobile-enabled .login-details-content .acc-name {
            font-family: Arial, sans-serif !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            line-height: 24px !important;
            color: #005758 !important;
        }

        .pf-mobile-enabled .login-details-content .acc-email {
            font-size: 12px !important;
            line-height: 18px !important;
            color: #727679 !important;
        }

        /* Account number / country: small charcoal text. */
        .pf-mobile-enabled .login-details-content .user-accno,
        .pf-mobile-enabled .login-details-content .country-shiftacc {
            font-size: 12px !important;
            line-height: 18px !important;
            color: #262626 !important;
        }

        /* Account-type shown as a rounded "Primary" tag. */
        .pf-mobile-enabled .login-details-content .user-acctype {
            display: inline-block !important;
            padding: 1px 8px !important;
            border-radius: 6px 2px !important;
            background: #EBF2F2 !important;
            font-family: Arial, sans-serif !important;
            font-size: 12px !important;
            line-height: 18px !important;
            color: #005758 !important;
        }

        /* Notification / voucher counts render as rounded pills that sit at the
           right edge of their row (override the desktop float + inline colours). */
        .pf-mobile-enabled .login-details-content .notifications-messages,
        .pf-mobile-enabled .login-details-content .notifications-vouchers {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
        }

        .pf-mobile-enabled .login-details-content .messages,
        .pf-mobile-enabled .login-details-content .vouchers {
            float: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 22px !important;
            height: 22px !important;
            padding: 0 8px !important;
            margin: 0 !important;
            border-radius: 24px !important;
            box-sizing: border-box !important;
            font-family: Arial, sans-serif !important;
            font-size: 14px !important;
            line-height: 1.5 !important;
        }

        .pf-mobile-enabled .login-details-content .messages {
            background-color: #D9D8D7 !important;
            color: #000000 !important;
        }

        .pf-mobile-enabled .login-details-content .vouchers {
            background-color: #005758 !important;
            color: #FFFFFF !important;
        }

    /* Desktop taxonomy row is replaced by the hamburger menu on mobile. It's a
       SIBLING of .partnerFirstHeaderRoot, so pf-mobile-enabled is added directly
       to the row in Index.cshtml and matched with a compound selector. */
    .partnerFirstTaxonomyRow.pf-mobile-enabled {
        display: none !important;
    }
}

/* Very small phones (~320-423px): shrink the logo so the top row (hamburger +
   logo + account + basket) still fits on one line. The private header renders the
   logo as the <web-partnerfirst-company-logo> web component (light DOM), whose
   built-in cap is max-width:287px; also cover the legacy .logo-img fallback. */
@media (max-width: 423px) {
    .pf-mobile-enabled .partnerFirstHeaderInner web-partnerfirst-company-logo img,
    .pf-mobile-enabled .partnerFirstHeaderInner .logo-img img {
        max-width: 180px;
    }
}

/* Hamburger is mobile-only: hide on desktop. Hide BOTH the wrapper and the
   hydrated element (the upgraded tag can end up outside the wrapper, leaving a
   gap to the left of the logo). */
@media (min-width: 1024px) {
    .pf-mobile-enabled .partnerFirstHeaderInner gds-microfrontend[module="web-partnerfirst-mobile-menu"],
    .pf-mobile-enabled .partnerFirstHeaderInner web-partnerfirst-mobile-menu {
        display: none !important;
    }
}

/* =====================================================================
   Legacy basket count-badge repositioning to the top-right corner. Overrides the
   global rules (TDSynnex-intouch-login-details.css / basketlistpopupstyle.css)
   only under .partnerFirstHeaderRoot, i.e. when the flag is on (all viewports).
   ===================================================================== */
.pf-mobile-enabled .dv-item-count {
    top: -8px;
    right: -6px;
    left: auto;
    bottom: auto;
}

.pf-mobile-enabled .dvbasket-itemcount {
    top: -8px;
    right: -6px;
    left: auto;
    margin: 0;
}

/* =====================================================================
   Desktop teal taxonomy horizontal scroll (desktop only; mobile uses hamburger).
   Categories scroll on one line when they overflow, paged by chevron buttons
   injected in Index.cshtml. The hover fly-out is anchored to the teal bar
   (.naviMenu) one level up so the scroll box's overflow doesn't clip it.
   ===================================================================== */
@media (min-width: 1024px) {
    .partnerFirstTaxonomyRow .col-lg-12 {
        position: relative;
    }

    /* Full-width teal band lives on the host element so the fly-out anchor
       (the inner bar) can be capped to the centered content width without
       shrinking the visible band. */
    .partnerFirstTaxonomyRow navigation-menu {
        display: block;
        max-width: 100%;
        background: var(--primary-color);
    }

    /* Positioning context for the fly-out. Capped to the centered content
       width and centered so hover fly-outs align with the header content
       instead of spilling across the full viewport on ultra-wide screens. */
    .partnerFirstTaxonomyRow navigation-menu > div {
        position: relative;
        max-width: var(--container-max-width, 1280px);
        margin: 0 auto;
    }

    /* Scrollable category row. static so the fly-out anchors to the bar above;
       margin:auto (from the component) centers it when it fits. */
    .partnerFirstTaxonomyRow navigation-menu > div > div {
        position: static;
        min-width: 0;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .partnerFirstTaxonomyRow navigation-menu > div > div::-webkit-scrollbar {
        display: none;
    }

    /* Injected chevron buttons; colour/position set inline over the bar edges. */
    .pf-taxonomy-scroll-btn {
        display: none;
        position: absolute;
        align-items: center;
        justify-content: center;
        width: 40px;
        padding: 0;
        border: 0;
        cursor: pointer;
        color: var(--colors-neutral-gray0, #ffffff);
        z-index: 2;
    }

    .pf-taxonomy-scroll-btn.is-visible {
        display: flex;
    }

    .pf-taxonomy-scroll-btn svg {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }
}