/*
---------------------------------------------------
Header small screens 04
---------------------------------------------------
*/

/* Hide header icons by default (will be shown only on header-04-sm) */
header#site-header .header-icons {
    display: none;
}

/* Hide secondary navigation and CTA links (they're now in the drawer bottom bar) */
body.header-04-sm header#site-header nav.secondary,
body.header-04-sm header#site-header nav.cta-links {
    display: none !important;
}

/* White background for mobile header - OVERRIDE ALL GRADIENTS */
body.header-04-sm header#site-header,
body.header-04-sm header#site-header.header-bg-solid,
body.header-04-sm header#site-header.header-bg-linear,
body.header-04-sm header#site-header.header-bg-radial,
html.nav-down:not(.reached-top) body.header-04-sm header#site-header,
html.nav-up:not(.reached-top) body.header-04-sm header#site-header,
html.nav-down:not(.reached-top) body.header-04-sm header#site-header.header-bg-solid,
html.nav-up:not(.reached-top) body.header-04-sm header#site-header.header-bg-solid,
html.nav-down:not(.reached-top) body.header-04-sm header#site-header.header-bg-linear,
html.nav-up:not(.reached-top) body.header-04-sm header#site-header.header-bg-linear,
html.nav-down:not(.reached-top) body.header-04-sm header#site-header.header-bg-radial,
html.nav-up:not(.reached-top) body.header-04-sm header#site-header.header-bg-radial {
    background: #ffffff !important;
    background-image: none !important;
}

/* Header row needs min-height to maintain topbar space */
body.header-04-sm header#site-header .row {
    min-height: var(--small-header);
    position: relative;
}

body.header-04-sm header#site-header #logo {
    order: 2;
    align-self: center;
    flex: 0 0 auto;
    text-align: left;
    pointer-events: none;
    position: absolute;
    left: 79px;
    padding-left: 0 !important;
}

body.header-04-sm header#site-header #logo a {
    pointer-events: auto;
}

/* Burger button - BLUE background #0076AD */
body.header-04-sm header#site-header .expand-header {
    right: auto;
    left: 0;
    position: absolute;
    width: 64px;
    height: 64px;
    background: #0076AD !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
}

body.header-04-sm header#site-header .expand-header .text-open {
   display: block;
}
body.header-04-sm header#site-header .expand-header .text-close {
   display: none;
}
body.header-04-sm header#site-header .expand-header.active .text-open {
   display: none;
}
body.header-04-sm header#site-header .expand-header.active .text-close {
   display: block;
}

/* Burger menu lines - WHITE color */
body.header-04-sm header#site-header .expand-header span,
body.header-04-sm header#site-header .expand-header span:before,
body.header-04-sm header#site-header .expand-header span:after {
    background-color: #ffffff !important;
}

/* Middle line shorter than top and bottom - all lines centered */
body.header-04-sm header#site-header .expand-header:not(.active) span {
    width: 19px !important;
}

body.header-04-sm header#site-header .expand-header:not(.active) span:before,
body.header-04-sm header#site-header .expand-header:not(.active) span:after {
    width: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* When active (X icon), hide middle line */
body.header-04-sm header#site-header .expand-header.expand-active-cross.active span {
    background-color: transparent !important;
}

/* Hover effect for burger button - darker blue */
body.header-04-sm header#site-header .expand-header:hover {
    background: #006BA6 !important;
}

body.header-04-sm header#site-header nav.shopping-cart {
    order: 1;
    right: 0;
    width: var(--expand-nav-width);
}

body.header-04-sm header#site-header nav.main,
body.header-04-sm header#site-header nav.cta-links,
body.header-04-sm header#site-header .site-search,
body.header-04-sm header#site-header nav.secondary {
    width: 100%;
}

body.header-04-sm header#site-header nav.main {
    order: 3;
}

html[dir="ltr"] body.header-04-sm header#site-header nav.main ul ul {
    padding-left: 0;
}

body.header-04-sm header#site-header nav.cta-links,
body.header-04-sm header#site-header .site-search,
body.header-04-sm header#site-header nav.secondary {
    padding: var(--base-half-spacing) var(--base-half-spacing) 0;
}

body.header-04-sm header#site-header nav.cta-links {
    order: 4;
}

body.header-04-sm header#site-header .site-search {
    order: 5;
}

body.header-04-sm header#site-header nav.secondary {
    order: 6;
}

/* Right side icons container - SHOW on small screens */
body.header-04-sm header#site-header .header-icons {
    order: 3;
    display: flex !important;
    align-items: center;
    gap: 0;
    position: absolute;
    right: 0;
    height: var(--small-header);
    padding-right: 24px;
    z-index: 100;
    pointer-events: auto;
}

