/* ==========================================================================
   MI TEMA — Header
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER (utilitario global — usado en el header y el footer)
   -------------------------------------------------------------------------- */

.mt-container {
  width: 100%;
  max-width: var(--mt-container-max);
  margin-inline: auto;
  padding-inline: var(--mt-container-gutter);
}

/* --------------------------------------------------------------------------
   HEADER BASE
   -------------------------------------------------------------------------- */

.mt-header {
  position: sticky;
  top: 0;
  z-index: var(--mt-z-sticky);
  background: transparent;
}

/* --------------------------------------------------------------------------
   INNER — desktop nav (oculto por defecto en móvil)
   -------------------------------------------------------------------------- */

.mt-header__inner {
  display: none;
  align-items: center;
  height: 72px;
  /* Grid de 3 columnas: logo | nav (centrado) | acciones */
  grid-template-columns: 1fr auto 1fr;
  gap: var(--mt-space-6);
}

/* --------------------------------------------------------------------------
   LOGO
   -------------------------------------------------------------------------- */

.mt-header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mt-header__logo-img {
  display: block;
  color: var(--mt-color-primary-dark);
  transition: opacity 0.2s ease;
}

.mt-header__logo:hover .mt-header__logo-img,
.mt-header__logo:focus-visible .mt-header__logo-img {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   NAVEGACIÓN DESKTOP — PILL
   -------------------------------------------------------------------------- */

.mt-header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mt-header__nav-pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-2) var(--mt-space-2);
  box-shadow: var(--mt-shadow-md);
}

/* El header va sobre vidrio, con el corte inferior desvanecido y ondulado.
   ------------------------------------------------------------------------
   Con el header en background: transparent, el logo y el selector de idioma
   quedaban flotando encima del contenido y se solapaban con los títulos de los
   productos.

   El vidrio se ve siempre. Al principio solo aparecía al hacer scroll (con una
   clase .is-scrolled que ponía main.js), pero eso hacía que la primera
   pantalla se viera diferente del resto de la visita y que el momento en
   que aparecía llamara más la atención que el vidrio mismo. Con el vidrio fijo,
   aquella clase ya no la usaba nadie y el listener de scroll se ha
   quitado de main.js.

   Tres decisiones, por orden de lo que se probó:

   1. NO un blanco opaco: se cargaría la pill del menú, que dejaría de
      leerse como una pieza flotante. Sobre vidrio translúcido, en cambio, la
      pill (blanca sólida con sombra) sigue destacando.
   2. NO una pastilla para cada pieza (logo, menú, acciones): visualmente quedan
      tres islas sueltas y a alturas diferentes.
   3. El vidrio va en un ::before y no en el propio header, porque hay que desvanecer su
      borde inferior con una máscara. Si la máscara se aplicara al header, se
      comería también el contenido —el menú se desvanecería—; en un pseudoelemento
      detrás, solo afecta al vidrio y el texto se queda intacto.

   Solo de 900px hacia arriba, que es donde empieza el header de escritorio: por debajo
   manda .mt-mobile-bar, que ya tiene fondo propio y no sufre el problema. Así el
   desenfoque tampoco se ejecuta en los móviles, que es donde costaría. */
