/**
 * Skilium E-Commerce Toolset — Variantes liées
 *
 * Dropdown sur desktop, panneau bas (« bottom sheet ») sur mobile : même
 * balisage, bascule en CSS pur. Le déclencheur hérite des couleurs du thème ;
 * le panneau, superposé au contenu, a un fond propre.
 *
 * Personnalisation : redéfinir les variables --skl-lv-* sur :root, .skl-lv
 * ou tout ancêtre (valeurs par défaut en fallback de var()).
 *   --skl-lv-radius, --skl-lv-border, --skl-lv-border-hover, --skl-lv-muted,
 *   --skl-lv-accent, --skl-lv-bg, --skl-lv-fg, --skl-lv-hover, --skl-lv-thumb,
 *   --skl-lv-shadow
 */

.skl-lv {
    position: relative;
    margin: 0 0 1.25em;
}

.skl-lv__dropdown {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ── Déclencheur ─────────────────────────────────────────────────────── */

.skl-lv__trigger {
    display: block;
    list-style: none;
    padding: .6em .9em;
    border: 1px solid var(--skl-lv-border, rgba(0, 0, 0, .15));
    border-radius: var(--skl-lv-radius, 8px);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease;
}

.skl-lv__trigger::-webkit-details-marker {
    display: none;
}

.skl-lv__trigger::marker {
    content: "";
}

.skl-lv__trigger:hover {
    border-color: var(--skl-lv-border-hover, rgba(0, 0, 0, .35));
}

.skl-lv__trigger:focus-visible {
    outline: 2px solid var(--skl-lv-accent, currentColor);
    outline-offset: 2px;
}

/* Flex sur un enfant : display:flex sur <summary> n'est pas fiable partout. */
.skl-lv__trigger-inner {
    display: flex;
    align-items: center;
    gap: .75em;
}

.skl-lv__trigger-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.skl-lv__heading {
    font-size: .8em;
    color: var(--skl-lv-muted, #6b7280);
}

.skl-lv__value {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skl-lv__count {
    flex: none;
    font-size: .875em;
    color: var(--skl-lv-muted, #6b7280);
    white-space: nowrap;
}

.skl-lv__chevron {
    flex: none;
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.skl-lv__dropdown[open] .skl-lv__chevron {
    transform: rotate(180deg);
}

/* ── Panneau : dropdown (desktop) ────────────────────────────────────── */

.skl-lv__backdrop,
.skl-lv__panel-head {
    display: none;
}

.skl-lv__panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    overflow: hidden;
    color: var(--skl-lv-fg, #1f2937);
    background: var(--skl-lv-bg, #fff);
    border: 1px solid var(--skl-lv-border, rgba(0, 0, 0, .15));
    border-radius: var(--skl-lv-radius, 8px);
    box-shadow: var(--skl-lv-shadow, 0 12px 32px rgba(0, 0, 0, .16));
}

.skl-lv__list {
    position: relative; /* référence d'offsetTop pour le défilement vers la variante courante */
    max-height: min(60vh, 26rem);
    margin: 0;
    padding: .375em;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.skl-lv__item {
    margin: 0;
    padding: 0;
}

.skl-lv__item + .skl-lv__item {
    margin-top: 2px;
}

.skl-lv__option {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .5em;
    color: inherit;
    line-height: 1.3;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: calc(var(--skl-lv-radius, 8px) - 2px);
}

.skl-lv__option:hover {
    color: inherit;
    text-decoration: none;
    background: var(--skl-lv-hover, rgba(0, 0, 0, .05));
}

.skl-lv__option:focus-visible {
    outline: 2px solid var(--skl-lv-accent, currentColor);
    outline-offset: -2px;
}

.skl-lv__option.is-current {
    border-color: var(--skl-lv-accent, currentColor);
}

.skl-lv__thumb {
    flex: none;
    width: var(--skl-lv-thumb, 48px);
    height: var(--skl-lv-thumb, 48px);
    overflow: hidden;
    background: var(--skl-lv-hover, rgba(0, 0, 0, .05));
    border-radius: 4px;
}

.skl-lv__thumb img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.skl-lv__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15em;
    min-width: 0;
}

.skl-lv__label {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.skl-lv__price {
    font-size: .9em;
}

.skl-lv__price del {
    opacity: .6;
}

.skl-lv__price ins {
    text-decoration: none;
}

.skl-lv__badge {
    flex: none;
    padding: .2em .6em;
    font-size: .75em;
    color: var(--skl-lv-muted, #6b7280);
    white-space: nowrap;
    background: var(--skl-lv-hover, rgba(0, 0, 0, .05));
    border-radius: 999px;
}

.skl-lv__option.is-out-of-stock .skl-lv__thumb,
.skl-lv__option.is-out-of-stock .skl-lv__body {
    opacity: .5;
}

/* ── Panneau : bottom sheet (mobile) ─────────────────────────────────── */

@media (max-width: 767.98px) {
    .skl-lv__backdrop {
        display: block;
        position: fixed;
        z-index: 99998;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        animation: skl-lv-fade .2s ease;
    }

    .skl-lv__panel {
        position: fixed;
        z-index: 99999;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        max-height: 85dvh;
        padding-bottom: env(safe-area-inset-bottom);
        border: 0;
        border-radius: 16px 16px 0 0;
        animation: skl-lv-up .25s ease;
    }

    .skl-lv__panel-head {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        padding: .375em .375em .375em 1em;
        font-weight: 600;
        border-bottom: 1px solid var(--skl-lv-border, rgba(0, 0, 0, .15));
    }

    .skl-lv__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 0;
        height: 44px;
        min-height: 0;
        margin: 0;
        padding: 0;
        color: inherit;
        line-height: 1;
        cursor: pointer;
        background: none;
        border: 0;
        border-radius: 50%;
        box-shadow: none;
    }

    .skl-lv__close svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .skl-lv__list {
        flex: 1;
        max-height: none;
        padding: .5em;
    }

    .skl-lv__option {
        padding: .625em .5em;
    }
}

/* Défilement de la page bloqué sous le panneau mobile (classe posée par le JS). */
html.skl-lv-locked,
html.skl-lv-locked body {
    overflow: hidden;
}

@keyframes skl-lv-fade {
    from { opacity: 0; }
}

@keyframes skl-lv-up {
    from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .skl-lv__trigger,
    .skl-lv__chevron {
        transition: none;
    }

    .skl-lv__backdrop,
    .skl-lv__panel {
        animation: none;
    }
}