/*
=========================================================
SPORFIA HEADER
Inspired by Nike + Ralph Lauren + Bonobos
=========================================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#fff;

    color:#222;

    overflow-x:hidden;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

img{

    width:100%;

    display:block;

}

:root{

    --primary:#111111;
    --secondary:#666666;
    --border:#ececec;
    --light:#f7f7f7;
    --white:#ffffff;

    --radius:16px;

    --transition:.28s ease;

}

/***************************************************
Announcement
****************************************************/

.announcement{

    height:42px;

    background:#000;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    letter-spacing:.5px;

    font-weight:500;

}

.announcement a{

    margin-left:10px;

    font-weight:700;

    text-decoration:underline;

}

/***************************************************
Header
****************************************************/

#siteHeader{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    z-index:900;

    border-bottom:1px solid var(--border);

    transition:.35s;

}

.header-container{

    width:95%;

    max-width:1600px;

    margin:auto;

    height:86px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/***************************************************
Logo
****************************************************/

.logo{

    font-size:34px;

    font-weight:800;

    letter-spacing:-1px;

    user-select:none;

}

.logo span{

    color:#6c4cff;

}

/***************************************************
Desktop Nav
****************************************************/

.desktop-nav{

    display:flex;

    align-items:center;

    gap:38px;

}

.desktop-nav>a{

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:var(--transition);

}

.desktop-nav>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#000;

    transition:.25s;

}

.desktop-nav>a:hover::after{

    width:100%;

}

.desktop-nav>a:hover{

    color:#000;

}

/***************************************************
Search
****************************************************/

.header-search {
    position: relative;
    width: 370px;
    z-index: 950;
}

.header-search-form {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
}

.header-search-form > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 18px;

    color: #888;
    font-size: 16px;

    pointer-events: none;

    transform: translateY(-50%);
}

.header-search input {
    width: 100%;
    height: 48px;

    padding: 0 50px 0 52px;

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

    background: #f4f4f4;
    color: #202025;

    font-family: inherit;
    font-size: 14px;

    outline: none;

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

.header-search input::placeholder {
    color: #83838b;
}

.header-search input:focus {
    border-color: #25252a;
    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);
}

.header-search-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 9px;

    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: transparent;
    color: #55555d;

    transform: translateY(-50%);
}

.header-search-clear:hover {
    background: #e8e8ec;
}

.header-search-clear i {
    position: static;

    color: inherit;
    font-size: 13px;

    transform: none;
}

.header-search-results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;

    max-height: min(520px, calc(100vh - 140px));
    overflow-x: hidden;
    overflow-y: auto;

    border: 1px solid #e2e2e7;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 24px 60px rgba(18, 18, 22, 0.17);
}

.header-search-results[hidden],
.header-search-loading[hidden],
.header-search-empty[hidden] {
    display: none !important;
}

.header-search-results-content {
    padding: 8px;
}

.header-search-section {
    padding: 7px 0 4px;
}

.header-search-section + .header-search-section {
    margin-top: 4px;
    padding-top: 12px;

    border-top: 1px solid #ececf0;
}

.header-search-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 3px 11px 8px;

    color: #777780;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.header-search-result {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    min-height: 63px;
    padding: 8px 10px;

    border-radius: 11px;

    color: #222227;
    text-decoration: none;

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

.header-search-result:hover,
.header-search-result.active {
    background: #f3f1ff;
}

.header-search-result-image {
    width: 48px;
    height: 48px;
    overflow: hidden;

    border-radius: 9px;

    background: #f1f1f3;
}

.header-search-result-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.header-search-result-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #f1efff;
    color: #6c4cff;

    font-size: 17px;
}

.header-search-result-copy {
    min-width: 0;
}

