/* ==========================================================================
   GENERADO por bin/partir-woocommerce-css.py a partir de woocommerce.css — NO EDITAR.
   Hoja «producte»: las secciones de woocommerce.css que usa esta página, en el mismo orden.
   Para cambiar un estilo, cambia woocommerce.css y vuelve a ejecutar el script.
   ========================================================================== */

/* ==========================================================================
   MI TEMA — WooCommerce
   Todos los estilos de WooCommerce. El CSS nativo de WC está desactivado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AVISOS (woocommerce-notices-wrapper)
   El JS de notices.js los convierte en toasts y oculta el wrapper original.
   Mantenemos estilos básicos para el caso en que el JS no cargue (fallback).
   -------------------------------------------------------------------------- */

/* Errores de validación del checkout inyectados por wc-checkout.js dentro de form.checkout
   (prepended como .woocommerce-NoticeGroup-checkout — NO está dentro de .woocommerce-notices-wrapper) */
.woocommerce-NoticeGroup-checkout {
  margin-bottom: var(--mt-space-5);
}

.woocommerce-NoticeGroup-checkout ul.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  padding: var(--mt-space-3) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid var(--mt-color-error);
  background-color: color-mix(in srgb, var(--mt-color-error) 8%, white);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  box-shadow: var(--mt-shadow-sm);
  list-style: none;
  margin: 0;
}

.woocommerce-NoticeGroup-checkout ul.woocommerce-error li,
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
  padding: var(--mt-space-1) 0;
}

.woocommerce-notices-wrapper[hidden] {
  display: none !important;
}

/* Fallback sin JS */
.woocommerce-notices-wrapper:not([hidden]) .woocommerce-message,
.woocommerce-notices-wrapper:not([hidden]) .woocommerce-info {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  padding: var(--mt-space-3) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid var(--mt-color-primary);
  background-color: var(--mt-color-bg-white);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  box-shadow: var(--mt-shadow-sm);
  margin-bottom: var(--mt-space-3);
  list-style: none;
}

.woocommerce-notices-wrapper:not([hidden]) .woocommerce-error {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  padding: var(--mt-space-3) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid var(--mt-color-error);
  background-color: var(--mt-color-bg-white);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  box-shadow: var(--mt-shadow-sm);
  margin-bottom: var(--mt-space-3);
  list-style: none;
}


/* --------------------------------------------------------------------------
   ERRORES DE VALIDACIÓN INLINE
   Renderizados por notices.js bajo cada campo
   -------------------------------------------------------------------------- */

.mt-field-error {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-error);
  font-weight: var(--mt-font-weight-medium);
  margin-top: var(--mt-space-1);
  line-height: 1.4;
}

/* Icono SVG de error pequeño (inyectado por CSS vía ::before) */
.mt-field-error::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  /* 0.2em y no 1px: la línea del mensaje mide 1,4em y el icono 12px, así que para
     centrarlo hacen falta (16,8 - 12) / 2 = 2,4px a 12px de letra. Con 1px fijo
     quedaba alto, y además no seguía el tamaño del texto si algún día cambia. */
  margin-top: 0.2em;
  /* currentColor y no --mt-color-error: el icono debe seguir el color del
     TEXTO del mensaje, no un rojo fijo. En el boletín del pie, footer.css
     pasa este texto a blanco para que se lea sobre el azul de la franja;
     con el rojo escrito aquí, el texto salía blanco y el icono rojo. Y
     el rojo sobre aquel azul tampoco llegaba a contraste. */
  background-color: currentColor;
  mask-image: var(--mt-icon-error);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--mt-icon-error);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.mt-field-error[hidden],
.mt-field-error:empty {
  display: none !important;
}

/* Campos inválidos — borde rojo + shadow sutil */
.form-row.mt-field--invalid input.input-text,
.form-row.mt-field--invalid select,
.form-row.mt-field--invalid textarea,
.mt-voucher-field.mt-field--invalid .mt-voucher-field__input,
.mt-voucher-field.mt-field--invalid .mt-voucher-field__textarea {
  border-color: var(--mt-color-error) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

/* Campos válidos (opcional: borde verde sutil) */
.form-row.mt-field--valid input.input-text,
.form-row.mt-field--valid select,
.form-row.mt-field--valid textarea {
  border-color: var(--mt-color-success);
}

/* Label roja en campo inválido */
.form-row.mt-field--invalid > label,
.mt-voucher-field.mt-field--invalid .mt-voucher-field__label {
  color: var(--mt-color-error);
}

/* --------------------------------------------------------------------------
   BOTONES WOOCOMMERCE
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.mt-btn,
button.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-2);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wider);
  /* Explícito y no heredado de "normal": sin esto, la altura real de un
     botón pill depende de métricas de línea implícitas de la fuente (que
     varían) en lugar de su propio padding/font-size — por eso
     "Afegeix a la cistella" y "Selecciona opcions" se renderizaban a
     alturas distintas pese a tener el mismo padding. `--mt-line-height-
     tight` (1.2) y no `1` exacto: sobre Bebas Neue, line-height:1 dejaba
     el texto demasiado pegado a la línea y se veía pequeño/comprimido en los botones
     grandes (p. ej. "Vés a caixa" en el carrito, font-size xl) — 1.2 mantiene
     la altura determinista pero con algo más de aire vertical. */
  line-height: var(--mt-line-height-tight);
  text-decoration: none;
  border: none;
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-3) var(--mt-space-8);
  cursor: pointer;
  transition: var(--mt-transition-colors);
  white-space: nowrap;
  background-color: var(--mt-color-bg-light);
  color: var(--mt-color-text-body);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--mt-color-border);
  color: var(--mt-color-text-body);
}

/* Botón primario — CTA */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.checkout-button,
.woocommerce .checkout-button,
a.mt-btn--primary,
button.mt-btn--primary {
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce .checkout-button:hover,
a.mt-btn--primary:hover,
button.mt-btn--primary:hover {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

/* Botón desactivado */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   PRECIOS
   -------------------------------------------------------------------------- */

.woocommerce-Price-amount {
  font-family: var(--mt-font-body);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
}

del .woocommerce-Price-amount {
  color: var(--mt-color-text-secondary);
  font-weight: var(--mt-font-weight-regular);
}

ins {
  text-decoration: none;
}

/* Precio de oferta en turquesa de marca, no en rojo: el rojo es el color
   de los errores del formulario y en la tienda hacía que el descuento pareciera un aviso.
   primary-dark porque es el turquesa para TEXTO sobre blanco (5,06:1, AA); en
   alto contraste el token pasa a #00232a y ya cumple AAA sin tocar nada. */
ins .woocommerce-Price-amount {
  color: var(--mt-color-primary-dark);
}

/* --------------------------------------------------------------------------
   INPUT CANTIDAD
   -------------------------------------------------------------------------- */

.quantity {
  display: inline-flex;
  align-items: center;
}

/* WooCommerce pinta <div class="quantity hidden"> con un input type="hidden" dentro
   cuando min === max: un vale, o cualquier producto sold_individually. La
   cantidad no se puede cambiar, y por eso no la quiere enseñar.

   Quien oculta ese div es la hoja de WooCommerce, que en este tema está
   desactivada (CLAUDE.md, "CSS WooCommerce desactivado"). Sin esta regla el
   contenedor se quedaba visible: reset.css solo cubre el atributo [hidden], y
   esto es una clase. El resultado era una caja vacía con los botones +/- que
   inyecta main.js y ningún número a la vista — y el + seguía subiendo el valor del
   campo oculto, así que el formulario enviaba cantidad 100 mientras el carrito
   solo añadía uno. */
.quantity.hidden {
  display: none;
}

.quantity .qty {
  width: 72px;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  text-align: center;
  transition: border-color 0.2s ease;
  -moz-appearance: textfield;
}

.quantity .qty:focus {
  outline: none;
  /* primary-dark: el borde es el indicador de foco, y con el turquesa de marca
     se quedaba en 2,49:1 (WCAG 1.4.11 pide 3:1). */
  border-color: var(--mt-color-primary-dark);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* --------------------------------------------------------------------------
   BOTONES +/- (inyectados vía JS en todos los .quantity)

   --mt-qty-h define la altura compartida entre el input y los botones para
   garantizar igualdad exacta independientemente de las quirks del navegador.
   Cálculo: padding-block (8px × 2) + font-size (16px) + borders (1px × 2) = 34px.
   -------------------------------------------------------------------------- */

.quantity {
  --mt-qty-h: calc(var(--mt-space-2) * 2 + var(--mt-font-size-base) + 2px);
}

/* Cuando los botones están presentes, eliminamos border-radius del input */
.quantity:has(.mt-qty-btn) .qty {
  height: var(--mt-qty-h);
  border-radius: 0;
  line-height: var(--mt-qty-h);
  padding-block: 0;
}

.mt-qty-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--mt-qty-h);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  color: var(--mt-color-text-heading);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

/* E7 — área táctil mínima 44×44 (caja visible 36×34): pseudo-elemento
   invisible. No expandimos hacia el lado que toca el input .qty (para no
   robarle clics), solo hacia el lado exterior y verticalmente. */
.mt-qty-btn::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
}

.mt-qty-btn--minus::after {
  left: -8px;
  right: 0;
}

.mt-qty-btn--plus::after {
  left: 0;
  right: -8px;
}

.mt-qty-btn:hover {
  background-color: var(--mt-color-bg-subtle);
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-primary-dark);
}

