@font-face{
    font-family: "Aptos";
    src: url("../fonts/Aptos.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}


body, html{
    background-color: #fff;
    margin: 0%;
    padding: 0%;
    font-size: calc(10/1920*100vw);
    overflow-anchor: none;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Aptos", sans-serif;
}

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


section{
    width: 100%;
    max-width: 179rem;
    margin: 0 auto;
    padding: 0;
}

h1, h2, th{
    font-family: "Aptos", sans-serif;
    font-weight: 700;
}


span, p, h5, a, ul, li, td{
    font-family: "Aptos", sans-serif;
    font-size: 1.6rem;
    line-height: 2.6rem;
}

button{
    font-family: "Aptos", sans-serif;
    font-weight: 500;
}



header{
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    margin: 0 auto;
    padding: 0;
    overflow: visible !important;
    position: sticky;
    top: 0;
    z-index: 7500;
}

.header-main{
    width: 100%;
    margin: 0 auto;
    padding: 2.85rem 0 0.95rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-main-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.logo-m{
    display: none;
}

.sponser-logo{
    width: 20rem;
    height: auto;
}

.header-search{
    width: 100%;
    max-width: 120rem;
}

.header-search form{
    width: 100%;
}

.field-search-btn{
    display: flex;
    flex-direction: row;
    height: 4.275rem;
    
}

.field-search{
    width: 100%;
}

.field-search input{
    font-size: 2rem;
    padding: 1rem 1.8rem;
    color: #b9b9b9;
    height: 100%;
    border-radius: 0;
    border: 1px solid #b9b9b9;
}

.field-search::placeholder{
    color: #b9b9b9;
}
.input{
    width: 100%;
    border-radius: 0px;
}

.magnifier{
    width: 2.85rem;
    height: 2.85rem;
    filter: brightness(0) invert(1);
}
.search-btn{
    width: 5.225rem;
    height: 100%;
}

.search-btn button{
    width: inherit;
    height: 4.275rem;
    border-radius: 0;
    background-color: #d0043c;
    border: none;
}
.burger-menu{
    width: 2rem;
    height: 1.5rem;
    display: none;
    margin-right: 10rem;
    cursor: pointer;
}

.burger-menu .close-icon{ display: none; }
.burger-menu.active .burger-icon{ display: none; }
.burger-menu.active .close-icon{ display: block; }

.group-btns{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
}

.group-icon{
    width: 2.5rem;
    height: 2.5rem;
}

.search-m{
    display: none;
}

.account-ico{
    transform: translateY(0.2rem);
    cursor: pointer;
}

.user-icon{
    transform: translateY(0.1rem);
    width: 2.5rem;
    height: 2.5rem;
}

.account-ico:hover .user-icon{
    filter: invert(8%) sepia(93%) saturate(5777%) hue-rotate(338deg) brightness(101%) contrast(115%);
}

.cart{
    position: relative;
    display: flex;
    align-items: center;
}

.cart-icon{
    transform: translateY(-0.1rem);cursor:pointer;
}


.cart-dropdown{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 46rem;
    background: transparent;
    z-index: 9000;
    padding-top: 1.2rem;
}

.cart-dropdown-inner{
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.cart:hover .cart-dropdown, .cart-dropdown.active{
    display: block;
}

.cart:hover .cart-icon{
    filter: invert(8%) sepia(93%) saturate(5777%) hue-rotate(338deg) brightness(101%) contrast(115%);
}

.social-icon:hover{
    filter: invert(8%) sepia(93%) saturate(5777%) hue-rotate(338deg) brightness(101%) contrast(115%);
}

.cart-inner-icon{
    width: 4.56rem;
    height: 4.56rem;
    margin-bottom:1rem;
}

.cart-dropdown-header-h{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cart-dropdown-header{
    display: flex;
    flex-direction: column;
    padding: 1.6rem 2.4rem;
    border-bottom: 1px solid rgba(21, 21, 24, 0.08);
}

.cart-title{
    font-size: 2.1rem;
    font-weight:600;
    color: #000;
    line-height: 1;
}

.cart-title span{font-size:2.1rem;}

.cart-basket-btn{
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    padding: 0.7rem 1.4rem;
    font-size: 1.2rem;
    letter-spacing: 0.04rem;
    border-radius: 0.2rem;
    white-space: nowrap;
}

.cart-basket-btn:hover{
    background: #C8102E;
}

.cart-dropdown-body{
    padding: 2.8rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.cart-empty-text{
    font-size: 1.8rem;
    font-weight:600;
    color: #000;
    line-height: 1;
}

.cart-continue{
    font-size: 1.8rem;
    font-weight:600;
    color: #000;
    text-decoration: none;
}

.cart-continue:hover{
    color: #C8102E;
}

/* cart count badge */
.cart-count-badge{
    position: absolute;
    top: -0.5rem;
    right: -0.9rem;
    background: #C8102E;
    color: #fff;
    border-radius: 50%;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* cart dropdown — filled state */
.cart-dropdown-body.cd-filled{
    padding: 0;
    gap: 0;
}

.cd-items{
    max-height: 40rem;
    overflow-y: auto;
}

.cd-items .cd-item{
    position: relative;
    display: flex;
    gap: 1.6rem;
    padding: 2rem 2.4rem;
    border-bottom: 1px solid rgba(21, 21, 24, 0.08);
    align-items: flex-start;
}

.cd-remove{
    position: absolute;
    top: 1.2rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: #aaa;
    line-height: 1;
    padding: 0.2rem;
    transition: color 0.15s;
}

.cd-remove:hover{
    color: #1a1a1a;
}

.cd-img{
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

.cd-info{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding-right: 2rem;
}

.cd-name{
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
}

.cd-price{
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 0.2rem;
}

.cd-per{
    font-size: 1.2rem;
    color: #888;
}

.cd-stepper{
    display: flex;
    align-items: center;
    border: 1px solid #c8c8c8;
    width: fit-content;
    margin-top: 0.6rem;
}

.cd-items .qty-btn{
    width: 3.6rem;
    height: 3.6rem;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.cd-items .qty-btn:hover{
    color: #C8102E;
}

.cd-items .qty-input{
    width: 5.4rem;
    height: 3.6rem;
    border: none;
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
    text-align: center;
    font-size: 1.5rem;
    color: #1a1a1a;
    outline: none;
    background: #fff;
}

.cd-footer{
    padding: 0 2.4rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.cd-subtotal{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 0;
    border-top: 1px solid rgba(21, 21, 24, 0.08);
}

.cd-subtotal-label{
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a1a1a;
}

.cd-subtotal-value{
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
}

.cd-notes{
    font-family: "Aptos", sans-serif !important;
    font-weight: 400;
    width: 100%;
    min-height: 7.5rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    color: #999;
    resize: none;
    outline: none;
    font-style: italic;
    box-sizing: border-box;
    font-family: inherit;
}

.cd-tax{
    font-size: 1.3rem;
    color: #555;
    line-height: 1.4;
}

.cd-terms{
    font-family: "Aptos", sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #1a1a1a;
    cursor: pointer;
}

.cd-terms-check{
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    accent-color: #C8102E;
    flex-shrink: 0;
}

.cd-checkout{
    font-family: "Aptos", sans-serif;
    font-weight: 400;
    width: 100%;
    padding: 1.2rem 2rem;
    background: #C8102E;
    color: #fff;
    border: none;
    font-size: 1.6rem;
    letter-spacing: 0.04rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: background 0.15s;
    text-decoration: none;
}

.cd-checkout:hover{
    background: #a8032f;
}

.cd-checkout-icon{
    width: 1.8rem;
    height: 1.8rem;
    filter: invert(1);
}

.lang{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.lang span{
    font-size: 2rem;
}

.lng-chevron{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-0.5rem);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

header:has(.header-main.sticky-active){
    background-color: rgba(255, 255, 255, 1);
}

.header-main.sticky-active{
    padding-top: 0.95rem;
}

.header-main.sticky-active .sponser-logo{
    width: 17rem;
}

.header-main.sticky-active .group-btns{
    margin-right: 1.5rem;
}

.header-main.sticky-active .burger-menu{
    display: block;
}


.navigation{
    width: 100%;
    max-width: 100% !important;
    position: relative;
    overflow: visible;
    background-color: #fff;
}

.navigation.nav-hidden{
    visibility: hidden;
    height: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

.navigation.nav-open{
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: fixed;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 1);
    z-index: 7400;
}

.navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.navigation .navbar{
    max-width: 140rem;
    margin: 0 auto;
    padding: 0rem 28rem;
    justify-content: center;
}

.navigation-dropdowns{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


.navigation-dropdowns .dropdown-point{
    position: static;
}

.dropdown-point{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dropdown-point a{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dropdown-link{
    text-decoration: none;
    color: #000;
    font-weight: 600;
    cursor: pointer;
}

.navigation .dropdown-point > a{
    text-transform: uppercase;
    font-size: 1.7rem;
    letter-spacing: 0.08rem;
    gap: 0.55rem;
    display: flex;
    align-items: center;
    padding: 1.9rem 2.425rem 1.9rem 1.425rem;
    text-wrap: nowrap;
    text-decoration: none;
    color: #000;
    font-weight: 600;    
}

.navigation .dropdown-link:after{
    content:'';
    display: inline-block;
    width: 1.18rem;
    height: 1.18rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-0.55rem);
    transition: transform 0.35s ease;
    flex-shrink: 0;
}

.navigation-dropdowns .dropdown-point.is-hovered > .dropdown-link,
.dropdown-point.open > .dropdown-link{
    color: #C8102E;
}

.navigation-dropdowns .dropdown-point.is-hovered > .dropdown-link:after,
.dropdown-point.open > .dropdown-link:after{
    transform: rotate(225deg) translateX(-0.7rem) translateY(0.15rem);
}


.dropdown-content{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 8000;
    padding: 0;
}

.dropdown-content::before{
    content: '';
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    height: 2.5rem;
}

.navigation-dropdowns .dropdown-point.is-hovered > .dropdown-content,
.navigation-dropdowns .dropdown-point.open > .dropdown-content{
    display: block;
}

.dropdown-inner{
    background-color: #fff;
    max-width: 179rem;
    margin: 0 auto;
    padding: 0;
    display: flex;
        box-shadow: 0 8px 8px #0a0a0a1a;
}

.dropdown-cat-heading{
    font-weight: 700;
    font-size: 2.1rem;
    color: #000;
    margin-bottom: 1.0rem;
    line-height: 1;
}

.dropdown-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.dropdown-list li{
    font-size: 1.7rem;
}

.dropdown-list a{
    font-weight: 700;
    text-decoration: none;
    color: #000;
    font-size: 1.7rem;
    transition: color 0.15s;
}

.dropdown-list a:hover{
    color: #D0043C;
}

.dropdown-cols{
    display: flex;
    flex: 1;
    gap: 0;
    align-items: flex-start;
}

.dropdown-col{
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    color: #000;
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.2rem;
    padding: 3rem;
}

.dropdown-col-title{
    font-weight: 700;
    font-size: 2.1rem;
    color: #000;
    display: block;
}

.dropdown-col:hover .dropdown-col-title{
    color: #D0043C;
}

.dropdown-col-placeholder{
    width: 100%;
    height: 100%;
    background-color: #f0ede8;
    border-radius: 0.4rem;
}

.dropdown-col-placeholder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goal-placeholder{
    aspect-ratio: 5 / 4;
}

.about-placeholder{
    aspect-ratio: 6 / 4;
}


footer{
    margin-top: auto;
    width: 100%;
    background-color: #fff;
}

.footer-main{
    width: 100%;
    max-width: 180rem;
    margin: 0 auto;
    padding: 3rem 0 4rem;
}

.footer-cols{
    display: flex;
    flex-direction: row;
    gap: 6rem;
    align-items: flex-start;
}

.footer-col{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-col-brand{
    align-items: flex-end;
    justify-content: flex-start;
}

.footer-heading{
    font-size: 2.1rem !important;
    color: #000;
    line-height: 1 !important;
    margin-bottom: 0.4rem;
}

.footer-address p,
.footer-phone,
.footer-hours p{
    font-size: 1.5rem;
    color: #333;
    line-height: 1.7;
}

.footer-address{
    display: flex;
    flex-direction: column;
}

.footer-hours{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.footer-hours-label{
    font-size: 1.35rem;
    line-height: inherit;
}

.footer-links{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    list-style: none;
}

.footer-links a{
    font-size: 1.5rem;
    color: #333;
    text-decoration: none;
    line-height: 1;
}

.footer-links a:hover{
    color: #C8102E;
}

.footer-hashtag{
    font-size: 1.5rem !important;
    color: #000;
    line-height: 1 !important;
}

.footer-social{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.social-icon{
    width: 2.4rem;
    height: 2.4rem;
}

.sponser-logo-bottom{
    width: 43.6rem;
    height: auto;
}

.footer-bottom{
    width: 100%;
    max-width: 182rem;
    margin: 0 auto;
    padding: 1.5rem 0 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright{
    font-size: 1.5rem;
    color: #333;
    line-height: 1;
}

.footer-brand-link{
    color: #C8102E;
    text-decoration: none;
    font-size: 1.5rem;
}

.footer-payments{
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    align-items: center;
}

.payment-icon{
    height: 2.6rem;
    width: auto;
}

.questions-button{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}

.ask-question{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
    border-radius: 50%;
    
}

.ask_the_coach{
    width: 9rem;
    height: 9rem;
    
}

.green-circle{
    background-color: rgb(37, 211, 57);
    position: absolute;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    right: 0.5rem;
    top: 0.3rem;
}

main{
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Mp section */

.gallery-products-podcast-cards{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: 100%;
    gap: 1rem;
    aspect-ratio: 3 / 1;
}

.main-image-card, .product-card, .podcast-card{
    border-radius: 0.5rem;
}

.main-image-card{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    overflow: hidden;
}

.main-image-card .main-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    position: relative;
    overflow: hidden;
}

.product-card .pruduct-card-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.podcast-card{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    position: relative;
    overflow: hidden;
}

.podcast-card .podcast-card-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-btn, .podcast-btn{
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    padding: 1rem 2rem;
    height: 4.7rem;
    border: none;
    background-color: #D0043C;
    color: #fff;
    border-radius: 0.4rem;
    font-size: 1.8rem;
}

/* Products in focus */

.prodcut-in-focus{
    padding: 4rem 0 5rem;
}

.pif-head{
    margin-bottom: 3rem;
}

.pif-heading{
    font-size: 4rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    display: inline-block;
    
}

.divider{
    width: 7rem;
    border-bottom: 0.2rem solid #d0043c;
}

.pif-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.pif-card{
    display: flex;
    flex-direction: column;
}

.pif-card-image-wrap{
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 1 / 1;
}

.pif-badge{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 1rem;
    left: 1rem;
    background: #d0043c;
    color: #fff;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    font-size: 1.1rem;
    padding: 0.3rem 0.7rem;
    z-index: 2;
    letter-spacing: 0.05rem;
}

.pif-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.pif-img-hover{
    position: absolute;
    inset: 0;
    opacity: 0;
}

.pif-card:hover .pif-img-default{
    opacity: 0;
}

.pif-card:hover .pif-img-hover{
    opacity: 1;
}

.pif-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    bottom:0;top:auto;
}

.pif-card:hover .pif-overlay{
    opacity: 1;
    pointer-events: all;
}

.pif-select-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: #d0043c;
    color: #fff;
    border: none;
    font-size: 1.3rem;
    padding: 1rem 1.6rem;
    height: 4.2rem;
    cursor: pointer;
    flex: 1;
    letter-spacing: 0.03rem;
}

.pif-cart-icon{
    width: 1.8rem;
    height: 1.8rem;
    filter: brightness(0) invert(1);
}

.pif-eye-btn{
    width: 4.2rem;
    height: 4.2rem;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
}

.pif-eye-icon{
    width: 2.4rem;
    height: 2.4rem;
}

.pif-card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pif-card-info{
    width: 100%;
    padding: 1.2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
}

.pif-card-info:hover .pif-subtitle{
    color: #D0043C;
}

.pif-name{
    font-size: 2.8rem;
    color: #1a1a1a;
    line-height: 1.3;
}

.pif-subtitle{
    font-size: 1.6rem;
    color: #666;
}

.pif-divider{
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0.6rem 0;
}

.pif-price{
    font-size: 2rem;
    color: #1a1a1a;
}

.review-stars-pif{
    display: flex;
    flex-direction: column;
    align-items: center;
}



.pif-reviews{
    font-size: 1.2rem;
    color: #888;
}

.rich-text-section{
    padding-bottom: 5rem;
}

.rich-content p{
    font-size: 1.8rem;
    color: #000;
    line-height: 1.5;
}


.podcast-slideshow{
    display: flex;
    flex-direction: row;
    height: 60rem;
    overflow: hidden;
    gap: 2rem;
    padding-bottom: 5rem;
}

.podcast-info{
    width: 39.5%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ebebeb;
    padding: 4rem 2rem;
    gap: 2.5rem;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.podcast-info p{
    font-size: 2rem;
    color: #000;
    line-height: 1.5;
}

.link-to-mediaplayer{
    color: #fff;
    border: none;
    width: fit-content;
    font-size: 1.5rem;
    letter-spacing: 0.04rem;
    padding: 1.1rem 2rem;
    background-color: #d0043c;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.link-to-mediaplayer:hover{
    background-color: #a8032f;
}

.slide-container{
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.podcast-swiper{
    width: 100%;
    height: 100%;
    position: relative;
}

.podcast-swiper .swiper-slide{
    overflow: hidden;
}

.pc-content-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.sports-cards{
    display: flex;
    flex-direction: row;
    flex: 1;
}

.sport-card{
    position: relative;
    width: 48rem;
    height: 40rem;
    cursor: pointer;
    overflow: hidden;
}

.sport-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: all .3s ease-in-out;
}

.sport-card:hover .sport-img{
    transform: scale(1.08);
}

.sport-card h2{
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    color: #fff;
    font-size: 4rem;
}

.approval{
    padding: 5rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
}

.approval-icon{
    width: 20rem;
    height: 20rem;
}

.approval-desc{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.approval h2{
    font-size: 4rem;
}

.approval p{
    width: 90%;
    font-size: 1.8rem;
    line-height: 1.5;
}


.ttp-cards{
    display: flex;
    flex-direction: row;
    height: 64rem;
    max-width: 100% !important;
}

.ttp-card{
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.ttp-card::after{
    content: '';
    position: absolute;
    inset: 0;
    background: #939393b3;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.ttp-card:hover::after{
    opacity: 1;
}

.ttp-card:hover .ttp-img{
    transform: scale(1.08);
    z-index: 0;
}

.ttp-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1);
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ttp-default-label{
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    color: #fff;
    font-size: 4rem;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease;
    pointer-events: none;
}

.ttp-card:hover .ttp-default-label{
    transform: translateY(-5rem);
    opacity: 0;
}

.ttp-info{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 3rem 2.5rem;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
}

.ttp-card:hover .ttp-info{
    transform: translateY(0);
}

.ttp-info-title{
    color: #fff;
    font-size: 4rem;
    font-weight: 500;
}

.ttp-info-text{
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.6;
}

/* Register */

.register{
    background-color: #c8102e;
    padding: 5rem 0;
    max-width: 100% !important;
}

.register-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 160rem;
    margin: 0 auto;
    padding: 0 4rem;
    gap: 6rem;
}

.register-left{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.register-title{
    color: #fff;
    font-size: 4rem;
    font-weight: 500;
}

.register-desc{
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.5;
}

.register-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
}

.register-input{
    width: 100%;
    padding: 1.4rem 1.8rem;
    border: none;
    font-size: 1.6rem;
    color: #555;
    outline: none;
    background: #fff;
}

.register-input::placeholder{
    color: #aaa;
}

.register-btn{
    width: 100%;
    padding: 1.3rem;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.08rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.register-btn:hover{
    background-color: rgba(255, 255, 255, 0.15);
}

/* Catalog section */
.catalog-banner{
    height: 30vh;
    margin-bottom: 4rem;
    box-shadow: 0px 10px 15px #00000029
}

.catalog-banner-img{
    width: 100%;
    height: 30vh;
    object-fit: cover;
}

.catalog-section{
    padding: 4rem 0 6rem;
}

.catalog-title-area{
    padding: 0 0rem 1.5rem;
}

.catalog-title{
    font-size: 3.6rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.catalog-title-divider{
    width: 3.5rem;
    height: 3px;
    background: #d0043c;
}

.catalog-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0rem 2.5rem;
}

.catalog-nav{
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.catalog-nav a{
    font-size: 1.2rem;
    color: #d0043c;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.catalog-nav a:hover{
    text-decoration: underline;
}

.bc-arrow{
    font-size: 1.2rem;
    color: #666;
    line-height: 1;
}

.bc-current{
    font-size: 1.2rem;
    color: #d0043c;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.sort-select{
    font-size: 1.4rem;
    padding: 0.6rem 3rem 0.6rem 1rem;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    color: #1a1a1a;
    min-width: 18rem;
    -webkit-appearance: auto;
    appearance: auto;
}

.catalog-layout{
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

.catalog-sidebar{
    width: 46rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.filter-group{
    border-bottom: 1px solid #e0e0e0;
}

.filter-group-header{
    font-family: "Aptos", sans-serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.8rem 0;
    cursor: pointer;
    font-size: 1.7rem;
    color: #1a1a1a;
    user-select: none;
}

.filter-chevron{
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 1.5px solid #1a1a1a;
    border-bottom: 1.5px solid #1a1a1a;
    transform: rotate(45deg) translateY(-0.2rem);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.filter-group.open .filter-chevron{
    transform: rotate(-135deg) translateY(-0.2rem);
}

.filter-group-body{
    display: none;
    padding-bottom: 1.4rem;
    flex-direction: column;
    gap: 0.8rem;
}

.filter-group.open .filter-group-body{
    display: flex;
}

.filter-option{
    font-family: "Aptos", sans-serif;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
}

.filter-option input[type="checkbox"]{
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #d0043c;
}

.catalog-main-window{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2rem;
}

.catalog-products{
    flex: 1;
    min-width: 0;
}

.catalog-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:4rem 2rem;
}

.pif-badge-oos{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: 1rem;
    left: 1rem;
    background: #888;
    color: #fff;
    border-radius: 50%;
    width: 5.5rem;
    height: 5.5rem;
    font-size: 0.85rem;
    line-height: 1.25;
    z-index: 2;
    letter-spacing: 0.03rem;
    padding: 0.5rem;
}

.pif-price-row{
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pif-price-sale{
    font-size: 2rem;
    color: #1a1a1a;
}

.pif-price-original{
    font-size: 1.6rem;
    color: #999;
    text-decoration: line-through;
}

.pif-price-sold-out{
    font-size: 2rem;
    color: #1a1a1a;
}

.load-more-ctg{
    font-size: 1.5rem;
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 0;
    background-color: #d0043c;
    border: none;
}

/* Product section */

.product-container{
    padding-top: 4rem;
}

.product-main-desc{
    display: flex;
    flex-direction: row;
    gap: 6rem;
    padding-bottom: 6rem;
    align-items: flex-start;
}

.product-gallery{
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width:50%;
}

.product-main-img{
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-main-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-thumbnails{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

.product-thumbnail{
    width: 16rem;
    height: 16rem;
    border: 1px solid #f4f4f4;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.product-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-thumbnail.active{
    border-color: #d0043c;
    opacity:0.3;
}

.product-thumbnail:hover{
    border-color: #d0043c;
}

.play-btn{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 2.2rem;
    pointer-events: none;
}

.product-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 0.5rem;
}

.product-title{
    font-size: 4.2rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.15;
}

.product-subtitle{
    font-size: 2rem;
    color: #1a1a1a;
    margin-top: -1rem;
}

.product-features{
    list-style: disc;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-features li{
    font-size: 1.6rem;
    color: #1a1a1a;
    line-height: 1.55;
    list-style: disc;
}

.product-option-group{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-option-label{
    font-size: 1.6rem;
    color: #1a1a1a;
}

.product-option-btns{
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.option-btn{
    padding: 0rem 1rem;
    line-height: 4rem;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 1.4rem;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.option-btn:hover,
.option-btn.active{
    border-color: #d0043c;
    color: #d0043c;
}

.product-price{
    font-size: 3.2rem;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: -1rem;
}

.product-price-sub{
    font-size: 1.4rem;
    color: #888;
}

.product-actions{
    display: flex;
    flex-direction: row;
    gap: 3rem;
    height: 4.4rem;
    margin-top:3rem;
}

.product-quantity{
    width: 49%;
    display: flex;
    height: 4.4rem;
    flex-direction: row;
    border: 1px solid #ccc;
    flex-shrink: 0;
}

.qty-btn{
    width: 4.4rem;
    height: 100%;
    background: #ebebeb;
    border: none;
    font-size: 2.2rem;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}

.qty-btn img{
    width: 2.025rem;
    height: auto;
}

.qty-btn:hover{
    background: #f0f0f0;
}

.qty-input{
    width: 85%;
    height: 100%;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    font-size: 1.8rem;
    color: #1a1a1a;
    outline: none;
}


.add-to-cart-btn{
    flex: 1;
    height: 100%;
    background: #d0043c;
    color: #fff;
    border: none;
    font-size: 1.7rem;
    letter-spacing: 0.04rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: background 0.15s;
}

.add-to-cart-btn:hover{
    background: #a8032f;
}

.cart-btn-icon{
    width: 2rem;
    height: 2rem;
    filter: brightness(0) invert(1);
}

.product-vat-note{
    font-size: 1.3rem;
    color: #888;
    margin-top: -1rem;
}

.print-pdf-btn{
    width: 50%;
    padding: 1.4rem;
    background: #d0043c;
    color: #fff;
    border: none;
    font-size: 1.6rem;
    letter-spacing: 0.04rem;
    cursor: pointer;
    transition: background 0.15s;
}

.print-pdf-btn:hover{
    background: #a8032f;
}


.more-product-description{
    margin-bottom: 6rem;
}

.tab-accordion-header{
    display: none;
}

.tabs-nav{
    display: flex;
    flex-direction: row;
}

.tab-btn{
    padding: 1.5rem 2.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 1.6rem;
    color: #8d8d8d;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    margin-bottom: -1px;
    background-color: #f1f1f1;;
}

.tab-btn:hover{
    color: #1a1a1a;
}

.tab-btn.active{
    background-color: #fff;
    color: #1a1a1a;
    border-bottom: none;
}

.tab-content{
    border: 1px solid #e0e0e0;
    padding: 2.5rem 3rem 3rem;
}

.tab-panel{
    display: none;
}

.tab-panel.active{
    display: block;
}

.tab-panel p{
    font-size: 1.6rem;
    color: #1a1a1a;
    line-height: 1.75;
    margin-bottom: 1.6rem;
}

.tab-panel p:last-child{
    margin-bottom: 0;
}

.nutrition-table{
    width: 100%;
    border-collapse: collapse;
}

.nutrition-th{
    background: #f0f0f0;
    padding: 1rem 1.4rem;
    font-size: 1.4rem;
    color: #1a1a1a;
    border-bottom: 1px solid #e0e0e0;
}

.nutrition-th-label{
    width: 40%;
    text-align: left;
}

.nutrition-th-value{
    text-align: right;
}

.nutrition-row{
    border-bottom: 1px solid #e0e0e0;
}

.nutrition-td{
    padding: 0.9rem 1.4rem;
    font-size: 1.5rem;
    color: #1a1a1a;
}

.nutrition-td-label{
    text-align: left;
}

.nutrition-td-value{
    text-align: right;
}

.nutrition-footnote{
    font-size: 1.4rem;
    color: #555;
    margin-top: 1.4rem;
    line-height: 1.5;
}

.text-link{
    color: #d0043c;
    text-decoration: none;
}

.text-link:hover{
    text-decoration: underline;
}


.recomendations{
    padding: 4rem 0 6rem;
}

.recomendations-title{
    font-size: 4rem;
    font-weight: 500;
    color: #1a1a1a;
    display: block;
    margin-bottom: 1rem;
}

.recomendations-title::after{
    content: '';
    display: block;
    width: 7rem;
    border-bottom: 0.2rem solid #d0043c;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.recomendations-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.rec-card{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #1a1a1a;
    cursor: pointer;
}

.rec-card-img{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}

.rec-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.rec-card:hover .rec-card-img img{
    transform: scale(1.05);
}


.rec-card-info{
    padding: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rec-card-name{
    font-size: 2.2rem;
    color: #1a1a1a;
    line-height: 1.2;
}

.rec-card-sub{
    font-size: 1.4rem;
    color: #888;
}

.rec-card-divider{
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0.4rem 0;
}

.rec-card-price{
    font-size: 1.8rem;
    color: #1a1a1a;
}

.rec-card-price s{
    font-size: 1.5rem;
    color: #999;
    text-decoration: line-through;
}

.rec-card-price.sold-out{
    color: #666;
}

.rec-card-rating{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.rec-stars, .pif-stars{
    color: #d0043c;
    font-size: 1.6rem;
    letter-spacing: 0.05rem;
}

.rec-reviews{
    font-size: 1.2rem;
    color: #888;
}

.product-card-banner{
    height: 68rem;
    margin-bottom: 4rem;
    box-shadow: 0px 10px 15px #00000029
}

.product-card-banner-img{
    width: 100%;
    height: 69rem;
    object-fit: cover;
}

.cart-section{
    padding: 5rem 0 10rem;
}


.cart-inner{
    margin: 0 auto;
}

.cart-page-title{
    font-size: 5rem;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 1.2rem;
}

.divider{
    border-bottom: 0.25rem solid #C8102E;
}

.cart-d{
    width: 5.5rem;
    margin-bottom: 10rem;
}

.cart-d-r{
    width: 5.5rem;
    margin-bottom: 4.5rem;
}

.cart-table-header{
    display: grid;
    grid-template-columns: 1fr 28rem 20rem 16rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid #e0e0e0;
}

.cart-th{
    font-size: 1.6rem;
    color: #1a1a1a;
}

.cart-th-center{
    text-align: center;
}
.cart-th-right{
    text-align: right;
}

.cart-item{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 28rem 20rem 16rem;
    align-items: center;
    padding: 2.5rem 3.5rem 2.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.cart-item-remove{
    position: absolute;
    top: 1.8rem;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    font-size: 1.6rem;
    line-height: 1;
    color: #aaa;
    transition: color 0.15s;
}

.cart-item-remove:hover{ color: #1a1a1a; }

.cart-item-product{
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
}

.cart-item-img{
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    flex-shrink: 0;
}

.cart-item-info{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cart-item-name{
    font-size: 1.6rem;
    color: #C8102E;
    text-decoration: none;
}

.cart-item-name:hover{ text-decoration: underline; }

.cart-item-packaging{
    font-size: 1.4rem;
    color: #555;
}

.cart-item-price{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cart-price-main{
    font-size: 1.6rem;
    color: #1a1a1a;
}

.cart-price-per{
    font-size: 1.3rem;
    color: #888;
}

.cart-item-qty{
    display: flex;
    justify-content: center;
}

.cart-qty-stepper{
    display: flex;
    align-items: center;
    border: 1px solid #c8c8c8;
}

.cart-qty-btn{
    width: 3.8rem;
    height: 3.8rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.cart-qty-btn:hover{ color: #C8102E; }

.cart-qty-input{
    width: 5.2rem;
    height: 3.8rem;
    border: none;
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
    text-align: center;
    font-size: 1.6rem;
    color: #1a1a1a;
    outline: none;
}


.cart-item-total{
    text-align: right;
    font-size: 1.6rem;
    color: #1a1a1a;
}

.cart-subtotal-row{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8rem;
    background: #f0f0f0;
    padding: 2.5rem 0;
}

.cart-subtotal-label{
    font-size: 2rem;
    color: #1a1a1a;
}

.cart-subtotal-value{
    font-size: 2.2rem;
    color: #1a1a1a;
    min-width: 14rem;
    text-align: right;
}

.cart-bottom{
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    margin-top: 3rem;
}

.cart-notes{
    flex: 1;
}

.cart-notes-textarea{
    width: 100%;
    min-height: 13rem;
    padding: 1.5rem;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    color: #999;
    resize: vertical;
    outline: none;
    font-style: italic;
}

.cart-checkout-area{
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-width: 38rem;
    max-width: 44rem;
    align-items: flex-end;
}

.cart-tax-note{
    font-size: 1.4rem;
    color: #555;
}

.cart-shipping-link{
    color: #C8102E;
    text-decoration: none;
}

.cart-shipping-link:hover{
    text-decoration: underline;
}

.cart-terms-label{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #1a1a1a;
    cursor: pointer;
}

.cart-terms-checkbox{
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    accent-color: #C8102E;
    flex-shrink: 0;
}

.cart-checkout-btn{
    width: 100%;
    padding: 1.5rem 2rem;
    background: #C8102E;
    color: #fff;
    border: none;
    font-size: 1.6rem;
    letter-spacing: 0.04rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: background 0.15s;
}

.cart-checkout-btn:disabled{
    background: #b0b0b0;
    cursor: not-allowed;
}

.cart-checkout-btn:not(:disabled):hover{
    background: #a8032f;
}

.cart-payment-btns{
    display: flex;
    gap: 1rem;
    width: 100%;
}

.cart-shop-pay-btn{
    flex: 1;
    padding: 1.2rem 1rem;
    background: #5A31F4;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    transition: opacity 0.15s;
}

.cart-shop-pay-btn:hover{
    opacity: 0.88;
}

.shop-pay-shop{
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.shop-pay-pay{
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.88;
    letter-spacing: 0.02em;
}

.cart-google-pay-btn{
    flex: 1;
    padding: 1.2rem 1rem;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: opacity 0.15s;
}

.cart-google-pay-btn:hover{
    opacity: 0.82;
}

.gpay-g{
    font-size: 1.8rem;
    font-weight: 700;
    background-clip: text;
    line-height: 1;
}

.gpay-pay{
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.cart-continue-shopping{
    font-size: 1.4rem;
    color: #C8102E;
    text-decoration: none;
}

.cart-continue-shopping:hover{
    text-decoration: underline;
}

.cart-empty-msg{
    font-size: 3.2rem;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.cart-continue-link{
    font-size: 1.8rem;
    line-height: 1.5;
    color: #C8102E;
    text-decoration: none;
}

.cart-continue-link:hover{
    text-decoration: underline; 
}



.header-profile{
    max-width: 132rem;
    padding: 1.4rem 3.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header-logo-switcher{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.1rem;
}

.profile-sponser-logo{
    width: 11.2rem;
    height: 2.289rem;
}

.profile-swithers{
    display: flex;
    flex-direction: row;
}

.profile-btn{
    font-size: 1.4rem;
    border-radius: 0.8rem;
    padding: 0.9rem 1.4rem;
    color: #000;
    text-decoration: none;
    background-color: #fff;
}

.profile-btn:hover{
    background-color: #f6f6f6;
}

.active-p{
    text-decoration: underline;
}

.profile-window-btn{
    width: 3.152rem;
    height: 3.152rem;
    background-color: #f6f6f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-window-icon{
    width: 2.4rem;
    height: 2.4rem;
}

.footer-profile{
    max-width: 132rem;
    padding: 0 3.8rem;
    margin-top: auto;
}

.footer-inner{
    display: flex;
    flex-direction: row;
    gap: 1.4rem;
    align-items: start;
    border-top: 1px solid #e0e0e0;
    padding: 2.1rem 0;
}

.footer-inner a{
    color: #d0043c;
}

.footer-inner span{
    font-size: 1.4rem;
}

.location{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.location-icon{
    width: 1.8rem;
    height: 1.8rem;
}

.location-chevron{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-0.5rem);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.profile-main-section, .order-main-section{
    max-width: 132rem;
    padding: 4rem 3.8rem 6rem;
    height: 100%;
}

.profile-heading, .order-heading{
    font-size: 2.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 3.5rem;
}

.profile-card{
    border-radius: 1rem;
    padding: 2.1rem;
    margin-bottom: 2.5rem;
    box-shadow: rgba(0, 0, 0, .08) 0 0 0 .5px, rgba(0, 0, 0, .08) 0 2px 12px
}

.profile-name-row{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.profile-label{
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.56);
    line-height: 1;
}

.profile-edit-btn{
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 0;
}

.redact-icon{
    width: 1.5rem;
    height: 1.5rem;
}

.profile-email-group{
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.profile-field-label{
    font-size: 1.4rem;
    color: #888;
    line-height: 1;
}

.profile-email-value{
    font-size: 1.5rem;
    color: #1a1a1a;
    line-height: 1;
}

.profile-addresses-header{
    display: flex;
    align-items: center;
    gap: 2.6rem;
    margin-bottom: 1.4rem;
}

.profile-addresses-title{
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.profile-add-btn{
    font-size: 1.4rem;
    color: #d0043c;
    text-decoration: none;
}

.profile-add-btn:hover{
    text-decoration: underline;
}

.profile-no-addresses{
    background: #f5f5f5;
    border-radius: 0.6rem;
    padding: 1.7rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #d4d4d4;
}

.information-icon{
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.profile-no-addresses span{
    font-size: 1.4rem;
    color: #1a1a1a;
    line-height: 1;
}

.profile-signout-area{
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 0.4rem;
}

.profile-signout-btn{
    padding: 1.4rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.6rem;
    background: #fff;
    color: #d0043c;
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.profile-signout-btn:hover{
    background: #f6f6f6;
}

.profile-signout-all{
    font-size: 1.5rem;
    color: #d0043c;
    text-decoration: none;
    line-height: 1;
}

.profile-signout-all:hover{
    text-decoration: underline;
}

.nav-outer-container{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 7999;
}

.nav-outer-container.open{
    display: block;
}

.order-card{
    border-radius: 1rem;
    padding: 2.1rem;
    box-shadow: rgba(0, 0, 0, .08) 0 0 0 .5px, rgba(0, 0, 0, .08) 0 2px 12px
}

.offer-card-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.1rem;
    padding: 3.8rem;
}


@media (max-width: 800px){
    body, html{
        font-size: calc(10/480*100vw) !important;
    }

    section{
        max-width: 44rem !important;
    }

    span, p{
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .navigation-dropdowns{
        display: none;
    }

    .burger-menu{
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        /* margin-right: 13rem; */
        margin: 0;
    }

    .burger-menu img{
        width: 2rem;
        height: 2rem;
    }

    header{
        width: 100%;
        overflow: visible !important;
        position: sticky;
        top: 0;
    }

    .header-main{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: none !important;
        width: 100%;
        margin: 0 auto;
        padding: 0rem 2.3rem;
    }

    .header-main-content{
        width: auto;
    }

    .header-search{
        display: none;
    }

    .navigation, .field-search-btn, .account-ico, .lang, .logo{
        display: none;
    }
    
    .search-m{
        display: block;
    }

    .logo-m{
        display: block;
    }

    .sponser-logo-m, .logo-m{
        width: 10.5rem;
    }

    .group-btns{
        margin: 0;
    }

    .group-icon{
        width: 2rem;
    }


    .dropdown-link{
        text-decoration: none;
        color: #000;
        font-weight: 500;
        cursor: pointer;
    }

    .footer-main{
        padding: 0rem 2rem;
    }

    .footer-cols{
        flex-direction: column;
        gap: 2rem;
        padding: 3rem 0;
    }


    .footer-heading{
        font-size: 1.5rem !important;
        line-height: 1 !important;
    }

    .footer-address p,
    .footer-phone,
    .footer-hours p{
        font-size: 1.5rem !important;
        color: #333;
        line-height: 1.7;
    }

    .footer-col-brand{
        align-items: flex-start;
    }

    .footer-bottom{
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        padding: 2rem 2rem;
    }

    .footer-copyright{
        text-align: center;
        font-size: 1.5rem;
    }

    .footer-payments{
        margin-left: auto;
    }

    .payment-icon{
        width: 2rem;
    }


    .sponser-logo-bottom{
        width: 50%;
    }

    .questions-button{
        right: 1.5rem;
        bottom: 1.5rem;
    }


    .ask_the_coach{
        width: 8rem;
        height: auto;
        
    }

    .green-circle{
        background-color: rgb(37, 211, 57);
        position: absolute;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        right: 0rem;
        top: 0rem;
    }


    /* Mobile menu */

    .mobile-menu{
        display: none;
        position: fixed;
        flex-direction: column;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none !important;
        z-index: 8000;
        background: #fff;
        overflow-y: auto;
    }

    .mobile-menu.open{
        display: flex;
    }

    .mobile-menu-header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0rem 2.3rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-close{
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        width: 2rem;
    }

    .mobile-close-icon{
        width: 2rem;
        height: 2rem;
    }

    .mobile-menu-logo .sponser-logo{
        width: 10.5rem;
        height: auto;
    }

    .mobile-header-icons{
        display: flex;
        flex-direction: row;
        gap: 1.2rem;
        align-items: center;
    }

    .mobile-header-icon{
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
    }

    .mobile-nav{
        flex: 0;
    }

    .mobile-nav-list{
        list-style: none;
        padding: 0;
        margin: 0;
    }


    .mobile-nav-row{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 2.3rem;
        cursor: pointer;
    }

    .mobile-nav-link{
        text-decoration: none;
        color: #000;
        font-size: 1.6rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .mobile-nav-chevron{
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg) translateY(-0.3rem);
        flex-shrink: 0;
    }

    .mobile-menu-account{
        padding: 2rem 2.3rem 10rem;
    }

    .mobile-account-icon{
        width: 2.5rem;
        height: 2.5rem;
    }

    .mobile-menu-footer{
        padding: 2rem 2.3rem;
    }

    .mobile-lang-btn{
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        background: none;
        border: 1px solid #000;
        padding: 0.9rem 1.8rem;
        cursor: pointer;
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        border-radius: 0.3rem;
    }

    .mobile-lang-chevron{
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        border-right: 1.5px solid #000;
        border-bottom: 1.5px solid #000;
        transform: rotate(45deg) translateY(-0.3rem);
        flex-shrink: 0;
    }

    .mobile-nav-item{
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .mobile-nav-sub{
        display: none;
    }

    .mobile-nav-item.open > .mobile-nav-sub{
        display: block;
    }

    .mobile-nav-sub .dropdown-inner{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
        background: #f6f6f6;
        padding: 0;
    }

    .mobile-nav-sub .dropdown-col{
        padding: 1.5rem 2rem;
    }

    .mobile-nav-item.open > .mobile-nav-row .mobile-nav-link{
        color: #C8102E;
    }

    .mobile-nav-item.open > .mobile-nav-row .mobile-nav-chevron{
        transform: rotate(-135deg) translateX(-0.3rem) translateY(0.15rem);
        border-color: #C8102E;
    }

    /* Mp section */

    .gallery-products-podcast-cards{
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        gap: 1rem;
        aspect-ratio: none;
    }


    .prodcut-in-focus{
        padding: 4rem 0 3rem;
    }

    .pif-head{
        margin-bottom: 7rem;
    }

    .pif-heading{
        font-size: 4rem;
        font-weight: 500;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        display: inline-block;
        
    }

    .divider{
        width: 7rem;
        border-bottom: 0.2rem solid #d0043c;
    }

    .pif-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }


    .pif-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.3s ease;
    }

    .pif-img-hover{
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    .pif-card:hover .pif-img-default{
        opacity: 0;
    }

    .pif-card:hover .pif-img-hover{
        opacity: 1;
    }

    .pif-overlay{
        display: none;
    }

    .pif-name{
        font-size: 2.2rem;
    }

    .rich-text-section{
        padding-bottom: 5rem;
    }

    .rich-content p{
        font-size: 1.8rem;
        color: #000;
        line-height: 1.5;
    }


    .podcast-slideshow{
        display: flex;
        flex-direction: column-reverse;
        height: auto;
        gap: 2rem;
    }

    .podcast-info{
        width: 100%;
    }

    .podcast-info p{
        font-size: 2rem;
        color: #000;
        line-height: 1.5;
    }

    .sports-cards{
        display: flex;
        flex-direction: column;
    }


    .sport-card h2{
        font-size: 3.6rem;
    }

    
    .approval h2{
        font-size: 3.6rem;
    }

    .approval p{
        width: 90%;
        font-size: 1.8rem;
        line-height: 1.5;
    }

    .ttp-cards{
        flex-direction: column;
        height: auto;
    }

    .ttp-card{
        height: 48rem;
    }

    .ttp-card:hover{
        transform: none;
    }

    .ttp-info-title{
        font-size: 3rem;
    }

    .ttp-info-text{
        font-size: 1.5rem;
    }

    .register-content{
        flex-direction: column;
        padding: 0 2.3rem;
        gap: 3rem;
    }

    .register-title{
        font-size: 3rem;
    }

    .register-right{
        max-width: 100%;
        gap: 2.5rem;
        width: 100%;
    }

    .register-input{
        padding: 0.7rem 1.7rem;
    }

    .register-btn{
        padding: 0.6rem;
        font-size: 1.6rem;
    }

    /* Catalog section mobile */
    .catalog-title-area{
        padding: 0 2rem 1.5rem;
    }

    .catalog-controls{
        padding: 0 2rem 2rem;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .catalog-layout{
        flex-direction: column;
        padding: 0 2rem;
    }

    .catalog-sidebar{
        width: 100%;
        position: static;
    }

    .catalog-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .catalog-title{
        font-size: 4.5rem;
    }

    .product-container{
        padding: 3rem 2rem 0;
    }

    .product-main-desc{
        flex-direction: column;
        gap: 3rem;
        padding-bottom: 4rem;
    }

    .product-gallery{
        flex: none;
        width: 100%;
    }

    .product-title{
        font-size: 3.4rem;
    }

    .product-price{
        font-size: 2.8rem;
    }

    .product-actions{
        height: 5rem;
    }

    .qty-btn{
        width: 4rem;
    }

    .add-to-cart-btn{
        font-size: 1.5rem;
    }

    .tabs-nav{
        display: none;
    }

    .tab-content{
        padding: 0;
    }

    .tab-accordion-header{
        display: flex;
        width: 100%;
        padding: 1.5rem 2rem;
        background: #f0f0f0;
        border: none;
        border-bottom: 1px solid #e0e0e0;
        text-align: left;
        font-size: 1.5rem;
        color: #888;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
        transition: background 0.15s, color 0.15s;
    }

    .tab-accordion-header.active{
        background: #fff;
        color: #1a1a1a;
    }

    .tab-accordion-chevron{
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-0.3rem);
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }

    .tab-accordion-header.active .tab-accordion-chevron{
        transform: rotate(-135deg) translateY(0.15rem);
    }

    .tab-panel{
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .tab-panel.active{
        display: block;
        padding: 2rem;
        max-height: 9999px;
    }

    .recomendations-title{
        font-size: 3.4rem;
    }

    .recomendations-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .rec-card-name{
        font-size: 1.8rem;
    }

    .product-card-banner{
        display: none;
    }
    .cart-table-header{
        display: none;
    }

    .cart-item{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 1.2rem 1rem;
        padding: 2rem 3rem 2rem 0;
    }

    .cart-item-product{
        grid-column: 1 / -1;
    }

    .cart-item-price{
        grid-column: 1;
    }

    .cart-item-qty{
        grid-column: 2;
        justify-content: flex-start;
    }

    .cart-item-total{
        grid-column: 1 / -1;
        text-align: left;
    }

    .cart-subtotal-row{
        gap: 3rem;
    }

    .cart-bottom{
        flex-direction: column;
    }

    .cart-checkout-area{
        width: 100%;
        min-width: unset;
        max-width: unset;
        align-items: stretch;
    }

    .cart-tax-note,
    .cart-continue-shopping{
        text-align: left;
    }

    /* Profile page mobile */

    .header-profile{
        max-width: 100% !important;
        padding: 1.4rem 2.3rem;
        position: relative;
    }

    .profile-swithers{
        display: none;
    }

    .profile-sponser-logo{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-profile{
        max-width: 100% !important;
        padding: 0 2.3rem;
    }

    .footer-inner{
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.6rem 0;
    }

    .profile-main-section{
        max-width: 100% !important;
        padding: 2.4rem 2rem 6rem;
    }

    .profile-heading{
        font-size: 2.8rem;
    }

    .profile-signout-area{
        flex-direction: column;
        gap: 1.4rem;
    }

    .profile-signout-btn{
        width: 100%;
        border-radius: 1rem;
        padding: 1.6rem;
        text-align: center;
    }

    .profile-signout-all{
        text-align: center;
        display: block;
    }

    /* Profile mobile menu — slides from left */

    .profile-mobile-menu{
        display: flex !important;
        width: 82%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .profile-mobile-menu.open{
        transform: translateX(0);
    }

    .profile-mobile-menu .mobile-menu-header{
        position: relative;
        padding: 1.4rem 2.3rem;
        min-height: 5rem;
    }

    .profile-menu-logo{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 11.2rem;
        height: auto;
    }

    .mobile-profile-nav{
        padding: 0.8rem 0;
    }

    .mobile-profile-nav ul{
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-profile-nav li{
        padding: 1.2rem 2.3rem;
    }

    .mobile-profile-nav a{
        font-size: 1.6rem;
        color: #1a1a1a;
        text-decoration: none;
    }

    .profile-nav-active a{
        text-decoration: underline;
    }
}

@media (min-width: 801px){
    .mobile-menu{
        display: none !important;
    }
}

/**** cart page ****/
.product__list{width:100%;border-collapse:collapse;}
.product__list tr td{border-bottom:1px solid #b9b9b9;padding:2rem 0;}
.product-img img{max-width:150px;}
.product-card__title{font-size:2.2rem;color:#d0043c;text-decoration:none;margin-bottom:1rem;display:inline-block;}

.cart-page .btn-close{font-size:2.8rem;color:#b9b9b9;cursor:pointer;}
.cart-page .text-right{text-align:right;}
.cart-page .total td{font-size:2.1rem;font-weight:600;}
.cart-page .total td .total_count{font-size:2.1rem;font-weight:600;}
.cart-page .cd-checkout{margin-left:auto;display:inline-block;width:auto;}




.form {
  display: grid;
  gap: 2rem;
  font-family: var(--fontDefault);
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem 2rem;
  font-size: var(--font-size-md);
  font-weight: 500;
  position: relative;
}

.page-auth .form {
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 4rem 6rem;
  border: 1px solid #e5e5e5;
  margin-top: 4rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.page-auth .form-actions {
  grid-column: span 1;
}

.popup .form {
  padding-left: 0;
  column-gap: 6.2rem;
  row-gap: 5rem;
}

.popup {
  padding: 10rem 14.5rem;
}

.popup .form .form-field {
  padding-inline-start: 0 !important
}

.popup .form .form-label {
  left: 0 !important;
}

.popup .note {
  max-width: 70%;
}

.form .form-row{position: relative;margin-bottom:2rem;}
.checkbox{display: flex;align-items: center;gap: 1rem;}
.form .form-row.checkbox{align-items:flex-start;}
.form .form-row.checkbox input{margin-top:3px;}

.cart-container{display:flex;max-width:1200px;margin:0 auto;gap:5rem;align-items:flex-start;}
.cart-container .container-flex{display:flex;flex-wrap:wrap;justify-content:space-between;}
.cart-container .form-row{width:calc(50% - 1rem);}
.cart-container .form-row.full-width{width:100%;}

.cart-total{
	min-width:40%;
	width:40%;
  padding: 4rem;
  position: sticky;
  top: 9rem;
  box-shadow: rgba(0, 0, 0, 0.1) -1px 4px 12px;
}

.cart-total .product__cart-total {
  padding: 0;
  flex-direction: column;
}

.checkout .cart-total p{margin-bottom: 0;}

.cart-total .flex-row {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px dashed #ddd;
  font-size:1.6rem;
  align-items: center;
  gap:2rem;
}

.cart-total .flex-row .product-price{font-size:1.6rem;white-space:nowrap;}

.cart-total .none{display:none;}

.cart-total .product-price{white-space:nowrap;}

.cart-total .order-total {
  margin-bottom: 3rem;
  border-bottom: 2px solid var(--color-red);
}

#promo-code {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
}

#promo-code h5{margin-bottom: 10px;font-size:14px;}

#promo-code div {
  position: relative;
}

#promo-code input {
  padding:1rem 1.5rem;
  width: 100%;
  display: block;
  border: 1px solid #efefef;
  background: #efefef;
}

#promo-code button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 2rem;
  z-index: 1;
  overflow: hidden;
}

#promo-code button:hover {
  opacity: 0.7;
}

.form-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--font-size-md);
  color: var(--color-grey);
  font-weight: inherit;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease, font-size 0.3s ease;
  transform: translateY(0);
  opacity: 1;
  z-index: 1;
}

.form-row.focused .form-label,
.form-row.filled .form-label {
  transform: translateY(-100%);
  opacity: 0;
  font-size: 1.2rem;
}

.form .dotsquare {
  position: absolute;
  left: 0;
  top: 0;
}

.form .vertical-text {
  position: absolute;
  left: 1.3rem;
  color: #666666;
  bottom: 0;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}

.form p{margin-bottom:2rem;}

.form .form-row:nth-child(even) .form-label {
  left: 9rem;
}

.form-field[type="date"] {
  color: transparent;
}

.form-field[type="date"]::-webkit-datetime-edit {
  color: transparent;
}

.form-row.focused .form-field[type="date"],
.form-row.filled .form-field[type="date"] {
  color: inherit;
}

.form-row.focused .form-field[type="date"]::-webkit-datetime-edit,
.form-row.filled .form-field[type="date"]::-webkit-datetime-edit {
  color: inherit;
}

.form h3{font-size:2.4rem;margin-bottom:1.5rem;}
.form table{width:100%;border-collapse:collapse;margin-bottom:2rem;}
.form table th{font-size:1.6rem;text-align:left;padding-bottom:1rem;border-bottom:1px solid #e5e5e5;}
.form table th:last-child{text-align:right;}
.form-row label{margin-bottom:1rem;display:block;font-size:1.6rem;font-weight:600;}

.form-field {
  padding: 1rem 1.5rem;
  width: 100%;
  background: transparent;
  border: none;
  border: 1px solid #e5e5e5;
  outline: none;
  font-weight: inherit;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.file-label {
  cursor: pointer;
  flex-shrink: 0;
}

.file-hint {
  color: var(--color-grey);
  font-size: var(--font-size-sm);
  max-width: 32rem;
  line-height: 1.6;
}

#formSection.section_intro .title-xxl {
  margin-bottom: 3.6rem;
}

.form .note {
  margin-top: 12px;
  font-size: 1.2rem;
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #d0043c;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration:none;
}

.error .form-field {
  border-color: var(--color-red);
  color: var(--color-red);
  position: relative;
}

.errorMessage {
  display: block;
  color: #d0043c;
  font-size: 12px;
  margin-top: 5px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
}

.checkbox a {
  text-decoration: underline;
  color: var(--color-blue);
}

.form-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.form-checkbox+label {
  display: inline-flex;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  align-items: center;
}

.form-checkbox+label::before {
  content: "";
  display: inline-block;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid var(--color-red);
  margin-right: 2rem;
  background-repeat: no-repeat;
  align-self: stretch;
  background-position: center center;
  transition: background-color 0.3s ease;
}

.form-checkbox:checked+label::before {
  background-color: var(--color-red);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13l5 5L20 7' stroke='%23fff' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: 2rem 2rem;
}

.form-checkbox:disabled+label::before {
  background-color: #fff;
}

.profile-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.profile-page-head .page__title {
  margin: 0;
}

.page__title {
  font-weight: 700;
}

.profile-logout-btn {
  flex-shrink: 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.profile-card {
  background: var(--color-white);
  border: 1px solid #e5e5e5;
  padding: 4rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.profile-card__title {
  margin-top: 0;
  font-size: 1.6rem;
}

.profile-email {
  margin: 0;
  font-size: 1.4rem;
}

.sidebar__container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.sidebar__nav {
  width: 30rem;
  position: relative;
  top: 0;
  padding-right: 3rem;
}


.side__content {
  flex: 1;
  padding: 4rem;
  box-shadow: rgb(0 0 0 / 10%) -1px 4px 12px;
}

.side__content h2 {
  margin-bottom: 2.5rem;
}

.profile__nav {
  box-shadow: rgb(0 0 0 / 10%) -1px 4px 12px;
  padding: 0;
  margin-right: 6rem;
}

.profile__link {
  position: relative;
  width: 100%;
  padding: 2rem 3rem;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
	display:block;
}

.profile__link.active {
  color: #1c1c1c;
}

.profile__link.active::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: var(--color-red);
  top: 0;
  left: 0;
}

.profile__link.logout {
  color: #ec1b40;
}

.account {
  margin-bottom: 10rem;
}

.account .table {
  font-size: 1.4rem;width:100%;
}

.account .table th {
  background-color: #f1f1f1;
  letter-spacing: 0;
  font-size: 1.2rem;
}

.account .table th,
.account .table td {
  padding: 1.5rem;
  vertical-align: top;
}

.account .table td {
  border-bottom: 1px solid #efefef;
}

.account .table td .product__card p {
  margin-bottom: 10px;
}

.account .table td .product__card p:last-child {
  margin-bottom: 0px;
}

.account .product-card__price {
  margin-bottom: 0;
}

.order-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 4rem;
}