/* =====================================================
   MESKI — CSS design luxe des pages produit  (v3.1 — patchs fusionnés)
   Fichier : meski-luxe.css — RACINE du thème enfant
   Chargé par la section 6c du functions.php.

   Palette validée (maquette v3.2) :
   blanc cassé + noir-miel + or + touches vert Meski.
   Fonctionne avec le template
   /woocommerce/content-single-product.php
===================================================== */

:root {
  --meski-noir:        #151009;
  --meski-blanc:       #fbfaf7;   /* panneau produit (carré 3) */
  --meski-or:          #c3a04e;
  --meski-or-clair:    #e7d191;
  --meski-ambre:       #9a6a20;
  --meski-vert:        #2f5544;   /* accents texte */
  --meski-vert-fond:   #16281e;   /* fonds (badge) — vert coffret */
  --meski-texte:       #2b2115;
  --meski-hairline:    rgba(195,160,78,.45);
}

/* =====================================================
   1. HERO — structure deux colonnes
===================================================== */
.meski-product .meski-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--meski-hairline);
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .meski-product .meski-hero { grid-template-columns: 1fr; }
}

/* ---------- 1a. Colonne image : écrin sombre ---------- */
.meski-hero-media {
  position: relative;
  background: var(--meski-noir);
  padding: 1.6rem 1.6rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* galerie centrée : fin du vide noir */
}

/* la galerie WooCommerce dans l'écrin */
.meski-hero-media .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin-bottom: 0 !important;
  opacity: 1 !important;
}
.meski-hero-media .woocommerce-product-gallery img {
  border: none;
  padding: 0;
  background: transparent;
  max-height: 72vh;
  object-fit: contain;
}

/* vignettes horizontales, centrées, séparées par un filet or */
.meski-hero-media .flex-control-thumbs {
  display: flex !important;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 6px !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(231,209,145,.18);
  list-style: none;
}
.meski-hero-media .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.meski-hero-media .flex-control-thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid rgba(231,209,145,.25) !important;
  border-radius: 2px;
  opacity: .5;
  cursor: pointer;
  transition: opacity .3s ease, border-color .3s ease;
}
.meski-hero-media .flex-control-thumbs img.flex-active,
.meski-hero-media .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--meski-or) !important;
}

/* badge (champ meski_badge) — vert coffret, texte or */
.meski-badge {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 9;
  background: var(--meski-vert-fond);
  border: 1px solid rgba(231,209,145,.55);
  color: var(--meski-or-clair);
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
  pointer-events: none;
}

/* filigrane calligraphique (champ meski_arabic_name) */
.meski-ar {
  position: static;              /* dans le flux, sous la galerie */
  margin-top: 1.2rem;
  text-align: center;
  font-family: 'Amiri', serif;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  color: rgba(231,209,145,.22);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* pastille promo WooCommerce, au cas où */
.meski-hero-media .onsale {
  background: var(--meski-or);
  color: var(--meski-noir);
  border-radius: 0;
  font-family: 'Jost', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .62rem;
}

/* ---------- 1b. Panneau infos : blanc cassé ---------- */
.meski-hero-panel {
  background: var(--meski-blanc);
  padding: clamp(1.6rem, 2.5vw, 2.4rem) clamp(1.6rem, 3vw, 3rem) !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--meski-texte);
}

/* eyebrow : catégorie, en vert Meski */
.meski-eyebrow {
  font-size: .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--meski-vert);
}

/* titre */
.meski-hero-panel .product_title,
.meski-product h1.product_title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
  line-height: 1.1 !important;
  color: var(--meski-noir) !important;
  margin: .6rem 0 0 !important;
  display: block !important;      /* contre "Hide Title" Elementor/Astra */
  visibility: visible !important;
}

/* ornement */
.meski-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .8rem 0;
}
.meski-ornament::before {
  content: "";
  width: 90px;
  height: 1px;
  background: var(--meski-or);
}
.meski-ornament span {
  color: var(--meski-or);
  font-size: .9rem;
  line-height: 1;
}

