/* =======================================================
         RESPONSIVE — Tablet (max 1024px)
========================================================== */

@media (max-width:1024px){
    
    /*------- HEADER --------------*/

    .header-top{
        padding:12px 30px;
        gap:20px;
    }

    .header-contact-left{
        gap:18px;
    }

    .header-contact-left a{
        font-size:14px;
    }

    .header-contact-right{
        font-size:13px;
    }

    img.custom-logo{
        width:170px;
    }

    .header-right{
        gap:16px;
    }

    .main-nav a{
        margin:0 10px;
        font-size:14px;
    }
    
    /*--------------- HERO ----------------------*/
    
    .hero{
        height:550px;
        padding:0 30px;
    }

    .hero-content{
        padding-top:60px;
    }

    .hero p{
        margin:15px 0 40px;
        font-size:16px;
    }

    .hero .btn{
        padding:12px 28px;
    }
    
    /**/
    
    .best-sellers .products{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .image-wrap{
        height:350px;
    }

    .section-title{
        margin-bottom:25px;
    }
    
    /**/
    
    .showroom {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 0;
        margin: 0 20px;
    }

    .showroom-left {
        padding: 50px 35px;
        gap: 30px;
    }

    .showroom-right {
        height: 500px;
    }

    .showroom-right img {
        width: 100%;
        height: 100%;
    }
    
    /**/
    
    .wws-section{
        padding:60px 20px;
    }

    .wws-card{
        padding:40px 30px;
    }

    .wws-save-badge{
        width:100px;
        height:100px;
        top:25px;
        right:25px;
    }

    .wws-title{
        font-size:38px;
    }

    .wws-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .wws-hero{
        min-height:420px;
    }

    .wws-product{
        --visible:2;
    }

    .wws-features{
        grid-template-columns:repeat(3,1fr);
    }
    
    
    /**/
    
    .aussie{
        padding:80px 20px;
    }

    .aussie .top-title{
        margin-bottom:60px;
    }

    .aussie .top-title h2{
        font-size:42px;
    }

    .aussie .top-title p{
        font-size:16px;
    }

    .aussie .grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .aussie .badge{
        position:static;
        margin:25px auto 0;
    }
    
    /**/
    
    .categories{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    .category img{
        height:16rem;
    }
    
    /**/
    
    .ergocraft-footer {
        padding: 50px 30px;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-divider {
        display: none;
    }

    .footer-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .footer-copy {
        text-align: left;
    }



}


/* =======================================================
         RESPONSIVE — Mobile (max 768px)
========================================================== */

@media (max-width:768px){
    

    .header-top{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:15px;
        gap:15px;
    }

    .logo{
        order:1;
    }

    .header-right{
        order:2;
        width:100%;
        justify-content:center;
        gap:18px;
        flex-wrap:wrap;
    }

    .header-contact-left{
        order:3;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
        width:100%;
    }

    .header-contact-left a{
        font-size:14px;
    }

    .header-contact-right{
        order:4;
        display:flex;
        justify-content:center;
        text-align:center;
        white-space:normal;
        width:100%;
        font-size:13px;
    }

    img.custom-logo{
        width:140px;
    }

    .header-icon svg{
        width:20px;
        height:20px;
    }

    .main-nav{
        display:none;
    }

    .hamburger-btn{
        display:flex;
    }

    .mobile-menu{
        display:block;
    }

    .mobile-menu li a{
        padding:14px 18px;
        font-size:14px;
    }

    .inline-search-form{
        display:none;
    }
    
    /*--------------- HERO ----------------------*/
    
    .hero{
        height:480px;
        padding:0 20px;
    }

    .hero-content{
        padding-top:40px;
    }

    .hero-heading{
        line-height:1.15;
    }

    .hero p{
        margin:15px 0 30px;
        font-size:15px;
        line-height:1.6;
    }

    .hero .btn{
        padding:12px 25px;
        font-size:14px;
    }
    
    /**/
    
    .best-sellers .products{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .image-wrap{
        height:300px;
    }

    .info{
        padding:15px 8px;
    }

    .title-price h3{
        font-size:14px;
    }

    .title-price span,
    .amount{
        font-size:13px;
    }

    .info p{
        font-size:12px;
    }
    
    /**/
    
    .showroom {
        margin: 0 15px;
    }

    .showroom-left {
        padding: 40px 25px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .showroom-heading,
    .showroom h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .showroom p {
        font-size: 15px;
        line-height: 1.6;
    }

    .showroom button {
        width: 160px;
        margin-top: 25px;
    }

    .showroom-right {
        height: 400px;
    }
    
     .showroom-btns{
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .visit-btn,
    .call-btn{
        flex: 1;
        padding: 15px 25px  !important;
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
    }

    .call-btn i{
        font-size: 13px;
    }
    
    /**/
    
    .wws-section{
        padding:50px 15px;
    }

    .wws-card{
        padding:30px 20px;
        border-radius:16px;
    }

    .wws-save-badge{
        width:85px;
        height:85px;
        top:18px;
        right:18px;
    }

    .wws-save-badge .save-pct{
        font-size:22px;
    }

    .wws-title{
        font-size:32px;
    }

    .wws-subtitle{
        font-size:14px;
    }

    .wws-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .wws-hero{
        min-height:360px;
    }

    .wws-hero-overlay{
        padding:25px;
    }

    .wws-hero-title{
        font-size:24px;
    }

    .wws-hero-desc{
        font-size:13px;
    }

    .wws-product{
        --visible:1;
    }

    .wws-features{
        grid-template-columns:1fr;
        gap:20px;
        padding:20px;
    }

    .wws-feature{
        padding:0;
    }

    .wws-feature::after{
        display:none;
    }
    
    /**/
    
    .aussie{
        padding:60px 15px;
    }

    .aussie .top-title{
        margin-bottom:45px;
    }

    .aussie .top-title span{
        font-size:12px;
        letter-spacing:3px;
    }

    .aussie .top-title h2{
        font-size:32px;
    }

    .aussie .top-title p{
        font-size:15px;
        line-height:1.8;
    }

    .aussie .item{
        gap:18px;
    }

    .aussie .text h3{
        font-size:20px;
    }

    .aussie .text p{
        font-size:15px;
    }

    .aussie .visit{
        padding:22px;
    }

    .aussie .visit strong{
        font-size:20px;
    }

    .aussie .badge{
        width:140px;
        height:140px;
        font-size:13px;
    }
    
    /**/
    
    .categories{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .category img{
        height:14rem;
    }

    .category p{
        font-size:14px;
    }
    
    /**/
    
    .ergocraft-footer {
        padding: 40px 20px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .newsletter h4 {
        max-width: 100%;
    }

    .newsletter-box {
        max-width: 100%;
    }

    .footer-col {
        text-align: center;
    }

    .footer-bottom {
        margin-top: 40px;
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .footer-brand,
    .footer-contact,
    .footer-social,
    .footer-copy {
        text-align: center;
    }

    .footer-contact a {
        margin-bottom: 8px;
    }

    .footer-social {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .footer-social a {
        margin-right: 0;
        font-size: 18px;
    }

    .footer-copy {
        font-size: 12px;
        line-height: 1.6;
    }



}


/* =======================================================
         RESPONSIVE — Small Mobile (max 480px)
========================================================== */

@media (max-width:480px){

    .header-top{
        padding:12px;
        gap:12px;
    }

    img.custom-logo{
        width:120px;
    }

    .header-contact-left a{
        font-size:13px;
    }

    .header-contact-right{
        font-size:12px;
    }

    .header-right{
        gap:12px;
    }

    .mobile-menu li a{
        font-size:13px;
        padding:12px 15px;
    }
    
    /**/
    
    .section {
        padding: 40px;
    }
    
    /*--------------- HERO ----------------------*/
    
    .hero{
        height:420px;
        padding:0 15px;
    }

    .hero-content{
        padding-top:160px;
    }

    .hero p{
        margin:12px 0 25px;
        font-size:14px;
    }

    .hero .btn{
        display:inline-block;
        width:100%;
        max-width:220px;
        padding:12px 20px;
        font-size:14px;
    }
    
    /**/
    
    .best-sellers .products{
        grid-template-columns:1fr;
        gap:20px;
    }

    .image-wrap{
        height:280px;
    }

    .product-info{
        grid-template-columns:1fr;
        gap:8px;
    }

    .title-price h3{
        font-size:15px;
    }

    .title-price span,
    .amount{
        font-size:14px;
    }

    .info{
        padding:15px 5px;
    }

    .info p{
        font-size:13px;
    }
    
    /**/
    
    .showroom-left {
        padding: 30px 15px;
    }

    .showroom-heading,
    .showroom h2 {
        font-size: 22px;
    }

    .showroom-right {
        height: 250px;
    }
    
    /**/
    
     .wws-section{
        padding:40px 10px;
    }


    .wws-save-badge{
        width:85px;
        height:85px;
    }

    .wws-save-badge .save-pct{
        font-size:18px;
    }

    .wws-title{
        font-size:26px;
    }

    .wws-eyebrow{
        font-size:11px;
        gap:8px;
    }

    .wws-hero{
        min-height:300px;
    }

    .wws-hero-overlay{
        padding:18px;
    }

    .wws-hero-title{
        font-size:20px;
    }

    .wws-hero-desc{
        font-size:12px;
        margin-bottom:20px;
    }

    .wws-hero-btn{
        width:100%;
        justify-content:center;
    }

    .wws-product-body{
        padding:15px;
    }

    .wws-product-name{
        font-size:14px;
    }

    .wws-price-new{
        font-size:15px;
    }
    
    /**/
    
    /*.aussie{*/
    /*    padding:45px 10px;*/
    /*}*/

    .aussie .top-title{
        margin-bottom:35px;
    }

    .aussie .top-title h2{
        font-size:26px;
    }

    .aussie .top-title p{
        font-size:14px;
    }

    .aussie .item{
        flex-direction:column;
        gap:12px;
    }

    .aussie .no{
        min-width:auto;
    }

    .aussie .no::after{
        width:30px;
    }

    .aussie .text h3{
        font-size:18px;
    }

    .aussie .text p{
        font-size:14px;
    }

    .aussie .visit{
        padding:18px;
    }

    .aussie .visit strong{
        font-size:18px;
    }

    .aussie .badge{
        width:120px;
        height:120px;
        font-size:12px;
        padding:18px;
    }
    
    /**/
    
    .categories{
        grid-template-columns:1fr;
        gap:12px;
    }

    .category img{
        height:180px;
    }

    .category p{
        font-size:14px;
        margin-top:8px;
    }
    
    /**/
    
    .ergocraft-footer {
        padding: 35px 15px;
    }

    .footer-col h4 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer-col p,
    .footer-col a,
    .footer-col li a {
        font-size: 13px;
    }

    .newsletter-box {
        flex-direction: column;
        gap: 10px;
        border-bottom: none;
        padding-bottom: 0;
    }

    .newsletter-box input {
        width: 100%;
        border: 1px solid #ddd;
        padding: 12px;
    }

    .newsletter-box button {
        width: 100%;
        padding: 12px;
    }

}