/*!
 * Lantadeli Maroquinerie — single-product.css
 * Styles spécifiques fiche produit, extraits de style.css 2026-06 (PR perf split).
 * Chargé conditionnellement par is_product() dans functions.php.
 * Tokens, base typo, header, footer, animations, dark mode généraux : style.css.
 */

/* ==========================================================================
   WOOCOMMERCE — PAGE PRODUIT UNIQUE
   ========================================================================== */

.single-product .wp-block-columns {
    align-items: flex-start;
}
/* Rule sticky legacy retirée v2.3.0 — conflit avec .lanta-single namespacée (top: 5.5rem).
   Voir bloc « Galerie sticky » plus bas. */

.single-product .product .product_title,
.single-product .wp-block-post-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 0.8rem;
}

.single-product .product .price {
    font-size: 1.2rem;
    color: var(--lanta-noir-soft);
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: 1.5rem;
}

/* Legacy (v1) single-product excerpt + CTA — remplacés par .lanta-single-*
   Styles v2.1 définis plus bas dans la section "SINGLE PRODUCT v2.1". */

/* Reassurance produit */
.lanta-product-reassurance {
    border-top: 1px solid var(--lanta-border);
    border-bottom: 1px solid var(--lanta-border);
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.lanta-product-reassurance p {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 0.82rem;
    line-height: 2.2;
    color: var(--lanta-noir-soft);
}

/* Galerie produit */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    border-radius: 6px;
    transition: var(--lanta-transition);
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    border: 2px solid transparent;
    transition: var(--lanta-transition);
    opacity: 0.6;
    border-radius: 4px;
}

.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border-color: var(--lanta-gold);
    opacity: 1;
}

/* Onglets produit */
.woocommerce-tabs .tabs li a {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.woocommerce-tabs .tabs li.active a {
    color: var(--lanta-gold-dark);
    border-bottom: 2px solid var(--lanta-gold);
}

/* Cacher la section avis si pas d'avis */
#tab-reviews:not(:has(.comment)) .woocommerce-Reviews-title {
    display: none;
}

/* Produits liés — section premium */
.related.products,
.upsells.products {
    padding-top: 3rem;
}

.related.products h2,
.upsells.products h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    text-align: center;
    letter-spacing: 0.04em;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 2.5rem;
}

.related.products .products,
.upsells.products .products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}

/* ==========================================================================
   PRODUITS LIÉS — RENDU PHP (lantadeli_render_related_products)
   ========================================================================== */

.lanta-related-products {
    border-top: 1px solid var(--lanta-border);
    background: var(--lanta-cream);
    padding: 5rem clamp(1.5rem, 3vw, 3rem);
}

.lanta-related-inner {
    max-width: 1340px;
    margin: 0 auto;
}

.lanta-related-surtitre {
    text-align: center;
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--lanta-grey);
    margin: 0 0 0.8rem;
}

.lanta-related-title {
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--lanta-noir);
    margin: 0 0 2.5rem;
}

.lanta-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
}

.lanta-related-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lanta-related-card:hover {
    transform: translateY(-3px);
}

.lanta-related-img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--lanta-cream-dark);
    margin-bottom: 0.7rem;
}

.lanta-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lanta-related-card:hover .lanta-related-img img {
    transform: scale(1.04);
}

.lanta-related-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--lanta-noir);
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

.lanta-related-price {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--lanta-cognac);
    font-weight: 500;
}

@media (max-width: 768px) {
    .lanta-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .lanta-related-products {
        padding: 3rem 1rem;
    }
}

/* SKU — masqué par défaut (référence interne) */
.woocommerce-product-meta .sku_wrapper,
.wp-block-woocommerce-product-sku {
    display: none !important;
}

/* Meta produit — style plus discret */
.woocommerce-product-meta,
.wp-block-woocommerce-product-meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lanta-border);
}

.woocommerce-product-meta > span,
.wp-block-woocommerce-product-meta > * {
    display: block;
    font-size: 0.78rem;
    line-height: 2;
    color: var(--lanta-grey);
}

.woocommerce-product-meta a,
.wp-block-woocommerce-product-meta a {
    color: var(--lanta-brown);
    text-decoration: none;
    transition: color 0.3s ease;
}

.woocommerce-product-meta a:hover,
.wp-block-woocommerce-product-meta a:hover {
    color: var(--lanta-gold);
}

/* Masquer l'onglet avis quand il est vide */
.woocommerce-Reviews .woocommerce-noreviews ~ * {
    display: none;
}

/* Réduire la visibilité de l'onglet avis vide */
.woocommerce-tabs .woocommerce-Reviews:empty {
    display: none;
}

/* ----- (end of WC single + related-products / start v2.1 single editorial) ----- */