.mt-qty-btn--minus {
  border-radius: var(--mt-radius-md) 0 0 var(--mt-radius-md);
  border-right: none;
}

.mt-qty-btn--plus {
  border-radius: 0 var(--mt-radius-md) var(--mt-radius-md) 0;
  border-left: none;
}

/* Con dedo, 44 px de caja real (revisión de móvil del 14-10): la zona invisible del
   ::after ya llegaba a 44, pero el botón que se ve medía 36×34 y parecía pequeño. */
@media (pointer: coarse) {
  .quantity {
    --mt-qty-h: 44px;
  }

  .mt-qty-btn {
    width: 44px;
  }

  .mt-qty-btn::after {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   PAY YOUR PRICE — campo de precio personalizable (plugin WooCommerce PDF Vouchers)
   Da estilo a los elementos .form-row y a los botones de cantidad predefinida
   que el plugin inyecta vía woocommerce_before_add_to_cart_button.
   -------------------------------------------------------------------------- */

.vou_pay_your_price_labels_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
  margin-bottom: var(--mt-space-3);
}

.vou_pay_your_price_label {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
}

/* Input de precio: reutiliza el mismo estilo que .quantity .qty */
.form-row.woocommerce-form-field--text label.vou_set_pay_your_price {
  display: block;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  margin-bottom: var(--mt-space-1);
}

.form-row.woocommerce-form-field--text .woocommerce-input-wrapper {
  display: block;
}

.form-row.woocommerce-form-field--text input.input-text {
  width: 100%;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  transition: border-color 0.2s ease;
  margin-bottom: var(--mt-space-3);
}

.form-row.woocommerce-form-field--text input.input-text:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

/* Botones de cantidad predefinida (ej: 25€, 50€, 100€) */
button.vou_pay_your_amount_button {
  padding: var(--mt-space-1) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button.vou_pay_your_amount_button:hover,
button.vou_pay_your_amount_button.is-selected {
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

/* ==========================================================================
   PRODUCTO INDIVIDUAL — SINGLE PRODUCT
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.mt-product {
  padding-block: var(--mt-space-12) var(--mt-space-16);
}

.mt-product__article {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-8);
}

/* Grid 2 columnas: galería + resumen */
.mt-product__cols {
  /* Referencia del span.onsale, que WC saca como hermano de la galería y no
     dentro. Sin esto el absolute se posicionaba contra la página y el badge
     de oferta quedaba arriba del todo, tapado por la cabecera. La galería es la
     primera columna, así que top/left caen sobre la foto. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-8);
}

@media (min-width: 768px) {
  .mt-product__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--mt-space-12);
  }
}

@media (min-width: 1024px) {
  .mt-product__cols {
    grid-template-columns: 55fr 45fr;
    gap: var(--mt-space-16);
  }
}

/* --------------------------------------------------------------------------
   GALERÍA DE IMÁGENES (WC inyecta .woocommerce-product-gallery)
   -------------------------------------------------------------------------- */

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery__image img {
  width: 100%;
  /* H2 — Lighthouse avisaba de imágenes lazy sin width/height (CLS).
     El <img> lo genera WC sin atributos fijos; en lugar de tocar la
     plantilla PHP, reservamos el espacio desde el contenedor con aspect-ratio
     (mismo criterio 1:1 que ya se usa en las miniaturas y en la tarjeta de
     producto — las fotos de catálogo son cuadradas). */
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: var(--mt-radius-lg);
  object-fit: cover;
  display: block;
}

/* Carril de diapositivas (14-10-2026: sustituye a FlexSlider).
   Scroll horizontal con scroll-snap: una imagen por pantalla, se desliza con el dedo, la rueda o
   las flechas del teclado (el carril es enfocable) sin ningún JS, y la primera imagen se pinta con
   el HTML. Ver woocommerce/single-product/product-image.php e inc/product-gallery.php. */
.mt-gallery__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--mt-radius-lg);
}

.mt-gallery__track::-webkit-scrollbar {
  display: none;
}

.mt-gallery__track > * {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.mt-gallery__track:focus-visible {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .mt-gallery__track {
    scroll-behavior: smooth;
  }
}

/* Miniaturas: botones pintados en el servidor.
   En móvil, UNA sola fila que se desliza (antes 4 + 2 en dos filas, ~180 px, y el título y el
   precio quedaban fuera de la primera pantalla), con miniaturas de 64 px: área táctil de sobra
   por encima de 44×44. Desde 768 px, la rejilla de 4 por fila de siempre. */
.mt-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mt-space-2);
  margin-top: var(--mt-space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.mt-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.mt-gallery__thumb {
  flex: 0 0 64px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--mt-radius-md);
  cursor: pointer;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .mt-gallery__thumbs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .mt-gallery__thumb {
    flex: 0 0 calc(25% - var(--mt-space-2));
  }
}

.mt-gallery__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--mt-radius-md);
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.mt-gallery__thumb:hover img,
.mt-gallery__thumb[aria-current="true"] img {
  border-color: var(--mt-color-primary);
}

/* Por dentro: en móvil la fila tiene overflow y un contorno por fuera quedaría recortado. */
.mt-gallery__thumb:focus-visible {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: -4px;
}

/* Badge en venta — la misma pill de marca que en la tarjeta de la tienda */
span.onsale {
  position: absolute;
  top: var(--mt-space-4);
  left: var(--mt-space-4);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wider);
  text-transform: uppercase;
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  padding: var(--mt-space-1) var(--mt-space-4);
  border-radius: var(--mt-radius-pill);
  z-index: 1;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   RESUMEN DEL PRODUCTO
   -------------------------------------------------------------------------- */

.mt-product__summary {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-4);
}

@media (min-width: 768px) {
  .mt-product__summary {
    position: sticky;
    top: calc(72px + var(--mt-space-6)); /* header height + margen */
    align-self: start;
  }
}

/* Título */
.mt-product__summary .product_title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-4xl);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-heading);
  letter-spacing: var(--mt-letter-spacing-wide);
  line-height: var(--mt-line-height-tight);
  margin: 0;
}

@media (min-width: 768px) {
  .mt-product__summary .product_title {
    font-size: var(--mt-font-size-5xl);
  }
}

/* Valoración */
.mt-product__summary .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
}

.mt-product__summary .woocommerce-product-rating a {
  color: var(--mt-color-primary-dark);
  text-decoration: none;
}

/* Precio */
.mt-product__summary .price {
  font-size: var(--mt-font-size-xl);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-primary-dark);
}

/* El .woocommerce-Price-amount tiene color propio — sobrescribir para el precio principal */
.mt-product__summary .price .woocommerce-Price-amount {
  color: var(--mt-color-primary-dark);
}

/* ...excepto el precio original de una oferta: la regla de arriba lo pintaba del
   mismo turquesa que el rebajado y los dos se confundían. */
.mt-product__summary .price del .woocommerce-Price-amount {
  color: var(--mt-color-text-secondary);
}

/* Las cards de voucher heredan .price — restaurar tamaño y color originales */
.mt-voucher-amount-card__price .price,
.mt-voucher-amount-card__price .woocommerce-Price-amount {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
}

