/* Boutique Lekruu — fiche produit (store/product/{slug}).
   Chargee apres brand.css (shared.shop-css). Couleurs : jetons de brand.css
   uniquement ; la seule couleur « libre » est la pastille d'une valeur
   d'attribut, donnee saisie au back-office et passee par --swatch.

   Mobile d'abord : galerie, bloc d'achat, details, produits similaires.
   A partir de 992px : galerie a gauche, bloc d'achat collant a droite. */

.lk-pdp {
    background-color: var(--color-surface);
    padding: 1rem 0 3rem;
}

.lk-pdp__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --- fil d'Ariane --- */

.lk-pdp .lk-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.lk-pdp .lk-breadcrumb__list li + li::before {
    content: "/";
    margin-right: .25rem;
    color: var(--neutral-400);
}

.lk-pdp .lk-breadcrumb__list a {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lk-pdp .lk-breadcrumb__list a:hover,
.lk-pdp .lk-breadcrumb__list a:focus { color: var(--color-text); }

.lk-pdp .lk-breadcrumb__list [aria-current] {
    color: var(--color-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- mise en page --- */

.lk-pdp__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .lk-pdp__layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
        align-items: start;
    }

    .lk-buybox {
        position: sticky;
        top: 1.5rem;
    }
}

/* --- galerie --- */

.lk-gallery__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background-color: var(--color-surface-alt);
    overflow: hidden;
}

/* Navigateurs sans aspect-ratio : carre reserve par le padding. */
@supports not (aspect-ratio: 1 / 1) {
    .lk-gallery__stage { height: 0; padding-top: 100%; }
}

.lk-gallery__image {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.lk-gallery__stage .lk-product__badge {
    top: .75rem;
    left: .75rem;
    font-size: .8125rem;
}

.lk-gallery__thumbs {
    display: flex;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0 0 .25rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.lk-gallery__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 4px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-surface-alt);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .15s ease;
}

.lk-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lk-gallery__thumb:hover { border-color: var(--neutral-400); }

.lk-gallery__thumb[aria-current="true"] { border-color: var(--color-primary); }

.lk-gallery__thumb:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .lk-gallery__thumb { width: 80px; height: 80px; }
}

/* --- bloc d'achat --- */

.lk-buybox__brand {
    display: inline-block;
    margin-bottom: .25rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
}

.lk-buybox__brand:hover,
.lk-buybox__brand:focus { color: var(--color-text); text-decoration: underline; }

.lk-buybox__title {
    margin: 0 0 .25rem;
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    text-transform: none;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .lk-buybox__title { font-size: 1.75rem; }
}

