/* ==================================================
   Custom Sportswear Header
================================================== */

.csw-custom-header {
    position: relative;
    z-index: 9999;

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #eef1f5;
}

.csw-custom-header-inner {
    width: min(1200px, calc(100% - 40px));
    min-height: 82px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    position: relative;
}


/* ==================================================
   Logo
================================================== */

.csw-header-logo {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
}

.csw-header-logo a {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.csw-header-logo img,
.csw-header-logo .csw-logo-image {
    display: block;

    width: auto;
    height: auto;
    max-width: 112px;
    max-height: 56px;

    image-rendering: auto;

    object-fit: contain;
    object-position: left center;
}

.csw-header-site-name {
    color: #08213d;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;
}


/* ==================================================
   Desktop navigation
================================================== */

.csw-custom-nav {
    margin-left: auto;
}

.csw-custom-nav-list {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}

.csw-nav-item {
    position: relative;

    margin: 0;
    padding: 0;

    list-style: none;
}

.csw-nav-item > a {
    min-height: 82px;

    padding: 0 13px;

    display: flex;
    align-items: center;

    color: #08213d;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.csw-nav-item > a:hover {
    color: #1769e0;
}


/* ==================================================
   Custom Uniform arrow
================================================== */

.csw-nav-parent-link {
    gap: 7px;

    cursor: pointer;
}

.csw-nav-arrow {
    position: relative;

    width: 7px;
    height: 7px;

    margin-top: -4px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition:
        transform 0.2s ease;
}

.csw-nav-dropdown:hover .csw-nav-arrow {
    transform: rotate(225deg);
}


/* ==================================================
   Desktop dropdown
================================================== */

.csw-custom-submenu {
    position: absolute;

    top: 100%;
    left: 0;

    min-width: 215px;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e5e9ef;
    border-radius: 0 0 4px 4px;

    box-shadow:
        0 12px 30px rgba(8, 33, 61, 0.14);

    opacity: 0;
    visibility: hidden;

    transform: translateY(7px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

    z-index: 10000;
}

.csw-custom-submenu li {
    margin: 0;
    padding: 0;

    list-style: none;
}

.csw-custom-submenu li a {
    min-height: 44px;

    padding: 0 20px;

    display: flex;
    align-items: center;

    color: #08213d;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.csw-custom-submenu li a:hover {
    color: #1769e0;
    background: #f5f8fc;
}

@media (min-width: 769px) {

    .csw-nav-dropdown:hover .csw-custom-submenu,
    .csw-nav-dropdown:focus-within .csw-custom-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

}


/* ==================================================
   Search
================================================== */

.csw-header-search {
    position: relative;

    flex: 0 0 auto;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 40px;
}


/*
 * Search toggle
 */
.csw-search-toggle {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;

    color: #08213d;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.csw-search-toggle:hover,
.csw-search-open .csw-search-toggle {
    color: #1769e0;

    background: #f4f7fb;

    border-color: #e3e9f0;
}


/*
 * Search icon
 */
.csw-search-icon {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Inline search form
 *
 * Closed:
 * only the search icon is visible.
 *
 * Open:
 * the form expands to the left while remaining
 * inside the header row.
 */
.csw-search-form {
    width: 0;

    max-width: 0;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        width 0.24s ease,
        max-width 0.24s ease,
        opacity 0.18s ease;
}

.csw-search-open .csw-search-form {
    width: 245px;

    max-width: 245px;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

/*
 * Desktop search mode: temporarily collapse the navigation.
 * The search cluster stays on the right, followed by the
 * reserved account and cart buttons.
 */
@media (min-width: 769px) {

    .csw-custom-header.csw-search-active .csw-custom-nav {
        display: none;
    }

    .csw-custom-header.csw-search-active .csw-header-search {
        margin-left: auto;
    }

    /*
     * Reserved actions: Search -> Account -> Cart
     */
    .csw-header-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: 4px;
        flex: 0 0 auto;
    }

    .csw-header-action {
        position: relative;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #08213d;
        border: 0;
        border-radius: 8px;
        background: transparent;
        text-decoration: none;
        transition: color .18s ease, background-color .18s ease;
    }

    .csw-header-action:hover {
        color: #1769e0;
        background: #f4f7fb;
    }

    .csw-action-svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .csw-account-icon {
        fill: none;
    }

    .csw-cart-icon circle {
        fill: currentColor;
        stroke: none;
    }

    .csw-cart-count {
        position: absolute;
        top: 2px;
        right: 1px;
        min-width: 13px;
        height: 13px;
        padding: 0 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 99px;
        background: #1769e0;
        color: #fff;
        font-size: 7px;
        line-height: 1;
        font-weight: 700;
        box-sizing: border-box;
    }

    /*
     * Search button remains immediately after the input.
     */
    .csw-search-open .csw-search-toggle {
        width: 40px;
        height: 40px;

        flex: 0 0 40px;

        border-color: #1769e0;
        background: #1769e0;
        color: #ffffff;

        border-radius: 8px;
    }

    .csw-search-open .csw-search-toggle:hover {
        border-color: #0f5cc9;
        background: #0f5cc9;
        color: #ffffff;
    }

}

/*
 * Search input
 */
.csw-search-form input[type="search"] {
    width: 100%;
    min-width: 0;

    height: 38px;

    padding: 0 12px;

    border: 1px solid #d9e1ea;
    border-radius: 7px;

    outline: 0;

    color: #08213d;

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    background: #ffffff;

    box-shadow: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.csw-search-form input[type="search"]::placeholder {
    color: #9aa8b7;
}

.csw-search-form input[type="search"]:focus {
    border-color: #1769e0;

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, 0.08);
}


/*
 * The submit/search button is the original
 * .csw-search-toggle. It stays immediately after
 * the expanded input, so there is only one search
 * button in the header.
 */
.csw-search-open .csw-search-toggle {
    flex: 0 0 40px;
    background: #1769e0;
    border-color: #1769e0;
    color: #ffffff;

    box-shadow: 0 3px 8px rgba(23, 105, 224, 0.16);
}

.csw-search-open .csw-search-toggle:hover {
    background: #0f5cc9;
    border-color: #0f5cc9;
    color: #ffffff;

    transform: translateY(-1px);
}

/*
 * Desktop compact width
 */
@media (max-width: 1100px) and (min-width: 769px) {

    .csw-search-open .csw-search-form {
        width: 205px;
        max-width: 205px;
    }

}


/*
 * Mobile
 *
 * Search expands inside the same header row:
 *
 * LOGO        [ Search products... ]  🔍  ☰
 */
@media (max-width: 768px) {

    /* Mobile: logo -> search -> cart -> menu */
    .csw-header-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-left: 0;
        flex: 0 0 44px;
    }

    .csw-header-account {
        display: none !important;
    }

    .csw-header-action {
        width: 44px;
        height: 44px;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 8px;
        box-sizing: border-box;
    }

    .csw-header-action .csw-action-svg {
        width: 21px;
        height: 21px;
    }

    .csw-cart-count {
        top: 3px;
        right: 0;
    }

    .csw-custom-header.csw-search-active .csw-header-actions {
        display: none;
    }



    .csw-header-search {
        margin-left: auto;
        margin-right: 3px;

        min-width: 40px;
    }

    .csw-search-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .csw-search-open .csw-search-form {
        position: absolute;

        top: 50%;
        right: 43px;

        width: calc(100vw - 160px);
        max-width: 230px;
        min-width: 140px;

        margin: 0;
        padding: 0;

        transform: translateY(-50%);

        z-index: 10002;
    }

    .csw-search-form input[type="search"] {
        height: 38px;

        padding-left: 11px;
        padding-right: 11px;

        font-size: 12px;
    }

    .csw-search-open .csw-search-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 8px;
    }

}

/* ==================================================
   Mobile button
================================================== */

.csw-mobile-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    margin-left: auto;
    padding: 8px;

    border: 0;
    outline: 0;

    background: transparent;

    cursor: pointer;
}

.csw-mobile-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: #08213d;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ==================================================
   Tablet
================================================== */

@media (max-width: 1100px) and (min-width: 769px) {

    .csw-custom-header-inner {
        width: calc(100% - 28px);
    }

    .csw-nav-item > a {
        padding-left: 8px;
        padding-right: 8px;

        font-size: 11px;
    }

    .csw-header-search {
        margin-left: auto;
    }

}


/*
 * Mobile-only account entry.
 * Hidden on desktop; enabled inside the mobile menu below.
 */
.csw-mobile-account {
    display: none;
}

/* ==================================================
   Mobile
================================================== */

@media (max-width: 768px) {

    .csw-custom-header {
        z-index: 99999;
    }

    .csw-custom-header-inner {
        width: calc(100% - 28px);
        min-height: 72px;

        padding-left: 7px;
        padding-right: 3px;

        box-sizing: border-box;
    }


    /* Logo */
    .csw-header-logo img,
    .csw-header-logo .csw-logo-image {
        max-width: 82px;
        max-height: 44px;

        object-fit: contain;
        object-position: center;
    }

    .csw-header-logo {
        padding-left: 2px;
        flex: 0 0 auto;
    }





    /* Mobile hamburger */
    .csw-mobile-menu-toggle {
        display: flex;

        width: 44px;
        height: 44px;

        margin-left: 0;
        padding: 7px;

        align-items: center;
        justify-content: center;
        flex-direction: column;

        border: 0;
        border-radius: 8px;

        background: transparent;

        cursor: pointer;

        transition:
            background-color 0.2s ease;
    }

    .csw-mobile-menu-toggle:hover {
        background: #f3f6fa;
    }

    .csw-mobile-menu-toggle span {
        display: block;

        width: 21px;
        height: 2px;

        margin: 3px 0;

        border-radius: 2px;

        background: #08213d;

        transition:
            transform 0.22s ease,
            opacity 0.18s ease;
    }


    /* Hamburger -> X */
    .csw-mobile-menu-open .csw-mobile-menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .csw-mobile-menu-open .csw-mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .csw-mobile-menu-open .csw-mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* Mobile navigation panel */
    .csw-custom-nav {
        position: absolute;

        top: calc(100% + 8px);
        left: 0;
        right: 0;

        display: none;

        margin: 0;

        overflow: hidden;

        background: #ffffff;

        border: 1px solid #e3e9f0;
        border-radius: 10px;

        box-shadow:
            0 16px 40px rgba(8, 33, 61, 0.16);
    }


    /* Open */
    .csw-mobile-menu-open .csw-custom-nav {
        display: block;

        animation: cswMobileMenuIn 0.2s ease-out;
    }

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

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


    /* Mobile list */
    .csw-custom-nav-list {
        display: block;

        width: 100%;

        margin: 0;
        padding: 6px 0;

        background: #ffffff;
    }


    /* Top level item */
    .csw-nav-item {
        display: block;

        width: 100%;
    }

    .csw-nav-item > a {
        min-height: 52px;

        width: 100%;

        padding: 0 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        color: #08213d;

        font-size: 12px;
        font-weight: 650;
        letter-spacing: 0.15px;

        border-bottom: 1px solid #edf1f5;

        background: #ffffff;

        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            padding-left 0.18s ease;
    }

    .csw-nav-item:last-child > a {
        border-bottom: 0;
    }

    .csw-nav-item > a:active,
    .csw-nav-item > a:hover {
        color: #1769e0;
        background: #f7faff;
    }


    /* Custom Uniform parent */
    .csw-nav-dropdown > .csw-nav-parent-link {
        font-weight: 700;
    }


    /* Mobile arrow */
    .csw-nav-arrow {
        flex: 0 0 auto;

        width: 8px;
        height: 8px;

        margin-left: auto;
        margin-right: 2px;

        border-right-width: 1.5px;
        border-bottom-width: 1.5px;

        transform: rotate(45deg);

        transition:
            transform 0.2s ease;
    }

    .csw-mobile-dropdown-open .csw-nav-arrow {
        transform: rotate(225deg);
    }


    /* Mobile submenu */
    .csw-custom-submenu {
        position: static;

        display: block;

        min-width: 0;
        width: 100%;

        margin: 0;
        padding: 4px 0;

        background: #f5f8fc;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    /* Hidden until Custom Uniform is opened */
    .csw-nav-dropdown:not(.csw-mobile-dropdown-open)
        .csw-custom-submenu {
        display: none;
    }


    /* Submenu item */
    .csw-custom-submenu li {
        width: 100%;
    }

    .csw-custom-submenu li a {
        min-height: 45px;

        padding: 0 18px 0 36px;

        display: flex;
        align-items: center;

        color: #35516e;

        font-size: 12px;
        font-weight: 500;

        border-bottom: 1px solid #e7edf3;

        background: #f5f8fc;

        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            padding-left 0.18s ease;
    }

    .csw-custom-submenu li:last-child a {
        border-bottom: 0;
    }

    .csw-custom-submenu li a:hover,
    .csw-custom-submenu li a:active {
        color: #1769e0;
        background: #edf4fc;
        padding-left: 40px;
    }

    /* User account lives inside the mobile menu */
    .csw-mobile-account {
        display: block;

        margin: 10px 12px 12px;
        padding-top: 10px;

        border-top: 1px solid #e8edf3;
    }

    .csw-mobile-account-link {
        min-height: 48px;
        width: 100%;

        padding: 0 14px;

        display: flex;
        align-items: center;
        gap: 10px;

        color: #08213d;
        background: #f8fafc;

        border: 1px solid #e8edf3;
        border-radius: 8px;

        font-size: 12px;
        font-weight: 600;
        line-height: 1;

        text-decoration: none;
        box-sizing: border-box;
    }

    .csw-mobile-account-link:active {
        color: #1769e0;
        background: #f2f7fd;
    }

    .csw-mobile-account-icon {
        width: 18px;
        height: 18px;

        flex: 0 0 18px;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

}


/* ==================================================
   Small Mobile
================================================== */

@media (max-width: 480px) {

    .csw-custom-header-inner {
        width: calc(100% - 20px);
        min-height: 68px;
    }

    .csw-header-logo img,
    .csw-header-logo .csw-logo-image {
        max-width: 70px;
        max-height: 38px;
    }

     .csw-mobile-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

     .csw-search-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .csw-custom-nav {
        top: calc(100% + 6px);
        left: 0;
        right: 0;

        border-radius: 9px;
    }

    .csw-nav-item > a {
        min-height: 50px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .csw-custom-submenu li a {
        min-height: 44px;
        padding-left: 34px;
    }

}


/* ==================================================
   Hide Blocksy default header
================================================== */

.ct-header {
    display: none !important;
}

/* ==================================================
   Native Blocksy interaction layer
   Keep the native Account / Cart controls above the
   custom header/page layers so hover AND click work.
================================================== */

.csw-custom-header .csw-native-cart-mounted,
.csw-custom-header .csw-native-cart-mounted * {
    pointer-events: auto !important;
}

.csw-custom-header .csw-native-cart-mounted {
    position: relative !important;
    z-index: 100000 !important;
}

/* Blocksy mini-cart / cart panel */
#woo-cart-panel,
#woo-cart-panel * {
    pointer-events: auto !important;
}

#woo-cart-panel {
    position: relative;
    z-index: 100001 !important;
}

/* Blocksy Account trigger and modal */
.ct-header-account,
.ct-header-account * {
    pointer-events: auto !important;
}

.ct-header-account {
    position: relative !important;
    z-index: 100000 !important;
}

#account-modal,
#account-modal * {
    pointer-events: auto !important;
}

#account-modal {
    z-index: 100001 !important;
}
/* SOGUE announcement bar — scoped; Customizer colors remain authoritative. */
.csw-announcement-bar {
    width: 100%;
    background: var(--csw-announcement-bg, #1766be);
    color: var(--csw-announcement-color, #fff);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
.csw-announcement-inner {
    max-width: 1440px;
    min-height: 36px;
    margin: 0 auto;
    padding: 7px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.csw-announcement-content {
    display: block;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}
.csw-announcement-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 17px;
    row-gap: 5px;
}
.csw-announcement-item, .csw-announcement-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.csw-announcement-icon {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: .95;
}
.csw-announcement-separator {
    width: 1px;
    height: 13px;
    background: currentColor;
    opacity: .35;
}
.csw-announcement-mobile { display: none; }
a.csw-announcement-content:hover, a.csw-announcement-content:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 767px) {
    .csw-announcement-bar { font-size: 12px; }
    .csw-announcement-inner { min-height: 34px; padding: 8px 10px; }
    .csw-announcement-desktop { display: none; }
    .csw-announcement-mobile { display: inline-flex; gap: 6px; }
    .csw-announcement-mobile .csw-announcement-icon { width: 14px; height: 14px; }
}