/* ==============================================================
   woocommerce.css — Styles WooCommerce (classique + Blocks)
   ==============================================================

   SOMMAIRE
   1) Checkout (mise en page)
   2) Mini-panier (Woo Blocks) — boutons
   3) CTA / Boutons produits (archives, related, upsells)
   4) Single product — Ajouter au panier
   5) Produits similaires — hauteur uniforme + bouton en bas
      5.1 WooCommerce classique
      5.2 WooCommerce Blocks
   6) Stackable — cards produits (layout + bouton en bas)
   7) Style bouton "Voir le produit" (Woo Blocks + Stackable)
   8) Single product — image principale (border-radius)
   9) Grilles Woo Blocks — wrappers + CTA collé en bas
   10) Exceptions / resets (annulations ciblées)
   ============================================================== */


/* --------------------------------------------------------------
   1) CHECKOUT — Mise en page 1280px
-------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
  max-width: 1280px;
  margin: 0 auto;
}

/* Deux colonnes : infos / récap */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #order_review {
  display: inline-block;
  vertical-align: top;
  width: 48%;
}

/* Espace entre les colonnes */
.woocommerce-checkout .col2-set {
  margin-right: 4%;
}


/* ----------------------------------------------------------
   2) MINI-PANIER (Woo Blocks) — Boutons pied
---------------------------------------------------------- */

/* Base commune aux deux boutons du mini-panier */
.wc-block-mini-cart__footer-actions a.wc-block-components-button.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: 40px;
  border-width: 3px;
  border-style: solid;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

/* Texte interne bien centré */
.wc-block-mini-cart__footer-actions a.wc-block-components-button.wp-element-button
.wc-block-components-button__text {
  padding: 0;
  margin: 0;
}

/* Bouton : Voir mon panier */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-cart.wc-block-components-button.wp-element-button {
  background-color: #F99B21; /* orange clair */
  border-color: #FFCCA3;     /* bordure plus claire */
  color: #FFFBEF;
}

/* Hover Voir mon panier */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-cart.wc-block-components-button.wp-element-button:hover {
  background-color: #e0891d; /* assombri */
  transform: scale(1.04);    /* grow */
  cursor: pointer;
}

/* Bouton : Valider la commande */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-checkout.wc-block-components-button.wp-element-button {
  background-color: #C87A2A; /* ocre plus foncé */
  border-color: #F2C08A;     /* bordure douce */
  color: #FFF8E6;
}

/* Hover Valider la commande */
.wc-block-mini-cart__footer-actions
a.wc-block-mini-cart__footer-checkout.wc-block-components-button.wp-element-button:hover {
  background-color: #b06b25; /* assombri */
  transform: scale(1.04);    /* grow */
  cursor: pointer;
}


/* --------------------------------------------------------------
   3) CTA / BOUTONS PRODUITS — Woo Blocks (rappels)
-------------------------------------------------------------- */

/* Bouton "Voir le produit" généré par le bloc WooCommerce */
.wc-block-product a.button[data-block-name="woocommerce/product-button"] {
  /* tes styles (couleur, background, border, typo, padding, radius, etc.) */
}

/* Si tu veux forcer uniquement sur Single Product → Produits similaires */
.single-product .wc-block-product a.button[data-block-name="woocommerce/product-button"] {
  /* optionnel : overrides spécifiques */
}


/* ==================================================
   3.1) CTA "Voir le produit" – équivalent .cta-view-product
   (WooCommerce blocks : related / upsells / archives)
   ================================================== */

.cta-view-product a {
  display: block;
  width: fit-content;
  margin: 0 auto;

  padding: 16px 24px;

  border-radius: 999px;           /* pilule parfaite */
  border: 4px solid #f3b562;      /* bordure plus claire (exemple) */

  background-color: var(--wp--preset--color--custom-c-87-a-2-a);
  color: var(--wp--preset--color--custom-e-0-f-7-d-7);

  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;

  font-size: 14px;
  line-height: 1;
  color: #E0F7D7;

  text-align: center;
  text-decoration: none;

  box-sizing: border-box;
}

/* Hover doux, identique à l’autre bouton */
.cta-view-product a:hover {
  filter: brightness(0.95);
}