@media (min-width: 900px) {
  .mt-header::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Sobresale por debajo para dar recorrido al fundido, pero sin pasarse:
       el header mide 72px y esto le añade 40, unos 112 en total. Antes
       sumaba 64 (136 en total): con el vidrio solo visible al hacer scroll no
       desentonaba, pero una vez se ve siempre, aquella franja bajaba demasiado. */
    bottom: calc(var(--mt-space-10) * -1);
    z-index: -1;
    pointer-events: none;
    /* Siempre visible, también arriba del todo. Antes solo aparecía con
       .is-scrolled y el header arrancaba sin nada: la primera pantalla se
       veía diferente del resto de la visita, y el momento en que aparecía
       llamaba más la atención que el vidrio mismo. */
    /* Más transparente de lo que era (0.7). Se pudo bajar al subir el peso y
       el tamaño del selector de idioma: el texto ya aguanta solo y el vidrio no hace
       falta que trabaje tanto. Sigue apreciándose, pero no domina. */
    background-color: rgba(255, 255, 255, 0.52);

    /* Menos desenfoque que antes (14px): el blur NO se desvanece con el alpha
       de la máscara —una capa medio transparente sigue enseñando la imagen
       desenfocada— y ese salto de nitidez es parte de lo que se leía como
       una línea. Con 9px el salto es mucho menos evidente. */
    -webkit-backdrop-filter: blur(9px) saturate(135%);
    backdrop-filter: blur(9px) saturate(135%);

    /* Dos velos del turquesa de marca, flojos y descentrados, para que el vidrio
       no sea un blanco plano. De aquí viene la irregularidad: de la mancha de color,
       no del borde. */
    background-image:
      radial-gradient(120% 85% at 16% 0%,
        color-mix(in srgb, var(--mt-color-primary) 15%, transparent) 0%, transparent 62%),
      radial-gradient(95% 80% at 74% 8%,
        color-mix(in srgb, var(--mt-color-primary) 10%, transparent) 0%, transparent 58%);

    /* Curva suavizada, y encima tres manchas que ondulan su borde.
       ----------------------------------------------------------------
       Base: ocho paradas y no dos. Con dos, el cambio de pendiente al
       principio y al final es brusco y el ojo lo detecta como una raya.

       Un intento anterior de sumarle radiales salió mal y se
       retiró. La causa era dónde iba el centro de cada mancha: si el centro
       cae FUERA de la caja, en el borde la mancha todavía llega con
       opacidad alta, y allí la máscara deja de pintar de golpe —el corte se
       ve como la raya que precisamente se intentaba evitar. Con el centro
       DENTRO y el radio vertical igual a la distancia al borde, la opacidad
       de la mancha llega a cero exactamente allí y no hay nada que cortar.

       Las posiciones no son las de la banda de productos de la portada: los
       dos bordes se ven en la misma pantalla y con la misma onda
       parecería un patrón repetido. */
    -webkit-mask-image:
      radial-gradient(12% 34px at 13% calc(100% - 34px),
        rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.20) 55%, transparent 100%),
      radial-gradient(17% 34px at 46% calc(100% - 34px),
        rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.14) 55%, transparent 100%),
      radial-gradient(13% 34px at 87% calc(100% - 34px),
        rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%),
      linear-gradient(to bottom,
      #000 0%, #000 44%,
      rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.72) 65%,
      rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.20) 85%,
      rgba(0, 0, 0, 0.06) 93%, transparent 100%);
    mask-image:
      radial-gradient(12% 34px at 13% calc(100% - 34px),
        rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.20) 55%, transparent 100%),
      radial-gradient(17% 34px at 46% calc(100% - 34px),
        rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.14) 55%, transparent 100%),
      radial-gradient(13% 34px at 87% calc(100% - 34px),
        rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%),
      linear-gradient(to bottom,
      #000 0%, #000 44%,
      rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.72) 65%,
      rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.20) 85%,
      rgba(0, 0, 0, 0.06) 93%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  /* Sin backdrop-filter no hay vidrio posible, y un 72% dejaría leer
     el texto de debajo a través. En este caso, casi opaco. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mt-header::before {
      background-color: rgba(255, 255, 255, 0.96);
    }
  }
}

.mt-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--mt-space-1);
  list-style: none;
}

/* Clase compartida — ítem pill nav desktop */
.mt-pill-item,
.mt-header__nav-list > li > a {
  display: block;
  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);
  text-decoration: none;
  border-radius: var(--mt-radius-pill);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--mt-transition-colors);
}

.mt-pill-item:hover,
.mt-pill-item.is-active,
.mt-header__nav-list > li > a:hover,
.mt-header__nav-list > li.current-menu-item > a,
.mt-header__nav-list > li.current-menu-ancestor > a {
  color: var(--mt-color-primary-dark);
  background-color: var(--mt-color-primary-light);
}

/* Padding desktop específico */
.mt-header__nav-list > li > a {
  padding: var(--mt-space-2) var(--mt-space-4);
}

