/* product.css — PDP LONEWOLF 2026 — minimalisme éditorial dark + brutalisme soft
   Tous les tokens viennent de style.css (§1 spec). Fallbacks locaux inclus pour
   robustesse de chargement — aucune couleur hors tokens en dehors des fallbacks. */

/* Anti-débordement horizontal (constaté : fiche produit = 575px pour un viewport 390).
   `overflow-x:clip` ne suffit pas : il ne clippe PAS un position:fixed comme le toast.
   On borne donc le toast lui-même (spécificité #id.class pour battre .toast{max-width:none}
   de style.css) et on scope la table du guide des tailles. */
html { overflow-x: clip; }
#share-toast.toast {
    left: 50%;
    right: auto;
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    box-sizing: border-box;
    white-space: normal;
    transform: translateX(-50%) translateY(20px);
}
#share-toast.toast.show { transform: translateX(-50%) translateY(0); }
/* La modale guide-des-tailles est position:fixed (non clippée par html) : sa table de
   405px débordait le viewport. On borne la box et on la rend scrollable. */
.modal-box { max-width: min(520px, calc(100vw - 40px)); overflow-x: auto; }
.size-table { max-width: 100%; }

/* Labels mono scopés PDP (miroir de .t-label global, garantit le rendu même
   si style.css n'est pas encore à jour) */
.product-page .t-label,
.pdp-category,
.reassure-item,
.variant-selector-header label,
.pdp-acc summary,
.breadcrumbs {
    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-label, 0.14em);
    color: var(--text-muted, var(--color-text-muted));
}

/* ── Layout principal ──────────────────────────────────────────────────────── */
.product-page {
    display: grid;
    grid-template-columns: 96px 1.15fr 1fr;
    gap: 0 var(--space-5, 40px);
    align-items: start;
    margin-top: var(--space-4, 24px);
}

/* ── Galerie ────────────────────────────────────────────────────────────────── */
.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 96px;
}

.gallery-thumb {
    /* 96 et non 72 : les 2 seules vues PORTÉES du produit ne vivent qu'ici — à 72 px
       le mannequin n'était pas lisible, donc pas perçu. Mobile reste à 64 px. */
    width: 96px;
    height: 96px;
    border-radius: var(--radius-sm, 2px);
    border: 1px solid var(--border, var(--color-border));
    background: #e9e9ea; /* gris studio fixe, identique dark & light */
    cursor: pointer;
    object-fit: cover;
    transition: border-color var(--transition), opacity var(--transition);
    opacity: 0.55;
}

.gallery-thumb:hover { opacity: 0.85; border-color: var(--gray-6, var(--color-text-muted)); }
.gallery-thumb.active { border-color: var(--accent); opacity: 1; }
.gallery-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gallery-main-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius, 4px);
    border: 1px solid var(--border, var(--color-border));
    box-shadow: none;
    cursor: zoom-in;
    background: #e9e9ea; /* gris studio fixe — les mockups fond blanc s'y fondent */
}

/* Voile d'accord dark (cf. cartes produit §4) */
.gallery-main-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gray-0, #0a0a0c);
    opacity: .07;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 1;
}
:root[data-theme="light"] .gallery-main-wrap::after { opacity: 0; }

#product-main-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    transition: opacity 200ms ease;
}

/* Image sticky desktop (colonne image = repère fixe pendant le scroll) */
@media (min-width: 1025px) {
    .gallery-main-wrap { position: sticky; top: 96px; }
}

/* Zoom loupe desktop */
.gallery-main-wrap:hover .gallery-zoom-overlay {
    opacity: 1;
    pointer-events: auto;
}

.gallery-zoom-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 200%;
    border-radius: 0;
    transition: opacity 150ms ease;
    z-index: 2;
}

/* ── Hiérarchie colonne info ────────────────────────────────────────────────── */
.pdp-category {
    display: inline-block;
    color: var(--accent-text, #a290ff);
    text-decoration: none;
    /* Zone tactile étendue (lien mesuré 33×18 px — audit mobile 07/08),
       compensée pour ne pas déplacer la mise en page. */
    padding: 13px 8px;
    margin: -13px -8px;
    margin-bottom: calc(var(--space-2, 8px) - 13px);
}
.pdp-category:hover { text-decoration: underline; }

.product-info h1 {
    font-size: var(--fs-h2, clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text, var(--color-text));
    margin: 0 0 var(--space-2, 8px);
}

.product-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--text, var(--color-text));
    margin-bottom: var(--space-3, 16px);
}

