/* =====================================================
   GENSTYLE.CSS — feuille de style d'unification
   Site : sensacion.krmelci.com (thème Astra + WooCommerce + Elementor)
   Cible la page Boutique (/shop-3/) et les éléments partagés
   (header, footer, grille produits, mini-panier).

   INSTALLATION (choisis une option) :
   1) Apparence > Personnaliser > CSS additionnel (le plus simple, pas
      besoin de plugin, survit aux mises à jour du thème).
   2) Un plugin type "Simple Custom CSS" / WPCode > coller ce fichier.
   3) Dans un thème enfant Astra : l'enqueue via functions.php.
   ===================================================== */

/* ---------- 1. Palette & typographie unifiées ----------
   On surcharge les variables déjà utilisées par Astra ET Elementor
   pour que TOUT le site (header, footer, boutons Elementor) se
   repeigne d'un coup, sans avoir à cibler chaque plugin séparément. */
:root{
  --ast-global-color-0: #b98a4e;   /* accent (liens, bordures, boutons) */
  --ast-global-color-1: #8f6a3a;   /* accent hover */
  --ast-global-color-2: #1c1c1c;   /* titres */
  --ast-global-color-3: #3a3a3a;   /* texte courant */
  --ast-global-color-4: #ffffff;   /* fond clair */
  --ast-global-color-5: #f7f5f1;   /* fond alternatif */
  --e-global-color-astglobalcolor1: var(--ast-global-color-0);
  --e-global-color-astglobalcolor4: var(--ast-global-color-5);

  --gs-font-heading: 'Ubuntu', sans-serif;
  --gs-font-body: 'Ubuntu', sans-serif;
  --gs-radius: 4px;
  --gs-shadow: 0 6px 18px rgba(0,0,0,.07);
  --gs-shadow-hover: 0 10px 26px rgba(0,0,0,.12);
}

body{
  background-color: var(--ast-global-color-5);
}

/* ---------- 2. Header ---------- */
#masthead{
  border-bottom: 1px solid #ececec;
  background: var(--ast-global-color-4);
}
#masthead .main-header-menu .menu-link{
  font-weight: 600;
  letter-spacing: .04em;
  position: relative;
  padding-bottom: 4px;
}
#masthead .main-header-menu .menu-item.current-menu-item .menu-link,
#masthead .main-header-menu .menu-link:hover{
  color: var(--ast-global-color-0);
}
#masthead .main-header-menu .menu-item.current-menu-item .menu-link::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--ast-global-color-0);
}
.ast-site-header-cart .ast-woo-header-cart-total{
  font-weight: 700;
}

/* ---------- 3. Titre d'archive boutique ---------- */
.ast-archive-description{
  padding: 34px 0 6px;
}
.page-title.ast-archive-title{
  font-size: 32px;
  letter-spacing: .06em;
  color: var(--ast-global-color-2);
}

/* ---------- 4. Barre résultats / tri ---------- */
.woocommerce-result-count{
  color: #8a8a8a;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.woocommerce-ordering select.orderby{
  border: 1px solid #e2ded6;
  border-radius: var(--gs-radius);
  padding: 8px 14px;
  font-size: 13px;
  background-color: var(--ast-global-color-4);
}

/* ---------- 5. Grille produits ---------- */
ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}
ul.products li.product{
  list-style: none;
  background: var(--ast-global-color-4);
  border: 1px solid #ece7dc;
  border-radius: var(--gs-radius);
  overflow: hidden;
  box-shadow: var(--gs-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
  padding: 0 !important;
}
ul.products li.product:hover{
  box-shadow: var(--gs-shadow-hover);
  transform: translateY(-3px);
}

.astra-shop-thumbnail-wrap{
  position: relative;
  aspect-ratio: 433 / 516;
  overflow: hidden;
  background: #f2efe8;
}
.astra-shop-thumbnail-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
ul.products li.product:hover .astra-shop-thumbnail-wrap img{
  transform: scale(1.05);
}

/* bouton "choix des options" qui apparaît sur la photo au survol */
.astra-shop-thumbnail-wrap .ast-on-card-button{
  position: absolute;
  right: 12px; bottom: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ast-global-color-4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
ul.products li.product:hover .ast-on-card-button{
  opacity: 1;
  transform: translateY(0);
}
.astra-shop-thumbnail-wrap .ast-on-card-button svg{
  width: 18px; height: 18px;
  fill: var(--ast-global-color-2);
}
.astra-shop-thumbnail-wrap .ast-card-action-tooltip{
  display: none;
}

/* compare : discret, visible seulement au survol de la carte */
.wcboost-products-compare-button{
  position: absolute;
  top: 12px; right: 12px;
  opacity: 0;
  transition: opacity .2s ease;
  background: var(--ast-global-color-4);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.wcboost-products-compare-button__text{ display: none; }
.wcboost-products-compare-button__icon svg{ width: 14px; height: 14px; }
ul.products li.product:hover .wcboost-products-compare-button{ opacity: 1; }

.astra-shop-summary-wrap{
  padding: 16px 18px 20px;
  text-align: center;
}
.ast-woo-product-category{
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a99a7d;
  margin-bottom: 6px;
}
.woocommerce-loop-product__title{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--ast-global-color-2);
}
.astra-shop-summary-wrap .price{
  font-size: 14px;
  font-weight: 600;
  color: var(--ast-global-color-0);
}
.astra-shop-summary-wrap .price del{
  color: #b5aca0;
  font-weight: 400;
  margin-right: 6px;
}

/* ---------- 6. Mini-panier ---------- */
.widget_shopping_cart .woocommerce-mini-cart-item img{
  border-radius: var(--gs-radius);
}
.widget_shopping_cart .woocommerce-mini-cart__buttons .button{
  border-radius: var(--gs-radius);
  text-align: center;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout{
  background: var(--ast-global-color-0);
  border-color: var(--ast-global-color-0);
  color: #fff;
}

/* ---------- 7. Footer (sections Elementor icônes) ---------- */
.hfe-before-footer-wrap .elementor-icon-box-title,
.hfe-before-footer-wrap .elementor-icon-box-description{
  color: var(--ast-global-color-3);
}

/* ---------- 8. Responsive ---------- */
@media (max-width: 1200px){
  ul.products{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  ul.products{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .page-title.ast-archive-title{ font-size: 24px; }
}
@media (max-width: 560px){
  ul.products{ grid-template-columns: 1fr; }
}