/* Ítem CTA desktop */
.mt-header__nav-list > li.mt-menu-cta > a {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  padding-inline: var(--mt-space-6);
  letter-spacing: var(--mt-letter-spacing-wider);
  border-radius: var(--mt-radius-pill);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-header__nav-list > li.mt-menu-cta > a:hover,
.mt-header__nav-list > li.mt-menu-cta > a:focus-visible {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

/* --------------------------------------------------------------------------
   ACCIONES DERECHA
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   SELECTOR DE IDIOMA WPML
   -------------------------------------------------------------------------- */

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

/* Mismo tamaño que los enlaces del menú (sm / 14px) y más peso que ellos (700
   contra 500), porque el selector de idioma vive FUERA de la pill, directamente
   sobre el vidrio y el contenido de debajo. Necesita más cuerpo para aguantar ahí:
   antes iba a 12px en gris secundario y se perdía. El color también pasa al
   del menú (--mt-color-text-body) en lugar del gris. */
.mt-header__lang-item {
  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-body);
  text-decoration: none;
  letter-spacing: var(--mt-letter-spacing-wider);
  transition: var(--mt-transition-colors);
  line-height: 1;
}

.mt-header__lang-item:hover,
.mt-header__lang-item:focus-visible,
.mt-header__lang-item.is-active {
  color: var(--mt-color-primary-dark);
}

/* El peso va SOLO en el activo, no en el hover: cambiar de grosor al pasar por
   encima cambiaría el ancho del texto y los otros códigos se desplazarían bajo
   el cursor. El hover ya se distingue por el color. */
.mt-header__lang-item.is-active {
  font-weight: var(--mt-font-weight-bold);
}

.mt-header__lang-sep {
  /* Se queda en gris secundario: tiene que separar, no competir. Pero sube de tamaño
     con los códigos de idioma para no quedar descolgado. */
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-sm);
  user-select: none;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   ICONO CARRITO WOOCOMMERCE
   -------------------------------------------------------------------------- */

.mt-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-color-text-body);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  padding: var(--mt-space-1);
}

.mt-header__cart:hover,
.mt-header__cart:focus-visible {
  color: var(--mt-color-primary-dark);
}

/* E7 — área táctil mínima 44×44 sin agrandar el icono visible (30×30):
   pseudoelemento invisible que amplía la zona clicable/tocable.
   Expansión asimétrica: menos hacia la derecha porque en la top bar móvil está
   el botón hamburguesa muy cerca (gap de solo 4-8px). */
.mt-header__cart::after {
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  bottom: -7px;
  right: -3px;
}

.mt-header__cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-bold);
  line-height: 1;
  border-radius: var(--mt-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.mt-header__cart-count.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   TOP BAR MÓVIL — visible por defecto (<900px)
   -------------------------------------------------------------------------- */

.mt-mobile-bar {
  position: sticky;
  top: 0;
  z-index: var(--mt-z-sticky);
  padding: var(--mt-space-3) var(--mt-container-gutter);
  background: transparent;
}

.mt-mobile-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-space-4);
  background-color: var(--mt-color-white);
  border-radius: var(--mt-radius-pill);
  box-shadow: var(--mt-shadow-md);
  padding: var(--mt-space-2) var(--mt-space-3);
  height: 52px;
}

.mt-mobile-bar__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.mt-mobile-bar__logo svg {
  width: 28px;
  height: 28px;
  color: var(--mt-color-primary-dark);
}

.mt-mobile-bar__logo:hover,
.mt-mobile-bar__logo:focus-visible {
  opacity: 0.85;
}

.mt-mobile-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--mt-space-1);
}

/* --------------------------------------------------------------------------
   BOTÓN HAMBURGER (móvil)
   -------------------------------------------------------------------------- */

.mt-mobile-bar__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 y no 36 (revisión de móvil del 14-10): es el botón que más se toca del móvil.
     Cabe dentro de la píldora de 52 px. */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--mt-color-text-body);
  border-radius: var(--mt-radius-pill);
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.mt-mobile-bar__menu-btn:hover,
.mt-mobile-bar__menu-btn:focus-visible {
  background-color: var(--mt-color-primary-light);
}

