/* ============================================
   Category Styles (shared across pages)
   Merged from homepage.css and category_detail.css
   ============================================ */

/* Category Ribbon */
.category-ribbon {
    background-color: #f8f9fa;
}

/* Category Card */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: transparent;
    border-radius: 8px;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
    min-height: 90px;
}

.category-card:hover {
    background: #e9ecef;
    color: inherit;
}

.category-icon-wrapper {
    width: 65%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.category-icon {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.category-icon-fallback {
    font-size: 90%;
    color: #001639;
}

.category-name {
    font-weight: 400;
    text-align: center;
    margin-bottom: 4px;
    color: inherit;
}

.category-card:hover .category-name {
    text-decoration: none;
}

.category-count {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
}

/* Featured Products */
.featured-products {
    background-color: white;
}

/* Why Pilk Section */
.why-pilk {
    background-color: white;
}

.why-pilk h2 {
    color: #121f48;
    font-size: 1.75rem;
    line-height: 1.3;
}

.why-pilk p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Category Detail Header */
.category-detail-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.category-detail-header .page-title {
    font-weight: 600;
    color: #121f48;
}

/* Category Grid */
.category-detail-grid {
    background-color: #f8f9fa;
    padding: 24px 0;
}

/* Category Info Section */
.category-info-section {
    background-color: white;
    padding: 48px 0;
}

.category-info-section .why-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #6c757d;
}

.category-info-section .why-text p:last-child {
    margin-bottom: 0;
}

/* Why Text (shared) */
.why-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #6c757d;
}

.why-text p:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .category-info-section {
        padding: 32px 0;
    }

    .why-pilk {
        padding: 32px 0;
    }

    .why-pilk h2 {
        font-size: 1.5rem;
    }

    .category-ribbon {
        padding: 16px 0;
    }
}