#ecla-featured-section {
    margin-bottom : 24px;
    background : var(--card-bg);
    border-radius : 10px;
    padding : 14px 12px 16px;
    border : 1px solid var(--border-color);
    box-shadow : 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ecla-featured-header {
    margin-bottom : 12px;
}
.ecla-featured-title {
    font-size : 1.05rem;
    color : var(--secondary-color);
    margin : 0;
    font-weight : 700;
}
.ecla-carousel-viewport {
    position : relative;
    display : flex;
    align-items : center;
    gap : 6px;
}
.ecla-carousel-track {
    display : flex;
    gap : 14px;
    overflow : hidden;
    scroll-behavior : smooth;
    flex : 1;
    min-width : 0;
}
.ecla-featured-card {
    flex : 0 0 calc(25% - 11px);
    min-width : 160px;
    background : var(--card-bg);
    border : 2px solid gold;
    border-radius : 10px;
    overflow : hidden;
    cursor : pointer;
    transition : transform 0.2s, box-shadow 0.2s;
    box-shadow : 0 2px 8px rgba(255, 215, 0, 0.25);
}
.ecla-featured-card:hover {
    transform : translateY(-3px);
    box-shadow : 0 6px 18px rgba(255, 215, 0, 0.4);
}
.ecla-featured-card img {
    width : 100%;
    height : 120px;
    object-fit : cover;
    display : block;
}
.ecla-featured-card-body {
    padding : 8px 10px;
}
.ecla-featured-card-title {
    font-size : 13px;
    font-weight : 700;
    color : var(--secondary-color);
    margin : 0 0 4px;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
}
.ecla-featured-card-price {
    font-size : 12px;
    color : var(--primary-color);
    font-weight : 600;
}
.ecla-featured-card-type {
    display : inline-block;
    font-size : 10px;
    padding : 1px 6px;
    background : var(--primary-color);
    color : #fff;
    border-radius : 3px;
    margin-top : 4px;
}
.ecla-featured-no-img {
    width : 100%;
    height : 120px;
    display : flex;
    align-items : center;
    justify-content : center;
    background : var(--bg-color);
    color : #aaa;
    font-size : 12px;
}
.ecla-carousel-arrow {
    flex-shrink : 0;
    background : var(--primary-color);
    color : #fff;
    border : none;
    width : 44px;
    height : 44px;
    border-radius : 50%;
    font-size : 20px;
    font-weight : bold;
    cursor : pointer;
    line-height : 1;
    display : flex;
    align-items : center;
    justify-content : center;
    transition : background 0.2s, opacity 0.2s;
    z-index : 2;
    position : relative;
}
.ecla-carousel-arrow::before {
    content : '';
    position : absolute;
    inset : -4px;
}
.ecla-carousel-arrow:hover {
    background : var(--secondary-color);
}
.ecla-carousel-arrow:disabled {
    opacity : 0.3;
    cursor : default;
}
.ecla-carousel-dots {
    display : flex;
    justify-content : center;
    gap : 6px;
    margin-top : 10px;
}
.ecla-carousel-dot {
    width : 8px;
    height : 8px;
    border-radius : 50%;
    background : var(--border-color);
    border : none;
    cursor : pointer;
    transition : background 0.2s;
    padding : 0;
}
.ecla-carousel-dot.active {
    background : var(--primary-color);
}
@media (max-width: 992px) {
    .ecla-featured-card {
        flex : 0 0 calc(33.33% - 10px);
    }
}
@media (max-width: 768px) {
    .ecla-featured-card {
        flex : 0 0 calc(50% - 7px);
    }
    .ecla-carousel-arrow {
        width : 44px;
        height : 44px;
        font-size : 18px;
    }
}
@media (max-width: 380px) {
    .ecla-featured-card {
        flex : 0 0 100%;
    }
}