.mt-product__summary .price del {
  font-size: var(--mt-font-size-xl);
  color: var(--mt-color-text-secondary);
  font-weight: var(--mt-font-weight-regular);
  margin-right: var(--mt-space-2);
}

.mt-product__summary .price ins {
  text-decoration: none;
  color: var(--mt-color-primary-dark);
}

/* Excerpt */
.mt-product__summary .woocommerce-product-details__short-description {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  line-height: var(--mt-line-height-relaxed);
  border-top: var(--mt-border);
  padding-top: var(--mt-space-4);
}

/* --------------------------------------------------------------------------
   ADD TO CART — simple
   -------------------------------------------------------------------------- */

.mt-product__summary .cart {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  flex-wrap: wrap;
  border-top: var(--mt-border);
  padding-top: var(--mt-space-4);
}

.mt-product__summary button.single_add_to_cart_button {
  flex: 1 1 auto;
  font-size: var(--mt-font-size-lg);
  padding-block: var(--mt-space-4);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-product__summary button.single_add_to_cart_button:hover {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

.mt-product__summary button.single_add_to_cart_button.loading {
  opacity: 0.75;
  cursor: wait;
}

/* Variable no-voucher: swatches y single_variation_wrap ocupan ancho completo */
.mt-product__summary .mt-variation-swatches,
.mt-product__summary .single_variation_wrap {
  flex: 0 0 100%;
}

/* Variable no-voucher: contenedor qty + botón dentro de single_variation_wrap */
.mt-product__summary .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  padding-top: var(--mt-space-4);
  margin-top: var(--mt-space-2);
}

/* --------------------------------------------------------------------------
   E6 — "Afegeix a la cistella" se cortaba en móvil (399px de contenedor,
   botón de 243px que llegaba a salirse 33px porque el texto no partía).
   Dejamos que haga línea propia y reducimos tamaño para que quepa a partir
   de 320px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mt-product__summary .woocommerce-variation-add-to-cart {
    flex-wrap: wrap;
  }

  .mt-product__summary button.single_add_to_cart_button {
    flex: 1 1 100%;
    padding-inline: var(--mt-space-5);
    font-size: var(--mt-font-size-base);
    white-space: normal;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   BARRA DE COMPRA FIJA — solo móvil (inc/product-buybar.php, product-buybar.js)

   Aparece abajo cuando la caja de compra no está en pantalla. Entra desde abajo con una
   salida exponencial; el reset ya quita la transición a quien pide menos movimiento. La
   visibilidad cambia al final de la salida para no cortar la animación, y mientras está
   fuera no se puede tocar.
   -------------------------------------------------------------------------- */

.mt-buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--mt-z-sticky);
  padding: var(--mt-space-3) var(--mt-container-gutter) max(var(--mt-space-3), env(safe-area-inset-bottom));
  background-color: var(--mt-color-white);
  border-top: 1px solid var(--mt-color-border);
  box-shadow: 0 -6px 20px rgba(6, 63, 71, 0.10);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}

.mt-buybar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.mt-buybar__inner {
  display: flex;
  align-items: center;
  gap: var(--mt-space-4);
}

.mt-buybar__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mt-buybar__name {
  overflow: hidden;
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mt-buybar__price {
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-bold);
  color: var(--mt-color-text-heading);
  font-variant-numeric: tabular-nums;
  line-height: var(--mt-line-height-tight);
}

.mt-buybar__price del {
  margin-right: var(--mt-space-1);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
}

.mt-buybar__price ins {
  text-decoration: none;
  color: var(--mt-color-primary-dark);
}

/* Los «IVA inclòs» y «/ persona» que añade el tema al precio: aquí sobran, ya los dice la
   ficha y la barra tiene que caber en 320 px. */
.mt-buybar__price small,
.mt-buybar__price .mt-price-suffix,
.mt-buybar__price .woocommerce-price-suffix {
  display: none;
}

.mt-buybar__cta {
  flex: none;
  min-height: 48px;
  padding: 0 var(--mt-space-6);
  background-color: var(--mt-color-primary-dark);
  border: none;
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-white);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-base);
  letter-spacing: var(--mt-letter-spacing-wider);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mt-buybar__cta:hover {
  background-color: var(--mt-color-primary-darker);
}

@media (min-width: 768px) {
  .mt-buybar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   VARIACIONES (producto variable)
   -------------------------------------------------------------------------- */

.variations_form .variations {
  width: 100%;
  border-collapse: collapse;
}

.variations_form .variations td,
.variations_form .variations th {
  padding: var(--mt-space-2) 0;
  vertical-align: middle;
}

.variations_form .variations .label label {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  white-space: nowrap;
  padding-right: var(--mt-space-4);
}

.variations_form .variations .value select {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  padding: var(--mt-space-2) var(--mt-space-8) var(--mt-space-2) var(--mt-space-3);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mt-space-3) center;
  width: 100%;
  max-width: 260px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.variations_form .variations .value select:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

.reset_variations {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-primary-dark);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--mt-space-1);
  display: inline-block;
}

/* Precio de la variación */
.woocommerce-variation-price {
  margin-bottom: var(--mt-space-2);
}

.woocommerce-variation-price .price {
  font-size: var(--mt-font-size-xl);
}

/* --------------------------------------------------------------------------
   META (SKU, categorías, etiquetas)
   -------------------------------------------------------------------------- */

.product_meta {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  border-top: var(--mt-border);
  padding-top: var(--mt-space-4);
}

.product_meta span {
  display: block;
}

.product_meta span > span,
.product_meta span a {
  color: var(--mt-color-text-body);
  font-weight: var(--mt-font-weight-medium);
}

.product_meta span a:hover {
  color: var(--mt-color-primary-dark);
}

/* --------------------------------------------------------------------------
   TABS (descripción, valoraciones, atributos)
   -------------------------------------------------------------------------- */

.woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--mt-space-8);
  padding-top: var(--mt-space-8);
}

/* Móvil: las pestañas pasan a la línea siguiente y el texto puede partirse.
   Antes iban en una sola fila sin partir, y la tercera («Talles, composició, cures
   i lliurament») se salía de la pantalla ya a 390 px; con el overflow-x: clip de
   html y body no se podía ni desplazar, así que la información de tallas y envío
   no se encontraba (WCAG 1.4.10, auditoría de accesibilidad del 14-10, 🟠-6).
   Cada pestaña lleva su propia raya gris debajo y crece hasta llenar la fila: se
   sigue leyendo como una tira de pestañas subrayadas, en una o dos filas. */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--mt-space-6);
}

.woocommerce-tabs ul.tabs li {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  flex: 1 1 auto;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-secondary);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  padding: var(--mt-space-3) var(--mt-space-4);
  border-bottom: 2px solid var(--mt-color-border);
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Escritorio: una sola fila sobre una raya gris continua, como siempre. */
@media (min-width: 768px) {
  .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    border-bottom: 2px solid var(--mt-color-border);
  }

  .woocommerce-tabs ul.tabs li {
    display: block;
    flex: 0 0 auto;
    margin-bottom: -2px;
  }

  .woocommerce-tabs ul.tabs li a {
    text-align: left;
    padding-inline: var(--mt-space-5);
    border-bottom-color: transparent;
    white-space: nowrap;
  }
}

.woocommerce-tabs ul.tabs li a:hover {
  color: var(--mt-color-text-heading);
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--mt-color-primary-dark);
  border-bottom-color: var(--mt-color-primary-dark);
}

.woocommerce-tabs .panel {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  line-height: var(--mt-line-height-relaxed);
}

/* Neutralizar el max-width: 75ch del reset global en contenido editorial */
.woocommerce-tabs .panel p,
.woocommerce-tabs .panel li,
.woocommerce-tabs .panel figcaption {
  max-width: none;
}

.woocommerce-tabs .panel ul {
  list-style: disc;
  padding-left: var(--mt-space-6);
}

.woocommerce-tabs .panel ol {
  list-style: decimal;
  padding-left: var(--mt-space-6);
}

.woocommerce-tabs .panel li {
  margin-bottom: var(--mt-space-1);
}

.woocommerce-tabs .panel h2 {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-text-heading);
  margin-bottom: var(--mt-space-4);
}