.mt-mobile-bar__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 20px;
}

.mt-mobile-bar__burger span {
  display: block;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

/* Tercera línea más corta en reposo — detalle visual */
.mt-mobile-bar__burger span:last-child {
  width: 14px;
  align-self: flex-end;
}

/* Estado abierto: cruz animada */
.mt-mobile-bar__menu-btn[aria-expanded="true"] .mt-mobile-bar__burger span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.mt-mobile-bar__menu-btn[aria-expanded="true"] .mt-mobile-bar__burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mt-mobile-bar__menu-btn[aria-expanded="true"] .mt-mobile-bar__burger span:last-child {
  width: 20px;
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   390px — Móviles normales
   -------------------------------------------------------------------------- */

@media (min-width: 390px) {
  .mt-mobile-bar__inner {
    padding: var(--mt-space-2) var(--mt-space-4);
  }

  .mt-mobile-bar__actions {
    gap: var(--mt-space-2);
  }
}

/* --------------------------------------------------------------------------
   900px — Tablet grande / portátil: mostrar desktop, ocultar móvil
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  .mt-mobile-bar {
    display: none;
  }

  .mt-menu-sheet,
  .mt-menu-overlay {
    display: none;
  }

  /* Mostrar desktop: grid de 3 columnas para centrar la nav */
  .mt-header__inner {
    display: grid;
  }

  .mt-header__logo {
    justify-self: start;
  }

  .mt-header__actions {
    justify-self: end;
  }

  .mt-header__nav-list {
    gap: var(--mt-space-1);
  }

  .mt-header__nav-list > li > a {
    padding: var(--mt-space-2) var(--mt-space-3);
    font-size: var(--mt-font-size-sm);
  }

  .mt-header__actions {
    gap: var(--mt-space-3);
  }
}

/* --------------------------------------------------------------------------
   1100px — Portátil 14"
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .mt-header__nav-list > li > a {
    padding: var(--mt-space-2) var(--mt-space-4);
  }

  .mt-header__actions {
    gap: var(--mt-space-4);
  }
}

/* --------------------------------------------------------------------------
   1280px — Desktop estándar
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .mt-header__nav-list > li > a {
    font-size: var(--mt-font-size-sm);
    padding: var(--mt-space-2) var(--mt-space-4);
  }
}

/* --------------------------------------------------------------------------
   2560px — 4K
   -------------------------------------------------------------------------- */

@media (min-width: 2560px) {
  .mt-container {
    max-width: 1600px;
  }

  html {
    font-size: 112%;
  }
}

/* ==========================================================================
   MENÚ BOTTOM SHEET (móvil)
   ========================================================================== */

/* Overlay */
.mt-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--mt-z-modal) - 1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  animation: mt-overlay-in 0.25s ease forwards;
}

/* Bottom sheet */
.mt-menu-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--mt-z-modal);
  background-color: var(--mt-color-bg-white);
  border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.14);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  /* visibility retardada: cerrado, se mantiene visible hasta que acaba la
     transición de salida (permite la animación); una vez cerrado de verdad
     visibility:hidden saca el elemento del árbol de accesibilidad y evita
     que el foco pueda escapar ahí al tabular (E4) — complementa
     aria-hidden/inert, que ya gestiona main.js. */
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.38s;
  visibility: hidden;
  overflow: hidden;
}

.mt-menu-sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
  /* Abierto, por encima del banner de cookies (`--ldc-z`, 999999). Con el modal a 400, el banner
     tapaba el pie del menú en el móvil, justo donde está el selector de idioma: pulsar ES o EN
     pulsaba un botón del banner (visto en staging el 01-10). Cerrado vuelve a 400 y el banner
     queda otra vez delante. +1 empata con la ventana de configuración de cookies
     (`--ldc-z + 1`), que va después en el HTML y por eso sigue ganando. */
  z-index: calc(var(--ldc-z, 999999) + 1);
}