/* origine (champ meski_origin), en vert */
.meski-origin {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--meski-vert);
  margin: 0 0 1rem;
}

/* description courte */
.meski-hero-panel .woocommerce-product-details__short-description p {
  max-width: 54ch;
  color: #4a3d2b;
  font-size: .94rem;
  line-height: 1.7;
}

/* tagline (champ meski_tagline) */
.meski-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--meski-ambre);
  margin: .8rem 0 0;
}

/* ---------- 1c. Prix + preuves ---------- */
.meski-price-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  border-top: 1px solid var(--meski-hairline);
  border-bottom: 1px solid var(--meski-hairline);
  padding: .9rem 0;
  margin: 1.1rem 0 1rem;
}
.meski-price .price {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: var(--meski-noir) !important;
  margin: 0 !important;
}
.meski-from-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--meski-ambre);
  margin-bottom: .2rem;
}
.meski-proofs {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.meski-proofs div {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6a5a42;
  line-height: 1.8;
  padding-left: 1rem;
  border-left: 1px solid rgba(47,85,68,.4);   /* filet vert Meski */
}
@media (max-width: 992px) {
  .meski-price-row { grid-template-columns: 1fr; gap: 1rem; }
  .meski-proofs { justify-content: flex-start; }
}

/* ---------- 1d. Variations en cartes (meski-variations.js) ---------- */
.variations_form.meski-cards-ready table.variations { display: none; }

.meski-variant-label {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--meski-ambre);
  margin: 1rem 0 .85rem;
}
.meski-variant-grid { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.meski-variant-grid.cols-1 { grid-template-columns: 1fr; }
.meski-variant-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.meski-variant-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.meski-variant-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

.meski-variant-card {
  background: transparent;
  border: 1px solid var(--meski-hairline);
  padding: .8rem .5rem;
  cursor: pointer;
  text-align: center;
  font-family: 'Jost', sans-serif;
  transition: border-color .3s ease, background .3s ease;
}
.meski-variant-card .g {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--meski-noir);
  display: block;
  line-height: 1.2;
}
.meski-variant-card .n {
  font-size: .56rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8a7a5c;
}
.meski-variant-card:hover { border-color: var(--meski-or); }
.meski-variant-card.selected {
  border-color: var(--meski-vert);
  background: rgba(47,85,68,.06);
}
.meski-variant-card.disabled {
  opacity: .35;
  pointer-events: none;
  text-decoration: line-through;
  text-decoration-color: var(--meski-hairline);
}

/* format unique */
.meski-single-format {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border: 1px solid rgba(47,85,68,.45);
  padding: 1rem 1.3rem;
  margin: 1rem 0 1.2rem;
}
.meski-single-format .g {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--meski-noir);
}
.meski-single-format .n {
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--meski-vert);
}

@media (max-width: 560px) {
  .meski-variant-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- 1e. Quantité + Add to cart ---------- */
.meski-hero-panel form.cart {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  align-items: stretch;
  margin: .4rem 0 0;
}
.meski-hero-panel form.cart.variations_form { display: block; }
.meski-hero-panel .woocommerce-variation-add-to-cart {
  display: flex;
  gap: .9rem;
  align-items: stretch;
}
.meski-hero-panel .quantity .qty {
  height: 100%;
  min-height: 52px;
  width: 72px;
  border: 1px solid var(--meski-hairline);
  background: transparent;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--meski-noir);
  text-align: center;
  border-radius: 0;
}
.meski-hero-panel .single_add_to_cart_button {
  flex: 1;
  background: var(--meski-noir) !important;
  color: var(--meski-or-clair) !important;
  border: 1px solid var(--meski-noir) !important;
  border-radius: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  letter-spacing: .42em;
  text-transform: uppercase;
  padding: 1.15rem 2rem !important;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.meski-hero-panel .single_add_to_cart_button:hover {
  background: transparent !important;
  color: var(--meski-vert) !important;
  border-color: var(--meski-vert) !important;
}

/* bouton désactivé (aucune variation choisie) : sobre, pas grisâtre */
.meski-hero-panel .single_add_to_cart_button.disabled,
.meski-hero-panel .single_add_to_cart_button:disabled {
  background: transparent !important;
  color: #8a7a5c !important;
  border: 1px solid var(--meski-hairline) !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* rupture de stock */
.meski-hero-panel .stock.out-of-stock {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--meski-ambre);
  border: 1px solid var(--meski-hairline);
  display: inline-block;
  padding: .7rem 1.4rem;
  margin: .8rem 0;
}
.meski-hero-panel .stock.in-stock {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--meski-vert);
}