/* Divider line between search and profile */
body.header-04-sm header#site-header .header-icons .divider {
    width: 1px;
    height: 24px;
    margin: 0 16px;
}

body.header-04-sm header#site-header .header-icons .divider line {
    stroke: #666666;
}

/* Search icon button */
body.header-04-sm header#site-header .header-icons .search-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    color: rgba(var(--main-navigation-link), 1);
    transition: color 0.3s ease;
}

body.header-04-sm header#site-header .header-icons .search-icon-btn svg {
    width: 24px;
    height: 24px;
}

body.header-04-sm header#site-header .header-icons .search-icon-btn svg path {
    stroke: currentColor;
}

/* Profile icon button */
body.header-04-sm header#site-header .header-icons .profile-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    color: rgba(var(--main-navigation-link), 1);
    transition: color 0.3s ease;
}

body.header-04-sm header#site-header .header-icons .profile-icon-btn .profile-text {
    font-family: "Open Sans", sans-serif;
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
}

body.header-04-sm header#site-header .header-icons .profile-icon-btn svg {
    width: 24px;
    height: 24px;
}

body.header-04-sm header#site-header .header-icons .profile-icon-btn svg path {
    stroke: currentColor;
}

/* Hover effects for icons */
body.header-04-sm header#site-header .header-icons .search-icon-btn:hover,
body.header-04-sm header#site-header .header-icons .profile-icon-btn:hover {
    color: rgba(var(--main-navigation-link-hover), 1);
}

body.header-04-sm header#site-header .header-icons .search-icon-btn:focus-visible,
body.header-04-sm header#site-header .header-icons .profile-icon-btn:focus-visible {
    color: rgba(var(--main-navigation-link-hover), 1);
}


/* ========================================
   MOBILE DRAWER NAVIGATION (Drill-down)
   ======================================== */

/* Mobile drawer container - takes remaining height below header topbar */
html.reveal-out body.header-04-sm header#site-header nav.mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--small-header));
    min-height: calc(100vh - var(--small-header));
    margin-top: var(--small-header);
}

/* Drawer content area - scrollable, takes up available space */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-content {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* Drawer levels container - hidden by default */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    overflow-y: auto;
    padding: 0;
    pointer-events: none;
}