/* Offset admin bar */
.admin-bar .mt-menu-sheet {
  max-height: calc(88vh - 32px);
}

@media (max-width: 782px) {
  .admin-bar .mt-menu-sheet {
    max-height: calc(88vh - 46px);
  }
}

/* Handle drag visual */
.mt-menu-sheet__handle {
  flex-shrink: 0;
  width: 40px;
  height: 4px;
  background-color: var(--mt-color-border);
  border-radius: var(--mt-radius-sm);
  margin: 12px auto 0;
}

/* Cabecera */
.mt-menu-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mt-space-4) var(--mt-space-5) var(--mt-space-3);
  flex-shrink: 0;
}

.mt-menu-sheet__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  letter-spacing: var(--mt-letter-spacing-wider);
  color: var(--mt-color-text-primary);
}

.mt-menu-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* E7 — 44×44 mínimo (antes 36×36): hay espacio de sobra en la cabecera
     del sheet, así que agrandamos la caja visible en lugar de una zona
     táctil invisible. */
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.mt-menu-sheet__close:hover,
.mt-menu-sheet__close:focus-visible {
  color: var(--mt-color-text-primary);
  border-color: var(--mt-color-text-primary);
  background-color: var(--mt-color-bg-subtle);
}

/* Navegación */
.mt-menu-sheet__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--mt-space-5);
}

.mt-menu-sheet__list {
  list-style: none;
}

.mt-menu-sheet__list > li {
  border-bottom: 1px solid var(--mt-color-border);
}

.mt-menu-sheet__list > li:last-child {
  border-bottom: none;
}

.mt-menu-sheet__list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--mt-space-4) 0;
  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-primary);
  text-decoration: none;
  letter-spacing: var(--mt-letter-spacing-wider);
  text-transform: uppercase;
  transition: color 0.18s ease;
}

/* Flecha derecha */
.mt-menu-sheet__list > li > a::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mt-menu-sheet__list > li > a:hover,
.mt-menu-sheet__list > li > a:focus-visible {
  color: var(--mt-color-primary-dark);
}

.mt-menu-sheet__list > li > a:hover::after,
.mt-menu-sheet__list > li > a:focus-visible::after {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}

.mt-menu-sheet__list > li.current-menu-item > a,
.mt-menu-sheet__list > li.current-page-ancestor > a {
  color: var(--mt-color-primary-dark);
}

.mt-menu-sheet__list > li.current-menu-item > a::after,
.mt-menu-sheet__list > li.current-page-ancestor > a::after {
  opacity: 1;
}

/* Ítem CTA dentro del sheet — mantiene el botón lleno pero separado */
.mt-menu-sheet__list > li.mt-menu-cta {
  border-bottom: none;
  padding-top: var(--mt-space-4);
}

.mt-menu-sheet__list > li.mt-menu-cta > a {
  justify-content: center;
  padding: var(--mt-space-4) var(--mt-space-6);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  border-radius: var(--mt-radius-pill);
  font-size: var(--mt-font-size-xl);
}

.mt-menu-sheet__list > li.mt-menu-cta > a::after {
  display: none;
}

.mt-menu-sheet__list > li.mt-menu-cta > a:hover {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

/* Pie: selector de idioma */
.mt-menu-sheet__footer {
  flex-shrink: 0;
  padding: var(--mt-space-4) var(--mt-space-5);
  border-top: 1px solid var(--mt-color-border);
}

.mt-menu-sheet__lang {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
}

.mt-menu-sheet__lang-item {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  letter-spacing: var(--mt-letter-spacing-wider);
  padding: var(--mt-space-2) var(--mt-space-3);
  border-radius: var(--mt-radius-pill);
  border: 1px solid var(--mt-color-border);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
}

.mt-menu-sheet__lang-item:hover,
.mt-menu-sheet__lang-item:focus-visible {
  color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary);
  background-color: var(--mt-color-primary-light);
}

.mt-menu-sheet__lang-item.is-active {
  color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  background-color: var(--mt-color-primary-light);
}

/* Prevenir scroll del body cuando el sheet está abierto */
body.mt-menu-sheet-open {
  overflow: hidden;
}

