/* ==========================================================================
   GENERADO por bin/partir-woocommerce-css.py a partir de woocommerce.css — NO EDITAR.
   Hoja «cistella»: 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);
}

/* ==========================================================================
   CARRITO — CART PAGE
   ========================================================================== */

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

/* ── Estado vacío ── */
.mt-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--mt-space-16);
  gap: var(--mt-space-5);
}
.mt-cart-empty__icon {
  color: var(--mt-color-primary-dark);
  opacity: 0.7;
  margin-bottom: var(--mt-space-2);
}
.mt-cart-empty__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-text-heading);
  margin: 0;
}
@media (min-width: 768px) {
  .mt-cart-empty__title { font-size: 3rem; }
}
.mt-cart-empty__subtitle {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  max-width: 42ch;
  line-height: var(--mt-line-height-relaxed);
  margin: 0;
}

/* ── Layout 2 columnas (mobile: stack) ── */
.mt-cart__layout {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-8);
}

/* ── Cabecera de la lista ── */
.mt-cart__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--mt-space-3);
  border-bottom: 2px solid var(--mt-color-border);
  margin-bottom: 0;
}
.mt-cart__head-label {
  font-family: var(--mt-font-body);
  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);
}

/* ── Lista de artículos ── */
.mt-cart__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Artículo individual ── */
.mt-cart__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--mt-space-4);
  padding: var(--mt-space-5) 0;
  width: 100%;
  max-width: none;
  border-bottom: 1px solid var(--mt-color-border);
  align-items: start;
}

/* Imagen */
.mt-cart__item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--mt-radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.mt-cart__item-img a { display: block; height: 100%; }
.mt-cart__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cuerpo del artículo */
.mt-cart__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  min-width: 0;
  padding-top: 2px;
}

/* Nombre */
.mt-cart__item-name {
  margin: 0;
  font-size: var(--mt-font-size-base);
}
.mt-cart__item-name a {
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  text-decoration: none;
  transition: color 0.2s;
}
.mt-cart__item-name a:hover { color: var(--mt-color-primary-dark); }

/* Precio unitario */
.mt-cart__item-price {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
  line-height: 1.4;
}
.mt-cart__item-price-label {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-bold);
}
/* Sobrescribir el font-weight:semibold global de .woocommerce-Price-amount
   únicamente en el contexto del precio del ítem de carrito */
.mt-cart__item-price .woocommerce-Price-amount {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  color: inherit;
}

/* Producto en oferta (mt_cart_item_sale_price): el «inherit» de arriba dejaba
   el tachado y el rebajado del mismo gris. El rebajado, en el turquesa de
   texto de la marca, como en la tienda y en la ficha. */
.mt-cart__item-price del {
  margin-right: var(--mt-space-1);
}

.mt-cart__item-price ins .woocommerce-Price-amount {
  color: var(--mt-color-primary-dark);
  font-weight: var(--mt-font-weight-semibold);
}

/* Sobrescribir el margin-top de p+p (typography.css) en contextos de carrito/checkout
   donde los <p> consecutivos no necesitan separación vertical */
.mt-cart__item-body p + p:not(.form-row):not(.woocommerce-form-row),
.mt-cart__item-meta p + p:not(.form-row):not(.woocommerce-form-row),
.mt-order-review__item-details p + p:not(.form-row):not(.woocommerce-form-row),
.mt-order-review__item-meta p + p:not(.form-row):not(.woocommerce-form-row),
#payment .payment_box p + p:not(.form-row):not(.woocommerce-form-row) {
  margin-top: 0;
}

/* Variación bajo el nombre */
.mt-cart__item-variation {
  margin: 0;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
  line-height: 1.4;
}
.mt-cart__item-variation-label {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-bold);
}

/* Modalidad del vale (para mí / regalo) */
.mt-cart__voucher-mode {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: var(--mt-space-1) 0 var(--mt-space-2);
  padding: 2px 9px;
  border-radius: var(--mt-radius-pill);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-medium);
  line-height: 1.5;
}

