/* MiSucu — CSS adicional mínimo. Solo variables de tokens.
   Encolar desde el tema hijo (o pegar en Apariencia → CSS adicional). */

/* 1. Tarjetas de catálogo: ratio fijo 4:5 y esquinas (refuerza el atributo del bloque
      por si el cliente lo resetea desde la UI, que no ofrece 4:5 entre sus presets) */
.wc-block-product-template .wp-block-post-featured-image img,
.wp-block-post-template .wp-block-post-featured-image img {
  aspect-ratio: var(--wp--custom--ratio-tarjeta);
  object-fit: cover;
  width: 100%;
  border-radius: var(--wp--custom--radio--m);
}

/* 2. Rejilla a 2 columnas en móvil (la colección marca 4 en escritorio).
      Verificar el nombre de clase según la versión de Woo instalada. */
@media (max-width: 640px) {
  .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--wp--preset--spacing--30) !important;
  }
}

/* 3. Sección "Volaron": fotos lavadas sin tocar el archivo original */
.seccion-volaron .wp-block-post-featured-image img {
  filter: grayscale(0.45) contrast(0.92) opacity(0.85);
}

/* 3b. Progresivo: si la tarjeta lleva la clase outofstock de Woo
       (comprobar en la versión instalada antes de confiar en ello) */
.wc-block-product-template li.outofstock .wp-block-post-featured-image img {
  filter: grayscale(0.45) contrast(0.92) opacity(0.85);
}

/* 4. Foco visible con el acento, nunca el azul por defecto */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-1);
  outline-offset: 2px;
}

/* 5. Acordeones de la ficha */
.wp-block-details { border-top: 1px solid var(--wp--preset--color--accent-3); }
.wp-block-details summary { font-weight: 700; cursor: pointer; padding-block: var(--wp--preset--spacing--30); }

/* 6. Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ─────────────────────────────────────────────────────────────────────────
   Añadidos durante la implementación. Cada uno corrige un fallo comprobado
   en pantalla, no una preferencia. Siguen sin usar ningún valor suelto.
   ───────────────────────────────────────────────────────────────────────── */

/* 7. Botón outline: sin esto es ilegible.
      theme.json pinta elements.button con fondo granate, y esa regla gana por
      orden de origen a la de core que deja el fondo transparente (misma
      especificidad, :root :where(...)). Resultado medido: texto #7A2C3B sobre
      fondo #7A2C3B, contraste 1:1. Devolvemos el fondo transparente para que
      el borde y el texto en granate se vean sobre la base. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background-color: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus {
  background-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base) !important;
}

/* 8. Pastillas de cuidados. El marcado de entrega traía 0.35rem/0.9rem de
      relleno, que no existen en la escala de espaciado. Se sustituyen por los
      escalones más cercanos del sistema (20 = 0.5rem y 30 = 0.75–1rem) para
      no introducir valores fuera de los tokens. */
.misucu-pastillas > .wp-block-group {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* 9. Formulario de compra de WooCommerce. Su botón es marcado clásico y no
      lleva la clase wp-element-button, así que theme.json → elements.button no
      lo alcanza y saldría con el estilo por defecto de Woo. Se le da la misma
      píldora granate sin reescribir su HTML (regla 4 de CLAUDE.md). */
.wp-block-add-to-cart-form .single_add_to_cart_button,
.wc-block-add-to-cart-form .single_add_to_cart_button {
  background-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  border: 0;
  border-radius: var(--wp--custom--radio--pastilla);
  padding: 0.7rem 1.4rem; /* mismos valores que elements.button en theme.json */
}
.wp-block-add-to-cart-form .single_add_to_cart_button:hover,
.wp-block-add-to-cart-form .single_add_to_cart_button:focus,
.wc-block-add-to-cart-form .single_add_to_cart_button:hover,
.wc-block-add-to-cart-form .single_add_to_cart_button:focus {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.wp-block-add-to-cart-form .quantity input,
.wc-block-add-to-cart-form .quantity input {
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--s);
  padding: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--texto);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
}

/* 10. La banda de empuje al pack usa media-text con imageFill: la imagen va
       en posición absoluta y sus esquinas rectas asoman por fuera del radio
       del contenedor. Se recorta sobre la estructura existente. */
.wp-block-media-text.is-image-fill-element {
  overflow: hidden;
}

/* 11. Tarjetas de catálogo con el botón siempre a la misma altura.
       Los títulos ocupan una o dos líneas según el producto, así que sin esto
       los botones bailan dentro de la fila y la rejilla pierde el ritmo.
       La rejilla ya estira las tarjetas a la altura de la fila; solo hay que
       empujar el botón al fondo. */
.wc-block-product-template li.wc-block-product {
  display: flex;
  flex-direction: column;
}
.wc-block-product-template li.wc-block-product > .wp-block-button {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--20);
}

