/* ─────────────────────────────────────────────────────────────────
   Paris 17 — boutique et fiches produit
   Consomme les tokens de p17-redesign.css : rien n'est redéfini ici.
   ───────────────────────────────────────────────────────────────── */

/* ══ en-tête de boutique ═══════════════════════════════════════════ */

.p17-shop__hd{ padding:clamp(40px,6vw,76px) 24px clamp(28px,4vw,44px); }
.p17-shop__hd-in{ max-width:1120px; margin:0 auto; }
.p17-shop__eyebrow{
  display:inline-block; margin:0 0 18px !important; padding:7px 16px; border-radius:99px;
  background:var(--p17-accent-soft,rgba(192,112,90,.09));
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--p17-accent) !important;
}
.p17-shop__title{
  font-family:var(--p17-font-display) !important; font-weight:600;
  font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.1; letter-spacing:-.02em;
  color:var(--p17-text) !important; margin:0 0 .4em !important;
}
.p17-shop__intro{
  margin:0 !important; max-width:38em; line-height:1.7; color:var(--p17-text-soft) !important;
}
.p17-shop__liens{ margin:1.6em 0 0 !important; display:flex; flex-wrap:wrap; gap:1.6em; }
.p17-shop__liens a{
  font-weight:600; font-size:.95rem; color:var(--p17-accent) !important; text-decoration:none;
  background-image:none !important;
  border-bottom:1px solid var(--p17-accent-soft,rgba(192,112,90,.3)); padding-bottom:2px;
}
.p17-shop__liens a:hover{ color:var(--p17-accent-h) !important; border-bottom-color:var(--p17-accent-h); }

/* Le tri se retrouvait collé sous le menu fixe : il respire sous l'en-tête. */
.woocommerce-ordering,
.woocommerce-result-count{ margin-top:0 !important; }

/* ══ fiche produit ═════════════════════════════════════════════════ */

/* Rééquilibrage des colonnes : le thème donne 2/3 à l'image et 1/3 aux infos,
   d'où une image démesurée pour un flacon et une colonne d'infos tassée. */
@media(min-width:993px){
  .single-product .woo-product-image{ width:44% !important; }
  .single-product .woo-product-details{ width:56% !important; }
}
/* L'image elle-même reste à taille raisonnable et centrée sur fond doux. */
.single-product .woocommerce-product-gallery__image img{
  max-height:520px; object-fit:contain; background:var(--p17-bg-2); border-radius:16px;
}