/* ── Reviews summary inline ─────────────────────────────────────────────────── */
.product-rating-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--fs-sm, 13px);
    color: var(--text-muted, var(--color-text-muted));
    cursor: pointer;
    text-decoration: none;
}

.product-rating-summary:hover { color: var(--text, var(--color-text)); }

.product-rating-summary .stars-inline {
    color: var(--accent-text, #a290ff);
    font-size: 14px;
    letter-spacing: 1px;
}

/* ── Description en accordéon ───────────────────────────────────────────────── */
.pdp-acc {
    border-top: 1px solid var(--border, var(--color-border));
}
.pdp-acc:last-of-type { border-bottom: 1px solid var(--border, var(--color-border)); }

.pdp-acc summary {
    color: var(--text, var(--color-text));
    padding-block: 16px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
    flex-shrink: 0;
    margin-left: 12px;
}
.pdp-acc[open] summary::after { transform: rotate(-135deg); }

.pdp-acc .product-description,
.pdp-acc-body {
    color: var(--gray-7, var(--color-text-muted));
    font-size: var(--fs-body, 0.9375rem);
    line-height: 1.65;
    padding-bottom: 16px;
    margin: 0;
}
.pdp-fit-note {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, var(--color-text-muted));
    margin: 8px 0 16px;
}

/* ── Bloc réassurance (remplace trust-badges) ──────────────────────────────── */
.reassure {
    margin-top: var(--space-4, 24px);
}
.reassure-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 12px;
    border-top: 1px solid var(--border, var(--color-border));
    color: var(--text-muted, var(--color-text-muted));
}
.reassure-item:last-child { border-bottom: 1px solid var(--border, var(--color-border)); }
.reassure-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gray-6, var(--color-text-muted)); }
.reassure-item a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.reassure-item a:hover { color: var(--text, var(--color-text)); }

/* ── Size guide ─────────────────────────────────────────────────────────────── */
.size-guide-btn {
    background: none;
    border: none;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    font-weight: 500;
    letter-spacing: var(--ls-label, 0.14em);
    text-transform: uppercase;
    color: var(--text-muted, var(--color-text-muted));
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    margin-left: auto;
    transition: color var(--transition);
}

.size-guide-btn:hover { color: var(--text, var(--color-text)); }

/* ── Variantes ──────────────────────────────────────────────────────────────── */
.variant-selector-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}

.variant-selector-header label { margin-bottom: 0; }

.product-page .variant-btn {
    min-width: 56px;
    min-height: 48px;
    background: transparent;
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--text, var(--color-text));
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.product-page .variant-btn:hover { border-color: var(--gray-6, var(--color-text-muted)); background: transparent; }

/* Actif = invert N&B — le violet est réservé au CTA */
.product-page .variant-btn.active {
    background: var(--gray-8, var(--color-text));
    color: var(--gray-0, var(--color-bg));
    border-color: var(--gray-8, var(--color-text));
}

/* Rupture : barré, pas caché */
.product-page .variant-btn--unavailable,
.product-page .variant-btn--unavailable:hover {
    opacity: 1;
    color: var(--gray-5, var(--color-text-muted));
    border-color: var(--gray-3, var(--color-border));
    background: transparent;
    text-decoration: line-through;
    cursor: not-allowed;
    transform: none;
}

/* ── Variant color swatch (50% autorisé : dots) ─────────────────────────────── */
.variant-swatch-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
    outline-offset: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gray-0, #0a0a0c) 20%, transparent);
}

.variant-swatch-color:hover { transform: scale(1.08); }
.variant-swatch-color.active { border-color: var(--gray-8, var(--color-text)); }
.variant-swatch-color:focus-visible { outline: 2px solid var(--accent); }
.variant-swatch-color.variant-btn--unavailable { opacity: .35; cursor: not-allowed; }

