@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
:root{
    --primary_color: #001b36;
    --secondary_color: #36a9e2;
    --third_color: #4f6600;
    --bg_white: #eef3fe;
    --white_off: #f2e1c7;
    --white_color: #fefefe;
    --dark_color: #3b4848;
    --info_color: #a4fcff;
    --danger_color: #ad363b;
    --bg_danger: #fed9d5;
    --limon_color: #b7db4b;
    --linear_bg: linear-gradient(131deg, #36a9e2, #7ee2e9);
    --border_color: #eee;
    --raduis: 12px;
    --primary_font:  "Figtree", sans-serif;
    --transition: 0.3s ease;
    --border_hr: #bac8c8;

    /* footer */
    --footer_bg: #eaf1ff;
    --footer_text: #4b5b6a;
    /* limited time promo section */
    --limited_section_bg_1: #064b66;
    --limited_section_bg_2: #001b36;

    --limited_teal_bg_1: #084a59;
    --limited_teal_bg_2: #002b41;
    --limited_green_bg_1: #102a2b;
    --limited_green_bg_2: #2d4825;
    --limited_purple_bg_1: #4a1e3a;
    --limited_purple_bg_2: #220b14;

    --limited_badge_teal_bg: rgba(156, 223, 47, 0.18);
    --limited_badge_teal_text: #b9ff57;
    --limited_badge_green_bg: rgba(126, 255, 186, 0.16);
    --limited_badge_green_text: #d7ffe7;
    --limited_badge_purple_bg: rgba(255, 124, 176, 0.18);
    --limited_badge_purple_text: #ffc2dc;

    --limited_purple_btn_text: #4a1e3a;
}

*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: var(--primary_font);
    transition: var(--transition);
}
ul , ol{
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none !important;
}
.link_abs{
    position: absolute;
    inset: 0;
}
.hr_bage{
    height: 1px;
    width: 100%;
    border: 0;
    background: var(--footer_text);
    margin: 30px 0;
}
.navbar-brand{
    margin: 0;
}
section,footer{
    position: relative;
}
.container{
    max-width: 1500px !important;
}

.btn_primary , 
.secondary_btn{
    padding: 12px 30px;
    text-transform: uppercase;
    border-radius: var(--raduis);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--white_color) !important;
    /* margin: 5px 10px; */
    transition: var(--transition);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.btn_primary::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--linear_bg);
    z-index: -1;
}
.secondary_btn{
    background: var(--white_color) !important;
    color: var(--secondary_color) !important;
}
.btn_primary:hover,
.secondary_btn:hover{
    transform: translateY(-8px);
}




.logo_site{
    width: 80px;
}
#navbar{
    background: var(--white_off);
    padding: 0;
}
.navbar-brand{
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -5px;
}

#nav_item{
    font-weight: 15px;
    text-transform: uppercase;
    color: var(--primary_color);
    font-weight: 700;
    padding: 5px 0;
    position: relative;
    letter-spacing: -1px;
}
#nav_item::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 3px;
    width: 0;
    transition: var(--transition);
    background: var(--secondary_color);
}
#nav_item.active{
    color: var(--secondary_color);
}
#nav_item:hover{
    color: var(--secondary_color);
}
#nav_item.active::before,
#nav_item:hover::before{
    width: 100%;
}


.nav_icon{
    outline: 0;
    border: 0;
    text-decoration: none;
    color: var(--secondary_color);
    font-size: 20px;
    line-height: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    width: 30px;
    height: 30px;
    position: relative;
    transition: var(--transition);
}
.nav_icon:hover{
    transform: translateY(-5px);
    color: var(--primary_color);
}
.badge_count{
    position: absolute;
    display: inline-flex;
    top: -3px;
    right: -3px;
    color: var(--white_color);
    background: var(--secondary_color);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 9px;
    font-weight: 800;
}

.dropdown-menu.drop_account{
    border: 1px solid var(--border_color);
    background: var(--white_color);
    border-radius: 0 0 calc(var(--raduis) * 0.5) calc(var(--raduis) * 0.5);
    padding: 0;
    left: 50% !important;
    transform: translateX(-50%);
    top: 55px;
    overflow: hidden;
    position: absolute;
}
.dropdown-menu{
    border-top: 0 !important;
}
.dropdown-item{
    color: var(--primary_color);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid var(--border_color);
    padding: 8px;
}
.dropdown-menu li:last-child .dropdown-item{
    border: 0;
}
.dropdown-item:hover{
    background: var(--white_off);
    color: var(--secondary_color);
}
.dropdown-item.logout_text{
    color: var(--danger_color);
}
.dropdown-item.logout_text:hover{
    background: var(--bg_danger);
}
.dropdown-item i{
    line-height: 0.3rem;
    color: var(--secondary_color);
}
.dropdown-item.logout_text i{
    color: var(--danger_color);
}


