/* Amazon Products Grid Styling - Enhanced & Compact */

.amazon-ad-container {
    display: none;
    margin: 1rem auto;
    /* Compact margin */
    max-width: 850px;
    /* More compact width */
    padding: 1rem;
    /* Reduced padding */
    background: linear-gradient(135deg, #fffbf7 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #ffe4b3;
}

/* Optimized Grid */
.amazon-products-grid {
    max-width: 850px;
    margin: 0 auto;
}

.amazon-header {
    text-align: center;
    margin-bottom: 0.75rem;
    /* Tighter spacing */
}

.amazon-header h3 {
    font-size: 1.1rem;
    color: #232f3e;
    margin-bottom: 0.1rem;
    font-weight: 700;
    /* Bold header */
}

.amazon-disclosure {
    font-size: 0.65rem;
    color: #666;
    font-style: italic;
    margin: 0;
    margin-bottom: 0.5rem;
}

/* Loading State */
.amazon-loading {
    text-align: center;
    padding: 1.5rem;
    color: #999;
    font-size: 0.85rem;
}

/* Products Container - Compact Grid */
.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    /* Slightly narrower columns */
    gap: 6px;
    /* Tighter gap */
}

/* Product Card Framework */
.product-card {
    background: white;
    border-radius: 8px;
    padding: 8px;
    /* Very compact padding */
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Base border */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 110px;
    /* Reduced height */
}

/* Hover Effects */
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- PREMIUM COLOR PALETTE --- */

/* 1. Health & Fitness (Emerald Green) */
.product-card[data-category="health"] {
    background: linear-gradient(180deg, #ECFDF5 0%, #ffffff 100%);
    border-top: 4px solid #10B981;
}

.product-card[data-category="health"] .product-cta {
    background: linear-gradient(135deg, #059669, #10B981);
}

/* 2. Travel & Maps (Ocean Blue) */
.product-card[data-category="travel"] {
    background: linear-gradient(180deg, #EFF6FF 0%, #ffffff 100%);
    border-top: 4px solid #3B82F6;
}

.product-card[data-category="travel"] .product-cta {
    background: linear-gradient(135deg, #2563EB, #3B82F6);
}

/* 3. Gifts & Party (Royal Purple) */
.product-card[data-category="gifts"] {
    background: linear-gradient(180deg, #F5F3FF 0%, #ffffff 100%);
    border-top: 4px solid #8B5CF6;
}

.product-card[data-category="gifts"] .product-cta {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
}

/* 4. Home, Office & Default (Sunset Orange - Replacing Grey) */
.product-card[data-category="office"],
.product-card[data-category="default"] {
    background: linear-gradient(180deg, #FFF7ED 0%, #ffffff 100%);
    border-top: 4px solid #F97316;
}

.product-card[data-category="office"] .product-cta,
.product-card[data-category="default"] .product-cta {
    background: linear-gradient(135deg, #EA580C, #F97316);
}


/* Decorative Icon */
.product-icon {
    font-size: 1.25rem;
    /* Smaller icon */
    margin-bottom: 0.25rem;
    align-self: center;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Product Info */
.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-title {
    font-size: 0.8rem;
    font-weight: 700;
    /* BOLD for better visibility */
    color: #111827;
    /* Darker black for contrast */
    margin-bottom: 0.4rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.4em;
    text-overflow: ellipsis;
}

/* Compact CTA Button */
.product-cta {
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    /* Slimmer button */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    width: 100%;
}

.product-cta:hover {
    opacity: 0.95;
    transform: scale(1.02);
    text-decoration: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .products-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}