/* ==========================================================================
   RegaloMadera.es — Maqueta (base Tailwind CSS)
   Este archivo solo cubre lo que Tailwind (Play CDN) no resuelve:
   scroll suave global, overrides de librerías de terceros (Swiper,
   Lightbox2, AOS) y un par de detalles puntuales.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* Los data-aos="fade-left"/"fade-right" (ver assets/js/main.js) empiezan
   desplazados 100px en horizontal y solo vuelven a su sitio cuando entran en
   pantalla. En móvil eso deja las columnas de las filas de dos columnas
   (producto-destacado y personalizacion) asomando por la derecha —medido:
   458px de ancho en un viewport de 390— y la página se puede arrastrar de
   lado.

   El "overflow-x: hidden" en el <body> que había aquí antes no lo evitaba:
   mientras el <html> siga en "visible", el overflow del <body> se propaga al
   viewport y el <body> deja de recortar, así que el desbordamiento seguía
   contando para el ancho del documento.

   Se recorta con "clip" y no con "hidden" a propósito: "hidden" convertiría
   al <html> en contenedor de scroll (el eje vertical pasaría a "auto") y eso
   rompe el position:sticky y el scroll-behavior:smooth de más arriba. "clip"
   recorta sin crear contenedor de scroll, que es justo lo que hace falta.
   La regla "hidden" del <body> se deja como respaldo para navegadores sin
   soporte de "clip" (Safari < 16), donde el comportamiento es el de antes. */
body {
  overflow-x: hidden;
}

html,
body {
  overflow-x: clip;
}

/* Todos los campos de texto llevan "outline-none" + "transition: border-color"
   (login, contacto, checkout, buscador…). Sin un valor de cursor explícito,
   Chrome/Edge en Windows tiene un fallo conocido: al pasar el ratón por un
   campo así, el icono de texto (I-beam) deja de pintarse y el cursor
   "desaparece" hasta moverlo fuera y volver a entrar. Fijar el cursor a
   mano evita que el navegador tenga que resolverlo durante la transición. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
input:not([type]),
textarea {
  cursor: text;
}

/* Fotograma en el que la cabecera pasa de transparente a sólida (o al revés).
   Lo pone y lo quita initHeaderScroll() en assets/js/main.js, donde está
   explicado el porqué: los <a> con href son los únicos elementos del header
   que animan el cambio de color heredado, así que el icono de «Mi cuenta»
   llegaba 300ms tarde. Solo se apaga la transición del color, y solo durante
   ese fotograma, para no tocar ni el hover de los iconos ni la animación de
   alto y fondo del propio header. */
#site-header.rm-header-cambiando a {
  transition-property: transform;
}

/* ---- Subrayado animado en los enlaces del menú ---- */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #C8A26A;
  transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-link:hover::after {
  width: 100%;
}

/* ---- Logo de la cabecera ----
   El alto lo pone la utilidad de Tailwind (h-8 / h-10, que main.js cambia
   al hacer scroll); aquí solo se garantiza que nunca se deforme ni se
   desborde, sobre todo si el logo lo sube un administrador desde el panel
   y llega con su tamaño original. */
.header-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.header-logo img {
  width: auto;
  max-width: min(190px, 45vw);
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* En cualquier página de WooCommerce (tienda, ficha, carrito, mi cuenta…)
   el <body> lleva la clase .woocommerce-page, y su propia hoja trae
   ".woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }".
   Esa regla tiene más especificidad que ".h-8"/".h-10" de Tailwind (un
   elemento "img" de más), así que gana sin importar el orden de carga y el
   logo cae a su tamaño intrínseco del SVG (132×74) en vez de encogerse al
   hacer scroll. Aquí se le devuelve la especificidad que le corresponde,
   respetando cuál de las dos clases haya puesto main.js en cada momento. */
.header-logo img.h-8 { height: 2rem !important; }
.header-logo img.h-10 { height: 2.5rem !important; }
.header-logo img { width: auto !important; }

/* ---- Menú móvil (cajón lateral) ----
   Tailwind (Play CDN) genera las utilidades en el orden en que las
   encuentra en el DOM, así que no es fiable usarlas para alternar
   estados. Todo el cajón se controla desde aquí; lo abre y lo cierra
   initMenuMovil() en assets/js/main.js. */
.menu-movil {
  position: fixed;
  inset: 0;
  /* Por encima del aviso de cookies (1100) y por debajo del buscador y del
     mini-carrito (1150), que se abren desde el propio cajón. */
  z-index: 1120;
  visibility: hidden;
  pointer-events: none;
}

.menu-movil.is-open {
  visibility: visible;
  pointer-events: auto;
}

.menu-movil__fondo {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.menu-movil.is-open .menu-movil__fondo {
  opacity: 1;
}

.menu-movil__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 48px rgba(17, 17, 17, 0.18);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom);
}

.menu-movil.is-open .menu-movil__panel {
  transform: translateX(0);
}

.menu-movil__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.menu-movil__cerrar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 9999px;
  background: transparent;
  color: #111111;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-movil__cerrar:hover {
  background: #111111;
  border-color: #111111;
  color: #fff;
}

/* Zona con scroll propio: el resto del cajón se queda fijo */
.menu-movil__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 24px 24px;
}

.menu-movil__lista,
.menu-movil__lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-movil__lista > li {
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
  /* Cada entrada aparece un poco después que la anterior */
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.menu-movil.is-open .menu-movil__lista > li {
  opacity: 1;
  transform: none;
}

.menu-movil.is-open .menu-movil__lista > li:nth-child(1) { transition-delay: 0.10s; }
.menu-movil.is-open .menu-movil__lista > li:nth-child(2) { transition-delay: 0.15s; }
.menu-movil.is-open .menu-movil__lista > li:nth-child(3) { transition-delay: 0.20s; }
.menu-movil.is-open .menu-movil__lista > li:nth-child(4) { transition-delay: 0.25s; }
.menu-movil.is-open .menu-movil__lista > li:nth-child(5) { transition-delay: 0.30s; }
.menu-movil.is-open .menu-movil__lista > li:nth-child(6) { transition-delay: 0.35s; }
.menu-movil.is-open .menu-movil__lista > li:nth-child(n + 7) { transition-delay: 0.4s; }

.menu-movil__lista > li > a {
  display: block;
  padding: 16px 2px;
  color: #111111;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.3s;
}

.menu-movil__lista > li > a:hover,
.menu-movil__lista > li.current-menu-item > a,
.menu-movil__lista > li.current-menu-ancestor > a {
  color: #C8A26A;
}

/* Marca de la página en la que estás */
.menu-movil__lista > li.current-menu-item > a > span,
.menu-movil__lista > li.current-menu-ancestor > a > span {
  position: relative;
}

.menu-movil__lista > li.current-menu-item > a > span::after,
.menu-movil__lista > li.current-menu-ancestor > a > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: #C8A26A;
}

