/**
 * Strong overrides for category styling
 * To ensure rectangular categories instead of circular
 */

/* Force rectangular style for category images in shop page */
.categories-slider .category-item .category-image,
.categories-slider .category-item .category-image img,
.category-image,
.category-image img,
.categories-slider .category-item .category-link {
    border-radius: 10px !important; /* Override any other border-radius */
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
}

.categories-slider .category-item {
    flex: 0 0 220px !important;
    width: 220px !important;
}

.categories-slider .category-item .category-image {
    border-radius: 10px !important;
    width: 100% !important;
    height: 150px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.category-image img {
    border-radius: 10px !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

.category-placeholder {
    border-radius: 10px !important;
    background-color: #f0f0f0 !important;
}

/* Ensure text shows properly */
.categories-slider .category-name,
.category-name {
    position: absolute !important;
    bottom: 40px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    z-index: 10 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.categories-slider .category-count,
.category-count {
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    z-index: 10 !important;
}

/* Add overlay gradient for text readability */
.categories-slider .category-image::after,
.category-image::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent) !important;
    z-index: 5 !important;
    border-radius: 0 0 10px 10px !important;
}