/* ── CTA ────────────────────────────────────────────────────────────────────── */
/* CTA unique violet plein de la page */
.product-page .btn-buy,
.fbt-section .btn-buy {
    white-space: nowrap;
    flex: 1 1 auto;
    padding-inline: var(--space-4, 24px);
    background: var(--accent);
    color: var(--accent-ink, #fff);
    border: none;
    border-radius: var(--radius-sm, 2px);
    min-height: 52px;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
    transition: background var(--transition), transform var(--transition);
}
.product-page .btn-buy:hover,
.fbt-section .btn-buy:hover {
    background: var(--accent-hover, var(--accent));
    transform: none;
    box-shadow: none;
}
.product-page .btn-buy:active,
.fbt-section .btn-buy:active { transform: scale(0.98); }
.product-page .btn-buy--sm { min-height: 44px; }

/* Secondaires : outline, pas de violet */
.product-page .btn-cart,
.product-page .btn-share {
    background: transparent;
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-sm, 2px);
    color: var(--text, var(--color-text));
    min-height: 48px;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
    animation: none;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.product-page .btn-cart:hover,
.product-page .btn-share:hover {
    border-color: var(--gray-6, var(--color-text-muted));
    background: var(--gray-2, var(--color-surface-hover));
    transform: translateY(-2px);
}
.product-page .btn-cart:active,
.product-page .btn-share:active { transform: scale(0.98); }

.btn-buy--unavailable {
    background: var(--gray-3, var(--color-border)) !important;
    color: var(--gray-6, var(--color-text-muted)) !important;
}

/* Promo */
.promo-wrap summary {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    letter-spacing: var(--ls-label, 0.14em);
    text-transform: uppercase;
    color: var(--text-muted, var(--color-text-muted));
}
.promo-input { border-radius: var(--radius-sm, 2px); }

/* Stock bas — données réelles uniquement (rendu conditionnel côté PHP) */
.stock-low-badge {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    letter-spacing: var(--ls-label, 0.14em);
    text-transform: uppercase;
    color: var(--warning, #fbbf24);
    background: transparent;
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-sm, 2px);
}

.countdown-shipping {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, var(--color-text-muted));
    margin-top: 12px;
}

/* ── Modal guide des tailles ────────────────────────────────────────────────── */
.modal-overlay {
    /* Fermée, la modale restait tabulable (titre, tableau, bouton) : voir .share-popover. */
    visibility: hidden;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--gray-0, #0a0a0c) 60%, transparent);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.modal-box {
    background: var(--surface, var(--color-surface));
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius, 4px);
    padding: 28px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 200ms ease;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.modal-overlay.open .modal-box { transform: translateY(0); }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, var(--color-text-muted));
    font-size: 22px;
    line-height: 1;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    transition: color var(--transition);
}

.modal-close:hover { color: var(--text, var(--color-text)); }

.size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm, 13px);
}

.size-table th, .size-table td {
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, var(--color-border));
}

.size-table th {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-weight: 500;
    color: var(--text-muted, var(--color-text-muted));
    font-size: var(--fs-xs, 11px);
    text-transform: uppercase;
    letter-spacing: var(--ls-label, 0.14em);
}

.size-table tr:hover td { background: var(--gray-2, var(--color-surface-hover)); }
.size-table td:first-child { font-weight: 700; color: var(--text, var(--color-text)); }

/* ── Share popover ──────────────────────────────────────────────────────────── */
.share-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: var(--surface, var(--color-surface));
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius, 4px);
    padding: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 220px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    /* `opacity: 0` + `pointer-events: none` masquent à la souris mais PAS au clavier :
       les 6 contrôles du popover restaient dans l'ordre de tabulation, et un lecteur
       d'écran les annonçait. `visibility: hidden` les en retire, tout en laissant la
       transition d'opacité jouer (visibility est transitionnable en tout-ou-rien). */
    visibility: hidden;
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}

.share-popover.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}

.share-popover-title {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 11px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-label, 0.14em);
    color: var(--text-muted, var(--color-text-muted));
    margin-bottom: 10px;
}

.share-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-height: 44px;
    border-radius: var(--radius-sm, 2px);
    color: var(--text, var(--color-text));
    text-decoration: none;
    font-size: var(--fs-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background var(--transition);
}

.share-link:hover { background: var(--gray-2, var(--color-surface-hover)); }
.share-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Toast */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--gray-8, var(--color-text));
    color: var(--gray-0, var(--color-bg));
    padding: 10px 20px;
    border-radius: var(--radius-sm, 2px);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-sm, 13px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-md);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Flying-to-cart animation (hook JS product-ui.js) */
