/* ═══════════════════════════════════════════════════════════
   FICHE PRODUIT + COMMANDE, WANILO EXPRESS+ (v2, lot B2)
   Spécifique à shop/produit.html et shop/commande.html : nav avec retour,
   galerie, info produit, onglets, "Vous aimerez aussi", pied collant commande.
   Composants réutilisés tels quels depuis boutique.css/ui.css : bq-wrap,
   bq-recap, bq-tot, .ci/.qty (lignes panier), .intent (moyens de paiement),
   bq-footer, toast, .ph (pictogramme de secours).
   Sourcing : DESIGN.md §8 "Fiche produit" / "Commande" / "Panier tiroir".
   ═══════════════════════════════════════════════════════════ */

/* ── Nav avec retour (remplace le logo sur ces deux pages) ── */
.pd-nav__back{ width: 24px; height: 24px; color: var(--navy-900); flex-shrink: 0; }
.pd-nav__title{
  flex: 1; min-width: 0; padding: 0 var(--sp-3);
  font: 600 15px/1 var(--font); color: var(--navy-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Galerie (§5 "Fiche produit" : image 1:1, --r-lg) ── */
.pd-gallery{ padding: var(--sp-4); }
.pd-gallery__img{
  aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--canvas); box-shadow: var(--shadow-product);
}
.pd-gallery__img img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.pd-gallery__img .ph{ width: 100%; height: 100%; }
.pd-gallery__img .ph svg{ width: 64px; height: 64px; }

/* Bande de vignettes, affichée seulement au-delà d'une photo. Elle défile
   horizontalement plutôt que de passer à la ligne : cinq vignettes tiennent sur
   une bande d'un écran de 360 px sans jamais pousser la page. */
.pd-gallery__thumbs{
  display: flex; gap: var(--sp-2); margin-top: var(--sp-3);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pd-gallery__thumbs::-webkit-scrollbar{ display: none; }
.pd-thumb{
  flex: 0 0 auto; width: 64px; height: 64px; padding: 0;
  border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--canvas); overflow: hidden; cursor: pointer;
}
.pd-thumb img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.pd-thumb.is-active{ border-color: var(--navy-900); }

/* ── Info produit ── */
.pd-info{ padding: var(--sp-2) var(--sp-5) var(--sp-6); }
.pd-kicker{ display: flex; align-items: center; gap: 6px; font: 600 15px/1 var(--font); color: var(--ink-2); margin-bottom: var(--sp-2); }
.pd-kicker svg{ width: 16px; height: 16px; color: var(--gold-500); stroke: none; fill: currentColor; }
.pd-title{ font: 600 24px/28px var(--font); letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-3); }
/* Accroche limitée à quatre lignes. Elle affiche le MÊME p.desc que l'onglet
   Description : sans limite, une description longue occupait tout l'écran sous
   le titre, repoussait le prix et les boutons hors de vue, puis se répétait mot
   pour mot plus bas. Le texte complet reste lisible dans son onglet. */
