/* ==================== PLP PRODUCT GRID (EDITORIAL / KINETIC) ==================== */

.plp-grid {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
}

.plp-grid-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 2rem;
    /* Restored padding to match the toolbar alignment */
}

.plp-grid-items {
    display: grid;
    /* 4 columns on large screens for a sweeping gallery feel */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem 1.5rem;
    /* Tighter horizontal gap, larger vertical gap for editorial flow */
}

/* ==================== RESPONSIVE GRID ==================== */

@media (max-width: 1280px) {
    .plp-grid-items {
        /* Drop to 3 columns on standard laptops/tablets landscape */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 1.5rem;
    }
}

@media (max-width: 1023px) {
    .plp-grid-items {
        /* Keep 3 columns on standard tablets portrait */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .plp-grid-inner {
        padding: 1.5rem 1rem;
    }

    .plp-grid-items {
        /* Drop to 2 columns for mobile phones */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }
}

@media (max-width: 400px) {
    .plp-grid-items {
        /* Force 2 columns even on small phones to maintain fashion aesthetic */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==================== MODERN SHARP SKELETON ==================== */

.plp-skeleton-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: transparent;
    box-sizing: border-box;
}

@keyframes modernPulse {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.8;
    }
}

.plp-skeleton-tile-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    /* Editorial portrait ratio */
    background-color: rgba(0, 0, 0, 0.05);
    /* Very subtle skeleton */
    animation: modernPulse 1.5s infinite ease-in-out;
    flex-shrink: 0;
}

.plp-skeleton-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0 0 0;
    /* Flush left padding */
}

.plp-skeleton-bar {
    height: 1rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 0;
    /* Razor sharp edges */
    animation: modernPulse 1.5s infinite ease-in-out;
}

.plp-skeleton-bar--title {
    width: 75%;
}

.plp-skeleton-bar--price {
    width: 25%;
    margin-top: 0.25rem;
}