.mt-cart__voucher-mode--self {
  background: color-mix(in srgb, var(--mt-color-primary) 10%, white);
  color: #003d45; /* AAA: var(--mt-color-primary) sobre este fondo daba 2.3:1 */
  border: 1px solid color-mix(in srgb, var(--mt-color-primary) 22%, white);
}

.mt-cart__voucher-mode--gift {
  background: #f5f0ff;
  color: #5b1fb8; /* AAA: #7c3aed daba 5.1:1 */
  border: 1px solid #ddd6fe;
}

/* «Editar» dentro de la misma píldora: abre el popup del conector de vales con
   este vale (cart.js → window.vraCheckout.editItem). Hereda el color de la
   modalidad para que se lea como parte del mismo elemento. */
.mt-cart__voucher-edit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 0 7px;
  border: 1px solid currentColor;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-color-bg-white, #fff);
  color: inherit;
  font: inherit;
  font-size: var(--mt-font-size-xs);
  line-height: 1.5;
  min-height: 24px;
  cursor: pointer;
}

.mt-cart__voucher-edit:hover,
.mt-cart__voucher-edit:focus-visible {
  background: currentColor;
}

.mt-cart__voucher-edit:hover,
.mt-cart__voucher-edit:focus-visible {
  color: var(--mt-color-bg-white, #fff);
}

.mt-cart__voucher-mode--gift .mt-cart__voucher-edit:hover,
.mt-cart__voucher-mode--gift .mt-cart__voucher-edit:focus-visible {
  background: #5b1fb8;
}

.mt-cart__voucher-mode--self .mt-cart__voucher-edit:hover,
.mt-cart__voucher-mode--self .mt-cart__voucher-edit:focus-visible {
  background: #003d45;
}

.mt-cart__voucher-edit[disabled],
.mt-cart__voucher-edit[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

/* El display:inline-flex de arriba ganaría al [hidden] del navegador, y el botón se
   vería aunque el conector no tuviera editItem(). */
.mt-cart__voucher-edit[hidden] {
  display: none;
}

/* Meta / variación */
.mt-cart__item-meta {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: 1.4;
  margin-top: 0;
}
.mt-cart__item-meta dl {
  margin: 0;
  padding: 0;
}
.mt-cart__item-meta dt {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-bold);
  color: var(--mt-color-text-secondary);
}
.mt-cart__item-meta dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
}

/* Variaciones WC generadas (dt/dd con clase = nombre atributo sanitizado) */
.mt-cart__item-meta dt[class*="variation-"] {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-bold);
}
.mt-cart__item-meta dd[class*="variation-"] {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
}
.mt-cart__item-meta dd p {
  display: inline;
  margin: 0;
}
.mt-cart__item-meta dd::after {
  content: '';
  display: block;
}

/* dl.variation — etiqueta y valor en la misma línea (inline), fila por fila.
   Truncamiento del mensaje gestionado en PHP (woocommerce_get_item_data, 200 caracteres). */
.mt-cart__item-meta dl.variation {
  display: block;
}
.mt-cart__item-meta dl.variation dt {
  display: inline;
  white-space: normal;
}
.mt-cart__item-meta dl.variation dd {
  display: inline;
  margin: 0;
}
.mt-cart__item-meta dl.variation dd::after {
  content: '';
  display: block;
}

/* Backorder */
.mt-cart__backorder {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-warning);
}

/* Controles: cantidad + eliminar */
.mt-cart__item-foot {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  margin-top: var(--mt-space-3);
  flex-wrap: wrap;
}

/* Botón eliminar */
.mt-cart__item-remove.remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--mt-color-bg-subtle);
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
}

/* E7 — área táctil mínima 44×44 sin agrandar la caja visible (32×32) */
.mt-cart__item-remove.remove::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.mt-cart__item-remove.remove:hover {
  background-color: #fef2f2;
  color: var(--mt-color-error);
}

/* Total de la línea (columna derecha) */
.mt-cart__item-total {
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  white-space: nowrap;
  text-align: right;
  padding-top: 2px;
}

