/* --- Base Container & Links --- */
.wccs-category-slider, .wccs-grid-layout {
    padding: 20px 10px 40px 10px !important;
    overflow: hidden;
    box-sizing: border-box;
}

.wccs-category-slider a, .wccs-grid-layout a {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.3s ease;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Image Aspect Ratio Engine --- */
.wccs-category-slider img, .wccs-grid-layout img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    border-radius: 8px !important;
    margin: 0 0 15px 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover !important; 
    display: block !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.wccs-ratio-square img { aspect-ratio: 1 / 1 !important; height: 100% !important; }
.wccs-ratio-portrait img { aspect-ratio: 3 / 4 !important; height: 100% !important; }
.wccs-ratio-landscape img { aspect-ratio: 4 / 3 !important; height: 100% !important; }

/* --- Template 1: Standard (Text Below) --- */
.wccs-template-standard .wccs-content-wrap { text-align: center !important; }
.wccs-template-standard a:hover { transform: translateY(-5px); }
.wccs-template-standard a:hover img { 
    transform: scale(1.03); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
}

/* --- Template 2: Modern Overlay (Premium Look) --- */
.wccs-template-overlay a { position: relative !important; border-radius: 8px !important; overflow: hidden !important; }
.wccs-template-overlay img { margin-bottom: 0 !important; }
.wccs-template-overlay .wccs-content-wrap {
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 40px 20px 20px 20px !important;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.85)) !important;
    text-align: center !important; opacity: 0; transform: translateY(15px); transition: all 0.3s ease;
    display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
}
.wccs-template-overlay a:hover .wccs-content-wrap { opacity: 1; transform: translateY(0); }
.wccs-template-overlay a:hover img { transform: scale(1.05); }
.wccs-template-overlay h3 { color: #fff !important; }
.wccs-template-overlay .wccs-count { color: #eee !important; }

/* --- Template 3: Minimalist (No Borders / No Shadows) --- */
.wccs-template-minimal img {
    border-radius: 0 !important; /* Removes curved edges */
    box-shadow: none !important; /* Removes shadow */
}
.wccs-template-minimal .wccs-content-wrap { text-align: center !important; padding-top: 5px !important; }
.wccs-template-minimal a:hover { transform: translateY(-3px); }
.wccs-template-minimal a:hover img { 
    transform: scale(1.02); 
    box-shadow: none !important; /* Keeps shadow removed on hover */
}

/* --- Strict Typography & Colors --- */
.wccs-category-slider h3, .wccs-grid-layout h3 {
    margin: 0 0 5px 0 !important; font-size: 1.2em !important; font-weight: 600 !important;
    line-height: 1.3 !important; transition: color 0.3s ease; color: #333 !important; border: none !important; padding: 0 !important;
}

.wccs-template-standard a:hover h3, .wccs-template-minimal a:hover h3 { color: var(--hover-color) !important; }

.wccs-category-slider .wccs-count, .wccs-grid-layout .wccs-count { 
    margin: 0 0 10px 0 !important; font-size: 0.9em !important; color: #777 !important; display: block !important;
}

/* --- Custom "Shop Now" Button --- */
.wccs-category-slider .wccs-btn, .wccs-grid-layout .wccs-btn {
    display: inline-block !important; margin-top: 10px !important; padding: 8px 20px !important;
    font-size: 0.9em !important; font-weight: 500 !important; border-radius: 4px !important;
    background: var(--btn-bg) !important; color: var(--btn-txt) !important;
    transition: opacity 0.3s ease !important; line-height: 1.5 !important; text-transform: none !important;
}
.wccs-category-slider a:hover .wccs-btn, .wccs-grid-layout a:hover .wccs-btn { opacity: 0.85 !important; }

/* --- Navigation Arrows & Pagination Dots --- */
.wccs-category-slider .swiper-button-next, .wccs-category-slider .swiper-button-prev {
    color: var(--arrow-color) !important; background: rgba(255, 255, 255, 0.9) !important;
    width: 40px !important; height: 40px !important; border-radius: 50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
.wccs-category-slider .swiper-button-next:after, .wccs-category-slider .swiper-button-prev:after { font-size: 16px !important; font-weight: bold !important; }
.wccs-category-slider .swiper-pagination-bullet-active { background: var(--arrow-color) !important; }

/* --- GRID FALLBACK ENGINE --- */
.wccs-grid-wrapper { display: grid; gap: 20px; grid-template-columns: repeat(var(--desktop-cols, 4), 1fr); }
@media (max-width: 1024px) { .wccs-grid-wrapper { grid-template-columns: repeat(var(--tablet-cols, 2), 1fr); } }
@media (max-width: 768px) { .wccs-grid-wrapper { grid-template-columns: repeat(var(--mobile-cols, 1), 1fr); } }