/* == Didaktik Univers: Botones del grid ==
   Normal: verde #00C896
   Hover : rosa  #FF0080
   Se aplica SOLO dentro del contenedor con la clase .du-featured-grid
============================================================== */

:root{
  --du-green: #00C896; /* normal */
  --du-pink:  #FF0080; /* hover  */
}

.du-featured-grid .wp-element-button,
.du-featured-grid .add_to_cart_button,
.du-featured-grid .wc-block-components-product-button__button,
.du-featured-grid .wp-block-button__link,
.du-featured-grid .wc-block-grid__product .button,
.du-featured-grid .wc-block-grid__product a.button{
  background: var(--du-green) !important;   /* NORMAL = VERDE */
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s ease-in-out !important;
}

.du-featured-grid .wp-element-button:hover,
.du-featured-grid .add_to_cart_button:hover,
.du-featured-grid .wc-block-components-product-button__button:hover,
.du-featured-grid .wp-block-button__link:hover,
.du-featured-grid .wc-block-grid__product .button:hover,
.du-featured-grid .wc-block-grid__product a.button:hover{
  background: var(--du-pink) !important;    /* HOVER = ROSA */
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255,0,128,.18) !important;
}

/* Opcional: ancho completo + iconito carrito */
.du-featured-grid .wp-element-button,
.du-featured-grid .add_to_cart_button{
  width: 100% !important;
  text-align: center !important;
}

/* DU — icono carrito BLANCO */
.du-featured-grid .wp-element-button::before,
.du-featured-grid .add_to_cart_button::before{
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: 8px; line-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* SVG con trazo blanco (#fff) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2 13h13l2-8H6'/%3E%3C/svg%3E");
}

.du-featured-grid .wp-element-button:focus-visible,
.du-featured-grid .add_to_cart_button:focus-visible{
  outline: 3px solid #ffffff !important;
  outline-offset: 2px;
}

/* (Opcional) Efecto al hacer clic: un pelín más “hundido” */
.du-featured-grid .wp-element-button:active,
.du-featured-grid .add_to_cart_button:active{
  transform: translateY(0);     /* cancela el -1px del hover */
  box-shadow: none;
}

/* (Opcional) Estado deshabilitado/agotado más tenue */
.du-featured-grid .wp-element-button[disabled],
.du-featured-grid .add_to_cart_button[disabled],
.du-featured-grid .wp-element-button.is-disabled,
.du-featured-grid .add_to_cart_button.is-disabled{
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* === Hover en el EDITOR (Gutenberg) ===
   Cuando el producto recibe hover en el editor,
   pintamos el botón como si estuviera en hover. */
.block-editor-page .du-featured-grid .wc-block-grid__product:hover .wp-element-button,
.block-editor-page .du-featured-grid .wc-block-grid__product:hover .add_to_cart_button,
.block-editor-page .du-featured-grid .wc-block-grid__product:hover .wc-block-components-product-button__button,
.block-editor-page .du-featured-grid .wc-block-grid__product:hover .wp-block-button__link{
  background: var(--du-pink) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255,0,128,.18) !important;
}