/* ── Acciones: cupón + actualizar ── */
.mt-cart__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mt-space-4);
  padding-top: var(--mt-space-6);
}
.mt-cart__coupon { flex: 1 1 auto; }
.mt-cart__update { flex: 0 0 auto; }

/* Cupón */
.coupon {
  display: flex;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
}
.coupon label { display: none; }
.coupon #coupon_code {
  flex: 1;
  min-width: 160px;
  padding: var(--mt-space-2) var(--mt-space-4);
  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);
  transition: border-color 0.2s;
}
.coupon #coupon_code::placeholder { color: var(--mt-color-text-secondary); }
.coupon #coupon_code:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20,181,197,0.15);
}
.coupon [name="apply_coupon"] {
  padding-block: var(--mt-space-2);
  padding-inline: var(--mt-space-5);
}
[name="update_cart"] {
  padding-block: var(--mt-space-2);
}

/* ── Cross-sells ── */
.cross-sells {
  margin-top: var(--mt-space-12);
}
.cross-sells > 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-6);
}
.cross-sells ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mt-space-4);
}
@media (min-width: 1024px) {
  .cross-sells ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt-space-6);
  }
}

/* ── Sidebar: totales ── */
.cart-collaterals { width: 100%; }

.cart_totals {
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-xl);
  padding: var(--mt-space-6);
  box-shadow: var(--mt-shadow-sm);
}
.cart_totals h2 {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  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-5);
}
.cart_totals .shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--mt-space-5);
}
.cart_totals .shop_table th,
.cart_totals .shop_table td {
  padding: var(--mt-space-3) 0;
  font-family: var(--mt-font-body);
  border-bottom: 1px solid var(--mt-color-border);
  vertical-align: top;
}
.cart_totals .shop_table th {
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-secondary);
  text-align: left;
  width: 40%;
  text-transform: uppercase;
  letter-spacing: var(--mt-letter-spacing-wide);
}
.cart_totals .shop_table td {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
  text-align: right;
}
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: none;
  padding-top: var(--mt-space-4);
}
.cart_totals .order-total th {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
}
.cart_totals .order-total td .woocommerce-Price-amount {
  font-size: var(--mt-font-size-xl);
  color: var(--mt-color-primary-dark);
}
.cart_totals .order-total td small.includes_tax {
  display: block;
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
  margin-top: var(--mt-space-1);
}
.cart_totals .order-total td small.includes_tax .woocommerce-Price-amount {
  font-size: inherit;
  color: inherit;
}
.woocommerce-shipping-calculator,
.cart_totals tr.shipping,
.cart_totals tr.tax-rate { display: none; }
.wc-proceed-to-checkout { margin-top: var(--mt-space-2); }
.wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-block: var(--mt-space-4);
  font-size: var(--mt-font-size-xl);
}

/* ── Responsive: 1024px desktop ── */
@media (min-width: 1024px) {
  .mt-cart__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--mt-space-10);
  }
  .mt-cart__main {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mt-cart__sidebar {
    flex: 0 0 340px;
    position: sticky;
    top: calc(72px + var(--mt-space-6));
  }
}

@media (min-width: 1280px) {
  .mt-cart__sidebar { flex-basis: 380px; }
}

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

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

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   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);
}

/* --------------------------------------------------------------------------
   CAMPOS DE FORMULARIO
   -------------------------------------------------------------------------- */

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 600px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--mt-space-5);
    align-items: start;
  }
}

/* Campos de ancho completo */
.form-row-wide {
  grid-column: 1 / -1;
}

/* Label + input */
.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
  margin-bottom: var(--mt-space-4);
}

.woocommerce-checkout .form-row 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);
}

.woocommerce-checkout .form-row label .required {
  color: var(--mt-color-error) !important;
  margin-left: 2px;
  text-decoration: none;
}