/* ---- Submenús en acordeón ---- */
.menu-movil__lista li.menu-item-has-children > a {
  /* Deja hueco al botón del acordeón, que lo inyecta main.js */
  padding-right: 44px;
}

.menu-movil__lista li.menu-item-has-children {
  position: relative;
}

.menu-movil__desplegar {
  position: absolute;
  top: 6px;
  right: -6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #6B6B6B;
  font-size: 0.75rem;
  cursor: pointer;
  transition: transform 0.3s, color 0.3s;
}

.menu-movil__desplegar[aria-expanded='true'] {
  transform: rotate(180deg);
  color: #C8A26A;
}

.menu-movil__lista .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.menu-movil__lista .sub-menu.is-open {
  /* Lo ajusta main.js al alto real; este valor es solo el tope */
  max-height: 600px;
}

.menu-movil__lista .sub-menu li a {
  display: block;
  padding: 11px 0 11px 16px;
  border-left: 1px solid rgba(17, 17, 17, 0.1);
  margin-left: 2px;
  color: #6B6B6B;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}

.menu-movil__lista .sub-menu li:last-child a {
  padding-bottom: 16px;
}

.menu-movil__lista .sub-menu li a:hover,
.menu-movil__lista .sub-menu li.current-menu-item a {
  color: #C8A26A;
  border-color: #C8A26A;
}

/* ---- Pie del cajón: accesos, contacto y redes ---- */
.menu-movil__pie {
  flex: 0 0 auto;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  background: #FAF8F5;
  padding: 18px 24px 22px;
}

.menu-movil__acciones {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.menu-movil__accion {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 12px;
  background: #fff;
  color: #111111;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-movil__accion i {
  font-size: 0.9375rem;
  color: #C8A26A;
  transition: color 0.3s;
}

.menu-movil__accion:hover {
  background: #111111;
  border-color: #111111;
  color: #fff;
}

.menu-movil__accion:hover i {
  color: #fff;
}

.menu-movil__contador {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #C8A26A;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.menu-movil__contacto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.menu-movil__contacto a,
.menu-movil__contacto p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #6B6B6B;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color 0.3s;
}

.menu-movil__contacto a:hover {
  color: #C8A26A;
}

.menu-movil__contacto i {
  width: 14px;
  color: #C8A26A;
  font-size: 0.75rem;
  text-align: center;
}

.menu-movil__redes {
  display: flex;
  gap: 10px;
}

.menu-movil__redes a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 9999px;
  color: #111111;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: all 0.3s;
}

.menu-movil__redes a:hover {
  background: #C8A26A;
  border-color: #C8A26A;
  color: #fff;
  transform: translateY(-2px);
}

/* Con el cajón abierto, el fondo no se mueve */
body.menu-movil-abierto {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .menu-movil__panel,
  .menu-movil__fondo,
  .menu-movil__lista > li,
  .menu-movil__lista .sub-menu {
    transition: none;
  }
}

#nav-toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

#nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

#nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Acordeón de la ficha de producto ----
   Tailwind no puede quitar el triángulo nativo de <summary> en WebKit. */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

/* ---- Swiper (testimonios) ---- */
.testimonios-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.testimonios-swiper .swiper-pagination-bullet-active {
  background: #C8A26A;
}

.testimonios-swiper .swiper-button-next,
.testimonios-swiper .swiper-button-prev {
  color: #C8A26A;
  transform: scale(0.6);
}

.testimonios-swiper {
  padding-bottom: 50px;
}

/* ---- Lightbox2: visor de la galería de producto ---- */
/*
 * Lightbox2 2.11.4 dimensiona los SVG en una rama aparte de lightbox.js
 * ("if (filetype === 'svg')") que, en las imágenes más altas que anchas,
 * calcula el ancho como maxImageHeight / aspectRatio en lugar de
 * maxImageHeight * aspectRatio. Dividir por un número menor que 1 agranda:
 * en una pantalla de 390px, una pieza de proporción 0,82 salía a 883px de
 * ancho, con la imagen fuera de pantalla y la X de cerrar y las flechas
 * donde no se podían tocar. Las fichas usan SVG verticales, así que le
 * pasaba a todas las piezas.
 *
 * No se puede corregir con las opciones del plugin porque esa rama no mira
 * maxWidth ni maxHeight (sí lo hace la de imágenes de mapa de bits). Se
 * acota aquí, que además cubre cualquier otra imagen que se desmadre, y con
 * !important porque los tamaños los escribe el propio plugin en el atributo
 * style de cada elemento.
 *
 * Los 140px que se restan al alto son el hueco de la barra inferior del
 * visor (título, contador y cerrar) más el margen superior, para que esos
 * controles queden siempre dentro de la pantalla.
 */
#lightbox .lb-image {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 140px) !important;
  object-fit: contain;
}
#lightbox .lb-outerContainer,
#lightbox .lb-dataContainer {
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
}
#lightbox .lb-outerContainer {
  height: auto !important;
}
/* El contenedor deja de tener el ancho fijo que le pone el plugin, así que
   la imagen manda: sin esto el bloque se quedaba encogido a los 250px del
   CSS de fábrica mientras cargaba. */
#lightbox .lb-container {
  display: inline-block;
}
/* Las flechas de pasar foto vienen a opacity:0 y solo se destapan con
   :hover, que en una pantalla táctil no ocurre nunca: en el móvil no había
   manera de pasar de una imagen a otra dentro del visor. En punteros
   gruesos se dejan siempre a la vista. */
@media (hover: none), (pointer: coarse) {
  #lightbox .lb-nav a.lb-prev,
  #lightbox .lb-nav a.lb-next {
    opacity: 0.9;
  }
}
.lb-data .lb-caption {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ---- AOS: evita saltos de layout antes de inicializar ---- */
[data-aos] {
  transition-property: transform, opacity;
}

/* ---- Mini-carrito lateral ----
   En CSS propio y no con utilidades de Tailwind porque el panel se abre
   y cierra por JS: así el estado no depende de que el CDN haya generado
   la clase en el momento justo. */
.mini-carrito {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}

.mini-carrito.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mini-carrito__fondo {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.mini-carrito.is-open .mini-carrito__fondo { opacity: 1; }

.mini-carrito__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: -18px 0 40px rgba(17, 17, 17, 0.12);
}

.mini-carrito.is-open .mini-carrito__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .mini-carrito__fondo,
  .mini-carrito__panel { transition: none; }
}