.popup_modal{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    opacity: 0;
    visibility: hidden;
}
.popup_modal::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #d3e2ff98;
    z-index: -1;
    cursor: url('../Img/cursor_x.png'), auto;
}
.search_modal.show{
    opacity: 1;
    visibility: visible;
}
.widget_modalsearch{
    border-radius: var(--raduis);
    background: var(--white_color);
    padding: 20px;
    max-width: 550px ;
    width: 100%;
}
.modal_title{
    color: var(--primary_color);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
.btn_closeModal_result{
    font-size: 16px;
    color: var(--danger_color);
    line-height: 0.3rem;
    background: transparent;
    border: 0;
    outline: 0  ;
}
.form_modal{
    position: relative;
    border-radius: var(--raduis);
}
.form_modal .form-control{
    box-shadow: none !important;
    border: 1px solid var(--border_color);
    height: 50px;
    font-size: 15PX;
    font-weight: 600;
    color: var(--primary_color);
    padding-right: 60px;
}
.form_modal .form-control:focus{
    border-color: var(--secondary_color);
}
.form_modal .form-control:focus + button{
    border-color: var(--secondary_color);
}
.btn_modalSearch{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: 0;
    outline: 0;
    color: var(--secondary_color);
    background: transparent;
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0.3rem;
    border-left: 1px solid var(--border_color);
}
.result_modal{
    margin: 15px 0;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border_color);
    border-radius: var(--raduis);
    display: none;
}
.resultModal_item:not(:last-child){
    border-bottom: 1px solid var(--border_color);
}
.resultModal_item{
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}
.no_result{
    display: none;
    color: var(--danger_color);
    cursor: no-drop;
    background: var(--bg_danger);
}
.resultModal_item:hover{
    background: var(--bg_white);
}
.resultModal_item img{
    width: 50px;
    height: 50px;
    border-radius: calc(var(--raduis) * 0.5);
    border: 1px solid var(--border_color);
    padding: 2px;
}
.resultModal_info{
    display: flex;
    flex-direction: column;
}
.result_title{
    font-weight: 600;
    font-size: 14px;
    color: var(--primary_color);
    display: inline-block;
    margin-bottom: 5px;
}
.price_result{
    font-weight: 700;
    font-size: 14px;
    color: var(--primary_color);
}
.price_result sup{
    font-size: 15px;
    color: var(--secondary_color);
}



.hero_section{
    min-height: 90vh;
    padding: 60px 0 80px;
    align-content: center;
    background: var(--bg_white);
    transition: var(--transition);
}
.hero_section *{
    transition: var(--transition);
}
.image_frame{
    padding: 0 50px;
    background: var(--white_color);
    max-height: 700px;
    height: 100%;
    position: relative;
}
.image_frame img{
    width: 100%;
    height: 100%;
}
.blur_card{
    position: absolute;
    padding: 30px;
    background: #ffffff8f;
    backdrop-filter: blur(5px);
    bottom: -10px;
    left: -50px;
    max-width: 350px;
    border-radius: 8px;
}
.subtitle_blur{
    color: var(--third_color);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    margin-bottom: 8px;
}
.subtitle_blur i{
    line-height: 0.3rem;
    font-size: 20px;
    color: var(--secondary_color);
}
.hero_badge{
    background: var(--info_color);
    color: var(--secondary_color);
    font-size: 14px;
    font-weight: 800;
    display: inline-block;
    border-radius: calc(var(--raduis) * 0.2);
    padding: 5px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.blur_title{
    text-transform: capitalize;
    color: var(--primary_color);
    font-size: 19px;
    font-weight: 800;
}
.blur_link{
    color: var(--secondary_color);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: underline 3px solid var(--secondary_color) !important;
}
.blur_link:hover{
    color: var(--third_color);
}
.sm_htHero{
    background: var(--border_hr);
    width: 70px;
    height: 1px;
    display: inline-block;
}
.title_hero{
    color: var(--primary_color);
    font-size: 120px;
    font-weight: 800;
    line-height: 90%;
}
.title_hero span{
    color: var(--secondary_color);
    display: block;
}
.hero_des,
.join_movement_text{
    color: var(--dark_color);
    font-size: 20px;
    font-weight: 500;
}


.category_section{
    padding: 80px 0;
    background: var(--white_off);
}
.swiper_category{
    margin-bottom: 60px;
}
.card_category{
    flex-grow: 1;
    max-width: 200px;
    min-width: 200px;
    /* max-height: 190px; */
    border-radius: calc(var(--raduis) * 1.5);
    border: 5px solid var(--white_color);
    background: var(--white_color);
    padding: 1px;
    overflow: hidden;
}
.card_category img{
    width: 100%;
    height: 100%;
    border-radius: calc(var(--raduis) * 1.2);
    object-fit: cover;
}

.card_category_col{
    overflow: hidden;
    border-radius: var(--raduis);
    position: relative;
}
.card_category_col::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#00060cad , #ffffff00);
    z-index: 2;
}
.card_category_col img{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.category_colInfo{
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
}
.category_title{
    font-size: 60px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--white_color);
}
.category_title.sm{
    font-size: 35px;
    font-weight: 700;
}

.card_category_col .secondary_btn{
    color: var(--primary_color) !important;
    font-weight: 800;
}
.card_category_col .secondary_btn.explore{
    background: #ffffff3b !important;
    backdrop-filter: blur(15px);
    color: var(--white_color) !important;
    border: 1px solid var(--bg_white);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
}

/* limited time (Exclusive Member Deals) */
.limited_section{
    padding: 72px 0;
    background: var(--primary_color);
}

.limited_container{
    padding: 0;
}

.limited_header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 36px;
    padding: 0 10px;
    flex-wrap: wrap;
}

