/**
 * Product Card Compact Spacing Fix - AGGRESSIVE
 * Removes ALL excessive vertical spacing
 */

/* FORCE compact product cards */
.product-item.card,
.card.product-item,
div.card.card-hover.product-item {
    padding: 12px !important;
    margin-bottom: 16px !important;
    min-height: auto !important;
    max-height: none !important;
}

/* FORCE compact icon area - OPTIMAL SIZE */
.product-item .bg-gray-100,
.product-item > .bg-gray-100,
.card .bg-gray-100,
div.bg-gray-100.rounded-lg {
    height: 120px !important; /* Bigger for better visibility */
    min-height: 120px !important;
    max-height: 120px !important;
    margin-bottom: 6px !important; /* Tighter spacing */
    padding: 14px !important; /* More padding for bigger icons */
}

.product-item .bg-gray-100 span,
.bg-gray-100 span.text-6xl {
    font-size: 52px !important; /* Bigger icons - very visible */
    line-height: 1 !important;
}

/* FORCE remove all default margins - ULTRA TIGHT */
.product-item .mb-2,
.product-item .mb-3,
.product-item .mb-4,
.product-item > div {
    margin-bottom: 3px !important; /* Even tighter */
}

/* FORCE compact product title - CLOSER */
.product-item h3,
.product-item h3.text-xl,
.text-xl.font-semibold.mb-2 {
    margin-bottom: 2px !important; /* Tighter */
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
}

/* FORCE compact description - CLOSER */
.product-item p,
.product-item p.text-gray-600 {
    margin-bottom: 3px !important; /* Tighter */
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important; /* Tighter */
    padding: 0 !important;
}

/* FORCE compact ALL badges and labels - CLOSER */
.product-item span,
.product-item .bg-green-100,
.product-item .bg-yellow-100,
.product-item span.px-2 {
    padding: 2px 6px !important;
    font-size: 11px !important;
    margin: 1px 0 !important; /* Tighter */
    line-height: 1.2 !important;
}

