@media (max-width: 1024px) {
    .home-benefits__inner {
        height: auto;
        flex-wrap: wrap;
    }

    .home-benefits__item {
        flex: 0 0 50%;
        padding: 16px 20px;
    }

    .home-benefits__item:nth-child(2)::after {
        display: none;
    }

    .news-index__carousel .owl-nav,
    .news-index__carousel .owl-dots {
        display: none !important;
    }
}

/* Large Devices (Tablets) */
@media (max-width: 991px) {
    .flex-footer {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .slider-btn,
    .partner-nav-btn,
    .owl-nav,
    .owl-dots {
        display: none !important;
    }

    .menu-wrapper {
        display: none !important;
    }

    .home-hero {
        padding: 16px 0;
    }

    .home-hero__layout {
        grid-template-columns: 1fr;
        height: auto;
        gap: 16px;
    }

    .home-hero__sidebar {
        display: none;
    }

    .home-hero__banner {
        height: auto;
    }

    .home-hero__banner .slideshow,
    .home-hero__banner .owl-slider,
    .home-hero__banner .slider-item,
    .home-hero__banner .slider-item a {
        height: auto;
    }

    .home-hero__banner .slider-item a img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .home-benefits {
        margin-top: 24px;
    }

    .home-benefits__inner {
        height: auto;
        flex-wrap: wrap;
    }

    .home-benefits__item {
        flex: 0 0 50%;
        padding: 16px 20px;
    }

    .home-benefits__item:nth-child(2)::after {
        display: none;
    }

    .product-hot__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-category__bar {
        padding: 0 10px;
        flex-wrap: wrap;
        height: auto;
    }

    .product-category__nav-scroll {
        display: none;
    }

    .product-category__content {
        grid-template-columns: 1fr;
    }

    .product-category__promo {
        height: 220px;
    }

    .support-contact__wrapper {
        min-height: auto;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
    }

    .support-contact__map {
        min-height: 300px;
        order: 1;
    }

    .support-contact__card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        height: auto;
        order: 2;
        padding: 24px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .mobile-submenu {
        margin-bottom: 0;
    }

    .support-contact__content {
        align-items: flex-start;
    }

    .support-contact__heading {
        width: 100%;
    }

    .support-contact__map-cta {
        width: 200px;
        height: 200px;
        right: 10px;
        display: none !important;
    }

    .why-choose__overlay {
        width: 100%;
        border-radius: 20px;
    }

    .banner--lg .banner__image {
        height: auto;
        width: 100%;
    }

    .why-choose__grid {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }

    .why-choose__card {
        width: 100%;
        height: auto;
        padding: 30px 20px;
    }

    .why-choose__card-title {
        font-size: 20px;
    }

    .commitment__block,
    .commitment__block--reverse {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .commitment__inner {
        padding: 0;
    }

    .commitment__image-wrapper {
        height: 250px;
    }

    .commitment__content {
        padding: 40px 20px;
    }

    .commitment__content-title {
        font-size: 24px;
        height: auto;
        line-height: normal;
        margin-bottom: 10px;
    }

    .header-bottom {
        display: none;
    }

    .mobile-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1010 !important;
        background: var(--bg-white) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 15px;
        align-items: center;
        gap: 15px;
        height: var(--height-header-mobile, 70px) !important;
    }

    .mobile-header-logo {
        flex-shrink: 0;
        max-width: 180px !important;
    }

    .mobile-header-logo img {
        /* height: 48px;
        width: auto; */
    }

    .mobile-header .mobile-search {
        flex: 1;
        margin: 0 10px;
        max-width: 450px !important;
    }

    .mobile-search form {
        display: flex;
        background: #f5f5f5;
        border-radius: 25px;
        padding: 0 15px;
        align-items: center;
        height: 44px;
    }

    .mobile-search input {
        border: none;
        background: transparent;
        padding: 0;
        width: 100%;
        outline: none;
        font-size: 16px;
        height: 100%;
    }

    .mobile-search button {
        border: none;
        background: transparent;
        color: var(--color-muted);
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-search button i {
        font-size: 18px;
    }

    .main-nav,
    .main-nav ul {
        display: flex !important;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-nav li {
        display: block !important;
    }

    .main-nav li a {
        padding: 0 15px;
        line-height: 48px;
        font-size: 14px;
        color: var(--color-text-brand);
        display: block !important;
        white-space: nowrap;
    }

    /* News Index Bleed & Overflow Fix */
    .news-index {
        overflow-x: hidden;
        padding: 30px 0;
    }

    .news-index .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        width: 100%;
    }

    .news-index__header {
        padding: 0 15px;
        margin-bottom: 20px;
    }

    .news-index__carousel {
        padding-left: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .news-index__carousel .owl-stage-outer {
        overflow: visible !important;
    }

    .news-index__item {
        padding-right: 15px;
    }

    .copyright-text {
        font-size: 12px;
    }
}

/* Medium Devices (Tablets) */
@media (max-width: 767px) {
    .flex-footer {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 30px 20px;
    }

    .footer-col-1 {
        grid-column: 1 / -1;
        grid-row: 1;
        grid-area: auto;
    }

    .footer-col--about {
        grid-column: 1;
        grid-row: 2;
        grid-area: auto;
    }

    .footer-col--policy {
        grid-column: 2;
        grid-row: 2;
        grid-area: auto;
    }

    .footer-col--care {
        grid-column: 1 / -1;
        grid-row: 3;
        grid-area: auto;
    }


    .footer-bottom {
        grid-column: 1 / -1;
        grid-row: 4;
        grid-area: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .heading-title h2 {
        font-size: 24px;
    }

    .home-benefits__item {
        flex: 0 0 100%;
    }

    .home-benefits__item::after {
        display: none !important;
    }

    .product-hot__title,
    .product-category__trigger-text,
    .news-index__title {
        font-size: 22px;
    }

}

/* Small Devices (Phones) */
@media (max-width: 575px) {
    .mobile-search form {
        display: flex;
        background: #f5f5f5;
        border-radius: 20px;
        padding: 0 12px;
        align-items: center;
        height: 36px;
    }

    .mobile-search input {
        border: none;
        background: transparent;
        padding: 0;
        width: 100%;
        outline: none;
        font-size: 14px;
        height: 100%;
    }

    .mobile-search button {
        border: none;
        background: transparent;
        color: var(--color-muted);
        padding-left: 10px;
    }

    .heading-title h2::before,
    .heading-title h2::after {
        display: none;
    }

    .heading-title h2 {
        font-size: 20px;
    }

    .flex-header-top {
        flex-direction: column;
        gap: 8px;
    }

    .flex-header-top-left {
        flex-direction: column;
        gap: 6px;
    }

    .menu {
        display: none;
    }

    .flex-footer {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 24px;
    }

    .footer-col-1,
    .footer-col--about,
    .footer-col--policy,
    .footer-col--care,
    .footer-bottom {
        grid-column: auto;
        grid-row: auto;
        grid-area: auto;
    }

    .footer-logo-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-category,
    .news-index,
    .partner,
    .why-choice-us,
    .partner,
    .footer-main,
    .product-hot {
        padding: 32px 0;
    }

    .product-hot__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 10px;
    }

    .product-card__link {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-card__media {
        width: 100%;
        height: 140px;
        margin-bottom: 8px;
    }

    .product-card--tile,
    .product-card--tile .product-card__link {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
    }

    .product-card__name {
        font-size: 14px !important;
        height: 40px !important;
        margin-bottom: 4px !important;
    }

    .product-card__price {
        font-size: 15px !important;
    }

    .product-card__sold {
        font-size: 11px !important;
    }

    .banner {
        padding: 16px 0;
    }

    .news-index__header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15px;
        gap: 10px;
    }

    .news-index__all {
        padding: 0;
    }

    .news-card__media {
        height: 200px;
    }

    .news-card__title {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .news-card__desc {
        font-size: 14px;
        line-height: 1.4;
    }

    .product-card__name {
        font-size: 14px;
        height: auto;
        margin-bottom: 6px;
    }

    .product-card__price {
        font-size: 16px;
    }

    .why-choose__grid {
        grid-template-columns: 1fr;
    }

    .commitment__image-wrapper {
        height: 200px;
    }

    .commitment__content-title {
        font-size: 20px;
    }

    .product-category__trigger {
        width: 100%;
        background-size: cover;
    }
}

/* Extra Small Devices */
@media (max-width: 374px) {
    .heading-title h2 {
        font-size: 18px;
    }

    .product-category,
    .news-index,
    .why-choice-us,
    .partner,
    .footer-main,
    .product-hot {
        padding: 24px 0;
    }
}