.limited_heading{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.limited_badge{
    display: inline-flex;
    width: fit-content;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--info_color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.limited_title{
    margin: 0;
    color: var(--white_color);
    font-size: 50px;
    line-height: 1;
    font-weight: 700;
}

.limited_viewAll{
    color: var(--info_color);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding-top: 10px;
    white-space: nowrap;
    border-bottom: 1px solid var(--info_color);
}

.limited_viewAll:hover{
    color: var(--white_color);
}

.limited_offers{
    margin-top: 10px;
}

.limited_card{
    border-radius: calc(var(--raduis) * 0.8);
    padding: 40px;
    color: var(--white_color);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 55px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
.card_blur_limited{
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(25px);
    z-index: 1;
}
.limited_card::before{
    content: "";
    position: absolute;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
    z-index: 0;
    pointer-events: none;
    width: 200px;
    height: 200px;
    bottom: 0%;
    right: 0%;
    transform: translate(20%,20%);
    border-radius: 50%;
    opacity: 0.6;
}

.limited_card > *{
    position: relative;
    z-index: 1;
}

.limited_card--teal{
    background: #002b41dc;
    border: 1px solid #134053;
    /* background: linear-gradient(180deg, var(--limited_teal_bg_2), var(--limited_teal_bg_1)); */
}
.limited_card--teal::before{
    background: #084a59;
    box-shadow: 0px 0px 20px 10px #084a59e7,
                0px 0px 30px 20px #084a59b9,
                0px 0px 50px 30px #084a5981;
}

.limited_card--green{
    border: 1px solid var(--third_color);
    /* background: linear-gradient(310deg, var(--limited_green_bg_2) 5%, var(--limited_green_bg_1) 39%); */
    background: #102a2bdc;
}
.limited_card--green::before{
    background: #2d4825;
    box-shadow: 0px 0px 20px 10px #2d4825dc,
                0px 0px 30px 20px #2d4825dc,
                0px 0px 50px 30px #2d4825dc;
}
.limited_card--purple{
    border: 1px solid var(--limited_purple_bg_1);
    /* background: linear-gradient(310deg, var(--limited_green_bg_2) 5%, var(--limited_green_bg_1) 39%); */
    background: #35111fdc;
    /* background: linear-gradient(180deg, var(--limited_purple_bg_1), var(--limited_purple_bg_2)); */
}
.limited_card--purple::before{
    background: #5f274a;
    box-shadow: 0px 0px 20px 10px #4a1e3adc,
                0px 0px 30px 20px #4a1e3adc,
                0px 0px 50px 30px #4a1e3adc;
}
.limited_card_badge{
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.limited_card_badge--teal{
    background: var(--secondary_color);
    color: var(--white_color);
}

.limited_card_badge--green{
    background: var(--limon_color);
    color: var(--third_color);
}

.limited_card_badge--purple{
    background: var(--bg_danger);
    color: var(--danger_color);
}

.limited_card_title{
    margin: 0;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.12;
}

.limited_card_title span{
    display: inline-block;
}

.limited_card_text{
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--bg_white);
    line-height: 1.5;
}
.limited_card .secondary_btn{
    color: var(--primary_color) !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}
@media (max-width: 991px) {
    .limited_title{
        font-size: 40px;
    }
  
   
}

@media (max-width: 567px) {
    .limited_title{
        font-size: 34px;
    }
    
}



.products_tabs_section{
    padding: 100px 0;
}
.listed_productsTabsCate{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--border_hr);
}
.btn_tabProduct_cate{
    color: var(--dark_color);
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 700;
    border-bottom: 5px solid transparent;
    border-radius: 0 !important;
}
.btn_tabProduct_cate.active,
.btn_tabProduct_cate:hover{
    color: var(--primary_color) !important;
    background: transparent !important;
    border-color: var(--info_color);
}
.card_productTab{
    border-radius: var(--raduis);
    overflow: hidden;
    position: relative;
}
.card_productTab .link_abs{
    z-index: 3;
}
.product_image{
    position: relative;
    overflow: hidden;
}
.product_image img{
    transition: var(--transition);
}
.card_productTab:hover .product_image img{
    transform: scale(1.1);
}

.same_title{
    color: var(--primary_color);
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: -1px;
    font-weight: 800;
    border-bottom: 5px solid transparent;
    border-radius: 0 !important;
}
.card_productTab:hover .product_title{
    color: var(--secondary_color);
}

.before_desscount{
    display: block;
    color: var(--danger_color);
    font-size: 15px;
    font-weight: 600;
    position: relative;
    max-width: max-content;
}
.before_desscount::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--danger_color);
}
.product_cate_brand{
    color: var(--dark_color);
    font-size: 14px;
    font-weight: 600;
}

.badge_product{
    padding: 5px 15px;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 13px;
    font-weight: 700;
    border-radius: calc(var(--raduis) * 0.5);
    z-index: 2;
}
.badge_product.new{
    color: var(--secondary_color);
    background: var(--info_color);
}
.badge_product.off{
    color: var(--danger_color);
    background: var(--bg_danger);
}
.cardbody_product{
    padding-left: 10px !important;
    padding-right: 10px !important;
}



