/* ============================================================
   Dub Silence — Woo Product Slider  v3.7
   Toutes les dimensions sont gérées par JS (setupSizes).
   ============================================================ */
.wps-slider, .wps-slider * { box-sizing: border-box; }

/* Neutralise les <p> parasites de wpautop */
.wps-slider p { display: contents !important; }

/* ── Wrapper principal ──────────────────────────────────────── */
.wps-slider {
    position: relative;   /* ancre TOUJOURS les flèches ici */
    margin: 0 auto;
    padding: 0;
    background: transparent;
    --acc: #f5c400; --cbg: #161616; --cbc: #2a2a2a;
    --muted: #666;  --text: #f0f0f0;
}

/* ── Outer : zone entre les deux flèches ────────────────────── */
.wps-slider .wps-outer {
    /* margin: 0 36px → géré par JS */
    /* height → géré par JS */
    /* PAS de position:relative ici → les flèches restent sur .wps-slider */
}

/* ── Track ──────────────────────────────────────────────────── */
.wps-slider .wps-track {
    overflow-x: clip;    /* clips horizontalement pour le scroll */
    overflow-y: visible; /* laisse le bloc méta visible en bas */
    /* width + height → gérés par JS */
}

/* ── Slides inner ───────────────────────────────────────────── */
.wps-slider .wps-slides-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── Carte ───────────────────────────────────────────────────── */
.wps-slider .wps-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;     /* border + border-radius entoure tout */
    background: var(--cbg);
    transition: border-color .2s;
    /* width, border, border-radius → CSS PHP inline ou JS */
}
.wps-slider .wps-card:hover { border-color: var(--acc) !important; }

/* ── Image ───────────────────────────────────────────────────── */
.wps-slider .wps-card-img {
    position: relative;
    overflow: hidden;
    background: #111;
    display: block;
    flex-shrink: 0;
    width: 100% !important;      /* toujours coller à l'inner width de la carte */
    aspect-ratio: 1 / 1 !important; /* maintient le carré */
    height: auto !important;
}
.wps-slider .wps-card-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border: none !important;
    margin: 0 !important; padding: 0 !important;
    max-width: none !important; max-height: none !important;
    transition: transform .4s ease, filter .4s ease;
    filter: brightness(.92);
}
.wps-slider .wps-card:hover .wps-card-img img {
    transform: scale(1.04); filter: brightness(1);
}
.wps-slider .wps-card-img::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,.38) 0%,transparent 50%);
    z-index: 1; pointer-events: none;
}

/* ── Lien overlay image ─────────────────────────────────────── */
.wps-slider .wps-card-img-link {
    position: absolute !important;
    inset: 0 !important; z-index: 3;
    display: block !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ── Badges ─────────────────────────────────────────────────── */
.wps-slider .wps-badge {
    position: absolute; top:10px; right:10px; z-index:4;
    background: var(--acc); color:#000;
    font-size:9px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; padding:3px 7px;
    border-radius:2px; line-height:1.4;
}
.wps-slider .wps-oos-badge { background:#444; color:#aaa; }

/* ── Bloc méta (toujours visible) ───────────────────────────── */
.wps-slider .wps-card-meta {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: var(--cbg);
    border-top: 1px solid var(--cbc);
}

.wps-slider .wps-card-name {
    display: block;
    padding: 7px 11px 5px;
    font-size: 12px; font-weight: 600; line-height: 1.35;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none;
}
.wps-slider .wps-card-name:hover { color: var(--acc); text-decoration: none; }

.wps-slider .wps-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 10px 10px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.wps-slider .wps-price {
    font-size:13px; font-weight:700; color:var(--acc);
    display:flex; align-items:baseline; gap:4px;
    white-space:nowrap; margin:0; line-height:1;
}
.wps-slider .wps-price del { color:var(--muted); font-size:10px; font-weight:400; }
.wps-slider .wps-price .woocommerce-Price-amount,
.wps-slider .wps-price .woocommerce-Price-amount bdi { color:var(--acc); }
.wps-slider .wps-oos-txt {
    font-size:11px; font-weight:600; color:#888;
    text-transform:uppercase; letter-spacing:.06em;
    width:100%; text-align:center;
}

/* ── Bouton ─────────────────────────────────────────────────── */
.wps-slider .wps-atc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap; flex-shrink: 0;
    padding: 5px 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em; text-transform: uppercase !important;
    text-decoration: none !important; cursor: pointer;
    line-height: 1 !important; box-shadow: none !important;
    transition: background .2s, color .2s;
}
.wps-slider .wps-atc-btn:hover { text-decoration: none !important; }

/* ── Flèches : TOUJOURS absolues sur .wps-slider ────────────── */
.wps-slider .wps-arrow {
    position: absolute;
    top: 0;
    /* width + height → JS */
    border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; color: rgba(255,255,255,.3);
    transition: color .2s; z-index: 10;
}
.wps-slider .wps-prev { left: 0; }
.wps-slider .wps-next { right: 0; }
.wps-slider .wps-arrow:hover { color: var(--acc); }
.wps-slider .wps-arrow svg { width:22px; height:22px; display:block; flex-shrink:0; }

/* ── Dots ───────────────────────────────────────────────────── */
.wps-slider .wps-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding-top: 14px;
}
.wps-slider .wps-dot {
    width:6px; height:6px; border-radius:3px;
    border:none; cursor:pointer; padding:0;
    background: var(--cbc);
    transition: background .2s, width .25s;
}
.wps-slider .wps-dot.active { width:18px; background:var(--acc); }