/* FORCE compact price */
.product-item .text-lg,
.product-item .font-bold,
.text-lg.font-bold.text-primary {
    font-size: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FORCE compact ALL buttons */
.product-item .btn-primary,
.product-item .btn-outline,
.product-item button,
.product-item a.btn-primary,
.product-item a.btn-outline {
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* FORCE compact Customize button */
.product-item a[href*="product-customize"] {
    padding: 7px 12px !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* FORCE minimum gap between buttons */
.product-item .flex.flex-col,
.product-item .flex.flex-col.gap-2 {
    gap: 6px !important;
    margin: 0 !important;
}

.product-item .flex.gap-2 {
    gap: 6px !important;
    margin: 0 !important;
}

/* FORCE minimum grid gap */
.grid.gap-8,
#productsGrid.grid,
div.grid {
    gap: 16px !important;
    row-gap: 16px !important;
    column-gap: 16px !important;
}

/* Desktop - optimal icon size */
@media (min-width: 1024px) {
    .grid.lg\\:grid-cols-3 {
        gap: 18px !important;
    }
    
    .product-item.card {
        padding: 12px !important;
    }
    
    .product-item .bg-gray-100 {
        height: 120px !important; /* Bigger icons */
        min-height: 120px !important;
        padding: 14px !important;
    }
    
    .product-item .bg-gray-100 span {
        font-size: 52px !important; /* Very visible */
    }
}

/* Mobile - bigger icons for visibility */
@media (max-width: 768px) {
    .product-item.card {
        padding: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .product-item .bg-gray-100 {
        height: 100px !important; /* Bigger for mobile */
        min-height: 100px !important;
        margin-bottom: 5px !important;
        padding: 12px !important;
    }
    
    .product-item .bg-gray-100 span {
        font-size: 44px !important; /* Bigger icons */
    }
    
    .product-item h3 {
        font-size: 14px !important;
    }
    
    .product-item p {
        font-size: 12px !important;
    }
}

/* Dark mode - match optimal size */
[data-theme="dark"] .product-item.card {
    padding: 12px !important;
}

[data-theme="dark"] .product-item .bg-gray-100 {
    height: 120px !important; /* Match light mode */
    min-height: 120px !important;
    padding: 14px !important;
}

[data-theme="dark"] .product-item .bg-gray-100 span {
    font-size: 52px !important; /* Match light mode - bigger */
}

/* FORCE remove ALL extra spacing */
.product-item *,
.product-item > *,
.product-item > * + * {
    margin-top: 0 !important;
}

/* FORCE compact star rating */
.product-item .flex.text-yellow-400,
.product-item .flex > div {
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-item .text-sm,
.product-item .text-sm.text-gray-600 {
    font-size: 11px !important;
    margin: 0 !important;
}

/* Tighter line height for all text */
.product-item * {
    line-height: 1.4 !important;
}

/* Badge adjustments */
.product-item span.px-2.py-1 {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* Price bold text */
.product-item .text-primary {
    display: inline-block;
    margin: 0 !important;
}

/* Button icons spacing */
.product-item a[href*="product-customize"] span {
    line-height: 1 !important;
}

/* Overall card height optimization */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

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

/* FORCE compact containers */
.container-custom {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* FORCE compact section padding */
.section-padding {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* FORCE remove page top spacing */
.min-h-screen.pt-32 {
    padding-top: 100px !important;
}

/* Grid container optimization */
#productsGrid {
    margin-top: 0 !important;
}

/* Remove extra margin from product items */
.product-item {
    height: fit-content !important;
}

/* Compact featured badge */
.bg-yellow-100 {
    padding: 3px 8px !important;
    font-size: 11px !important;
}

/* Compact category badge */
.bg-primary\/10 {
    padding: 3px 8px !important;
    font-size: 12px !important;
}

/* Min order badge compact */
.bg-green-100 {
    padding: 4px 10px !important;
    font-size: 11px !important;
}

/* Button row spacing */
.product-item > div:last-child {
    margin-top: 6px !important;
}

/* ============================================ */
/* NUCLEAR OPTION - MAXIMUM COMPACTNESS */
/* ============================================ */

/* Force all divs inside product cards to have minimal spacing */
.product-item div {
    margin: 0 !important;
}

/* Only allow specific margins where needed - MINIMAL */
.product-item > div:not(:first-child) {
    margin-top: 4px !important; /* Tighter */
}

/* Force flex containers to minimal gap */
.product-item .flex {
    gap: 4px !important;
}

/* Force flex column to minimal gap */
.product-item .flex-col {
    gap: 6px !important;
}

/* Remove all default Tailwind margins */
.product-item .mb-1,
.product-item .mb-2,
.product-item .mb-3,
.product-item .mb-4,
.product-item .mb-5,
.product-item .mb-6,
.product-item .mt-1,
.product-item .mt-2,
.product-item .mt-3,
.product-item .mt-4,
.product-item .my-1,
.product-item .my-2,
.product-item .my-3,
.product-item .my-4 {
    margin: 0 !important;
}

/* Force rating container - CLOSER */
.product-item .flex.items-center {
    margin: 2px 0 !important; /* Tighter */
    gap: 3px !important; /* Tighter */
}

/* Force category badge container - CLOSER */
.product-item > div:first-of-type {
    margin-bottom: 4px !important; /* Tighter */
}

/* Maximum compactness for all text elements */
.product-item h1,
.product-item h2,
.product-item h3,
.product-item h4,
.product-item h5,
.product-item h6,
.product-item p,
.product-item span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Only badges get minimal padding */
.product-item span.px-2,
.product-item span.bg-green-100,
.product-item span.bg-yellow-100,
.product-item span.bg-primary {
    padding: 2px 8px !important;
}

/* Icon emoji sizing */
.product-item a[href*="customize"] span:first-child {
    font-size: 14px !important;
}

/* Absolutely minimal card spacing */
.card.product-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}