.mosttrending_section{
    padding: 100px 0;
    background: var(--bg_white);
}
.badge_header{
    color: var(--secondary_color);
    display: inline-flex;
    width: fit-content;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.header_title,
.join_movement_title{
    margin: 0;
    color: var(--primary_color);
    font-size: 50px;
    line-height: 1;
    font-weight: 800;
}
.header_title.sm{
    font-size: 30px;
}
.join_movement_title{
    font-size: 60px;
}
.btn_swiperpro{
    position: relative;
    color: var(--primary_color);
    border: 1px solid var(--border_hr);
    border-radius: var(--raduis);
    width: 50px;
    height: 50px;
    font-size: 30px;
    line-height: 0.3rem;
    inset: 0;
    margin: 0;
    transition: var(--transition);
}
.btn_swiperpro::after,
.btn_swiperpro::before{
    display: none;
}
.btn_swiperpro:hover{
    color: var(--white_color);
    background: var(--primary_color);
}

.join_movementSection{
    background: var(--white_off);
    padding: 100px 0;
    overflow: hidden;
}

.join_movementSection::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 400%;
    background: #36a9e213;
    pointer-events: none;
    transform: translateY(-50%) translateX(40%) rotate(15deg);
    z-index: 1;
}
.join_movement_content{
    position: relative;
    z-index: 2;
}
.form_movement{
    position: relative;
    margin-top: 40px;
}
.form_movement .form-control{
    background: var(--white_color);
    border-radius: var(--raduis);
    border: 1px solid transparent;
    height: 65px;
    font-size: 18px;
    font-weight: 500;
    color: var(--dark_color);
    box-shadow: none !important;
    padding: 10px 130px 10px 30px;
}
.form_movement .form-control:focus{
    border: 1px solid var(--border_hr);
}
.form_movement .btn_primary{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* join movement images */
.movement_imagesWrap{
    position: relative;
    padding: 14px;
    border-radius: calc(var(--raduis) * 1.4);
}



.movement_imagesGrid{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.movement_imgCard{
    border-radius: calc(var(--raduis) * 0.9);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    background: #ffffff80;
}

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

@media (max-width: 991px) {
    .movement_imagesWrap{
        margin-top: 30px;
    }
}

/* footer */
.site_footer{
    background: var(--footer_bg);
    padding: 70px 0 30px;
}

.footer_top{
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(0, 27, 54, 0.08);
}

.footer_logo{
    margin: 0 0 25px;
    color: var(--primary_color);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.footer_text{
    margin: 0;
    color: var(--footer_text);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
    max-width: 320px;
}

.footer_text.sm{
    max-width: none;
}

.footer_social{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.footer_socialLink{
    width: 40px;
    height: 40px;
    border-radius: var(--raduis);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary_color);
    background: rgba(0, 27, 54, 0.06);
}

.footer_socialLink:hover{
    background: rgba(0, 105, 107, 0.14);
    color: var(--secondary_color);
    transform: translateY(-4px);
}

.footer_title{
    margin: 0 0 25px;
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer_list{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer_link{
    color: var(--footer_text);
    font-size: 15px;
    font-weight: 600;
}

.footer_link:hover{
    color: var(--secondary_color);
    text-decoration: underline !important;
}

.footer_location{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary_color);
    font-weight: 700;
    font-size: 14px;
    /* letter-spacing: -1px; */
    text-transform: uppercase;
}

.footer_location i{
    color: var(--secondary_color);
}

.footer_bottom{
    padding-top: 22px;
    text-align: center;
}

.footer_copy{
    margin: 0;
    color: var(--dark_color);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}



.products_page{
    padding: 60px 0;
    background: var(--bg_white);
}
.products_page .container{
    max-width: 1700px !important;
}

/* products filters sidebar */
.filters_sidebar{
    background: rgba(238, 243, 254, 0.6);
    border: 1px solid rgba(0, 27, 54, 0.06);
    border-radius: calc(var(--raduis) * 1.1);
    padding: 26px 22px;
    position: sticky;
    top: 140px;
}

.filter_block + .filter_block{
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 27, 54, 0.06);
}

.filter_title{
    margin: 0 0 14px;
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.filter_list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filter_item{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.filter_item input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter_name{
    color: rgba(0, 27, 54, 0.72);
    font-size: 18px;
    font-weight: 600;
}

.filter_item.active .filter_name,
.filter_item:has(input:checked) .filter_name{
    color: var(--primary_color);
    text-decoration: underline 1px solid var(--primary_color);
    text-underline-offset: 6px;
}

.filter_count{
    color: rgba(0, 27, 54, 0.45);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.size_grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.size_chip{
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid var(--border_hr);
    background: transparent;
    padding: 10px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--primary_color);
    user-select: none;
}

.size_chip input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.size_chip.is-active,
.size_chip:has(input:checked){
    background: var(--primary_color);
    border-color: var(--primary_color);
    color: var(--white_color);
}

.color_row{
    display: flex;
    align-items: center;
    gap: 14px;
}

.color_dot{
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: calc(var(--raduis) * 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.color_dot input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color_dot span{
    width: 26px;
    height: 26px;
    border-radius: calc(var(--raduis) * 0.7);
    background: var(--dot);
    border: 2px solid rgba(0, 27, 54, 0.18);
}

.color_dot:has(input:checked){
    box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 0 5px rgba(0,27,54,0.18);
    border-radius: calc(var(--raduis) * 0.7);
}

/* price range slider (double thumb) */
.price_range{
    position: relative;
    padding-top: 8px;
}

.range_track{
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 27, 54, 0.12);
    overflow: hidden;
    margin: 14px 2px 18px;
}

.range_fill{
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 105, 107, 0.28);
}

.range_input{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 10px;
    margin: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 30px;
}

.range_input::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--primary_color);
    border: 3px solid var(--white_color);
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
    margin-top: -8px;
}

.range_input::-moz-range-thumb{
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--primary_color);
    border: 3px solid var(--white_color);
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
    margin-top: -8px;
}

.range_input::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: transparent;
}
.range_input::-moz-range-track{
    height: 4px;
    background: transparent;
}

.range_values{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--dark_color);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 991px){
    .filters_sidebar{
        position: static;
        margin-bottom: 18px;
    }
}

/* product details page */
.product_details_page{
    padding: 50px 0;
    background: var(--bg_white);
}
.product_details_page .container{
    max-width: 1700px !important;
}

