/* ==================== SCOPED CSS VARIABLES & RESETS ==================== */
.global-header {
    --gh-bg-page: #dbe2ea;
    --gh-bg-header: #ffffff;
    --gh-bg-search: #F4F5F6;
    --gh-text-main: #1F1F1F;
    --gh-search-text-main: #67717B;
    --gh-text-muted: #6b7280;
    --gh-primary-teal: #00a86b;
    --gh-accent-purple: #634af6;
    --gh-border-color: #d1d5db;

    --gh-font-family: 'proxima-nova', 'Proxima Nova', 'ProximaNova', 'ProximaNovaWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-family: var(--gh-font-family);
    letter-spacing: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

.global-header button,
.global-header input,
.global-header select,
.global-header textarea {
    font-family: inherit;
}

.global-header,
.global-header * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.global-header .fa,
.global-header .fa-solid,
.global-header .fa-regular,
.global-header .fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* ==== NEXT PAGE APP ZINDEX OVERRIDES === */
#gene-app {
    z-index: 1;
}

body > div[data-state="open"].z-50{
    z-index: 10000 !important;
}

/* ==== BLOG / ANNOUNCMENT BANNERSTICKY === */
.fixed-teaser,
.announcement-special,
.blog-header-wrapper.is-sticky {
    top: 89px !important;
}

@media (max-width: 1200px) {
    .fixed-teaser,
    .announcement-special,
    .blog-header-wrapper.is-sticky {
        top: 49px !important;
    }
}

@media (min-width: 2050px) {
    .fixed-teaser,
    .announcement-special,
    .blog-header-wrapper.is-sticky {
        top: 56px !important;
    }
}

/* ==== INTERCOM ZINDEX OVERRIDES === */
#intercom-container {
    position: relative;
    z-index: 100000 !important;
}

/* ==================== PARENT HEADER CONTAINER ==================== */
.global-header {
    width: 100%;
    background-color: var(--gh-bg-header);
    padding: 8px 32px 0 32px;
    border-bottom: 1px #e6ebf0 solid;
}

.global-header:hover {
    border-bottom: 1px #e6ebf0 solid;
}

/* ==================== DARKMODE HEADER ==================== */

.global-header.dark-mode,
.global-header.dark-mode .gh-nav-bottom .gh-nav-links>li>a,
.global-header.dark-mode .gh-nav-bottom .gh-nav-links>li>a.gh-active,
.global-header.dark-mode .gh-action-btn,
.global-header.dark-mode .gh-search-input::placeholder,
.global-header.dark-mode .gh-l1-item.gh-active .gh-l1-title,
.global-header.dark-mode .gh-l1-item.gh-active .gh-l1-title-link,
.global-header.dark-mode .gh-l3-links li a,
.global-header.dark-mode .gh-l2-main-title,
.global-header.dark-mode .gh-so-item,
.global-header.dark-mode .gh-l2-header-ctas .gh-btn-order-now:hover .gh-icon--arrow-right,
.global-header.dark-mode .gh-so-item:hover,
.global-header.dark-mode .gh-lang-item,
.global-header.dark-mode .gh-col-title,
.global-header.dark-mode .gh-mobile-tree-item,
.global-header.dark-mode .gh-drawer-view-title,
.global-header.dark-mode .gh-highlight-description,
.global-header.dark-mode .gh-l2-col-highlight-container .gh-btn-order-now:hover .gh-icon--arrow-right {
    color: #F8F9FA;
    background: transparent;
}

.global-header.dark-mode {
    border-bottom: 0;
}

.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link:hover,
.global-header.dark-mode .gh-l2-col-header,
.global-header.dark-mode .gh-l2-col-header .gh-col-title-link,
.global-header.dark-mode .gh-l3-links li:hover a {
    color: #F8F9FA !important;
}

.global-header.dark-mode .gh-l1-item.gh-active .gh-l1-arrow.gh-l1-external-icon,
.global-header.dark-mode .gh-btn-secondary .gh-icon--arrow-right,
.global-header.dark-mode .gh-l1-item.gh-active .gh-l1-arrow,
.global-header.dark-mode .gh-lang-item.gh-active .gh-lang-check,
.global-header.dark-mode .gh-mobile-lang-item.gh-active .gh-lang-check,
.global-header.dark-mode .gh-l2-header-ctas .gh-btn-order-now:hover .gh-icon--arrow-right,
.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link .gh-icon--arrow-right,
.global-header.dark-mode .gh-l2-col-highlight-container .gh-btn-order-now:hover .gh-icon--arrow-right  {
    background-color: #F8F9FA !important;
}

.twds-global-navbar.dark-mode .gh-btn-start-order:hover .gh-icon.gh-icon--chevron-down,
.global-header.dark-mode .gh-btn-secondary:hover .gh-icon--arrow-right,
.global-header.dark-mode .gh-btn-order-now .gh-icon--arrow-right,
.global-header.dark-mode .gh-mega-dropdown,
.global-header.dark-mode .gh-l2-panel {
    background: #1E2024;
    filter: none;
}

.global-header.dark-mode .gh-mega-dropdown::after {
    background-color: #4A5158;
}

.global-header.dark-mode .gh-mega-dropdown {
    border: 1px #1E2024 solid;
}

.global-header.dark-mode .gh-start-order-dropdown.gh-open,
.global-header.dark-mode .gh-lang-dropdown.gh-open,
.global-header.dark-mode .gh-support-dropdown.gh-open,
.global-header.dark-mode,
.global-header.ecommerce.dark-mode,
.global-header.dark-mode .gh-l2-header-ctas .gh-btn-order-now .gh-icon--arrow-right,
.global-header.dark-mode .gh-mobile-drawer-card {
    background-color: #090A0A;
}

.global-header.dark-mode,
.global-header.dark-mode .gh-mobile-drawer-card {
    color-scheme: dark;
}

.global-header.dark-mode .gh-drawer-view-scroll,
.global-header.dark-mode .gh-drawer-view.is-active,
.global-header.dark-mode .gh-drawer-body {
    scrollbar-color: #5E6771 #1E2024;
}

.global-header.dark-mode .gh-drawer-view-scroll::-webkit-scrollbar-track,
.global-header.dark-mode .gh-drawer-view.is-active::-webkit-scrollbar-track,
.global-header.dark-mode .gh-drawer-body::-webkit-scrollbar-track {
    background: #1E2024;
}

.global-header.dark-mode .gh-drawer-view-scroll::-webkit-scrollbar-thumb,
.global-header.dark-mode .gh-drawer-view.is-active::-webkit-scrollbar-thumb,
.global-header.dark-mode .gh-drawer-body::-webkit-scrollbar-thumb {
    background: #5E6771;
}

.global-header.dark-mode .gh-drawer-view-scroll::-webkit-scrollbar-thumb:hover,
.global-header.dark-mode .gh-drawer-view.is-active::-webkit-scrollbar-thumb:hover,
.global-header.dark-mode .gh-drawer-body::-webkit-scrollbar-thumb:hover {
    background: #86919B;
}

.global-header.dark-mode .gh-drawer-divider,
.global-header.dark-mode .gh-mobile-search-expand,
.global-header.dark-mode .gh-profile-divider {
    background-color: #4A5158;
}

.global-header.dark-mode .gh-l2-col-highlight-container,
.global-header.dark-mode .gh-drawer-view-title,
.global-header.dark-mode .gh-drawer-header {
    border-color: #4A5158;
}

.global-header.dark-mode .gh-drawer-back-btn,
.global-header.dark-mode .gh-drawer-back-btn:hover,
.global-header.dark-mode .gh-drawer-back-btn:focus,
.global-header.dark-mode .gh-drawer-back-btn:focus-visible {
    color: #F8F9FA;
    background: none;
}

.global-header.dark-mode .gh-drawer-back-btn .gh-icon,
.global-header.dark-mode .gh-drawer-back-btn:hover .gh-icon,
.global-header.dark-mode .gh-drawer-back-btn:focus .gh-icon,
.global-header.dark-mode .gh-drawer-back-btn:focus-visible .gh-icon {
    background-color: #F8F9FA !important;
}

.global-header.dark-mode .gh-drawer-close-btn .gh-icon {
    background-color: #86919B;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all {
    font-size: 16px;
    height: 40px;
}

.global-header.dark-mode .gh-l2-header-ctas .gh-btn-secondary:hover .gh-icon--arrow-right {
    background-color: #1E2024 !important;
}

.global-header.dark-mode .gh-so-item:hover,
.global-header.dark-mode .gh-l2-col-header .gh-col-title-link:hover,
.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link:hover,
.global-header.dark-mode .gh-l3-links li:hover,
.global-header.dark-mode .gh-l1-item:hover,
.global-header.dark-mode .gh-l1-item.gh-active {
    background-color: rgba(171, 180, 188, .05);
}

.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:hover,
.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:focus-visible,
.global-header.dark-mode .gh-mobile-drawer-card .gh-explore-link:hover,
.global-header.dark-mode .gh-mobile-drawer-card .gh-l3-links li:hover a {
    color: #FFFFFF;
    background-color: rgba(171, 180, 188, .05);
}

.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:hover .gh-mobile-tree-sub,
.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:focus-visible .gh-mobile-tree-sub {
    color: #FFFFFF;
}

.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:hover .gh-icon,
.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:focus-visible .gh-icon,
.global-header.dark-mode .gh-mobile-drawer-card .gh-explore-link:hover .gh-icon,
.global-header.dark-mode .gh-mobile-drawer-card .gh-col-title-link:hover .gh-icon {
    background-color: #FFFFFF !important;
}

.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:hover img,
.global-header.dark-mode .gh-mobile-drawer-card .gh-mobile-tree-item:focus-visible img,
.global-header.dark-mode .gh-mobile-drawer-card .gh-explore-link:hover img {
    filter: brightness(0) invert(1);
}

.global-header.dark-mode .gh-lang-dropdown .gh-lang-item:hover {
    background-color: rgba(171, 180, 188, .05) !important;
}

.global-header.dark-mode .gh-l1-sub {
    color: #86919B;
}

.global-header.dark-mode .gh-l2-col-header > span,
.global-header.dark-mode .gh-l2-col-header .gh-col-title-link {
    padding: 8px;
}

.global-header.dark-mode .gh-mobile-l2-header {
    padding: 0 8px;
}

.global-header img.gh-logo-dark {
    display: none;
}

.global-header.dark-mode img.gh-logo-light {
    display: none;
}

.global-header.dark-mode img.gh-logo-dark {
    display: block;
}

.global-header.dark-mode .gh-search-bar {
    border-color: transparent;
    background-color: rgba(171, 180, 188, .10);
}

.global-header .gh-mobile-l2-header {
    padding: 0 8px;
}

.global-header.dark-mode .gh-search-input:focus,
.global-header.dark-mode .gh-search-input {
    color: #F8F9FA;
}

.global-header.dark-mode .gh-search-bar:focus-within {
    background-color: rgba(171, 180, 188, .10);
}

.global-header.dark-mode .gh-btn-order-now,
.global-header.dark-mode .gh-search-submit {
    background-color: #F0F2F4;
    color: #000000;
}

.global-header.dark-mode .gh-btn-order-now:hover,
.global-header.dark-mode .gh-btn-secondary {
    border-color: #5E6771;
    background-color: transparent;
    color: #F8F9FA;    
}

