@media screen and (max-width: 1400px) {
    .site-footer {
        padding-top: 36px;

        .footer-main {
            grid-template-columns: repeat(2, 1fr);
            gap: 32px 24px;
            padding-bottom: 16px;
        }

        .footer-social-list {
            margin-top: 16px;
        }

        .footer-col {
            .footer-title {
                font-size: 17px;
                margin-bottom: 12px;
            }

            ul {
                li {
                    margin-bottom: 8px;

                    a {
                        font-size: 15px;
                    }
                }
            }
        }

        .footer-brand {
            grid-column: 1 / -1;
        }

        .footer-newsletter-col {
            .footer-newsletter-field {
                .layui-input {
                    width: 100%;
                }
            }

            .footer-newsletter-submit {
                right: 24px;
            }
        }

        .footer-bottom {
            flex-direction: column-reverse;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 0;

            .footer-lang-select {
                width: 100%;
                align-self: flex-end;
            }
        }
    }

    .product-card__thumb {
        aspect-ratio: 1 / 1;
    }

    .product-card__name {
        font-size: 14px;
    }

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

    .product-card__price-old {
        font-size: 13px;
    }

    .product-card__action-btn {
        width: 36px;
        height: 36px;
    }

    .product-card__action-btn--cart {
        width: 44px;
        height: 44px;
    }

    .product-card__action-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media screen and (max-width: 992px) {
    .pc {
        display: none !important;
    }

    .mb {
        display: block !important;
    }

    .my-section {
        padding: 15px 0;

        .my-container {
            width: 100%;
            padding: 0 16px;

            .section-title {
                font-size: clamp(24px, 6vw, 28px);
                padding: 0 8px 12px;

                &::before {
                    bottom: 0.3em;
                    width: calc(100% + 20px);
                }
            }

            .section-sub-title {
                padding-bottom: 12px;
            }
        }
    }

    .mobile-mode {
        padding: 60px 0 0 0;
    }

    .site-footer {
        padding: 24px 16px 80px 16px;

        .my-container {
            width: 100%;
        }
    }

    .inner-banner-section {
        padding: 12px 16px 0 16px;

        .my-container {
            height: 150px;
            gap: 6px;

            .banner-title {
                font-size: 24px;
            }

            .breadcrumb__current {
                font-size: 15px;
            }
        }
    }

    /* .main-container {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    } */

    .mb-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 16px 16px 0 0;
    }

    .mb-tabbar__inner {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        min-height: 68px;
        padding: 8px 6px 10px;
    }

    .mb-tabbar__item {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        color: #92a2b4;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .mb-tabbar__item.is-active {
        svg {
            path {
                fill: var(--yellow-color);
            }
        }

        .mb-tabbar__label {
            color: var(--yellow-color);
        }
    }

    .mb-tabbar__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .mb-tabbar__icon svg {
        width: 28px;
        height: 28px;
        display: block;
    }

    .mb-tabbar__label {
        color: var(--main-color);
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;
        white-space: nowrap;
    }

    .mb-tabbar__item--search {
        position: relative;
    }

    .mb-tabbar__search-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-top: -45px;
        border-radius: 50%;
        background: var(--main-color);
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(255, 255, 255, 0.42);
    }

    .mb-tabbar__search-circle svg {
        width: 26px;
        height: 26px;
        display: block;
    }

    .mb-tabbar__item--search.is-active,
    .mb-tabbar__item--search:active {
        color: var(--yellow-color);
    }

    #whatsappBtn {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    #mkdf-back-to-top {
        bottom: calc(168px + env(safe-area-inset-bottom, 0px));
    }

    .main-header.mb {
        display: block !important;
        box-shadow: none;

        &.is-collapsed {
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .my-container {
            width: calc(100% - 32px);
        }

        .mb-header-inner {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            height: 60px;
        }

        .mb-header-menu {
            color: var(--main-color);
            justify-self: start;
            width: 40px;
            height: 40px;
            padding: 0;
            border: none;
            background: transparent;
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 5px;
            cursor: pointer;

            svg {
                width: 28px;
                height: 28px;
                stroke-width: 1.5px;
            }
        }

        .mb-header-menu__line {
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            background: var(--black-color);
        }

        .mb-header-menu__line--short {
            width: 14px;
        }

        .mb-header-logo {
            justify-self: center;
            display: inline-flex;
            line-height: 0;

            img {
                height: 52px;
                width: auto;
                max-width: 140px;
                object-fit: contain;
            }
        }

        .mb-header-actions {
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 2px;

            .header-icon-btn {
                width: 32px;
                height: 32px;

                svg {
                    width: 24px;
                    height: 24px;
                }

                .cart-count {
                    top: -9px;
                    right: -9px;
                }
            }
        }

        .header-search-btn {
            color: var(--black-color);
        }

        .header-cart {
            color: var(--yellow-color);
        }
    }

    .product-card {
        .product-card__media {
            --product-card-brand-logo-width: 36px;
        }

        .product-card__action-btn {
            opacity: 1;
            transform: translateY(0);

            .btn-text {
                width: 36px;
                height: 36px;
            }
        }

        &:has(.product-card__img--hover.loaded) .product-card__img--primary.loaded {
            opacity: 0;
        }

        &:has(.product-card__img--hover.loaded) .product-card__img--hover.loaded {
            opacity: 1;
        }

        .product-card__badges {
            top: 10px;
            left: calc(var(--product-card-brand-logo-width) + 6px);

            .product-card__badge {
                font-size: 13px;
                font-weight: 400;
                min-height: 24px;
                padding: 2px 9px;
            }
        }

        .product-card__name {
            font-size: 13px;
            margin-bottom: 6px;
        }

        .product-card__price-current {
            font-size: 13px;
        }

        .product-card__price {
            flex-direction: row;
        }
    }
}

@media screen and (max-width: 640px) {
    .site-footer {
        .footer-main {
            grid-template-columns: 1fr 1fr;
            gap: 28px 16px;
        }

        .footer-brand,
        .footer-newsletter-col {
            grid-column: 1 / -1;
        }
    }

    .product-list-pagination {
        margin-top: 32px;
    }
}