.pd_breadcrumb{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--dark_color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.pd_breadcrumb_link{
    color: var(--dark_color);
}
.pd_breadcrumb_link:hover{
    color: var(--secondary_color);
}
.pd_breadcrumb_sep{
    opacity: 0.7;
}
.pd_breadcrumb_current{
    color: var(--dark_color);
}

.pd_gallery{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pd_mainImage{
    border-radius: calc(var(--raduis) * 1.2);
    overflow: hidden;
    background: var(--white_color);
    border: 1px solid rgba(0, 27, 54, 0.06);
}
.pd_mainImage img{
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}
.pd_thumb{
    border-radius: calc(var(--raduis) * 1.1);
    overflow: hidden;
    background: var(--white_color);
    border: 1px solid rgba(0, 27, 54, 0.06);
}
.pd_thumb img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.pd_panel{
    background: rgba(238, 243, 254, 0.65);
    border: 1px solid rgba(0, 27, 54, 0.06);
    border-radius: calc(var(--raduis) * 1.2);
    padding: 28px 26px;
}

.pd_topRow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.pd_collectionBadge{
    color: var(--third_color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pd_rating{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: darkblue;
    font-weight: 600;
    font-size: 15px;
}
.pd_stars{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--secondary_color);
}
.pd_reviews{
    color: var(--dark_color);
}

.pd_title{
    margin: 0 0 10px;
    color: var(--primary_color);
    font-size: 35px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}
.pd_price{
    color: var(--secondary_color);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 18px;
}

.pd_option{
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(0, 27, 54, 0.08);
}
.pd_optionHead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.pd_optionLabel{
    color: rgba(0, 27, 54, 0.6);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.pd_optionValue{
    color: rgba(0, 27, 54, 0.75);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.pd_sizeGuide{
    color: var(--secondary_color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: underline 2px solid rgba(0, 105, 107, 0.35) !important;
    text-underline-offset: 4px;
}
.pd_sizeGuide:hover{
    color: var(--primary_color);
}

.pd_colors{
    display: flex;
    align-items: center;
    gap: 10px;
}
.pd_colorDot{
    width: 28px;
    height: 28px;
    border-radius: calc(var(--raduis) * 0.5);
    border: 2px solid rgba(0, 27, 54, 0.16);
    background: var(--dot);
    cursor: pointer;
    position: relative;
}
.pd_colorDot.is-active{
    box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 0 0 5px rgba(0,27,54,0.18);
}
.pd_colorDot.is-active::after{
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: calc(var(--raduis) * 0.5);
    border: 2px solid rgba(255,255,255,0.75);
}

.pd_sizes{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.pd_sizeChip{
    border: 2px solid var(--border_hr);
    background: transparent;
    color: var(--primary_color);
    border-radius: 4px;
    padding: 13px 0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.pd_sizeChip.is-active{
    background: var(--primary_color);
    border-color: var(--primary_color);
    color: var(--white_color);
}
.pd_sizeChip.is-disabled{
    opacity: 0.35;
    cursor: not-allowed;
}

.pd_actions{
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 27, 54, 0.08);
}

.pd_wishBtn{
    width: 52px;
    height: 52px;
    border-radius: calc(var(--raduis) * 0.8);
    background: transparent;
    border: 2px solid rgba(0, 27, 54, 0.16);
    color: var(--primary_color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd_wishBtn i{
    line-height: 0.3rem;
}
.pd_wishBtn:hover{
    border-color: rgba(0, 105, 107, 0.45);
    color: var(--secondary_color);
    transform: translateY(-4px);
}

.pd_tabs{
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 27, 54, 0.08);
}
.pd_tabList{
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0, 27, 54, 0.08);
    padding-bottom: 0;
}
.pd_tab{
    border: 0;
    background: transparent;
    color: var(--dark_color);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0 0 10px;
    position: relative;
}
.pd_tab.is-active{
    color: var(--primary_color);
}
.pd_tab.is-active::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: rgba(0, 27, 54, 0.35);
}
.pd_panelBody{
    display: none;
    padding-top: 14px;
}
.pd_panelBody.is-active{
    display: block;
}
.pd_paragraph{
    color: rgba(0, 27, 54, 0.65);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
    margin: 0 0 12px;
}
.pd_bullets{
    margin: 0;
    color: rgba(0, 27, 54, 0.7);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
}

.pd_benefits{
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 27, 54, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pd_benefit{
    flex-grow: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--primary_color);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.pd_benefit i{
    font-size: 18px;
    color: var(--secondary_color);
}

@media (max-width: 991px){
    .pd_mainImage img{
        height: 420px;
    }
    .pd_thumb img{
        height: 200px;
    }
    .pd_title{
        font-size: 36px;
    }
}


.sort_form{
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white_color);
    padding: 10px 20px;
    border-radius: var(--raduis);
    cursor: pointer;
}
.lable_sort{
    white-space: nowrap;
    color: var(--dark_color);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
}
.sort_form .form-select{
    border: 0 !important;
    box-shadow: none !important;
    color: var(--primary_color);
    cursor: pointer;
    font-size: 19px;
    font-weight: 600;
}

.pagination_list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 35px 0 10px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--border_hr);
}
.pagination_item,
.pagination_btn{
    min-width: 44px;
    height: 44px;
    border-radius: var(--raduis);
    border: 1px solid rgba(0, 27, 54, 0.12);
    background: var(--white_color);
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.pagination_item.is-active{
    background: var(--secondary_color);
    color: var(--white_color) !important;
    border-color: var(--secondary_color);
}
.pagination_item:hover,
.pagination_btn:hover{
    transform: translateY(-3px);
    border-color: var(--secondary_color);
    color: var(--secondary_color);
}
.pagination_btn{
    padding: 0;
    width: 44px;
}
.pagination_btn--arrow{
    background: var(--bg_white);
}
.pagination_btn--arrow i{
    font-size: 0.9rem;
}

/* cart page */
.cart_page{
    padding: 70px 0 80px;
    background: var(--bg_white);
}

.cart_grid{
    align-items: flex-start;
}

.cart_leftCard{
    background: #f4f8ff;
    border-radius: calc(var(--raduis) * 1.3);
    padding: 34px 26px;
    box-shadow: 0 20px 55px rgba(0,0,0,0.05);
}

.cart_header{
    margin-bottom: 20px;
}

.cart_title{
    color: var(--primary_color);
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.6px;
}

.cart_subtitle{
    margin: 6px 0 0;
    color: var(--dark_color);
    font-size: 15px;
    font-weight: 600;
}

.cart_tableWrap{
    background: rgba(255,255,255,0.75);
    border-radius: calc(var(--raduis) * 1.0);
    border: 1px solid rgba(0, 27, 54, 0.06);
    overflow: hidden;
    text-align: left;
}

.cart_tableHead{
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.7fr 0.7fr;
    gap: 10px;
    padding: 16px 18px;
    background: rgba(92, 224, 229, 0.06);
    color: rgba(0, 27, 54, 0.7);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: center;
}

.cart_emptyState{
    padding: 52px 18px;
}

.cart_emptyBox{
    text-align: center;
    padding: 22px 16px;
}

.cart_emptyBox i{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--secondary_color);
    background: rgba(0, 105, 107, 0.10);
    border: 1px solid rgba(0, 105, 107, 0.20);
    margin-bottom: 14px;
}

.cart_emptyBox h3{
    color: var(--primary_color);
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 8px;
}

.cart_emptyBox p{
    margin: 0 auto 18px;
    max-width: 460px;
    color: rgba(0, 27, 54, 0.6);
    font-size: 13px;
    font-weight: 600;
}

.cart_emptyBtn{
    background: linear-gradient(90deg, #0c6a6c, #3cc3d0) !important;
    border: 0 !important;
    color: var(--white_color) !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
}

.cart_rightCol{
    position: sticky;
    top: 120px;
}

.order_card{
    background: var(--primary_color);
    color: var(--white_color);
    border-radius: calc(var(--raduis) * 1.3);
    padding: 26px 22px 20px;
    box-shadow: 0 30px 65px rgba(0,0,0,0.25);
}

.order_title{
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.order_row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    color: var(--white_off);
    font-weight: 600;
    font-size: 15px;
}

.order_value{
    color: var(--white_color);
    font-weight: 700;
}

.order_free{
    color: #49e5f1;
    font-weight: 700;
}

.order_divider{
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 18px 0;
}

.order_total .order_value{
    font-size: 20px;
}

.order_total{
    margin-top: 12px;
}

.order_security{
    margin: 14px 0 0;
    text-align: center;
    color: var(--white_off);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.promo_card{
    margin-top: 22px;
    background: var(--white_color);
    border-radius: calc(var(--raduis) * 1.3);
    padding: 18px 18px 14px;
    border: 1px solid rgba(0, 27, 54, 0.06);
}

.promo_title{
    margin: 0 0 14px;
    color: rgba(0, 27, 54, 0.65);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.promo_form{
    display: flex;
    gap: 12px;
    align-items: center;
}

.promo_input{
    flex: 1;
    height: 50px;
    border-radius: 5px;
    border: 1px solid var(--dark_color);
    padding: 0 15px;
    font-weight: 600;
    color: var(--primary_color);
}

.promo_btn{
    height: 50px;
    width: 110px;
    border-radius: 5px;
    border: 0;
    background: var(--primary_color);
    color: var(--white_color);
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-size: 15px;
}

.promo_note{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 27, 54, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.promo_noteRow{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(0, 27, 54, 0.7);
}


.promo_noteRow b{
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary_color);
}
.promo_noteRow i{
    color: var(--secondary_color);
    margin-top: 2px;
    font-size: 17px;
}

.promo_noteRow span{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark_color);
}

/* cart demo table */
.cart_none{
    display: none !important;
}

.cart_tableBody{
    background: #eef4ff;
    padding: 10px 0;
}

.cart_itemRow{
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.7fr 0.7fr;
    align-items: center;
    gap: 10px;
    padding: 22px 18px;
    border-top: 1px solid rgba(0, 27, 54, 0.06);
}
.cart_itemRow:first-child{
    border-top: 0;
}

.cart_productCell{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.cart_productImg{
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--white_color);
    border: 1px solid rgba(0, 27, 54, 0.08);
    padding: 6px;
}
.cart_productInfo{
    flex: 1;
}

.cart_badge{
    display: inline-flex;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cart_badge--teal{
    background: rgba(0, 105, 107, 0.14);
    color: var(--secondary_color);
    border: 1px solid rgba(0, 105, 107, 0.25);
}
.cart_badge--blue{
    background: rgba(0, 27, 54, 0.08);
    color: var(--primary_color);
    border: 1px solid rgba(0, 27, 54, 0.18);
}
.cart_badge--red{
    background: rgba(173, 54, 59, 0.14);
    color: var(--danger_color);
    border: 1px solid rgba(173, 54, 59, 0.25);
}
.cart_badge--green{
    background: rgba(79, 102, 0, 0.18);
    color: var(--third_color);
    border: 1px solid rgba(79, 102, 0, 0.25);
}

.cart_productName{
    margin: 0 0 6px;
    color: rgba(0, 27, 54, 0.9);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.cart_productMeta{
    color: var(--dark_color);
    font-size: 13px;
    font-weight: 600;
}

.cart_removeLink{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--danger_color);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 8px;
    padding: 5px;
    border-radius: 4px;
}
.cart_removeLink i{
    font-size: 12px;
}
.cart_removeLink:hover{
    background: var(--bg_danger);
}

.cart_qty{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--white_color);
    border: 1px solid rgba(0, 27, 54, 0.08);
    border-radius: var(--raduis);
    padding: 8px 12px;
    width: fit-content;
}
.cart_qtyBtn{
    border: 0;
    background: transparent;
    color: rgba(0, 27, 54, 0.75);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}
.cart_qtyBtn:active{
    transform: translateY(1px);
}
.cart_qtyValue{
    width: 20px;
    text-align: center;
    font-weight: 900;
    color: var(--primary_color);
}

.cart_price{
    color: rgba(0, 27, 54, 0.75);
    font-weight: 900;
    font-size: 13px;
}
.cart_priceBefore{
    color: rgba(0, 27, 54, 0.5);
    font-weight: 900;
    text-decoration: line-through;
    text-align: left;
    display: inline-block;
}
.cart_total{
    font-weight: 900;
    font-size: 13px;
}
.cart_total--sale{
    color: var(--danger_color);
}

.cart_qtyCell,
.cart_priceCell,
.cart_totalCell{
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart_priceCell{
    justify-content: center;
    padding-right: 10px;
}
.cart_totalCell{
    justify-content: center;
    padding-right: 6px;
}

@media (max-width: 991px){
    .cart_rightCol{
        position: static;
        top: auto;
        margin-top: 18px;
    }
    .cart_leftCard{
        padding: 26px 16px;
    }
    .cart_title{
        font-size: 28px;
    }
    .cart_tableHead{
        grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr;
    }
}

/* checkout page */
.checkout_page{
    padding: 70px 0 90px;
    background: #f6f8fc;
}
.checkout_page .container{
    max-width: 1400px !important;
}

.checkout_stepper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 34px;
}
.checkout_step{
    border: 0;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 130px;
}
.checkout_stepDot{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(0, 27, 54, 0.08);
    color: rgba(0, 27, 54, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
}
.checkout_stepLabel{
    color: rgba(0, 27, 54, 0.75);
    font-weight: 900;
    letter-spacing: 1.5px;
    font-size: 10px;
    text-transform: uppercase;
}
.checkout_step.is-active .checkout_stepDot{
    background: #0c6a6c;
    color: var(--white_color);
}
.checkout_step.is-active .checkout_stepLabel{
    color: rgba(0, 27, 54, 0.9);
}
.checkout_step.is-done .checkout_stepDot{
    background: rgba(60, 195, 208, 0.35);
    color: rgba(0, 27, 54, 0.9);
}

.checkout_stepLine{
    flex: 0 0 220px;
    height: 3px;
    border-radius: 999px;
    background: rgba(60, 195, 208, 0.18);
    position: relative;
    overflow: hidden;
}
.checkout_stepLineFill{
    position: absolute;
    inset: 0;
    width: 0%;
    background: rgba(60, 195, 208, 1);
}

.checkout_card{
    background: #eaf1ff;
    border-radius: calc(var(--raduis) * 1.2);
    padding: 22px;
    border: 1px solid rgba(0, 27, 54, 0.06);
    box-shadow: 0 18px 40px rgba(0,0,0,0.04);
    display: none;
}
.checkout_card.is-active{
    display: block;
}
.checkout_cardHead{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--primary_color);
}
.checkout_cardHead i{
    color: var(--secondary_color);
}
.checkout_cardHead h2{
    margin: 0;
    font-size: 25px;
    font-weight: 700;
}

.checkout_label{
    display: block;
    margin: 0 0 8px;
    color: rgba(0, 27, 54, 0.65);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.checkout_input{
    width: 100%;
    height: 46px;
    border-radius: 5px;
    border: 1px solid rgba(0, 27, 54, 0.08);
    background: var(--white_color);
    padding: 0 14px;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary_color);
    box-shadow: none !important;
    outline: none;
}
.checkout_select{
    cursor: pointer;
}
.checkout_inputIcon{
    position: relative;
}
.checkout_inputIcon i{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 27, 54, 0.45);
}
.checkout_inputIcon .checkout_input{
    padding-right: 44px;
}

.checkout_payMethods{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.checkout_payMethod{
    border: 2px solid var(--border_hr);
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--dark_color);
}
.checkout_payMethod i{
    color: rgba(0, 27, 54, 0.65);
}
.checkout_payMethod.is-active{
    border-color: #0c6a6c;
    box-shadow: 0 10px 24px rgba(12,106,108,0.12);
}
.checkout_payMethod.is-active i{
    color: #0c6a6c;
}

.checkout_hint{
    margin: 0;
    color: rgba(0, 27, 54, 0.6);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.checkout_reviewBox{
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0, 27, 54, 0.06);
    border-radius: 12px;
    padding: 16px;
}
.checkout_reviewMini{
    margin-top: 12px;
    display: grid;
    gap: 10px;
}
.checkout_reviewItem b{
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--dark_color);
    margin-bottom: 4px;
}
.checkout_reviewItem span{
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: rgba(0, 27, 54, 0.6);
}

.checkout_actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
.checkout_back{
    color: var(--secondary_color);
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.checkout_summary{
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0, 27, 54, 0.06);
    border-radius: calc(var(--raduis) * 1.2);
    padding: 22px;
}
.checkout_summaryTitle{
    margin: 0;
    color: var(--primary_color);
    font-size: 20px;
    font-weight: 700;
}
.checkout_summaryDivider{
    height: 1px;
    background: rgba(0, 27, 54, 0.08);
    margin: 14px 0;
}
.checkout_summaryItems{
    display: grid;
    gap: 14px;
}
.checkout_sumItem{
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    align-items: center;
}
.checkout_sumItem img{
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(0, 27, 54, 0.08);
    background: var(--white_color);
}
.checkout_sumBrand{
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--dark_color);
}
.checkout_sumName{
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary_color);
}
.checkout_sumQty{
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark_color);
}
.checkout_sumPrice{
    color: var(--secondary_color);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.checkout_promo{
    margin-top: 16px;
    display: flex;
    gap: 10px;
}
.checkout_promoInput{
    flex: 1;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border_hr);
    padding: 0 12px;
    font-weight: 700;
    color: var(--dark_color);
    background: var(--bg_white);
}
.checkout_promoBtn{
    width: 90px;
    border: 0;
    border-radius: 10px;
    background: var(--primary_color);
    color: var(--white_color);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 11px;
}

.checkout_totals{
    margin-top: 16px;
}
.checkout_totalRow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    color: rgba(0, 27, 54, 0.65);
    font-weight: 600;
    font-size: 15px;
}
.checkout_totalValue{
    color: var(--primary_color);
    font-weight: 700;
}
.checkout_totalFree{
    color: var(--third_color);
    font-weight: 700;
}
.checkout_totalHr{
    height: 1px;
    background: var(--border_hr);
    margin: 12px 0;
}
.checkout_totalRow--grand{
    margin-top: 12px;
}
.checkout_totalGrand{
    color: var(--secondary_color);
    font-weight: 700;
    font-size: 20px;
}

