/* --- Modern Category Grid Styles --- */

/* 1. Main Colors & Fonts (Variables for easy editing) */
:root {
    --cshp-card-bg: #ffffff;
    --cshp-primary-text: #2d3748; /* Dark slate gray */
    --cshp-secondary-text: #4a5568; /* Lighter gray */
    --cshp-accent-color: #3182ce;   /* A nice blue for links/bullets */
    --cshp-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --cshp-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 2. Grid Container */
.cshp-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* A bit more space between cards */
    margin: 20px 0;
}

/* 3. The Modern Card Design */
.cshp-category-box {
    width: calc(25% - 18px); /* Adjusted for the new gap */
    background: var(--cshp-card-bg);
    border-radius: 12px; /* Softer, rounded corners */
    overflow: hidden; /* Ensures the image respects the rounded corners */
    box-shadow: var(--cshp-card-shadow);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    border: none; /* Replaced with box-shadow */
}

/* 4. Card Hover Effect */
.cshp-category-box:hover {
    transform: translateY(-5px); /* Lifts the card up slightly */
    box-shadow: var(--cshp-card-shadow-hover);
}

/* 5. Nicer Image Placement */
.cshp-category-box img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 10; /* Prevents image stretching, adjust as needed */
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* Smooth zoom effect */
}

.cshp-category-box:hover img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* The link wrapping image/title is no longer needed for padding */
a.cshp-category-link {
    text-decoration: none;
    color: inherit;
}

/* 6. Title Typography */
.cshp-category-box h2.cshp-category-title {
    font-size: 1.25em;
    font-weight: 600; /* Semibold for a modern feel */
    color: var(--cshp-primary-text);
    text-align: left;
    margin: 0;
    padding: 16px;
}

/* 7. Nicer Bullets for Subcategories */
.cshp-category-box ul.cshp-subcategory-list {
    list-style: none; /* Remove default bullets */
    padding: 0 20px 20px;
    margin: 0;
    flex-grow: 1; /* Helps align items in columns if card heights vary */
}

.cshp-category-box ul.cshp-subcategory-list li {
    padding: 6px 0;
    color: var(--cshp-secondary-text);
}

/* The custom bullet using the ::before pseudo-element */
.cshp-category-box ul.cshp-subcategory-list li::before {
    content: '→'; /* You can change this to '•', '✓', etc. */
    color: var(--cshp-accent-color);
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
}

.cshp-category-box ul.cshp-subcategory-list li a {
    text-decoration: none;
    color: var(--cshp-secondary-text);
    transition: color 0.2s ease;
}

.cshp-category-box ul.cshp-subcategory-list li a:hover {
    color: var(--cshp-accent-color); /* Link color changes to accent on hover */
}

span.cshp-product-count {
    opacity: 0.8;
    font-size: 0.9em;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .cshp-category-box {
        width: calc(33.333% - 16px); /* 3 columns */
    }
}

@media (max-width: 768px) {
    .cshp-category-box {
        width: calc(50% - 12px); /* 2 columns */
    }
}

@media (max-width: 480px) {
    .cshp-category-box {
        width: 100%; /* 1 column */
        margin: 0 30px;
    }
}