/* ==========================================================================
   CART DRAWER — Panel lateral del carrito
   ========================================================================== */

/* Overlay */
.mt-cart-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  animation: mt-overlay-in 0.25s ease forwards;
}

@keyframes mt-overlay-in {
  to { opacity: 1; }
}

/* Drawer */
.mt-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background-color: var(--mt-color-bg-white);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  /* La sombra, solo abierto: cerrado, el cajón está fuera de la pantalla a
     translateX(100%) y su sombra entraba unos 20 px y dejaba una franja gris en el
     borde derecho de todas las páginas (auditoría de accesibilidad del 14-10, 🟢-1). */
  box-shadow: none;
  /* Contención puntual: cuando está cerrado, translateX(100%) lo desplaza
     el doble de su ancho hacia la derecha del viewport — sin
     overflow-x aquí podría contribuir a scroll horizontal del documento
     (ahora que html/body ya no llevan overflow-x:hidden, ver reset.css). */
  overflow-x: hidden;
}

.mt-cart-drawer.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

/* Offset por la barra de administrador de WordPress */
.admin-bar .mt-cart-drawer {
  top: 32px;
}

.admin-bar .mt-cart-overlay {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .mt-cart-drawer {
    top: 46px;
  }

  .admin-bar .mt-cart-overlay {
    top: 46px;
  }
}

/* Prevenir scroll del body cuando el drawer está abierto */
body.mt-cart-drawer-open {
  overflow: hidden;
}

/* Header del drawer */
.mt-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mt-space-4) var(--mt-space-5);
  border-bottom: 1px solid var(--mt-color-border);
  flex-shrink: 0;
}

.mt-cart-drawer__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-xl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mt-color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
}

.mt-cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* E7 — 44×44 mínimo (antes 36×36): hay espacio de sobra en la cabecera
     del drawer, así que agrandamos la caja visible en lugar de una zona
     táctil invisible. */
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.mt-cart-drawer__close:hover,
.mt-cart-drawer__close:focus-visible {
  color: var(--mt-color-text-primary);
  border-color: var(--mt-color-text-primary);
  background-color: var(--mt-color-bg-subtle);
}

/* Estado carrito vacío */
.mt-cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-4);
  padding: var(--mt-space-8) var(--mt-space-6);
  text-align: center;
  color: var(--mt-color-text-secondary);
}

.mt-cart-drawer__empty-icon {
  opacity: 0.25;
  color: var(--mt-color-text-primary);
}

.mt-cart-drawer__empty-text {
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
}

.mt-cart-drawer__empty-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-3) var(--mt-space-5);
  background-color: var(--mt-color-primary-dark);
  color: #fff;
  /* Bebas Neue, como el resto de CTAs del sitio (mismo motivo que
     .mt-cart-drawer__checkout/__view-cart): sin esto caía en el
     Montserrat heredado del body. */
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wider);
  border-radius: var(--mt-radius-pill);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.mt-cart-drawer__empty-link:hover {
  background-color: var(--mt-color-primary-dark);
}

/* Lista de artículos */
.mt-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--mt-space-2) 0;
}

.mt-cart-drawer__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mt-cart-drawer__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--mt-space-3);
  align-items: start;
  padding: var(--mt-space-4) var(--mt-space-5);
  border-bottom: 1px solid var(--mt-color-border);
  transition: background-color 0.15s ease;
}

.mt-cart-drawer__item:last-child {
  border-bottom: none;
}

.mt-cart-drawer__item:hover {
  background-color: var(--mt-color-bg-subtle);
}

.mt-cart-drawer__item-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--mt-radius-md);
  border: 1px solid var(--mt-color-border);
  background-color: var(--mt-color-bg-subtle);
}

.mt-cart-drawer__item-img--placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--mt-radius-md);
  background-color: var(--mt-color-bg-subtle);
  border: 1px solid var(--mt-color-border);
}

.mt-cart-drawer__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  min-width: 0;
}

