/*
   products-grid.css
   LOCATION : motta-child/assets/css/products-grid.css
   ════════════════════════════════════════════════════════════ */
.tz-products .swiper,
.tz-products .swiper-container,
.tz-sale     .swiper,
.tz-sale     .swiper-container,
.tinza-tabs__panel .swiper,
.tinza-tabs__panel .swiper-container,
.tinza-products-wrap .swiper,
.tinza-products-wrap .swiper-container {
    overflow: visible !important;
    width:    100% !important;
}

.tz-products .swiper-wrapper,
.tz-sale     .swiper-wrapper,
.tinza-tabs__panel .swiper-wrapper,
.tinza-products-wrap .swiper-wrapper,
ul.products.swiper-wrapper,
ul.tinza-products.swiper-wrapper {
    display:               grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    transform:             none !important;
    flex-wrap:             wrap !important;
    width:                 100% !important;
    gap:                   20px !important;
    margin:                0 !important;
    padding:               0 !important;
}

.tz-products .swiper-button-prev,
.tz-products .swiper-button-next,
.tz-products .swiper-pagination,
.tz-sale     .swiper-button-prev,
.tz-sale     .swiper-button-next,
.tz-sale     .swiper-pagination,
.tinza-tabs__panel .swiper-button-prev,
.tinza-tabs__panel .swiper-button-next,
.tinza-tabs__panel .swiper-pagination {
    display: none !important;
}

.tz-products .swiper-slide,
.tz-sale     .swiper-slide,
.tinza-tabs__panel .swiper-slide {
    width:        auto !important;
    margin-right: 0 !important;
    flex-shrink:  1 !important;
}


/* ════════════════════════════════════════════════════════════
   1. SECTIONS WRAPPERS
   ════════════════════════════════════════════════════════════ */
.tz-products,
.tz-sale,
.tinza-new-arrivals {
    width:       100%;
    max-width:   1318px;
    margin:      0 auto;
    padding:     32px 60px;
    box-sizing:  border-box;
    font-family: 'Chillax', sans-serif;
}


/* ════════════════════════════════════════════════════════════
   2. SECTION HEADER (title + arrow)
   ════════════════════════════════════════════════════════════ */
.tz-section-head {
    display:     flex;
    align-items: center;
    gap:         2px;
    margin:      0 0 32px;
}
.tz-section-head__title {
    font-family:    'Chillax', sans-serif;
    font-weight:    600;
    font-size:      20px;
    line-height:    34px;
    letter-spacing: -0.01em;
    color:          #161A17;
    margin:         0;
}
.tz-section-head__arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    color:           #161A17;
    transition:      transform 150ms ease;
}
.tz-section-head__arrow:hover { transform: translateX(4px); }
.tz-section-head__arrow svg {
    width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none;
}


/* ════════════════════════════════════════════════════════════
   3. GRID LAYOUT
   ════════════════════════════════════════════════════════════ */
ul.tz-products__grid,
ul.tz-sale__grid,
ul.tinza-products,
.tz-products ul.products,
.tz-sale ul.products,
.tinza-tabs__panel ul.tinza-products,
.tinza-tabs__panel ul.products {
    display:               grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap:                   20px !important;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
    width:                 100% !important;
    columns:               unset !important;
    overflow:              visible !important;
    transform:             none !important;
}

ul.tz-products__grid > li,
ul.tz-sale__grid > li,
ul.tinza-products > li,
.tz-products ul.products > li,
.tz-sale ul.products > li,
.tinza-tabs__panel ul.tinza-products > li,
.tinza-tabs__panel ul.products > li {
    float:        none !important;
    clear:        none !important;
    width:        auto !important;
    max-width:    none !important;
    margin:       0 !important;
    padding:      0 !important;
    list-style:   none !important;
    background:   transparent !important;
    flex-shrink:  1 !important;
    transform:    none !important;
}

ul.tz-products__grid::before, ul.tz-products__grid::after,
ul.tz-sale__grid::before,    ul.tz-sale__grid::after,
ul.tinza-products::before,   ul.tinza-products::after {
    content: none !important;
    display: none !important;
}


/* ════════════════════════════════════════════════════════════
   4. CARD WRAPPER
   ════════════════════════════════════════════════════════════ */