.fly-img {
    position: fixed;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-sm, 2px);
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
}

.fly-img.flying {
    opacity: 0;
    transform: scale(0.2);
}

/* ── Sticky CTA mobile (override du style.css legacy) ───────────────────────── */
.product-sticky-cta {
    background: color-mix(in srgb, var(--bg, var(--color-bg)) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border, var(--color-border));
    box-shadow: none;
}
@supports not (backdrop-filter: blur(1px)) {
    .product-sticky-cta { background: var(--bg, var(--color-bg)); }
}

.product-sticky-cta__label {
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 11px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, var(--color-text-muted));
}

.product-sticky-cta__amount { color: var(--text, var(--color-text)); }

.product-sticky-cta__btn {
    background: var(--accent);
    color: var(--accent-ink, #fff);
    border: none;
    border-radius: var(--radius-sm, 2px);
    min-height: 48px;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
}
.product-sticky-cta__btn:hover { background: var(--accent-hover, var(--accent)); transform: none; }
.product-sticky-cta__btn:active { transform: scale(0.98); }

/* ── Sections basses (related, FAQ, reviews) ───────────────────────────────── */
.related-section h2,
.fbt-section h2,
.faq-section h2,
.reviews-header h2 {
    font-size: var(--fs-h3, 1.25rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* ── Reviews ────────────────────────────────────────────────────────────────── */
.reviews-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.reviews-sort {
    background: var(--gray-2, var(--color-surface));
    border: 1px solid var(--border, var(--color-border));
    color: var(--text, var(--color-text));
    padding: 8px 12px;
    min-height: 44px;
    border-radius: var(--radius-sm, 2px);
    font-size: var(--fs-sm, 13px);
    cursor: pointer;
}

.stars-big, .stars-small { color: var(--accent-text, #a290ff); }

.review-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--gray-3, var(--color-border));
    color: var(--gray-7, var(--color-text-muted));
    flex-shrink: 0;
}

.review {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: var(--space-3, 16px) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border, var(--color-border));
    border-radius: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.review.visible { opacity: 1; transform: translateY(0); }

.review-content { min-width: 0; }

.review-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.review-helpful {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted, var(--color-text-muted));
}

.helpful-btn {
    background: none;
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-sm, 2px);
    color: var(--text-muted, var(--color-text-muted));
    font-size: 12px;
    padding: 8px 12px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.helpful-btn:hover { border-color: var(--gray-6, var(--color-text-muted)); color: var(--text, var(--color-text)); }
.helpful-btn.voted {
    background: var(--accent-dim, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-text, #a290ff);
}

.reviews-expand-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    min-height: 48px;
    background: transparent;
    border: 1px solid var(--border, var(--color-border));
    border-radius: var(--radius-sm, 2px);
    color: var(--text-muted, var(--color-text-muted));
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 11px);
    letter-spacing: var(--ls-label, 0.14em);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    text-align: center;
}

.reviews-expand-btn:hover { border-color: var(--gray-6, var(--color-text-muted)); color: var(--text, var(--color-text)); }

.reviews-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Product actions relative for share popover */
.product-actions-wrap { position: relative; }

/* ── Mobile responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .product-page {
        /* minmax(0,1fr) et non 1fr : « 1fr » garde un minimum auto, et le
           min-content du <picture> (image srcset sans max-width) étirait la
           colonne à ~740 px → galerie coupée au bord de l'écran sur TOUTES
           les fiches mobiles (audit 07/08). */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4, 24px);
    }
    #product-main-img { max-width: 100%; }
    /* Le libellé légal du CTA ne tient pas sur une ligne à 390 px : le nowrap du
       CTA desktop (ci-dessus, .product-page .btn-buy) poussait le montant hors
       écran (+119 px). Même sélecteur pour gagner la cascade. */
    .product-page .btn-buy { white-space: normal; line-height: 1.35; }

    .gallery-thumbs {
        flex-direction: row;
        overflow-x: auto;
        position: static;
        order: 2;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .gallery-thumbs::-webkit-scrollbar { display: none; }

    .gallery-thumb { width: 64px; height: 64px; flex-shrink: 0; }

    .gallery-main-wrap { order: 1; }

    .product-info { order: 3; }

    .gallery-zoom-overlay { display: none; }
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    #product-main-img, .product-card-image { view-transition-name: none !important; }
}