.mt-cart-drawer__item-name {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-primary);
  line-height: var(--mt-line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-cart-drawer__item-meta {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
}

.mt-cart-drawer__item-qty {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
}

/* Botones +/− de la línea (revisión de móvil del 14-10). Píldora con borde fino, como el
   selector de cantidad de la ficha; botones de 36 px a la vista que llegan a 44 con el
   pseudoelemento (y 44 de verdad con dedo, más abajo). */
.mt-cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-block: var(--mt-space-1);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  background-color: var(--mt-color-white);
}

.mt-cart-drawer__qty-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-text-heading);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mt-cart-drawer__qty-btn::after {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

.mt-cart-drawer__qty-btn:hover:not(:disabled) {
  background-color: var(--mt-color-primary-light);
  color: var(--mt-color-primary-dark);
}

.mt-cart-drawer__qty-btn:disabled {
  color: var(--mt-color-border);
  cursor: not-allowed;
}

.mt-cart-drawer__qty-value {
  min-width: 2ch;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
  .mt-cart-drawer__qty-btn {
    width: 44px;
    height: 44px;
  }

  .mt-cart-drawer__qty-btn::after {
    content: none;
  }

  /* La papelera: 44 px de caja real con el dedo, no solo de zona invisible. */
  .mt-cart-drawer__item-remove {
    width: 44px;
    height: 44px;
    margin-top: -8px;
    margin-right: -8px;
  }

  .mt-cart-drawer__item-remove::after {
    content: none;
  }
}

.mt-cart-drawer__item-price {
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-bold);
  color: var(--mt-color-primary-dark);
  margin-top: auto;
}

/* Oferta: el tachado en gris y más ligero, como en el carrito y en la ficha */
.mt-cart-drawer__item-price del {
  color: var(--mt-color-text-secondary);
  font-weight: var(--mt-font-weight-regular);
  margin-right: var(--mt-space-1);
}

.mt-cart-drawer__item-price ins {
  text-decoration: none;
}

/* Imagen y nombre enlazan a la ficha del producto */
.mt-cart-drawer__item-img-link {
  display: block;
  flex-shrink: 0;
}

a.mt-cart-drawer__item-name {
  text-decoration: none;
}

a.mt-cart-drawer__item-name:hover {
  color: var(--mt-color-primary-dark);
  text-decoration: underline;
}

.mt-cart-drawer__item-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--mt-color-text-secondary);
  cursor: pointer;
  border-radius: var(--mt-radius-pill);
  transition: color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

/* E7 — área táctil mínima 44×44 sin agrandar el icono visible (28×28) */
.mt-cart-drawer__item-remove::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.mt-cart-drawer__item-remove:hover {
  color: var(--mt-color-error);
  background-color: #fef2f2;
}

.mt-cart-drawer__item-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Loading state */
.mt-cart-drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mt-space-8);
  color: var(--mt-color-text-secondary);
  gap: var(--mt-space-3);
}

.mt-cart-drawer__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--mt-color-border);
  border-top-color: var(--mt-color-primary);
  border-radius: 50%;
  animation: mt-spin 0.7s linear infinite;
}

@keyframes mt-spin {
  to { transform: rotate(360deg); }
}

/* Footer del drawer (totales + CTAs) */
.mt-cart-drawer__footer {
  padding: var(--mt-space-4) var(--mt-space-5);
  border-top: 1px solid var(--mt-color-border);
  background-color: var(--mt-color-bg-white);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-4);
}

.mt-cart-drawer__totals {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
}

.mt-cart-drawer__subtotal,
.mt-cart-drawer__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
}

.mt-cart-drawer__total-row {
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-bold);
  color: var(--mt-color-text-primary);
  padding-top: var(--mt-space-2);
}

.mt-cart-drawer__total-amount {
  color: var(--mt-color-primary-dark);
  font-size: var(--mt-font-size-lg);
}

.mt-cart-drawer__tax {
  margin: 0;
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  text-align: right;
}

/* «Enviament des de 4,80 € · recollida gratuïta» (revisión de móvil del 14-10). */
.mt-cart-drawer__shipping {
  margin: 0;
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-text-secondary);
  text-align: right;
}

.mt-cart-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
}