/* ── vidéo produit en bulle, sous l'image ── */
.p17-prodvideo{
  margin:20px 0 0; border-radius:16px; overflow:hidden;
  background:var(--p17-bg-2); box-shadow:var(--p17-shadow,0 10px 30px rgba(51,46,42,.08));
}
.p17-prodvideo__v{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; background:#000; }
.p17-prodvideo__cap{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  font-size:.86rem; color:var(--p17-text-soft);
}
.p17-prodvideo__badge{
  background:var(--p17-accent); color:var(--p17-on-accent,#fff);
  font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:99px;
}

/* Vignette flottante « produit suivant » : elle recouvrait la description. */
.sticky-nav,
.sticky-nav-holder{ display:none !important; }

/* Barre d'achat collante du thème : mal ancrée, elle flottait en bas à droite
   et recouvrait les produits liés. On la retire — le bouton d'achat de la fiche
   suffit, et l'esprit de ces pages n'est pas la vente pressante. */
.sticky-product{ display:none !important; }

/* Onglet Description : pleine largeur, texte en deux colonnes façon éditoriale
   pour occuper l'espace sans lignes interminables (plus de vide à droite). */
.single-product .woocommerce-Tabs-panel,
.single-product .tabs-content{ max-width:none; }
.single-product .woocommerce-Tabs-panel{
  columns:2; column-gap:64px;
}
.single-product .woocommerce-Tabs-panel p{
  max-width:none; line-height:1.8; break-inside:avoid; margin:0 0 1.1em;
}
@media(max-width:900px){
  .single-product .woocommerce-Tabs-panel{ columns:1; }
}

/* Étiquette sans valeur pour le visiteur (« Tag: complement »). */
.tagged_as{ display:none !important; }

.single-product .summary .price{
  font-family:var(--p17-font-display) !important;
  font-size:1.6rem !important; color:var(--p17-text) !important;
}
.single-product .summary .woocommerce-product-details__short-description,
.single-product .woocommerce-Tabs-panel p,
.single-product .summary > p{ max-width:36em; line-height:1.75; }

/* Sélecteur de quantité : le thème empile ses deux boutons en flèches absolues
   par-dessus l'input, où ils héritent du fond terracotta plein de .button et
   débordent. On garde le principe natif (champ + spinner à droite) mais on le
   rhabille : champ bordé, deux boutons discrets empilés (+ en haut, − en bas).
   On ne touche pas à form.cart — le thème gère déjà l'alignement avec le bouton
   d'achat. */
.single-product .quantity{
  position:relative; display:inline-block !important; width:104px !important;
}
.single-product .quantity .qty{
  width:100% !important; height:48px; box-sizing:border-box;
  padding:0 36px 0 12px !important; text-align:left;
  border:1px solid var(--p17-line) !important; border-radius:10px !important;
}
.single-product .quantity .quantity-nav{
  position:absolute !important; top:5px !important; bottom:5px !important;
  right:5px !important; left:auto !important; height:auto !important;
  width:26px !important; display:flex !important; flex-direction:column; gap:2px;
}
.single-product .quantity .quantity-button{
  flex:1 !important; width:26px !important; min-width:0 !important; max-width:none !important;
  height:auto !important; padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  background:transparent !important; background-image:none !important;
  border:1px solid var(--p17-line) !important; border-radius:6px !important;
  color:var(--p17-text) !important; box-shadow:none !important; cursor:pointer;
}
.single-product .quantity .quantity-up{ order:0; }
.single-product .quantity .quantity-down{ order:1; }
.single-product .quantity .quantity-button svg{
  width:10px !important; height:10px !important; flex:none !important; display:block;
}
.single-product .quantity .quantity-button svg *{ fill:var(--p17-text); stroke:var(--p17-text); }
.single-product .quantity .quantity-button:hover{
  border-color:var(--p17-accent) !important; color:var(--p17-accent) !important;
}
.single-product .quantity .quantity-button:hover svg *{ fill:var(--p17-accent); stroke:var(--p17-accent); }

.single-product .single_add_to_cart_button{
  background-image:none !important;
  background-color:var(--p17-accent) !important;
  color:var(--p17-on-accent,#fff) !important;
  border-radius:99px !important; font-weight:600 !important;
  padding:15px 34px !important;
}
.single-product .single_add_to_cart_button:hover{
  background-color:var(--p17-accent-h) !important;
}

/* ── rappel réglementaire en pied de fiche ── */
.p17-shop__avert{
  max-width:1120px; margin:clamp(36px,5vw,60px) auto 0;
  padding:24px 26px; border-radius:14px; background:var(--p17-bg-2);
}
.p17-shop__avert p{
  margin:0 0 .6em !important; font-size:.9rem; line-height:1.7;
  color:var(--p17-text-soft) !important;
}
.p17-shop__avert p:last-child{ margin-bottom:0 !important; }
.p17-shop__avert strong{ color:var(--p17-text); font-weight:600; }

/* ══ grille de la boutique ═════════════════════════════════════════ */

/* Les cartes étaient très hautes : le visuel occupait presque tout l'écran.
   contain, car recadrer un packshot coupe le flacon. Le thème impose cover
   et un carré : il faut donc reprendre les deux. */
ul.products li.product img,
ul.products li.product .woo-entry-image img,
ul.products li.product a img{
  aspect-ratio:4/3 !important; object-fit:contain !important;
  background:var(--p17-bg-2); padding:14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--p17-font-display) !important;
  font-size:1.05rem !important; line-height:1.3;
}
.woocommerce ul.products li.product .button{
  background-image:none !important;
  background-color:var(--p17-accent) !important;
  color:var(--p17-on-accent,#fff) !important;
  border-radius:99px !important; font-weight:600 !important;
}
.woocommerce ul.products li.product .button:hover{
  background-color:var(--p17-accent-h) !important;
}

@media(max-width:760px){
  .p17-shop__hd{ padding-left:20px; padding-right:20px; }
  .p17-shop__avert{ padding:20px; }
}