.header-search-result-copy strong {
    display: block;
    overflow: hidden;

    color: #232329;

    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result-copy span {
    display: block;
    overflow: hidden;

    margin-top: 4px;

    color: #7b7b84;

    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result-price {
    color: #232329;

    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.header-search-view-all {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: space-between;

    margin: 6px 8px 8px;
    padding: 0 12px;

    border-radius: 10px;

    background: #17171b;
    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.header-search-view-all:hover {
    background: #6c4cff;
}

.header-search-loading,
.header-search-empty {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 11px;

    padding: 25px;

    color: #797982;

    font-size: 10px;
    text-align: center;
}

.header-search-empty > i {
    position: static;

    color: #6c4cff;
    font-size: 25px;

    transform: none;
}

.header-search-empty strong {
    color: #28282e;

    font-size: 14px;
}

.header-search-empty span {
    max-width: 230px;

    line-height: 1.5;
}

.header-search-spinner {
    width: 25px;
    height: 25px;

    border: 3px solid #e2e2e7;
    border-top-color: #6c4cff;
    border-radius: 50%;

    animation:
        header-search-spin 0.7s linear infinite;
}

@keyframes header-search-spin {
    to {
        transform: rotate(360deg);
    }
}

/***************************************************
Icons
****************************************************/

.header-icons{

    display:flex;

    align-items:center;

    gap:14px;

}

.header-icons button,
.header-icons .header-icon-link{

    width:46px;

    height:46px;

    border-radius:50%;

    transition:.25s;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}


.header-icons button:hover,
.header-icons .header-icon-link:hover{

    background:#f3f3f3;

}

.header-icons button i,
.header-icons .header-icon-link i{

    font-size:20px;

}

.cart-count{

    position:absolute;

    top:3px;

    right:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#000;

    color:#fff;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/***************************************************
Mobile Menu Button
****************************************************/

#mobileButton{

    display:none;

}

/***************************************************
Sticky Animation
****************************************************/

.header-scrolled{

    box-shadow:0 10px 40px rgba(0,0,0,.08);

}

.header-hidden{

    transform:translateY(-100%);

}

/***************************************************
Overlay
****************************************************/

#overlay {
    position: fixed;
    z-index: 5250;
    inset: 0;

    visibility: hidden;

    background: rgba(15, 15, 18, 0.52);

    opacity: 0;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;
}

#overlay.active {
    visibility: visible;
    opacity: 1;
}

#overlay.active{

    opacity:1;

    visibility:visible;

}

/***************************************************
Mobile Menu
****************************************************/
#mobileMenu {
    position: fixed;
    z-index: 5300;
    top: 0;
    right: 0;

    display: flex;
    width: min(88vw, 380px);
    height: 100dvh;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: auto;

    background: #ffffff;

    visibility: hidden;
    transform: translateX(100%);

    box-shadow: -22px 0 60px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.32s ease,
        visibility 0.32s ease;
}

#mobileMenu.active {
    visibility: visible;
    transform: translateX(0);
}

.mobile-top{

    height:86px;

    border-bottom:1px solid #ececec;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

}

.mobile-top span{

    font-size:24px;

    font-weight:700;

}

.mobile-top button{

    width:42px;

    height:42px;

    border-radius:50%;

}

.mobile-top button:hover{

    background:#f5f5f5;

}

#mobileMenu nav{

    display:flex;

    flex-direction:column;

    padding:30px;

}

#mobileMenu nav a{

    padding:18px 0;

    font-size:18px;

    border-bottom:1px solid #f0f0f0;

    font-weight:600;

    transition:.25s;

}

#mobileMenu nav a:hover{

    padding-left:12px;

}

/***************************************************
Main Page Wrapper
****************************************************/

main{
    min-height:60vh;
}

/***************************************************
Keyboard Focus
****************************************************/

.desktop-nav a:focus-visible,
.header-icons button:focus-visible,
.mobile-top button:focus-visible,
#mobileMenu nav a:focus-visible,
.header-search input:focus-visible{

    outline:2px solid #111;
    outline-offset:3px;

}

/***************************************************
Header Active Page
****************************************************/

.desktop-nav a.active{

    color:#000;

}

.desktop-nav a.active::after{

    width:100%;

}

/***************************************************
Search Focus State
****************************************************/

.header-search:focus-within input{

    background:#fff;

    box-shadow:
        0 0 0 1px #111,
        0 8px 30px rgba(0,0,0,.08);

}

.header-search:focus-within i{

    color:#111;

}

/***************************************************
Icon Tooltips
****************************************************/

.header-icons button::after{

    content:attr(aria-label);

    position:absolute;

    top:56px;

    left:50%;

    transform:translateX(-50%) translateY(-5px);

    padding:7px 10px;

    border-radius:6px;

    background:#111;

    color:#fff;

    font-size:11px;

    line-height:1;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.2s ease;

}

.header-icons button:hover::after{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/***************************************************
Mobile Menu Footer Area
****************************************************/

.mobile-menu-footer{

    margin-top:auto;

    padding:24px 30px 30px;

    border-top:1px solid #ececec;

}

.mobile-menu-footer a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 0;

    font-size:15px;

    font-weight:500;

    color:#444;

}

.mobile-menu-footer i{

    width:20px;

    text-align:center;

}

/***************************************************
Body Lock
****************************************************/

body.menu-open{

    overflow:hidden;

}

/***************************************************
Large Desktop
****************************************************/

@media(max-width:1400px){

    .header-container{

        width:96%;

    }

    .desktop-nav{

        gap:28px;

    }

    .header-search{

        width:300px;

    }

}