/* 12. La regla 2 corta en 640 px, pero entre 641 y 781 px la colección cae a
       3 columnas y el patrón nunca se revisa a ese ancho. Se deja explícito
       para que el salto 2 → 4 sea intencionado y no un efecto colateral. */
@media (min-width: 641px) and (max-width: 781px) {
  .wc-block-product-template__responsive.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 13. Galería nativa de producto (woocommerce/product-gallery). El bloque no
       expone radio, y su ratio va como atributo literal porque lo trocea en
       variables ancho/alto y no parsearía un var(). Aquí los tokens mandan:
       radio-m en la imagen grande, radio-s en las miniaturas, y el ratio de
       tarjeta reforzado por si alguien lo cambia desde la interfaz. */
.wc-block-woocommerce-product-gallery-large-image__image {
  border-radius: var(--wp--custom--radio--m);
  aspect-ratio: var(--wp--custom--ratio-tarjeta);
  object-fit: cover;
}
/* El contenedor recorta con el mismo radio para que el zoom al pasar el ratón
   (hoverZoom) no asome por las esquinas. */
.wc-block-product-gallery-large-image__inner-blocks {
  border-radius: var(--wp--custom--radio--m);
  overflow: hidden;
}
.wc-block-product-gallery-thumbnails__thumbnail__image {
  border-radius: var(--wp--custom--radio--s);
}

/* 14. Miniaturas de la galería con imagen grande a 4:5. Woo ata la altura de
       la columna de miniaturas al ratio de la imagen grande con una lista
       cerrada de fórmulas (1, 4:3, 3:4, 3:2, 2:3, 16:9, 9:16) y no incluye
       4:5, así que con nuestro ratio la columna se desplegaba entera. Esta es
       la misma fórmula que usa Woo, calcada para 4:5. Depende de dos nombres
       internos suyos (la clase --aspect-ratio-4-5 y la variable
       --wc-block-product-gallery-thumbnails-size): si una actualización los
       cambia, el síntoma será que las miniaturas vuelvan a apilarse. */
.wc-block-product-gallery:not(.is-vertical):not(:has(.is-vertical)):has(.wc-block-components-product-image--aspect-ratio-4-5) :where(.wc-block-product-gallery-thumbnails) {
  aspect-ratio: 4 / calc(100 / var(--wc-block-product-gallery-thumbnails-size) * 5);
  flex-basis: calc(var(--wc-block-product-gallery-thumbnails-size) * 1%);
}

/* 15. Iconos de redes sobre superficies con color de enlace propio (el pie).
       El estilo "solo logos" del core pinta cada icono con el color de su
       marca (TikTok negro, Instagram rosa…), que sobre el fondo Contraste no
       se ve. Donde el editor haya fijado un color de enlace en el contenedor
       (clase has-link-color), iconos y etiquetas heredan el color del texto. */
.has-link-color .wp-block-social-links.is-style-logos-only .wp-social-link,
.has-link-color .wp-block-social-links.is-style-logos-only .wp-social-link a,
.has-link-color .wp-block-social-links.is-style-logos-only .wp-block-social-link-label {
  color: inherit;
}

/* 16. Menú desplegable en móvil (cabecera). El core lo pinta con los enlaces al
       tamaño del texto corrido, y tres enlaces de 16 px en una pantalla vacía
       leen como jerarquía plana. En el menú abierto, las categorías toman la
       tipografía de títulos del sistema. Solo aplica con el desplegable abierto. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--titulos);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 1.12;
}

/* 17. Formulario de contacto (Contact Form 7). Se estilan las clases que emite
       el plugin sin tocar su HTML. Campos como el de cantidad de producto;
       botón como los demás; avisos en salvia (éxito) y granate (error). */
.wpcf7 label {
  display: block;
  font-weight: 500;
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
}
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
  box-sizing: border-box; /* CF7 pinta width:100% sin border-box: el relleno desbordaba 10 px a 380 */
  width: 100%;
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--s);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
}
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus-visible {
  border-color: var(--wp--preset--color--accent-1);
}
.wpcf7 .wpcf7-submit {
  background-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  border: 0;
  border-radius: var(--wp--custom--radio--pastilla);
  padding: 0.7rem 1.4rem; /* mismos valores que elements.button en theme.json */
  cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus-visible {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.wpcf7 .wpcf7-not-valid-tip {
  color: var(--wp--preset--color--accent-1);
  font-size: var(--wp--preset--font-size--small);
  margin-top: var(--wp--preset--spacing--20);
}
.wpcf7 .wpcf7-response-output {
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--m);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--accent-2);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--wp--preset--color--accent-1);
}

/* 18. Filtros de producto (woocommerce/product-filters) en tienda, categorías y
       búsqueda. El bloque se maqueta en vertical y no lo permite editar; a partir
       de 601 px (el corte fijo de Woo) su contenido pasa a fila sobre la rejilla.
       Chips, deslizador y campos con los tokens; el tirador del deslizador trae dos
       hex fijos en hover/focus (#1e1e1e / #fff) que aquí se sustituyen. */
