/* ================================================================
   YOOZI — CHARTE COLORIMÉTRIQUE PAR BOISSON
   Une signature chromatique unique par recette, déclenchée via :
   - body.product-{slug}          → fiche produit + son pack
   - .product-color-{id}          → cartes, nav, éléments contextuels
   - [data-product-id="{id}"]     → nav boissons (hover color)
   ================================================================ */

:root {
  --product-color: var(--yoozi-gold);
  --product-color-dark: var(--yoozi-gold-dark, #A68950);
  --product-color-soft: var(--yoozi-cream);
}

body.product-moscow-mule,
.product-color-82,
[data-product-id="82"]:hover,
[data-product-id="392"]:hover {
  --product-color: #4A7FA5;
  --product-color-dark: #355E7D;
  --product-color-soft: #DDE8F2;
}

body.product-hugo-spritz,
.product-color-85,
[data-product-id="85"]:hover,
[data-product-id="393"]:hover {
  --product-color: #7A8C3A;
  --product-color-dark: #556425;
  --product-color-soft: #EBEEDA;
}

body.product-rose-lavande,
.product-color-84,
[data-product-id="84"]:hover,
[data-product-id="394"]:hover {
  --product-color: #C47B8E;
  --product-color-dark: #9A5B6C;
  --product-color-soft: #F7E6EA;
}

body.product-princess-sparkling,
.product-color-83,
[data-product-id="83"]:hover,
[data-product-id="395"]:hover {
  --product-color: #E8C547;
  --product-color-dark: #B8962F;
  --product-color-soft: #FBF3D0;
}

/* === AUTO-DÉTECTION carte produit homepage via lien (Elementor-friendly) === */
.yoozi-product-card:has(a[href*="moscow-mule"]),
.elementor-column:has(a[href*="moscow-mule"]),
.woocommerce ul.products li.product:has(a[href*="moscow-mule"]) {
  --product-color: #4A7FA5;
  --product-color-dark: #355E7D;
  --product-color-soft: #DDE8F2;
}

.yoozi-product-card:has(a[href*="hugo-spritz"]),
.elementor-column:has(a[href*="hugo-spritz"]),
.woocommerce ul.products li.product:has(a[href*="hugo-spritz"]) {
  --product-color: #7A8C3A;
  --product-color-dark: #556425;
  --product-color-soft: #EBEEDA;
}

.yoozi-product-card:has(a[href*="rose-lavande"]),
.elementor-column:has(a[href*="rose-lavande"]),
.woocommerce ul.products li.product:has(a[href*="rose-lavande"]) {
  --product-color: #C47B8E;
  --product-color-dark: #9A5B6C;
  --product-color-soft: #F7E6EA;
}

.yoozi-product-card:has(a[href*="princess-sparkling"]),
.elementor-column:has(a[href*="princess-sparkling"]),
.woocommerce ul.products li.product:has(a[href*="princess-sparkling"]) {
  --product-color: #E8C547;
  --product-color-dark: #B8962F;
  --product-color-soft: #FBF3D0;
}

/* ================================================================
   PANIER / CHECKOUT — filet vertical + accent couleur boisson
   ================================================================ */

.woocommerce-cart tr.cart_item:has(a[href*="moscow-mule"]) { --product-color: #4A7FA5; --product-color-soft: #DDE8F2; }
.woocommerce-cart tr.cart_item:has(a[href*="hugo-spritz"]) { --product-color: #7A8C3A; --product-color-soft: #EBEEDA; }
.woocommerce-cart tr.cart_item:has(a[href*="rose-lavande"]) { --product-color: #C47B8E; --product-color-soft: #F7E6EA; }
.woocommerce-cart tr.cart_item:has(a[href*="princess-sparkling"]) { --product-color: #E8C547; --product-color-soft: #FBF3D0; }

.woocommerce-cart tr.cart_item td.product-thumbnail {
  position: relative;
  border-left: 3px solid var(--product-color, var(--yoozi-gold));
  transition: border-color 400ms ease;
}

.woocommerce-cart tr.cart_item td.product-name a {
  transition: color 300ms ease;
}

.woocommerce-cart tr.cart_item:hover td.product-name a {
  color: var(--product-color, var(--yoozi-gold)) !important;
}

/* Checkout — accent léger sur les produits */
.woocommerce-checkout-review-order-table tr.cart_item .product-name {
  border-left: 3px solid var(--product-color, var(--yoozi-gold));
  padding-left: 12px;
  transition: border-color 400ms ease;
}
.woocommerce-checkout-review-order-table tr.cart_item:has(a[href*="moscow-mule"]) { --product-color: #4A7FA5; }
.woocommerce-checkout-review-order-table tr.cart_item:has(a[href*="hugo-spritz"]) { --product-color: #7A8C3A; }
.woocommerce-checkout-review-order-table tr.cart_item:has(a[href*="rose-lavande"]) { --product-color: #C47B8E; }
.woocommerce-checkout-review-order-table tr.cart_item:has(a[href*="princess-sparkling"]) { --product-color: #E8C547; }

/* ================================================================
   ARCHIVE BOUTIQUE — halo soft au hover + prix en couleur boisson
   ================================================================ */

.woocommerce ul.products li.product {
  position: relative;
  transition: transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 450ms ease;
}

.woocommerce ul.products li.product::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: radial-gradient(ellipse at 50% 45%, var(--product-color-soft, transparent) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
  z-index: 0;
  border-radius: 4px;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
}

.woocommerce ul.products li.product:hover::before {
  opacity: 0.85;
}

.woocommerce ul.products li.product > * {
  position: relative;
  z-index: 1;
}

.woocommerce ul.products li.product:hover .price {
  color: var(--product-color, var(--yoozi-dark)) !important;
  transition: color 400ms ease;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
  transition: background-color 350ms ease, color 350ms ease, transform 350ms ease;
}

.woocommerce ul.products li.product:hover .button {
  background-color: var(--product-color, var(--yoozi-gold)) !important;
  transform: translateY(-1px);
}

/* ================================================================
   TITRES SIGNATURE — couleur boisson AU REPOS pour attirer l'œil,
   couleur plus profonde au hover pour le feedback d'interaction.
   ================================================================ */

/* Fiche produit — titre H1 en couleur signature par défaut */
.single-product .product_title,
.single-product h1.product_title,
.woocommerce-page .product_title {
  color: var(--product-color) !important;
  transition: color 400ms ease;
  cursor: default;
}

.single-product .product_title:hover,
.single-product h1.product_title:hover,
.woocommerce-page .product_title:hover {
  color: var(--product-color-dark) !important;
}

/* Cartes homepage — signature chromatique en ÉTAT DE BASE (avant hover).
   Sélecteurs spécifiques pour battre Elementor default (.elementor-heading-title).
   Si Lorène force une couleur via Elementor panel → elle gagne (inline style). */
.elementor-column:has(a[href*="/produit/yoozi-"]) .elementor-widget-heading .elementor-heading-title,
.elementor-column:has(a[href*="/produit/yoozi-"]) .elementor-widget-heading .elementor-heading-title a,
.yoozi-product-card .elementor-widget-heading .elementor-heading-title,
.yoozi-product-card .elementor-widget-heading .elementor-heading-title a,
.yoozi-product-card h3,
.yoozi-product-card h3 a {
  color: var(--product-color);
  transition: color 400ms ease;
}

/* Hover → variante plus foncée */
.elementor-column:has(a[href*="/produit/yoozi-"]):hover .elementor-widget-heading .elementor-heading-title,
.elementor-column:has(a[href*="/produit/yoozi-"]):hover .elementor-widget-heading .elementor-heading-title a,
.yoozi-product-card:hover .elementor-widget-heading .elementor-heading-title,
.yoozi-product-card:hover .elementor-widget-heading .elementor-heading-title a,
.yoozi-product-card:hover h3,
.yoozi-product-card:hover h3 a {
  color: var(--product-color-dark);
}

/* Focus clavier + tap mobile (accessibilité) */
:where(.yoozi-product-card:focus-within h3,
       .yoozi-product-card:focus-within h3 a,
       .yoozi-product-card:focus-within .elementor-heading-title,
       .yoozi-product-card:focus-within .elementor-heading-title a) {
  color: var(--product-color-dark);
}

/* Shop archive (/boutique/) — titres produits en signature AU REPOS */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3.woocommerce-loop-product__title {
  color: var(--product-color);
  transition: color 400ms ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--product-color-dark);
}

/* Panier — titre de l'item en couleur signature */
.woocommerce-cart tr.cart_item td.product-name a {
  color: var(--product-color, var(--yoozi-dark)) !important;
  font-weight: 700;
}

.woocommerce-cart tr.cart_item:hover td.product-name a {
  color: var(--product-color-dark, var(--yoozi-dark)) !important;
}

/* Nav des 4 produits (barre en haut de fiche produit) — couleur de chaque vignette par défaut */
.yoozi-product-nav a[data-product-id="82"] span { color: #4A7FA5 !important; }
.yoozi-product-nav a[data-product-id="85"] span,
.yoozi-product-nav a[data-product-id="393"] span { color: #7A8C3A !important; }
.yoozi-product-nav a[data-product-id="84"] span,
.yoozi-product-nav a[data-product-id="394"] span { color: #C47B8E !important; }
.yoozi-product-nav a[data-product-id="83"] span,
.yoozi-product-nav a[data-product-id="395"] span,
.yoozi-product-nav a[data-product-id="392"] span { color: #E8C547 !important; }
.yoozi-product-nav a[data-product-id="82"] span { color: #4A7FA5 !important; }
.yoozi-product-nav a[data-product-id="392"] span { color: #4A7FA5 !important; }

.yoozi-product-nav a span {
  transition: color 300ms ease, letter-spacing 300ms ease;
}

.yoozi-product-nav a:hover span {
  letter-spacing: 1px;
}

:where(.woocommerce ul.products li.product .woocommerce-loop-product__title) {
  transition: color 400ms ease;
}

:where(.woocommerce ul.products li.product:hover .woocommerce-loop-product__title) {
  color: var(--product-color);
}

/* ================================================================
   NAV PRODUITS — hover colore la pastille pointée
   ================================================================ */

.yoozi-product-nav a {
  transition: color 400ms ease, border-color 400ms ease;
}

.yoozi-product-nav a:hover {
  color: var(--product-color) !important;
  border-bottom-color: var(--product-color) !important;
}

.yoozi-product-nav a.active {
  color: var(--product-color);
  border-bottom-color: var(--product-color);
}

/* ================================================================
   HALO LUMINEUX DERRIÈRE LE FLACON (fiche produit)
   ================================================================ */

.single-product div.product {
  position: relative;
}

.yoozi-product-halo {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 45%,
    var(--product-color-soft) 0%,
    rgba(255, 255, 255, 0) 65%
  );
  opacity: 0.85;
  transition: opacity 600ms ease;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
  position: relative;
  z-index: 1;
}

.single-product div.product:hover .yoozi-product-halo {
  opacity: 1;
}

@media (max-width: 767px) {
  .yoozi-product-halo {
    width: 100%;
    height: 55%;
    top: 0;
  }
}

/* ================================================================
   BOUTON ADD TO CART — hover bascule sur couleur signature
   ================================================================ */

.single-product .woocommerce .single_add_to_cart_button {
  transition: background-color 350ms ease, color 350ms ease, transform 350ms ease;
}

.single-product .woocommerce .single_add_to_cart_button:hover {
  background-color: var(--product-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px var(--product-color-dark);
}

/* ================================================================
   FICHE TECHNIQUE — bordure signature + bullets couleur boisson
   ================================================================ */

/* (Mathieu 2026-05-05 point 18) Composition : couleur cocktail → transparent → doré.
   Lecture du gradient en diagonale : signature couleur boisson en haut-gauche,
   fade transparent au milieu, voile doré en bas-droite. */
body[class*="product-"] .yoozi-product-data {
  border-top: 3px solid var(--product-color);
  background:
    linear-gradient(135deg,
      var(--product-color-soft) 0%,
      color-mix(in srgb, var(--product-color-soft) 60%, transparent) 35%,
      transparent 60%,
      rgba(200, 169, 110, 0.32) 100%
    ),
    var(--yoozi-cream);
}

body[class*="product-"] .yoozi-data-col h3 {
  color: var(--product-color-dark);
  border-bottom-color: color-mix(in srgb, var(--product-color) 30%, transparent);
}

body[class*="product-"] .yoozi-data-col ul li::before {
  background: var(--product-color);
}

body[class*="product-"] .yoozi-data-value strong,
body[class*="product-"] .yoozi-data-alcool strong {
  color: var(--product-color-dark);
}

/* ================================================================
   SWITCH UNIT/PACK — couleur boisson active
   ================================================================ */

body[class*="product-"] .yoozi-format-switch {
  border-color: var(--product-color);
}

body[class*="product-"] .yoozi-switch-btn {
  color: var(--product-color-dark);
}

body[class*="product-"] .yoozi-switch-btn.active {
  background: var(--product-color);
  color: #fff;
}

body[class*="product-"] .yoozi-switch-btn:hover:not(.active) {
  background: var(--product-color-soft);
}

/* ================================================================
   PRIX — couleur signature boisson (Mathieu 2026-05-13)
   ================================================================ */

body[class*="product-"] .woocommerce-Price-amount {
  color: var(--product-color) !important;
}
body[class*="product-"] .woocommerce-Price-amount bdi,
body[class*="product-"] .woocommerce-Price-currencySymbol {
  color: inherit;
}
body[class*="product-"] .yoozi-price-unit {
  color: var(--product-color-dark) !important;
}

/* ================================================================
   ADJECTIF PRODUIT — couleur signature
   ================================================================ */

body[class*="product-"] .yoozi-product-adjective {
  color: var(--product-color-dark);
}

/* ================================================================
   TOUCH DEVICES — fallback sans hover (tap active)
   ================================================================ */

@media (hover: none) {
  .single-product .product_title,
  .woocommerce-page .product_title {
    color: var(--product-color);
  }
}