.checkout_securityRow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 18px;
    color: rgba(0, 27, 54, 0.35);
    font-size: 18px;
}

@media (max-width: 991px){
    .checkout_stepLine{
        flex-basis: 120px;
    }
    .checkout_step{
        min-width: 100px;
    }
}

/* auth (login/register) */
.auth_page{
    min-height: 90vh;
    background: var(--white_off);
    padding: 26px 0 18px;
}

.auth_topBar{
    max-width: 1400px;
    margin: 0 auto 18px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.auth_brand{
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--primary_color);
}

.auth_back{
    color: var(--dark_color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.auth_back:hover{
    color: var(--secondary_color);
}

.auth_container{
    max-width: 1400px !important;
}

.auth_shell{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 26px;
    align-items: stretch;
    position: relative;
}

.auth_shell::after{
    content: "B";
    position: absolute;
    right: 8%;
    top: -6%;
    font-size: 420px;
    font-weight: 900;
    color: rgba(0, 27, 54, 0.08);
    line-height: 1;
    pointer-events: none;
}

.auth_hero{
    position: relative;
    border-radius: calc(var(--raduis) * 1.4);
    overflow: hidden;
    height: 100%;
    min-height: 560px;
    box-shadow: 0 30px 75px rgba(0,0,0,0.10);
}

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

.auth_heroOverlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,27,54,0.78), rgba(0,27,54,0.05) 55%);
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}