.pd-lead{
  font: 400 17px/24px var(--font); color: var(--ink-2); margin-bottom: var(--sp-4);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.pd-price-row{ display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.pd-price{ font: 700 26px/30px var(--font); letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-price--demand{ font: 600 19px/24px var(--font); color: var(--ink-2); }
.pd-price-old{ font: 400 17px/1 var(--font); color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }

/* ── Contenu d'un kit (lot 3) ──
   Encadré sur le fond perle déjà utilisé par la page, filet or de la marque à
   gauche : le contenu du kit est ce qui justifie son prix, il ne peut pas se
   confondre avec un paragraphe de description. Aucune couleur nouvelle. */
.pd-kit{
  background: var(--surface-pearl); border: 1px solid var(--divider);
  border-left: var(--gold-bar-h) solid var(--gold-500);
  /* --r-lg comme la galerie et les cartes « Vous aimerez aussi » de cette page.
     Pas --r-img : ce token vient de la charte v1 et n'existe pas dans css/v2,
     le rayon tombait donc silencieusement à 0. */
  border-radius: var(--r-lg); padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.pd-kit__title{ font: 700 14px/18px var(--font); color: var(--ink); margin-bottom: var(--sp-3); }
.pd-kit__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pd-kit__list li{ display: flex; align-items: flex-start; gap: var(--sp-2); font: 400 15px/21px var(--font); color: var(--ink-2); }
.pd-kit__list li svg{ width: 18px; height: 18px; color: var(--ok); margin-top: 1px; flex-shrink: 0; }

.pd-btns{ display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.pd-reassure{ display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); margin-bottom: var(--sp-6); }
.pd-reassure__row{ display: flex; align-items: center; gap: var(--sp-2); font: 400 14px/1 var(--font); color: var(--ink-2); }
.pd-reassure__row svg{ width: 20px; height: 20px; color: var(--action); flex-shrink: 0; }

.pd-qty{ display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; border-bottom: 1px solid var(--divider); margin-bottom: var(--sp-6); }
/* Le bloc quantité est le dernier enfant de .pd-info : sa marge basse de 32 px
   s'ajoutait au padding bas de 32 px du parent, soit 64 px de vide mesurés
   entre la quantité et les onglets. Le padding du parent suffit. */
.pd-info > *:last-child{ margin-bottom: 0; }
.pd-qty__label{ font: 600 15px/1 var(--font); color: var(--ink); }

/* ── Onglets Description / Caractéristiques ── */
.pd-tabs{ display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pd-tab{
  appearance: none; background: var(--surface-pearl); color: var(--navy-900);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill); font: 500 14px/1 var(--font);
  padding: 10px 16px; cursor: pointer;
}
.pd-tab.is-active{ font-weight: 600; background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.pd-panel{ display: none; margin-bottom: var(--sp-6); }
.pd-panel.is-active{ display: block; }
.pd-panel p{ font: 400 15px/22px var(--font); color: var(--ink-2); }
.pd-specs{ list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.pd-specs li{ display: flex; align-items: flex-start; gap: var(--sp-2); font: 400 15px/21px var(--font); color: var(--ink-2); }
.pd-specs li svg{ width: 18px; height: 18px; color: var(--ok); margin-top: 1px; flex-shrink: 0; }

/* ── Vous aimerez aussi (carrousel horizontal, DESIGN §6 étendu) ──
   overflow-x:hidden sur le conteneur : la bande à marges négatives (bleed edge to
   edge) ne doit déborder QUE de sa propre boîte, jamais du document (même piège que
   la nav sticky documenté en tête de boutique.css, ici pour scrollWidth pas top). */
.pd-related-wrap{ overflow-x: hidden; }
.pd-related{ display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: 4px; margin: 0 calc(var(--sp-5) * -1); padding-left: var(--sp-5); padding-right: var(--sp-5); }
.pd-related__card{ flex: 0 0 148px; text-decoration: none; color: inherit; }
.pd-related__img{ aspect-ratio: 1/1; background: var(--canvas-2); border-radius: var(--r-lg); padding: var(--sp-2); margin-bottom: var(--sp-2); }
.pd-related__img img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.pd-related__img .ph{ width: 100%; height: 100%; }
.pd-related__img .ph svg{ width: 30px; height: 30px; }
.pd-related__name{ font: 600 13px/17px var(--font); color: var(--ink); margin-bottom: 4px; min-height: 34px; }
.pd-related__price{ font: 700 14px/1 var(--font); color: var(--navy-900); font-variant-numeric: tabular-nums; }

/* ── Barre collante mobile (CTA dupliqué, §6 "Fiche produit") ── */
#pdRoot{ padding-bottom: 76px; } /* place pour pd-sticky, retiré en desktop ci-dessous */
.pd-sticky{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline); box-shadow: var(--shadow-sheet);
  padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.pd-sticky__price{ font: 700 19px/1 var(--font); color: var(--navy-900); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pd-sticky .v2-btn{ height: 44px; font-size: 16px; }

/* ── Page commande : pied collant total + bouton (généralise "Panier tiroir",
   DESIGN §5 : même pied que le tiroir devenu une page à part entière) */
.co-main{ padding: var(--sp-5) 0 132px; }
.co-title{ font: 600 24px/27px var(--font); color: var(--ink); margin-bottom: var(--sp-5); }
.co-sec-title{ font: 600 17px/1 var(--font); color: var(--ink); margin: var(--sp-6) 0 var(--sp-3); }
/* Pied collant : CTA toujours visible pendant le remplissage du formulaire, même
   patron que le pied de tiroir dont cette page prend la place (DESIGN §5 "Panier
   tiroir : pied collant"). position:fixed (pas sticky) : la page défile sous elle. */
.co-sticky{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--canvas); max-width: 640px; margin: 0 auto;
  border-top: 1px solid var(--hairline); box-shadow: var(--shadow-sheet);
  padding: var(--sp-4) var(--sp-5);
}
.pd-not-found{ text-align: center; padding: var(--sp-8) var(--sp-5); }
.pd-not-found svg{ width: 40px; height: 40px; color: var(--ink-3); margin: 0 auto var(--sp-3); display: block; }
.pd-not-found__t{ font: 600 19px/1 var(--font); color: var(--ink); margin-bottom: var(--sp-2); }
.pd-not-found__s{ font: 400 15px/22px var(--font); color: var(--ink-3); margin-bottom: var(--sp-5); }

/* ═══════════ DESKTOP ≥ 768px ═══════════ */
@media (min-width: 768px){
  .pd-page{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: var(--container); margin: 0 auto; padding: var(--section-lg) var(--container-pad) 0; align-items: start; }
  .pd-gallery{ padding: 0; }
  .pd-info{ padding: 0; }
  .pd-details, .pd-related-wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
  .pd-related-wrap{ padding-bottom: var(--section-lg); }
  .pd-sticky{ display: none; }
  #pdRoot{ padding-bottom: 0; }

  .co-page{ max-width: 640px; margin: 0 auto; padding: 0 var(--container-pad); }
}