/* Tablas escritas en el contenido de una pestaña (la guía de tallas de la camiseta, en la
   pestaña extra del producto). Sin esto salían sin ningún estilo, con las columnas pegadas.
   La cabecera copia la del carrito (.mt-cart__head-label): mayúsculas pequeñas, espaciadas y
   en gris secundario, con la línea de 2 px debajo. Las cifras, alineadas a la derecha y con
   números tabulares para que las comas caigan una debajo de otra.
   La tabla de atributos de WooCommerce («Informació addicional») queda fuera: es una tabla de
   etiqueta/valor, y con la segunda columna a la derecha quedaría rara. */
.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) {
  width: 100%;
  max-width: 26rem;
  border-collapse: collapse;
  margin: var(--mt-space-3) 0 var(--mt-space-6);
  font-variant-numeric: tabular-nums;
}

.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) th,
.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) td {
  padding: var(--mt-space-2) var(--mt-space-3);
  border-bottom: 1px solid var(--mt-color-border);
  text-align: left;
}

.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) thead th {
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mt-letter-spacing-wider);
  color: var(--mt-color-text-secondary);
  border-bottom-width: 2px;
}

.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) th:not(:first-child),
.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) td:not(:first-child) {
  text-align: right;
}

.woocommerce-tabs .panel table:not(.woocommerce-product-attributes) tbody td:first-child {
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
}

/* --------------------------------------------------------------------------
   UPSELLS + PRODUCTOS RELACIONADOS
   -------------------------------------------------------------------------- */

.upsells,
.related {
  grid-column: 1 / -1;
  margin-top: var(--mt-space-12);
  padding-top: var(--mt-space-8);
  border-top: var(--mt-border);
}

/* Combinador de hijo directo (>), no descendiente: ".related h2" (sin >)
   también enganchaba el <h2 class="mt-product-card__name"> de cada tarjeta de
   producto, anidado más abajo dentro de la misma sección — el nombre del producto
   se renderizaba a 40px en lugar de los 14px propios de .mt-product-card__name,
   inflando la altura de la tarjeta a ~568px (QA 2026-07-17, visto en móvil en
   "Productes relacionats"). */
.upsells > h2,
.related > h2 {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-3xl);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-heading);
  letter-spacing: var(--mt-letter-spacing-wide);
  margin-bottom: var(--mt-space-6);
}

.upsells ul.products,
.related ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mt-space-4);
}

@media (min-width: 768px) {
  .upsells ul.products,
  .related ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mt-space-6);
  }
}

/* ==========================================================================
   TIENDA — ARCHIVE PRODUCT
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT GENERAL
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   BOTÓN VOLVER A LA TIENDA
   -------------------------------------------------------------------------- */

.mt-back-to-shop {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-2);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--mt-space-6);
  transition: color 0.2s ease;
}

.mt-back-to-shop:hover {
  color: var(--mt-color-primary-dark);
}

/* --------------------------------------------------------------------------
   BREADCRUMB PRODUCTO INDIVIDUAL
   -------------------------------------------------------------------------- */

.mt-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  margin-bottom: var(--mt-space-6);
}

.mt-breadcrumb__item {
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.mt-breadcrumb__item:hover {
  color: var(--mt-color-primary-dark);
}

.mt-breadcrumb__item--current {
  color: var(--mt-color-text-primary);
  font-weight: var(--mt-font-weight-medium);
}

.mt-breadcrumb__sep {
  color: var(--mt-color-border);
  user-select: none;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   LIGHTBOX GALERÍA DE PRODUCTO
   -------------------------------------------------------------------------- */

/* Icono zoom de WC: oculto */
.woocommerce-product-gallery__trigger {
  display: none !important;
}

/* Cursor zoom-in en las imágenes de la galería */
.woocommerce-product-gallery__image a {
  cursor: zoom-in;
}

.mt-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--mt-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mt-lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mt-space-4);
  width: min(90vw, 900px);
  max-height: 90vh;
}

.mt-lightbox__close {
  position: absolute;
  top: -56px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* Área táctil mínima de 44×44 (antes 40). */
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-white);
  cursor: pointer;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.mt-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.mt-lightbox__img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mt-lightbox__img {
  max-width: 100%;
  max-height: calc(90vh - 140px);
  object-fit: contain;
  border-radius: var(--mt-radius-lg);
  display: block;
}

.mt-lightbox__prev,
.mt-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-white);
  cursor: pointer;
  transition: background-color 0.15s ease;
  z-index: 1;
}

.mt-lightbox__prev { left: -64px; }
.mt-lightbox__next { right: -64px; }

.mt-lightbox__prev:hover,
.mt-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.mt-lightbox__thumbs {
  display: flex;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.mt-lightbox__thumb {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--mt-radius-md);
  overflow: hidden;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: border-color 0.15s ease;
  flex-shrink: 0;
}

.mt-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mt-lightbox__thumb.is-active,
.mt-lightbox__thumb:hover {
  border-color: var(--mt-color-primary);
}

@media (max-width: 767px) {
  .mt-lightbox__prev { left: -8px; }
  .mt-lightbox__next { right: -8px; }

  .mt-lightbox__panel {
    width: 95vw;
  }
}

/* --------------------------------------------------------------------------
   TIENDA — LAYOUT
   -------------------------------------------------------------------------- */

.mt-shop {
  padding-block: var(--mt-space-12) var(--mt-space-16);
}

/* Cabecera de la tienda (oculta cuando el título está desactivado) */
.mt-shop__header:empty {
  display: none;
}

.mt-shop__header {
  margin-bottom: var(--mt-space-8);
}

.mt-shop__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-4xl);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-heading);
  letter-spacing: var(--mt-letter-spacing-wide);
  line-height: var(--mt-line-height-tight);
  margin-bottom: var(--mt-space-2);
  /* A la izquierda, como la parrilla que hay debajo.
     ------------------------------------------------------------------------
     Antes iba centrado, y el resultado era una cabecera con TRES
     alineaciones distintas apiladas: título centrado, migas de pan centradas y
     descripción a la izquierda. Además, un título centrado encima de una parrilla
     alineada a la izquierda no encaja con nada. */
  text-align: left;
}

/* Breadcrumb dentro de la cabecera de categoría/archivo. Va encima del título
   (ver el comentario de woocommerce/archive-product.php) y con el mismo
   eje que el resto. */
.mt-shop__header .mt-breadcrumb {
  justify-content: flex-start;
  margin-bottom: var(--mt-space-3);
}

/* Descripción de la categoría/archivo */
.woocommerce-products-header__title,
.term-description p {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   GRID DE PRODUCTOS
   -------------------------------------------------------------------------- */

#mt-shop ul.products,
.mt-search ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mt-space-4);
}

@media (min-width: 768px) {
  #mt-shop ul.products,
  .mt-search ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt-space-6);
  }
}

@media (min-width: 1024px) {
  #mt-shop ul.products,
  .mt-search ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   -------------------------------------------------------------------------- */

.mt-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-xl);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mt-product-card:hover {
  box-shadow: var(--mt-shadow-md);
  transform: translateY(-2px);
}

/* Imagen */
.mt-product-card__image-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--mt-color-bg-light);
}

.mt-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Overlay hover */
.mt-product-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mt-product-card__overlay-text {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  letter-spacing: var(--mt-letter-spacing-wider);
  color: var(--mt-color-white);
  background-color: var(--mt-color-primary-dark);
  padding: var(--mt-space-2) var(--mt-space-6);
  border-radius: var(--mt-radius-pill);
  transform: translateY(6px);
  transition: transform 0.25s ease;
}

/* Solo en dispositivos con hover real (ratón): en táctil, :hover se queda
   "enganchado" visible tras un toque porque no hay ningún "hover out". */
@media (hover: hover) {
  .mt-product-card:hover .mt-product-card__image {
    transform: scale(1.04);
  }

  .mt-product-card:hover .mt-product-card__overlay {
    opacity: 1;
  }

  .mt-product-card:hover .mt-product-card__overlay-text {
    transform: translateY(0);
  }
}