.woocommerce-checkout .form-row label .optional {
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-xs);
  margin-left: var(--mt-space-1);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  font-family: var(--mt-font-body);
  /* 16px (no 14px) en móvil: por debajo de 16px Safari iOS hace zoom automático
     al enfocar el input, forzando al usuario a deshacerlo manualmente. */
  font-size: var(--mt-font-size-base);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-bg-subtle);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  padding: var(--mt-space-3) var(--mt-space-4);
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  line-height: var(--mt-line-height-normal);
}

@media (min-width: 768px) {
  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea {
    font-size: var(--mt-font-size-sm);
  }
}

.woocommerce-checkout .form-row input.input-text:hover,
.woocommerce-checkout .form-row select:hover,
.woocommerce-checkout .form-row textarea:hover {
  border-color: #c0c0c0;
  background-color: var(--mt-color-white);
}

.woocommerce-checkout .form-row select {
  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-4) center;
  padding-right: var(--mt-space-10);
  cursor: pointer;
}

.woocommerce-checkout .form-row textarea {
  resize: vertical;
  min-height: 96px;
}

/* ── Select2 (provincia/estado) — iguala el estilo del <select> nativo ──
   Usamos .select2-container--default para superar la especificidad del CSS de Select2.
   !important solo donde Select2 impone inline styles o tiene mayor especificidad. */

.woocommerce-checkout .select2-container--default .select2-selection--single {
  position: relative;
  height: auto !important;
  min-height: 44px;
  border: 1px solid var(--mt-color-border) !important;
  border-radius: var(--mt-radius-md) !important;
  background-color: var(--mt-color-bg-subtle) !important;
  padding: var(--mt-space-3) var(--mt-space-10) var(--mt-space-3) var(--mt-space-4) !important;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
  line-height: var(--mt-line-height-normal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;
  display: flex;
  align-items: center;
}

.woocommerce-checkout .select2-container--default .select2-selection--single:hover {
  border-color: #c0c0c0 !important;
  background-color: var(--mt-color-white) !important;
}

.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--mt-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15) !important;
  background-color: var(--mt-color-white) !important;
}

.woocommerce-checkout .select2-container--default .select2-selection__rendered {
  padding: 0 !important;
  color: var(--mt-color-text-heading) !important;
  line-height: var(--mt-line-height-normal) !important;
  flex: 1;
}

/* Flecha — contenida dentro del selection (position: relative) */
.woocommerce-checkout .select2-container--default .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: var(--mt-space-4) !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 8px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection__arrow b {
  display: none !important;
}

.woocommerce-checkout .select2-container--default .select2-selection__arrow::after {
  content: '';
  display: block;
  width: 12px;
  height: 8px;
  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-size: contain;
}

/* Dropdown */
.select2-dropdown {
  border: 1px solid var(--mt-color-primary);
  border-radius: var(--mt-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-sm);
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  outline: none;
  width: 100%;
}

.select2-results__option {
  padding: var(--mt-space-2) var(--mt-space-4);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-heading);
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--mt-color-primary-light) !important;
  color: var(--mt-color-primary-dark) !important;
}

.select2-results__option[aria-selected="true"] {
  background-color: var(--mt-color-primary-dark) !important;
  color: var(--mt-color-white) !important;
}

/* Error state */
.woocommerce-checkout .form-row.mt-has-error .select2-container--default .select2-selection--single,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
  border-color: var(--mt-color-error) !important;
  background-color: rgba(239, 68, 68, 0.04) !important;
}

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

/* Errores de validación WooCommerce (submit) */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--mt-color-error);
}

.woocommerce-checkout .form-row.woocommerce-invalid label {
  color: var(--mt-color-error);
}

/* Validación dinámica — estados en tiempo real */
.woocommerce-checkout .form-row.mt-has-error input.input-text,
.woocommerce-checkout .form-row.mt-has-error select,
.woocommerce-checkout .form-row.mt-has-error textarea {
  border-color: var(--mt-color-error);
  background-color: rgba(239, 68, 68, 0.04);
}

.woocommerce-checkout .form-row.mt-has-error label {
  color: var(--mt-color-error);
}

