body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
    font-family: 'Aeonik-Regular', sans-serif; 
    font-size: var(--font-xxs);
    color: var(--dark);
}

body.checkout-cart-index, body.catalog-product-view, body.checkout-index-index{
    font-size: var(--font-xxs);
}
button:hover {
    background-color: transparent;
}
:root {
    --orange: #F46F32;
    --white: #ffffff; 
    --black: #000; 
    --dark: #060606; 
    --blue: #185F9E; 
    --font-xxl: 150px;
    --font-xl: 80px;
    --font-lg: 39px;
    --font-md: 32px;
    --font-sm: 24px;
    --font-xs: 20px;
    --font-xxs: 18px;
    --font-xxxs: 16px;
} 
.hide {
    display: none!important;
} 
.light{
    opacity: 80%;
}
.big-title {
    font-size: var(--font-xxl);
}
.title {
    font-size: var(--font-xl);
}
.totals .title {
    font-size: var(--font-xxs);
}
.small-title {
    font-size: var(--font-lg);
}
.subtitle {
    font-size: var(--font-md);
}
.small-subtitle {
    font-size: var(--font-sm);
}
.text-big {
    font-size: var(--font-xs);
}
.text-small {
    font-size: var(--font-xxs);
} 
.text-xsmall {
    font-size: var(--font-xxxs);
} 
@font-face {
    font-family: 'Aeonik-Black';
    src: url('../fonts/aeonik/Aeonik-Black.otf') format('opentype');
}
@font-face {
    font-family: 'Aeonik-Bold';
    src: url('../fonts/aeonik/Aeonik-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Aeonik-Light';
    src: url('../fonts/aeonik/Aeonik-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Aeonik-Medium';
    src: url('../fonts/aeonik/Aeonik-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Aeonik-Regular';
    src: url('../fonts/aeonik/Aeonik-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Aeonik-Thin';
    src: url('../fonts/aeonik/Aeonik-Thin.otf') format('opentype');
} 

select.select {
    height: 40px;
}
.mark {
    background-color: transparent;
}
.container, header.content, .page-main, .breadcrumbs{
    max-width: 1781px !important;
    padding-right: 40px !important;
    padding-left: 40px !important;
}
p{
    font-size:var(--font-xxs);
    line-height: 160%;
}
h1,h2,h3,h4,h5,h6,p{
    margin: 0;
    padding: 0;
}
a,a:hover{
    text-decoration: none; 
    transition: all 0.6s;
    color: inherit;
}
footer a:visited, .alink:visited{
    color: white;
}

.button-primary{
background-color: var(--orange);
border-radius: 8px;
padding: 18px 50px;
font-size: 18px;
text-decoration: none;
} 
.button-primary:hover{
    box-shadow:2px 5px 5px rgba(0,0,0,0.5);
}
.button-secondary{
    background-color: var(--white);
    border-radius: 8px;
    padding: 18px 50px;
    font-size: 18px;
    text-decoration: none;
    color: var(--dark);
}
.button-secondary:hover{
    color: var(--dark);
    box-shadow:2px 5px 5px rgba(0,0,0,0.5);
}

header {
    padding: 15px 0;
    background-color: var(--blue);
}

.page-header, .cms-index-index .minicart-wrapper{
    display: none;
}

.action.nav-toggle { display: none; }
.cms-index-index header{
    position: absolute;
    z-index: 1000;
    background-color: transparent;
    width: 100%;
}
.cms-index-index .page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.nav-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {margin: 0 !important; padding: 0;}
.navbar-logo{
    max-width: 150px;
}
.menu-button{
    max-width: 62px;
}


.home-hero{
    /* background-image: url('../images/hero-banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;  */
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.home-hero video {
    position: absolute; 
    z-index: -100; 
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
  }
  .home-hero-overlay{
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(6, 6, 6,20%);
  }
.home-content p{
    max-width: 718px;
}
.home-hero h1{ 
    letter-spacing: -5px;
}
.hero-divider{
    width: 1px;
    background-color: rgb(255,255,255,10%);
    flex: none;
}

.home-wrapper{
    min-height: 85vh;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 70px;
    gap: 48px;
    padding-top: 200px;
    position: relative;
    z-index: 1;
}
.home-btn-row{ 
    display: flex;
    gap: 16px;
}

.hero-bottom{
    background-color: var(--orange);
    margin-right: 100px;
    padding-left: 100px;
    padding: 45px 0;
    position: relative;
}
.hero-bottom::after{
    background-color: var(--orange);
    width: 160px;
    height: 700px;
    right: 0;
    bottom: 0;
    position: absolute;
    content: "";
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}
.hero-grid{    
    color: var(--white);
    padding-right: 15px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}
.hero-bottom-block{
    display: flex;
    gap: 12px;
}
.hero-bottom-block img{
width: 64px;
}
.hero-bottom-block-image{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.hero-bottom-block-content p{
    font-size: 24px;
    font-family: 'Aeonik-Medium' , sans-serif;; 
    font-weight: 500;
}
.hero-bottom-block-content p span{
    font-size: 20px;
    font-family: 'Aeonik-Regular' , sans-serif;; 
    font-weight: 400;
}
.hero-bottom-label{
    background-color: var(--blue);
    text-align: center;
    display: flex;
    gap: 15px;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 55px;
    padding: 5px 25px;
}
.hero-bottom-label p{ 
    color: var(--white);
}
.hero-bottom-label img{ 
   width: 25px;
}
.home-right-content{
    display: flex;
        justify-content: flex-end;
        width: 100%;
        max-width: 85%;
        margin-top: -15px;
}
.testimonial-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
}
.testimonial-list {
    display: none;
    gap: 50px;
} 
.testimonial-item{
    flex:none;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.hero-grid-listing{
    color: var(--dark);
}
.hero-grid-listing .hero-grid{
    color: var(--dark);

}
.hero-grid-listing .hero-bottom-block img {
    width: 64px;
    filter: invert(1);
}

.hero-grid-listing .hero-divider{
    width: 1px;
    background-color: #E7E7E7;
    flex: none;
}


.recently{
    padding-top: 188px;
}

.recently .swiper {
    padding-top: 64px;
}


.category{
    padding-top: 188px;
    padding-bottom: 188px;
}
.category-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
} 

.category-block {
    background-color: rgba(24, 95, 158, 0.1);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.category-block:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.category-block a {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 60px;
    gap: 50px;
    transition: color 0.4s ease, text-decoration 0.4s ease;
}

.category-block a:hover {
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 2px;
    color: var(--dark) ;
}

.category-btn {
    width: 44px;
    height: 44px;
    background-color: var(--blue);
    border-radius: 100px;
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.category-block:hover .category-btn {
    opacity: 1;
    transform: scale(1);
}

.category-label {
    background-color: var(--blue);
    border-radius: 4px;
    position: absolute;
    left: 20px;
    top: 20px;
    color: var(--white);
    padding: 6px 16px;
    transform: scale(1);
    transition: transform 0.4s ease;
}

.category-block:hover .category-label {
    transform: scale(1.1);
}

.category-label p{
    font-size: 14.4px;

}
















.title-wrapper{
position: relative;
display: flex;
}
.title-wrapper h2{ 
    z-index: 2;
    background-color:var(--white);
    position: relative;
    padding-right: 24px;
    color: var(--dark);
}
.title-border{
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #E7E7E7;
    content: "";
    top: 50%;
}

.popular-categories{
    padding-bottom: 188px;
    padding-top: 188px;
}
.popular-categories-wrapper{
    padding-top:64px ; 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr .6fr;
    grid-auto-columns: 1fr;
    display: grid;
}


.popular-category-block{
    background-color: #FCEEE8;
    padding:80px 40px;
    border-radius: 8px;
    height: 100%;
    position: relative;
}
.popular-category-block:hover .popular-category-btn{
    box-shadow:2px 5px 5px rgba(0,0,0,0.5);
}
.popular-category-block.one{
         display: flex;
         text-align: center;         
    flex-direction: column;
}
.popular-category-btn{
    width: 64px;
    height: 64px;
    background-color: var(--orange);
    border-radius: 100px;
    position: absolute;
    right:30px ;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center; 
    transition: all 0.6s;
}
.popular-category-block-row{
    display: flex;        
flex-direction: column;
gap: 20px;
}

.popular-category-block-content{
    display: flex;
        flex-direction: column;
        gap: 16px;
}
.popular-category-block.two,.popular-category-block.three{
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}
.popular-category-block.two .popular-category-block-content,.popular-category-block.three .popular-category-block-content{
    display: flex;
     text-align: left;
        flex-direction: column;
        justify-content: center;
}
.popular-category-block.four .popular-category-block-content{
text-align: center;
padding-top: 50px;
}





.bestseller{
    padding-bottom: 188px;
}



.custom-navigation{
    position: absolute;
    right: 0;
    background-color: var(--white);
    padding: 24px;
    display: flex;
    gap: 12px;
    bottom: -27px;
}
.custom-navigation > div{
    width: 44px;
    height: 44px;
    background-color: #FCEEE8;
    border-radius: 100px;
    display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.6s ease;
}
.custom-navigation > div:hover{
background-color: var(--orange);
color: var(--white);
}


.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bestseller .swiper{
    padding-top:64px ;
}
.bestseller-block-child{
    background-color: rgb(24, 95, 158, 10%);
    position: relative;
    border-radius: 8px;
    height: 100%;   
     padding: 45px;     
    display: flex ;
        flex-direction: column;
        justify-content: space-between;
        transition: all 0.6s;
}
.bestseller-block{
    height: auto;
    transition: all 0.6s;

}
.bestseller-block a{ 
    display: flex;
    gap: 10px;
    flex-direction: column;
    height: 100%;    
    transition: all 0.6s;
}
 
.bestseller-block a:hover .add-to-cart-btn{
    display: flex;
}
.bestseller-block-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bestseller-block-content p{
    font-size: 20px;
}
.bestseller-block-content h3{
    font-size: 24px;
    font-family: 'Aeonik-Medium', sans-serif;
    font-weight: 500;
    color: #060606;
}
.add-to-cart-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blue);
    border-radius: 8px;
    padding: 18px;
    color: var(--white);
    gap: 8px; 
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.add-to-cart-btn img {
    width: 18px;
} 

.bestseller-block a:hover .add-to-cart-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}




.special-offers-wrapper{
    padding-top: 64px; 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr .6fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.special-offers-block{
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    padding: 50px;
    text-align: center;
    color: var(--white); 
    gap: 32px;
}
 
.special-offers-block.one{
    background-color: var(--orange); 
}
.special-offers-block.one .special-offers-block-image{
    max-width: 598px;
}
.special-offers-block.two .special-offers-block-image{
    max-width: 348px;
}
.special-offers-block.two{
    background-color: var(--blue);

}

.special-offers{
    padding-bottom: 188px;
}





.cta{ 
    background-image: url('../images/human-with-box.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.cat-wrapper{
    padding-top: 144px;
    padding-bottom: 575px;
    position: relative;
    color: var(--white);
}
.cta-block-content{
    display: flex;
    flex-direction: column;   
    gap: 16px;
}
.cta-block-content p{
    opacity: 80%;
}
.cta-block{
    max-width: 718px;
    display: flex;
    flex-direction: column;    
    align-items: flex-start;
    gap: 32px;
    position: relative;
    z-index: 2;
}
.cta-image{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -145px; 
}
.subscribe{
    padding-top: 188px;
    padding-bottom: 188px;
}
.subscribe-wrapper{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.subscribe-block{
    max-width: 659px;
    margin: auto;
    text-align: center;
}
.subscribe-block-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
 .subscribe-block-content p{
    opacity: 80%;
 }
.subscribe-form{
    max-width: 696px;
    margin: auto;
}
.subscribe-form form{
    display: flex;
    gap: 16px;
}
.subscribe-form .subscribe-input{
    background-color: #E8EFF6;
    border-radius: 8px;
    border: none;
    min-width: 478px;
    padding: 22px;
    font-size: 14.4px;
    color: #060606;
    outline: none;
    height: 100%;
}
.subscribe-form .subscribe-button{
    background-color: var(--blue);
    border-radius: 8px;
    border: none;
    min-height: 61px;
    padding: 18px 50px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.6s ease;
}
.subscribe-form .subscribe-button:hover{
     box-shadow:2px 5px 5px rgba(0,0,0,0.5);
}


.subscribe-link {
    width: 100%;
    max-width: 1177px;
    margin: auto;
    height: 169px;
    background-color: var(--blue);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    margin-top: 50px;
}

.subscribe-link-text {
    font-size: 48px;
    color: var(--white);
    padding-left: 80px;
    transition: opacity 0.3s ease-in-out;
}

/* Hidden initially, but smoothly appearing */
.subscribe-link-hover-text {
    position: absolute;
    font-size: 48px;
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.subscribe-link-hover-button {
    width: 159px;
    height: 159px;
    border-radius: 100px;
    background-color: var(--orange);
    display: flex;
    justify-content: end;
    align-items: center;
    position: absolute;
    left: 5px;
    transition: all 0.8s ease-in-out;
    padding-right: 45px;
}

/* Hover Effects */
.subscribe-link:hover .subscribe-link-hover-button {
    width: 99%;
}

.subscribe-link:hover .subscribe-link-hover-text {
    opacity: 1;
    visibility: visible;
}

.subscribe-link:hover .subscribe-link-text {
    opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .subscribe-link {
        height: 120px;
        border-radius: 50px;
    }
    .subscribe-link-text, 
    .subscribe-link-hover-text {
        font-size: 32px;
    }
    .subscribe-link-hover-button {
        width: 100px;
        height: 100px;
    }
}

footer{
    background-color: var(--blue) !important;
    padding-top: 100px !important;
    padding-bottom: 70px !important;
    color: var(--white) !important;
    
    font-size: 16px;
}
.footer-wrapper{
    padding-bottom: 100px; 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: .7fr .5fr .5fr .6fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}
.footer-block{
    display: flex;
    flex-direction: column;
    gap: 16px; 
}
.footer-block-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
 
.footer-block-main-image{
max-width: 182px;
padding-bottom: 15px;
}
.footer-block-content p{
    font-size: 16px;
}
.footer-block-content a{
    border-left: 3px solid var(--orange);
    padding-left: 8px;
    line-height: 20px;
    font-size: 16px;
}
.footer-block h2{
    opacity: 40%;    
    font-size: 16px;
}
.footer-block ul{
    font-size: 16px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}
.footer-block ul a{
    font-size: 16px;
}
.footer-block.last h2{
    opacity: 100%;    
    font-size: 24px;
}
.footer-block.last p{
    opacity: 80%;     
    max-width: 481px;
    font-size: 16px;
}
.footer-block-image{
    margin-top: 15px;
    display: flex;
    gap: 16px;
}
.footer-block-image img{
    width: 34px;
}

.footer-copy{
    display: flex;
    justify-content: space-between;
}
.footer-copy p{
    font-size: 16px;
}
.footer-copy a{
    font-size: 16px;
}











/* shoping cart css */

.cart-main{
    padding-top:24px ;
    padding-bottom: 188px;
}
.cart-wrapper{
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns:  1fr .3fr;
    grid-auto-columns: 1fr;
    display: grid;
}






@media screen and (min-width: 1820px) {
    .testimonial-item{ 
        display: none; 
    }
   
    .hero-grid{
        display: flex;
        padding-left: 50px;
       }
}



@media screen and (max-width: 1780px) {
     :root { 
        --font-xxl: 90px;
        --font-xl: 50px;
        --font-lg: 39px;
        --font-md: 32px;
        --font-sm: 24px;
        --font-xs: 20px;
        --font-xxs: 18px;
    } 
    .home-content{
        max-width: 1000px;
    }
    .home-right-content{
        padding-right: 100px;
        width: 100%;
    }
    .hero-bottom { 
        padding: 35px 0; 
    }
    .hero-bottom::after { 
        width: 140px;
        height: 580px !important;
    }
    .category-grid { 
        grid-template-columns: 1fr 1fr 1fr 1fr; 
    } 
 
    .hero-grid{
        display: none;
       }
       .testimonial-list {
        display: flex;
        gap: 50px;
    } 
    .table-top > div { 
        padding: 20px 10px; 
    }
}

@media screen and (max-width: 1440px){
    .home-hero h1 {
        letter-spacing: -1px;
    }
    .hero-bottom-block-content p {
        font-size: 20px; 
    }
    .hero-bottom-block-content p span {
        font-size: 16px; 
    }
    .hero-bottom-block img {
        width: 50px;
    }
    .subscribe-link-text  {
        font-size: 32px; 
        padding-left: 120px; 
    } 
    .subscribe-link-hover-text{
        font-size: 32px;  
    }
    .subscribe-link { 
        height: 150px;
    }
    .subscribe-link-hover-button {
        width: 142px;
        height: 142px;
    }
    .popular-category-btn {
        width: 50px;
        height: 50px;
    }
    .cat-wrapper {
        padding-top: 144px;
        padding-bottom: 375px;
    }
 
    
.category,.subscribe,.list-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
}
.recently,.popular-categories{
    padding-top: 100px;
}
footer{
    padding-top: 100px;
    padding-bottom: 50px;
}
.popular-categories,.bestseller,.special-offers {
    padding-bottom: 100px;
}
.popular-categories-wrapper,.bestseller .swiper ,.special-offers-wrapper,.recently .swiper{
    padding-top: 45px;
}
.details-hero,.listing-hero{
    padding-top: 140px;
}
}

@media screen and (max-width: 1280px){
    .hero-bottom::after{
        display: none;
    }
    .hero-bottom{
        margin-right: 0;
    }
    .home-right-content { 
        width: 100%;
        max-width: 100%;
        margin-top: -15px;
        padding-right: 50px;
    }
    .category-block a{
        padding: 30px;
    }
.small-screen,.quotebutton{
display: block !important;
}
.web-screen{
    display: none !important;
}
 
.mob .filter-list {
    list-style: none;
    padding: 0;
    margin: 0; 
    overflow: auto; 
    padding-left: 10px;
}
 .description.mob{
    height: 80vh;
    overflow: auto;
    margin: 0;
 }
 .description.mob #faq .card .card-header .btn-header-link.collapsed ,.description.mob #faq .card .card-header .btn-header-link{
    padding: 20px;
}
.description.mob #faq .card .card-header .btn-header-link.collapsed:after,.description.mob #faq .card .card-header .btn-header-link:after{
    right: 15px;
} 
.description.mob #faq .card{
    border-bottom: 1px solid #00000023;
}
.list-right,.list-left{
    padding: 25px;
    gap: 15px;
}

.list-wrapper ul { 
    gap: 12px;
}
}

@media screen and (max-width: 1124px){
     
}


@media screen and (max-width: 991px) {
    :root { 
        --font-xxl: 80px;
        --font-xl: 45px;
        --font-lg: 32px;
        --font-md: 30px;
        --font-sm: 24px;
        --font-xs: 20px;
        --font-xxs: 18px;
    }
    .navbar-logo img{
        width: 180px;
    }
    .testimonial-list { 
        gap: 30px;
    } 
    .testimonial-item{
        width: 300px;
    }
    .category-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .popular-categories-wrapper { 
        grid-template-columns: 1fr 1fr;         
}
.popular-category-block.four{
    grid-area: span 1 / span 2 / span 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
}
.popular-category-block.four .popular-category-block-content {
    text-align: left;
    padding-top: 0;
}
.category,.subscribe,.list-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
}
.recently,.popular-categories{
    padding-top: 100px;
}
footer{
    padding-top: 100px;
    padding-bottom: 50px;
}
.popular-categories,.bestseller,.special-offers {
    padding-bottom: 100px;
}
.popular-categories-wrapper,.bestseller .swiper ,.special-offers-wrapper,.recently .swiper{
    padding-top: 45px;
}
.details-hero,.listing-hero{
    padding-top: 140px;
}
.subscribe-link { 
    height: 100px;
}
.subscribe-link-hover-button {
    width: 94px;
    height: 94px;
}
.subscribe-link-hover-button img{
    width: 35px;
    transform: translateX(-29px);
}
.subscribe-link-hover-button{
    padding-right: 32px;
    display: flex;
    justify-content: end;
}
.subscribe-link-text {
    font-size: 28px;
    padding-left: 80px;
}
.subscribe-link-hover-text{
    font-size: 28px;  
}

.cta-block {
    max-width: 543px; 
}
.cat-wrapper {
    padding-top: 100px;
    padding-bottom: 206px;
}
.details-grid {
    padding-top: 48px;
    padding-bottom: 100px;
}
.footer-wrapper {
    padding-bottom: 100px;
    grid-column-gap: 50px;
    grid-row-gap: 50px; 
    grid-template-columns: 1fr 1fr; 
}
.special-offers-block { 
    padding: 50px 25px; 
}
.cta-image{
    display: none;
}
.listing-hero-wrapper{
    display: flex !important;
        flex-direction: column !important;
}
.list-right,.list-left{
    padding: 25px;
    gap: 15px;
}

.list-wrapper ul { 
    gap: 12px;
}
.details-grid-wrapper{
    display: flex;
    flex-direction: column;
}
.details-image { 
    max-width: 300px;
}
.discounts-block { 
    grid-template-columns: 1fr 1fr; 
}
.hero-bottom-label { 
    padding: 15px 25px;
}
}

@media screen and (max-width: 767px) {
    .container, .header.content, .page-main{ 
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    :root { 
        --font-xxl: 70px;
        --font-xl: 41px;
        --font-lg: 28px;
        --font-md: 25px;
        --font-sm: 24px;
        --font-xs: 20px;
        --font-xxs: 18px;
    }
    .button-secondary {
        background-color: var(--white);
        border-radius: 8px;
        padding: 14px 20px;
        font-size: 16px;
        text-decoration: none;
        color: var(--black);
    }
    .button-primary {
        background-color: var(--orange);
        border-radius: 8px;
        padding: 14px 20px;
        font-size: 16px;
        text-decoration: none;
    }
    .special-offers-block { 
        padding: 50px 25px; 
    }
    .popular-categories-wrapper{
        display: flex;
            flex-direction: column;
            gap: 10px;
    }
    .popular-category-block-row,.special-offers-wrapper{
        gap: 10px;
    }
    .popular-category-block { 
        padding: 40px 40px; 
    }
    .popular-category-block.one{
        grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    }
    .popular-category-block-content {
        display: flex
    ;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
    }
    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .special-offers-wrapper{
        display: flex;
        flex-direction: column;
    }
    .cta-image{
        display: none;
    }
    .cat-wrapper {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .add-to-cart-btn {
        opacity: 100%;
        visibility: visible;
        transform: translateY(0px);
    }
    .subscribe-form {
        max-width: 100%;
        margin: auto;
        width: 100%;
    }
    .subscribe-form .subscribe-input {
        width: 100%;
        max-width: 400px;
    }
    .subscribe-form form {
        display: flex;
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }
    .subscribe-link-text {
        font-size: 20px;
        padding-left: 80px;
    }
    .subscribe-link-hover-text{
        font-size: 20px;  
    }
    .footer-copy {
        display: flex    ;
        flex-wrap: wrap;
        gap: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .popular-category-btn { 
        right: 20px;
        bottom: 20px;
    }
    .popular-category-block {
        padding: 40px 20px;
    }
    .category-label { 
        left: 10px;
        top: 10px;  
        padding: 3px 5px;
    }
    .category-label p{
        font-size: 8px;
        line-height: normal;    
    }
    .custom-navigation{ 
        bottom: -31px;
    }
    .list-wrapper{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .listing-hero-right{
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    .listing-hero-image{
        max-width: 300px;
    }
    .table-bottom thead th,.table-bottom tbody td {
        font-size: 14.4px;
        font-weight: 100;
        padding: 0.5rem 2rem;
    }
    .table-prev,  .table-next,.table-pagination-list div {
        width: 34px;
        height: 34px;
    }
}


@media screen and (max-width: 479px) {
    :root {
        --font-xxl: 60px;
        --font-xl: 35px;
        --font-lg: 24px;
        --font-md: 22px;
        --font-sm: 24px;
        --font-xs: 20px;
        --font-xxs: 14.4px;
    }
    .footer-wrapper{
        display: flex;
        flex-direction: column; 
    }
    .subscribe-form form {
        display: flex;
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }
    .home-btn-row {
        display: flex    ;
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    } 
    .category-block a{
        gap: 20px;
    }
    .category-block a {
        padding: 15px 15px;
    }
    .category ,.subscribe,footer,.list-wrapper{
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .details-grid {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .popular-categories, .bestseller, .special-offers {
        padding-bottom: 48px;
    }
    .recently,.popular-categories{
        padding-top: 48px;
    }
    .subscribe-form {
        max-width: 100%;
        margin: auto;
        width: 100%;
    }
    .subscribe-form .subscribe-input {
        width: 100%;
        min-width: 100%;
    }
    .subscribe-link-text {
        font-size: 20px;
        padding-left: 80px;
        max-width: 270px;
        text-align: center;
    }
    .popular-category-block.one{
        display: flex;
    }
    .popular-category-block-content { 
        gap: 8px; 
    }
    .popular-category-btn {
        right: 20px;
        top: 20px;
    }
    .popular-category-block.two, .popular-category-block.three ,.popular-category-block.four{ 
        display: flex    ;
        flex-direction: column;
        align-items: flex-start;
    }
    .popular-categories-wrapper, .bestseller .swiper, .special-offers-wrapper,.recently .swiper {
        padding-top: 30px;
    }
    .list-wrapper ul li { 
        background-position: 0 9px;
        background-repeat: no-repeat;
        background-size: auto;
        padding-left: 23px;
        background-size: 15px;
    }
    .table-pagination {
        padding-top: 48px;
        display: flex    ;
        flex-direction: column;
    }
}

.sections.nav-sections {
    display: none;
}