/* Badges */
.mt-product-card__badges {
  position: absolute;
  top: var(--mt-space-3);
  left: var(--mt-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  z-index: 1;
}

.mt-product-card__badge {
  display: inline-block;
  font-family: var(--mt-font-body);
  font-size: 0.65rem;
  font-weight: var(--mt-font-weight-bold);
  letter-spacing: var(--mt-letter-spacing-wider);
  text-transform: uppercase;
  padding: 2px var(--mt-space-2);
  border-radius: var(--mt-radius-sm);
  line-height: 1.5;
}

/* Oferta: pill de marca, igual que el «Veure producte» del hover. Antes era
   un rectángulo rojo de error, que en la tienda parecía un aviso y no una
   rebaja. primary-dark y no primary: el blanco sobre #14B5C5 no llega al
   contraste mínimo, sobre #0A7A87 sí. Bebas a 0,65rem no se lee, por eso
   sube de tamaño y quita el peso (Bebas solo tiene el 400). */
.mt-product-card__badge--sale {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  line-height: 1.2;
  padding: var(--mt-space-1) var(--mt-space-3);
  border-radius: var(--mt-radius-pill);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-product-card__badge--featured {
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-product-card__badge--outofstock {
  background-color: var(--mt-color-text-secondary);
  color: var(--mt-color-white);
}

/* Cuerpo de la card */
.mt-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mt-space-4);
  gap: var(--mt-space-2);
}

/* Categoría */
.mt-product-card__cats {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-primary-dark);
  font-weight: var(--mt-font-weight-semibold);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
}

.mt-product-card__cats a {
  color: inherit;
  text-decoration: none;
}

.mt-product-card__cats a:hover {
  text-decoration: underline;
}

/* Nombre del producto */
.mt-product-card__name {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  line-height: var(--mt-line-height-snug);
  margin: 0;
}

.mt-product-card__name a {
  color: var(--mt-color-text-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mt-product-card__name a:hover {
  color: var(--mt-color-primary-dark);
}

/* Valoración */
.mt-product-card__rating {
  display: flex;
  align-items: center;
}

.mt-product-card__rating .star-rating {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-warning);
}

/* Precio */
/* "IVA inclos" junto al precio. Discreto a propósito: acompaña al precio,
   no compite con él. */
.mt-price-suffix {
  display: inline-block;
  margin-left: var(--mt-space-1);
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-xs);
  font-weight: 400;
  white-space: nowrap;
}

.mt-product-card__price {
  margin-top: auto;
  font-size: var(--mt-font-size-base);
}

/* Precio por persona (mt_per_person_pricing): «40,00 € / persona». */
.mt-price-per-person__unit {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--mt-color-text-secondary);
}

.mt-product-card__price del {
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-sm);
  margin-right: var(--mt-space-1);
}

.mt-product-card__price ins {
  text-decoration: none;
  color: var(--mt-color-primary-dark);
}

/* Acciones — botón add-to-cart */
.mt-product-card__actions {
  padding-top: var(--mt-space-2);
}

.mt-product-card__actions a.button {
  display: flex;
  width: 100%;
  justify-content: center;
  /* Móvil: texto como "SELECCIONA OPCIONS" no cabe con el padding/font-size de
     desktop (32px/16px heredados de .woocommerce a.button) en el ancho real
     de la columna de la parrilla a 2 columnas — desborda el pill. Reducido
     proporcionalmente y restaurado a los valores de desktop a partir de 768px. */
  font-size: var(--mt-font-size-sm);
  /* El texto no cabía: a 320 px el white-space: nowrap de .button recortaba
     «Selecciona opcions» por los dos lados («ELECCIONA OPCION», WCAG 1.4.10), y a
     390 px «Seleccionar opciones» se salía del relleno y tocaba los bordes de la
     píldora. Con menos relleno (el botón ocupa todo el ancho y el texto va centrado,
     así que el relleno solo cuenta cuando no cabe) y algo menos de espaciado, el
     catalán sigue en una línea a 390 px; lo que aun así no cabe se parte en dos
     líneas centradas en lugar de cortarse. En escritorio, como antes. */
  padding-inline: var(--mt-space-2);
  letter-spacing: var(--mt-letter-spacing-wide);
  padding-block: var(--mt-space-3);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  border-radius: var(--mt-radius-pill);
  transition: background-color 0.2s ease;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  align-items: center;
}

@media (min-width: 768px) {
  .mt-product-card__actions a.button {
    font-size: var(--mt-font-size-base);
    padding-inline: var(--mt-space-8);
    letter-spacing: var(--mt-letter-spacing-wider);
    white-space: nowrap;
  }
}

.mt-product-card__actions a.button:hover {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

.mt-product-card__actions a.button.added {
  background-color: var(--mt-color-success);
}

.mt-product-card__actions .button.loading {
  opacity: 0.75;
  cursor: wait;
}

/* --------------------------------------------------------------------------
   ESTADO VACÍO
   -------------------------------------------------------------------------- */

.mt-shop__empty {
  text-align: center;
  padding-block: var(--mt-space-16);
}

.mt-shop__empty .woocommerce-info {
  display: inline-flex;
  text-align: left;
}

/* --------------------------------------------------------------------------
   PAGINACIÓN
   -------------------------------------------------------------------------- */

.mt-shop__pagination {
  margin-top: var(--mt-space-12);
}

.woocommerce-pagination {
  display: flex;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  gap: var(--mt-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-body);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  text-decoration: none;
  transition: var(--mt-transition-colors);
}

.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
  background-color: var(--mt-color-primary-light);
  border-color: var(--mt-color-primary);
  color: var(--mt-color-primary-dark);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
}

/* --------------------------------------------------------------------------
   STAR RATING global
   -------------------------------------------------------------------------- */

.star-rating {
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: var(--mt-font-size-sm);
  width: 5.4em;
  font-family: 'star';
}

.star-rating::before {
  content: '\53\53\53\53\53';
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}

.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}

.star-rating span::before {
  content: '\53\53\53\53\53';
  top: 0;
  position: absolute;
  left: 0;
  color: var(--mt-color-warning);
}

/* ==========================================================================
   PDF VOUCHERS
   Estilos para WooCommerce PDF Vouchers
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIATION SWATCHES — productos variables no-voucher
   -------------------------------------------------------------------------- */

.mt-variation-swatches {
  margin-block: var(--mt-space-4);
}

/* .mt-variation-swatches__group {
  margin-bottom: var(--mt-space-5);
} */

/* La etiqueta del grupo, compartida con la de los importes de un vale: una decía
   "Talla" en redonda y la otra "ESCULL IMPORT" en versalitas espaciadas, y
   pasando de una ficha a otra parecían dos tiendas. */
.mt-variation-swatches__label,
.mt-voucher-amounts__label {
  display: block;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--mt-letter-spacing-wider);
  margin-bottom: var(--mt-space-3);
}

/* El valor elegido, en cambio, debe destacar por encima de la etiqueta. */
.mt-variation-swatches__label-value {
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-primary);
  margin-left: var(--mt-space-1);
}

.mt-variation-swatches__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
}

/* --------------------------------------------------------------------------
   SELECTORES DE OPCIÓN — base compartida

   En la tienda hay dos selectores que hacen el mismo trabajo: los swatches de un
   producto variable (la talla de una camiseta) y las cards de importe de un vale
   (para cuántas personas). Tenían radios distintos, sombra uno y otro no, e
   incluso dos estados de seleccionado diferentes. Se notaba al pasar de una
   ficha a otra.

   Aquí está todo lo que debe ser igual: el color, el borde, el radio y los
   cuatro estados. Cada componente solo añade su propia caja y su propia
   tipografía, que es donde sí se diferencian de verdad: la card tiene
   dos líneas —valor y precio— y el swatch, una palabra.
   -------------------------------------------------------------------------- */

