/* Tablet-specific tuning for 768–1024px viewports */
:root {
    --tablet-gutter: 18px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Constrain overall width and gutters */
    .tablet-shell {
        max-width: 1100px;
        padding-left: var(--tablet-gutter);
        padding-right: var(--tablet-gutter);
    }

    /* Header tweaks for tablet comfort */
    #main-header {
        box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.28);
    }

    #main-header .tablet-header-inner {
        height: 4.25rem;
    }

    #main-header nav {
        column-gap: 12px;
    }

    #main-header .tablet-nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    #main-header .tablet-actions {
        column-gap: 0.75rem;
    }

    #main-header .tablet-phone {
        font-size: 1rem;
    }

    #main-header .tablet-logo {
        height: 2.5rem;
    }

    /* Product cards sizing for tablets */
    .product-card-container {
        height: 500px !important;
    }

    .product-card-image {
        height: 260px !important;
    }

    .product-card-container .text-[20px] {
        font-size: 1.125rem;
    }

    .product-card-container .text-[14px] {
        font-size: 0.95rem;
    }

    .product-card-container .text-[10px] {
        font-size: 0.8rem;
    }

    /* Generic responsive helpers */
    .tablet-grid-auto {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    form input,
    form select,
    form textarea,
    form button,
    .form-control {
        min-height: 44px;
    }

    table {
        font-size: 0.95rem;
    }

    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* Account tabs styling for tablets */
    #account-nav {
        gap: 0;
    }

    #account-nav .account-tab {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        min-height: 44px;
        border-bottom-width: 2px;
    }

    #account-nav .account-tab.active-tab {
        border-bottom-color: #dc2626;
        color: #000000;
        font-weight: 500;
    }

    #account-content {
        padding: 1.5rem;
    }

    /* Quantity selector in product cards - ensure all buttons are visible on tablets */
    [id^="cart-button-"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* Учитываем border в расчете ширины */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [id^="cart-button-"] button {
        flex-shrink: 0 !important;
        /* Кнопки должны быть квадратными и соответствовать высоте селектора */
        aspect-ratio: 1;
        box-sizing: border-box !important;
    }

    [id^="cart-button-"] input[type="number"] {
        flex: 1 !important;
        min-width: 0 !important;
        /* Input занимает оставшееся пространство по центру */
        box-sizing: border-box !important;
    }

    /* Убеждаемся, что контейнер карточки правильно обрабатывает селектор на планшетах */
    .product-card-container [data-product-cart-button] {
        box-sizing: border-box !important;
        /* Достаточный padding для планшетов, чтобы кнопки не обрезались */
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* На планшетах разрешаем overflow для контейнера селектора, чтобы кнопки не обрезались */
    .product-card-container {
        position: relative;
    }

    /* Специальная обработка для селектора количества на планшетах */
    .product-card-container [id^="cart-button-"] {
        /* Учитываем padding родителя при расчете ширины (0.75rem слева + 0.75rem справа = 1.5rem) */
        width: calc(100% - 1.5rem) !important;
        max-width: calc(100% - 1.5rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Разрешаем overflow для контейнера селектора на планшетах */
    .product-card-container [data-product-cart-button] {
        overflow: visible !important;
    }

    /* Страница товара для планшетов: вертикальная компоновка */
    .product-page-layout {
        flex-direction: column !important;
    }

    /* Порядок элементов на планшетах: фото, название, покупка, описание */
    .product-page-images {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    /* Название товара - отдельный блок после фото */
    .product-page-info {
        order: 2 !important;
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    /* Скрываем характеристики из основной секции на планшетах */
    .product-page-specs {
        display: none !important;
    }

    .product-page-purchase {
        order: 3 !important;
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    .product-page-description {
        order: 4 !important;
    }

    /* Страница деталей заказа - адаптация для планшетов */
    .order-detail-grid {
        grid-template-columns: 1fr !important;
    }

    @media (min-width: 1024px) {
        .order-detail-grid {
            grid-template-columns: 2fr 1fr !important;
        }
    }

    /* Улучшение отображения товаров в заказе на планшетах */
    .order-item-card {
        flex-direction: column;
        align-items: flex-start;
    }

    @media (min-width: 640px) {
        .order-item-card {
            flex-direction: row;
            align-items: center;
        }
    }

    /* Адаптивные отступы для карточек на планшетах */
    .order-detail-card {
        padding: 1rem;
    }

    @media (min-width: 640px) {
        .order-detail-card {
            padding: 1.5rem;
        }
    }

    /* Touch-friendly элементы для мобильных и планшетов */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    .btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }

    /* Улучшение форм для мобильных */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px; /* Предотвращает зум на iOS */
        touch-action: manipulation;
    }

    /* Адаптивные размеры шрифтов для мобильных */
    @media (max-width: 640px) {
        h1 {
            font-size: 1.5rem;
        }
        h2 {
            font-size: 1.25rem;
        }
        h3 {
            font-size: 1.125rem;
        }
    }

    /* Улучшение отображения таблиц на мобильных */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 768px) {
        table {
            font-size: 0.875rem;
        }
        table th,
        table td {
            padding: 0.5rem;
        }
    }
}

@media (min-resolution: 2dppx), (min-device-pixel-ratio: 2) {
    /* Prefer sharper assets on retina-class tablets */
    .tablet-logo,
    .product-card-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimizeQuality;
    }
}