/* Los dos botones de este cajón iban a 14px y el resto de botones de acción
   del sitio a 16px: «Afegir a la cistella», el de enviar de los formularios y el
   del boletín. El trazo ya era el mismo (0,1em). Ahora solo «Pagar» es más
   grande, y lo es a propósito: es el último paso. */
.mt-cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-3) var(--mt-space-5);
  background-color: var(--mt-color-primary-dark);
  color: #fff;
  /* Bebas Neue (misma familia que "Realitza la comanda" en el checkout),
     no Montserrat heredada del body — peso único 400, sin negrita sintética. */
  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);
  border-radius: var(--mt-radius-pill);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.mt-cart-drawer__checkout:hover {
  background-color: var(--mt-color-primary-dark);
  transform: translateY(-1px);
}

.mt-cart-drawer__view-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mt-space-3) var(--mt-space-5);
  background-color: transparent;
  color: var(--mt-color-text-primary);
  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);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mt-cart-drawer__view-cart:hover {
  border-color: var(--mt-color-text-primary);
  background-color: var(--mt-color-bg-subtle);
}

/* --------------------------------------------------------------------------
   BÚSQUEDA (F6)
   El formulario es el mismo en escritorio y en la hoja del menú móvil
   (searchform.php); solo cambia cómo se presenta.
   -------------------------------------------------------------------------- */

.mt-search {
  display: flex;
  align-items: center;
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-1);
}

.mt-search__input {
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
}

.mt-search__input:focus {
  outline: none;
}

.mt-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--mt-radius-pill);
  background: transparent;
  color: var(--mt-color-text-body);
  cursor: pointer;
}

/* En la hoja del menú móvil hay espacio: siempre desplegado y a todo el ancho. */
.mt-menu-sheet__search {
  padding: 0 var(--mt-container-gutter) var(--mt-space-4);
}

.mt-menu-sheet__search .mt-search__input {
  flex: 1;
  padding-inline: var(--mt-space-3);
  font-size: var(--mt-font-size-base);
}

/* En escritorio el campo NO empuja al resto del header.
   .mt-header__actions es flex-shrink: 0, así que un campo que crece dentro de él
   desplaza el menú entero hacia la izquierda cada vez que el puntero pasa por
   la lupa. Por eso el campo va posicionado encima: se abre hacia la izquierda
   flotando por encima del contenido, y el botón no se mueve ni un píxel.
   Se abre con :hover Y con :focus-within, y las dos cosas hacen falta: sin
   :hover, quien usa el ratón solo puede clicar la lupa, que es el botón
   de enviar, y enviaría una búsqueda vacía; sin :focus-within, quien va con
   teclado no podría llegar nunca. */
@media (min-width: 900px) {
  .mt-header__actions .mt-search {
    position: relative;
    padding: 0;
    border-color: transparent;
    background-color: transparent;
  }

  .mt-header__actions .mt-search__btn {
    position: relative;
    z-index: 1;
    transition: var(--mt-transition-colors);
  }

  .mt-header__actions .mt-search__input {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 40px;
    padding: 0;
    opacity: 0;
    transform: translateY(-50%);
    border-radius: var(--mt-radius-pill);
    background-color: var(--mt-color-white);
    box-shadow: var(--mt-shadow-md);
    /* Mientras está plegado no debe interceptar ningún clic: lo que hay debajo
       es el botón. El teclado llega igual, porque pointer-events no
       afecta al foco. */
    pointer-events: none;
    transition: width 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
  }

  .mt-header__actions .mt-search:hover .mt-search__input,
  .mt-header__actions .mt-search:focus-within .mt-search__input {
    /* El colchón de la derecha deja libre el cuadrado de la lupa, que queda
       flotando por encima del campo. */
    width: 15rem;
    padding: 0 44px 0 var(--mt-space-4);
    opacity: 1;
    pointer-events: auto;
  }

  .mt-header__actions .mt-search:hover .mt-search__btn,
  .mt-header__actions .mt-search:focus-within .mt-search__btn {
    color: var(--mt-color-primary-dark);
  }
}