.twds-global-navbar.dark-mode .gh-icon.gh-icon--chevron-down,
.global-header.dark-mode .gh-search-clear .gh-icon {
    background-color: #F8F9FA;
}

.global-header.dark-mode .gh-search-bar:focus-within .gh-search-clear .gh-icon {
    background-color: #5E6771;
}

.global-header.dark-mode .gh-search-bar:focus-within .gh-search-submit {
    background-color: #F0F2F4;
    color: #000000;
}

.twds-global-navbar.dark-mode .gh-icon--arrow-left,
.twds-global-navbar.dark-mode .gh-icon.gh-icon--globe,
.twds-global-navbar.dark-mode .gh-icon.gh-icon--help,
.global-header.dark-mode .gh-currency-text {
    color: #CBD4DC;
}

.global-header.dark-mode .gh-menu-toggle,
.global-header.dark-mode .gh-search-icon,
.global-header.dark-mode .gh-search-input::placeholder,
.global-header.dark-mode .gh-search-input:focus::placeholder {
    color: #86919B;
}

.global-header.dark-mode .gh-btn-start-order {
    background: transparent;
    color: #F8F9FA;
    border: 1px solid #5E6771;
}

.global-header.dark-mode .gh-btn-start-order i {
    color: #F8F9FA;
}

.global-header.dark-mode .gh-btn-secondary:hover,
.global-header.dark-mode .gh-btn-start-order:hover {
    background: #F8F9FA;
    color: #000;
    border: 1px solid #F8F9FA;
}

.global-header.dark-mode .gh-btn-start-order:hover i {
    color: #F8F9FA;
    background-color: transparent;
}

.global-header.dark-mode .gh-mobile-cta-group {
    background-color: #1E2024;
}

.global-header.dark-mode .gh-mobile-cta-group:before {
    border-top-color: #4A5158;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all {
    background-color: #F0F2F4;
    color: #000000;
    border: 1px solid #F0F2F4;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all .gh-icon--arrow-right {
    background-color: #1E2024 !important;
    filter: none;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all:hover {
    background-color: transparent;
    color: #F8F9FA;
    border-color: #5E6771;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all:hover .gh-icon--arrow-right {
    background-color: #F8F9FA !important;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all-secondary {
    background-color: transparent;
    color: #F8F9FA;
    border: 1px solid #5E6771;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all-secondary .gh-icon--arrow-right {
    background-color: #F8F9FA !important;
    filter: none;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all-secondary:hover {
    background-color: #F8F9FA;
    color: #000000;
    border-color: #F8F9FA;
}

.global-header.dark-mode .gh-mobile-cta-group .gh-btn-shop-all-secondary:hover .gh-icon--arrow-right {
    background-color: #1E2024 !important;
    filter: none;
}


/* ==================== PARENT HEADER CONTAINER (ECOMMERCE) ==================== */
.global-header.ecommerce,
.global-header.global-header-slim {
    background-color: #F0F2F4;
    padding: 8px 24px;
    height: 40px;
}

.global-header.ecommerce .gh-nav-bottom,
.global-header.ecommerce .gh-lang-container,
.global-header.ecommerce .gh-btn-start-order,
.global-header.ecommerce .gh-search-bar,
.global-header.ecommerce .gh-search-toggle-btn,
.global-header.global-header-slim .gh-nav-bottom,
.global-header.global-header-slim .gh-lang-container,
.global-header.global-header-slim .gh-btn-start-order,
.global-header.global-header-slim .gh-search-bar,
.global-header.global-header-slim .gh-search-toggle-btn {
    display: none !important;
}

.global-header.global-header-slim .gh-nav-top,
.global-header.global-header-slim .gh-nav-actions {
    height: 24px;
}

.global-header.global-header-slim .gh-btn-sign-in {
    padding: 4px 14px;
    height: 24px;
}

.global-header.global-header-slim  .gh-brand-logo img {
    width: auto;
    height: 24px;
}

.twds-global-navbar.global-header-slim .gh-icon--globe,
.twds-global-navbar.global-header-slim .gh-icon--help {
    width: 16px;
    height: 16px;
    background-color: #5E6771;
}

.global-header.global-header-slim .gh-avatar {
    font-size: 10px;
    width: 24px;
    height: 24px;
}

.global-header.ecommerce .gh-currency-btn,
.global-header.global-header-slim .gh-currency-btn {
    display: flex !important;
    height: 24px;
}

.global-header.global-header-slim.punchout-buyer .gh-nav-actions > :not(.gh-start-order-container),
.global-header.ecommerce.punchout-buyer .gh-nav-actions > :not(.gh-start-order-container),
[data-gh-root][data-gh-punchout-buyer="true"].global-header-slim .gh-nav-actions > :not(.gh-start-order-container) {
    display: none !important;
}

.global-header.global-header-slim.punchout-buyer .gh-start-order-container,
.global-header.ecommerce.punchout-buyer .gh-start-order-container,
[data-gh-root][data-gh-punchout-buyer="true"].global-header-slim .gh-start-order-container {
    display: inline-block !important;
}

.global-header.global-header-slim.punchout-buyer .gh-btn-start-order,
.global-header.ecommerce.punchout-buyer .gh-btn-start-order,
[data-gh-root][data-gh-punchout-buyer="true"].global-header-slim .gh-btn-start-order {
    display: flex !important;
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
}

/* ==================== TOP ROW ==================== */
.global-header .gh-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    gap: 48px;
}

/* --- Brand Logo --- */
.global-header .gh-brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.global-header .gh-logo-compact {
    display: none;
}

/* --- Desktop Inline Search Bar --- */
.global-header .gh-search-bar {
    flex: 1;
    max-width: 640px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 2px 2px 2px 8px;
    background-color: var(--gh-bg-search);
    border: 1px solid transparent;
    border-radius: 20px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-header .gh-search-icon {
    position: static;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--gh-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.global-header .gh-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0 4px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--gh-search-text-main);
    outline: none;
    box-shadow: none;
}

.global-header .gh-search-input::-webkit-search-cancel-button,
.global-header .gh-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.global-header .gh-search-input::placeholder {
    color: #838e9e;
}

.global-header .gh-search-input:focus {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.global-header .gh-search-bar:focus-within {
    background-color: #ffffff;
    border-color: var(--gh-primary-teal);
    box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}

.global-header .gh-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.global-header .gh-search-clear[hidden] {
    display: none !important;
}

.global-header .gh-search-clear .gh-icon {
    width: 16px;
    height: 16px;
    background-color: #5E6771;
}

.global-header .gh-search-submit {
    flex-shrink: 0;
    height: calc(100% - 2px);
    padding: 0 14px;
    border: 0;
    border-radius: 16px;
    background-color: #000000;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.global-header .gh-search-submit:hover {
    background-color: #262626;
}

/* --- Right Actions Group --- */
.global-header .gh-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    margin-left: auto;
    z-index: 30;
}

.global-header .gh-action-btn {
    background: transparent;
    border: none;
    color: #5E6771;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    transition: color 0.2s ease;
}

.global-header .gh-action-btn:hover {
    color: #5E6771;
}

.global-header .gh-action-btn:hover .gh-icon {
    background-color: #5E6771;
}

.global-header .gh-action-btn:is(.gh-lang-btn, .gh-help-btn) {
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.global-header .gh-action-btn:is(.gh-lang-btn, .gh-help-btn):is(:hover, :focus-visible, [aria-expanded="true"]) {
    color: var(--gh-text-main);
    background-color: #F8F9FA;
}

.global-header .gh-action-btn:is(.gh-lang-btn, .gh-help-btn):is(:hover, :focus-visible, [aria-expanded="true"]) .gh-lang-text {
    color: inherit;
}

.global-header .gh-action-btn:is(.gh-lang-btn, .gh-help-btn):is(:hover, :focus-visible, [aria-expanded="true"]) .gh-icon {
    background-color: currentColor;
}

.global-header.dark-mode .gh-action-btn:is(.gh-lang-btn, .gh-help-btn):is(:hover, :focus-visible, [aria-expanded="true"]) {
    color: #F8F9FA;
    background-color: rgba(171, 180, 188, .05);
}

/* Mobile Search Toggle Icon Button (Hidden on Desktop) */
.global-header .gh-search-toggle-btn {
    display: none;
    font-size: 16px;
    color: #374151;
}

.global-header .gh-currency-text,
.global-header .gh-lang-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.global-header .gh-currency-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    min-height: 1em;
    position: relative;
}

.global-header .gh-currency-btn {
    display: none;
}

/* Language Dropdown Container & Styling */
.global-header .gh-lang-container,
.global-header .gh-support-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.global-header .gh-lang-dropdown,
.global-header .gh-support-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: calc(-160px / 2);
    width: 160px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 8px 6px;
    display: none;
    z-index: 31;
}

.global-header .gh-support-dropdown {
    width: 240px;
    left: calc(-240px / 2);
}

.global-header .gh-lang-dropdown.gh-open,
.global-header .gh-support-dropdown.gh-open {
    display: block;
    animation: ghDropdownFade 0.2s ease forwards;
}

.global-header .gh-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    justify-content: space-between;
    color: #1F1F1F;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.global-header .gh-lang-item:hover {
    background-color: #F8F9FA !important;
}

.global-header .gh-lang-check {
    font-size: 12px;
    color: var(--gh-primary-teal);
    visibility: hidden;
    width: 14px;
    text-align: center;
}

.global-header .gh-lang-item.gh-active .gh-lang-check,
.global-header .gh-mobile-lang-item.gh-active .gh-lang-check {
    visibility: visible;
    background-color: var(--gh-primary-teal);
}


.global-header .gh-cart-btn {
    display: none;
    font-size: 22px;
}

.global-header .gh-cart-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Sign In Pill Button */
.global-header .gh-btn-sign-in {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #A0F2C8;
    color: #111827;
    border: none;
    border-radius: 20px;
    padding: 7px 18px;
    height: 33px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.global-header .gh-btn-sign-in:hover {
    background-color: #82EAB4;
}

/* Profile Avatar & Dropdown Container */
.global-header .gh-avatar-container {
    position: relative;
    display: flex;
    align-items: center;
}

.global-header .gh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--gh-accent-purple);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.global-header .gh-avatar:hover {
    opacity: 0.9;
}

/* Profile Dropdown Card (post sign-in user menu) */
.global-header .gh-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 264px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid #E5E7EB;
    padding: 8px;
    display: none;
    z-index: 31;
}

.global-header .gh-profile-dropdown.gh-open {
    display: block;
    animation: ghDropdownFade 0.2s ease forwards;
}

.global-header .gh-profile-menu-header {
    display: none;
}

/* "Hi, Tina" — the name is filled in by twds-global-navbar-auth.js */
.global-header .gh-profile-greeting,
.global-header .gh-start-order-dropdown-header,
.global-header .gh-lang-dropdown-header,
.global-header .gh-support-dropdown-header {
    padding: 8px 12px 0 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--gh-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-header .gh-profile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--gh-text-main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    transition: background-color 0.15s ease;
}

.global-header .gh-profile-item:hover,
.global-header .gh-profile-item:focus-visible {
    background-color: #F5F6F8;
    outline: none;
}

.global-header .gh-profile-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    font-size: 22px;
    color: #4B5563;
}

.global-header .gh-profile-item-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.global-header .gh-profile-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-header .gh-profile-divider {
    height: 1px;
    background-color: #E5E9EB;
    margin: 8px 12px;
}