/***************************************************
Laptop / Small Desktop
****************************************************/

@media(max-width:1180px){

    .header-container{

        height:78px;

    }

    .logo{

        font-size:30px;

    }

    .desktop-nav{

        gap:22px;

    }

    .desktop-nav>a{

        font-size:14px;

    }

    .header-search{

        width:240px;

    }

    .header-icons{

        gap:8px;

    }

  .header-icons button,
.header-icons .header-icon-link{

    width:42px;

    height:42px;

}
    }



/***************************************************
Tablet
****************************************************/

@media (max-width: 1024px) {
    .announcement {
        height: 38px;
        font-size: 12px;
    }

    .desktop-nav {
        display: none !important;
    }

    .header-search {
        flex: 1;
        max-width: 420px;
        margin-right: 24px;
        margin-left: 36px;
    }

    #mobileButton {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/***************************************************
Small Tablet
****************************************************/

@media(max-width:820px){

    .header-container{

        width:92%;

        height:72px;

    }

    .logo{

        font-size:28px;

    }

    .header-search{

        display:none;

    }

    .header-icons{

        margin-left:auto;

    }

  .header-icons button,
.header-icons .header-icon-link{

    width:40px;

    height:40px;

}

    .header-icons i{

        font-size:19px;

    }

    .header-icons button::after{

        display:none;

    }

}

/***************************************************
Mobile
****************************************************/

@media(max-width:600px){

    .announcement{

        padding:0 14px;

        text-align:center;

        font-size:11px;

        line-height:16px;

        letter-spacing:.25px;

    }

    .announcement a{

        margin-left:6px;

    }

    .header-container{

        width:92%;

        height:68px;

    }

    .logo{

        font-size:26px;

        letter-spacing:-.8px;

    }

    #wishlistButton{

        display:none;

    }

    .header-icons{

        gap:4px;

    }

  .header-icons button,
.header-icons .header-icon-link{

    width:38px;

    height:38px;

}

    .header-icons i{

        font-size:18px;

    }

    .cart-count{

        width:17px;

        height:17px;

        top:1px;

        right:1px;

        font-size:10px;

    }

   #mobileMenu {
    width: min(88vw, 360px);
    right: 0;
}

    .mobile-top{

        height:70px;

        padding:0 22px;

    }

    .mobile-top span{

        font-size:22px;

    }

    #mobileMenu nav{

        padding:20px 22px;

    }

    #mobileMenu nav a{

        padding:17px 0;

        font-size:17px;

    }

}

/***************************************************
Very Small Mobile
****************************************************/

@media(max-width:390px){

    .announcement{

        min-height:38px;

        height:auto;

        padding-top:7px;

        padding-bottom:7px;

    }

    .header-container{

        width:94%;

    }

    .logo{

        font-size:24px;

    }



}

/***************************************************
Reduced Motion
****************************************************/

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}


/***************************************************
Mobile Account Links
****************************************************/

.mobile-account-links{

    display:flex;

    flex-direction:column;

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid #ececec;

}

#mobileMenu .mobile-account-links a{

    display:flex;

    align-items:center;

    gap:13px;

}

.mobile-account-links i{

    width:22px;

    color:#6c4cff;

    text-align:center;

}


/*
|--------------------------------------------------------------------------
| Cart drawer
|--------------------------------------------------------------------------
*/

body.cart-drawer-open {
    overflow: hidden;
}

.cart-drawer {
    position: fixed;
    z-index: 5200;
    top: 0;
    right: 0;

    display: flex;
    width: min(32vw, 500px);
    min-width: 390px;
    height: 100dvh;
    flex-direction: column;

    background: #ffffff;

    visibility: hidden;
    transform: translateX(100%);

    box-shadow:
        -24px 0 70px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.32s ease,
        visibility 0.32s ease;
}

.cart-drawer.active {
    visibility: visible;
    transform: translateX(0);
}

.cart-drawer-overlay {
    position: fixed;
    z-index: 5100;
    inset: 0;

    visibility: hidden;

    background:
        rgba(15, 15, 18, 0.48);

    opacity: 0;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;
}

.cart-drawer-overlay.active {
    visibility: visible;
    opacity: 1;
}

.cart-drawer-header {
    display: flex;
    min-height: 98px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 25px;

    border-bottom:
        1px solid #ececf0;
}

.cart-drawer-header p {
    margin: 0 0 4px;

    color: #6c4cff;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.cart-drawer-header h2 {
    margin: 0;

    color: #17171b;

    font-size: 23px;
    letter-spacing: -0.8px;
}