/* ==========================================================================
   SINGLE PRODUCT v2.1 — fiche éditoriale "maison d'archive"
   Scoped sous .lanta-single pour ne pas leak sur d'autres pages.
   ========================================================================== */

/* Breadcrumbs ton neutre */
.lanta-single-breadcrumbs .woocommerce-breadcrumb,
.lanta-single-breadcrumbs nav.woocommerce-breadcrumb {
    font-family: var(--lanta-font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lanta-grey-soft);
    margin: 0;
}
.lanta-single-breadcrumbs .woocommerce-breadcrumb a {
    color: var(--lanta-grey-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}
.lanta-single-breadcrumbs .woocommerce-breadcrumb a:hover {
    color: var(--lanta-cognac);
}
.lanta-single-breadcrumbs .lanta-breadcrumb-sep {
    color: var(--lanta-border);
    margin: 0 0.4em;
}

/* ==========================================================================
   GALERIE PRODUIT — 1 main top + thumbs horizontaux scrollables (v2.11.0)
   ==========================================================================
   Refonte du pattern : main image grande en HAUT (carré 1/1 capé 78vh),
   bande horizontale scrollable des autres vues DESSOUS (scroll-snap, OS-style).
   Plus de colonne thumbs verticale — c'était trop coincé visuellement et la
   colonne info à droite porte déjà la conversion.
   Rendu par [lantadeli_gallery] (inc/woocommerce-shop.php).
========================================================================== */

.lanta-single .lanta-single-gallery-col {
    position: relative;
    align-self: start;
}

.lanta-single .lanta-pdp-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
}

/* -- Image principale (en haut, prominente) -- */
.lanta-single .lanta-pdp-main {
    order: 1;
    width: 100%;
    margin: 0;
    background: var(--lanta-papier);
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-height: 78vh;
    box-shadow: inset 0 0 0 1px rgba(26, 21, 18, 0.04);
}
.lanta-single .lanta-pdp-main-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    text-decoration: none;
}
.lanta-single .lanta-pdp-main-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* fade soft au swap */
    transition: opacity 0.2s var(--lanta-ease-premium);
}
.lanta-single .lanta-pdp-gallery.is-swapping .lanta-pdp-main-img {
    opacity: 0;
}

/* -- Bande thumbs horizontale scrollable (sous l'image principale) -- */
.lanta-single .lanta-pdp-thumbs {
    order: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    /* Scrollbar minimaliste */
    scrollbar-width: thin;
    scrollbar-color: var(--lanta-border) transparent;
}
.lanta-single .lanta-pdp-thumbs::-webkit-scrollbar {
    height: 4px;
}
.lanta-single .lanta-pdp-thumbs::-webkit-scrollbar-track {
    background: transparent;
}
.lanta-single .lanta-pdp-thumbs::-webkit-scrollbar-thumb {
    background: var(--lanta-border);
    border-radius: 2px;
}
.lanta-single .lanta-pdp-thumbs li {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
}
.lanta-single .lanta-pdp-thumb {
    display: block;
    width: 96px;
    height: 96px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--lanta-border);
    background: var(--lanta-papier);
    cursor: pointer;
    opacity: 0.7;
    overflow: hidden;
    border-radius: 2px;
    transition: opacity 0.25s var(--lanta-ease-premium),
                border-color 0.25s var(--lanta-ease-premium);
}
.lanta-single .lanta-pdp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.lanta-single .lanta-pdp-thumb:hover {
    opacity: 0.95;
    border-color: var(--lanta-cognac);
}
.lanta-single .lanta-pdp-thumb.is-active {
    opacity: 1;
    border-color: var(--lanta-cognac);
    box-shadow: 0 0 0 1px var(--lanta-cognac);
}
.lanta-single .lanta-pdp-thumb:focus-visible {
    outline: 2px solid var(--lanta-cognac);
    outline-offset: 2px;
}

/* -- Caption éditoriale « № pièce d'archive » -- */
.lanta-single .lanta-gallery-ref {
    display: block;
    margin: var(--space-3) 0 0 auto;
    padding: 0 var(--space-2);
    text-align: right;
    font-family: var(--lanta-font-serif);
    font-size: var(--fs-2xs);
    font-style: normal;
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    color: var(--lanta-brown-light);
    font-variant-numeric: oldstyle-nums;
    opacity: 0.7;
    pointer-events: none;
}
.lanta-single .lanta-gallery-ref em {
    font-style: italic;
    font-weight: 300;
}

