@media (max-width:1200px) {
    .header-icons {
        margin-left: auto
    }

    .category-grid,
    .concern-grid {
        gap: 20px
    }

    .left-box {
        height: 420px
    }

    .top-grid div,
    .bottom-grid {
        height: 200px
    }
}

@media (max-width:1024px) {
    .mobile-hamburger {
        display: block
    }

    .nav-menu {
        display: none
    }

    .header-icons {
        margin-left: auto
    }

    .category-grid,
    .concern-grid {
        grid-template-columns: 1fr;
    }

    .right-box,
    .left-area {
        grid-template-columns: 1fr 1fr;
    }

    .left-area {
        grid-template-rows: auto;
    }

    .left-box {
        height: 380px
    }

    .top-grid div,
    .bottom-grid,
    .small-card,
    .wide-card,
    .right-area {
        height: 220px
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width:768px) {
    .shop-category,
    .shop-concern {
        padding: 60px 0
    }

        .shop-category h2,
        .shop-concern h2 {
            font-size: 28px
        }

        .shop-category p,
        .shop-concern p {
            font-size: 14px
        }

    .category-grid,
    .concern-grid {
        margin-top: 40px
    }

    .logo img {
        height: 45px
    }

    .left-box {
        height: 320px
    }

    .top-grid div,
    .bottom-grid,
    .small-card,
    .wide-card,
    .right-area {
        height: 200px
    }

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

    .footer-col h2 {
        font-size: 26px
    }
}

@media (max-width:600px) {
    .contact-bar {
        display: none
    }

    .main-header {
        padding: 12px 15px
    }

    .breadcrumb-bar {
        padding: 10px 15px;
        font-size: 13px
    }

    .category-grid,
    .concern-grid {
        gap: 15px
    }

    .left-box {
        height: 260px
    }

    .top-grid div,
    .bottom-grid,
    .small-card,
    .wide-card,
    .right-area {
        height: 180px
    }

    .shop-category h2,
    .shop-concern h2 {
        font-size: 24px
    }

    .shop-category p,
    .shop-concern p {
        font-size: 13px;
        line-height: 1.5
    }

    .left-box span,
    .top-grid span,
    .bottom-grid span,
    .left-area span,
    .right-area span {
        font-size: 12px;
        padding: 6px 18px
    }
}

@media (max-width:480px) {
    .top-bar-track span {
        font-size: 11px;
        padding: 0 18px;
        margin-top:-10px;
    }

    .logo img {
        height: 40px
    }

    .mobile-hamburger {
        font-size: 22px
    }

    .left-box {
        height: 220px
    }

    .top-grid div,
    .bottom-grid,
    .small-card,
    .wide-card,
    .right-area {
        height: 160px
    }

    .shop-category h2,
    .shop-concern h2 {
        font-size: 22px;
        letter-spacing: 1px
    }

    .footer-bottom {
        font-size: 12px
    }
}

@media (max-height:500px) and (orientation:landscape) {
    .left-box {
        height: 200px
    }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation: none;
        transition: none
    }
}

@media print {
    .top-bar,
    .contact-bar,
    .main-header,
    .mobile-hamburger,
    .mobile-overlay,
    .mobile-menu,
    .footer-bar {
        display: none
    }
}