/* ==========================================================================
   Maison Abaragh - Design System
   Charte nude + terracotta + or ancien, appliquee par-dessus le CSS WooCommerce.
   Tokens en haut : changer une valeur ici la propage partout.

   Contrastes verifies sur --ab-nude (#EDE3D6) :
     encre      #2A211A   12.4:1
     secondaire #6B5C4D    5.2:1
     terracotta #BF5629    4.5:1  (limite AA, reserve aux accents et prix)
   Sur --ab-terracotta : creme #F7F1E8 = 5.1:1
   ========================================================================== */

:root {
  /* Surfaces - aucun blanc pur, tout est rechauffe */
  --ab-nude:    #EDE3D6;
  --ab-surface: #F7F1E8;
  --ab-raised:  #FBF7F1;
  --ab-line:    #DCCDB9;

  /* Texte */
  --ab-encre:  #2A211A;
  --ab-soft:   #6B5C4D;
  --ab-onDark: #F7F1E8;

  /* Accents */
  --ab-terracotta: #BF5629;
  --ab-terra-deep: #9E4522;
  --ab-gold:       #A5813F;
  --ab-gold-light: #D4AF6A;

  /* Etats */
  --ab-success: #4F7A52;
  --ab-error:   #A93F2B;

  /* Typographie */
  --ab-font-title: "Playfair Display", Georgia, serif;
  --ab-font-body:  "Jost", system-ui, -apple-system, sans-serif;

  /* Formes et mouvement */
  --ab-radius:     3px;
  --ab-radius-lg:  6px;
  --ab-transition: .25s ease;
  --ab-shadow:       0 1px 3px rgba(42, 33, 26, .08);
  --ab-shadow-hover: 0 12px 32px rgba(42, 33, 26, .16);
}

/* --------------------------------------------------------------------------
   0. Fond global
   -------------------------------------------------------------------------- */

body,
body.woocommerce,
body.woocommerce-page {
  background-color: var(--ab-nude);
  color: var(--ab-encre);
}

/* --------------------------------------------------------------------------
   1. Boutons
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button {
  background-color: var(--ab-terracotta);
  color: var(--ab-onDark);
  font-family: var(--ab-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--ab-radius);
  padding: 15px 32px;
  line-height: 1.2;
  transition: background-color var(--ab-transition), color var(--ab-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
  background-color: var(--ab-encre);
  color: var(--ab-onDark);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  background-color: var(--ab-line);
  color: var(--ab-soft);
  opacity: 1;
}

/* Secondaire : contour */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward {
  background-color: transparent;
  color: var(--ab-encre);
  box-shadow: inset 0 0 0 1px var(--ab-encre);
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover {
  background-color: var(--ab-encre);
  color: var(--ab-onDark);
}

/* --------------------------------------------------------------------------
   2. Cartes produit
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product { text-align: center; }

.woocommerce ul.products li.product a img {
  border-radius: var(--ab-radius-lg);
  box-shadow: var(--ab-shadow);
  transition: box-shadow var(--ab-transition), transform var(--ab-transition);
  margin-bottom: 16px;
}

.woocommerce ul.products li.product:hover a img {
  box-shadow: var(--ab-shadow-hover);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ab-font-title);
  font-size: 18px;
  font-weight: 600;
  color: var(--ab-encre);
  line-height: 1.3;
  padding: 6px 0 4px;
}

.woocommerce ul.products li.product .price {
  color: var(--ab-terracotta);
  font-family: var(--ab-font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .3px;
}

.woocommerce ul.products li.product .price del { color: var(--ab-soft); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--ab-terracotta); }

.woocommerce span.onsale {
  background-color: var(--ab-terracotta);
  color: var(--ab-onDark);
  font-family: var(--ab-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. Fiche produit
   -------------------------------------------------------------------------- */

.woocommerce div.product .product_title {
  font-family: var(--ab-font-title);
  color: var(--ab-encre);
  font-weight: 600;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ab-terracotta);
  font-size: 26px;
  font-weight: 600;
}

.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--ab-radius-lg); }

.woocommerce div.product form.cart div.quantity input.qty {
  background-color: var(--ab-surface);
  color: var(--ab-encre);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  padding: 13px 8px;
  font-family: var(--ab-font-body);
}

.woocommerce .product_meta {
  font-size: 14px;
  color: var(--ab-soft);
  border-top: 1px solid var(--ab-line);
  padding-top: 16px;
  margin-top: 8px;
}

.woocommerce .product_meta a { color: var(--ab-terracotta); }