/* ---- Cifra del 404 ----
   Se lee como un grabado sobre la madera: mismo tono quemado que usa la
   ficha de producto sobre maderas claras, con un reflejo por debajo.
   El tamaño va en clamp() porque supera lo que cubren las utilidades.
   La transparencia va en el propio color y no en `opacity` porque AOS
   controla esa propiedad para su animación de entrada. */
.grabado-404 {
  font-size: clamp(6rem, 18vw, 11rem);
  letter-spacing: 0.06em;
  color: rgba(51, 32, 15, 0.38);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---- Páginas legales ----
   Un solo estilo de prosa para las cinco, en vez de repetir utilidades
   en cada párrafo. */
.prose-legal { color: #111; font-size: 0.95rem; line-height: 1.75; }
.prose-legal > * + * { margin-top: 1.1em; }

.prose-legal h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin-top: 2.6em;
  margin-bottom: 0.2em;
  scroll-margin-top: 100px;
}

.prose-legal h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.8em;
  margin-bottom: 0.2em;
}

.prose-legal p,
.prose-legal li { color: #4a4a4a; }

.prose-legal strong { color: #111; font-weight: 500; }

.prose-legal ul,
.prose-legal ol { padding-left: 1.4em; }
.prose-legal ul { list-style: disc; }
.prose-legal ol { list-style: decimal; }
.prose-legal li + li { margin-top: 0.45em; }

.prose-legal a { color: #C8A26A; text-decoration: underline; text-underline-offset: 2px; }

.prose-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 1.2em;
}
.prose-legal th {
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(17,17,17,.12);
}
.prose-legal td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,17,17,.07);
  color: #4a4a4a;
  vertical-align: top;
}

/* Dato que solo conoce el titular del negocio */
.dato-pendiente {
  background: #FBF3E4;
  border-bottom: 1px dashed #C8A26A;
  color: #8A6B45;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---- Banner de cookies ---- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: #fff;
  border-top: 1px solid rgba(17,17,17,.1);
  box-shadow: 0 -12px 32px rgba(17,17,17,.09);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cookie-banner.is-open { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* ---- Buscador ----
   Mismo motivo que el mini-carrito: lo abre y cierra JS, así que el estado
   va en CSS propio y no en utilidades que el CDN podría no haber generado.
   Baja desde arriba para no tapar la cabecera de golpe. */
.buscador {
  position: fixed;
  inset: 0;
  z-index: 1150;
  visibility: hidden;
  pointer-events: none;
}

.buscador.is-open {
  visibility: visible;
  pointer-events: auto;
}

.buscador__fondo {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.buscador.is-open .buscador__fondo { opacity: 1; }

.buscador__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
}

.buscador.is-open .buscador__panel { transform: translateY(0); }

/* El aspa nativa del type="search" se solapa con nuestro botón de cerrar. */
#buscador-input::-webkit-search-cancel-button { display: none; }

/* La palabra buscada, resaltada dentro de cada resultado. */
.buscador mark {
  background: transparent;
  color: #C8A26A;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .buscador__fondo,
  .buscador__panel { transition: none; }
}

/* ---- Área de cuenta ----
   Mismo motivo que el menú móvil y el mini-carrito: estos estados los
   alterna el JS, así que no dependen de que el CDN de Tailwind haya
   generado la utilidad justo cuando hace falta. */
.cuenta-tab {
  color: #6B6B6B;
}

.cuenta-tab[aria-selected='true'] {
  background: #fff;
  color: #111111;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08);
}

.cuenta-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  color: #6B6B6B;
  transition: background 0.25s ease, color 0.25s ease;
}

.cuenta-nav:hover {
  background: rgba(232, 226, 214, 0.5);
  color: #111111;
}

.cuenta-nav.is-activa {
  background: #111111;
  color: #fff;
}

.cuenta-nav.is-activa i {
  color: #C8A26A;
}

/* Aviso de "guardado" flotante */
.cuenta-aviso {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 24px);
  z-index: 1150;
  background: #111111;
  color: #fff;
  font-size: 0.875rem;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cuenta-aviso.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .cuenta-aviso { transition: none; }
}

/* ==========================================================================
   Añadidos propios de WordPress
   La maqueta no tiene barra de administración, ni menús generados por
   wp_nav_menu, ni el marcado de WooCommerce. Todo eso se ajusta aquí para
   que encaje con lo que ya define Tailwind, sin tocar las reglas de arriba
   (copiadas tal cual de maqueta/assets/css/styles.css).
   ========================================================================== */

/* ---- Barra de administración ----
   La cabecera es fixed, así que con sesión iniciada hay que bajarla los
   32px (46 en móvil) que ocupa la barra de WordPress. Lo mismo le pasaba al
   panel del mini-carrito y al del buscador: son overlays fixed a pantalla
   completa (inset:0) con su panel en top:0, y la barra de WordPress
   (z-index 99999, por encima de los 1100/1150 de estos overlays) les tapaba
   la cabecera (título, botón de cerrar) por arriba. Mismo ajuste que la
   cabecera, con el mini-carrito recortando además su alto para no acabar
   asomando 32/46px por debajo de la pantalla. */
.admin-bar #site-header {
  top: 32px;
}

.admin-bar .mini-carrito__panel {
  top: 32px;
  height: calc(100% - 32px);
}

.admin-bar .buscador__panel {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar #site-header {
    top: 46px;
  }

  .admin-bar .mini-carrito__panel {
    top: 46px;
    height: calc(100% - 46px);
  }

  .admin-bar .buscador__panel {
    top: 46px;
  }
}

/* ---- Columnas pegajosas (filtros, resumen del carrito, menú de la cuenta…)
   Todas paran a la misma altura: el alto de la cabecera sólida (68px) más un
   respiro. Es una variable porque con la barra de WordPress la cabecera baja
   32px, y sin esto las columnas se quedaban por debajo de ella y asomaban
   cortadas por arriba. */
:root {
  --rm-sticky: 96px;
}

.admin-bar {
  --rm-sticky: 128px;
}

@media (min-width: 1024px) {
  .rm-sticky {
    position: sticky;
    top: var(--rm-sticky);
  }
}