/* ==========================================================================
   FICHE PRODUIT — ÉCRAN UNIQUE, SANS SCROLL (≥900px, v2.12.0)
   --------------------------------------------------------------------------
   La fiche produit tient intégralement dans la hauteur de fenêtre : on ne
   peut pas scroller. `.wp-site-blocks` devient une colonne flex de hauteur
   viewport — le header garde sa hauteur naturelle, le <main> absorbe le
   reste. Dans le <main> : le hero galerie + infos remplit l'espace, la
   description tronque proprement si trop longue, la réassurance reste
   collée tout en bas de l'écran.
   Produits similaires + footer sont rejetés hors écran (choix assumé).
   Mobile (<900px) : aucun verrou, scroll naturel conservé.
   Garde `min-height: 640px` (WCAG 1.4.4) : sur viewport court (paysage mobile,
   petit portable, fort zoom navigateur qui rapetisse la hauteur) le verrou se
   désengage → scroll naturel, le contenu reste atteignable. Le zoom-texte pur
   sur grand écran reste une limite assumée du design « écran unique ».
   ========================================================================== */
@media (min-width: 900px) and (min-height: 640px) {

    /* 1 — Verrou : la fenêtre ne scrolle pas */
    body.single-product {
        overflow: hidden;
    }
    body.single-product .wp-site-blocks {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden !important; /* bat le `overflow:visible !important` global */
    }
    /* Barre d'admin WP (utilisateur connecté) : 32px à ≥783px */
    body.single-product.admin-bar .wp-site-blocks {
        height: calc(100vh - 32px);
    }

    /* 2 — <main> de la fiche : absorbe toute la hauteur sous le header */
    body.single-product .lanta-single {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    body.single-product .lanta-single-breadcrumbs {
        flex: 0 0 auto;
        padding-top: 0.9rem !important;
    }

    /* 3 — Hero : prend la hauteur restante, paddings resserrés */
    body.single-product .lanta-single-hero {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-top: 1.4rem !important;
        padding-bottom: 1.6rem !important;
    }
    body.single-product .lanta-single-hero .wp-block-columns {
        flex: 1 1 0;
        min-height: 0;
        flex-wrap: nowrap;
        align-items: stretch;
        margin-top: 0;
        margin-bottom: 0;
    }
    body.single-product .lanta-single-hero .wp-block-column {
        min-height: 0;
        align-self: stretch;
        overflow: hidden;
    }

    /* 4 — Colonne galerie : l'image se cadre dans la hauteur disponible */
    body.single-product .lanta-single-gallery-col {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body.single-product .lanta-pdp-gallery {
        flex: 1 1 auto;
        min-height: 0;
    }
    body.single-product .lanta-pdp-main {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        max-height: none;
    }
    body.single-product .lanta-pdp-thumbs,
    body.single-product .lanta-gallery-ref {
        flex: 0 0 auto;
    }

    /* 5 — Colonne infos : description tronque, réassurance collée en bas */
    body.single-product .lanta-single-info-col {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body.single-product .lanta-single-info-col > * {
        flex: 0 0 auto;
    }
    body.single-product .lanta-single-description {
        flex: 0 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    body.single-product .lanta-single-reassurance {
        margin-top: auto; /* pousse la réassurance tout en bas de la colonne */
    }
    /* Badge savoir-faire masqué : il volerait la position « tout en bas »
       à la réassurance et alourdirait l'écran unique. */
    body.single-product .lanta-savoir-faire {
        display: none;
    }
}

/* -- Description intégrée dans la colonne info (post-content v2.11) -- */
.lanta-single .lanta-single-description {
    margin: var(--space-5) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--lanta-border);
    font-family: var(--lanta-font-sans);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--lanta-noir-soft);
}
.lanta-single .lanta-single-description p {
    margin: 0 0 var(--space-3);
    line-height: 1.65;
}
.lanta-single .lanta-single-description p:last-child {
    margin-bottom: 0;
}
.lanta-single .lanta-single-description strong {
    color: var(--lanta-noir);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.lanta-single .lanta-single-description ul,
.lanta-single .lanta-single-description ol {
    margin: var(--space-2) 0 var(--space-3);
    padding-left: 0;
    list-style: none;
}
.lanta-single .lanta-single-description li {
    position: relative;
    padding: 0.1em 0 0.1em 1.1em;
    line-height: 1.5;
}
.lanta-single .lanta-single-description li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--lanta-cognac);
    font-weight: 400;
}

/* Mobile : thumbs gardent leur scroll horizontal, image principale carrée 60vh max */
@media (max-width: 768px) {
    .lanta-single .lanta-pdp-thumb {
        width: 72px;
        height: 72px;
    }
    .lanta-single .lanta-pdp-main {
        aspect-ratio: 1 / 1;
        max-height: 60vh;
    }
    .lanta-single .lanta-gallery-ref {
        font-size: 0.7rem;
        margin-top: var(--space-2);
    }
}

/* Reduced motion : pas de fade au swap */
@media (prefers-reduced-motion: reduce) {
    .lanta-single .lanta-pdp-main-img,
    .lanta-single .lanta-pdp-gallery.is-swapping .lanta-pdp-main-img {
        opacity: 1 !important;
        transition: none !important;
    }
}