/* ═══════════════════════════════════════════════════════════════
   HESTIA — habillage boutique, fiche produit, en-tête et pied de page
   Fichier : wp-content/themes/hestia-child/hestia-shop.css

   Conçu pour Astra + WooCommerce. Chaque bloc est indépendant :
   supprimez-en un sans casser les autres.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. BANDEAU DU HAUT (piloté par le panneau)
   ───────────────────────────────────────────── */
.hestia-topbar {
  background: var(--hestia-ink, #101828);
  color: #fff;
  height: 40px;
  overflow: hidden;
}
.hestia-tb-stack {
  display: grid;
  height: 40px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.hestia-tb-msg {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hestia-tb-msg.is-on { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .hestia-topbar, .hestia-tb-stack { height: 36px; }
  .hestia-tb-msg { font-size: 12px; }
  .hestia-tb-stack { padding: 0 14px; }
}

/* ─────────────────────────────────────────────
   2. TYPOGRAPHIE GÉNÉRALE
   ───────────────────────────────────────────── */
body,
.woocommerce {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--hestia-ink, #101828);
}
h1, h2, h3, h4,
.woocommerce-loop-product__title,
.product_title {
  font-family: "Bricolage Grotesque", sans-serif !important;
  letter-spacing: -.025em;
  font-weight: 800;
}

/* ─────────────────────────────────────────────
   3. CARTES PRODUIT (boutique et archives)
   ───────────────────────────────────────────── */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  border: 1px solid var(--hestia-line, #E4E9F2);
  border-radius: var(--hestia-radius, 16px);
  background: var(--hestia-card, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .22s cubic-bezier(.2,.8,.3,1);
  position: relative;
  min-width: 0;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: var(--hestia-primary, #3457FF);
  box-shadow: 0 12px 34px rgba(16,24,40,.10);
}

.woocommerce ul.products li.product img {
  border-radius: 0;
  margin: 0 0 14px;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--hestia-surface, #F5F7FB);
  padding: 14px;
  box-sizing: border-box;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  padding: 0 16px 4px !important;
  line-height: 1.35;
}
.woocommerce ul.products li.product .price {
  padding: 0 16px;
  color: var(--hestia-ink, #101828) !important;
  font-size: 19px;
  font-weight: 800;
  font-family: "Bricolage Grotesque", sans-serif;
  margin-top: auto;
}
.woocommerce ul.products li.product .price del { display: none; }

.woocommerce ul.products li.product .button {
  margin: 14px 16px 16px;
  border-radius: 11px !important;
  background: var(--hestia-ink, #101828) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  transition: .18s;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--hestia-primary, #3457FF) !important;
  transform: translateY(-1px);
}

.woocommerce span.onsale {
  background: var(--hestia-promo, #F5453B) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  margin: 0 !important;
}

@media (max-width: 1080px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   4. FICHE PRODUIT
   ───────────────────────────────────────────── */
.single-product div.product .product_title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.single-product div.product p.price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px !important;
  font-weight: 800;
  color: var(--hestia-ink, #101828) !important;
}
.single-product div.product p.price del { display: none; }

.single-product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 26px !important;
  border-bottom: 1px solid var(--hestia-line, #E4E9F2);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.single-product .woocommerce-tabs ul.tabs::before { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  min-width: max-content;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  padding: 14px 18px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--hestia-muted, #667085) !important;
  border-bottom: 2px solid transparent;
  display: block;
  white-space: nowrap;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--hestia-primary, #3457FF) !important;
  border-bottom-color: var(--hestia-primary, #3457FF);
}

.single-product .woocommerce-tabs .panel h2 { display: none; }
.single-product .woocommerce-tabs .panel p,
.single-product .woocommerce-tabs .panel li { max-width: 70ch; line-height: 1.7; }

.single-product table.shop_attributes { border: none; }
.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
  border: none;
  border-bottom: 1px solid var(--hestia-line, #E4E9F2);
  padding: 13px 4px;
  font-style: normal;
}
.single-product table.shop_attributes th { color: var(--hestia-muted, #667085); font-weight: 600; }
.single-product table.shop_attributes td { font-weight: 700; }

.single-product .single_add_to_cart_button {
  background: var(--hestia-primary, #3457FF) !important;
  border-radius: 13px !important;
  font-weight: 700 !important;
  padding: 15px 28px !important;
  min-width: 200px;
  transition: .18s;
}
.single-product .single_add_to_cart_button:hover {
  background: var(--hestia-primary-d, #2440D8) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(52,87,255,.28);
}

/* ─────────────────────────────────────────────
   5. FILTRES ET PASTILLES DE CATÉGORIE
   ───────────────────────────────────────────── */
.hestia-pills {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  margin-bottom: 20px;
}
.hestia-pills a {
  flex: 0 0 auto;
  min-width: max-content;
  border: 1px solid var(--hestia-line, #E4E9F2);
  background: var(--hestia-card, #fff);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hestia-ink, #101828);
  text-decoration: none;
  white-space: nowrap;
  transition: .16s;
}
.hestia-pills a:hover { border-color: var(--hestia-primary, #3457FF); color: var(--hestia-primary, #3457FF); }
.hestia-pills a.is-on { background: var(--hestia-primary, #3457FF); border-color: var(--hestia-primary, #3457FF); color: #fff; }
@media (min-width: 1100px) { .hestia-pills { flex-wrap: wrap; overflow-x: visible; } }

/* ─────────────────────────────────────────────
   6. PANIER ET COMMANDE
   ───────────────────────────────────────────── */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hestia-line, #E4E9F2);
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  border: 1px solid var(--hestia-line, #E4E9F2);
  border-radius: 16px;
  padding: 22px;
  background: var(--hestia-card, #fff);
}
.woocommerce #payment ul.payment_methods {
  border: none;
  background: var(--hestia-surface, #F5F7FB);
  border-radius: 13px;
  padding: 16px;
}
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--hestia-primary, #3457FF) !important;
  border-radius: 13px !important;
  font-weight: 700 !important;
  padding: 15px 26px !important;
}

/* La remise apparaît en vert, comme dans la maquette */
.woocommerce .cart_totals .fee th,
.woocommerce .cart_totals .fee td,
.woocommerce-checkout .fee th,
.woocommerce-checkout .fee td { color: var(--hestia-ok, #07734F); font-weight: 700; }

/* ─────────────────────────────────────────────
   7. EN-TÊTE ET PIED DE PAGE
   ───────────────────────────────────────────── */
.ast-primary-header-bar { border-bottom: 1px solid var(--hestia-line, #E4E9F2) !important; }
.main-header-menu a { font-weight: 600 !important; font-size: 14.5px !important; }

.site-footer,
.ast-small-footer { background: var(--hestia-surface, #F5F7FB) !important; }
.site-footer a { transition: .16s; }
.site-footer a:hover { color: var(--hestia-primary, #3457FF) !important; }

/* Bloc contact du pied de page */
.hestia-foot-contact { display: flex; flex-direction: column; gap: 9px; }
.hestia-foot-contact a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hestia-ink, #101828);
  text-decoration: none;
}
.hestia-foot-contact a:hover { color: var(--hestia-primary, #3457FF); }

/* ─────────────────────────────────────────────
   8. GARDE-FOUS CONTRE LES DÉBORDEMENTS
   ───────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, table { max-width: 100%; }
p, li, td, th, h1, h2, h3, h4 { overflow-wrap: anywhere; }
.woocommerce table.shop_table_responsive { overflow-x: auto; display: block; }