.cart-drawer-close {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e2e8;
    border-radius: 50%;

    background: #ffffff;
    color: #29292f;

    cursor: pointer;
}

.cart-drawer-close:hover {
    background: #f4f4f7;
}

.cart-drawer-content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;

    padding: 8px 25px 24px;
}

.cart-drawer-loading,
.cart-drawer-empty {
    display: flex;
    min-height: 350px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;

    color: #7c7c85;

    font-size: 11px;
    text-align: center;
}

.cart-drawer-empty-icon {
    display: flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f0edff;
    color: #6c4cff;

    font-size: 25px;
}

.cart-drawer-empty h3 {
    margin: 6px 0 0;

    color: #25252b;

    font-size: 20px;
}

.cart-drawer-empty p {
    max-width: 270px;
    margin: 0;

    line-height: 1.6;
}

.cart-drawer-empty a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;

    margin-top: 8px;
    padding: 0 21px;

    border-radius: 11px;

    background: #17171b;
    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.cart-drawer-spinner {
    width: 26px;
    height: 26px;

    border: 3px solid #e3e3e8;
    border-top-color: #6c4cff;
    border-radius: 50%;

    animation:
        cart-drawer-spin 0.75s linear infinite;
}

@keyframes cart-drawer-spin {
    to {
        transform: rotate(360deg);
    }
}

.cart-drawer-item {
    display: grid;
    grid-template-columns:
        92px minmax(0, 1fr);
    gap: 15px;

    padding: 18px 0;

    border-bottom:
        1px solid #ececf0;
}

.cart-drawer-item-image {
    display: block;
    width: 92px;
    height: 112px;
    overflow: hidden;

    border-radius: 12px;

    background: #f2f2f4;
}

.cart-drawer-item-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.cart-drawer-item-copy {
    min-width: 0;
}

.cart-drawer-item-brand {
    display: block;

    margin-bottom: 5px;

    color: #7d7d86;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.cart-drawer-item-name {
    display: block;

    overflow: hidden;

    color: #242429;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-drawer-item-variant {
    display: block;

    margin-top: 6px;

    color: #777780;

    font-size: 9px;
}

.cart-drawer-item-price {
    display: block;

    margin-top: 8px;

    color: #242429;

    font-size: 11px;
    font-weight: 800;
}

.cart-drawer-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 12px;
}

.cart-drawer-quantity {
    display: grid;
    grid-template-columns:
        30px 34px 30px;

    min-height: 34px;
    overflow: hidden;

    border: 1px solid #dedee5;
    border-radius: 9px;
}

.cart-drawer-quantity button {
    border: 0;

    background: #ffffff;
    color: #4d4d55;

    cursor: pointer;
}

.cart-drawer-quantity span {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 700;
}

.cart-drawer-remove {
    border: 0;

    background: transparent;
    color: #9999a2;

    font-size: 9px;
    font-weight: 700;
    text-decoration: underline;

    cursor: pointer;
}

.cart-drawer-remove:hover {
    color: #b52d2d;
}

.cart-drawer-footer {
    padding: 21px 25px 24px;

    border-top:
        1px solid #e6e6eb;

    background: #ffffff;
}

.cart-drawer-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #242429;
}

.cart-drawer-subtotal span {
    font-size: 11px;
    font-weight: 700;
}

.cart-drawer-subtotal strong {
    font-size: 19px;
}

.cart-drawer-footer > p {
    margin: 8px 0 18px;

    color: #888891;

    font-size: 9px;
}

.cart-drawer-checkout {
    display: flex;
    min-height: 51px;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 12px;

    background: #17171b;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.cart-drawer-checkout:hover {
    background: #6c4cff;
}

.cart-drawer-view-cart {
    display: block;

    margin-top: 14px;

    color: #55555e;

    font-size: 10px;
    font-weight: 750;
    text-align: center;
    text-decoration: underline;
}

@media (max-width: 700px) {
    .cart-drawer {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .cart-drawer-overlay {
        display: none;
    }

    .cart-drawer-header {
        min-height: 82px;
        padding:
            max(17px, env(safe-area-inset-top))
            17px
            17px;
    }

    .cart-drawer-content {
        padding:
            4px 17px 22px;
    }

    .cart-drawer-footer {
        padding:
            18px 17px
            max(20px, env(safe-area-inset-bottom));
    }

    .cart-drawer-item {
        grid-template-columns:
            82px minmax(0, 1fr);
    }

    .cart-drawer-item-image {
        width: 82px;
        height: 103px;
    }
}

.logo a{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.site-logo{
    display:block;
    height:42px;
    width:auto;
}

@media (max-width:768px){
    .site-logo{
        height:34px;
    }
}