.lk-buybox__ref {
    margin: 0 0 1rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.lk-buybox__price {
    margin: 0 0 .5rem;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* --- disponibilite : l'icone et le mot portent l'information --- */

.lk-stock {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 1.25rem;
    font-size: .875rem;
    font-weight: 600;
}

.lk-stock--in { color: var(--color-success); }
.lk-stock--out { color: var(--color-danger); }
.lk-stock--pick { color: var(--color-text-muted); }

/* --- options (taille, couleur...) --- */

.lk-buybox__form { margin: 0; }

.lk-option {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.lk-option__legend {
    width: auto;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-option__selected { font-weight: 400; color: var(--color-text-muted); }

.lk-option__values {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Le bouton radio reste natif (clavier, lecteurs d'ecran) ; on le masque
   visuellement et le libelle porte l'apparence. */
.lk-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lk-chip-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 44px;
    margin: 0;
    padding: .5rem .875rem;
    border: 1px solid var(--neutral-300);
    border-radius: 10px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .15s ease, background-color .15s ease;
}

.lk-chip-option:hover { border-color: var(--color-primary); }

.lk-option__input:checked + .lk-chip-option {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.lk-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .15s ease;
}

.lk-swatch__color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--swatch);
    /* le blanc ou le jaune pale restent visibles sur fond blanc */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.lk-swatch:hover { border-color: var(--neutral-400); }

.lk-option__input:checked + .lk-swatch { border-color: var(--color-primary); }

.lk-option__input:focus-visible + .lk-chip-option,
.lk-option__input:focus-visible + .lk-swatch {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Epuise : barre en diagonale et attenue — jamais la seule couleur. */
.lk-option__input.is-soldout + .lk-chip-option,
.lk-option__input:disabled + .lk-chip-option {
    color: var(--neutral-400);
    border-style: dashed;
    text-decoration: line-through;
}

.lk-option__input.is-soldout + .lk-swatch,
.lk-option__input:disabled + .lk-swatch {
    position: relative;
    opacity: .5;
}

.lk-option__input.is-soldout + .lk-swatch::after,
.lk-option__input:disabled + .lk-swatch::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 36px;
    background-color: var(--color-text);
    transform: rotate(45deg);
}

.lk-option__input:disabled + .lk-chip-option,
.lk-option__input:disabled + .lk-swatch { cursor: not-allowed; }

/* --- quantite et bouton --- */

.lk-buybox__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
}

.lk-qty {
    display: inline-flex;
    align-items: stretch;
    height: 52px;
    border: 1px solid var(--neutral-300);
    border-radius: 999px;
    overflow: hidden;
}

.lk-qty__btn {
    width: 44px;
    border: 0;
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    touch-action: manipulation;
}

.lk-qty__btn:hover { background-color: var(--neutral-100); }

.lk-qty__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.lk-qty__input {
    width: 3rem;
    border: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    -moz-appearance: textfield;
}

.lk-qty__input::-webkit-outer-spin-button,
.lk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lk-pdp .lk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .15s ease, transform .15s ease;
}

.lk-pdp .lk-btn--primary {
    border-color: var(--color-accent-border);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.lk-pdp .lk-btn--primary:hover,
.lk-pdp .lk-btn--primary:focus { background-color: var(--color-accent-hover); color: var(--color-on-accent); }

.lk-pdp .lk-btn--primary:active { background-color: var(--color-accent-active); transform: scale(.98); }

.lk-pdp .lk-btn--primary:disabled {
    border-color: var(--color-border);
    background-color: var(--neutral-100);
    color: var(--neutral-500);
    cursor: not-allowed;
    transform: none;
}

.lk-pdp .lk-btn--ghost {
    border-color: var(--color-primary);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.lk-pdp .lk-btn--ghost:hover,
.lk-pdp .lk-btn--ghost:focus { background-color: var(--neutral-100); color: var(--color-text); text-decoration: none; }

.lk-pdp .lk-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.lk-buybox__add { flex: 1 1 12rem; }

/* --- reassurance --- */

.lk-assurance {
    display: grid;
    gap: .625rem;
    margin: 1.5rem 0 0;
    padding: 1rem;
    border: 1px solid var(--accent-200);
    border-radius: 12px;
    background-color: var(--color-canvas);
    list-style: none;
    font-size: .875rem;
    color: var(--color-text);
}

.lk-assurance li {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.lk-assurance .fa {
    width: 1.25rem;
    text-align: center;
    color: var(--color-text);
}

/* --- details en accordeon --- */

.lk-pdp__details {
    max-width: 760px;
    margin-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}

.lk-accordion { border-bottom: 1px solid var(--color-border); }

.lk-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: .75rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.lk-accordion__summary::-webkit-details-marker { display: none; }

.lk-accordion__summary::after {
    content: "+";
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
}

.lk-accordion[open] > .lk-accordion__summary::after { content: "\2212"; }

.lk-accordion__summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.lk-accordion__body {
    padding: 0 0 1.25rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--color-text);
}

.lk-prose p { margin: 0 0 .75rem; }
.lk-prose ul, .lk-prose ol { padding-left: 1.25rem; }

.lk-pack-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-pack-list__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.lk-pack-list__item img {
    flex: 0 0 auto;
    border-radius: 8px;
    background-color: var(--color-surface-alt);
    object-fit: contain;
}

.lk-pack-list__name { flex: 1 1 auto; min-width: 0; }
.lk-pack-list__name small { display: block; color: var(--color-text-muted); }
.lk-pack-list__item .lk-stock { margin: 0; }

/* --- produits similaires --- */

/* Bande creme pleine largeur qui ferme la fiche : les produits similaires. */
.lk-pdp__related {
    margin: 3rem 0 -3rem;
    padding: 2rem 0 3rem;
    background-color: var(--color-canvas);
    /* Etend le fond sur toute la largeur sans elargir la page. */
    box-shadow: 0 0 0 100vmax var(--color-canvas);
    clip-path: inset(0 -100vmax);
}

.lk-pdp .lk-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lk-pdp .lk-section-head__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.lk-pdp .lk-section-head__link {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* --- carte produit : marque et bouton « choisir les options » ---
   (la carte vit dans brand.css ; ces deux ajouts accompagnent les variantes) */

.lk-product__brand {
    margin: 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.lk-product__cart--options { text-decoration: none; }
.lk-product__cart--options:hover,
.lk-product__cart--options:focus { color: var(--color-on-accent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .lk-gallery__thumb,
    .lk-chip-option,
    .lk-swatch,
    .lk-pdp .lk-btn { transition: none; }
    .lk-pdp .lk-btn--primary:active { transform: none; }
}