/* ==================================================
   3.2) Bouton "Voir le produit" (Produits similaires / single product)
   ================================================== */

/* Simule le wrapper .cta-view-product */
.wc-block-product > a.button[data-block-name="woocommerce/product-button"] {
  display: block;
  width: fit-content;
  margin: 0 auto;

  padding: 16px 30px;

  border-radius: 999px;      /* pilule parfaite */
  border: 4px solid #f3b562; /* bordure plus claire (exemple) */

  background-color: var(--wp--preset--color--custom-c-87-a-2-a);
  color: var(--wp--preset--color--custom-e-0-f-7-d-7);

  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;

  font-size: 14px;
  line-height: 1;
  color: #E0F7D7;

  text-align: center;
  text-decoration: none;

  box-sizing: border-box;
}

/* Alignement centré comme dans .cta-view-product */
.wc-block-product {
  text-align: center;
}

.wc-block-product a:hover {
  filter: brightness(0.95);
}


/* --------------------------------------------------------------
   4) SINGLE PRODUCT — Bouton "Ajouter au panier"
-------------------------------------------------------------- */

.single-product form.cart .single_add_to_cart_button.button,
.single-product form.cart .single_add_to_cart_button.wp-element-button {
  display: block;
  width: fit-content;

  padding: 16px 24px;

  border-radius: 999px; /* pilule parfaite */
  border: 4px solid #f3b562;

  background-color: var(--wp--preset--color--custom-c-87-a-2-a);
  color: #E0F7D7;

  font-family: var(--wp--preset--font-family--inter);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  text-align: center;
  text-decoration: none;

  box-sizing: border-box;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Hover doux, identique */
.single-product form.cart .single_add_to_cart_button.button:hover,
.single-product form.cart .single_add_to_cart_button.wp-element-button:hover {
  filter: brightness(0.95);
}


/* --------------------------------------------------------------
   5) PRODUITS SIMILAIRES — Hauteur uniforme + bouton en bas
-------------------------------------------------------------- */

/* 5.0 Règles communes (présentes dans ton fichier d’origine) */
.single-product .related li.product,
.single-product .related .wc-block-product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.single-product .related li.product .button,
.single-product .related .wc-block-product a.button {
  margin-top: auto !important;
  align-self: center !important;
}


/* ==================================================
   5.1) WooCommerce "classique" (ul.products > li.product)
   ================================================== */

.single-product .related ul.products {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* important */
}

.single-product .related ul.products > li.product {
  display: flex;
  flex-direction: column;
  height: auto;
}

.single-product .related ul.products > li.product > * {
  flex: 1 1 auto;
}

/* bouton en bas */
.single-product .related ul.products > li.product a.button,
.single-product .related ul.products > li.product button.button {
  margin-top: auto;
  align-self: center;
  width: fit-content;
}


/* ==================================================
   5.2) WooCommerce Blocks (li.wc-block-product)
   ================================================== */

.single-product :where(.wp-block-woocommerce-related-products, .wc-block-related-products)
  :where(ul.wc-block-product-template, ul.wc-block-grid__products) {
  align-items: stretch; /* important */
}

.single-product :where(.wp-block-woocommerce-related-products, .wc-block-related-products)
  :where(li.wc-block-product) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* le "contenu" de la card doit pouvoir s'étirer */
.single-product :where(.wp-block-woocommerce-related-products, .wc-block-related-products)
  :where(li.wc-block-product) > :first-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* bouton en bas */
.single-product :where(.wp-block-woocommerce-related-products, .wc-block-related-products)
  :where(li.wc-block-product) a.button {
  margin-top: auto;
  align-self: center;
  width: fit-content;
}


/* --------------------------------------------------------------
   6) STACKABLE — Cards produits (layout)
-------------------------------------------------------------- */

/* 1) La rangée Stackable doit étirer les colonnes */
.stk-row.stk-inner-blocks {
  align-items: stretch !important;
}

/* 2) La colonne + wrapper doivent pouvoir prendre toute la hauteur */
.wp-block-stackable-column,
.stk-block-column,
.stk-column-wrapper {
  height: 100% !important;
}

/* 3) Le contenu interne de la card devient une colonne flex en pleine hauteur */
.stk-column-wrapper > .stk-block-content.stk-inner-blocks,
.stk-block-column__content .stk-block-content.stk-inner-blocks {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 4) Le bouton "Voir le produit" est poussé en bas + centré */
.stk-column-wrapper > .stk-block-content.stk-inner-blocks > a.button,
.stk-block-column__content .stk-block-content.stk-inner-blocks > a.button {
  margin-top: auto !important;
  align-self: center !important;
  width: fit-content !important;
}


/* --------------------------------------------------------------
   7) STYLE BOUTON "VOIR LE PRODUIT" (Woo Blocks + Stackable)
-------------------------------------------------------------- */

/* Style visuel du bouton (applicable à tes cards) */
.wc-block-product a.button,
.wc-block-product .wp-block-woocommerce-product-button a.button,
.stk-column-wrapper a.button,
.stk-block-column__content a.button {
  display: inline-flex;
  width: fit-content;

  padding: 16px 24px;

  border-radius: 999px;
  border: 4px solid #f3b562;

  background-color: var(--wp--preset--color--custom-c-87-a-2-a);
  color: #E0F7D7;

  font-family: var(--wp--preset--font-family--inter);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  text-align: center;
  text-decoration: none;

  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Hover doux */
.wc-block-product a.button:hover,
.wc-block-product .wp-block-woocommerce-product-button a.button:hover,
.stk-column-wrapper a.button:hover,
.stk-block-column__content a.button:hover {
  filter: brightness(0.95);
}


/* --------------------------------------------------------------
   8) SINGLE PRODUCT — Image principale (border-radius 30px)
-------------------------------------------------------------- */

.single-product .woocommerce-product-gallery__image {
  border-radius: 30px;
  overflow: hidden;
}

/* Sécurité : l’image respecte le radius */
.single-product .woocommerce-product-gallery__image img {
  border-radius: 30px;
}


/* --------------------------------------------------------------
   9) GRILLES Woo Blocks (archives/menu) — Wrappers + CTA bas
-------------------------------------------------------------- */

.wc-block-product-template > li.wc-block-product,
.wp-block-woocommerce-product-template > li.wc-block-product {
  display: flex;
}

.wc-block-product-template > li.wc-block-product > .wp-block-group.lsdm-zoom,
.wp-block-woocommerce-product-template > li.wc-block-product > .wp-block-group.lsdm-zoom {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* pousse le CTA en bas uniquement dans les blocks */
.wc-block-product-template .cta-view-product,
.wp-block-woocommerce-product-template .cta-view-product {
  margin-top: auto;
}


/* --------------------------------------------------------------
   10) EXCEPTIONS / RESETS — annulations ciblées
-------------------------------------------------------------- */

/* Produits similaires (WooCommerce classique) : on annule toute contrainte */
.woocommerce .related ul.products li.product,
.woocommerce-page .related ul.products li.product {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

.woocommerce .related ul.products li.product a.button {
  width: auto !important;
  height: auto !important;
}


/* --------------------------------------------------------------
   RESPONSIVE — Checkout en 1 colonne (≤ 768px)
-------------------------------------------------------------- */

/* Desktop */
@media (min-width: 1025px) {
  ul.wp-block-woocommerce-product-template.is-flex-container.li-spacing {
    row-gap: 48px !important;
    /* optionnel: garde ton gap horizontal actuel */
    column-gap: var(--wp--style--block-gap, 24px) !important;
  }
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px) {
  ul.wp-block-woocommerce-product-template.is-flex-container.li-spacing {
    row-gap: 64px !important;
    column-gap: var(--wp--style--block-gap, 20px) !important;
  }
}

@media (max-width: 768px) {
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout #order_review {
    display: block;
    width: 100%;
    margin-right: 0;
  }
	ul.li-spacing{
		padding-right: 13px !important;
		padding-left: 13px !important;
	}
  ul.wp-block-woocommerce-product-template.is-flex-container.li-spacing {
    row-gap: 40x !important;
    column-gap: var(--wp--style--block-gap, 16px) !important;
  }
}