/* Caractéristiques produit (composition, contenance, finition) : elles n'existaient
   sur aucune surface de la fiche, alors que ce sont les questions bloquantes avant
   d'acheter un vêtement sans l'essayer. */
.pdp-specs {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.pdp-specs li {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.pdp-specs li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 1px;
  background: var(--accent-text);
}

/* ── CTA vitrine + alerte stock : capture email (.stock-notify-*) ───────────
   CTA PRINCIPAL du mode vitrine — était totalement non stylé (input/bouton
   bruts du navigateur). Champ aligné sur les autres inputs du site
   (cf. .waitlist-card input, cart.css) et bouton violet pleine largeur
   aligné sur .btn-checkout. */
.stock-notify-form {
  width: 100%;
  margin: 8px 0 4px;
}
.stock-notify-label {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--text-muted, var(--color-text-muted));
  line-height: 1.55;
  margin: 0 0 12px;
}
.stock-notify-label strong {
  color: var(--text, var(--color-text));
}
.stock-notify-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stock-notify-email {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm, 2px);
  border: 1px solid var(--border, var(--color-border));
  background: var(--gray-2, var(--color-bg));
  color: var(--text, var(--color-text));
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition, .2s), box-shadow var(--transition, .2s);
}
.stock-notify-email::placeholder {
  color: var(--text-muted, var(--color-text-muted));
}
.stock-notify-email:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim, color-mix(in srgb, var(--accent) 14%, transparent));
}
.btn-notify {
  display: block;
  width: 100%;
  padding: 14px 20px;
  min-height: 52px;
  background: var(--accent);
  color: var(--accent-ink, #ffffff);
  border: none;
  border-radius: var(--radius-sm, 2px);
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition, .2s);
}
.btn-notify:hover { background: var(--accent-hover, var(--color-accent-hover)); }
.btn-notify:active { transform: scale(.98); }
.btn-notify:disabled { opacity: .6; cursor: not-allowed; }
.notify-msg {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
}

/* ── Confirmation d'ajout au panier ─────────────────────────────────────────
   Avant : le seul retour était le libellé du bouton, changé 1,5 s. L'action se
   terminait sans accusé de réception ni chemin vers le panier. */
.cart-confirm {
    margin-top: var(--space-3, 16px);
    padding: 14px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm, 2px);
    background: var(--gray-1, transparent);
}
.cart-confirm__txt {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
.cart-confirm__txt::before { content: '✓ '; color: var(--success, var(--accent)); font-weight: 700; }
.cart-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cart-confirm__close,
.cart-confirm__go {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
}
.cart-confirm__close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.cart-confirm__go {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--accent-ink, #fff);
}
.cart-confirm__close:hover { border-color: var(--gray-6); }
.cart-confirm__go:hover { background: var(--accent-hover, var(--accent)); }

/* Rangée d'actions : « Commander avec obligation de paiement » (mention légale, donc
   non raccourcissable) était comprimé à 167 px et cassé sur 4 lignes, à côté du CTA
   principal et du bouton Partager. Il prend désormais sa propre ligne. */
@media (min-width: 1025px) {
    .product-page .product-actions { flex-wrap: wrap; }
    .product-page .product-actions > #btn-buy { flex: 1 0 100%; }
}

/* Avertissement « choisis ta taille » — une taille est pré-cochée pour l'affichage du
   prix, mais l'ajout au panier exige un choix explicite (erreur de taille = retour à
   la charge du client sur une pièce fabriquée à la commande). */
.taille-avert {
    margin: 10px 0 0;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--fs-xs, 0.6875rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--danger, #e5484d);
}

/* Le toast « Lien copié ! » de la fiche produit porte class="toast" (produit.php:798),
   or animations.css — chargé APRÈS product.css — impose `position: relative` à .toast
   pour son propre système, dont les toasts vivent dans le conteneur fixe #toast-root.
   Résultat mesuré : #share-toast s'affichait dans le flux du document au lieu d'être
   épinglé à l'écran. Sélecteur d'ID pour l'emporter quel que soit l'ordre des feuilles. */
#share-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
}
#share-toast.show {
    transform: translateX(-50%) translateY(0);
}