/* Адаптивные стили — оптимизированы с использованием переменных и clamp() */

/* Экраны меньше 930px - скрыть слайдер в модальном окне */
@media (max-width: 58.125rem) {
    .modal-swiper-container {
        display: none;
    }

    .modal-content-wrapper {
        flex-direction: column;
    }
}

/* Планшеты: 1024px и меньше */
@media (max-width: 64rem) {
    h1 {
        font-size: clamp(2rem, 4.5vw, 4rem);
    }

    .product-card {
        max-width: 50rem;
    }

    .modal-content-wrapper {
        flex-direction: column;
    }

    .modal-swiper-container {
        flex: 0 0 100%;
    }
}

/* Средние мобильные: 768px и меньше */
@media (max-width: 48rem) {
    .banner {
        min-height: 16rem;
        padding: 1.5rem 1rem;
    }

    .card {
        width: clamp(15rem, 90%, 25rem);
    }

    .ringBtn {
        width: 6.25rem;
        height: 6.25rem;
    }

    .ringBtn h2 {
        font-size: 0.875rem;
    }

    .ringBtn:active {
        transform: scale(0.95);
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        touch-action: manipulation;
    }

    .product-card {
        max-width: 37.5rem;
        padding: 1.25rem 0.75rem;
    }

    .contact {
        flex-direction: column;
        width: 100%;
    }

    .icons a {
        height: 2.75rem;
        width: 2.75rem;
    }
}

/* Маленькие мобильные: 480px и меньше */
@media (max-width: 30rem) {
    h1 {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1rem, 3vw, 1.5rem);
    }

    p {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }

    button {
        min-height: 3rem;
        min-width: 6.25rem;
        font-size: 1rem;
    }

    header {
        padding: 0.75rem 0;
        gap: 0.5rem;
    }

    .logo {
        max-height: 4rem;
    }

    .insta,
    .vinted,
    .wallapop,
    .lang-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .banner {
        min-height: 10rem;
        padding: 1rem;
    }

    .banner h1 {
        font-size: 1.75rem;
        text-align: center;
    }

    .card {
        width: clamp(14rem, 100%, 22rem);
        margin-top: 1.5rem;
    }

    .swiper {
        max-width: 18.75rem;
    }

    .card h2 {
        min-height: auto;
        padding: 0.5rem 0.75rem;
    }

    .card p {
        margin: 0.5rem 0.75rem;
    }

    .cardMenu {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .product-card {
        width: clamp(16rem, 95%, 25rem);
        padding: 1rem 0.5rem;
        max-height: 95vh;
    }

    .modal-content-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-swiper-container {
        flex: 0 0 100%;
    }

    .close {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1.5rem;
    }

    .content {
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .sellerPrice {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .contact {
        gap: 0.5rem;
    }

    .contact p {
        min-width: auto;
        font-size: 0.95rem;
    }

    .icons a {
        height: 2.375rem;
        width: 2.375rem;
    }

    .icons {
        gap: 1rem;
    }

    footer {
        padding: 1.5rem 0.75rem;
        gap: 1rem;
    }

    .more {
        margin-top: 1.5rem;
        padding-bottom: 1rem;
    }
}

/* Мобильные устройства: кнопки меню в один ряд */
@media (max-width: 48rem) {
    .buttons {
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 0.25rem;
    }

    .ringBtn {
        width: 4.5rem;
        height: 4.5rem;
    }

    .ringBtn h2 {
        font-size: 0.625rem;
        line-height: 1.1;
    }
}

/* Очень маленькие экраны: 375px и меньше */
@media (max-width: 23.4375rem) {
    button {
        min-height: 2.5rem;
        min-width: 5rem;
        font-size: 0.875rem;
    }

    .insta,
    .vinted,
    .wallapop,
    .lang-icon {
        width: 2.125rem;
        height: 2.125rem;
    }

    .card {
        width: clamp(13rem, 100%, 20rem);
    }

    .ringBtn {
        width: 5.25rem;
        height: 5.25rem;
    }

    .ringBtn h2 {
        font-size: 0.75rem;
    }

    .product-card {
        width: clamp(15rem, 98%, 20rem);
        margin: 1.5rem auto;
    }

    .contact {
        width: 13.75rem;
    }

    footer {
        gap: 0.5rem;
        padding: 1rem 0.5rem;
    }
}