.product_page_title_wrapper{
    margin-bottom: 24px;
}
.product_page_title{
    font-size: 24px;
    line-height: 24px;
    font-weight: var(--semiBold);
}


.product_left_col,
.product_right_col{
    width: 100%;
}

/* product left col */
.lg_img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.gallery_img img{
    width: 60px;
    height: 60px;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}




/* product right col */
.product_title_and_price_wrapper{
    padding-bottom: 16px;
    margin-bottom: 30px;
}
.main_product_title{
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--semiBold);
    margin-bottom: 16px;
}
.product_price .price{
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--medium);
    position: relative;
}
.product_price .price.compare_price{
    text-decoration: line-through;
    font-weight: var(--regular);
}

.product_description_text{
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--regular);
    color: var(--product_page_lead_text_color);
}

.variants{
    margin-top: 30px;
}

.product_page .filter__type_text{
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--semiBold);
    text-transform: uppercase;
    margin-bottom: 10px;
}


/* =============== CUSTOM RADIO BUTTON CSS START ============== */

.product_page .filter .options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.product_page .filter input[type="radio"] {
    display: none;
}

.product_page .filter .custom__radio_button {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    color: var(--product_page_option_text_color);
    background-color: var(--product_page_option_bg_color);
    border-radius: 21px;
    border: 1px solid var(--product_page_option_border_color);
}

.product_page .filter input[type="radio"]:checked+.custom__radio_button {
    border: 1px solid var(--product_page_active_option_border_color);
    background-color:  var(--product_page_active_option_bg_color);
    color: var(--product_page_active_option_text_color);
}
.product_page .filter .filter__color .custom__radio_button {
    width: max-content;
}

/* =============== CUSTOM RADIO BUTTON CSS END ============== */

.btn_wrapper{
    margin-top: 30px;
}
.contact_us_btn{
    font-size:14px;
    line-height: 24px;
    font-weight: var(--medium);
    width: 100%;
    height: 40px;
    border-radius: 8px;
}

.follow_us{
    margin-top: 30px;
}
.follow_us_title{
    font-size: 14px;
    line-height: 14px;
    font-weight: var(--semiBold);
    margin-bottom: 12px;
}


/* product additional info */
.description_wrapper{
    margin-top: 30px;
}

.description_wrapper h2{
    font-size: 24px;
    line-height: 24px;
    font-weight: var(--semiBold);
    color: var(--product_page_title_color);
    margin-bottom: 20px;
}
.description_wrapper .description{
    font-size: 14px;
    line-height: 24px;
    font-weight: var(--regular);
    color: var(--product_page_lead_text_color);
}
.description_wrapper .description strong{
    color: var(--product_page_title_color);
}

@media(min-width:768px){
    .product_page_title{
        font-size: 38px;
        line-height: 38px;
    }


    /* product left col */
    .gallery_img img{
        width: 80px;
        height: 80px;
    }



    /* product right col */
    .main_product_title{
        font-size: 28px;
        line-height: 28px;
    }
    .product_price .price{
        font-size: 20px;
        line-height: 24px;
    }
    .product_description_text{
        font-size: 14px;
        line-height: 24px;
    }

    /* product additional info */
    .description_wrapper{
        margin-top: 40px;
    }
    .description_wrapper h2{
        font-size: 28px;
        line-height: 28px;
    }
}



@media(min-width:900px){

.product_area.flex_column{
    flex-direction: row;
}
.product_left_col, 
.product_right_col {
    width: calc(100% / 2 - 20px);
}
}


@media(min-width:1024px){
    .margin_top_80{
        margin-top: 100px;
    }
    /* product additional info */
    .description_wrapper{
        margin-top: 50px;
    }
    .description_wrapper h2{
        font-size: 32px;
        line-height: 32px;
    }
}

@media(min-width:1300px){

.product_area.gap_40{
    gap: 80px !important;
}
.product_left_col{
    width: 660px;
}
.product_right_col{
    width: calc(100% - 660px - 80px);
}


/* product left col */
.product_images.flex_column{
    flex-direction: row !important;
}
.lg_img{
    width: 100%;
    order: 2;
}
.gallery_img{
    flex-direction: column;
    order: 1;
}
}

.quantity__box {
    height: 44px;
    display: flex;
    border-radius: 5px;
    width:100px;
}

.quantity__controll {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 100%;
    outline: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.quantity__controll svg {
    display: flex;
}

.quantity__count {
    border: none;
    text-align: center;
    background-color: transparent;
    width: calc(100% - 46px);
    outline: none;
}

/* @__________ all active class_____________@ */
/* HTML: <div class="loader"></div> */
.btn_wrapper {
    position: relative;
}

.loader {
    width: 25px;
    padding: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

.loader_position,
.buy_button_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
}

@keyframes l7 {
    to {
        transform: rotate(.5turn)
    }
}


/* ?@__checkmark animation___@ */
.checkmark_animation,
.buy_button_check_animation {
    position: absolute;
    right: 0;
    top: 0px;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;

}

.checkmark_animation svg {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.checkmark_animation svg g path {
    transform: translate(3px, 2px) scale(.5) !important;
}

.check {
    stroke-width: 6px;
    stroke-dasharray: 50px, 50px;
    stroke-dashoffset: 0px;
    animation: checkmark .3s ease-in-out 0.1s backwards;

}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 50px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

.shop_button_disabled,
.shop_button_disabled.shop__btn{
    background-color:var(--product_page_disabled_btn_bg_color) !important;
    border:1px solid var(--product_page_disabled_btn_border_color) !important;
    color:var(--product_page_disabled_btn_text_color) !important;
    cursor: not-allowed !important;
}