.mt-swatch,
.mt-voucher-amount-card {
  color: var(--mt-color-text-body);
  background-color: var(--mt-color-bg-white);
  border: 2px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Un solo tono para toda la interacción, y es primary-dark.

El hover iba con --mt-color-primary (#14B5C5) en el borde. Eso ponía dos
azules diferentes a la vez dentro del mismo grupo —el claro del borde del hover y
el oscuro del relleno del seleccionado— y no se parecían: el hover se veía
lavado al lado de la casilla elegida.

Y no llegaba: 2,49:1 contra el blanco, cuando el criterio 1.4.11 pide 3:1 en
el borde de un componente. Es el mismo azul, y el mismo número, que hubo
que quitar del formulario del vale.

variables.css tiene escrito qué tono toca a cada cosa: primary-dark para texto y
grafismos sobre blanco (5,06:1), y primary-light «para superficies pequeñas y
estados de pasar por encima, donde lo que importa es no llamar la atención». O sea que el
relleno del hover ya era el correcto; lo que no lo era es el borde.

Con esto los tres estados son el mismo tono con más o menos peso: borde gris en
reposo, borde primary-dark con relleno claro al pasar por encima, y lleno de
primary-dark al elegir. El azul claro de marca desaparece de aquí, que no es su
sitio. */
.mt-swatch:hover,
.mt-voucher-amount-card:hover {
  border-color: var(--mt-color-primary-dark);
  background-color: var(--mt-color-primary-light);
  color: var(--mt-color-primary-dark);
}

/* El foco debe verse en los dos. Solo lo tenían las cards; el swatch se
   quedaba con lo que le pone el navegador, que sobre un borde de 2 px a menudo no
   se distingue. */
/* Mismo tono, y por el mismo motivo: un indicador de foco también debe cumplir el
   3:1 del criterio 1.4.11, y con primary se quedaba en 2,49:1 contra el blanco de
   la página donde se dibuja el outline. */
.mt-swatch:focus-visible,
.mt-voucher-amount-card:focus-visible {
  outline: 3px solid var(--mt-color-primary-dark);
  outline-offset: 2px;
}

/* Seleccionado: lleno, no un tint.

Antes el estado seleccionado y el :hover de justo aquí encima compartían el
mismo fondo y el mismo borde, así que la opción escogida no se distinguía de
la que solo tenías el ratón encima: en la talla de una camiseta, una vez
elegida, no se sabía cuál era.

Y en alto contraste desaparecía del todo. Allí --mt-color-primary-light vale
#FFFFFF, el mismo blanco que el fondo de reposo, y --mt-color-border vale
#000000 contra un --mt-color-primary de #003d45: dos negros casi iguales.
La única diferencia que quedaba era el grosor de la letra.

El lleno es el patrón que ya usa .vou_pay_your_amount_button.is-selected
en esta misma hoja, y va bien en los dos modos porque no depende de ningún tint:
primary-dark con texto blanco encima son 5,06:1 en normal y casi negro en
alto contraste. */
.mt-swatch.is-selected,
.mt-voucher-amount-card.is-selected {
  border-color: var(--mt-color-primary-dark);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-swatch.is-disabled,
.mt-voucher-amount-card.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}

/* Caja y tipografía propias del swatch */
.mt-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: var(--mt-space-2) var(--mt-space-4);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  white-space: nowrap;
}

.mt-swatch.is-selected {
  font-weight: var(--mt-font-weight-semibold);
}

.mt-variation-reset {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-1);
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: var(--mt-space-2);
  transition: color 0.2s ease;
}

.mt-variation-reset:hover {
  color: var(--mt-color-text-primary);
}

/* --------------------------------------------------------------------------
   VOUCHER PRODUCT — Selector de valor como cards
   -------------------------------------------------------------------------- */

.mt-voucher-amounts {
  margin-block: var(--mt-space-6);
}

/* La etiqueta de este grupo la comparte con la de los swatches, más arriba. */

.mt-voucher-amounts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mt-space-3);
}

@media (min-width: 480px) {
  .mt-voucher-amounts__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .mt-voucher-amounts__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card individual — el color, el borde, el radio y los cuatro estados vienen de la
   base compartida con los swatches, más arriba ("SELECTORS D'OPCIO"). Aquí
   solo la caja y la tipografía, que es donde la card sí es diferente: caben
   dos líneas. */
.mt-voucher-amount-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--mt-space-2) var(--mt-space-2);
  text-align: center;
  font-family: inherit;
  line-height: 1.2;
}

/* Valor principal (ej: "1 Persona") */
.mt-voucher-amount-card__value {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-text-heading);
  line-height: 1.1;
  transition: color 0.2s ease;
}

.mt-voucher-amount-card:hover .mt-voucher-amount-card__value {
  color: var(--mt-color-primary-dark);
}

/* Sobre el lleno, todo el contenido de la card pasa a blanco. Nada de opacidad para
   bajar el precio de tono: con un fondo lleno el contraste dependería de lo que haya
   debajo, y lo que separa el valor del precio ya es el tamaño. primary-dark con
   blanco encima son 5,06:1 en normal, y en alto contraste es casi negro.

   El descendiente universal no es por pereza. Pintar de blanco solo
   .mt-voucher-amount-card__price no bastaba: el color heredado pierde
   contra CUALQUIER declaración directa de un descendiente, por mucha especificidad
   que tenga el padre. Y dentro del precio hay dos, las dos con
   --mt-color-text-secondary: .mt-price-suffix, que es el "IVA inclos", y
   .mt-voucher-amount-card__price .price. El título se veía blanco y el precio se
   quedaba oscuro e ilegible sobre el fondo.

   Con el descendiente universal también entra lo que aún no está: el
   price_html de WooCommerce lo montan filtros y conectores, y cualquier
   <bdi>, <del>, <ins> o span de moneda que aparezcan mañana ya quedan
   cubiertos. */
.mt-voucher-amount-card.is-selected .mt-voucher-amount-card__value,
.mt-voucher-amount-card.is-selected .mt-voucher-amount-card__price,
.mt-voucher-amount-card.is-selected .mt-voucher-amount-card__price * {
  color: var(--mt-color-white);
}

/* Precio formateado de WooCommerce (secundario) */
.mt-voucher-amount-card__price {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  line-height: 1;
}

.mt-voucher-amount-card__price .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: var(--mt-font-weight-regular);
  color: inherit;
}

/* Oculta el precio de variación de WC (ya sale en las cards) */
.mt-voucher-form .woocommerce-variation-price {
  display: none;
}

/* --------------------------------------------------------------------------
   VOUCHER FORM — Layout cantidad + botón en una sola fila
   Los campos del destinatario (.woo-vou-fields-main-wrapper) van arriba (order:-1)
   y ocupan el ancho completo. Cantidad y botón quedan en la misma fila.
   -------------------------------------------------------------------------- */

/* Variable: contenedor .woocommerce-variation-add-to-cart
   Reset de padding-top/margin-top: la regla genérica de arriba
   (.mt-product__summary .woocommerce-variation-add-to-cart) pensada para el
   layout SIN vale (espacio entre el select de variaciones y qty+botón) también
   matchea aquí y se sumaba por encima del margen propio de .vra-product-form. */
.mt-voucher-form .woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mt-space-3);
  padding-top: 0;
  margin-top: 0;
}

/* Simple: el propio <form class="cart mt-voucher-form"> */
.mt-voucher-form.cart {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mt-space-3);
}

/* Campos del destinatario — fila propia arriba, ancho completo */
.mt-voucher-form .woo-vou-fields-main-wrapper {
  order: -1;
  flex: 0 0 100%;
  margin-bottom: var(--mt-space-4);
}

/* Plugin nuevo Vales Regalo Agora -- .vra-product-form (toggle para mí/regalo, campos
   destinatario, idioma y precio libre) hace la misma función que
   .woo-vou-fields-main-wrapper del plugin antiguo: fila propia arriba,
   ancho completo, antes de cantidad + botón.
   margin-top: 0 porque, al ser flex item, su margen NO colapsa con el
   margin-top de .vra-fields-card (primer hijo, 1.5rem en el CSS del plugin) --
   sin esto los dos márgenes se sumaban en lugar de fusionarse. */
.mt-voucher-form .vra-product-form {
  order: -1;
  flex: 0 0 100%;
  margin-top: 0;
  margin-bottom: var(--mt-space-4);
}

/* Vale en el móvil: una sola línea de ayuda (revisión de móvil del 14-10).
   Al elegir personas salían tres capas que decían lo mismo: la caja que explica
   «Regalar a algú» y «Comprar per a mi», el selector de las dos opciones y, debajo, un
   aviso enmarcado. Unos 450 px. En el móvil queda el selector y, debajo, una línea que
   cambia con la opción: el aviso de «per a mi» (sin caja) o la entradilla de los datos
   del destinatario. Los textos son los del conector de vales, sin tocar; en el ordenador
   no cambia nada. */