.misucu-filtros {
  padding-block: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--wp--preset--color--accent-3);
  --wc-product-filter-price-slider: var(--wp--preset--color--accent-1);
  --wc-product-filter-price-slider-handle: var(--wp--preset--color--base);
  --wc-product-filter-price-slider-handle-border: var(--wp--preset--color--accent-1);
}
@media (min-width: 601px) {
  .misucu-filtros .wc-block-product-filters__overlay-content {
    display: flex;
    flex-direction: row; /* Woo lo fija en columna; en columna el flex-basis del precio se aplicaba a la altura */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--50);
  }
  .misucu-filtros .wp-block-woocommerce-product-filter-taxonomy { flex: 1 1 0; }
  .misucu-filtros .wp-block-woocommerce-product-filter-price {
    flex: 0 1 calc(var(--wp--style--global--content-size) / 2);
  }
  .misucu-filtros .wp-block-woocommerce-product-filter-active { flex: 1 1 100%; }
}
/* Chips de categoría */
.misucu-filtros .wc-block-product-filter-chips__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}
.misucu-filtros .wc-block-product-filter-chips__item {
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--pastilla);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  cursor: pointer;
}
.misucu-filtros .wc-block-product-filter-chips__item:hover {
  border-color: var(--wp--preset--color--accent-1);
}
.misucu-filtros .wc-block-product-filter-chips__item[aria-checked="true"] {
  background-color: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base);
}
/* Chips de filtros activos */
.misucu-filtros .wc-block-product-filter-removable-chips__item {
  border: 0;
  border-radius: var(--wp--custom--radio--pastilla);
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
}
/* Deslizador: hover/focus sin los hex de Woo, y campos numéricos como el resto */
.misucu-filtros .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb:hover,
.misucu-filtros .wc-block-product-filter-price-slider__range input[type="range"]:focus::-webkit-slider-thumb {
  background: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--base);
}
.misucu-filtros .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb:hover,
.misucu-filtros .wc-block-product-filter-price-slider__range input[type="range"]:focus::-moz-range-thumb {
  background: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--base);
}
.misucu-filtros .wc-block-product-filter-price-slider .text input[type="text"] {
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--s);
  padding: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
}
/* Botón «Filtrar productos» del panel móvil: píldora outline */
.misucu-filtros .wc-block-product-filters__open-overlay {
  border: 1px solid var(--wp--preset--color--accent-1);
  border-radius: var(--wp--custom--radio--pastilla);
  background: transparent;
  color: var(--wp--preset--color--accent-1);
  font-family: var(--wp--preset--font-family--texto);
  font-weight: 700;
  padding: 0.7rem 1.4rem; /* mismos valores que elements.button en theme.json */
}
/* Selector de orden y recuento con el mismo aspecto que los campos */
.wc-block-catalog-sorting select,
.woocommerce-ordering select {
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--s);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
}
.wc-block-product-results-count,
.woocommerce-result-count {
  color: var(--wp--preset--color--accent-2);
  margin: 0;
}

/* 19. Buscador por nombre o referencia dentro de la barra de filtros (variación
       de core/search con post_type=product). Campo y botón con el sistema. */
.misucu-filtros .misucu-buscador .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: var(--wp--custom--radio--pastilla);
  background-color: var(--wp--preset--color--base);
  padding: 0 var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}
.misucu-filtros .misucu-buscador .wp-block-search__input {
  border: 0;
  background: transparent;
  font-family: var(--wp--preset--font-family--texto);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--20) 0;
}
.misucu-filtros .misucu-buscador .wp-block-search__input:focus-visible {
  outline-offset: 0;
}
.misucu-filtros .misucu-buscador .wp-block-search__button {
  border: 0;
  border-radius: var(--wp--custom--radio--pastilla);
  background-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--20);
  margin: 0;
}
.misucu-filtros .misucu-buscador .wp-block-search__button:hover,
.misucu-filtros .misucu-buscador .wp-block-search__button:focus-visible {
  background-color: var(--wp--preset--color--contrast);
}
@media (min-width: 601px) {
  .misucu-filtros .misucu-buscador {
    flex: 0 1 calc(var(--wp--style--global--content-size) / 2);
    align-self: flex-end;
  }
}

/* 20. Banner de consentimiento de analítica. Oculto hasta que el JS decide
       mostrarlo; fijo abajo con márgenes de la escala, a todo lo ancho en
       móvil y como tarjeta a la derecha con el ancho de contenido global a
       partir de 601 px. La sombra va por token en el propio bloque. */
.misucu-consentimiento {
  display: none;
  position: fixed;
  inset-block-end: var(--wp--preset--spacing--40);
  inset-inline: var(--wp--preset--spacing--40);
  z-index: 1000;
}
.misucu-consentimiento.is-visible {
  display: block;
}
@media (min-width: 601px) {
  .misucu-consentimiento {
    inset-inline-start: auto;
    max-width: var(--wp--style--global--content-size);
  }
}