.tz-pcard,
.tinza-card,
li.tz-pcard,
li.tinza-card {
    display:        flex !important;
    flex-direction: column !important;
    width:          100% !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
    background:     transparent !important;
    box-shadow:     none !important;
    text-align:     left !important;
    list-style:     none !important;
    position:       relative !important;
}


/* ════════════════════════════════════════════════════════════
   5. IMAGE WRAPPER
   ════════════════════════════════════════════════════════════ */
.tz-pcard__img,
.tinza-card__img {
    position:      relative !important;
    width:         100% !important;
    aspect-ratio:  1 / 1;
    border-radius: 16px !important;
    overflow:      hidden !important;
    background:    #E5E0DA !important;
    margin:        0 !important;
    padding:       0 !important;
}

.tz-pcard__img a,
.tinza-card__img a {
    display:         block !important;
    width:           100% !important;
    height:          100% !important;
    text-decoration: none !important;
    border:          none !important;
}

.tz-pcard__img img,
.tinza-card__img img {
    width:         100% !important;
    height:        100% !important;
    object-fit:    cover !important;
    display:       block !important;
    border-radius: 16px !important;
    max-width:     100% !important;
    margin:        0 !important;
    padding:       0 !important;
    transition:    transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tz-pcard:hover    .tz-pcard__img img,
.tinza-card:hover  .tinza-card__img img { transform: scale(1.04); }

/* ════════════════════════════════════════════════════════════
   7. CARD BODY
   ════════════════════════════════════════════════════════════ */
.tz-pcard__body,
.tinza-card__body {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    width:          100% !important;
    padding:        12px 16px 16px !important;
    gap:            6px !important;
    box-sizing:     border-box !important;
    margin:         0 !important;
    background:     transparent !important;
}


/* ════════════════════════════════════════════════════════════
   8. PRODUCT TITLE
   ════════════════════════════════════════════════════════════ */
h3.tz-pcard__title,
h3.tinza-card__name,
h2.tinza-card__name,
.tz-pcard__title,
.tinza-card__name,
.tinza-card .woocommerce-loop-product__title,
.tz-pcard  .woocommerce-loop-product__title {
    width:          100% !important;
    margin:         0 !important;
    padding:        0 !important;
    font-family:    'Chillax', sans-serif !important;
    font-weight:    500 !important;
    font-size:      16px !important;
    line-height:    22px !important;
    letter-spacing: 0.005em !important;
    color:          #161A17 !important;
    text-transform: none !important;
    text-align:     left !important;
    white-space:    nowrap !important;
    overflow:       hidden !important;
    text-overflow:  ellipsis !important;
    display:        block !important;
    background:     transparent !important;
    border:         none !important;
    text-decoration: none !important;
    text-shadow:    none !important;
}
.tz-pcard__title a,
.tinza-card__name a,
.tinza-card .woocommerce-loop-product__title a,
.tz-pcard  .woocommerce-loop-product__title a {
    color:           inherit !important;
    text-decoration: none !important;
    font-weight:     inherit !important;
    font-size:       inherit !important;
    line-height:     inherit !important;
    background:      transparent !important;
    border:          none !important;
}


/* ════════════════════════════════════════════════════════════
   9. SELLER ROW
   ════════════════════════════════════════════════════════════ */
.tz-pcard__seller,
.tinza-card__seller,
.tz-seller {
    display:     flex !important;
    align-items: center !important;
    gap:         6px !important;
    margin:      0 !important;
    padding:     0 !important;
}

.tz-pcard__avatar,
.tinza-card__avatar,
.tz-seller__avatar {
    flex-shrink:   0 !important;
    width:         32px !important;
    height:        32px !important;
    min-width:     32px !important;
    border-radius: 99px !important;
    overflow:      hidden !important;
    background:    #E1E2DC !important;
    display:       block !important;
    margin:        0 !important;
    padding:       0 !important;
}
.tz-pcard__avatar img,
.tinza-card__avatar img,
.tz-seller__avatar img {
    width:         100% !important;
    height:        100% !important;
    object-fit:    cover !important;
    display:       block !important;
    border-radius: 99px !important;
    margin:        0 !important;
}

.tz-pcard__seller-meta,
.tinza-card__seller-info,
.tz-seller__meta {
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
    margin:         0 !important;
    padding:        0 !important;
}

.tz-pcard__seller-name,
.tinza-card__seller-name,
.tz-seller__name {
    font-family:    'Chillax', sans-serif !important;
    font-weight:    400 !important;
    font-size:      13px !important;
    line-height:    18px !important;
    text-transform: uppercase !important;
    color:          #161A17 !important;
    letter-spacing: 0.005em !important;
    margin:         0 !important;
    padding:        0 !important;
    background:     transparent !important;
}

.tz-pcard__stars,
.tinza-card__stars,
.tz-stars {
    display:     flex !important;
    align-items: center !important;
    gap:         2px !important;
    margin:      0 !important;
    padding:     0 !important;
}
.tz-pcard__stars svg,
.tinza-card__stars svg,
.tz-stars svg {
    width:  10px !important;
    height: 10px !important;
}


/* ════════════════════════════════════════════════════════════
   10. PRICE ROW
   ════════════════════════════════════════════════════════════ */
.tz-pcard__row,
.tinza-card__footer,
.price-row {
    display:         flex !important;
    flex-direction:  row !important;
    justify-content: space-between !important;
    align-items:     center !important;
    width:           100% !important;
    gap:             4px !important;
    margin:          0 !important;
    padding:         0 !important;
    flex-wrap:       wrap !important;
    background:      transparent !important;
}

.tz-pcard__prices,
.tinza-card__price-wrap {
    display:     flex !important;
    align-items: baseline !important;
    gap:         8px !important;
    margin:      0 !important;
    padding:     0 !important;
    background:  transparent !important;
}

/* Sale / current price — green */
.tz-pcard__price,
.tinza-card__price-sale,
.tinza-card__price,
.tz-pcard__prices .price,
.tz-pcard__prices ins,
.tz-pcard__prices ins bdi,
.tz-pcard__prices .woocommerce-Price-amount,
.tinza-card__price ins,
.tinza-card__price ins bdi,
.tinza-card__price .woocommerce-Price-amount,
.price ins,
.price ins bdi,
.tinza-card .price,
.tinza-card .price ins,
.tinza-card .price ins bdi,
.tinza-card .price .woocommerce-Price-amount {
    font-family:     'Chillax', sans-serif !important;
    font-weight:     600 !important;
    font-size:       18px !important;
    line-height:     25px !important;
    color:           #065F15 !important;
    text-decoration: none !important;
    background:      transparent !important;
    background-color: transparent !important;
    margin:          0 !important;
    padding:         0 !important;
    box-shadow:      none !important;
    border:          none !important;
}

.tz-pcard__prices ins,
.tinza-card__price ins,
.tinza-card .price ins {
    text-decoration: none !important;
}

/* Old price — strikethrough grey */
.tz-pcard__price-old,
.tinza-card__price-reg,
.tz-pcard__prices del,
.tz-pcard__prices del bdi,
.tz-pcard__prices del .woocommerce-Price-amount,
.tinza-card__price del,
.tinza-card__price del bdi,
.tinza-card__price del .woocommerce-Price-amount,
.price del,
.price del bdi,
.tinza-card .price del,
.tinza-card .price del bdi,
.tinza-card .price del .woocommerce-Price-amount {
    font-family:     'Chillax', sans-serif !important;
    font-weight:     400 !important;
    font-size:       15px !important;
    line-height:     22px !important;
    text-decoration: line-through !important;
    color:           #5A5A5A !important;
    background:      transparent !important;
    background-color: transparent !important;
    margin:          0 !important;
    padding:         0 !important;
    opacity:         1 !important;
    box-shadow:      none !important;
}

/* Free shipping pill */
.tz-pcard__ship,
.tinza-card__badge,
.tz-badge-ship {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    height:          22px !important;
    padding:         0 8px !important;
    background:      #E5F5E8 !important;
    border-radius:   24px !important;
    font-family:     'Chillax', sans-serif !important;
    font-weight:     500 !important;
    font-size:       12px !important;
    line-height:     1 !important;
    color:           #065F15 !important;
    text-transform:  capitalize !important;
    white-space:     nowrap !important;
    border:          none !important;
    margin:          0 !important;
}


/* ════════════════════════════════════════════════════════════
   11. NEUTRALIZE WooCommerce 
   ════════════════════════════════════════════════════════════ */
.tz-pcard .added_to_cart,
.tz-pcard .add_to_cart_button,
.tz-pcard .button:not(.tz-pcard__wish),
.tz-pcard .onsale,
.tz-pcard .yith-wcwl-add-to-wishlist:not(.tz-pcard__wish),
.tz-pcard .product-thumbnail-secondary,
.tz-pcard .motta-product-buttons,
.tz-pcard .motta-loop-buttons,
.tz-pcard .quick-view-button,
.tz-pcard .star-rating,
.tz-pcard .countdown-product,
.tinza-card .added_to_cart,
.tinza-card .add_to_cart_button,
.tinza-card .button:not(.tinza-card__wish),
.tinza-card .onsale,
.tinza-card .yith-wcwl-add-to-wishlist:not(.tinza-card__wish),
.tinza-card .product-thumbnail-secondary,
.tinza-card .motta-product-buttons,
.tinza-card .motta-loop-buttons,
.tinza-card .quick-view-button,
.tinza-card .star-rating,
.tinza-card .countdown-product { display: none !important; }


/* ════════════════════════════════════════════════════════════
   12. RESPONSIVE — TABLET ≤ 1024px → 2 cols
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    ul.tz-products__grid,
    ul.tz-sale__grid,
    ul.tinza-products,
    .tz-products ul.products,
    .tz-sale ul.products,
    .tinza-tabs__panel ul.tinza-products,
    .tinza-tabs__panel ul.products,
    .tz-products .swiper-wrapper,
    .tz-sale     .swiper-wrapper,
    .tinza-tabs__panel .swiper-wrapper,
    ul.products.swiper-wrapper,
    ul.tinza-products.swiper-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .tz-products,
    .tz-sale,
    .tinza-new-arrivals { padding: 24px !important; }
}


/* ════════════════════════════════════════════════════════════
   13. RESPONSIVE — MOBILE ≤ 768px → horizontal scroll
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tz-products,
    .tz-sale,
    .tinza-new-arrivals { padding: 16px 0 16px 12px !important; }


    ul.tz-products__grid,
    ul.tz-sale__grid,
    ul.tinza-products,
    .tz-products ul.products,
    .tz-sale ul.products,
    .tinza-tabs__panel ul.tinza-products,
    .tinza-tabs__panel ul.products,
    .tz-products .swiper-wrapper,
    .tz-sale     .swiper-wrapper,
    .tinza-tabs__panel .swiper-wrapper,
    ul.products.swiper-wrapper,
    ul.tinza-products.swiper-wrapper {
        display:                    flex !important;
        grid-template-columns:      none !important;
        flex-wrap:                  nowrap !important;
        overflow-x:                 auto !important;
        scroll-snap-type:           x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap:                        12px !important;
        padding-right:              16px !important;
    }
    ul.tz-products__grid::-webkit-scrollbar,
    ul.tz-sale__grid::-webkit-scrollbar,
    ul.tinza-products::-webkit-scrollbar { display: none !important; }

    ul.tz-products__grid > li,
    ul.tz-sale__grid > li,
    ul.tinza-products > li,
    .tz-products ul.products > li,
    .tz-sale ul.products > li,
    .tinza-tabs__panel ul.tinza-products > li,
    .tinza-tabs__panel ul.products > li {
        flex-shrink:       0 !important;
        width:             280px !important;
        scroll-snap-align: start !important;
    }

    .tz-pcard__body,
    .tinza-card__body  { padding: 10px 12px 14px !important; }

    .tz-pcard__title,
    .tinza-card__name { font-size: 15px !important; }

    .tz-pcard__price,
    .tinza-card__price-sale,
    .tinza-card__price { font-size: 16px !important; }
}


/* ════════════════════════════════════════════════════════════
   14. CORRECTION ALIGNEMENT CARTES — MÊME HAUTEUR
   ════════════════════════════════════════════════════════════ */
/* Force toutes les cartes à avoir la même hauteur */
.tz-pcard,
.tinza-card,
li.tz-pcard,
li.tinza-card,
.tinza-product-card {
    height: 100% !important;
    min-height: 450px !important;
}

/* Force le body à prendre tout l'espace restant */
.tz-pcard__body,
.tinza-card__body,
.tinza-product-card__body {
    flex: 1 !important;
}

/* Force les titres à hauteur fixe (max 2 lignes) */
h3.tz-pcard__title,
.tz-pcard__title,
.tinza-card__name,
.tinza-product-card__title {
    min-height: 44px !important;
    max-height: 44px !important;
}

h3.tz-pcard__title a,
.tz-pcard__title a,
.tinza-card__name a,
.tinza-product-card__title a {
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
}

/* Force la section seller à hauteur fixe */
.tz-pcard__seller,
.tinza-card__seller,
.tinza-product-card__shop {
    min-height: 40px !important;
}

/* Force le prix à rester en bas */
.tz-pcard__row,
.tinza-card__footer,
.tinza-product-card__footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Force le grid à aligner toutes les cartes */
ul.tz-products__grid,
.tz-products__grid {
    align-items: stretch !important;
}

/* Force toutes les images à être strictement carrées */
.tz-pcard__img,
.tinza-card__img,
.tinza-product-card__image-wrap {
    flex-shrink: 0 !important;
}


/* ════════════════════════════════════════════════════════════
   15. EMPILEMENT VERTICAL DES SECTIONS
   ════════════════════════════════════════════════════════════ */

/* Forcer l'empilement vertical des sections */
.tz-products,
.tz-sale,
.tinza-new-arrivals,
section[id*="products"],
section[id*="sale"] {
    display: block !important;
    clear: both !important;
    float: none !important;
    position: relative !important;
}

/* Forcer qu'aucune section ne flotte à côté d'une autre */
.tz-products::after,
.tz-sale::after,
.tinza-new-arrivals::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Supprimer tout margin/padding qui pourrait créer des espacements indésirables */
.tz-products + .tz-sale,
.tz-sale + .tz-products,
.tz-products + .tinza-new-arrivals,
.tz-sale + .tinza-new-arrivals {
    margin-top: 0 !important;
}

/* Ajouter un espacement cohérent entre les sections */
.tz-products {
    margin-bottom: 40px !important;
}

.tz-sale {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

/* Match tz-products card internals on tz-sale grids (mobile sizing) */
@media (max-width: 768px) {
    .tz-sale .tz-pcard__seller,
    .tz-sale .tinza-card__seller,
    .tz-sale .tinza-product-card__shop {
        min-height: 40px !important;
    }

    .tz-sale .tz-pcard__body,
    .tz-sale .tinza-card__body {
        padding: 10px 12px 14px !important;
    }

    .tz-sale .tz-pcard__title,
    .tz-sale .tinza-card__name {
        font-size: 15px !important;
    }

    .tz-sale .tz-pcard__price,
    .tz-sale .tinza-card__price-sale,
    .tz-sale .tz-pcard__price { /* keep selector compatibility */
        font-size: 16px !important;
    }
}


.tinza-new-arrivals {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* FORCE l'ordre d'affichage des sections */
.tz-products {
    order: 1 !important;
}

.tz-sale {
    order: 2 !important;
}

.tinza-new-arrivals {
    order: 3 !important;
}

/* S'assurer que le conteneur parent permet l'empilement */
.tz-products__inner,
.tz-sale__inner,
.tinza-section__inner {
    display: block !important;
    clear: both !important;
}

/* Éviter tout inline-block ou flex qui casserait l'empilement */
.tz-products,
.tz-sale,
.tinza-new-arrivals {
    display: block !important;
    flex: none !important;
}

/* ════════════════════════════════════════════════════════════
   19. CORRECTION TOTALE : LARGEUR PLEINE POUR SALE (DESKTOP)
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
    /* Cibler la section elle-même et tous les parents possibles (Elementor, thème, etc.) */
    .tz-sale,
    .tz-sale .elementor-widget-container,
    .tz-sale .elementor-element,
    .tz-sale .elementor-column,
    .tz-sale .elementor-widget-wrap,
    .tz-sale .elementor-element-populated,
    .tz-sale > div,
    .tz-sale + *,
    *:has(> .tz-sale) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 100% !important;
    }

    /* Reappliquer les dimensions souhaitées à la section elle-même *
    .tz-sale {
        max-width: 1318px !important;
        width: 100% !important;
        padding: 32px 60px !important;
        margin: 0 auto 40px auto !important;
        box-sizing: border-box !important;
    }

    /* La grille prend toute la largeur disponible */
    .tz-sale .tz-sale__grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Forcer les cartes à la même hauteur que les products */
    .tz-sale .tz-pcard {
        min-height: 480px !important;
        max-height: 480px !important;
    }

    /* Supprimer tout décalage du titre */
    .tz-sale .tz-section-head {
        padding-right: 0 !important;
        margin-bottom: 32px !important;
    }
}


/* ════════════════════════════════════════════════════════════
   20. CORRECTION WISHLIST — ÉTAT "LOADING" + "ADDED"
   ════════════════════════════════════════════════════════════ */

.js-wish.is-loading {
    opacity: 0.5 !important;
    cursor:  wait !important;
}

/* Produit ajouté → cœur rempli cuivre */
.js-wish.is-wished svg {
    fill:   #A87A63 !important;
    stroke: #A87A63 !important;
}



/* ════════════════════════════════════════════════════════════


/* ════════════════════════════════════════════════════════════
   21. CONTENEURS
   ════════════════════════════════════════════════════════════ */

.tz-sale {
    max-width: 1380px !important;
    min-width:    0      !important;  
    padding:   32px 40px !important;
}

.tz-section-head__title-link {
    text-decoration: none !important;
    display:         flex !important;
    align-items:     center !important;
}
.tz-section-head__title-link .tz-section-head__title { transition: color 0.2s ease !important; }
.tz-section-head__title-link:hover .tz-section-head__title { color: #A87A63 !important; }


/* ════════════════════════════════════════════════════════════
   22. PAGER — flex ROW (flèches items flex, pas position:absolute)
   ════════════════════════════════════════════════════════════ */

.tinza-tabs__pager,
.tinza-sale__pager {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    background:    transparent !important;
    border-radius:  16px !important;
    padding:        20px 16px !important;
    box-sizing:     border-box !important;
    width:          100% !important;
    gap:            12px !important;
}

/* Pages wrapper — prend tout l'espace disponible entre les deux arrows */
.tinza-tabs__pages,
.tinza-sale__pages {
    flex:      1 !important;
    min-width: 0 !important;
    width:     auto !important;
}

/* Pages cachées sauf active */
.tinza-tabs__page,
.tinza-sale__page { display: none !important; }
.tinza-tabs__page.is-active,
.tinza-sale__page.is-active { display: block !important; animation: tinza-fade .3s ease; }

/* Grille 5 colonnes */
.tinza-tabs__page ul.tinza-products,
.tinza-sale__page ul.tz-sale__grid {
    display:               grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap:                   16px !important;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
    width:                 100% !important;
    overflow:              visible !important;
    transform:             none !important;
}
.tinza-tabs__page ul.tinza-products > li,
.tinza-sale__page ul.tz-sale__grid  > li {
    width: auto !important; flex-shrink: unset !important; scroll-snap-align: none !important;
}


/* ════════════════════════════════════════════════════════════
   23. FIX TAILLE CARDS SALE = TABS (override min/max-height fixe de 480px)
   ════════════════════════════════════════════════════════════ */

.tz-sale .tinza-sale__page .tz-pcard,
.tz-sale .tinza-sale__page li.tz-pcard {
    min-height: unset !important;
    max-height: unset !important;
    height:     auto !important;
}
.tz-sale .tinza-sale__page h3.tz-pcard__title,
.tz-sale .tinza-sale__page .tz-pcard__title {
    min-height: unset !important;
    max-height: unset !important;
}
.tinza-tabs__page li.tinza-card,
.tinza-tabs__page .tinza-card {
    min-height: unset !important;
    max-height: unset !important;
    height:     auto !important;
}
.tinza-tabs__page h3.tinza-card__name,
.tinza-tabs__page .tinza-card__name {
    min-height: unset !important;
    max-height: unset !important;
}


/* ════════════════════════════════════════════════════════════
   24. FLÈCHES — items flex, centrées verticalement via align-items
   ════════════════════════════════════════════════════════════ */

.tinza-tabs__arrow,
.tinza-sale__arrow {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    width:           44px !important;
    height:          44px !important;
    min-width:       44px !important;
    background:      #A87A63 !important;
    border:          none !important;
    border-radius:   50% !important;
    font-size:       26px !important;
    line-height:     1 !important;
    color:           #FFFFFF !important;
    cursor:          pointer !important;
    padding:         0 !important;
    transition:      background 0.2s ease !important;
    /* PAS de position:absolute — item flex dans le pager */
    position:        static !important;
    transform:       none !important;
    top:             auto !important;
    left:            auto !important;
    right:           auto !important;

    /* ── Centrage vertical sur la hauteur de l'IMAGE produit ──
       Le pager centre par défaut sur toute la hauteur de la
       carte (image carrée + texte dessous), ce qui place les
       flèches plus bas que le centre de l'image seule.

       On override avec align-self:flex-start + margin-top
       calculé pour aligner le centre de la flèche (44px) sur
       le centre de l'image (carrée, donc hauteur = largeur
       d'une carte = 1/5 de la largeur des pages, moins les gaps).

       Formule (desktop) :
         pages_width = 100% - 2×44px(arrows) - 2×12px(gap pager)
         image_h     = (pages_width - 4×16px(grid-gap)) / 5
         margin-top  = image_h/2 - 44px/2
                     = calc(10% - 39.6px)
       100% = largeur du content-box du pager (base des % margin) */
    align-self: flex-start !important;
    margin-top: calc(10% - 39.6px) !important;
}
.tinza-tabs__arrow:hover,  .tinza-sale__arrow:hover  { background: #8F6450 !important; }
.tinza-tabs__arrow:disabled, .tinza-sale__arrow:disabled {
    display: none !important;
}
 

/* ════════════════════════════════════════════════════════════
   24. CARTE VOIR-PLUS — image vide, bouton centré, SANS flou
   ════════════════════════════════════════════════════════════ */

/* Fond warm sur la zone image vide */
.tinza-card__img--vp,
.tz-pcard__img--vp {
    background: #E1E2DC !important;
}

/* IMPORTANT : override display:block du lien dans .tinza-card__img a
   → flex pour centrer le bouton Voir Plus                     */
.tinza-card__img--vp .tinza-card__voir-plus-cta,
.tz-pcard__img--vp   .tz-pcard__voir-plus-cta {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    height:          100% !important;
    text-decoration: none !important;
}

/* Bouton "Voir Plus" — petit, noir */
.tinza-card__voir-plus,
.tz-pcard__voir-plus {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         6px 8px !important;
    background:      #A87A63 !important;
    color:           #FFFFFF !important;
    border-radius:   6px !important;
    font-family:     'Chillax', sans-serif !important;
    font-weight:     400 !important;
    font-size:       10px !important;
    letter-spacing:  0.03em !important;.tinza-card__img--vp .tinza-card__voir-plus-cta,
.tz-pcard__img--vp   .tz-pcard__voir-plus-cta {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    height:          100% !important;
    text-decoration: none !important;
}

    text-transform:  uppercase !important;
    transition:      background 0.2s !important;
    white-space:     nowrap !important;
    pointer-events:  auto !important;
}
.tinza-card__img--vp .tinza-card__voir-plus-cta:hover .tinza-card__voir-plus,
.tz-pcard__img--vp   .tz-pcard__voir-plus-cta:hover   .tz-pcard__voir-plus {
    background: #A87A63 !important;
}

/* Masquer le body et le bouton wishlist sur la carte voir-plus */
.tinza-card--voir-plus .tinza-card__body,
.tz-pcard--voir-plus   .tz-pcard__body,
.tinza-card--voir-plus .tinza-card__wish,
.tz-pcard--voir-plus   .tz-pcard__wish {
    display: none !important;
}

/* Neutraliser TOUS les anciens effets de flou */
.tinza-card--blurred::after, .tz-pcard--blurred::after { display: none !important; }
.tinza-card--blurred .tinza-card__img img, .tz-pcard--blurred .tz-pcard__img img { filter: none !important; transform: none !important; }
.tinza-card__voir-plus-overlay, .tz-pcard__voir-plus-overlay { display: none !important; }

/* ════════════════════════════════════════════════════════════
   26. TEXTE RÉDUIT
   ════════════════════════════════════════════════════════════ */
.tinza-tabs__page .tinza-card__name, .tinza-tabs__page .tinza-card__name a,
.tinza-sale__page .tz-pcard__title,  .tinza-sale__page .tz-pcard__title a {
    font-size: 13px !important; line-height: 1.3 !important;
    min-height: unset !important; max-height: unset !important;
}
.tinza-tabs__page .tinza-card__seller-name,
.tinza-sale__page .tz-pcard__seller-name { font-size: 11px !important; }
.tinza-tabs__page .tz-pcard__price, .tinza-tabs__page .tz-pcard__price-old,
.tinza-sale__page .tz-pcard__price, .tinza-sale__page .tz-pcard__price-old { font-size: 14px !important; }
.tinza-tabs__page .tinza-card__body, .tinza-tabs__page .tz-pcard__body,
.tinza-sale__page .tz-pcard__body { padding: 8px 10px 10px !important; gap: 4px !important; }
.tinza-tabs__page .tinza-card__avatar, .tinza-tabs__page .tz-pcard__avatar,
.tinza-sale__page .tz-pcard__avatar { width: 24px !important; height: 24px !important; min-width: 24px !important; }
.tinza-tabs__page .tinza-card, .tinza-sale__page .tz-pcard { min-height: unset !important; }


/* ════════════════════════════════════════════════════════════
   27. TABLET ≤1024px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .tinza-tabs__pager, .tinza-sale__pager { padding: 16px 12px !important; gap: 10px !important; }
    .tinza-tabs__page ul.tinza-products,
    .tinza-sale__page ul.tz-sale__grid { grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; }
    .tinza-tabs__arrow, .tinza-sale__arrow {
        width: 38px !important; height: 38px !important; min-width: 38px !important; font-size: 22px !important;
        /* Recalcul centrage image : arrow=38px, pager-gap=10px, grid-gap=12px
           pages_width = 100% - 2×38 - 2×10 = 100% - 96
           image_h     = (pages_width - 4×12) / 5 = (100% - 144) / 5
           margin-top  = image_h/2 - 38/2 = calc(10% - 33.4px) */
        margin-top: calc(10% - 33.4px) !important;
    }
    .tz-sale { padding: 24px 32px !important; }
}


/* ════════════════════════════════════════════════════════════
   28. MOBILE ≤768px — pas de container, pas de flèches,
       TOUS les produits (page 1 + page 2 + voir-plus) en un
       seul scroll horizontal continu
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Container blanc supprimé — fond transparent, pleine largeur */
    .tinza-tabs__pager,
    .tz-sale > .tinza-sale__pager {
        background:    transparent !important;
        padding:       0 !important;
        gap:           0 !important;
        border-radius: 0 !important;
    }
    .tz-sale { padding: 16px 0 16px 12px !important; }

    /* Flèches supprimées sur mobile — navigation au scroll uniquement.
       .tinza-tabs__pages (flex:1) prend alors toute la largeur. */
    .tinza-tabs__arrow,
    .tinza-sale__arrow {
        display: none !important;
    }

    /* Afficher TOUTES les pages (pas seulement .is-active)
       display:contents → la page n'a plus de boîte propre,
       ses enfants rejoignent directement le scroll flex.
       → les 10 cards (9 produits + carte "voir plus") sont
         toutes visibles dans le scroll horizontal.            */
    .tinza-tabs__page, .tinza-tabs__page.is-active,
    .tinza-sale__page, .tinza-sale__page.is-active {
        display: contents !important;
    }

    /* Le wrapper des pages devient LE scroll horizontal unique */
    .tinza-tabs__pages, .tinza-sale__pages {
        display:                    flex !important;
        overflow-x:                 auto !important;
        scroll-snap-type:           x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap:                        10px !important;
        padding:                    0 16px 4px 0 !important;
        width:                      100% !important;
    }
    .tinza-tabs__pages::-webkit-scrollbar,
    .tinza-sale__pages::-webkit-scrollbar { display: none !important; }

    /* Unwrap les <ul> internes — leurs <li> deviennent items
       flex directs du scroll (même logique que .tinza-tabs__page) */
    .tinza-tabs__page ul.tinza-products,
    .tinza-sale__page ul.tz-sale__grid {
        display: contents !important;
    }

    /* Cards */
    .tinza-tabs__page ul.tinza-products > li,
    .tinza-sale__page ul.tz-sale__grid  > li {
        flex-shrink:       0 !important;
        width:             160px !important;
        scroll-snap-align: start !important;
    }
}


/* ════════════════════════════════════════════════════════════
   29. SMALL MOBILE ≤420px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .tinza-tabs__page ul.tinza-products > li,
    .tinza-sale__page ul.tz-sale__grid  > li { width: 130px !important; }
}