/* livraison + meta */
.meski-delivery {
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a7a5c;
  margin: 1.1rem 0 0;
}
.meski-hero-panel .product_meta {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--meski-hairline);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a7a5c;
}
.meski-hero-panel .product_meta a { color: var(--meski-vert); text-decoration: none; }

/* =====================================================
   2. BANDEAU RÉASSURANCE
===================================================== */
.meski-assure-bar {
  background: var(--meski-noir);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2.4rem clamp(1.2rem, 4vw, 4rem);
  margin: 0 0 3rem;
  border: 1px solid var(--meski-hairline);
  border-top: none;
}
.meski-assure-bar article { padding: 0 1.6rem; }
.meski-assure-bar article + article { border-left: 1px solid rgba(231,209,145,.2); }
.meski-assure-bar h4 {
  font-family: 'Jost', sans-serif;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--meski-or-clair);
  margin: 0 0 .4rem;
}
.meski-assure-bar h4::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--meski-or);
  margin-bottom: .8rem;
}
.meski-assure-bar p {
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  color: #b3a789;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 992px) {
  .meski-assure-bar { grid-template-columns: 1fr 1fr; gap: 1.8rem 0; }
  .meski-assure-bar article:nth-child(3) { border-left: none; }
}
@media (max-width: 560px) {
  .meski-assure-bar { grid-template-columns: 1fr; }
  .meski-assure-bar article { border-left: none !important; padding: 0; }
  .meski-assure-bar article + article { margin-top: 1.5rem; }
}

/* =====================================================
   3. ONGLETS / PRODUITS ASSOCIÉS (habillage conservé)
===================================================== */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--meski-hairline); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: none; border-radius: 0; margin: 0 1.5rem 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #8a7a5c;
  padding: 1rem 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--meski-noir);
  border-bottom: 1px solid var(--meski-or);
}

.woocommerce .related.products > h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 2.1rem;
  text-align: center;
  color: var(--meski-noir);
  margin: 3rem 0 2.5rem;
}
.woocommerce .related.products > h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--meski-or);
  margin: 1.2rem auto 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400;
  font-size: 1.25rem !important;
  color: var(--meski-noir);
}
.woocommerce ul.products li.product .price {
  font-family: 'Cormorant Garamond', serif;
  color: var(--meski-ambre) !important;
  font-size: 1.1rem;
}

/* =====================================================
   4. OPTION — hero pleine largeur (bord à bord)
   Décommenter si vous voulez que le hero sorte du
   conteneur Astra et touche les bords de l'écran.
=====================================================
.meski-product .meski-hero,
.meski-assure-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
*/
/* ===== Densification niveau 2 (si nécessaire) ===== */
.meski-hero-media .woocommerce-product-gallery img { max-height: 62vh; }
.meski-hero-panel .woocommerce-product-details__short-description p {
  font-size: .88rem;
  line-height: 1.55;
  margin-bottom: .5rem;
}
.meski-tagline { margin-top: .3rem; }
.meski-eyebrow { font-size: .64rem; }
.meski-ar { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-top: .9rem; }
.meski-hero-media .flex-control-thumbs img { width: 60px; height: 60px; }
.meski-assure-bar { padding: 1.8rem clamp(1.2rem, 4vw, 3rem); }
.meski-assure-bar p { font-size: .74rem; }