@media (max-width: 767.98px) {
  .mt-voucher-form .vra-mode-info {
    display: none;
  }

  .mt-voucher-form .vra-item__self-notice {
    align-items: center;
    gap: var(--mt-space-2);
    margin-top: var(--mt-space-3);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .mt-voucher-form .vra-item__self-notice p {
    color: var(--mt-color-text-secondary);
  }
}

/* Cantidad — tamaño fijo */
.mt-voucher-form .woocommerce-variation-add-to-cart .quantity,
.mt-voucher-form.cart .quantity {
  flex: 0 0 auto;
}

/* Botón — misma altura que el input vía padding (no stretch para evitar ciclos) */
.mt-voucher-form .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.mt-voucher-form.cart .single_add_to_cart_button {
  flex: 1;
  white-space: nowrap;
  padding-block: var(--mt-space-3);
  font-size: var(--mt-font-size-base);
}

/* --------------------------------------------------------------------------
   PAY YOUR PRICE dentro del formulario simple voucher
   orden: -2 → aparece ANTES de los campos del destinatario (order:-1)
   Cada elemento ocupa fila propia (flex: 0 0 100%).
   El gap del flex container gestiona el espaciado entre filas.
   -------------------------------------------------------------------------- */
.mt-voucher-form.cart .vou_pay_your_price_labels_wrap,
.mt-voucher-form.cart .form-row {
  order: -2;
  flex: 0 0 100%;
  margin-bottom: 0;
}

/* Label e input del campo de precio personalizado — el plugin no añade
   woocommerce-form-field--text, por tanto las reglas genéricas no aplican */
.mt-voucher-form.cart label.vou_set_pay_your_price {
  display: block;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  margin-bottom: var(--mt-space-1);
}

/* Asterisco required siempre rojo */
.mt-voucher-form.cart label.vou_set_pay_your_price .required,
.mt-voucher-form.cart label.vou_set_pay_your_price abbr.required {
  color: var(--mt-color-error);
  text-decoration: none;
}

/* Label rojo en error — especificidad (0,4,1) supera (0,3,1) del label base */
.mt-voucher-form.cart .form-row.mt-field--invalid label.vou_set_pay_your_price {
  color: var(--mt-color-error);
}

.mt-voucher-form.cart .form-row input.input-text {
  width: 100%;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  transition: border-color 0.2s ease;
  margin-bottom: 0;
}

.mt-voucher-form.cart .form-row input.input-text:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

/* Sufijo de moneda (€) dentro del campo de precio personalizado */
.mt-currency-input-wrap {
  position: relative;
  display: block;
}

.mt-currency-input-wrap::after {
  content: attr(data-currency-suffix);
  position: absolute;
  right: var(--mt-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--mt-color-text-secondary);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
  pointer-events: none;
  line-height: 1;
}

/* Suficiente espacio para que el texto no quede bajo el símbolo */
.mt-currency-input-wrap input.input-text {
  padding-right: 2rem;
}


/* Ocultar cantidad y botón hasta que se haya seleccionado una variación */
.mt-voucher-form .woocommerce-variation-add-to-cart-disabled .quantity,
.mt-voucher-form .woocommerce-variation-add-to-cart-disabled .mt-qty-btn,
.mt-voucher-form .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
  display: none;
}

/* --------------------------------------------------------------------------
   RECIPIENT FIELDS — Campos del destinatario en la página de producto
   -------------------------------------------------------------------------- */

/* Wrapper generado por el plugin PDF Vouchers */
.mt-voucher-fields {
  margin-top: var(--mt-space-6);
  padding: var(--mt-space-6);
  background-color: var(--mt-color-bg-subtle);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-lg);
}

/* El plugin oculta/muestra cada wrapper por variación vía su propio JS
   (.woo-vou-fields-wrapper-variation[id="woo-vou-fields-wrapper-{id}"]).
   No hace falta CSS adicional de show/hide aquí. */

/* Info: diferencia regalo / compra personal */
.mt-voucher-mode-info {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
  margin-bottom: var(--mt-space-5);
  padding: var(--mt-space-4);
  background: color-mix(in srgb, var(--mt-color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mt-color-primary) 20%, transparent);
  border-radius: var(--mt-radius-md);
}

.mt-voucher-mode-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--mt-space-3);
}

.mt-voucher-mode-info__icon {
  flex-shrink: 0;
  display: flex;
  /* E1/H3 — icono sobre fondo claro: --mt-color-primary solo 2.49:1 (<3:1
     no-texto), -dark da 5.07:1 */
  color: var(--mt-color-primary-dark);
  margin-top: 2px;
}

.mt-voucher-mode-info__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mt-voucher-mode-info__text strong {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-primary);
  line-height: 1.3;
}

.mt-voucher-mode-info__text span {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
}
/* ── Toggle regalo / para mí ── */
.mt-voucher-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: var(--mt-space-5);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  background: var(--mt-color-bg-white);
  width: 100%;
}

.mt-voucher-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 9px 16px;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--mt-radius-sm);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}

.mt-voucher-toggle__btn--active {
  /* E1/H3 — blanco sobre --mt-color-primary solo 2.49:1; -dark da 5.07:1 (AA) */
  background: var(--mt-color-primary-dark);
  color: #ffffff;
}

.mt-voucher-toggle__btn:not(.mt-voucher-toggle__btn--active):hover {
  background: var(--mt-color-bg-subtle);
  color: var(--mt-color-text-primary);
}

/* ── Sección regalo: animación de entrada/salida ── */
.mt-voucher-fields__gift-section {
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.mt-voucher-fields__gift-section[hidden] {
  display: none;
}

/* ── Aviso compra personal ── */
.mt-voucher-fields__self-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--mt-space-3);
  padding: var(--mt-space-4) var(--mt-space-5);
  background: color-mix(in srgb, var(--mt-color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--mt-color-primary) 25%, transparent);
  border-radius: var(--mt-radius-md);
  color: var(--mt-color-text-body);
}

.mt-voucher-fields__self-notice[hidden] {
  display: none;
}

.mt-voucher-fields__self-notice svg {
  flex-shrink: 0;
  /* E1/H3 — mismo motivo que .mt-voucher-mode-info__icon */
  color: var(--mt-color-primary-dark);
  margin-top: 2px;
}

.mt-voucher-fields__self-notice p {
  margin: 0;
  font-size: var(--mt-font-size-sm);
  line-height: var(--mt-line-height-relaxed);
}

.mt-voucher-fields__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-text-primary);
  margin: 0 0 var(--mt-space-2);
}

.mt-voucher-fields__intro {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  margin: 0 0 var(--mt-space-5);
  line-height: var(--mt-line-height-relaxed);
}

.mt-voucher-fields__grid {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-4);
}

/* Campos individuales */
.mt-voucher-field {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
}

.mt-voucher-field__label {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-primary);
}

.mt-voucher-field__label .required {
  color: var(--mt-color-error);
  margin-left: 2px;
}

.mt-voucher-field__optional {
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-xs);
}

.mt-voucher-field__input,
.mt-voucher-field__textarea {
  width: 100%;
  padding: var(--mt-space-3) var(--mt-space-4);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  background-color: var(--mt-color-bg-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}

.mt-voucher-field__input:focus,
.mt-voucher-field__textarea:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px var(--mt-color-primary-light);
}

.mt-voucher-field__textarea {
  resize: vertical;
  min-height: 90px;
}

.mt-voucher-field__hint {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
}

.mt-voucher-recipient {
  margin-top: var(--mt-space-6);
  padding: var(--mt-space-6);
  background-color: var(--mt-color-bg-subtle);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-lg);
}

.mt-voucher-recipient__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  color: var(--mt-color-text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--mt-space-4);
}

.mt-voucher-recipient__fields {
  display: grid;
  gap: var(--mt-space-4);
}

@media (min-width: 768px) {
  .mt-voucher-recipient__fields {
    grid-template-columns: 1fr 1fr;
  }

  .mt-voucher-recipient__field--full {
    grid-column: 1 / -1;
  }
}

.mt-voucher-recipient__field {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
}

.mt-voucher-recipient__label {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-primary);
}

.mt-voucher-recipient__label .required {
  color: var(--mt-color-error);
  margin-left: 2px;
}