.auth_heroTag{
    display: inline-flex;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 4px;
    background: #b7db4b;
    color: var(--third_color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.auth_heroTitle{
    margin: 0;
    color: var(--white_color);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.auth_heroText{
    margin: 0;
    max-width: 380px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.auth_card{
    background: rgba(255,255,255,0.92);
    border-radius: calc(var(--raduis) * 1.4);
    padding: 22px 22px 18px;
    border: 1px solid rgba(0, 27, 54, 0.08);
    box-shadow: 0 30px 70px rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;
}

.auth_tabs{
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(0, 27, 54, 0.10);
    margin-bottom: 18px;
}

.auth_tab{
    border: 0;
    background: transparent;
    padding: 0 0 10px;
    color: var(--dark_color);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}

.auth_tab.is-active{
    color: var(--secondary_color);
}
.auth_tab.is-active::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 42px;
    background: var(--secondary_color);
}

.auth_panel{
    display: none;
}
.auth_panel.is-active{
    display: block;
}

.auth_title{
    margin: 20px 0 6px;
    color: rgba(0, 27, 54, 0.92);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.auth_subtitle{
    margin: 0 0 16px;
    color: var(--primary_color);
    font-size: 12px;
    font-weight: 700;
}

.auth_socialRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.auth_socialBtn{
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(0, 27, 54, 0.12);
    background: #f2f6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(0, 27, 54, 0.82);
    font-size: 13px;
}
.auth_socialBtn:hover{
    transform: translateY(-2px);
    border-color: rgba(12, 106, 108, 0.35);
}
.auth_socialWord{
    font-size: 16px;
    letter-spacing: -0.2px;
}
.auth_socialMini{
    opacity: 0.8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.auth_divider{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 14px;
    color: rgba(0, 27, 54, 0.45);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.auth_divider::before,
.auth_divider::after{
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 27, 54, 0.10);
}

.auth_form{
    display: grid;
    gap: 10px;
}
.auth_label{
    color: rgba(0, 27, 54, 0.65);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.auth_input{
    height: 50px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: var(--bg_white);
    padding: 0 14px;
    font-weight: 600;
    color: rgba(0, 27, 54, 0.85);
    box-shadow: none !important;
    outline: none;
}
.auth_input::placeholder{
    color: var(--dark_color);
}

.auth_labelRow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}
.auth_forgot{
    color: var(--secondary_color);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.auth_check{
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(0, 27, 54, 0.68);
    font-size: 15px;
    font-weight: 700;
    margin-top: 4px;
}

.auth_terms{
    margin: 10px 0 0;
    text-align: center;
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 700;
}
.auth_terms a{
    color: rgba(0, 27, 54, 0.85);
    text-decoration: underline 2px solid rgba(0, 27, 54, 0.18) !important;
    text-underline-offset: 3px;
}
.footer_log{
    background: var(--white_color);
}
.auth_footer{
    padding: 40px  0;
    border-top: 1px solid rgba(0, 27, 54, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--primary_color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.auth_footerLinks{
    display: inline-flex;
    align-items: center;
    gap: 20px;
}
.auth_footerLinks a{
    color: var(--primary_color);
}
.auth_footerLinks a:hover{
    color: rgba(0, 27, 54, 0.85);
}

@media (max-width: 991px){
    .auth_shell{
        grid-template-columns: 1fr;
    }
    .auth_shell::after{
        display: none;
    }
    .auth_hero{
        min-height: 420px;
    }
    .auth_footer{
        flex-direction: column;
        align-items: flex-start;
    }
}