/**
 * VIRTUHOST - All Products Page Additional Styles
 * 
 * Dit bestand bevat minimale extra styling voor de all-products pagina.
 * Het meeste komt uit main.css; dit zijn alleen aanvullingen.
 */

/* ========================================================================
   LINE CLAMP UTILITY
   Voor trunceren van beschrijvingen tot x regels
   ======================================================================== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================================================
   PRODUCT CARD ENHANCEMENTS
   ======================================================================== */

/* Hover state voor product cards */
.product-card {
    will-change: transform, box-shadow;
}

.product-card:hover {
    transform: translateY(-2px);
}

/* Featured card glow effect */
.product-card.ring-1.ring-brand-500\/20 {
    box-shadow: 
        0 0 0 1px rgba(249, 115, 22, 0.2),
        0 10px 40px -10px rgba(249, 115, 22, 0.15);
}

/* Out of stock styling */
.product-card[class*="grayscale"] a[aria-disabled="true"] {
    pointer-events: none;
}

/* ========================================================================
   CATEGORY SECTION DIVIDERS
   ======================================================================== */

.category-section + .category-section {
    padding-top: 2rem;
}

/* ========================================================================
   FILTER ANIMATION
   ======================================================================== */

.product-card {
    transition: 
        opacity 0.2s ease-out,
        transform 0.3s ease-out,
        box-shadow 0.3s ease-out;
}

.category-section {
    transition: opacity 0.2s ease-out;
}

/* ========================================================================
   SCREEN READER ONLY (voor announcer)
   ======================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================================================
   RESPONSIVE FIXES
   ======================================================================== */

@media (max-width: 640px) {
    /* Stack category header op mobile */
    .category-section > .flex.items-center.gap-3 {
        flex-wrap: wrap;
    }
    
    .category-section > .flex.items-center.gap-3 > .ml-auto {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
    }
}

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

@media print {
    .category-btn,
    #productSearch,
    #categoryFilters {
        display: none !important;
    }
    
    .product-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}