/**
 * WooCommerce Mega Menu Preview v3 — Responsive Stylesheet
 * Handles breakpoint adjustments for the DESKTOP menu template.
 * The mobile overlay (.wcmp-mobile-overlay) is a fixed-position element
 * and is NOT affected by responsive CSS.
 *
 * @package WcMegaPreview
 * @version 3.0.0
 */

/* =============================================
   LARGE DESKTOP (1400px+)
   ============================================= */

@media (min-width: 1400px) {
    .wcmp-preview {
        max-width: 380px;
    }
}

/* =============================================
   TABLET LANDSCAPE (1024px and below)
   Reduce grid columns, shrink preview panel
   ============================================= */

@media (max-width: 1024px) {
    .wcmp-menu__grid--6-col {
        grid-template-columns: repeat(4, 1fr);
    }

    .wcmp-menu__grid--5-col {
        grid-template-columns: repeat(3, 1fr);
    }

    .wcmp-section__grid--6 {
        grid-template-columns: repeat(4, 1fr);
    }

    .wcmp-section__grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .wcmp-preview {
        max-width: 250px;
        min-width: 220px;
    }

    .wcmp-search__wrapper {
        max-width: 100%;
    }
}

/* =============================================
   SMALL TABLET (768px and below)
   Stack layout, 2-col grids, full-width preview
   ============================================= */

@media (max-width: 768px) {
    .wcmp-menu__grid--3-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .wcmp-menu__grid--4-col,
    .wcmp-menu__grid--5-col,
    .wcmp-menu__grid--6-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .wcmp-section__grid--4,
    .wcmp-section__grid--5,
    .wcmp-section__grid--6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .wcmp-mega-menu__body {
        flex-direction: column;
    }

    .wcmp-preview,
    .wcmp-preview--left {
        order: 0;
        margin-right: 0;
        margin-top: 16px;
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
        gap: 20px;
        padding: 16px;
        align-items: center;
    }

    .wcmp-preview__image-wrapper {
        margin-bottom: 0;
        flex-shrink: 0;
        max-height: 200px;
        max-width: 200px;
    }

    .wcmp-preview__content {
        flex: 1;
        min-width: 0;
    }

    .wcmp-preview__actions {
        justify-content: flex-start;
    }

    .wcmp-menu__category-title {
        font-size: 13px;
        padding: 0 10px 8px 10px;
    }

    .wcmp-menu__category-title::after {
        left: 10px;
        right: 10px;
    }

    .wcmp-menu__subcategory-link {
        font-size: 11px;
        padding: 2px 8px;
    }

    .wcmp-menu__product-link {
        font-size: 12px;
        padding: 5px 10px;
    }

    .wcmp-section {
        padding: 12px;
    }

    .wcmp-section__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .wcmp-section__item {
        padding: 6px;
    }

    .wcmp-section__item-image {
        width: 36px;
        height: 36px;
    }

    .wcmp-section__item-name,
    .wcmp-section__item-title {
        font-size: 12px;
    }

    .wcmp-section__heading {
        font-size: 14px;
    }

    .wcmp-search {
        padding: 10px 12px 6px;
    }

    .wcmp-search__results {
        max-height: 260px;
    }

    .wcmp-badge {
        font-size: 9px;
        padding: 1px 5px;
    }

    .wcmp-stock {
        font-size: 10px;
    }

    .wcmp-sku {
        display: none;
    }

    .wcmp-product-thumb {
        width: 20px;
        height: 20px;
    }

    .wcmp-preview__title {
        font-size: 15px;
    }

    .wcmp-preview__price {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .wcmp-preview__btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .wcmp-preview__actions {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* ─── Desktop/Mobile Wrap Switching ─── */
    .wcmp-desktop-wrap {
        display: none;
    }
    .wcmp-mobile-wrap {
        display: block;
    }
}

/* =============================================
   MOBILE (480px and below)
   Single-column grids, iOS zoom prevention
   ============================================= */

@media (max-width: 480px) {
    .wcmp-menu__grid {
        grid-template-columns: 1fr;
    }

    .wcmp-menu__column {
        border-right: none;
        border-bottom: 1px solid var(--wcmp-border);
    }

    .wcmp-menu__column:last-child {
        border-bottom: none;
    }

    .wcmp-menu__column {
        max-height: none;
        overflow: visible;
    }

    .wcmp-section__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .wcmp-section__item {
        flex-direction: column;
        text-align: center;
        padding: 10px 6px;
    }

    .wcmp-section__item-image {
        width: 50px;
        height: 50px;
    }

    .wcmp-section__item-name,
    .wcmp-section__item-title {
        font-size: 11px;
    }

    .wcmp-section__heading {
        font-size: 13px;
    }

    .wcmp-section {
        padding: 10px 12px;
    }

    .wcmp-search__input {
        font-size: 16px;
    }

    .wcmp-preview,
    .wcmp-preview--left {
        margin: 16px 12px 0;
        width: calc(100% - 24px);
        padding: 12px;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 12px;
    }

    .wcmp-preview__image-wrapper {
        max-width: 200px;
        max-height: 180px;
        width: 100%;
    }

    .wcmp-preview__btn {
        width: 100%;
        max-width: 200px;
    }

    .wcmp-search__result-item {
        padding: 8px 12px;
    }

    .wcmp-search__result-thumb {
        width: 32px;
        height: 32px;
    }

    .wcmp-search__results {
        max-height: 240px;
    }

    .wcmp-menu__load-more-btn {
        padding: 8px 20px;
        font-size: 12px;
    }
}

/* =============================================
   SMALL MOBILE (380px and below)
   Further compacting
   ============================================= */

@media (max-width: 379px) {
    .wcmp-preview__image-wrapper {
        max-width: 160px;
        max-height: 150px;
    }

    .wcmp-preview__title {
        font-size: 14px;
    }

    .wcmp-preview__price {
        font-size: 15px;
    }
}

/* =============================================
   TOUCH DEVICE OVERRIDES
   Larger tap targets for coarse pointers
   ============================================= */

@media (hover: none) and (pointer: coarse) {
    .wcmp-menu__product-link {
        padding: 10px 16px;
        -webkit-tap-highlight-color: transparent;
    }

    .wcmp-preview__btn {
        padding: 12px 24px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wcmp-menu__subcategory-link {
        padding: 6px 12px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    .wcmp-menu__load-more-btn {
        padding: 10px 20px;
        min-height: 40px;
    }
}

/* =============================================
   PRINT STYLES
   ============================================= */

@media print {
    .wcmp-mega-menu,
    .wcmp-hpm,
    .wcmp-mobile-overlay,
    .wcmp-desktop-wrap,
    .wcmp-mobile-wrap,
    .wcmp-overlay-trigger {
        display: none;
    }
}