/* Darkmode user menu */
.global-header.dark-mode .gh-profile-dropdown {
    background: #1A1D23;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.global-header.dark-mode .gh-profile-greeting,
.global-header.dark-mode .gh-profile-item {
    color: #ffffff;
}

.global-header.dark-mode .gh-profile-item-icon {
    color: #C3C8D1;
}

.global-header.dark-mode .gh-profile-item:hover,
.global-header.dark-mode .gh-profile-item:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

.global-header.dark-mode .gh-profile-divider {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Start Order Container & Button */
.global-header .gh-start-order-container {
    position: relative;
    display: inline-block;
}

.global-header .gh-btn-start-order {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gh-font-family);
    background-color: #ffffff;
    border: 1px solid var(--gh-border-color);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gh-text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

.global-header .gh-btn-start-order:hover {
    border-color: #9ca3af;
    background-color: #f9fafb;
}

.global-header .gh-btn-start-order i {
    font-size: 10px;
    color: #6b7280;
}

/* Start Order Dropdown Card */
.global-header .gh-start-order-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 12px 8px;
    display: none;
    z-index: 31;
}

.global-header .gh-start-order-dropdown.gh-open {
    display: block;
    animation: ghDropdownFade 0.2s ease forwards;
}

@keyframes ghDropdownFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.global-header .gh-so-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #1F1F1F;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.15s ease;
}

.global-header .gh-so-item:hover {
    background-color: #F8F9FA;
}

.global-header .gh-so-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.global-header .gh-so-divider {
    height: 1px;
    background-color: #E5E7EB;
    margin: 10px 14px;
}

.global-header .gh-so-section-header {
    font-size: 11px;
    font-weight: 600;
    color: #1F1F1F;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 4px 14px 8px 14px;
}

/* Hamburger Toggle */
.global-header .gh-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--gh-text-main);
    cursor: pointer;
    padding: 4px;
}

/* Expandable Mobile Search Container */
.global-header .gh-mobile-search-expand {
    display: none;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E5E7EB;
}

.global-header .gh-mobile-search-expand.gh-open {
    display: block;
    animation: ghSearchSlide 0.2s ease-out forwards;
}

.global-header .gh-mobile-search-expand .gh-search-bar {
    display: flex !important;
    max-width: 100% !important;
    width: 100% !important;
}

@keyframes ghSearchSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== BOTTOM ROW (DESKTOP NAVIGATION LINKS) ==================== */
.global-header .gh-nav-bottom {
    margin-top: 8px;
    position: relative;
    width: 100%;
}

.global-header .gh-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 40px;
    list-style: none;
}

.global-header .gh-nav-links>li {
    position: static;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 32;
}

/*
 * Invisible hover bridge in the gap between the nav link and the dropdown.
 * Without this, moving the pointer off .gh-nav-links drops :hover and the
 * menu closes before it can be entered. Mega items are position:static so
 * this ::after is positioned against .gh-nav-bottom (full-width strip).
 * Simple items are position:relative so it sits under that link.
 */
.global-header .gh-nav-links > li.gh-has-dropdown:hover::after,
.global-header .gh-nav-links > li.gh-simple-nav:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
    background: transparent;
    pointer-events: auto;
    z-index: 32;
}

.global-header .gh-nav-links>li>a {
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--gh-text-main);
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
    border-bottom: 2px solid transparent;
    position: relative;
    z-index: 33;
}

.global-header .gh-nav-links>li>a:hover,
.global-header .gh-nav-links>li:hover>a {
    color: var(--gh-text-main);
    border-bottom: 2px solid var(--gh-primary-teal);
}

/* ==================== DESKTOP MEGA DROPDOWN MENU ==================== */
.global-header .gh-mega-dropdown {
    position: absolute;
    top: 100%;
    left: -10px;
    width: calc(100% + 20px);
    background: #ffffff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid #E5E7EB;
    overflow: hidden;
    display: none;
    z-index: 31;
    max-width: 1920px;
    height: var(--gh-mega-height, auto);
    max-height: var(--gh-mega-max-height, calc(100dvh - 8px));
    align-items: stretch;
}

.global-header .gh-mega-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
    display: block;
    pointer-events: auto;
    z-index: 0;
}

.global-header .gh-mega-dropdown::after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 312px;
    width: 1px;
    background: #E5E7EB;
    pointer-events: none;
    z-index: 30;
}

.global-header .gh-has-dropdown:hover .gh-mega-dropdown {
    display: flex;
}

/* --- Left Sidebar (Level 1 Options) --- */
.global-header .gh-l1-sidebar:first-child {
    gap: 4px;
}

.global-header .gh-l1-sidebar {
    width: 304px;
    padding: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
    color: #67717B;
    flex-shrink: 0;
    align-self: flex-start;
    max-height: 100%;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    min-height: 0;
    box-sizing: border-box;
}

.global-header .gh-l1-item {
    border-radius: 10px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    position: static;
}

.global-header .gh-l1-link {
    display: flex;
    align-items: center;
    padding: 12px 8px 12px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.global-header .gh-l1-link-icon {
    align-self: baseline;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

.global-header .gh-l2-title-group-icon {
    width: 32px;
    height: 32px;
}

.global-header .gh-l1-link::after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    right: 0px;
    width: 32px;
    background: transparent;
    z-index: 10;
}

.global-header .gh-l1-item:hover,
.global-header .gh-l1-item.gh-active {
    background-color: #F8F9FA;
}

.global-header .gh-l1-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.global-header .gh-l1-title-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--gh-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.global-header .gh-l1-item .gh-l1-title {
    font-size: 16px;
    font-weight: 600;
}

.global-header .gh-l1-item.gh-active .gh-l1-title,
.global-header .gh-l1-item.gh-active .gh-l1-title-link {
    color: var(--gh-text-main);
}

.global-header .gh-l1-title-link:hover {
    color: var(--gh-primary-teal);
}

.global-header .gh-l1-title-link:active {
    color: #00875a;
}

.global-header .gh-l1-sub {
    font-size: 14px;
    color: var(--gh-text-muted);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
}

.global-header .gh-l1-arrow {
    font-size: 11px;
    background-color: #9CA3AF !important;
    transition: transform 0.2s ease;
}

.global-header .gh-l1-item:hover .gh-l1-arrow {
    color: var(--gh-text-main);
}

.global-header .gh-l1-item .gh-l1-arrow.gh-l1-external-icon {
    background-color: #9CA3AF !important;
}

.global-header .gh-l1-item.gh-active .gh-l1-arrow.gh-l1-external-icon {
    background-color: #1f1f1f !important;
}

.global-header .gh-l1-item.gh-active .gh-l1-arrow {
    background-color: #1f1f1f !important;
}

.global-header .gh-l1-external-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Right Submenu Panels --- */
.global-header .gh-l2-panel {
    position: absolute;
    top: 0;
    right: 0;
    left: 312px;
    bottom: 0;
    background: #ffffff;
    padding: 32px;
    display: none;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 1;
}

.global-header .gh-l1-item.gh-active .gh-l2-panel {
    display: flex;
}

.global-header .gh-l1-sidebar:hover .gh-l1-item.gh-active:not(:hover) .gh-l2-panel {
    display: none;
}

.global-header .gh-l1-item:hover .gh-l2-panel {
    display: flex !important;
}

.global-header .gh-l2-header {
    display: flex;
    align-items: center;
    padding-left: 8px;
    justify-content: space-between;
    height: 40px;
    width: 100%;
}

.global-header .gh-l2-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.global-header .gh-l2-main-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gh-text-main);
}

.global-header .gh-l2-header-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
}

.global-header .gh-btn-order-now {
    background-color: #000000;
    color: #ffffff;
    padding: 8px 8px 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    display: flex;
    gap: 8px;
    border: 1px solid #000000;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.global-header .gh-btn-order-now .gh-icon--arrow-right { 
    filter: brightness(0) invert(1);
}

.global-header .gh-btn-order-now:hover {
    background-color: #262626;
    border-color: #262626;
}

.global-header .gh-btn-order-now i {
    font-size: 11px;
}

/* Hardening: some legacy page templates ship stylesheets after this one with rules like
   `.ngs li:hover span { color: black !important }` (see clientlib-drupal/resource.css).
   That specificity (0,2,2) with !important blanks out mega-menu CTA labels — the pill's
   text becomes black on black. Selectors below chain twds-global-navbar + global-header +
   gh-mega-dropdown to reach specificity (0,5,1), which beats the offender even at
   !important. Covers both the header Start-order pill and the highlight-card CTAs. */
.twds-global-navbar.global-header .gh-mega-dropdown .gh-btn-order-now,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-btn-secondary:hover,
.twds-global-navbar.global-header .gh-mega-dropdown .gh-btn-order-now > span:not(.gh-icon) {
    color: #ffffff !important;
}
.twds-global-navbar.global-header .gh-mega-dropdown .gh-btn-order-now > span:not(.gh-icon) {
    display: inline !important;
    visibility: visible !important;
    line-height: 1;
    text-decoration: none !important;
}
.twds-global-navbar.global-header .gh-l2-header-ctas .gh-btn-order-now > span:not(.gh-icon) {
    font-size: 14px;
    line-height: 22px;
}