/* ---- Avisos de acceso a «Mi cuenta» ----
   En login, registro y recuperar contraseña, WooCommerce imprime sus avisos
   fuera de la plantilla, como primer hijo de <main>: ahí la cabecera fija
   los tapaba enteros, así que un «contraseña incorrecta» no se veía. Se les
   da el ancho y el margen superior del resto de la página, y cuando hay
   aviso la sección de debajo deja de repetir ese margen.
   El selector pide que .woocommerce cuelgue directamente de <main>, que es
   justo el caso sin sesión iniciada; con sesión, la plantilla de la página
   ya envuelve todo en su propia <section> con su padding. */
main > .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
  max-width: 1180px;
  margin: 0 auto;
  padding: 120px 32px 0;
}

main > .woocommerce:has(> .woocommerce-notices-wrapper:not(:empty)) > section {
  padding-top: 28px;
}

/* ---- Accesibilidad ----
   WordPress y WooCommerce emiten .screen-reader-text por su cuenta; le damos
   el mismo comportamiento que .sr-only de Tailwind. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rm-saltar:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 12px 20px;
  border-radius: 9999px;
  background: #111111;
  color: #fff;
  font-size: 0.875rem;
}

/* ---- WooCommerce: precios ----
   El precio tachado del producto en oferta, igual que en la maqueta. */
.rm-precio del {
  color: #6B6B6B;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  margin-left: 10px;
}

.rm-precio ins {
  text-decoration: none;
}

/* WooCommerce imprime el precio rebajado como "<del>antes</del>
   <ins>ahora</ins>"; la maqueta lo lee al revés: primero lo que se paga y
   detrás, tachado, lo que costaba. Se reordena con flex en vez de tocar el
   marcado para no perder los <span class="screen-reader-text"> con los que
   WooCommerce lo cuenta a los lectores de pantalla. */
/* En un producto simple, get_price_html() devuelve el <del> y el <ins>
   sueltos; en una variación vienen envueltos en un <span class="price">. Se
   contemplan los dos casos. */
.rm-precio,
.rm-precio .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.rm-precio ins,
.rm-precio .price ins { order: 1; }
.rm-precio del,
.rm-precio .price del { order: 2; }

/* Precio de la variación. Ya se escribe arriba, en .rm-precio, desde
   initVariacionMadera(): el bloque propio de WooCommerce enseñaba el mismo
   importe por segunda vez, sin estilo y metido entre las muestras de madera y
   el grabado. */
.woocommerce-variation-price { display: none; }

/* ---- Carrito: líneas, cantidad y resumen ----
   El marcado lo pintan woocommerce/cart/*.php con clases de Tailwind
   (calcadas de la maqueta); aquí solo va lo que Tailwind no cubre. */

/* Selector de cantidad de las líneas (−  2  +) */
.rm-cant .qty {
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.rm-cant .qty::-webkit-outer-spin-button,
.rm-cant .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Línea a la espera de respuesta del servidor */
.rm-linea-ocupada {
  opacity: 0.45;
  pointer-events: none;
}

/* El shortcode [woocommerce_cart] envuelve su salida en un .woocommerce, así
   que la rejilla de dos columnas se quedaba con un único hijo. Con
   display:contents las dos columnas reales vuelven a ser hijas de la rejilla. */
.rm-carrito > .woocommerce {
  display: contents;
}
.rm-carrito .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
/* Sin avisos que mostrar no debe ocupar una fila (ni su gap). */
.rm-carrito .woocommerce-notices-wrapper:empty {
  display: none;
}
/* WooCommerce flota el resumen y lo deja al 48% (maquetación de dos columnas
   propia); aquí la columna ya la da la rejilla, así que ocupa todo el ancho. */
.woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}

/* Filas del resumen: siguen siendo <table> porque el bloque de envío lo
   imprime WooCommerce como <tr>, pero se ven como las filas planas de la
   maqueta. */
.rm-resumen,
.rm-resumen tbody,
.rm-resumen tr {
  display: block;
  width: 100%;
}
.rm-resumen tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
/* WooCommerce raya cada fila del resumen (.cart_totals tr th|td, 0-4-1). En la
   maqueta el único filete es el que cierra el grupo, ya puesto en la <table>. */
.woocommerce-cart .cart-collaterals .cart_totals .rm-resumen tr th,
.woocommerce-cart .cart-collaterals .cart_totals .rm-resumen tr td,
.woocommerce-checkout .cart-collaterals .cart_totals .rm-resumen tr th,
.woocommerce-checkout .cart-collaterals .cart_totals .rm-resumen tr td {
  border-top: 0;
}
.rm-resumen th {
  font-weight: 400;
  color: #6B6B6B;
  text-align: left;
  padding: 0;
}
.rm-resumen td {
  padding: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rm-resumen .cart-discount th,
.rm-resumen .cart-discount td { color: #C8A26A; }
.rm-resumen ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rm-resumen ul#shipping_method li { margin-bottom: 4px; }
.rm-resumen .woocommerce-shipping-destination,
.rm-resumen .shipping-calculator-button {
  font-size: 0.75rem;
  color: #6B6B6B;
}

/* ==========================================================================
   WooCommerce — elementos que el propio WooCommerce genera (avisos,
   formularios de checkout/cuenta, tablas de carrito) y que no pasan por
   ninguna plantilla propia, así que no llevan clases de Tailwind. Colores y
   tipografía calcados de assets/css/tokens.css / la paleta de la maqueta.
   ========================================================================== */

/* ---- Avisos (añadido al carrito, errores de formulario, cupón…) ----
   Marcado del propio WooCommerce, sin plantilla propia: .woocommerce-message
   y .woocommerce-info son un <div> por aviso, pero .woocommerce-error es un
   único <ul> con un <li> por error (varios a la vez en el checkout). Woo
   coloca su propio icono con ::before en posición absoluta esperando el
   padding-left de 3.5em de su hoja de estilos; al cambiar aquí el padding
   sin tocar esa posición absoluta, el icono quedaba flotando encima del
   texto. La solución es la suya: caja en bloque con el padding izquierdo
   reservado para el icono, que va absoluto dentro de ese hueco. Así el
   texto nunca lo pisa aunque ocupe varias líneas, y —a diferencia de una
   rejilla— el texto suelto y el enlace que lo acompaña (el aviso del cupón
   es «¿Tienes un cupón? <a>Haz clic aquí…</a>») siguen leyéndose seguidos:
   en grid cada uno era un ítem distinto y el enlace saltaba de fila. Por el
   mismo motivo tampoco vale display:flex en el aviso entero para mandar el
   botón siempre abajo con order (probado y descartado): flex trata cada
   elemento hijo como su propio ítem, así que el enlace del cupón se separaba
   del texto igual que en grid. La solución que no rompe ninguno de los dos
   casos es sacar solo el botón del flujo con position:absolute anclado
   abajo del aviso (ver más abajo): el texto de alrededor —le siga o le
   preceda en el HTML— fluye como si el botón no estuviera ahí, y el botón
   siempre queda pegado abajo del todo. El :has() de más abajo solo añade
   sitio para él cuando existe; los avisos sin botón se quedan igual de
   compactos que siempre.
   border-top-color, el icono y el botón llevan !important porque
   WooCommerce los pinta con selectores igual de específicos (p. ej.
   ".woocommerce a.button" empata con ".woocommerce-info a.button" en
   especificidad) y gana el que cargue después; el tema no controla ese
   orden, así que aquí el !important es la herramienta correcta. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: block !important;
  position: relative;
  list-style: none;
  width: auto;
  margin: 0 0 24px;
  /* El padding izquierdo es el hueco del icono. */
  padding: 16px 20px 16px 48px;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  background: #E8E2D6;
  color: #111111;
  border-top-color: #C8A26A !important;
}
/* Solo cuando el aviso trae botón: hueco abajo para que quepa sin pisar el
   texto de encima (se coloca con position:absolute, ver la regla del
   .button). */
.woocommerce-message:has(.button),
.woocommerce-error:has(.button),
.woocommerce-info:has(.button) {
  padding-bottom: 60px;
}
.woocommerce-message::after,
.woocommerce-error::after,
.woocommerce-info::after { content: none !important; }
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  position: absolute !important;
  top: 16px !important;
  left: 20px !important;
  margin-top: 0.15em;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: #C8A26A !important;
}
/* Sustituye el icono propio de WooCommerce (fuente "WooCommerce", tres
   glifos distintos por tipo de aviso) por Font Awesome, ya cargado en todo
   el sitio: check para "mensaje" (añadido al carrito, cupón aplicado...),
   circulo-info para "info" y circulo-exclamación para "error", el mismo
   icono que ya usa la maqueta en sus propios estados de error. */
