/**
 * Category Product Grid Widget Styles
 *
 * Grid layout + empty state for the generic Category Product Grid widget.
 * Pill styling lives in frontend-category-picker.css and is inherited via
 * the `.ipt-category-picker` wrapper this widget emits.
 *
 * @package Imagelet_Product_Types
 */

.ipt-pgw-widget {
    margin: 20px 0;
}

/* ========================================
   Picker edge alignment + scrollable pill row
   The pill row uses the same nowrap-+-overflow-x-auto pattern as the
   legacy marketplace picker (`.ipt-mkt-subcategory-filters`) so long
   pill rows scroll horizontally instead of wrapping. Scrollbar hidden.
   ======================================== */
.ipt-pgw-picker .esw-level1-container {
    padding-left: 0;
    padding-right: 0;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ipt-pgw-picker .esw-level1-container::-webkit-scrollbar {
    display: none;
}

.ipt-pgw-picker .esw-subcategories-item {
    flex-shrink: 0;
}

.ipt-pgw-picker .esw-subcategories-item:first-child {
    margin-left: 0;
}

.ipt-pgw-picker .esw-subcategories-item:last-child {
    margin-right: 0;
}

/* ========================================
   Grid Layout
   ======================================== */
.ipt-pgw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ipt-pgw-grid.ipt-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ipt-pgw-grid.ipt-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ipt-pgw-grid.ipt-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Loading state */
.ipt-pgw-grid.ipt-loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

/* ========================================
   Tablet Responsive
   ======================================== */
@media (max-width: 1024px) {
    .ipt-pgw-grid.ipt-cols-tablet-1 {
        grid-template-columns: 1fr;
    }

    .ipt-pgw-grid.ipt-cols-tablet-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ipt-pgw-grid.ipt-cols-tablet-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Mobile Responsive
   ======================================== */
@media (max-width: 767px) {
    .ipt-pgw-grid.ipt-cols-mobile-1 {
        grid-template-columns: 1fr;
    }

    .ipt-pgw-grid.ipt-cols-mobile-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Empty State
   ======================================== */
.ipt-pgw-empty {
    padding: 40px;
    text-align: center;
    background-color: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 8px;
    grid-column: 1 / -1;
}

.ipt-pgw-empty p {
    margin: 0;
    color: #666;
    font-size: 14px;
}