.woocommerce-checkout .form-row.mt-is-valid input.input-text,
.woocommerce-checkout .form-row.mt-is-valid select,
.woocommerce-checkout .form-row.mt-is-valid textarea {
  border-color: var(--mt-color-success);
}

/* Foco de los campos del checkout (auditoría de accesibilidad del 14-10, 🟠-4 y 🟡-6).
   El foco era solo el borde de 1 px en --mt-color-primary (2,49:1 sobre blanco) y un
   halo al 15 %; con error, el borde rojo de siempre y un halo rojo: casi no se distinguía
   el campo con foco del que no lo tiene. Ahora, un anillo de 2 px en primary-dark
   (5,06:1) separado del borde, que se ve igual sobre un campo bueno y sobre uno en rojo.
   Va aquí, después de las reglas de :focus y de error, para ganar por orden con la misma
   especificidad. Mismo anillo en la provincia (select2), el titular y los campos de la
   tarjeta de MONEI y la casilla de los términos. */
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row.mt-has-error input.input-text:focus,
.woocommerce-checkout .form-row.mt-has-error select:focus,
.woocommerce-checkout .form-row.mt-has-error textarea:focus,
.mt-orderpay .form-row input.input-text:focus,
.woocommerce-checkout .monei-input-container input[type="text"]:focus,
.mt-orderpay .monei-input-container input[type="text"]:focus {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 2px;
  border-color: var(--mt-color-primary-dark);
  box-shadow: none;
}

.woocommerce-checkout .form-row.mt-has-error input.input-text:focus,
.woocommerce-checkout .form-row.mt-has-error select:focus,
.woocommerce-checkout .form-row.mt-has-error textarea:focus,
.woocommerce-checkout .monei-input-container.mt-has-error input[type="text"]:focus {
  /* El borde sigue rojo (dice que hay un error); el anillo dice dónde está el foco. */
  border-color: var(--mt-color-error);
}

.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 2px;
}

.woocommerce-checkout .monei-card-group-field.monei-component--focus {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 2px;
}

/* Más específico que la regla de la casilla de más abajo, que va en primary. */
.woocommerce-checkout #terms_and_conditions input[type="checkbox"]:focus-visible,
.mt-orderpay #terms_and_conditions input[type="checkbox"]:focus-visible {
  outline-color: var(--mt-color-primary-dark);
}

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

/* Ocultar errores inline de WC para evitar duplicados con nuestros .mt-field-error.
   WC 10.x añade: .woocommerce-error, .checkout-inline-error-message y
   un <span class="mt-field-error" role="alert"> fuera del wrapper.
   Los errores globales (.woocommerce-notices-wrapper .woocommerce-error) no se ven afectados. */
.woocommerce-checkout .form-row .woocommerce-error,
.woocommerce-checkout .woocommerce-input-wrapper .woocommerce-error,
.woocommerce-checkout .woocommerce-input-wrapper .wc-block-components-validation-error,
.woocommerce-checkout .form-row > .mt-field-error[role="alert"],
.woocommerce-checkout .checkout-inline-error-message {
  display: none !important;
}

/* Ocultar el checkbox "ship to different address" de WC — usamos el nuestro */
#ship-to-different-address {
  display: none;
}

/* Y el título de la plantilla form-billing.php de WC («Detalls de facturació», o
   «Facturació i enviament»): la sección ya lleva su h2 «Adreça de facturació», como la de
   envío lleva «Adreça d'enviament», y salían dos títulos seguidos (pruebas de staging del
   18-10). Con display:none tampoco lo leen los lectores de pantalla, que oían los dos. */
.mt-checkout__section--billing .woocommerce-billing-fields > h3 {
  display: none;
}

/* La dirección de envío no se pliega nunca (14-10-2026, CLS del checkout).
   Al arrancar, el checkout.js de WooCommerce esconde div.shipping_address y la vuelve a abrir con
   slideDown() (400 ms): la sección de notas y la casilla de facturación bajaban fotograma a
   fotograma (CLS 0,17 en una tableta, 0,07 en PC). Aquí la dirección de envío es la principal y su
   casilla está siempre marcada (inc/woocommerce.php), así que el !important solo anula los estilos en
   línea de esa animación. */