/* Active level - visible and in position */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level.active {
    transform: translate3d(0, 0, 0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: auto;
}

/* Previous level */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level.previous {
    transform: translate3d(-100%, 0, 0);
    pointer-events: none;
    z-index: 1;
}

/* Drawer header with back button */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-header {
    padding: 46px 23px 0 23px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Back button */
body.header-04-sm header#site-header nav.mobile-drawer-nav .back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.8px;
    color: #4C4C4C;
    text-align: center;
    cursor: pointer;
    margin-bottom: 12px;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .back-button:hover {
    color: #ED1C24;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .back-button:focus-visible {
    color: #ED1C24;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .back-button .icon {
    font-size: 20px;
}

/* ========================================
   MOBILE DRAWER NAVIGATION STYLES
   Matches desktop header-05-lg
   ======================================== */

/* All list containers */
body.header-04-sm header#site-header nav.mobile-drawer-nav .mobile-nav-list {
    padding: 46px 23px;
    list-style: none;
    margin: 0;
}

/* Level 2 list - less top padding since we have back button header */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-2 .mobile-nav-list.level-2-list {
    padding-top: 24px !important;
}

/* All list items */
body.header-04-sm header#site-header nav.mobile-drawer-nav .mobile-nav-list:not(.level-2-list) li {
    padding: 8px 0;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .mobile-nav-list li {
    margin-bottom: 24px;
}

/* ========================================
   LEVEL 1 STYLES
   ======================================== */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link-button,
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #4C4C4C;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link-button:hover,
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link:hover {
    color: #ED1C24;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link-button:focus-visible,
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link:focus-visible {
    color: #ED1C24;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-level-1 .nav-link-button .icon {
    font-size: 20px;
    color: #4C4C4C;
}

/* ========================================
   LEVEL 2 STYLES
   ======================================== */

/* Level 2 regular links (no-child items) */
body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.no-child>.nav-link {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: 0.18px;
    color: #4C4C4C;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.no-child>.nav-link:hover {
    color: #ED1C24;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.no-child>.nav-link:focus-visible {
    color: #ED1C24;
}

/* Level 2 section headers (has-child items - like desktop) */
body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.has-child {
    margin-bottom: 40px;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.has-child>.section-header {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #4C4C4C;
    display: block;
    margin-bottom: 28px;
}

/* Remove arrow from section headers */
body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.has-child>.section-header::after {
    display: none !important;
    content: none !important;
}

/* ========================================
   LEVEL 3 SUBLIST STYLES (nested under level 2)
   Always visible - NOT an accordion!
   ======================================== */
body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .level-3-sublist {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    box-shadow: none !important;
    background: transparent !important;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .level-3-sublist>li {
    margin-bottom: 28px;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .level-3-sublist .nav-link {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: 0.18px;
    color: #4C4C4C;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .level-3-sublist .nav-link:hover {
    color: #ED1C24;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .level-3-sublist .nav-link:focus-visible {
    color: #ED1C24;
}

/* ========================================
   ICON STYLES (for level 2 and 3)
   ======================================== */
body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .icon,
body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list .level-3-sublist .icon {
    font-size: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4C4C4C;
}

/* ========================================
   BOTTOM BAR STYLES - Fixed at bottom of drawer
   ======================================== */
body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar {
    flex-shrink: 0;
    background-color: #4C4C4C;
    padding: 16px 20px;
    z-index: 100;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul li {
    flex: 1;
    margin: 0;
    padding: 0;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #ffffff;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul li a:hover {
    color: #ffffff;
    opacity: 0.8;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul li a .icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul li a svg {
    width: 24px;
    height: 24px;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar ul li a svg path {
    stroke: #ffffff;
}

body.header-04-sm header#site-header nav.mobile-drawer-nav .drawer-bottom-bar .bottom-bar-text {
    font-family: "Open Sans", sans-serif;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
}


@media (max-width: 996px) {
    body.header-04-sm header#site-header nav.mobile-drawer-nav .level-2-list>li.has-child>.section-header::before {
        display: none;
    }
}


/* ========================================
   TOP CTA BANNER (Mobile only)
   Banner above mobile header
   ======================================== */

/* Banner height variable for calculations */
body.header-04-sm {
    --top-cta-banner-height: 60px;
}

/* Hide banner by default - prevents flash on page load */
.top-cta-banner {
    display: none !important;
}

/* Show on mobile (header-04-sm) ONLY when body has the visible class (set by JS after localstorage check) */
body.header-04-sm.top-cta-banner-visible header#site-header .top-cta-banner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 20px 6px 10px;
    background-color: #F5F5F5;
    width: calc(100% + var(--site-spacing_sm) + var(--site-spacing_sm));
    margin-left: calc(var(--site-spacing_sm) * -1);
    margin-right: calc(var(--site-spacing_sm) * -1);
    box-sizing: border-box;
    height: var(--top-cta-banner-height);
    position: absolute;
    top: 0;
    left: var(--site-spacing_sm);
    right: var(--site-spacing_sm);
    z-index: 10;
}

/* Hide when dismissed via JS */
body.header-04-sm header#site-header .top-cta-banner.hidden {
    display: none !important;
}

/* Adjust header height when banner is visible (not when drawer is open) */
html:not(.reveal-out) body.header-04-sm.top-cta-banner-visible header#site-header {
    height: calc(var(--small-header) + var(--top-cta-banner-height));
    overflow: visible;
}

/* Push down the row (which contains header) when banner is visible */
body.header-04-sm.top-cta-banner-visible header#site-header .row {
    margin-top: var(--top-cta-banner-height);
}

/* On scroll states - hide banner when scrolling down */
html.nav-up:not(.reached-top) body.header-04-sm.top-cta-banner-visible header#site-header {
    top: calc((var(--small-header) + var(--top-cta-banner-height) + 5px) * -1);
}

/* Drawer position - account for banner height when visible */
html.reveal-out body.header-04-sm.top-cta-banner-visible header#site-header nav.mobile-drawer-nav {
    height: calc(100vh - var(--small-header) - var(--top-cta-banner-height));
    min-height: calc(100vh - var(--small-header) - var(--top-cta-banner-height));
}

/* Close button */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-close:hover svg path {
    stroke: #ED1C24;
}

/* Content container (icon + text) */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* App icon */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

/* Text container */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

/* Heading */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-heading {
    color: rgb(34, 34, 34);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(12rem / 16) !important;
    line-height: 1.4;
    font-weight: 600;
}

/* Subheading */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-subheading {
    color: rgb(97, 97, 97);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(10rem / 16) !important;
    line-height: 1.2;
}

/* CTA Button */
body.header-04-sm header#site-header .top-cta-banner .top-cta-banner-button.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;

    border-radius: 6px;
    height: 32px;
    text-align: center;
    text-transform: unset;
    letter-spacing: unset;

    font-size: calc(12rem / 16) !important;
    line-height: 1;
    padding: 8px 6px !important;
    text-decoration-style: solid;
    font-weight: 600;

}