/* Onglets */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 28px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--ab-line); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 24px 0 0;
  margin: 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: var(--ab-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ab-soft);
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--ab-encre);
  border-bottom-color: var(--ab-terracotta);
}

.woocommerce div.product .woocommerce-tabs .panel { background: transparent; color: var(--ab-encre); }

/* Etoiles */
.woocommerce .star-rating span,
.woocommerce p.stars a { color: var(--ab-gold); }
.woocommerce .star-rating::before { color: var(--ab-line); }

/* --------------------------------------------------------------------------
   4. Notices
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--ab-font-body);
  border-top: 0;
  border-left: 2px solid var(--ab-terracotta);
  border-radius: var(--ab-radius);
  background-color: var(--ab-surface);
  color: var(--ab-encre);
  padding: 16px 20px 16px 46px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--ab-terracotta); top: 17px; left: 18px; }

.woocommerce-message { border-left-color: var(--ab-success); }
.woocommerce-message::before { color: var(--ab-success); }
.woocommerce-error { border-left-color: var(--ab-error); }
.woocommerce-error::before { color: var(--ab-error); }

/* --------------------------------------------------------------------------
   5. Formulaires
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  font-family: var(--ab-font-body);
  font-size: 15px;
  color: var(--ab-encre);
  background-color: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  padding: 14px;
  height: auto;
  transition: border-color var(--ab-transition), box-shadow var(--ab-transition);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder { color: var(--ab-soft); }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--ab-terracotta);
  box-shadow: 0 0 0 3px rgba(191, 86, 41, .15);
  outline: none;
}

.woocommerce form .form-row label {
  font-family: var(--ab-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ab-soft);
  margin-bottom: 7px;
}

.woocommerce form .form-row .required { color: var(--ab-terracotta); text-decoration: none; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg);
  padding: 24px;
  background-color: var(--ab-surface);
}

/* --------------------------------------------------------------------------
   6. Panier et commande
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg);
  border-collapse: separate;
  font-family: var(--ab-font-body);
  color: var(--ab-encre);
  background-color: var(--ab-surface);
}

.woocommerce table.shop_table th {
  font-family: var(--ab-font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ab-soft);
  background-color: var(--ab-raised);
  padding: 15px 12px;
}

.woocommerce table.shop_table td { border-top: 1px solid var(--ab-line); padding: 16px 12px; }
.woocommerce table.shop_table .product-name a { color: var(--ab-encre); font-weight: 500; }
.woocommerce table.shop_table .product-name a:hover { color: var(--ab-terracotta); }
.woocommerce table.shop_table .amount { color: var(--ab-terracotta); font-weight: 600; }

.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
  font-family: var(--ab-font-title);
  font-weight: 600;
  color: var(--ab-encre);
}

.woocommerce-checkout #payment {
  background-color: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg);
}

.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ab-line); }
.woocommerce-checkout #payment ul.payment_methods li { color: var(--ab-encre); }

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--ab-raised);
  border-radius: var(--ab-radius);
  color: var(--ab-encre);
  font-size: 14px;
}

.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ab-raised); }

/* --------------------------------------------------------------------------
   7. Navigation, pagination, fil d'Ariane
   -------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 8px; display: inline-flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--ab-font-body);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  color: var(--ab-encre);
  background-color: transparent;
  padding: 11px 16px;
  transition: all var(--ab-transition);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--ab-terracotta);
  border-color: var(--ab-terracotta);
  color: var(--ab-onDark);
}

.woocommerce .woocommerce-breadcrumb {
  font-family: var(--ab-font-body);
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--ab-soft);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--ab-soft); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ab-terracotta); }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--ab-font-body);
  font-size: 14px;
  color: var(--ab-soft);
}

.woocommerce .woocommerce-ordering select {
  background-color: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  padding: 10px 12px;
  color: var(--ab-encre);
}

/* --------------------------------------------------------------------------
   8. Mon compte
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg);
  overflow: hidden;
  background-color: var(--ab-surface);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--ab-line); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 14px 18px;
  font-family: var(--ab-font-body);
  font-size: 15px;
  color: var(--ab-encre);
  transition: all var(--ab-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--ab-raised);
  color: var(--ab-terracotta);
}

/* --------------------------------------------------------------------------
   9. Responsive et mouvement reduit
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button { padding: 14px 24px; font-size: 13px; }

  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }

  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product:hover a img { transform: none; }
  .woocommerce *,
  .woocommerce *::before,
  .woocommerce *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}