/* ==================================
   RESPONSIVE
================================== */
/*large phone menu*/
@media (min-width:425px){
    .product-page-img{
        width: 70%;
    } 

    .product-gallery img{
        width: 50%;
    }
}

/*tablet menu*/
@media (min-width:768px){
    html{
        font-size: 17px;
    }

    /*LAYOUT.CSS*/
    /*logo header*/
    .flex-header img{
        width: 60%;
    }

    /*navbar*/
    nav.navbar{
        padding: 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* =================COMPONENTS====================== */
    
    /*hamburger*/
    #hamburger-btn{
        display: none;
    }

    /*navbar links & breadcrumb links*/
    .navbar-links {
        background-color: transparent;
        height: auto !important;
    }

    .navbar-links ul{
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

    .navbar-links li{
        border: none;    
    }

    /*category-desc-and-btn*/
    .category-desc-and-btn{
        flex-direction: row;
        justify-content: space-evenly;
    }

    /*category short/long description*/

    .category-description{
        padding: var(--space-3) var(--space-6);
    }

    /*categories button*/
    .categories-btn{
        display: block;
        text-align: center;

        width: 30%;
        height: min-content;
        margin:var(--space-3) var(--space-6);
        padding: var(--space-2);
    }

    /*product cards*/
    .product-card.expanded .product-full-description{
        max-height:300px;
    }

    /*scroll to top button*/
    .scroll-top {
        width: 60px;
        height: 60px;
    }

    /*footer items*/
    .footer-links{
        grid-template-columns: repeat(3, 1fr);
    }

    /*==================SECTIONS.CSS========================*/
    /*hero-section*/
    .hero-button{
        width:25%;
    }

    /*contact-section*/
    .contact-section {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "contact-header contact-header"
        "contact-list map"
        "contact-form contact-form" ;
    }

    .contact-section ul{
        margin: var(--space-6);
    }

    .contact-section .map{
        margin-block:var(--space-6) var(--space-3);
        width: 80%;
        aspect-ratio: 2 / 1;
    }

    /*breadcrumb navigation*/
    .breadcrumb-nav{
        width: 90%;
        margin: var(--space-3) auto 0;
    }

    .breadcrumb-links{
        padding: var(--space-2);
    }

    .breadcrumb-links a{
        font-size: 1.2rem;
    }    

    /*product container*/
    .product-container{
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
    }

    /*product-info*/
    .product-page-img{
        width: 40%;
        margin: 0 var(--space-5);
    }

    .product-img-wrapper{
        flex-direction:row;
    }

    .product-info h2{
        text-align: left;
    }

    .product-info-features{
        margin: var(--space-3);
        gap: var(--space-4);
        flex-direction: row-reverse;
    }

    .product-info table{
        margin: 0;
    }
    
    .product-gallery{
        flex-direction: row;
        gap: 0;
    }

    .product-gallery img{
        width: 30%;
    }

    /*footer*/
    .footer{
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        padding: var(--space-3);
    }
}
    
@media (min-width:1024px){
    html {
        font-size: 18px;
    }

    .contact-form{
        width: 80%;
        justify-self: center;
    }

    /*category cards*/
    .category-card{
        width: 16rem;
    }

    /*product container*/
    .product-container{
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-3);
    }

    /*product-info*/
    .product-page-img{
        width: 30%;
        margin: 0 var(--space-5);
    }

    .product-img-wrapper{
        flex-direction:row;
    }

    .product-info h2{
        text-align: left;
    }

    .product-info-features{
        margin: var(--space-4);
        justify-content: space-between;
    }
    .product-gallery img{
        width: 25%;
    }

    /*footer items*/
    .footer-links{
        text-align: center;
        gap: var(--space-2) var(--space-6);
    }
}

@media (min-width:1440px){
    html{   
        font-size: 19px; 
    }

    /*----------LAYOUT------------*/

    section, .footer{
        padding: var(--space-5);
        margin: auto;  
    }

    .categories-container{
        max-width: 1400px;
    }

    /*footer items*/

    .footer-image-container{
        width: 80%;
    }

    .footer-image-container img{
        padding-inline-start: var(--space-6);
    }

    .footer-icons{
        padding-inline-end: var(--space-6);
    }

    .footer-links{
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }

    .footer-image-container img{
    margin: 0;
    max-width: 300px;
    width: 100%;
}
}