/* ============================================================
   EcHubCategory — Front-office styles
   ============================================================ */


:root {
    --echub-primary: #009fe3;
}

.echub-product-slider,
.echub-subcat-slider,
.echub-blog-slider,
.echub-reviews-slider {
    --swiper-theme-color: var(--echub-primary);
}

.echub-page {
    width: 100%;
}

.echub-category-description {
    margin-bottom: 24px;
}

.echub-blocks-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.echub-block {
    width: 100%;
}

/* ── Block: Subcategories ─────────────────────────────────── */
.echub-block-subcategories .echub-block-title {
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 8px;
}

.echub-subcat-item {
    margin-bottom: 20px;
}

.echub-subcat-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.echub-subcat-link:hover {
    opacity: 0.8;
    text-decoration: none;
    color: inherit;
}

.echub-subcat-img {
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 4px;
    /* Gabarit fixe : sans lui, une image hors format impose sa hauteur à toute
       la ligne du carrousel et creuse un vide sous les autres vignettes. */
    aspect-ratio: 2 / 1;
    background: #fff;
}

.echub-subcat-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Le bloc emprunte l'identifiant #topsubcats et les classes .lasubcat / .laimg au
   module des pages de rayon, pour en reprendre l'habillage sans le redéfinir. Il en
   héritait aussi le masquage des images sous 992 px — un choix qui se défend sur une
   page de rayon, où le fil d'Ariane et les filtres situent déjà le visiteur, mais qui
   vide une page hub de sa raison d'être : sur téléphone, il ne restait que des
   intitulés empilés. La spécificité doit dépasser celle de la règle d'origine, qui
   porte elle aussi un identifiant. */
@media (max-width: 991px) {
    #topsubcats.echub-block-subcategories .lasubcat .laimg {
        display: block;
    }

    /* Les flèches sont posées par-dessus les slides et recouvraient le premier et le
       dernier intitulé. Leur réserver de la place par un padding ne suffit pas :
       Swiper fixe la largeur de chaque slide en style en ligne, le padding les
       décale sans les rétrécir. Elles sont donc retirées sur téléphone, où l'on fait
       défiler au doigt et où la pagination sert déjà de repère. */
    #topsubcats.echub-block-subcategories .swiper-button-prev,
    #topsubcats.echub-block-subcategories .swiper-button-next {
        display: none;
    }
}

.echub-subcat-name {
    display: block;
    border-color: var(--echub-primary);
    font-weight: 500;
    font-size: 0.95em;
}


/* ── Block: Subcategories – slider variant ────────────────── */

.echub-block-subcategories .swiper {
    /* Juste la place des points, pas davantage. */
    padding-bottom: 22px;
}

.echub-block-subcategories .swiper-pagination {
    bottom: 0;
    line-height: 1;
}

.echub-block-subcategories .swiper-slide,
.echub-block-subcategories .swiper-slide *,
.echub-block-subcategories .swiper-slide *::before,
.echub-block-subcategories .swiper-slide *::after {
    box-sizing: border-box;
}

/* ── Block: Product slider (Swiper) ───────────────────────── */

/* Reset box-sizing on native PS miniatures inside hub sliders */
.echub-block-product-slider .swiper-slide,
.echub-block-product-slider .swiper-slide *,
.echub-block-product-slider .swiper-slide *::before,
.echub-block-product-slider .swiper-slide *::after {
    box-sizing: border-box;
}


.echub-block-product-slider {
    position: relative;
}

.echub-block-product-slider .product-miniature {
    width: 100%!important;
    max-width: 100%!important;
}

.echub-block-product-slider .echub-block-title {
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 8px;
}

.echub-block-product-slider .swiper {
    padding-bottom: 40px; /* room for pagination dots */
}

.echub-product-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.echub-product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.echub-product-img {
    overflow: hidden;
    background: #f8f8f8;
    aspect-ratio: 1;
}

.echub-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.echub-product-card:hover .echub-product-img img {
    transform: scale(1.04);
}

.echub-product-img-placeholder {
    width: 100%;
    height: 100%;
    background: #ececec;
}

.echub-product-info {
    padding: 10px 12px 12px;
}

.echub-product-name {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.3;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.echub-product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.echub-price {
    font-weight: 700;
    font-size: 1em;
    color: #333;
}

.echub-price--reduced {
    color: #c0392b;
}

.echub-price-original {
    font-size: 0.85em;
    color: #999;
    text-decoration: line-through;
}

/* ── Block: Category info ─────────────────────────────────── */
.echub-block-category-info .echub-catinfo-title {
    margin: 0 0 16px;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.2;
}

.echub-catinfo-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.echub-catinfo-img {
    flex-shrink: 0;
}

.echub-catinfo-img img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.echub-catinfo-desc {
    flex: 1;
    min-width: 0;
    line-height: 1.6;
}

@media (max-width: 575px) {
    .echub-catinfo-body {
        flex-direction: column;
    }

    .echub-catinfo-img img {
        width: 100%;
    }
}

/* ── Block: Blog articles (Swiper) ────────────────────────── */
.echub-block-blog-articles .echub-block-title {
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 8px;
}

.echub-block-blog-articles .swiper {
    padding-bottom: 40px;
}

.echub-blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    height: 100%;
}

.echub-blog-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.echub-blog-img {
    overflow: hidden;
    background: #f8f8f8;
    aspect-ratio: 16 / 9;
}

.echub-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.echub-blog-card:hover .echub-blog-img img {
    transform: scale(1.04);
}

.echub-blog-img-placeholder {
    width: 100%;
    height: 100%;
    background: #ececec;
}

.echub-blog-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.echub-blog-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.35;
    margin-bottom: 8px;
}

.echub-blog-excerpt {
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ── Block: Category reviews (Swiper) ─────────────────────── */
.echub-block-reviews .echub-block-title {
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 8px;
}

.echub-block-reviews .swiper {
    padding-bottom: 40px;
}

.echub-review-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 20px;
    height: auto;
    box-sizing: border-box;
}

.echub-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}

/* Star rating */
.echub-review-stars {
    position: relative;
    display: inline-block;
    font-size: 1.2em;
    line-height: 1;
    white-space: nowrap;
}

.echub-stars-bg {
    color: #ddd;
    letter-spacing: 2px;
}

.echub-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f5a623;
    letter-spacing: 2px;
    white-space: nowrap;
}

.echub-review-date {
    font-size: 0.78em;
    color: #aaa;
    flex-shrink: 0;
}

/* Review text */
.echub-review-text {
    flex: 1;
    font-size: 0.9em;
    line-height: 1.6;
    color: #444;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer */
.echub-review-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    font-size: 0.82em;
}

.echub-review-author {
    font-weight: 600;
    color: #333;
}

.echub-review-product {
    color: #888;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.echub-review-product:hover {
    text-decoration: underline;
    color: #555;
}

.echub-page {
    padding-top: 35px;
}

.echub-page {
    --swiper-theme-color: #a7e8aa;
}