/* Hardening block — light mode only. All rules below are scoped to
   `:not(.dark-mode)` so the existing `.global-header.dark-mode ...` rules
   earlier in the file continue to own the dark-mode palette (light text on
   dark chrome). Without this scope, my !important overrides forced
   light-mode dark text into dark-mode headers. */
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l1-item .gh-l1-title,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l1-item .gh-l1-title-link {
    color: var(--gh-text-muted) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l1-item .gh-l1-sub {
    color: var(--gh-text-muted) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l1-item.gh-active .gh-l1-title,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l1-item.gh-active .gh-l1-title-link {
    color: var(--gh-text-main) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l1-item .gh-l1-title-link:hover {
    color: var(--gh-primary-teal) !important;
}


.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-main-title {
    color: var(--gh-text-main) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-col-header,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-col-header .gh-col-title,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link .gh-col-title {
    color: var(--gh-text-main) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l3-links li a {
    color: #374151 !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l3-links li:hover a {
    color: var(--gh-text-main) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l3-links li p {
    color: var(--gh-text-muted) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-explore-link,
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-explore-link span {
    color: var(--gh-primary-teal) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-col-highlight-container .gh-highlight-title {
    color: var(--gh-text-main) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-l2-col-highlight-container .gh-highlight-description {
    color: var(--gh-text-muted) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown .gh-badge {
    color: #065F46 !important;
}

/* Simple dropdown (Resources / small drop-lists) — same treatment. */
.twds-global-navbar.global-header:not(.dark-mode) .gh-simple-dropdown .gh-l1-title,
.twds-global-navbar.global-header:not(.dark-mode) .gh-simple-dropdown .gh-l1-title-link {
    color: var(--gh-text-muted) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-simple-dropdown .gh-l1-item.gh-active .gh-l1-title,
.twds-global-navbar.global-header:not(.dark-mode) .gh-simple-dropdown .gh-l1-item.gh-active .gh-l1-title-link {
    color: var(--gh-text-main) !important;
}
.twds-global-navbar.global-header:not(.dark-mode) .gh-simple-dropdown .gh-l1-title-link:hover {
    color: var(--gh-primary-teal) !important;
}


.twds-global-navbar.global-header:not(.dark-mode) .gh-nav-links > li > a,
.twds-global-navbar.global-header:not(.dark-mode) .gh-nav-links > li > a > span {
    color: var(--gh-text-main) !important;
}


.twds-global-navbar.global-header:not(.dark-mode) .gh-mega-dropdown *,
.twds-global-navbar.global-header:not(.dark-mode) .gh-simple-dropdown * {
    color: inherit !important;
}

/* Dark-mode mirror of the block above. Real content pages (e.g. /products/ngs
   with `.dark-mode` header) still ship legacy `.ngs li:hover span
   { color:black !important }` rules that bleed into the mega — the .dark.html
   XF preview doesn't, which is why the preview looked right and the real page
   didn't. Same chained specificity (0,6,0) beats those. */
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l1-item .gh-l1-title,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l1-item .gh-l1-title-link,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l1-item .gh-l1-sub {
    color: #86919B !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l1-item.gh-active .gh-l1-title,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l1-item.gh-active .gh-l1-title-link {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l1-item .gh-l1-title-link:hover {
    color: var(--gh-primary-teal) !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-main-title,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header .gh-col-title,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-header .gh-col-title-link .gh-col-title {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l3-links li a {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l3-links li:hover a {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l3-links li p {
    color: #86919B !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-explore-link,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-explore-link span {
    color: var(--gh-primary-teal) !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-highlight-container .gh-highlight-title {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-l2-col-highlight-container .gh-highlight-description {
    color: #86919B !important;
}
.twds-global-navbar.global-header.dark-mode .gh-simple-dropdown .gh-l1-title,
.twds-global-navbar.global-header.dark-mode .gh-simple-dropdown .gh-l1-title-link {
    color: #86919B !important;
}
.twds-global-navbar.global-header.dark-mode .gh-simple-dropdown .gh-l1-item.gh-active .gh-l1-title,
.twds-global-navbar.global-header.dark-mode .gh-simple-dropdown .gh-l1-item.gh-active .gh-l1-title-link {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-simple-dropdown .gh-l1-title-link:hover {
    color: var(--gh-primary-teal) !important;
}
.twds-global-navbar.global-header.dark-mode .gh-nav-links > li > a,
.twds-global-navbar.global-header.dark-mode .gh-nav-links > li > a > span {
    color: #F8F9FA !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown *,
.twds-global-navbar.global-header.dark-mode .gh-simple-dropdown * {
    color: inherit !important;
}
.twds-global-navbar.global-header .gh-l2-col-highlight-container .gh-btn-order-now {
    display: flex;
    align-items: center;
}
.twds-global-navbar.global-header .gh-l2-col-highlight-container .gh-btn-order-now > span:not(.gh-icon) {
    font-size: 12px;
}

.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-btn-order-now,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-btn-order-now > span:not(.gh-icon) {
    color: #000000 !important;
}
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-btn-order-now:hover,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-btn-order-now:hover > span:not(.gh-icon) {
    color: #F8F9FA !important;
}

.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-btn-secondary:hover,
.twds-global-navbar.global-header.dark-mode .gh-mega-dropdown .gh-btn-secondary:hover > span:not(.gh-icon) {
    color: #000000 !important;
}

.global-header .gh-btn-secondary {
    background-color: transparent;
    color: var(--gh-text-main);
    padding: 8px 12px 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--gh-border-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.global-header .gh-btn-secondary .gh-icon--arrow-right {
    background-color: var(--gh-text-main);
}

.global-header .gh-btn-secondary:hover {
    background-color: var(--gh-text-main);
    color: #ffffff !important;
}

.global-header .gh-btn-secondary:hover .gh-icon--arrow-right {
    filter: brightness(0) invert(1);
}

.global-header .gh-l2-columns {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    width: 100%;
}

.global-header .gh-l2-col {
    /*
     * At most 3 columns per row. Basis is one-third of the row after the two
    * 16px gaps. Keep the one-third basis even when a row has fewer than
    * three columns so the visual grid remains aligned across rows.
     */
    flex: 0 0 calc((100% - 64px) / 3);
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Exactly two columns: equal 50% width (gap accounted for). */
.global-header .gh-l2-columns > .gh-l2-col:first-child:nth-last-child(2),
.global-header .gh-l2-columns > .gh-l2-col:first-child:nth-last-child(2) ~ .gh-l2-col {
    flex: 0 0 calc((100% - 32px) / 2);
    width: calc((100% - 32px) / 2);
    max-width: calc((100% - 32px) / 2);
}

/* One-half width column (2 columns per row) */
.global-header .gh-l2-col.gh-col-half {
    flex: 0 0 calc((100% - 32px) / 2);
    width: calc((100% - 32px) / 2);
    max-width: calc((100% - 32px) / 2);
}

/* Two-thirds width column (spans 2 of the 3 columns in a row) */
.global-header .gh-l2-col.gh-col-two-thirds {
    flex: 0 0 calc((100% * 2 - 32px) / 3);
    width: calc((100% * 2 - 32px) / 3);
    max-width: calc((100% * 2 - 32px) / 3);
}

/* Column starts on new row */
.global-header .gh-l2-col.gh-new-row {
    flex: 1 1 100%;
}

/* Level 3 Links Layout: Next Row (full-width) */
.global-header .gh-l2-col.gh-l3-next-row {
    flex: 1 1 100%;
}

.global-header .gh-l2-col.gh-l3-next-row .gh-l3-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.global-header .gh-l2-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gh-text-main);
}

.global-header .gh-l2-col-header,
.global-header .gh-l2-col-header .gh-col-title-link {
    color: var(--gh-text-main) !important;
    font-weight: 600;
    text-decoration: none;
}

.global-header .gh-l2-col-header > span {
    display: block;
    width: 100%;
    padding: 4px 8px;
}

.global-header .gh-l2-col-header .gh-col-title-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    padding: 4px 8px;
}

.global-header .gh-l2-col-header .gh-col-title-link:hover {
    background-color: #F8F9FA;
    border-radius: 8px;
}

.global-header .gh-l2-col-header .gh-col-title-link .gh-icon--arrow-right {
    display: inline-block;
    flex-shrink: 0;
    font-size: 11px;
    background-color: var(--gh-text-main) !important;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.global-header .gh-l2-col-header .gh-col-title-link:hover {
    color: var(--gh-text-main) !important;
}

.global-header .gh-l2-col-header .gh-col-title-link:hover .gh-icon--arrow-right {
    background-color: var(--gh-text-main) !important;
}

.global-header .gh-col-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gh-text-main);
}

.global-header .gh-badge {
    background-color: #D1FAE5;
    color: #065F46;
    font-size: 12px;
    font-weight: 600;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    width: fit-content;
}

.global-header .gh-l2-col-header .gh-badge {
    font-size: 14px;
}

.global-header .gh-l3-links {
    list-style: none;
    display: flex;
    flex-direction: column;
}


.global-header .gh-l3-links li {
    position: relative;
    padding: 0 8px;
}

.global-header .gh-l3-links li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 0;
    color: #374151;
    line-height: 20px;
    display: inline-block;
    transition: color 0.2s ease;
}

.gh-l3-links li a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.global-header .gh-l3-links li:hover {
    background-color: #F8F9FA;
    border-radius: 8px;
}

.global-header .gh-l3-links li:hover a {
    color: var(--gh-text-main);
}

.global-header .gh-l3-links li p {
    font-size: 12px;
    color: var(--gh-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

.global-header .gh-explore-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    height: auto;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gh-primary-teal);
    text-decoration: none;
    margin-top: 8px;
    background: transparent;
    transition: opacity 0.2s ease;
    padding-left: 8px;
}

.global-header .gh-explore-link span {
    white-space: nowrap;
}

.global-header .gh-explore-link .gh-icon--arrow-right {
    width: 18px;
    height: 18px;
    background-color: var(--gh-primary-teal);
}

.global-header .gh-explore-link:hover {
    opacity: 0.8;
}

.global-header .gh-explore-link i {
    font-size: 11px;
}


/* ==================== HIGHLIGHTED PRODUCT MENU ITEM ==================== */
.global-header .gh-l2-col.gh-l2-col-highlight .gh-l2-col-header {
    padding-bottom: 0;
    border: 0;
}

.global-header .gh-l2-col-highlight-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    border: 1px #E5E9EB solid;
    border-radius: 12px;
    padding: 12px;
}

.global-header .gh-l2-col-highlight-container .gh-highlight-content {
    display: flex;
    flex: 1;
    font-size: 14px;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    gap: 6px;
}

.global-header .gh-l2-col-highlight-container .gh-highlight-thumbnail {
    flex: 0 0 120px;
    width: 120px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
}

.global-header .gh-l2-col-highlight-container .gh-highlight-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-header .gh-l2-col-highlight-container .gh-highlight-description {
    width: fit-content;
}

.global-header .gh-l2-col-highlight-container .gh-highlight-title {
    display: block;
    font-weight: 600;
    color: var(--gh-text-main);
    width: fit-content;
}

.global-header .gh-l2-col-highlight-container .gh-btn-order-now {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    margin-top: auto;
    width: fit-content;
}

.global-header .gh-l2-col-highlight-container .gh-btn-order-now .gh-icon--arrow-right {
    width: 16px;
    height: 16px;
}

/* Vertical variant: image on top, then title/description/CTA stacked below */
.global-header .gh-l2-col-highlight--vertical .gh-l2-col-highlight-container {
    flex-direction: column;
    align-items: stretch;
}

.global-header .gh-l2-col-highlight--vertical .gh-l2-col-highlight-container .gh-highlight-thumbnail {
    flex: 0 0 auto;
    width: 100%;
    height: 140px;
}

.global-header .gh-l2-col-highlight--vertical .gh-l2-col-highlight-container .gh-highlight-content {
    height: auto;
}

/* ==================== SIMPLE DROPDOWN (RESOURCES) ==================== */
.global-header .gh-nav-links>li.gh-simple-nav {
    position: relative !important;
}

.global-header .gh-simple-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid #E5E7EB;
    display: none;
    z-index: 31;
    width: 260px;
    padding: 8px;
}

.global-header .gh-simple-dropdown .gh-l1-title {
    font-size: 14px;
    font-weight: 400;
}

.global-header .gh-simple-dropdown .gh-l1-link {
    padding: 8px;
}

.global-header .gh-simple-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
    display: block;
    pointer-events: auto;
    z-index: 0;
}

.global-header .gh-simple-nav:hover .gh-simple-dropdown {
    display: block;
}

.global-header .gh-simple-sidebar {
    width: 100%;
    padding: 4px;
    border-right: none;
    border-radius: 12px;
}

.global-header .gh-simple-sidebar .gh-l1-item {
    display: block;
    text-decoration: none;
}

.global-header .gh-simple-sidebar .gh-l1-link::after {
    display: none;
}

/* ==================== RIGHT-ALIGNED BLURRED MOBILE OVERLAY DRAWER (< 1200px) ==================== */
.global-header .gh-mobile-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(203, 212, 220, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 33;
    justify-content: flex-end;
    align-items: stretch;
    padding: 16px;
}

.global-header .gh-mobile-drawer-backdrop.gh-open {
    display: flex;
}

.global-header .gh-mobile-drawer-card {
    background: #ffffff;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ghDrawerSlideRight 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.global-header .gh-mobile-drawer-card .twds-global-navbar .gh-icon--arrow-left {
    background-color: #1f1f1f;
    width: 14px;
    height: 14px;
}

@keyframes ghDrawerSlideRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.global-header .gh-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F3F4F6;
    font-family: var(--gh-font-family);
    flex-shrink: 0;
}

.global-header .gh-drawer-back-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--gh-text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.global-header .gh-drawer-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: right;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
    line-height: 1;
}

.global-header .gh-drawer-close-btn .gh-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: currentColor;
}

.global-header .gh-drawer-body {
    padding: 16px 20px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.global-header .gh-drawer-view-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gh-text-main);
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E5E7EB;
}

.global-header .gh-mobile-drawer-backdrop,
.global-header .gh-mobile-drawer-card,
.global-header .gh-mobile-tree-item,
.global-header .gh-drawer-view-title,
.global-header .gh-drawer-body,
.global-header .gh-mobile-l2-header,
.global-header .gh-mobile-l2-section,
.global-header .gh-profile-dropdown {
    font-family: var(--gh-font-family);
}

.global-header .gh-mobile-tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    text-decoration: none;
    color: var(--gh-text-main);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.global-header button[data-target="ghView_languages"],
.global-header button[data-target="ghView_start_order"],
.global-header button[data-target="ghView_support"] {
    font-weight: 400;
}

.global-header .gh-mobile-tree-item i {
    font-size: 12px;
    color: #9CA3AF;
}

.global-header .gh-mobile-tree-left {
    display: flex;
    align-items: center;
    gap: 0;
}

.global-header .gh-mobile-tree-left img {
    padding-right: 12px;
}

.global-header .gh-mobile-tree-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.global-header .gh-mobile-tree-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--gh-text-muted);
}

.global-header .gh-drawer-divider {
    height: 1px;
    background-color: #E5E9EB;
    margin: 12px 0;
}

.global-header .gh-mobile-btn-start {
    margin-top: 12px;
    width: fit-content;
}

.global-header .gh-mobile-l2-header {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
}

.global-header .gh-mobile-l2-header img {
    padding-right: 12px;
}

.global-header .gh-mobile-l2-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.global-header .gh-btn-shop-all {
    background-color: #000000;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    transition: background-color 0.2s ease;
}

.global-header .gh-btn-shop-all:hover {
    background-color: #262626;
}

.global-header .gh-btn-shop-all-secondary,
.global-header .gh-mobile-cta-group .gh-btn-shop-all-secondary {
    background-color: transparent;
    color: var(--gh-text-main);
    border: 1px solid var(--gh-text-main);
    margin-top: 0;
}

.global-header .gh-btn-shop-all-secondary .gh-icon--arrow-right,
.global-header .gh-mobile-cta-group .gh-btn-shop-all-secondary .gh-icon--arrow-right {
    filter: none;
}

.global-header .gh-btn-shop-all-secondary:hover,
.global-header .gh-mobile-cta-group .gh-btn-shop-all-secondary:hover {
    background-color: var(--gh-text-main);
    color: #ffffff;
}

.global-header .gh-btn-shop-all-secondary:hover .gh-icon--arrow-right,
.global-header .gh-mobile-cta-group .gh-btn-shop-all-secondary:hover .gh-icon--arrow-right {
    filter: brightness(0) invert(1);
}

/* Status badges sit on <html>, outside AEM grid / header hover stacking. */
#twist-status-badge-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    isolation: isolate;
    z-index: 100000;
    font-family: 'proxima-nova', 'Proxima Nova', 'ProximaNova', 'ProximaNovaWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.twist-admin-badge {
    position: fixed;
    top: 0;
    left: calc(50% - 150px);
    width: 300px;
    background-color: rgb(232, 23, 138);
    color: #ffffff;
    padding: 0;
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    font-family: 'proxima-nova', 'Proxima Nova', 'ProximaNova', 'ProximaNovaWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    height: 18px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.twist-admin-badge .twist-admin-badge__tag {
    border-radius: 0 0 0 6px;
    font-weight: bold;
    color: #ffffff;
    padding: 0 20px;
    background: rgb(227 183 49);
}

.twist-admin-badge .twist-admin-badge__env {
    padding-left: 20px;
}

.twist-admin-badge .twist-admin-badge__roles {
    padding-right: 20px;
}

html.gh-has-distributor-badge .twist-admin-badge {
    top: 24px;
}

.twist-distributor-badge {
    position: fixed;
    top: 0;
    left: calc(50% - 150px);
    width: 300px;
    background-color: rgb(227, 183, 49);
    color: #ffffff;
    padding: 0;
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    font-family: 'proxima-nova', 'Proxima Nova', 'ProximaNova', 'ProximaNovaWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    height: 15px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.twist-distributor-badge .twist-distributor-badge__tag {
    border-radius: 0 0 6px 6px;
    font-weight: bold;
    color: #ffffff;
    padding: 0 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.gh-impersonation-float {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 35;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(480px, calc(100vw - 32px));
    padding: 14px 16px;
    background-color: #fff4d6;
    color: #1f1f1f;
    font-family: 'proxima-nova', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid #e6c56a;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.gh-impersonation-float[hidden] {
    display: none !important;
}

.gh-impersonation-float.is-positioned {
    right: auto;
    bottom: auto;
    left: var(--gh-impersonate-x, 24px);
    top: var(--gh-impersonate-y, 96px);
}

.gh-impersonation-float.is-dragging {
    cursor: grabbing;
}

.gh-impersonation-float-msg {
    flex: 1 1 auto;
    margin: 0;
}

.gh-impersonation-float-msg strong {
    font-weight: 700;
}

.gh-impersonation-float-stop {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #00a86b;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.gh-impersonation-float-stop:hover {
    color: #00a86b;
}

.gh-impersonation-float-stop:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ==================== USER MODAL ==================== */
.global-header .gh-user-modal.hidden {
    display: none;
}

.global-header .gh-user-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.global-header .gh-modal-content {
    position: absolute;
    display: flex;
    gap: 20px;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    z-index: 1001;
}

.global-header .gh-modal-footer {
    margin-top: auto;
}

.global-header .gh-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    z-index: 1001;
}

/* Modal Component Scoped Styles */
.invite_modal-overlay *,
.invite_modal-overlay *::before,
.invite_modal-overlay *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Modal Shell & Backdrop (Updated for Modal Logic) */
.invite_modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999999;
    background-color: rgba(140, 144, 153, 0.8);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Hidden by default with smooth fade transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  
  /* Active State (Triggered by invite_friend('open') / .is-open) */
  .invite_modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .invite_modal-card {
    background-color: #ffffff;
    width: calc(100% - 40px);
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    transform: translateY(-10px);
    transition: transform 0.25s ease;
  }
  
  /* Subtle scale/slide effect when opening */
  .invite_modal-overlay.is-open .invite_modal-card {
    transform: translateY(0);
  }
  
  /* Close Button */
  .invite_modal-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #555555;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
  }
  
  .invite_modal-close-btn:hover {
    color: #000000;
  }
  
  /* Header */
  .invite_modal-header {
    background-color: #f2faf6;
    padding: 28px 40px;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  .invite_modal-icon-circle {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 2px solid #00aa72;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .invite_modal-header-text h1 {
    font-size: 26px;
    font-weight: 700;
    color: #3b3f46;
    line-height: 1.2;
  }
  
  /* Body */
  .invite_modal-body {
    padding: 36px 40px 40px;
  }
  
  .invite_modal-heading-bold {
    font-size: 15px;
    font-weight: 700;
    color: #3a3d42;
    margin-bottom: 16px;
  }
  
  .invite_modal-description {
    font-size: 14px;
    color: #585c63;
    line-height: 1.45;
    margin-bottom: 28px;
  }
  
  .invite_modal-description strong {
    color: #222222;
  }
  
  /* Form Elements */
  .invite_modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 12px;
  }
  
  @media (max-width: 540px) {
    .invite_modal-form-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .invite_modal-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #72777f;
    letter-spacing: 0;
    margin-bottom: 6px;
  }
  
  .invite_modal-form-group input,
  .invite_modal-select-container select {
    width: 100%;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #d3d7dc;
    border-radius: 3px;
    font-size: 13px;
    color: #333333;
    outline: none;
    background-color: #ffffff;
  }
  
  .invite_modal-form-group input::placeholder {
    color: #a0a5ad;
  }
  
  .invite_modal-form-group input:focus,
  .invite_modal-select-container select:focus {
    border-color: #00aa72;
  }
  
  /* Select Box Formatting */
  .invite_modal-select-container {
    position: relative;
  }
  
  .invite_modal-select-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }
  
  .invite_modal-select-container::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #444444;
    pointer-events: none;
  }
  
  /* Subtext & Checkbox */
  .invite_modal-disclaimer {
    font-size: 11px;
    color: #6d727a;
    margin-bottom: 24px;
  }
  
  .invite_modal-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4a4e54;
    margin-bottom: 32px;
  }
  
  .invite_modal-checkbox-container input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #00aa72;
    cursor: pointer;
  }
  
  .invite_modal-checkbox-container a {
    color: #2ed8a2;
    text-decoration: none;
  }
  
  .invite_modal-checkbox-container a:hover {
    text-decoration: underline;
  }
  
  /* Submit Button Base (Disabled State) */
  .invite_modal-button-container {
    display: flex;
    justify-content: center;
  }
  
  .invite_modal-submit-button {
    background-color: #b7eedc;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 6px 42px;
    font-size: 14px;
    font-weight: 500;
    cursor: not-allowed;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  
  /* Ready to Submit / Enabled State */
  .invite_modal-submit-button:enabled {
    background-color: #00aa72;
    cursor: pointer;
  }
  
  /* Active Hover State (Only when enabled) */
  .invite_modal-submit-button:enabled:hover {
    background-color: #008f5f;
  }


  /* Header Specifics */
  .thank_you-header {
    justify-content: center;
    gap: 16px;
  }
  
  .thank_you-title {
    font-size: 32px;
    font-weight: 700;
    color: #3b3f46;
  }
  
  .thank_you-body {
    text-align: center;
    padding: 32px 30px 40px;
  }
  
  .thank_you-heading {
    font-size: 22px;
    font-weight: 600;
    color: #3b3f46;
    margin-bottom: 8px;
  }
  
  .thank_you-subheading {
    font-size: 14px;
    color: #6d727a;
    margin-bottom: 32px;
  }
  
  /* 3-Column Award Grid */
  .thank_you-awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
    text-align: center;
  }
  
  @media (max-width: 640px) {
    .thank_you-awards-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }
  
  .thank_you-award-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .thank_you-award-icon {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .thank_you-award-tag {
    font-size: 11px;
    font-weight: 700;
    color: #8c9099;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  
  .thank_you-award-text {
    font-size: 12px;
    color: #585c63;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  
  .thank_you-award-bold {
    font-size: 12px;
    font-weight: 700;
    color: #3b3f46;
    line-height: 1.4;
  }
  
  .thank_you-award-standalone {
    margin-top: 4px;
  }
  
  /* Button override */
  .thank_you-invite-btn {
    background-color: #00aa72;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 28px;
  }
  
  .thank_you-invite-btn:hover {
    background-color: #008f5f;
  }

  /* Login as modal — same shell as invite friend, text-only header */
  .login_as-header {
    gap: 0;
  }

  .login_as-account-group {
    margin-bottom: 32px;
  }

  .login_as-contact-group {
    margin-bottom: 32px;
  }

  .login_as-contact-group[hidden] {
    display: none !important;
  }

  .invite_modal-select-container[hidden] {
    display: none !important;
  }

  .login_as-combobox {
    position: relative;
  }

  .login_as-account-search {
    width: 100%;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #d3d7dc;
    border-radius: 3px;
    font-size: 13px;
    color: #333333;
    outline: none;
    background-color: #ffffff;
  }

  .login_as-account-search {
    /* room for the clear button and the container's chevron */
    padding-right: 52px;
  }

  .login_as-account-clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6d727a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }

  .login_as-account-clear:hover {
    background-color: #eef8f4;
    color: #333333;
  }

  .login_as-account-clear[hidden] {
    display: none !important;
  }

  .login_as-account-search::placeholder {
    color: #a0a5ad;
  }

  .login_as-account-search:focus {
    border-color: #00aa72;
  }

  .login_as-account-search:disabled {
    background-color: #f4f5f6;
    cursor: not-allowed;
  }

  .login_as-account-listbox {
    position: fixed;
    z-index: 1000000000;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #d3d7dc;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .login_as-account-listbox[hidden] {
    display: none !important;
  }

  .login_as-account-option {
    padding: 6px 12px;
    font-size: 13px;
    color: #333333;
    cursor: pointer;
  }

  .login_as-account-option--contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .login_as-contact-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .login_as-contact-email {
    margin-left: auto;
    flex-shrink: 0;
    color: #6d727a;
    text-align: right;
    white-space: nowrap;
  }

  .login_as-account-option:hover,
  .login_as-account-option.is-active {
    background-color: #eef8f4;
  }

  .login_as-account-option.is-empty {
    color: #a0a5ad;
    cursor: default;
  }

  .login_as-account-option.is-empty:hover {
    background-color: transparent;
  }

  .login_as-loader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    min-height: 16px;
    color: #72777f;
  }

  .login_as-loader[hidden] {
    display: none !important;
  }

  .login_as-loader-svg {
    width: 16px;
    height: auto;
    color: inherit;
    flex-shrink: 0;
  }

  .login_as-loader-text {
    font-size: 12px;
    line-height: 1.3;
  }

  .login_as-vectors[hidden] {
    display: none !important;
  }

  .invite_modal-overlay .login_as-vector-list[hidden] {
    display: none !important;
  }

  .invite_modal-overlay .login_as-vectors {
    margin-bottom: 32px;
  }

  .invite_modal-overlay .login_as-vectors-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #72777f;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  .invite_modal-overlay .login_as-vector-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #d3d7dc;
    background: #EEEEEE;
    border-radius: 3px;
    max-height: 180px;
    overflow-y: auto;
  }

  .invite_modal-overlay .login_as-vector-list li {
    padding: 4px 12px;
    font-size: 12px;
    color: #333333;
  }

  .invite_modal-overlay .login_as-vector-list li:last-child {
    border-bottom: none;
  }

  .invite_modal-overlay .login_as-create-user-msg {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #3b3f46;
  }

  .invite_modal-overlay .login_as-create-user-msg[hidden] {
    display: none !important;
  }

  .invite_modal-overlay .login_as-kickout-msg {
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: #7a5b00;
    background-color: #fff6e0;
    border: 1px solid #e6c56a;
    border-radius: 4px;
  }

  .invite_modal-overlay .login_as-kickout-msg[hidden] {
    display: none !important;
  }

  .invite_modal-submit-button.login_as-kickout-btn:enabled {
    background-color: #c47d00;
  }

  .invite_modal-submit-button.login_as-kickout-btn:enabled:hover {
    background-color: #a36800;
  }

  .invite_modal-overlay .login_as-account-count {
    margin-top: 4px;
    font-size: 12px;
    color: #6d727a;
  }

  .login_as-actions {
    display: flex;
    gap: 16px;
    justify-content: stretch;
  }

  .login_as-actions > button {
    flex: 1 1 0;
  }

  .login_as-cancel-btn {
    background-color: #ffffff;
    color: #3b3f46;
    border: 1px solid #d3d7dc;
    border-radius: 3px;
    padding: 6px 42px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .login_as-cancel-btn:hover {
    background-color: #f5f6f8;
    border-color: #b8bdc4;
  }
  
/* ==================== RESPONSIVE MEDIA QUERIES ==================== */

/* Large Viewport Single-Row Header (> 2049px) */
@media (min-width: 2050px) {
    .global-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 32px;
        gap: 64px;
    }

    .global-header .gh-nav-top {
        display: contents;
    }

    .global-header .gh-brand-logo {
        order: 1;
    }

    .global-header .gh-nav-bottom {
        order: 2;
        margin-top: 0;
        width: auto;
        position: static;
    }

    .global-header .gh-search-bar {
        order: 3;
        max-width: 640px;
    }

    .global-header .gh-search-input {
        height: 32px !important;
    }

    .global-header .gh-nav-actions {
        order: 4;
        margin-left: auto;
    }

    .global-header .gh-nav-links>li>a {
        height: calc(100% + 16px);
    }

    .global-header .gh-simple-dropdown {
        top: calc(100% + 20px);
    }

    .global-header .gh-simple-dropdown::before {
        top: -20px;
        height: 20px;
    }

    .global-header .gh-nav-links > li.gh-simple-nav:hover::after {
        height: 20px;
    }

    .global-header .gh-mega-dropdown {
        top: 100%;
        left: 155px;
        width: calc(100%);
        max-width: 1920px;
    }
}

/* Tablet Breakpoint (769px - 1199px) */
@media (max-width: 1199px) {
    .global-header {
        padding: 8px 12px 8px 24px;
    }

    .global-header .gh-brand-logo-desktop {
        display: none !important;
    }

    .global-header .gh-logo-compact {
        display: flex !important;
    }

    .global-header .gh-search-bar {
        max-width: 715px;
    }

    .global-header .gh-nav-bottom {
        display: none !important;
    }

    .global-header .gh-btn-sign-in {
        padding: 8px 12px;
        height: 32px;
        line-height: 32px;
    }

    .global-header .gh-icon.gh-icon--search {
        background-color: #5E6771; 
    }

    .global-header .gh-lang-container,
    .global-header .gh-support-container,
    .global-header .gh-action-btn.gh-help-btn,
    .global-header .gh-start-order-container {
        display: none !important;
    }

    .global-header .gh-drawer-body {
        padding: 12px 8px;
    }

    .global-header .gh-mobile-drawer-backdrop .gh-icon--arrow-left {
        width: 18px;
        height: 18px;
    }

    .global-header .gh-mobile-drawer-backdrop .gh-icon--chevron-right {
        width: 14px;
        height: 14px;
    }

    .global-header .gh-mobile-tree-item {
        font-size: 16px;
        padding: 12px 8px;
        margin: 1px 0;
    }

    .global-header button[data-target="ghView_start_order"] span {
        height: 40px;
        line-height: 40px;
        padding: 0 18px;
        font-weight: 600;
        border: 1px #CBD4DC solid;
        border-radius: 20px;
    }

    .global-header button[data-target="ghView_start_order"] span ~ span {
        display: none;
    }

    .twds-global-navbar .gh-icon--chevron-right {
        background-color: var(--gh-text-main) !important;
    }

    .global-header .gh-nav-actions {
        gap: 12px;
    }

    .global-header .gh-drawer-divider {
        margin: 24px 0;
    }

    .global-header .gh-menu-toggle {
        display: flex;
    }

    .global-header .gh-l3-links {
        gap: 0;
    }

    .global-header .gh-l3-links li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .global-header .gh-l3-links li a {
        padding: 0;
        width: auto;
        flex: 0 1 auto;
        height: 48px;
        line-height: 48px;
    }

    .global-header .gh-l3-links li .gh-badge {
        flex: 0 0 auto;
    }

    .global-header .gh-l3-links li p {
        flex: 1 1 100%;
        margin-top: -4px;
    }

    .global-header .gh-mobile-l2-section-highlight .gh-l2-col-highlight-container {
        flex-direction: column;
        gap: 12px;
    }

    .global-header .gh-mobile-l2-section-highlight .gh-highlight-thumbnail {
        flex: 0 0 auto;
        width: 100%;
        height: 160px;
    }

    .global-header .gh-mobile-l2-section-highlight .gh-highlight-content {
        height: auto;
    }

    .global-header.ecommerce .gh-menu-toggle {
        display: none;
    }

    .global-header .gh-mobile-drawer-backdrop {
        width: 100%;
        left: 0;
        max-width: none;
    }

    .global-header .gh-mobile-drawer-card {
        max-width: 368px;
        width: 100%;
        flex: 0 1 368px;
    }

    .global-header .gh-mega-dropdown,
    .global-header .gh-simple-dropdown {
        display: none !important;
    }
}

/* Mobile / Small Tablet Breakpoint (<= 768px) */
@media (max-width: 768px) {

    .global-header {
        padding: 8px 8px 8px 16px;
    }

    .global-header .gh-nav-top {
        gap: 12px;
        justify-content: space-between;
    }

    .global-header .gh-mobile-drawer-card {
        max-width: 100%;
        flex: 1;
    }

    .global-header .gh-drawer-header {
        padding: 8px 20px;
    }

    /* Hide inline top-row search bar on mobile */
    .global-header .gh-nav-top .gh-search-bar {
        display: none !important;
    }

    .global-header .gh-search-icon {
        width: 22px;
        height: 22px;
    }

    .global-header .gh-search-bar {
        height: 40px;
        padding: 3px 3px 3px 12px;
    }

    .global-header .gh-search-bar .gh-search-input {
        font-size: 17px;
        height: 100%;
    }
    
    .twds-global-navbar .gh-drawer-view {
        padding: 0 8px;
    }

    /* Show search toggle button on mobile */
    .global-header .gh-search-toggle-btn {
        display: flex !important;
    }

    .global-header .gh-menu-toggle {
        display: flex;
    }

    .global-header .gh-drawer-view-title {
        padding: 0 0 12px;
    }

    .global-header .gh-mobile-tree-item {
        padding: 12px 0;
    }

    .global-header.ecommerce .gh-menu-toggle {
        display: none;
    }

    .global-header .gh-profile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 49px;
        margin: -8px -8px 0px;
        padding: 0 16px 0 15px;
        border-bottom: 1px solid #E5E7EB;
        position: sticky;
        top: -8px;
        background: #ffffff;
        z-index: 1;
    }

    .global-header .gh-profile-menu-header img {
        height: 28px;
        width: auto;
    }

    .global-header .gh-profile-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        z-index: 2100;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .global-header.dark-mode .gh-profile-menu-header {
        background: #1A1D23;
        border-color: #4A5158;
    }

    .global-header .gh-avatar-container:has(.gh-profile-dropdown.gh-open) {
        z-index: 2100;
    }
    

    .global-header .gh-profile-greeting {
        padding: 24px 8px 8px
    }

    .global-header .gh-profile-divider {
        margin: 8px;
    }

    .global-header .gh-profile-item {
        font-weight: 400;
    }

    .global-header .gh-mobile-cta-group {
        position: sticky;
        bottom: 0;
        display: flex;
        flex-direction: row;
        gap: 10px;
        background-color: #ffffff;
        padding: 12px 0;
        margin-top: auto;
        flex-shrink: 0;
        z-index: 5;
    }

    .global-header .gh-mobile-cta-group:before {
        position: absolute;
        top: 0;
        left: -8px;
        right: -8px;
        height: 1px;
        border-top: 1px solid #E5E7EB;
        content: '';
    }

    .global-header .gh-mobile-cta-group .gh-btn-shop-all {
        position: static;
        margin-top: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .global-header .gh-mobile-cta-group .gh-btn-shop-all:before {
        content: none;
    }

    .global-header .gh-btn-shop-all {
        position: sticky;
        bottom: 0;
        background-color: #000000;
        z-index: 5;
        height: 48px;
        margin-top: 20px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .global-header .gh-btn-shop-all:before {
        position: absolute;
        top: -21px;
        left: -8px;
        right: -8px;
        height: 1px;
        border-top: 1px solid #E5E7EB;
        content: '';
    }
}

/* Component root alias
 * (intentionally no-op; .global-header rules apply)
 */

/* Homepage Vertical Carousel Override */
.homepageverticalcarousel {
    position: relative !important;
}

/*
 * Pin the TWDS global header to the top as the page scrolls.
 * Apply sticky on the XF wrappers as well: position:sticky is constrained to the
 * parent, and an XF that is only as tall as the header would otherwise cancel it.
 * html.twds-navbar-no-sticky is still set from twds-global-navbar.js so inherited
 * NewUX hide-on-scroll / .header-container { position:fixed } rules cannot hide
 * or displace this header.
 */
html.twds-navbar-no-sticky [data-gh-root]:not(.gh-is-pinned),
html.twds-navbar-no-sticky .twds-global-navbar.global-header:not(.gh-is-pinned),
html.twds-navbar-no-sticky .experiencefragment:has([data-gh-root]):not(.gh-is-pinned),
html.twds-navbar-no-sticky .cmp-experiencefragment:has([data-gh-root]):not(.gh-is-pinned),
html.twds-navbar-no-sticky .aem-GridColumn:has([data-gh-root]):not(.gh-is-pinned) {
    position: sticky !important;
    top: 0 !important;
    z-index: 110;
}

html.twds-navbar-no-sticky .experiencefragment:has([data-gh-root]).header-hidden,
html.twds-navbar-no-sticky [data-gh-root].header-hidden,
html.twds-navbar-no-sticky .twds-global-navbar.header-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* JS pin: escapes overflow-trapped sticky ancestors and stays at the viewport top. */
html.twds-navbar-no-sticky .gh-is-pinned,
.gh-is-pinned {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 110;
}

/* Secondary nav pin-to-page-top: slide the pinned header off as the bar reaches it.
 * Use top, not transform — transform makes position:fixed descendants (mobile
 * drawer / profile overlay) size to the header box instead of the viewport. */
html.twds-navbar-no-sticky .gh-is-pinned.gh-header-scroll-away,
.gh-is-pinned.gh-header-scroll-away {
    top: var(--gh-header-shift, 0px) !important;
}

/* Sticky is opt-in via --sticky. Force static otherwise so site clientlibs
 * that still ship position:sticky on every bar leave it in document flow. */
.secondarynavbar:not(:has(.secondary-navbar--sticky)),
.secondary-navbar-legacy:not(.secondary-navbar-legacy--sticky),
.twds-secondary-nav-main:not(.twds-secondary-nav-main--sticky) {
    position: static !important;
    top: auto !important;
}

.secondarynavbar:has(.secondary-navbar--sticky),
.secondary-navbar-legacy--sticky,
.twds-secondary-nav-main--sticky {
    position: sticky !important;
    top: var(--gh-header-height, 0px) !important;
    z-index: 100;
}

html.twds-navbar-no-sticky .anchor-tabs-container.is-sticky {
    top: var(--gh-header-height, 0px) !important;
}

html.twds-navbar-no-sticky .blog .blogsubscribeform {
    z-index: 100 !important;
}

/*
 * overflow-x:hidden on the parent grid makes overflow-y compute to auto,
 * which traps position:sticky so the bar cannot pin below the header on mobile.
 */
.aem-Grid:has(> .secondarynavbar:has(.secondary-navbar--sticky)),
.aem-Grid:has(> .secondary-navbar-legacy--sticky),
.aem-Grid:has(> .twds-secondary-nav-main--sticky),
.gh-allow-secondary-sticky {
    overflow-x: clip;
    overflow-y: visible;
}

.gh-allow-secondary-sticky {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

html.gh-drawer-open,
html.gh-profile-open {
    overflow: hidden;
}

html.gh-drawer-open .gh-is-pinned,
html.gh-profile-open .gh-is-pinned {
    z-index: 1200 !important;
}

[data-gh-sticky-spacer],
[data-gh-secondary-pin-sentinel] {
    display: block;
    width: 100%;
    pointer-events: none;
}

[data-gh-secondary-pin-sentinel] {
    height: 0;
    overflow: hidden;
}

/* AEM editor: leave the header in document flow so it does not cover authoring chrome. */
body.cq-wcm-edit [data-gh-root],
body.cq-wcm-edit .experiencefragment:has([data-gh-root]),
body.cq-wcm-edit .cmp-experiencefragment:has([data-gh-root]),
body.cq-wcm-edit .aem-GridColumn:has([data-gh-root]),
body.cq-wcm-edit .gh-is-pinned {
    position: relative !important;
    top: auto !important;
    left: auto;
    right: auto;
}

/* AEM grid / container decoration must not clip utility dropdowns or break sticky */
.root:has([data-gh-root]),
.aem-Grid:has([data-gh-root]),
.aem-GridColumn:has(> .twds-global-navbar),
.aem-GridColumn:has([data-gh-root]),
.cmp-container:has([data-gh-root]),
.experiencefragment:has([data-gh-root]),
.cmp-experiencefragment:has([data-gh-root]),
div.twds-global-navbar.aem-GridColumn {
    overflow: visible !important;
}

/*
 * When the navbar is included via the TWDS header XF, it sits inside AEM
 * `.container.responsivegrid` / `.cmp-container` / grid-column wrappers.
 * Those parents apply their own width, max-width, float, and padding at the
 * grid breakpoints (768 / 1200), which wins over (or visually undoes) the
 * navbar's viewport media queries. Neutralize only ancestors that actually
 * contain the header so the page content container is left alone.
 */
.container:has([data-gh-root]),
.container.responsivegrid:has([data-gh-root]),
.cmp-container:has([data-gh-root]),
.cmp-experiencefragment:has([data-gh-root]),
.experiencefragment:has([data-gh-root]),
.aem-Grid:has(> .aem-GridColumn:has([data-gh-root])),
.aem-GridColumn:has([data-gh-root]),
div.twds-global-navbar.aem-GridColumn {
    max-width: none !important;
    width: 100% !important;
    float: none !important;
}

.cmp-experiencefragment .container:has([data-gh-root]),
.cmp-experiencefragment .cmp-container:has([data-gh-root]),
.cmp-experiencefragment .aem-Grid:has([data-gh-root]),
.experiencefragment:has([data-gh-root]),
.aem-GridColumn:has([data-gh-root]),
div.twds-global-navbar.aem-GridColumn {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Replace FA dependency with CSS icons used by HTL */
.twds-global-navbar .gh-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background-color: #FFFFFF;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.twds-global-navbar .gh-icon--arrow-left,
.twds-global-navbar .gh-icon.gh-icon--globe,
.twds-global-navbar .gh-icon.gh-icon--help,
.twds-global-navbar .gh-icon.gh-icon--chevron-down {
    background-color: var(--gh-text-muted);
}
.twds-global-navbar .gh-icon--search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-3.5-3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-3.5-3.5'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--globe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--help {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--chevron-down {
    width: 20px; height: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--chevron-right {
    width: 20px; height: 20px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='11'%20viewBox='0%200%206%2011'%20fill='none'%3E%3Cpath%20d='M0.228824%201.33368C-0.0762731%201.02858%20-0.076273%200.534039%200.228824%200.228941C0.533921%20-0.0761556%201.02846%20-0.0761555%201.33356%200.228941L5.70856%204.60394C6.01366%204.90904%206.01366%205.40358%205.70856%205.70868L1.33356%2010.0837C1.02846%2010.3888%200.53392%2010.3888%200.228823%2010.0837C-0.0762742%209.77858%20-0.0762741%209.28404%200.228823%208.97894L4.05145%205.15631L0.228824%201.33368Z'%20fill='%23333638'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='11'%20viewBox='0%200%206%2011'%20fill='none'%3E%3Cpath%20d='M0.228824%201.33368C-0.0762731%201.02858%20-0.076273%200.534039%200.228824%200.228941C0.533921%20-0.0761556%201.02846%20-0.0761555%201.33356%200.228941L5.70856%204.60394C6.01366%204.90904%206.01366%205.40358%205.70856%205.70868L1.33356%2010.0837C1.02846%2010.3888%200.53392%2010.3888%200.228823%2010.0837C-0.0762742%209.77858%20-0.0762741%209.28404%200.228823%208.97894L4.05145%205.15631L0.228824%201.33368Z'%20fill='%23333638'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-l1-link .gh-icon--chevron-right {
    width: 14px;
    height: 14px;
}
.twds-global-navbar .gh-icon--arrow-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M5%2012h14M13%205l7%207-7%207'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M5%2012h14M13%205l7%207-7%207'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--arrow-left {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M19%2012H5M11%205l-7%207%207%207'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M19%2012H5M11%205l-7%207%207%207'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--check {
    background-color: var(--gh-text-main);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%3E%3Cpath%20d='M5%2012l5%205L20%207'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%3E%3Cpath%20d='M5%2012l5%205L20%207'/%3E%3C/svg%3E");
}

.twds-global-navbar .gh-icon--cart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.7%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M2.8%203.6h2.4l2.5%2010.4h9.6l2.3-7.6H6.2%27/%3E%3Ccircle%20cx=%279.2%27%20cy=%2718.6%27%20r=%271.5%27/%3E%3Ccircle%20cx=%2716.6%27%20cy=%2718.6%27%20r=%271.5%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.7%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M2.8%203.6h2.4l2.5%2010.4h9.6l2.3-7.6H6.2%27/%3E%3Ccircle%20cx=%279.2%27%20cy=%2718.6%27%20r=%271.5%27/%3E%3Ccircle%20cx=%2716.6%27%20cy=%2718.6%27%20r=%271.5%27/%3E%3C/svg%3E");
}
/* Profile / user-menu line icons (Figma post sign-in header) */
.twds-global-navbar .gh-icon--home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2010.2%2012%203.6l8.5%206.6V19a1.4%201.4%200%200%201-1.4%201.4h-3.4v-5.6H9.3v5.6H4.9A1.4%201.4%200%200%201%203.5%2019z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2010.2%2012%203.6l8.5%206.6V19a1.4%201.4%200%200%201-1.4%201.4h-3.4v-5.6H9.3v5.6H4.9A1.4%201.4%200%200%201%203.5%2019z'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--package {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%207.8v8.4L12%2020.9%203.5%2016.2V7.8L12%203.1z'/%3E%3Cpath%20d='M3.5%207.8%2012%2012.5l8.5-4.7M12%2012.5v8.4'/%3E%3Cpath%20d='M7.75%205.45l8.5%204.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%207.8v8.4L12%2020.9%203.5%2016.2V7.8L12%203.1z'/%3E%3Cpath%20d='M3.5%207.8%2012%2012.5l8.5-4.7M12%2012.5v8.4'/%3E%3Cpath%20d='M7.75%205.45l8.5%204.7'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--vector {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Cpath%20d='M12%203.6a8.4%208.4%200%200%201%208.4%208.4'/%3E%3Cpath%20d='M20.4%2012a8.4%208.4%200%200%201-4.2%207.28'/%3E%3Cpath%20d='M12%2020.4A8.4%208.4%200%200%201%204.72%207.8'/%3E%3Cpath%20d='M6.9%205.35A8.36%208.36%200%200%201%2010.4%203.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Cpath%20d='M12%203.6a8.4%208.4%200%200%201%208.4%208.4'/%3E%3Cpath%20d='M20.4%2012a8.4%208.4%200%200%201-4.2%207.28'/%3E%3Cpath%20d='M12%2020.4A8.4%208.4%200%200%201%204.72%207.8'/%3E%3Cpath%20d='M6.9%205.35A8.36%208.36%200%200%201%2010.4%203.75'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--plate {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='4.5'%20width='17'%20height='15'%20rx='2.4'/%3E%3Ccircle%20cx='9'%20cy='9.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='15'%20cy='9.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='9'%20cy='14.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='15'%20cy='14.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='4.5'%20width='17'%20height='15'%20rx='2.4'/%3E%3Ccircle%20cx='9'%20cy='9.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='15'%20cy='9.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='9'%20cy='14.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3Ccircle%20cx='15'%20cy='14.5'%20r='1.15'%20fill='black'%20stroke='none'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.7'/%3E%3Cpath%20d='M6.9%2018.6a5.6%205.6%200%200%201%2010.2%200'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.7'/%3E%3Cpath%20d='M6.9%2018.6a5.6%205.6%200%200%201%2010.2%200'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--wallet {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5.5'%20width='18'%20height='13'%20rx='2.4'/%3E%3Cpath%20d='M3%2010.2h18'/%3E%3Cpath%20d='M14.6%2014.6h3.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5.5'%20width='18'%20height='13'%20rx='2.4'/%3E%3Cpath%20d='M3%2010.2h18'/%3E%3Cpath%20d='M14.6%2014.6h3.2'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--user-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.2%208.9a8.5%208.5%200%201%201-5.1-5.1'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.7'/%3E%3Cpath%20d='M6.9%2018.6a5.6%205.6%200%200%201%2010.2%200'/%3E%3Cpath%20d='M19%202.6v5.2M16.4%205.2h5.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.2%208.9a8.5%208.5%200%201%201-5.1-5.1'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.7'/%3E%3Cpath%20d='M6.9%2018.6a5.6%205.6%200%200%201%2010.2%200'/%3E%3Cpath%20d='M19%202.6v5.2M16.4%205.2h5.2'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--lock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4.5'%20y='10.2'%20width='15'%20height='10.3'%20rx='2.2'/%3E%3Cpath%20d='M8.2%2010.2V7.6a3.8%203.8%200%200%201%207.6%200v2.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4.5'%20y='10.2'%20width='15'%20height='10.3'%20rx='2.2'/%3E%3Cpath%20d='M8.2%2010.2V7.6a3.8%203.8%200%200%201%207.6%200v2.6'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-icon--logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.6%204.5H5.8A1.3%201.3%200%200%200%204.5%205.8v12.4a1.3%201.3%200%200%200%201.3%201.3h3.8'/%3E%3Cpath%20d='M14.4%208.4%2018%2012l-3.6%203.6'/%3E%3Cpath%20d='M18%2012H8.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.6%204.5H5.8A1.3%201.3%200%200%200%204.5%205.8v12.4a1.3%201.3%200%200%200%201.3%201.3h3.8'/%3E%3Cpath%20d='M14.4%208.4%2018%2012l-3.6%203.6'/%3E%3Cpath%20d='M18%2012H8.6'/%3E%3C/svg%3E");
}
.twds-global-navbar .gh-drawer-header-root { display: flex; align-items: center; }
.twds-global-navbar .gh-drawer-header-root.is-hidden,
.twds-global-navbar .gh-drawer-back-btn.is-hidden { display: none; }
.twds-global-navbar .gh-drawer-view { display: none; }
.twds-global-navbar .gh-drawer-view.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
}
.twds-global-navbar .gh-drawer-view.is-active:has(.gh-drawer-view-scroll) {
    overflow: hidden;
}
.global-header .gh-drawer-view-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #CBD4DC #F8F9FA;
}
.global-header .gh-drawer-view.is-active,
.global-header .gh-drawer-body {
    scrollbar-width: thin;
    scrollbar-color: #CBD4DC #F8F9FA;
}
.global-header .gh-drawer-view-scroll::-webkit-scrollbar,
.global-header .gh-drawer-view.is-active::-webkit-scrollbar,
.global-header .gh-drawer-body::-webkit-scrollbar {
    width: 6px;
}
.global-header .gh-drawer-view-scroll::-webkit-scrollbar-track,
.global-header .gh-drawer-view.is-active::-webkit-scrollbar-track,
.global-header .gh-drawer-body::-webkit-scrollbar-track {
    background: #F8F9FA;
}
.global-header .gh-drawer-view-scroll::-webkit-scrollbar-thumb,
.global-header .gh-drawer-view.is-active::-webkit-scrollbar-thumb,
.global-header .gh-drawer-body::-webkit-scrollbar-thumb {
    background: #CBD4DC;
    border-radius: 6px;
}
.global-header .gh-drawer-view-scroll::-webkit-scrollbar-thumb:hover,
.global-header .gh-drawer-view.is-active::-webkit-scrollbar-thumb:hover,
.global-header .gh-drawer-body::-webkit-scrollbar-thumb:hover {
    background: #86919B;
}
.global-header .gh-mobile-cta-group {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 0;
    background-color: #ffffff;
    z-index: 5;
}

.global-header .gh-mobile-cta-group > .gh-btn-shop-all {
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

.global-header .gh-mobile-cta-group > .gh-btn-shop-all > span:not(.gh-icon) {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Signed-out / logged-in visibility.
Keyed on [data-gh-root], NOT .twds-global-navbar: AEM's responsivegrid decoration wraps
the component in a <div class="twds-global-navbar aem-GridColumn"> that carries the same
class but no data-gh-logged-in attribute. Scoping to the class made
:not([data-gh-logged-in="true"]) match that wrapper on every page, so Sign in was pinned
visible and the avatar pinned hidden even while the header itself was marked logged in.
[data-gh-root] only ever exists on the <header> that owns the attribute. */
[data-gh-root]:not([data-gh-logged-in="true"]) .gh-btn-sign-in {
    display: inline-flex !important;
}
[data-gh-root][data-gh-logged-in="true"] .gh-cart-btn,
[data-gh-root][data-gh-logged-in="true"] .gh-avatar-container {
    display: flex !important;
}
[data-gh-root][data-gh-logged-in="true"] .gh-btn-sign-in,
[data-gh-root]:not([data-gh-logged-in="true"]) .gh-avatar-container,
[data-gh-root]:not([data-gh-logged-in="true"]) .gh-cart-btn {
    display: none !important;
}

/* Language vs currency: ecommerce/slim headers always show currency.
Hostname from twds-global-navbar-auth.js currentDomain() also swaps on
ecommerce/helpdesk hosts even when the authored ecommerce flag is off. */
.global-header.ecommerce .gh-lang-container,
.global-header.global-header-slim .gh-lang-container,
html[data-gh-domain="ecommerce"] [data-gh-root] .gh-lang-container,
html[data-gh-domain="helpdesk"] [data-gh-root] .gh-lang-container,
[data-gh-root][data-gh-domain="ecommerce"] .gh-lang-container,
[data-gh-root][data-gh-domain="helpdesk"] .gh-lang-container {
    display: none !important;
}

.global-header.ecommerce .gh-currency-btn,
.global-header.global-header-slim .gh-currency-btn,
html[data-gh-domain="ecommerce"] [data-gh-root] .gh-currency-btn,
html[data-gh-domain="helpdesk"] [data-gh-root] .gh-currency-btn,
[data-gh-root][data-gh-domain="ecommerce"] .gh-currency-btn,
[data-gh-root][data-gh-domain="helpdesk"] .gh-currency-btn {
    display: flex !important;
}

/* ==================== AUTH LOADER ==================== */

.global-header .gh-btn-sign-in[data-gh-busy="true"] {
    position: relative;
    gap: 8px;
    pointer-events: none;
    opacity: 0.75;
}

.global-header .gh-btn-sign-in[data-gh-busy="true"]::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgba(17, 24, 39, 0.25);
    border-top-color: #111827;
    border-radius: 50%;
    animation: ghAuthSpin 0.7s linear infinite;
}

@keyframes ghAuthSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .global-header .gh-btn-sign-in[data-gh-busy="true"]::after {
        animation: none;
        border-right-color: #111827;
    }
}

/* ==================== PRE-PROBE SESSION STATE ==================== */

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-btn-sign-in {
    display: none !important;
}

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-avatar-container,
html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-cart-btn {
    display: flex !important;
}

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-avatar {
    position: relative;
    color: transparent !important;
    background-color: rgba(99, 74, 246, 0.35) !important;
    cursor: default;
    pointer-events: none;
}

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-avatar::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ghAuthSpin 0.7s linear infinite;
}

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-currency-btn {
    pointer-events: none;
}

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-currency-text {
    color: transparent !important;
}

html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-currency-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid rgba(94, 103, 113, 0.35);
    border-top-color: #5E6771;
    border-radius: 50%;
    animation: ghAuthSpin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-avatar::after,
    html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-currency-text::after {
        animation: none;
        border-right-color: #ffffff;
    }

    html[data-gh-session="likely"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-currency-text::after {
        border-right-color: #5E6771;
    }
}

html[data-gh-session="none"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-btn-sign-in {
    display: inline-flex !important;
}

html[data-gh-session="none"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-avatar-container,
html[data-gh-session="none"] [data-gh-root]:not([data-gh-auth-resolved="true"]) .gh-cart-btn {
    display: none !important;
}

/* ==================== CONDITIONAL PROFILE MENU ITEMS ==================== */

.gh-profile-item[data-gh-item-visible="false"],
.gh-profile-item[data-gh-visible-to="admin"]:not([data-gh-item-visible="true"]),
.gh-profile-item[data-gh-visible-to="nonadmin"]:not([data-gh-item-visible="true"]),
.gh-profile-item[data-gh-visible-on="ecommerce"]:not([data-gh-item-visible="true"]),
.gh-profile-item[data-gh-visible-on="helpdesk"]:not([data-gh-item-visible="true"]) {
    display: none !important;
}

.gh-profile-divider[data-gh-item-visible="false"] {
    display: none !important;
}

.twds-global-navbar.global-header:hover,
[data-gh-root]:hover,
.experiencefragment:has([data-gh-root]:hover),
.cmp-experiencefragment:has([data-gh-root]:hover),
.aem-GridColumn:has([data-gh-root]:hover),
.gh-is-pinned:hover,
.experiencefragment:has(.gh-is-pinned:hover),
.cmp-experiencefragment:has(.gh-is-pinned:hover),
.aem-GridColumn:has(.gh-is-pinned:hover) {
    z-index: 100000 !important;
}

.global-header .gh-has-dropdown:hover .gh-mega-dropdown,
.global-header .gh-simple-nav:hover .gh-simple-dropdown {
    z-index: 100001 !important;
}

html > #twist-status-badge-layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    isolation: isolate;
    z-index: 2147483000 !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html > #twist-status-badge-layer .twist-admin-badge,
html > #twist-status-badge-layer .twist-distributor-badge {
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    z-index: auto !important;
    font-family: 'proxima-nova', 'Proxima Nova', 'ProximaNova', 'ProximaNovaWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}