.woocommerce-message::before { content: "\f058" !important; }
.woocommerce-info::before { content: "\f05a" !important; }
.woocommerce-error {
  background: #FBEAEA;
  color: #8a1f1f;
  border-top-color: #8a1f1f !important;
}
.woocommerce-error::before {
  content: "\f06a" !important;
  color: #8a1f1f !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
/* position:absolute (no order/flex, ver el porqué en el comentario de más
   arriba) para que el botón quede siempre pegado abajo del todo, le siga o
   le preceda el texto en el HTML de WooCommerce: al sacarlo del flujo, el
   texto de alrededor fluye seguido como si no estuviera. */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
  position: absolute !important;
  left: 48px;
  bottom: 16px;
  float: none !important;
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 8px 18px;
  border-radius: 9999px;
  background: #111111 !important;
  color: #fff !important;
  font-size: 0.8125rem;
  text-decoration: none;
}

/* ---- Disponibilidad (ficha de producto) ----
   wc_get_stock_html() lo imprime justo encima de "Añadir al carrito"
   (WooCommerce, single-product/add-to-cart/simple.php). El texto lo genera
   regalomadera_texto_disponibilidad() en inc/tienda.php: cuántas unidades
   hay ya hechas y, si el producto admite pedidos por encima del stock,
   cuánto tardaría fabricar el resto. */
