/* ==========================================================
   NomDeMarque — fiche produit modernisée (palette sauge, éditorial)
   La majorité du style est appliquée en classes Tailwind (JS).
   Ce fichier ne couvre que ce que Tailwind ne peut pas cibler
   directement (éléments natifs WooCommerce).
   ========================================================== */

body.single-product{ background:#faf8f5; font-family:"Inter",-apple-system,sans-serif; }

/* Le vrai conteneur 2 colonnes est le 1er wp-block-columns direct de .product.
   Sélecteur qualifié par le type d'élément : WooCommerce ajoute aussi une
   classe "product" au <body> des fiches produit, donc ".woocommerce.product"
   seul matchait aussi <body> (padding/centrage appliqués deux fois, colonnes
   affamées en largeur sur mobile). */
div.woocommerce.product{ max-width:1600px; margin:0 auto; padding:0 1.5rem; }
@media (min-width:1024px){ div.woocommerce.product{ padding:0 4rem; } }
@media (max-width:767px){ div.woocommerce.product{ padding:0 2px; } }

div.woocommerce.product .wp-block-columns{
  gap:2.5rem !important; align-items:flex-start !important; margin-bottom:0 !important;
}
@media (min-width:900px){
  div.woocommerce.product .wp-block-columns > .wp-block-column:first-child{ flex-basis:58% !important; }
  div.woocommerce.product .wp-block-columns > .wp-block-column:last-child{
    flex-basis:42% !important; position:sticky; top:110px;
  }
}
@media (max-width:899px){
  div.woocommerce.product .wp-block-columns{ flex-wrap:wrap !important; }
  div.woocommerce.product .wp-block-columns > .wp-block-column{
    flex-basis:100% !important; width:100% !important; position:static !important;
  }
  /* sur mobile, les colonnes s'empilent dans l'ordre naturel : la photo
     (galerie, 1re colonne) doit apparaître avant titre/prix/config */
}

/* Badge promo natif WooCommerce (".onsale") : remplace le rond olive
   "Sale!" par un tag rectangulaire bleu affichant "-X%" (texte injecté en
   JS dans product-modern.js, à partir du prix barré/prix actuel). */
.onsale{ display:none !important; }

.wp-block-woocommerce-product-image-gallery{ background:#f3f4f3; }
.woocommerce-product-gallery__trigger{ display:none !important; }
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper{ aspect-ratio:4/3; }
.wp-block-woocommerce-product-image-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }

/* vraie galerie : vignettes cliquables (photo principale + 2e vue) */
.mic-gallery-thumbs{ display:flex; gap:.6rem; margin-top:.8rem; }
.mic-gallery-thumb{
  width:64px; height:64px; flex:none; border-radius:10px; background-size:cover; background-position:center;
  border:2px solid transparent; padding:0; cursor:pointer; transition:border-color .15s ease, opacity .15s ease;
  opacity:.7;
}
.mic-gallery-thumb:hover{ opacity:1; }
.mic-gallery-thumb.is-active{ border-color:#161311; opacity:1; }

/* masque le <select> natif remplacé par les swatches JS (accessibilité conservée) */
.wp-block-woocommerce-add-to-cart-form table.variations{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.woocommerce-variation-description{ display:none; }

/* accordéon : ouverture/fermeture pilotée par une classe .hidden (Tailwind) */
.mic-acc-panel.hidden{ display:none; }

/* le bloc Détails produit natif (description longue/infos/avis) est masqué :
   on le remplace entièrement par notre propre accordéon éditorial */
.wp-block-woocommerce-product-details{ display:none; }

/* le bloc "Related products" natif est masqué : remplacé par notre section
   "Compléter le canapé" (vrais produits de la même collection) */
.wp-block-woocommerce-product-collection{ display:none !important; }

/* SKU / Catégorie / Tags natifs : masqués (déjà repris ailleurs sur la fiche) */
.wp-block-woocommerce-product-meta{ display:none !important; }

/* extrait court natif (déjà repris dans l'accordéon "Description") */
.wp-block-post-excerpt{ display:none !important; }

/* bandeau de marque + "Compléter le canapé" : forcer le plein-largeur (le
   layout "constrained" de WordPress centre sinon ces blocs injectés en JS) */
section.bg-sage, section.bg-bg{
  max-width: none !important; width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}

::-webkit-scrollbar{ width:0; height:0; }

/* Filet de sécurité CSS pour les blocs injectés en JS (Configuration, prix,
   quantité/bouton) : Tailwind CDN génère ses classes à la volée, ce qui peut
   provoquer un très bref chevauchement avant que le JIT n'ait fini. On fixe
   ici le strict nécessaire en CSS "brut" pour que la mise en page soit
   correcte dès le premier rendu, sans dépendre du timing du CDN. */
.mic-title-row{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem .25rem; }
.wp-block-woocommerce-product-price{ display:flex; flex-direction:column; align-items:flex-end; }
.wp-block-add-to-cart-form .grid.grid-cols-2{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-bottom:0;
}
.wp-block-add-to-cart-form .grid.grid-cols-2 > .col-span-2{ grid-column: span 2 / span 2; }
.wp-block-add-to-cart-form .mt-8{ margin-top:2rem; display:block; }
.wp-block-add-to-cart-form{ display:block; }
.wp-block-add-to-cart-form .quantity,
.wp-block-add-to-cart-form .single_add_to_cart_button{ position:static !important; margin-top:2rem !important; float:none !important; }
.wp-block-add-to-cart-form form.cart{ display:flex; align-items:flex-start; gap:.5rem; flex-wrap:wrap; }

/* Stepper quantité : pas de bordure interne, pas de flèches natives */
.mic-qty-stepper input.qty{ border:none !important; box-shadow:none !important; -moz-appearance:textfield; }
.mic-qty-stepper input.qty::-webkit-outer-spin-button,
.mic-qty-stepper input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Material Symbols : la feuille Google Fonts ne fournit que le @font-face,
   cette classe active bien le rendu en icône (au lieu du nom en texte brut) */
/* --- fiche produit mobile : plus lisible, plus compacte (inspiré de
   nomdemarque.com sur mobile) --- */
@media (max-width:767px){
  /* Configuration : repliée par défaut, un seul résumé cliquable qui déplie
     la grille des formats — évite le mur de tuiles toujours visible */
  .mic-config-toggle{ cursor:pointer; }
  .mic-config-chevron{ transition:transform .2s ease; }
  .mic-config-wrap.is-open .mic-config-chevron{ transform:rotate(180deg); }
  .mic-config-grid{ display:none !important; margin-top:.6rem; }
  .mic-config-wrap.is-open .mic-config-grid{ display:grid !important; }

  /* rythme vertical resserré entre les blocs de la fiche */
  .mic-attr-block{ margin-top:1.4rem !important; }
  .mic-config-wrap{ margin-top:1.4rem !important; }
  .mic-title-row h1{ font-size:24px !important; }
}

.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}