/* ===== BLOC PRODUITS (tabs + carrousel) ===== */
.eco-products { padding: 40px 0 64px; background: #fafafa; }

.eco-prod-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.eco-prod-title {
    margin: 0 0 4px; font-size: 28px; font-weight: 800;
    color: var(--eco-text, #1d2327); padding-left: 16px; position: relative;
}
.eco-prod-title::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 5px; border-radius: 3px; background: var(--eco-accent, #2b6cb0);
}
.eco-prod-subtitle { margin: 0; color: #6b7177; font-size: 15px; }

/* ---- Onglets ---- */
.eco-tabs-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.eco-tab {
    padding: 9px 20px; border: 1px solid var(--eco-border, #e6e6e6);
    background: #fff; color: #4b5563; font-size: 14px; font-weight: 600;
    border-radius: 999px; cursor: pointer;
    transition: all .25s ease;
}
.eco-tab:hover { border-color: var(--eco-accent, #2b6cb0); color: var(--eco-accent, #2b6cb0); }
.eco-tab.eco-active {
    background: var(--eco-accent, #2b6cb0); border-color: var(--eco-accent, #2b6cb0);
    color: #fff;
}

/* ---- Panneaux ---- */
.eco-tabs-panel { display: none; }
.eco-tabs-panel.eco-active { display: block; animation: ecoFadeUp .45s ease both; }
@keyframes ecoFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.eco-prod-empty {
    background: #fff; border: 1px dashed var(--eco-border, #e6e6e6);
    border-radius: 12px; padding: 32px; text-align: center; color: #6b7177;
}

/* ---- Carrousel ---- */
.eco-carousel-wrap { position: relative; }
.eco-carousel {
    display: flex; gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    list-style: none; margin: 0; padding: 6px 2px 10px;
    scrollbar-width: none;
}
.eco-carousel::-webkit-scrollbar { display: none; }

/* ---- Carte produit ---- */
.eco-product {
    flex: 0 0 calc((100% - (var(--eco-pcols, 4) - 1) * 18px) / var(--eco-pcols, 4));
    scroll-snap-align: start;
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
.eco-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0,0,0,.13);
}

/* Média */
.eco-pmedia { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f0f2f5; }
.eco-pmedia a { display: block; height: 100%; }
.eco-pmedia img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .5s ease;
}
.eco-pmedia img.eco-pimg2 {
    position: absolute; inset: 0; opacity: 0;
}
.eco-product:hover .eco-pmedia img:first-child { transform: scale(1.06); }
.eco-product:hover .eco-pmedia img.eco-pimg2 { opacity: 1; transform: scale(1.06); }

/* Badges */
.eco-pbadges {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 6px;
}
.eco-pbadge {
    font-size: 11px; font-weight: 700; color: #fff;
    padding: 4px 9px; border-radius: 4px;
}
.eco-pbadge--sale { background: #e53e3e; }
.eco-pbadge--new  { background: #38a169; }

/* ---- Overlay icônes wishlist / compare ---- */
.eco-pactions {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transform: translateX(12px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.6,.2,1);
}
.eco-product:hover .eco-pactions,
.eco-product:focus-within .eco-pactions { opacity: 1; transform: none; }

.eco-pactions > * { margin: 0 !important; }
.eco-pactions a {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: #fff !important; color: var(--eco-text, #1d2327) !important;
    border-radius: 50% !important; position: relative;
    font-size: 0 !important; /* masque le texte du plugin */
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    text-decoration: none !important;
    transition: background .25s ease, transform .25s ease;
}
.eco-pactions a:hover {
    background: var(--eco-accent, #2b6cb0) !important;
    color: #fff !important;
    transform: scale(1.08);
}
/* Icônes via mask CSS (indépendantes du markup YITH) */
.eco-pactions a::before {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 19px; height: 19px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>") center/contain no-repeat;
}
.eco-pactions a.compare::before,
.eco-pactions a[class*="compare"]::before {
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h13M14 3l4 4-4 4M20 17H7M10 13l-4 4 4 4'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7h13M14 3l4 4-4 4M20 17H7M10 13l-4 4 4 4'/></svg>") center/contain no-repeat;
}
/* Neutralise un éventuel SVG interne de YITH (on affiche notre mask) */
.eco-pactions a svg { display: none; }

/* ---- Infos produit ---- */
.eco-pinfo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.eco-pname { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.eco-pname a {
    color: var(--eco-text, #1d2327); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
}
.eco-pname a:hover { color: var(--eco-accent, #2b6cb0); }
.eco-pprice { font-size: 17px; font-weight: 800; color: var(--eco-text, #1d2327); }
.eco-pprice del { color: #9ca3af; font-weight: 400; font-size: 14px; margin-right: 6px; }
.eco-pprice ins { text-decoration: none; color: #e53e3e; }
.eco-pcart-btn {
    margin-top: auto; text-align: center; text-decoration: none;
    font-size: 14px; font-weight: 700;
    padding: 10px 14px; border-radius: 8px;
    border: 2px solid var(--eco-accent, #2b6cb0);
    color: var(--eco-accent, #2b6cb0); background: transparent;
    transition: all .25s ease;
}
.eco-pcart-btn:hover {
    background: var(--eco-accent, #2b6cb0); color: #fff;
}
.eco-pcart-btn.loading { opacity: .6; pointer-events: none; }
.eco-pcart-btn.added::after { content: ' ✓'; }

/* ---- Flèches carrousel ---- */
.eco-car-arrow {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 6;
    width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--eco-text, #1d2327);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    opacity: 0; transition: opacity .25s ease, background .2s ease;
}
.eco-carousel-wrap:hover .eco-car-arrow { opacity: 1; }
.eco-car-arrow:hover { background: var(--eco-accent, #2b6cb0); color: #fff; }
.eco-car-arrow svg { width: 20px; height: 20px; }
.eco-car-arrow.eco-car-prev { left: -14px; }
.eco-car-arrow.eco-car-next { right: -14px; }
.eco-car-arrow.eco-disabled { opacity: 0 !important; pointer-events: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .eco-product { flex-basis: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 782px) {
    .eco-products { padding: 28px 0 44px; }
    .eco-prod-title { font-size: 22px; }
    .eco-tabs-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .eco-tab { white-space: nowrap; padding: 8px 16px; }
    .eco-product { flex-basis: calc((100% - 18px) / 2); }
    .eco-pcart-btn { font-size: 13px; padding: 9px 10px; }
    /* Pas de hover sur mobile : icônes toujours visibles */
    .eco-pactions { opacity: 1; transform: none; }
    .eco-pactions a { width: 32px; height: 32px; }
    .eco-pactions a::before { width: 16px; height: 16px; }
    .eco-pbadge { font-size: 10px; padding: 3px 7px; }
    .eco-car-arrow { display: none; }
}
@media (max-width: 480px) {
    .eco-product { flex-basis: 68%; } /* effet "peek" : on devine le produit suivant */
}


/* Curseur + interdiction de sélection/drag d'image (pour le drag au scroll) */
.eco-carousel {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.eco-carousel img {
    -webkit-user-drag: none;
}

.eco-carousel.eco-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}