.stock {
  display: block;
  float: none;
  margin: 0 0 20px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111111;
}
.stock i { color: #C8A26A; margin-right: 6px; }
.rm-stock-nota {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: #6B6B6B;
}
/* Pocas unidades: la exclamación del texto ya avisa, aquí solo se refuerza
   con negrita (sin salirse de la paleta ink/gold/beige/graytxt). */
.stock.rm-stock-bajo { font-weight: 600; }
/* Agotado del todo y sin admitir pedidos por encima del stock. */
.stock.out-of-stock { color: #8a1f1f; }
.stock.out-of-stock i { color: #8a1f1f; }

/* ---- Cantidad (ficha de producto, carrito) ---- */
.quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, 0.15);
  border-radius: 9999px;
}
/* El input de cantidad de WooCommerce llega con class="input-text qty text",
   así que le cae encima la regla genérica de formularios de más abajo
   (".woocommerce form input.input-text", 0-2-2) que gana a ".quantity .qty"
   (0-2-0): heredaba borde, padding 14px 16px y width 100%. Con solo ~19px
   útiles y los spinners nativos de type="number", el número quedaba fuera de
   la caja y el selector se veía vacío. Se sube la especificidad al mismo
   nivel y se quitan los spinners. */
.quantity .qty,
.woocommerce form .quantity input.input-text,
.woocommerce .quantity input.qty {
  width: 44px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Sin flechas nativas: el alto y el ancho los marcan los botones − / + */
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Miniaturas de la galería ----
   wp_get_attachment_image() imprime width/height reales en el <img>, y los
   SVG de las fichas los declaran de 1×1: con la regla de WooCommerce
   ".woocommerce img { height: auto; max-width: 100% }", las miniaturas
   quedaban en un píxel de alto y se veían como tres rayitas bajo la imagen
   grande. Se les da el cuadrado de la maqueta y que la imagen lo llene. */
.rm-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Selector de variaciones (madera) ---- */
table.variations {
  width: 100%;
  margin-bottom: 28px;
}
table.variations tbody,
table.variations tr { display: block; }
/* Es un <th>, y los <th> vienen centrados de fábrica: sin esto el rótulo
   «TIPO DE MADERA» salía en el centro de la columna y todo lo de debajo
   (desplegable, grabado, botón) quedaba desalineado respecto al resto de la
   ficha, que va a la izquierda. */
table.variations .label {
  display: block;
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6B6B6B;
  margin-bottom: 12px;
}
table.variations .label label {
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}
/* La madera elegida al lado del rótulo («TIPO DE MADERA — NOGAL»), como en
   maqueta/componentes/producto-ficha.html. La añade initMuestrasMadera(). */
.rm-madera-elegida {
  color: #111111;
  font-weight: 500;
}
table.variations .value {
  display: block;
}
table.variations select {
  width: 100%;
  max-width: 320px;
  border: 1px solid rgba(17, 17, 17, 0.15);
  border-radius: 9999px;
  background: #fff;
  padding: 12px 20px;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}
table.variations select:focus { border-color: #C8A26A; }

/* ---- Muestras de madera ----
   Los círculos de veta de la maqueta. Los imprime
   regalomadera_muestras_madera() (inc/tienda.php) detrás del <select> real, y
   initMuestrasMadera() los destapa y esconde el desplegable. El <select>
   sigue en el marcado (es quien manda), solo deja de verse: por eso se oculta
   la celda entera con .rm-con-muestras y no se toca el marcado. */
.rm-muestras {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rm-con-muestras { position: relative; }
.rm-con-muestras > select,
.rm-con-muestras > .reset_variations {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rm-muestra {
  display: block;
  width: 56px;
  height: 56px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 9999px;
  background: none;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s;
}
.rm-muestra:hover { transform: translateY(-2px); }
.rm-muestra-color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}
.rm-muestra-activa { border-color: #C8A26A; }
.rm-muestra:focus-visible {
  outline: 2px solid #C8A26A;
  outline-offset: 2px;
}

.woocommerce-variation-add-to-cart .reset_variations,
table.variations .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: #6B6B6B;
  text-decoration: underline;
}
.woocommerce-variation-availability { margin-bottom: 16px; font-size: 0.875rem; }

/* ---- Botón añadir al carrito ---- */
/* WooCommerce fuerza el morado de marca con
   ".woocommerce button.button.alt" (especificidad 0,3,1), activo siempre en
   temas clásicos (wc_block_theme_has_styles_for_element() exige
   wp_is_block_theme(), que aquí es falso). Se necesita una clase más
   (0,4,0) para ganar, no basta con igualar .button.alt. */
.woocommerce .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt,
.woocommerce .checkout-button,
.woocommerce .checkout-button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 9999px;
  background: #111111;
  color: #fff;
  padding: 16px 36px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.3s;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce .checkout-button.button.alt:hover {
  background: #C8A26A;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(200, 162, 106, 0.35);
}
/* Estado desactivado. En un producto variable, wc-add-to-cart-variation.js le
   pone al botón ".disabled wc-variation-selection-needed" mientras no se ha
   elegido madera, y ahí WooCommerce vuelve a pintar el morado de marca con
   reglas que ganaban a las de arriba:
     ".woocommerce button.button.alt.disabled"              → 0,4,1
     ".woocommerce button.button.alt:disabled[disabled]"    → 0,5,1
   Es el botón morado que se veía al entrar en la ficha, antes de tocar nada.
   Estas reglas llegan a 0,6,1 (una clase más que la peor de las suyas) para
   que el botón sea siempre el negro de la maqueta, solo que atenuado. */
.woocommerce button.single_add_to_cart_button.button.alt.disabled,
.woocommerce button.single_add_to_cart_button.button.alt:disabled,
.woocommerce button.single_add_to_cart_button.button.alt:disabled[disabled],
.woocommerce .single_add_to_cart_button.disabled,
.woocommerce .single_add_to_cart_button:disabled {
  background: #111111;
  color: #ffffff;
  opacity: 0.45;
  cursor: not-allowed;
}
/* Sin el subidón dorado mientras está desactivado: prometía algo que no iba
   a pasar al pulsar. */
.woocommerce button.single_add_to_cart_button.button.alt.disabled:hover,
.woocommerce button.single_add_to_cart_button.button.alt:disabled:hover,
.woocommerce button.single_add_to_cart_button.button.alt:disabled[disabled]:hover,
.woocommerce .single_add_to_cart_button.disabled:hover,
.woocommerce .single_add_to_cart_button:disabled:hover {
  background: #111111;
  transform: none;
  box-shadow: none;
}

/* Icono de bolsa, como en la maqueta. Va en CSS y no en el marcado porque
   WooCommerce imprime el texto del botón con esc_html(): cualquier <i> que
   se cuele por el filtro del texto saldría escapado y visible como código. */
.woocommerce .single_add_to_cart_button::before {
  content: "\f290"; /* fa-bag-shopping */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9375rem;
  line-height: 1;
}
/* ---- Fila de compra: cantidad + «Añadir al carrito» ----
   Antes el flex se le ponía al propio form.cart, y eso solo funcionaba en los
   productos simples: en un producto variable el botón cuelga de
   .woocommerce-variation-add-to-cart, así que el form solo veía la tabla de
   variaciones y el envoltorio de la variación, y la cantidad y el botón
   salían uno debajo del otro con el botón a todo el ancho. Ahora la fila la
   marca .rm-compra, que envuelve exactamente ese par en las dos plantillas
   (ver los ganchos woocommerce_before_add_to_cart_quantity /
   woocommerce_after_add_to_cart_button en inc/tienda.php). */
form.cart { margin-bottom: 20px; }
.rm-compra {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 20px;
}
.rm-compra .quantity { flex: 0 0 auto; }
.rm-compra .single_add_to_cart_button { flex: 1; min-width: 220px; }

/* En móvil ese min-width de 220px no cabe: el ancho útil de la fila es de
   unos 296px a 360px de viewport, y el selector de cantidad ocupa 134 (tres
   cajas de 44px). 134 + 16 de hueco + 220 = 370, así que el flex-wrap
   bajaba el botón a su propia línea y quedaba desalineado con la cantidad.
   Se estrecha el par —cantidad de 36px por caja y botón sin suelo de ancho—
   para que sigan en la misma fila, como en la maqueta. */
@media (max-width: 480px) {
  .rm-compra {
    gap: 10px;
    flex-wrap: nowrap;
  }
  .rm-compra .quantity { flex: 0 0 auto; }
  .rm-compra .rm-cant-menos,
  .rm-compra .rm-cant-mas {
    width: 36px;
  }
  .rm-compra .quantity .qty,
  .woocommerce form .rm-compra .quantity input.input-text,
  .woocommerce .rm-compra .quantity input.qty {
    width: 34px;
  }
  .rm-compra .single_add_to_cart_button {
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

/* ---- Botones genéricos de WooCommerce ----
   Todo .button que no sea el principal (aplicar cupón, actualizar carrito,
   «Ver carrito» tras añadir, botones de los estados vacíos…) se quedaba con
   el estilo de fábrica: fondo lavanda #e9e6ed, texto gris, radio de 3px y
   negrita, y al pasar por encima iba a #dcd7e2, todavía más morado. Ese es
   el «cambio de estado morado» que se veía.

   Aquí se les da el botón secundario de la maqueta (.btn-outline-dark):
   contorno negro sobre transparente y, al pasar por encima, negro relleno.
   Se excluyen con :not() los que ya tienen su propio estilo para no
   pisarlos. */
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button),
.woocommerce a.button:not(.alt):not(.checkout-button),
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce input.button:not(.alt) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #111111;
  border-radius: 9999px;
  background: transparent;
  color: #111111;
  padding: 12px 26px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):hover,
.woocommerce a.button:not(.alt):not(.checkout-button):hover,
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button):hover,
.woocommerce input.button:not(.alt):hover {
  background: #111111;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---- Formularios de WooCommerce (checkout, mi cuenta, direcciones) ---- */
/* woocommerce.css le pone a form.login/form.register una tarjeta con borde
   y margen (ver assets/css/woocommerce.css, ".woocommerce form.login"): no
   está en la maqueta (maqueta/componentes/cuenta-acceso.html), donde los
   campos van sueltos sobre el fondo blanco. Se anula aqui para que
   woocommerce/myaccount/form-login.php se vea igual que la maqueta. */
.woocommerce form.login,
.woocommerce form.register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6B6B6B;
  margin-bottom: 8px;
}
/* La regla de arriba es para las etiquetas que van encima de un campo. Las
   que envuelven una casilla («Añadir envoltorio de regalo», «¿Crear una
   cuenta?», las condiciones…) son texto corriente que se lee al lado de la
   casilla, así que se les quita la versalita. Hace falta un selector con al
   menos la misma especificidad (0-2-1) para ganarle, porque las utilidades
   de Tailwind del marcado son de una sola clase y pierden. */
.woocommerce form label.woocommerce-form__label-for-checkbox,
.woocommerce form label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
  color: #111111;
  margin-bottom: 0;
}
/* La tarjeta del grabado va dentro de form.cart, así que le caía encima esa
   misma regla de ".woocommerce form label" (0-2-1) y le ganaba a las clases
   de Tailwind del marcado, que son de una sola: el título «¿Quieres grabar el
   nombre?» salía en versalita gris de 12 px, y los nombres de las tipografías
   («Clásica», «Moderna», «Manuscrita») también, en mayúsculas y con 2 px de
   espaciado, de modo que las tres se veían igual y no se apreciaba la letra
   que se estaba eligiendo. Aquí se devuelven a texto corriente para que cada
   una se lea con su propia tipografía, como en la maqueta. El rótulo «Texto»
   sí es una etiqueta sobre un campo y conserva la versalita. */
.woocommerce form .rm-grabado label {
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;
}
.woocommerce form .rm-grabado label[for="grabado-activo"] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.woocommerce form .rm-grabado label[for="grabado-texto"] {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6B6B6B;
  margin-bottom: 8px;
}

.woocommerce form .required { color: #C8A26A; text-decoration: none; }
/* WooCommerce pinta sus campos con variables propias
   (".woocommerce form .form-row .input-text", 0-3-1). Redefinirlas aquí es
   lo que hace que todo lo suyo —campos nativos y también los desplegables de
   select2— quede con el borde y el radio de la maqueta sin pelear por
   especificidad. base.css se carga después que woocommerce.css, así que a
   igualdad de :root gana esta. */
:root {
  --wc-form-border-color: rgba(17, 17, 17, 0.15);
  --wc-form-border-radius: 12px;
  --wc-form-border-width: 1px;
  --wc-form-color-background: #fff;
}
.woocommerce form input.input-text,
.woocommerce form textarea,
.woocommerce form select,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"],
/* El relleno lo trae escrito a mano (padding:.5em), no en una variable, así
   que hay que ganarle por especificidad a ".woocommerce form .form-row
   .input-text" (0-3-1). De ahí que aquí se nombren las tres clases y además
   el elemento: .input-text es imprescindible, porque sin ella el selector se
   queda en 0-2-2 y pierde (el <textarea> de las notas del pedido se quedaba
   con el relleno de WooCommerce por esto). El select no lleva .input-text en
   el marcado de WooCommerce, pero su regla es 0-2-2 igual que esta y esta
   hoja carga después, así que gana por orden. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select {
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.15);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.3s;
  font-family: inherit;
}
.woocommerce form input.input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus,
/* Igual que arriba, con .input-text incluida, para que el dorado del foco le
   gane al borde que pinta WooCommerce. */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: #C8A26A;
}
.woocommerce form .woocommerce-input-wrapper { display: block; }

/* ---- Rejilla de los formularios de dirección ----
   La maqueta coloca estos campos en dos columnas con 16px de separación
   (#mc-dir-form en maqueta/componentes/mi-cuenta.html y el bloque de envío de
   checkout-form.html). WooCommerce lo resuelve flotando las filas al 47%
   (".woocommerce form .form-row-first", 0-2-1), que aquí sobra y además
   descuadra los anchos: dentro de una rejilla el float se ignora pero el
   47% no, así que los campos salían estrechos.

   Se usa una rejilla de verdad y se anulan ancho y float. Los selectores
   nombran el contenedor para llegar a 0-3-1 y ganarle a WooCommerce. Qué
   campo va emparejado y cuál a lo ancho lo decide el propio marcado
   (form-row-first / -last / -wide), que se ajusta en inc/checkout.php. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
.woocommerce form .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce form .woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce form .woocommerce-address-fields__field-wrapper .form-row {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}
.woocommerce form .woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce form .woocommerce-shipping-fields__field-wrapper .form-row-wide,
.woocommerce form .woocommerce-address-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}
.select2-container .select2-selection--single {
  height: auto !important;
  border: 1px solid rgba(17, 17, 17, 0.15) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.select2-container .select2-selection__rendered { padding: 0 !important; line-height: 1.2 !important; }
.select2-container .select2-selection__arrow { height: 100% !important; }

/* ---- Tablas (carrito, checkout, pedidos) ---- */
.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.shop_table th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6B6B6B;
  font-weight: 600;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}
.shop_table td {
  padding: 20px 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
  vertical-align: middle;
}
.shop_table .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
}
.shop_table .product-remove a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #6B6B6B;
  text-decoration: none;
  font-size: 1.125rem;
  transition: all 0.3s;
}
.shop_table .product-remove a:hover { background: #E8E2D6; color: #C8A26A; }
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* ---- Checkout: métodos de envío y de pago ---- */
ul.wc_payment_methods,
ul.shipping_method {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
ul.wc_payment_methods > li,
ul.shipping_method > li {
  border: 1px solid rgba(17, 17, 17, 0.15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s;
}
ul.wc_payment_methods > li:has(input:checked),
ul.shipping_method > li:has(input:checked) {
  border-color: #C8A26A;
  background: rgba(232, 226, 214, 0.4);
}
ul.wc_payment_methods input[type="radio"],
ul.shipping_method input[type="radio"] {
  accent-color: #C8A26A;
  width: 16px;
  height: 16px;
  margin-right: 12px;
}
ul.wc_payment_methods label,
ul.shipping_method label {
  display: inline;
  text-transform: none;
  letter-spacing: normal;
  color: #111111;
  font-size: 0.875rem;
  font-weight: 500;
}
/* WooCommerce pinta esta caja (y su flecha ::before) en su lila de marca con
   ".woocommerce-checkout #payment div.payment_box" (1-3-1), así que hay que
   igualar el selector para devolverla a la paleta de la maqueta. */
.payment_box,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-cart #payment div.payment_box {
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  background-color: #fff;
  border-radius: 10px;
  font-size: 0.8125rem;
  color: #6B6B6B;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before {
  border-bottom-color: #fff;
}

/* ---- Botón «Realizar pedido» ---- */
#place_order,
.woocommerce #payment #place_order {
  width: 100%;
  border: 0;
  border-radius: 9999px;
  background: #111111;
  color: #fff;
  padding: 16px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s;
}
#place_order:hover { background: #C8A26A; transform: translateY(-2px); }

/* ---- Condiciones (checkbox de términos) ---- */
.woocommerce-terms-and-conditions-wrapper .form-row { display: flex; align-items: flex-start; gap: 10px; }
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  accent-color: #C8A26A;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.woocommerce-terms-and-conditions-wrapper label { display: inline; text-transform: none; letter-spacing: normal; font-size: 0.875rem; color: #111111; }

/* ---- Pestañas de "Mi cuenta" (si no se usa la navegación propia) ---- */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

/* woocommerce-layout.css le pone a esta zona "float:right; width:68%"
   (pensado para su rejilla por defecto). El float no molesta dentro de la
   rejilla CSS propia de woocommerce/myaccount/my-account.php, pero el ancho
   del 68% sí que se aplica y deja la columna de contenido encogida con un
   hueco vacio a la derecha. Aqui se le devuelve el 100% de su columna. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

/* ---- Formulario de desistimiento: impresión ----
   La página se imprime tal cual desde el botón «Imprimir», así que se quita
   todo lo que no forma parte del documento (cabecera, pie, banner de cookies
   y los propios botones) y se dejan las líneas de puntos con contraste
   suficiente para rellenarlas a boli. */
@media print {
  header,
  footer,
  .cookie-banner,
  .rm-no-imprimir,
  #buscador-overlay,
  #mini-carrito {
    display: none !important;
  }

  body { background: #fff; }

  .prose-legal { font-size: 11pt; line-height: 1.5; color: #000; }
  .prose-legal p,
  .prose-legal li { color: #000; }
  .prose-legal a { color: #000; text-decoration: none; }

  /* Las líneas para rellenar a mano: en pantalla van discontinuas y claras,
     en papel tienen que verse. */
  .prose-legal .border-dashed { border-bottom: 1px solid #000 !important; }

  /* Sin el relleno superior que reserva la cabecera fija. */
  section { padding-top: 0 !important; }
}

/* ==========================================================================
   Menú principal con desplegables (§6 de la arquitectura)
   El primer nivel son tres apartados que abren un panel; «Personalizados» y
   «El taller» van sueltos. El panel se abre con JS (initMenuEscritorio() en
   assets/js/main.js) marcando .is-open en el <li>, no con :hover, para que
   también se pueda abrir con el teclado.
   ========================================================================== */

.rm-nav__lista > li {
  position: relative;
}
/* El rótulo y su flechita no se separan: sin esto «Bolígrafos y plumas ⌄»
   partía y la flecha caía a la línea de abajo. */
.rm-nav__lista > li > a {
  white-space: nowrap;
}

/* Flechita de los que abren panel.
   Ojo: .nav-link ya usa ::after para el subrayado animado, con
   position:absolute, bottom:-2px, width:0 y height:1px. Al reaprovechar ese
   mismo pseudo-elemento hay que devolverle todas esas propiedades a su valor
   normal; si no, la flecha se pinta debajo del rótulo y pegada a la
   izquierda, dentro de la caja de 1px del subrayado. Estos tres rótulos
   abren panel y no llevan a ninguna página, así que no pierden nada por
   quedarse sin el subrayado. */
.rm-nav__lista > li.rm-desplegable > a::after {
  content: '\f078'; /* chevron-down */
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.5rem;
  margin-left: 6px;
  vertical-align: middle;
  color: #6B6B6B;
  transition: transform 0.3s, color 0.3s;
  display: inline-block;
}
.rm-nav__lista > li.rm-desplegable.is-open > a::after {
  transform: rotate(180deg);
  color: #C8A26A;
}

/* El panel */
.rm-nav__lista .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 232px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1130;
}
.rm-nav__lista > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Margen invisible entre el enlace y el panel: sin esto, al bajar el ratón
   se cruza un hueco sin elemento y el panel se cerraría. */
.rm-nav__lista > li.rm-desplegable::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

.rm-nav__sub-enlace {
  color: #111111;
  text-decoration: none;
  transition: color 0.25s, background-color 0.25s;
}
.rm-nav__sub-enlace:hover,
.rm-nav__lista .sub-menu li.current-menu-item > .rm-nav__sub-enlace {
  color: #C8A26A;
  background: rgba(200, 162, 106, 0.07);
}

/* «Regalos»: dos columnas, con sus encabezados. Las seis filas son las de la
   columna más larga («Por ocasión» y sus cinco fechas); el flujo por columnas
   coloca solo el resto. El separador y «Regalos de empresa» se sacan de ese
   flujo y se colocan a lo ancho al final: si no, al no caber en la segunda
   columna se abría una tercera. */
.rm-nav__lista > li.rm-mega > .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  gap: 0 12px;
  padding: 16px 6px;
}
.rm-nav__lista > li.rm-mega > .sub-menu > .rm-separador {
  grid-row: 7;
  grid-column: 1 / -1;
}
.rm-nav__lista > li.rm-mega > .sub-menu > .rm-separador + li {
  grid-row: 8;
  grid-column: 1 / -1;
}

/* Encabezados de columna y separadores: no son enlaces, son rótulos */
.rm-nav__lista .rm-encabezado > a,
.rm-nav__lista .rm-separador > a {
  pointer-events: none;
  cursor: default;
}
.rm-nav__lista .rm-encabezado > a {
  padding-top: 4px;
  padding-bottom: 8px;
  font-size: 0.625rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6B6B6B;
}
.rm-nav__lista .rm-separador > a {
  display: block;
  height: 0;
  margin: 8px 20px;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  color: transparent;
}

/* «Personalizados»: es el producto de más margen, va marcado */
.rm-nav__lista > li.rm-destacado > a {
  color: #C8A26A;
  font-weight: 500;
}