.mt-voucher-recipient__input,
.mt-voucher-recipient__textarea {
  width: 100%;
  padding: var(--mt-space-3) var(--mt-space-4);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  color: var(--mt-color-text-primary);
  background-color: var(--mt-color-bg-white);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mt-voucher-recipient__input:focus,
.mt-voucher-recipient__textarea:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px var(--mt-color-primary-light);
}

.mt-voucher-recipient__input.error,
.mt-voucher-recipient__textarea.error {
  border-color: var(--mt-color-error);
}

.mt-voucher-recipient__textarea {
  resize: vertical;
  min-height: 100px;
}

.mt-voucher-recipient__char-count {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  text-align: right;
  margin-top: var(--mt-space-1);
}

.mt-voucher-recipient__char-count.is-near-limit {
  color: var(--mt-color-warning);
}

.mt-voucher-recipient__char-count.is-at-limit {
  color: var(--mt-color-error);
  font-weight: var(--mt-font-weight-semibold);
}

.mt-voucher-recipient__hint {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
}

/* Date field */
.mt-voucher-recipient__input[type="date"] {
  cursor: pointer;
}

/* ==========================================================================
   PÁGINA ORDER-PAY (reintentar pago)
   ========================================================================== */

.mt-orderpay {
  padding: var(--mt-space-10) 0 var(--mt-space-16);
}

/* ── Hero de la página order-pay (título + subtítulo + meta) ── */
.mt-orderpay__hero {
  max-width: 760px;
  margin: var(--mt-space-4) auto var(--mt-space-8);
  padding: var(--mt-space-8) var(--mt-space-6);
  background-color: var(--mt-color-bg-white);
  border: var(--mt-border);
  border-top: 4px solid currentColor;
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-sm);
  text-align: center;
}

.mt-orderpay__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--mt-space-4);
  border-radius: 50%;
  background-color: color-mix(in srgb, currentColor 10%, white);
}

.mt-orderpay__hero-title {
  margin: 0 0 var(--mt-space-2);
  font-family: var(--mt-font-display, "Bebas Neue", sans-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--mt-color-text-body);
}

.mt-orderpay__hero-subtitle {
  margin: 0 auto var(--mt-space-5);
  max-width: 56ch;
  color: var(--mt-color-text-muted, #555);
  font-size: 0.95rem;
  line-height: 1.55;
}

.mt-orderpay__hero-meta {
  list-style: none;
  margin: 0;
  padding: var(--mt-space-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mt-space-5) var(--mt-space-8);
  border-top: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
}
.mt-orderpay__hero-meta li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.mt-orderpay__hero-meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mt-color-text-muted, #777);
}
.mt-orderpay__hero-meta-value {
  font-weight: 600;
  color: var(--mt-color-text-body);
  font-size: 0.95rem;
}
.mt-orderpay__hero-meta-value .woocommerce-Price-amount {
  color: inherit;
}

/* Variantes del hero (color del border-top + icon-bg vía currentColor) */
.mt-orderpay__hero--success { color: #166534; border-top-color: #22c55e; }
.mt-orderpay__hero--error   { color: var(--mt-color-error, #b91c1c); border-top-color: currentColor; }
.mt-orderpay__hero--warning { color: #92400e; border-top-color: #f59e0b; }
.mt-orderpay__hero--info    { color: var(--mt-color-primary-dark, #0a4a55); border-top-color: var(--mt-color-primary); }
.mt-orderpay__hero--pending {
  color: var(--mt-color-primary-dark, #0a4a55);
  border-top-color: var(--mt-color-primary);
}
.mt-orderpay__hero--pending .mt-orderpay__hero-icon svg {
  animation: mt-orderpay-spin 2s linear infinite;
}
@keyframes mt-orderpay-spin {
  to { transform: rotate(360deg); }
}

/* Acciones para estados terminales (no se renderiza el formulario) */
.mt-orderpay__terminal-actions {
  max-width: 760px;
  margin: 0 auto var(--mt-space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mt-space-3);
}

/* Mensajes de estado (error, warning, info, success) */
.mt-orderpay__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--mt-space-3);
  padding: var(--mt-space-4) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid currentColor;
  margin-bottom: var(--mt-space-6);
  max-width: 760px;
  margin-inline: auto;
  font-size: var(--mt-font-size-sm);
  line-height: 1.55;
}

.mt-orderpay__notice--error {
  background-color: color-mix(in srgb, var(--mt-color-error) 8%, white);
  color: var(--mt-color-error);
}
.mt-orderpay__notice--warning {
  background-color: color-mix(in srgb, #f59e0b 8%, white);
  color: #92400e;
  border-color: #f59e0b;
}
.mt-orderpay__notice--info {
  background-color: color-mix(in srgb, var(--mt-color-primary) 8%, white);
  color: var(--mt-color-primary-dark);
}
.mt-orderpay__notice--success {
  background-color: color-mix(in srgb, #22c55e 8%, white);
  color: #166534;
  border-color: #22c55e;
}

.mt-orderpay__notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.mt-orderpay__notice-text {
  margin: 0;
  color: var(--mt-color-text-body);
}

/* Tarjeta de productos + totales */
.mt-orderpay__card {
  background-color: var(--mt-color-bg-white);
  border: var(--mt-border);
  border-top: 3px solid var(--mt-color-primary);
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-sm);
  margin-bottom: var(--mt-space-6);
  max-width: 760px;
  margin-inline: auto;
  overflow: hidden;
}

/* Sección de pago centrada */
.mt-orderpay__payment {
  max-width: 760px;
  margin-inline: auto;
}

/* Acciones finales: continuar comprando + cancelar pago */
.mt-orderpay__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-3);
  margin-top: var(--mt-space-8);
}

/* Link "Cancel·lar i començar de nou" — botón ghost con tono de aviso sutil */
.mt-orderpay__reset-link {
  color: var(--mt-color-text-muted, #777);
}
.mt-orderpay__reset-link:hover,
.mt-orderpay__reset-link:focus-visible {
  color: var(--mt-color-error, #b91c1c);
  background-color: color-mix(in srgb, var(--mt-color-error, #b91c1c) 8%, white);
}

/* Terms error shake */
.mt-terms-error-shake {
  animation: mt-shake 0.35s ease;
}
@keyframes mt-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
}

/* ─── Topbar producto: breadcrumb + botón compartir ───────────────────── */
.mt-product-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-space-4);
  margin-bottom: var(--mt-space-6);
}
.mt-product-topbar .mt-breadcrumb {
  margin-bottom: 0;
}

/* ─── Compartir producto ───────────────────────────────────────────── */
.mt-share {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.mt-share__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mt-radius-pill);
  border: 1px solid var(--mt-color-border, #e5e7eb);
  background: transparent;
  color: var(--mt-color-text-muted, #777);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  padding: 0;
}
.mt-share__trigger:hover,
.mt-share__trigger:focus-visible {
  /* E1/H3 — icono/borde sobre fondo claro: --mt-color-primary solo 2.49:1
     (<3:1 no-texto), -dark da 5.07:1 */
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-primary-dark);
  background-color: color-mix(in srgb, var(--mt-color-primary) 6%, white);
}
/* E24 — sin "outline: none" el botón recupera el :focus-visible global
   (reset.css / style.css: outline 2px solid var(--mt-color-primary),
   offset 3px) igual que el resto de botones del sitio. Antes era invisible:
   outline-style:none y el mismo aspecto que en reposo. */

/* Desplegable fallback (Firefox desktop / navegadores sin Web Share API) */
.mt-share__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--mt-color-border, #e5e7eb);
  border-radius: var(--mt-radius-lg, 12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: var(--mt-space-1);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.mt-share__opt {
  display: block;
  width: 100%;
  padding: var(--mt-space-2) var(--mt-space-3);
  border-radius: var(--mt-radius-md, 8px);
  font-size: var(--mt-text-sm);
  font-weight: 500;
  color: var(--mt-color-text-body);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.mt-share__opt:hover,
.mt-share__opt:focus-visible {
  background-color: color-mix(in srgb, var(--mt-color-primary) 8%, white);
  color: var(--mt-color-primary-dark, var(--mt-color-primary));
}
/* Mismo motivo que .mt-share__trigger: sin "outline: none" recupera
   el :focus-visible global. */
.mt-share__opt--copy.is-copied {
  color: var(--mt-color-primary-dark, var(--mt-color-primary));
}