.woocommerce-checkout .shipping_address {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   PARCELSHOP GLS — selector de punto de recogida
   #parcelinfo-container lo inyecta el plugin GLS como hermano del label,
   dentro del <li> del método de envío (flex-wrap: wrap).
   -------------------------------------------------------------------------- */

/* El botón ya está dentro del <label> — el container no tiene apariencia visual,
   pero hay que mantenerlo en el DOM para el input hidden #Red, #parcelinfo e #iframe1 */
#parcelinfo-container {
  flex-basis: 100%;
  width: 100%;
  padding: 0 !important;
  border: none;
  background: none;
}

/* Descripción de un método de envío (p.ej. Recollida a La Daurada) */
/* Oculta por defecto; visible cuando el método está seleccionado */
.mt-shipping-desc {
  display: none;
  flex-basis: 100%;
  width: 100%;
  padding: var(--mt-space-3) var(--mt-space-5);
  background-color: var(--mt-color-primary-light);
  border: 2px solid var(--mt-color-primary);
  border-top: none;
  border-radius: 0 0 var(--mt-radius-md) var(--mt-radius-md);
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-body);
  line-height: 1.6;
}

/* Muestra cuando el método está seleccionado */
#mt-shipping-methods-target #shipping_method li:has(input:checked) .mt-shipping-desc {
  display: block;
}

/* Quita el radius inferior del label cuando la descripción es visible */
#mt-shipping-methods-target #shipping_method li:has(.mt-shipping-desc):has(input:checked) label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.mt-shipping-desc__map-link {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--mt-space-2);
  color: var(--mt-color-primary-dark);
  text-decoration: none;
  font-weight: var(--mt-font-weight-medium);
}

.mt-shipping-desc__map-link:hover {
  text-decoration: underline;
}

/* #parcelinfo siempre oculto — el nombre del punto se muestra dentro del label vía JS.
   El container se mantiene en el DOM para que #Red e #iframe1 sean accesibles al plugin. */
#parcelinfo {
  display: none !important;
}

/* El botón ahora vive dentro del <label>, ANTES del precio — pill, empuja a la derecha vía margin-left:auto */
#mt-shipping-methods-target #shipping_method li label input[type="button"].gls-parcel-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  width: auto;
  flex-shrink: 0;
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  border: none;
  border-radius: 999px;
  padding: var(--mt-space-1) var(--mt-space-4);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.18s ease;
  white-space: nowrap;
  line-height: 1.4;
}

#mt-shipping-methods-target #shipping_method li label input[type="button"].gls-parcel-btn:hover {
  background-color: var(--mt-color-primary-darker);
}


/* Error cuando no se ha seleccionado punto */
#parcelinfo-container.mt-parcel-error {
  border-color: var(--mt-color-error);
}

#parcelinfo-container .mt-parcel-error-msg {
  display: none;
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-error);
  font-weight: var(--mt-font-weight-medium);
}

#parcelinfo-container.mt-parcel-error .mt-parcel-error-msg {
  display: block;
}

/* Elimina el <br> que inyecta el plugin */
#parcelinfo-container br {
  display: none;
}

/* --------------------------------------------------------------------------
   CARRITO — cantidad fija (E8)
   Los vales de regalo y los productos de venta individual muestran la cantidad
   como texto y no como selector: un vale por línea es una regla del negocio,
   no una preferencia que el cliente pueda cambiar. El estilo imita la caja del
   selector para que la columna no quede vacía junto a las otras líneas.
   -------------------------------------------------------------------------- */

.mt-cart__item-qty-fixed,
.vra-cart-qty-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--mt-space-3);
  border: var(--mt-border);
  border-radius: var(--mt-radius-pill);
  background-color: var(--mt-color-bg-light);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-body);
}