/*
Theme Name: Agencia Estuma — Tienda
Theme URI: https://agenciaestuma.com
Author: Agencia Estuma
Author URI: https://agenciaestuma.com
Description: Plantilla base WooCommerce reutilizable de Agencia Estuma. Diseñada para tiendas artesanas (obradores, boutiques, artesanía) con portada personalizable y colores editables desde el Personalizador. Pensada para reskin rápido por cliente sin tocar código.
Version: 1.0.309
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agenciaestuma-tienda
Tags: e-commerce, food-and-drink, custom-colors, custom-menu, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 9.5
*/

/* ==========================================================================
   1. Tokens de diseño — paleta editable por cliente en Personalizar → Marca
   ========================================================================== */
:root {
  /* Color — se sobrescriben desde el Personalizador (aetienda_color_primario / secundario) */
  --primario: #004F71;       /* acentos, CTA — azul Estuma */
  --primario-osc: #003052;   /* hover */
  --secundario: #12293A;     /* títulos, contraste — azul marino Estuma */
  --secundario-osc: #000A1B; /* profundo */

  /* Fondos y texto */
  --miga: #FBF6EC;        /* fondo principal, tono papel */
  --miga-2: #F3EADA;      /* fondo alterno */
  --tinta: #12293A;       /* texto */
  --tinta-suave: #6B4F50; /* texto secundario */
  --blanco: #FFFFFF;

  /* Alias de compatibilidad (mismo valor, nombres alternativos) */
  --corteza: var(--secundario);
  --corteza-osc: var(--secundario-osc);
  --dorado: var(--primario);
  --dorado-osc: var(--primario-osc);
  --valle: var(--secundario);

  /* Tipografía */
  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --f-menu: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Tamaños de encabezado fijos (H1-H6) — los usa el sistema de tamaño
     por módulo de Agencia Estuma → Home, para elegir "que este título se
     vea como un H2" en vez de un porcentaje arbitrario. */
  --tam-h1: clamp(2.2rem, 5vw, 3.6rem);
  --tam-h2: clamp(1.7rem, 3.5vw, 2.4rem);
  --tam-h3: 1.35rem;
  --tam-h4: 1.1rem;
  --tam-h5: .95rem;
  --tam-h6: .8rem;

  /* Layout */
  --ancho: 1200px;
  --radio: 14px;
  --sombra: 0 10px 30px rgba(62, 39, 18, .10);
  --transicion: .25s ease;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--color-body, var(--miga));
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: var(--peso-cuerpo, 400);
  line-height: var(--altura-cuerpo, 1.65);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  padding-top: var(--altura-cabecera);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--dorado-osc); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--corteza); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: var(--peso-titulos, 600);
  color: var(--corteza-osc);
  line-height: var(--altura-titulos, 1.15);
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.35rem; }

.contenedor {
  width: min(var(--ancho), calc(100% - 2.5rem));
  margin-inline: auto;
}
/* Botón inferior centrado, configurable por módulo desde
   Agencia Estuma → Home → Secciones de la portada. Sin espacio arriba
   (para que quede pegado visualmente al módulo al que pertenece) y con
   espacio abajo (que es lo que lo separa del siguiente módulo). */
.modulo-boton-inferior {
  text-align: center;
  padding: 0 1.25rem 3rem;
}
/* Variante "pantalla completa": sin límite de ancho, solo un margen lateral
   mínimo para que el contenido no toque el borde del navegador. */
.contenedor-completo {
  width: 100%;
  padding-inline: 2rem;
  box-sizing: border-box;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .contenedor-completo { padding-inline: 1.25rem; }
}

/* Etiqueta pequeña sobre títulos */
.eyebrow {
  display: inline-block;
  font-size: var(--escala-eyebrow, var(--tam-h6));
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-osc);
  margin-bottom: .6rem;
}

/* Botones */
.boton, .button, button.boton,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  display: inline-block;
  background: var(--dorado);
  color: var(--blanco);
  font-family: var(--f-menu, var(--f-body));
  font-weight: var(--peso-menu, 700);
  font-size: .95rem;
  letter-spacing: .03em;
  padding: .85em 1.8em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transicion), transform var(--transicion);
}
.boton:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--corteza);
  color: var(--blanco);
  transform: translateY(-2px);
}
.boton--secundario { background: transparent; color: var(--corteza); box-shadow: inset 0 0 0 2px var(--corteza); }
.boton--secundario:hover { background: var(--corteza); }

/* Divisor "corteza greñada" (firma) */
.divisor-corteza {
  height: 26px;
  background:
    radial-gradient(circle at 12px -6px, transparent 16px, var(--miga-2) 17px) repeat-x;
  background-size: 40px 26px;
}
.divisor-corteza--invertido { transform: scaleY(-1); }

/* ==========================================================================
   3. Cabecera fija + dos zonas de navegación independientes
   ------------------------------------------------------------------------
   .menu-escritorio  → barra horizontal dentro de la cabecera (≥900px)
   .appbar-movil     → barra fija abajo, solo en smartphones (<900px)
   Cada una puede gestionarse con contenido distinto desde el plugin
   "Agencia Estuma — Opciones de Tienda" → Gestión de Menús.
   ========================================================================== */
:root {
  --altura-cabecera: 80px;
  --altura-appbar:   70px;
}

.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--altura-cabecera);
  z-index: 1000;
  background: var(--blanco);
  border-bottom: 1px solid rgba(63, 32, 33, .08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  transition: var(--transicion);
}
/* Barra superior de contacto (Agencia Estuma → Header → Barra superior) */
.barra-superior {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  height: 40px;
  background: var(--secundario);
  color: var(--blanco);
  font-size: .82rem;
  display: flex;
  align-items: center;
}
.barra-superior__fila {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  width: 100%;
}
.barra-superior__separador {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.barra-superior__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.barra-superior__item:hover { opacity: .85; }
.barra-superior__icono { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; }
.barra-superior__icono svg { width: 100%; height: 100%; }
.barra-superior__ubicacion-texto-movil { display: none; }
body.tiene-barra-superior .cabecera { top: 40px; }
body.tiene-barra-superior { padding-top: calc(var(--altura-cabecera) + 40px) !important; }
@media (max-width: 680px) {
  .barra-superior__fila { gap: .8rem; justify-content: center; }
  .barra-superior__ubicacion-texto-completo { display: none; }
  .barra-superior__ubicacion-texto-movil { display: inline; }
}
@media (max-width: 420px) {
  .barra-superior__fila { gap: .6rem; }
  .barra-superior__texto-whatsapp { display: none; }
}
.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  padding: 0;
}
.cabecera__logo { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; overflow: hidden; }
.cabecera__logo .custom-logo-link { display: flex; align-items: center; }
.cabecera__logo img,
.cabecera__logo .custom-logo {
  height: var(--logo-alto-escritorio, 45px);
  max-height: var(--logo-alto-escritorio, 45px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  transition: opacity var(--transicion);
}
.cabecera__logo:hover img { opacity: .82; }
.cabecera__lateral-boton-envoltorio { display: none; }
.cabecera__lateral-boton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.cabecera__lateral-boton span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--secundario);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.cabecera__buscar-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: none;
  color: var(--secundario);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transicion);
}
.cabecera__buscar-boton:hover { background: rgba(0,79,113,.08); }
.cabecera__buscar-boton svg { width: 20px; height: 20px; }
/* Icono de "Mi cuenta" — mismo tamaño/tacto que el botón de buscar,
   con el color del texto de la cabecera (Agencia Estuma → Gestión de
   Menús → Icono de "Mi cuenta"). */
.cabecera__cuenta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--secundario);
  border-radius: 50%;
  transition: background var(--transicion);
}
.cabecera__cuenta:hover { background: rgba(0,79,113,.08); }
.cabecera__cuenta-icono svg { display: block; width: 20px; height: 20px; }
/* Visibilidad independiente por tamaño de pantalla (Agencia Estuma →
   Gestión de Menús → Icono de "Mi cuenta") — mismo corte de 900px que
   separa el menú de escritorio de la app-bar móvil. */
@media (min-width: 901px) {
  .cabecera__cuenta--oculto-escritorio { display: none; }
}
@media (max-width: 900px) {
  .cabecera__cuenta--oculto-movil { display: none; }
}
.cabecera-buscador {
  display: none;
  border-top: 1px solid rgba(63,32,33,.08);
  padding: .8rem 0;
}
.cabecera-buscador--visible { display: block; }
.cabecera-buscador__form {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.cabecera-buscador__form input[type="search"] {
  flex: 1;
  padding: .6rem .9rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: .95rem;
}
.cabecera-buscador__form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  background: var(--primario);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.cabecera-buscador__form button svg { width: 18px; height: 18px; }

/* Menú lateral deslizante (móvil) */
.menu-lateral-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,.45);
  z-index: 1200;
  opacity: 0;
  transition: opacity var(--transicion);
}
.menu-lateral-fondo--visible { display: block; opacity: 1; }
.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78vw, 320px);
  background: var(--blanco);
  z-index: 1201;
  transform: translateX(-100%);
  transition: transform var(--transicion);
  overflow-y: auto;
  padding: 0 0 2rem;
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
.menu-lateral--abierto { transform: translateX(0); }
.menu-lateral__cabecera {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 3.5rem;
  margin-bottom: .8rem;
  min-height: 30px;
}
.menu-lateral__logo { display: block; max-height: 42px; max-width: 100%; object-fit: contain; }

/* ---- Pie del menú lateral (WhatsApp / ubicación / horario / redes) ---- */
.menu-lateral__pie {
  margin-top: 1.6rem;
  padding: 1.6rem 1.2rem 2rem;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.menu-lateral__pie-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .98rem;
  color: var(--primario);
  text-decoration: none;
  text-align: center;
}
span.menu-lateral__pie-fila { color: var(--tinta); cursor: default; }
a.menu-lateral__pie-fila:hover { color: var(--primario-osc); }
.menu-lateral__pie-icono-svg { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.menu-lateral__pie-icono-svg svg { width: 100%; height: 100%; }
.menu-lateral__pie-icono-svg img { width: 100%; height: 100%; object-fit: contain; }
.menu-lateral__pie-iconos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: .4rem;
}
.menu-lateral__pie-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 1 46px;
  min-width: 34px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: var(--miga-2, #F3EADA);
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.menu-lateral__pie-icono .menu-lateral__pie-icono-svg { width: 20px; height: 20px; }
a.menu-lateral__pie-icono:hover { background: var(--primario); color: #fff; }
.menu-lateral__cerrar {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
}
.menu-lateral__cerrar:hover { background: rgba(255,255,255,.15); }
.menu-lateral .menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-lateral .menu-item a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.2rem;
  font-family: var(--f-menu, var(--f-body));
  font-size: 1rem;
  font-weight: var(--peso-menu, 600);
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--transicion);
}
/* El :hover va aparte y solo se aplica en dispositivos con ratón de
   verdad — en móvil, sin esto, el estilo de "enlace tocado" se queda
   pegado en pantalla después de tocarlo, aunque ya no sea el activo. */
@media (hover: hover) {
  .menu-lateral .menu-item a:hover {
    background: var(--menu-lateral-fondo-activo, #004F71);
    color: var(--menu-lateral-texto-activo, #fff);
  }
}
.menu-lateral .current-menu-item > .menu-item__fila > a,
.menu-lateral .current-menu-item > details > .menu-item__fila > a {
  background: var(--menu-lateral-fondo-activo, #004F71);
  color: var(--menu-lateral-texto-activo, #fff);
}
.menu-lateral .menu-icono svg, .menu-lateral .menu-icono img { width: 20px; height: 20px; }
.menu-lateral .menu-item__fila { display: flex; align-items: stretch; }
.menu-lateral .menu-item__fila a { flex: 1; }
/* <summary> trae su propio marcador (triángulo) en varios navegadores —
   se quita para poner el nuestro, que es el que ya usábamos antes. */
.menu-lateral summary.menu-item__fila { cursor: pointer; list-style: none; }
.menu-lateral summary.menu-item__fila::-webkit-details-marker { display: none; }
.menu-lateral summary.menu-item__fila::marker { content: ''; }
.menu-lateral .menu-item__desplegar {
  width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.menu-lateral .menu-item__desplegar::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}
/* Al abrirse el <details> (nativo del navegador, sin JS), el propio
   selector [open] gira la flecha — antes dependía de una clase que
   había que añadir con JavaScript. */
.menu-lateral details[open] > summary .menu-item__desplegar::before { transform: rotate(-135deg); }
.menu-lateral .menu-sublista { list-style: none; margin: 0; padding: 0; }
.menu-lateral .menu-item { display: block; }
.menu-lateral .menu-item__detalles { display: block; }
.menu-lateral .menu-sublista a {
  display: block;
  padding: .6rem 1.2rem .6rem 1.8rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid rgba(63,32,33,.08);
}
.menu-lateral .menu-sublista .menu-sublista a { padding-left: 2.6rem; font-size: .88rem; }
.menu-lateral .menu-sublista .menu-sublista .menu-sublista a { padding-left: 3.4rem; }
.menu-lateral .menu-sublista li:last-child a { border-bottom: none; }
@media (hover: hover) {
  .menu-lateral .menu-sublista a:hover { background: rgba(0,79,113,.06); }
}
@media (min-width: 901px) {
  .menu-lateral, .menu-lateral-fondo, .cabecera__lateral-boton-envoltorio { display: none !important; }
}
.cabecera__nombre {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secundario);
}

/* --- Ítems de menú: reglas compartidas por ambas zonas --- */
.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-item { display: flex; }
.menu-icono { line-height: 1; flex-shrink: 0; }
.menu-icono svg, .menu-icono img {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  object-fit: contain;
  display: block;
}

/* --- Zona 1: menú de escritorio (barra horizontal en la cabecera) --- */
.menu-escritorio { display: flex; align-items: center; }
.menu-escritorio .menu-lista { display: flex; align-items: center; gap: .25rem; }
.menu-escritorio .menu-icono { display: inline-flex; }
.menu-escritorio .menu-icono svg, .menu-escritorio .menu-icono img { width: 18px; height: 18px; }
.menu-escritorio a {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-family: var(--f-menu, var(--f-body));
  font-size: .875rem;
  font-weight: var(--peso-menu, 500);
  letter-spacing: .04em;
  color: var(--tinta);
  border-radius: 8px;
  transition: var(--transicion);
  position: relative;
  text-decoration: none;
}
.menu-escritorio a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--primario);
  border-radius: 999px;
  transform: scaleX(0);
  transition: transform var(--transicion);
}
.menu-escritorio a:hover { color: var(--menu-escritorio-texto-activo, #fff); background: var(--menu-escritorio-fondo-activo, #004F71); }
.menu-escritorio a:hover::after,
.menu-escritorio .current-menu-item > a::after { transform: scaleX(1); }
.menu-escritorio .current-menu-item > a { color: var(--menu-escritorio-texto-activo, #fff); background: var(--menu-escritorio-fondo-activo, #004F71); }

@media (max-width: 900px) {
  .menu-escritorio { display: none; } /* en móvil manda la app-bar */
}

/* --- Acciones (carrito) --- */
.cabecera__acciones { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.cabecera__carrito {
  position: relative;
  font-weight: 700;
  color: var(--secundario);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  box-sizing: border-box;
  padding: .4rem .8rem;
  border-radius: 999px;
  transition: var(--transicion);
  text-decoration: none;
}
.cabecera__carrito:hover { background: rgba(255, 164, 0, .12); color: var(--primario-osc); }
.cabecera__carrito-num {
  background: var(--primario);
  color: var(--blanco);
  font-size: .75rem;
  min-width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 .35em;
  font-weight: 700;
}

/* Compensación por cabecera fija: el contenido empieza debajo */
#cabecera-espaciador { display: none; }

/* --- Zona 2: app-bar móvil (fija abajo, solo <900px) --- */
.appbar-movil { display: none; }

@media (max-width: 900px) {
  :root {
    --altura-cabecera: 60px;
    --altura-appbar:   68px;
  }
  body { padding-bottom: calc(var(--altura-appbar) + env(safe-area-inset-bottom, 0px)); }

  .cabecera__barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .cabecera__lateral-boton-envoltorio { grid-column: 1; justify-self: start; display: flex; }
  .cabecera__logo { grid-column: 2; justify-content: center; }
  .cabecera__acciones { grid-column: 3; justify-self: end; }
  .cabecera__logo img, .cabecera__logo .custom-logo { height: var(--logo-alto-tablet, 34px); max-height: var(--logo-alto-tablet, 34px); }

  .appbar-movil {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: var(--altura-appbar);
    z-index: 999;
    background: var(--blanco);
    border-top: 1px solid rgba(63, 32, 33, .08);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Refuerzo: una franja sólida justo encima de la barra, del mismo
     color, para tapar cualquier rayita de 1-2px del contenido de
     detrás que pudiera colarse por el borde superior durante el
     scroll (costura de subpíxel, típica en iOS). */
  .appbar-movil::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 4px;
    background: var(--blanco);
  }
  .appbar-movil .menu-lista {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    flex: 1;
    width: 100%;
  }
  .appbar-movil .menu-item { flex: 1; display: flex; }
  .appbar-movil .menu-item__fila { display: flex; flex: 1; width: 100%; }
  .appbar-movil a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: .2rem;
    padding: .4rem .25rem .35rem;
    font-family: var(--f-menu, var(--f-body));
    font-size: .625rem;
    font-weight: var(--peso-menu, 700);
    letter-spacing: .06em;
    color: var(--tinta-suave);
    text-transform: uppercase;
    text-decoration: none;
  }
  .appbar-movil .menu-icono { display: block; }
  .appbar-movil a:active,
  .appbar-movil .current-menu-item a {
    color: var(--menu-movil-texto-activo, #fff);
    background: var(--menu-movil-fondo-activo, #004F71);
  }
  @media (hover: hover) {
    .appbar-movil a:hover {
      color: var(--menu-movil-texto-activo, #fff);
      background: var(--menu-movil-fondo-activo, #004F71);
    }
  }

  /* El carrito puede seguir en la cabecera arriba a la derecha */
  .cabecera__carrito { padding: .3rem .5rem; }
  .cabecera__carrito span[aria-hidden] { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  :root { --altura-cabecera: 56px; }
  .cabecera__logo img, .cabecera__logo .custom-logo { height: var(--logo-alto-movil, 30px); max-height: var(--logo-alto-movil, 30px); }
  .appbar-movil a { font-size: .6rem; letter-spacing: .04em; }
}

/* --- Menú "dashboard": navegación de Mi Cuenta (WooCommerce) ---
   Se activa solo si hay ítems configurados en el plugin para esta zona.
   Tabs horizontales con scroll en móvil, visibles en cualquier ancho. */
.menu-dashboard {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 2rem;
  padding: .35rem;
  background: var(--miga-2);
  border-radius: 999px;
  scrollbar-width: none;
}
.menu-dashboard::-webkit-scrollbar { display: none; }
.menu-dashboard .menu-item { flex-shrink: 0; }
.menu-dashboard a {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tinta-suave);
  border-radius: 999px;
  text-decoration: none;
  transition: var(--transicion);
}
.menu-dashboard .menu-icono { display: none; }
.menu-dashboard a:hover { color: var(--secundario); background: rgba(255,255,255,.6); }
.menu-dashboard .current-menu-item > a {
  background: var(--menu-dashboard-fondo-activo, #004F71);
  color: var(--menu-dashboard-texto-activo, #fff);
}


/* ==========================================================================
   4. Hero de portada — slider de imagen de fondo (1 o más slides)
   ========================================================================== */
.hero--fondo {
  position: relative;
  overflow: hidden;
}
.hero__slides {
  position: relative;
  min-height: var(--hero-altura, 64vh);
}
.hero__slide {
  position: relative;
  min-height: var(--hero-altura, 64vh);
  display: flex;
  align-items: center;
  background-color: var(--secundario);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Imagen <img> real del primer slide (en vez de background-image), para
   que el navegador pueda priorizar su carga (fetchpriority) y mejorar el
   LCP. Se comporta visualmente igual que un fondo: cubre todo el slide,
   detrás del degradado y del texto. */
.hero__slide-img, .hero__slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Slider (2+ slides): todas apiladas, solo la activa visible */
.hero--slider .hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity .8s ease;
}
.hero--slider .hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
  z-index: 0;
}
.hero__slide-contenido {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 0;
}
.hero__slide-contenido .eyebrow { color: var(--primario); }
.hero__slide-contenido h1 { color: var(--blanco); margin-bottom: .8rem; font-size: var(--escala-titulo, var(--tam-h1)); }
.hero__slide-contenido p {
  color: rgba(255,255,255,.92);
  font-size: var(--escala-texto, var(--tam-h4));
  max-width: 36em;
  margin: 0 auto 1.8rem;
}

/* Flechas de navegación */
.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--blanco);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion);
}
.hero__flecha:hover { background: rgba(255,255,255,.2); }
.hero__flecha--prev { left: 1.5rem; }
.hero__flecha--next { right: 1.5rem; }

/* Puntos de navegación */
.hero__puntos {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .6rem;
}
.hero__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--blanco);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--transicion);
}
.hero__punto.is-active,
.hero__punto:hover { background: var(--blanco); }

@media (max-width: 600px) {
  .hero__flecha { width: 38px; height: 38px; font-size: 1.2rem; }
  .hero__flecha--prev { left: .8rem; }
  .hero__flecha--next { right: .8rem; }
}

/* ==========================================================================
   5. Secciones de portada
   ========================================================================== */
.seccion { padding: 4.5rem 0; }
.bloque-categoria--secciones-productos .seccion { padding: 2.2rem 0; }
.seccion--alterna { background: var(--miga-2); }
.seccion__cabecera { text-align: center; max-width: 46em; margin: 0 auto 3rem; }
.seccion__cabecera h2 { font-size: var(--escala-titulo, var(--tam-h2)); }

/* Categorías / Destacados — tarjeta con imagen, configurable desde
   Agencia Estuma → Home (redondeo de esquinas vía --destacados-radio) */
.categorias {
  display: grid;
  grid-template-columns: repeat(var(--destacados-columnas, auto-fit), minmax(var(--destacados-min, 230px), 1fr));
  gap: 2rem;
}
@media (max-width: 1100px) {
  .categorias { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .categorias { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .categorias { grid-template-columns: repeat(var(--destacados-columnas-movil, 1), 1fr) !important; gap: 1.2rem; }
  .categoria__boton {
    padding: .7em 1em;
    font-size: .82rem;
    white-space: nowrap;
  }
}
.categoria {
  text-align: center;
  background: var(--blanco);
  border-radius: var(--destacados-radio, 12px);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion);
  display: flex;
  flex-direction: column;
}
.categoria:hover { transform: translateY(-6px); }
.categoria__imagen-enlace { display: block; }
.categoria img {
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
}
.categoria__cuerpo { padding: 1.2rem 1.2rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.categoria__cuerpo h3 { margin: 0 0 .4rem; font-size: var(--escala-titulo-tarjeta, var(--tam-h3)); }
.categoria__cuerpo h3 a { color: inherit; }
.categoria__cuerpo p { font-size: var(--escala-texto, var(--tam-h4)); color: rgba(44, 33, 22, .75); margin: 0 0 1rem; }
.categoria__boton { margin-top: auto; align-self: center; }

/* Franja "desde 1920" */
.franja-historia {
  background: var(--corteza);
  color: var(--miga);
  text-align: center;
  padding: 4rem 0;
}
.franja-historia h2 { color: var(--miga); font-size: var(--escala-titulo, var(--tam-h2)); }
.franja-historia .eyebrow { color: var(--dorado); }
.franja-historia p { max-width: 42em; margin: 0 auto 1.8rem; opacity: .92; font-size: var(--escala-texto, var(--tam-h4)); }
.franja-historia .boton { background: var(--dorado); }
.franja-historia .boton:hover { background: var(--miga); color: var(--corteza); }

/* ==========================================================================
   5.5 Página de categoría — bloques por categoría
   ========================================================================== */
.pagina-categoria { padding: 0 0 3rem; }
.bloque-categoria { margin-bottom: 2.4rem; }
.bloque-categoria:last-child { margin-bottom: 0; }

.bloque-categoria--cabecera { margin-bottom: 2.4rem; }
.categoria-cabecera {
  position: relative;
  overflow: hidden;
  padding: 2.4rem 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--migas-color-fondo, #004F71);
  color: #fff;
}
.categoria-cabecera--con-fondo { padding: 4rem 0; border-radius: 0; background-color: var(--secundario); }
.categoria-cabecera__img, .categoria-cabecera__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.categoria-cabecera__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}
.categoria-cabecera__contenido { position: relative; z-index: 2; }

.categoria-titulo {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--cab-color-titulo, #fff);
  margin: .8rem 0 .8rem;
}
.categoria-descripcion {
  color: var(--cab-color-descripcion, rgba(255,255,255,.85));
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 760px;
}
.categoria-cabecera--con-fondo .categoria-descripcion { color: rgba(255,255,255,.85); }
.categoria-descripcion p:last-child { margin-bottom: 0; }

.bloque-categoria--subcategorias .categoria-subcategorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
}
.categoria-subcategoria {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--subcategorias-color-fondo, #004F71);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  min-width: 0;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.categoria-subcategoria > span {
  display: block;
  padding: 1rem;
}
.categoria-subcategoria--sin-imagen {
  min-height: 100px;
  align-self: stretch;
  justify-content: center;
}
.categoria-subcategoria--sin-imagen > span { padding: 1.6rem 1rem; }
.categoria-subcategoria:hover { transform: translateY(-3px); box-shadow: var(--sombra); color: #fff; }
.categoria-subcategoria img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bloque-categoria--filtros .woocommerce-ordering { margin-bottom: 1.6rem; }
.bloque-categoria--filtros .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid var(--miga-2);
  border-radius: 999px;
  padding: .65em 2.6em .65em 1.2em;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinta);
  background-color: var(--blanco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312293A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  cursor: pointer;
  transition: border-color var(--transicion);
}
.bloque-categoria--filtros .woocommerce-ordering select.orderby:hover,
.bloque-categoria--filtros .woocommerce-ordering select.orderby:focus {
  border-color: var(--primario);
  outline: none;
}

.bloque-categoria--productos .woocommerce-pagination { margin-top: 2.4rem; }

.bloque-categoria--personalizado img { max-width: 100%; height: auto; border-radius: var(--radio); }
.bloque-categoria--personalizado { max-width: 760px; }
/* El módulo de "Secciones de productos" ya trae su propio .contenedor
   interno (reutilizado tal cual del sistema de módulos de Home) — al
   usarlo dentro de la página de categoría/tienda quedaría anidado dos
   veces, así que aquí se neutraliza el segundo para que no se vea más
   estrecho de la cuenta. */
.bloque-categoria--secciones-productos .contenedor {
  width: 100%;
  margin-inline: 0;
}

/* ==========================================================================
   6. WooCommerce — rejilla de productos (robusta, compatible con Elementor)
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-wc-products ul.products,
ul.products.columns-4,
ul.products.columns-3,
ul.products.columns-2 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* WooCommerce (y algunos resets de tema) usan un "clearfix" clásico
   (::before/::after con content vacío) pensado para el maquetado
   antiguo con float — al convertir el <ul> en display:grid, ese
   pseudo-elemento pasa a contarse como una casilla más de la rejilla,
   ocupando la primera posición y desplazando todos los productos
   reales una casilla hacia la derecha. Lo anulamos explícitamente. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 780px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products.columns-4,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.2rem !important;
  }
}
@media (max-width: 460px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: 1fr !important;
  }
}

.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion);
  text-align: center;
}
.woocommerce ul.products li.product:hover { transform: translateY(-5px); }
.woocommerce ul.products li.product a img {
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-display);
  font-size: var(--escala-titulo-tarjeta, var(--tam-h3)) !important;
  color: var(--corteza-osc);
  padding: 1rem 1rem .2rem !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.3 !important;
}
.tarjeta-producto-sku {
  display: block;
  padding: 0 1rem;
  font-size: var(--codigo-tamano, .82rem) !important;
  font-weight: 700;
  color: var(--codigo-color, var(--corteza-osc)) !important;
  letter-spacing: .02em;
}
.bloque-producto--codigo .producto-codigo {
  font-size: var(--codigo-tamano, .95rem) !important;
  color: var(--codigo-color, var(--corteza-osc)) !important;
  margin: 0 0 1rem;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  display: block !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  color: var(--dorado-osc) !important;
  font-weight: 700;
  font-size: 1.35rem !important;
  margin-bottom: 1rem !important;
}
.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
  display: inline !important;
  float: none !important;
  font-size: .8em;
  font-weight: 400;
  opacity: .6;
  margin-right: .4em;
}
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
  display: inline !important;
  float: none !important;
  text-decoration: none;
}
/* Estrellas de valoración en los listados — doradas y centradas (por
   defecto WooCommerce las deja en negro y sin centrar, ya que
   ".star-rating" es un bloque propio, no texto suelto, así que el
   "text-align:center" de la tarjeta no le afecta por sí solo). */
.woocommerce ul.products li.product .star-rating,
ul.products li.product .star-rating {
  margin: 0 auto .6rem !important;
  float: none !important;
}
.woocommerce ul.products li.product .star-rating span::before,
ul.products li.product .star-rating span::before,
.woocommerce ul.products li.product .star-rating::before,
ul.products li.product .star-rating::before {
  color: var(--dorado) !important;
}
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
  position: absolute !important;
  z-index: 4;  background: var(--valle);
  border-radius: 999px;
  min-height: 0;
  line-height: 1;
  padding: .55em .9em;
  top: .8rem;
  left: .8rem;
  right: auto;
  margin: 0;
  color: var(--blanco);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Banner de disponibilidad: "Bajo pedido" / "Disponible online" --- */
.badge-disponibilidad {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 5;
  padding: .4em .9em;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanco);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  pointer-events: none;
  white-space: nowrap;
}
/* En pantallas estrechas, "¡Oferta!" (arriba-izquierda) y esta etiqueta
   (arriba-derecha) pueden chocar si el producto tiene ambas a la vez.
   Solo cuando coinciden las apilamos en vertical (ambas a la izquierda);
   si no hay oferta, esta etiqueta se queda arriba como siempre. */
@media (max-width: 600px) {
  li.product:has(.onsale) .badge-disponibilidad {
    top: 2.6rem;
    left: .8rem;
    right: auto;
  }
}
.badge-disponibilidad--pedido { background: var(--secundario); }
.badge-disponibilidad--online { background: var(--primario); }

/* --- Contenedor de botones duales en la rejilla --- */
.tarjeta-producto-botones {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1rem 1.3rem;
  margin-top: auto;
}
.tarjeta-producto-botones .button,
.tarjeta-producto-botones .boton-mas-info {
  margin: 0 !important;
  padding: .65em .5em !important;
  font-size: .78rem !important;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
/* Por defecto (tarjeta estrecha), uno debajo del otro a ancho
   completo — pero los botones "solo icono" (cuadrados y compactos) se
   quedan como están, centrados, en vez de estirarse a un rectángulo
   ancho. */
.tarjeta-producto-botones .button:not(:has(.boton-icono):not(:has(.boton-icono-texto))),
.tarjeta-producto-botones .boton-mas-info:not(:has(.boton-icono):not(:has(.boton-icono-texto))) {
	flex: 0 0 auto;
	width: 100%;
}
.tarjeta-producto-botones .button:has(.boton-icono):not(:has(.boton-icono-texto)),
.tarjeta-producto-botones .boton-mas-info:has(.boton-icono):not(:has(.boton-icono-texto)) {
	align-self: center;
}
/* En cuanto la propia tarjeta tiene sitio de sobra para los dos
   botones en fila sin que el texto se apriete (se mide el ancho real
   de la tarjeta con una "container query", no el de la pantalla — así
   da igual si es por estar en móvil o por haber muchas columnas en
   escritorio), vuelven a ponerse en fila. */
@container (min-width: 300px) {
	.tarjeta-producto-botones { flex-direction: row; }
	.tarjeta-producto-botones .button:not(:has(.boton-icono):not(:has(.boton-icono-texto))),
	.tarjeta-producto-botones .boton-mas-info:not(:has(.boton-icono):not(:has(.boton-icono-texto))) {
		flex: 1;
		width: auto;
	}
}
/* Icono sustituyendo al texto en los botones de la tarjeta */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.boton-icono svg {
  width: 20px;
  height: 20px;
  display: block;
}
.boton-icono-texto {
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Solo icono (sin texto pequeño): botón cuadrado y compacto */
.tarjeta-producto-botones .button:has(.boton-icono):not(:has(.boton-icono-texto)),
.tarjeta-producto-botones .boton-mas-info:has(.boton-icono):not(:has(.boton-icono-texto)) {
  padding: .65em !important;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}
/* Icono + texto pequeño: botón con ambos en fila, ancho según contenido */
.tarjeta-producto-botones .button:has(.boton-icono-texto),
.tarjeta-producto-botones .boton-mas-info:has(.boton-icono-texto) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex: 0 1 auto;
  width: auto;
}

.boton-mas-info {
  background: transparent;
  color: var(--secundario);
  box-shadow: inset 0 0 0 2px var(--secundario);
}
.boton-mas-info:hover { background: var(--secundario); color: var(--blanco); }

/* ==========================================================================
   Ficha de producto individual — sistema de bloques
   Configurable en Agencia Estuma → Producto página (orden, visibilidad,
   relacionados, migas) y Agencia Estuma → Productos (banner/botones de
   las tarjetas en rejillas, que también aplican aquí en "relacionados").
   ========================================================================== */
.woocommerce div.product {
  margin-bottom: 4rem;
}
.bloque-producto { margin-bottom: 2.6rem; }

/* Modificadores de ancho (Agencia Estuma → Producto página, botón junto
   a cada bloque). Solo tiene sentido en bloques de ancho completo
   (migas, descripción larga, relacionados) — los de la fila de dos
   columnas (galería/resumen) ya tienen su propio ancho fijado. */
.bloque-producto--ancho-completo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
/* Bloques marcados "Columna izquierda"/"Columna derecha" (Agencia
   Estuma → Producto página, botón de ancho) — cualquier cantidad de
   bloques consecutivos marcados igual se apilan juntos en su columna,
   y ambas columnas se colocan una junto a la otra (ver
   aetienda_render_columnas_producto en PHP). */
.producto-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3.5rem;
  margin-bottom: 2.6rem;
  align-items: flex-start;
}
.producto-columnas__col { flex: 1 1 380px; min-width: 0; }
.producto-columnas__col .bloque-producto { margin-bottom: 1.6rem; }
.producto-columnas__col .bloque-producto:last-child { margin-bottom: 0; }
.bloque-producto:last-child { margin-bottom: 0; }

/* Bloque personalizado de tipo "Columnas" (contenedor) — Agencia
   Estuma → Producto página → Bloques personalizados. Cada columna
   lleva dentro los bloques (de la ficha o personalizados) que se le
   hayan asignado, en el orden elegido. */
.producto-columnas-libres {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3.5rem;
  align-items: flex-start;
}
.producto-columnas-libres__col { min-width: 0; flex: 1 1 380px; display: flex; flex-direction: column; }
.producto-columnas-libres__col .bloque-producto { margin-bottom: 1.6rem; max-width: 100%; }
.producto-columnas-libres__col .bloque-producto:last-child { margin-bottom: 0; }
/* Estos bloques necesitan ocupar siempre todo el ancho para verse bien
   (imágenes, formulario de compra) — el resto (título, texto,
   precio...) puede encogerse a su contenido para que la alineación
   horizontal (izquierda/centro/derecha) tenga efecto real. */
.producto-columnas-libres__col .bloque-producto--galeria,
.producto-columnas-libres__col .bloque-producto--formulario-compra {
  width: 100%;
}
.producto-columnas-libres--50-50 .producto-columnas-libres__col { flex-basis: calc(50% - 1.75rem); }
.producto-columnas-libres--70-30 .producto-columnas-libres__col:first-child { flex-basis: calc(70% - 1.75rem); }
.producto-columnas-libres--70-30 .producto-columnas-libres__col:last-child { flex-basis: calc(30% - 1.75rem); }
.producto-columnas-libres--30-70 .producto-columnas-libres__col:first-child { flex-basis: calc(30% - 1.75rem); }
.producto-columnas-libres--30-70 .producto-columnas-libres__col:last-child { flex-basis: calc(70% - 1.75rem); }
.producto-columnas-libres--33-33-33 .producto-columnas-libres__col { flex-basis: calc(33.333% - 2.34rem); }
.producto-columnas-libres--100-100 .producto-columnas-libres__col { flex-basis: 100%; }
@media (max-width: 1000px) {
  .producto-columnas-libres--33-33-33 .producto-columnas-libres__col { flex-basis: calc(50% - 1.75rem); }
}
@media (max-width: 780px) {
  .producto-columnas-libres__col,
  .producto-columnas-libres--50-50 .producto-columnas-libres__col,
  .producto-columnas-libres--70-30 .producto-columnas-libres__col,
  .producto-columnas-libres--30-70 .producto-columnas-libres__col,
  .producto-columnas-libres--33-33-33 .producto-columnas-libres__col,
  .producto-columnas-libres--100-100 .producto-columnas-libres__col {
    flex-basis: 100%;
  }
}

/* Migas de pan — a pantalla completa (borde a borde), fuera del
   contenedor de 1200px del resto de la página. Color de fondo
   configurable en Agencia Estuma → Producto página (por defecto, el
   azul marino de Agencia Estuma). */
.bloque-producto--migas,
.bloque-categoria--migas,
.categoria-migas {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 1rem 1.5rem;
  min-height: 3rem;
  background: var(--migas-color-fondo, #004F71);
}
.bloque-producto--migas .woocommerce-breadcrumb,
.bloque-categoria--migas .woocommerce-breadcrumb,
.categoria-migas .woocommerce-breadcrumb {
  padding: 0;
  margin: 0;
  font-size: var(--migas-tamano, .78rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--migas-color-texto, #ffffff) !important;
}
.bloque-producto--migas .woocommerce-breadcrumb a,
.bloque-categoria--migas .woocommerce-breadcrumb a,
.categoria-migas .woocommerce-breadcrumb a { color: var(--migas-color-enlace, var(--migas-color-texto, #ffffff)) !important; opacity: .85; }
.bloque-producto--migas .woocommerce-breadcrumb a:hover,
.bloque-categoria--migas .woocommerce-breadcrumb a:hover,
.categoria-migas .woocommerce-breadcrumb a:hover { color: var(--migas-color-enlace-hover, var(--migas-color-enlace, var(--migas-color-texto, #ffffff))) !important; opacity: 1; }
.bloque-producto--migas .migas-de-pan__separador,
.bloque-categoria--migas .migas-de-pan__separador,
.categoria-migas .migas-de-pan__separador { opacity: .6; }
/* Variante superpuesta: cuando la cabecera de categoría SÍ tiene
   imagen o vídeo de fondo, las migas van ENCIMA de ese fondo (arriba a
   la izquierda, con fondo transparente para no tapar la imagen con la
   franja de color) en vez de en su propia franja aparte empujando la
   imagen hacia abajo. El contenedor padre (.categoria-cabecera--con-fondo)
   ya es a pantalla completa por su cuenta, así que aquí basta con
   posicionarse encima suyo sin repetir el truco de ancho. */
.categoria-migas--superpuesta {
  position: absolute;
  top: 1.5rem;
  left: 0;
  z-index: 3;
  width: 100%;
  margin: 0;
  padding: 0 1.5rem;
  background: transparent;
}

/* Título — centrado siempre, en todos los tamaños de pantalla. */
.bloque-producto--titulo {
  text-align: center;
  margin-bottom: 1rem;
}
.bloque-producto--titulo .product_title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  color: var(--secundario);
  text-align: center;
  margin-bottom: 0;
  line-height: 1.1;
}

/* Categoría (y SKU) */
.bloque-producto--categoria .product_meta {
  font-size: .8rem;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
}
.bloque-producto--categoria .product_meta > span { display: inline-flex; align-items: center; }
.bloque-producto--categoria .product_meta a {
  color: var(--primario);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,79,113,.3);
}
.bloque-producto--categoria .product_meta a:hover { border-color: var(--primario); }

/* Galería */
.bloque-producto--galeria { max-width: 100%; }
/* WooCommerce añade por compatibilidad la clase "images" a la galería,
   y trae de fábrica la regla ".woocommerce div.product div.images {
   width:48%; float:left}" — por especificidad le gana a nuestro CSS y
   es la causa real de que la galería apareciera encogida. La anulamos
   aquí explícitamente. */
.bloque-producto--galeria .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
}
.bloque-producto--galeria .woocommerce-product-gallery { position: relative; }
.bloque-producto--galeria .woocommerce-product-gallery__wrapper {
  position: relative;
  width: 100%;
}
.bloque-producto--galeria .woocommerce-product-gallery__image,
.bloque-producto--galeria .woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
}
.bloque-producto--galeria .woocommerce-product-gallery__image a { cursor: default; }
.bloque-producto--galeria img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.bloque-producto--galeria .woocommerce-product-gallery__trigger {
  display: none !important;
}
/* FlexSlider fija una altura en línea en .flex-viewport calculada en el
   momento de inicializar el slider — si eso ocurre antes de que la
   imagen tenga su ancho definitivo, la deja encajonada en una altura
   pequeña. Forzamos que la altura siempre sea automática. */
.bloque-producto--galeria .flex-viewport,
.bloque-producto--galeria .woocommerce-product-gallery__wrapper.slides {
  height: auto !important;
}
/* Por si FlexSlider genera alguna lista de navegación adicional sin
   nuestras clases (aparecería como viñetas sueltas sin estilo, una
   debajo de otra) — la ocultamos, dejando solo la que ya tenemos
   maquetada como puntos/miniaturas. */
.bloque-producto--galeria .flex-control-nav:not(.flex-control-thumbs) {
  display: none !important;
}
/* WooCommerce/FlexSlider comparten la clase ".flex-control-nav" entre
   la lista de puntos de paginación (que sí va posicionada en absoluto,
   pegada al borde inferior del slider) y esta lista de miniaturas — y
   dan a esa lista compartida "width: 25%; float:left" en los <li> y
   "margin: 0 !important" en las imágenes. Como nuestra regla de arriba
   solo ocultaba la nav SIN nuestra clase, esta (que sí la lleva) se
   quedaba con esos estilos de fábrica por debajo y quedaba pegada a la
   imagen principal, con miniaturas de anchos irregulares en vez de una
   fila pareja. Se fuerza aquí explícitamente el reseteo completo. */
.bloque-producto--galeria .flex-control-thumbs {
  position: static !important;
  width: 100% !important;
  overflow: visible !important;
  margin: 1.2rem 0 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.bloque-producto--galeria .flex-control-thumbs li {
  list-style: none;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.bloque-producto--galeria .flex-control-thumbs img {
  width: 68px !important;
  height: 68px !important;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--transicion), box-shadow var(--transicion);
  box-shadow: none;
  margin: 0 !important;
}
.bloque-producto--galeria .flex-control-thumbs img.flex-active,
.bloque-producto--galeria .flex-control-thumbs img:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--primario);
}

/* Flechas de navegación (prev/next) que añade flexslider cuando hay
   más de una imagen — ocultas por defecto, visibles en móvil donde el
   usuario desliza en vez de hacer clic en las miniaturas. */
.bloque-producto--galeria .flex-direction-nav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bloque-producto--galeria .flex-direction-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bloque-producto--galeria .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--galeria-indicadores-rgba, rgba(0,79,113,.62));
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  color: #fff;
  font-size: 0;
  cursor: pointer;
}
.bloque-producto--galeria .flex-direction-nav a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.bloque-producto--galeria .flex-direction-nav .flex-prev { left: .6rem; }
.bloque-producto--galeria .flex-direction-nav .flex-prev::before { transform: rotate(135deg); margin-left: 3px; }
.bloque-producto--galeria .flex-direction-nav .flex-next { right: .6rem; }
.bloque-producto--galeria .flex-direction-nav .flex-next::before { transform: rotate(-45deg); margin-right: 3px; }

@media (max-width: 780px) {
  /* En móvil, con varias imágenes, se navega deslizando el dedo sobre
     la imagen principal (flexslider ya trae el swipe táctil activado
     por "wc-product-gallery-slider") — las miniaturas se convierten en
     puntitos indicadores (mantienen su función de clic) y se muestran
     las flechas como apoyo visual adicional. */
  .bloque-producto--galeria .flex-control-thumbs { gap: .5rem; margin-top: 1rem; width: 100%; }
  .bloque-producto--galeria .flex-control-thumbs li {
    position: relative;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    float: none !important;
  }
  .bloque-producto--galeria .flex-control-thumbs li::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9DEE2;
    transition: background var(--transicion), transform var(--transicion);
  }
  .bloque-producto--galeria .flex-control-thumbs li:has(img.flex-active)::after {
    background: var(--galeria-indicadores-solido, var(--primario));
    transform: scale(1.25);
  }
  .bloque-producto--galeria .flex-control-thumbs img,
  .bloque-producto--galeria .flex-control-thumbs img.flex-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px;
    margin: 0 !important;
    float: none !important;
    border-radius: 50%;
    opacity: 0 !important;
    box-shadow: none !important;
  }
  .bloque-producto--galeria .flex-direction-nav { display: block; }
}

/* Precio */
.bloque-producto--precio {
  display: block;
  text-align: left;
  margin-top: -.3rem;
}
.bloque-producto--precio p.price,
.bloque-producto--precio span.price {
  font-weight: 700;
  display: block;
  text-align: left;
  line-height: 1.2;
}
.bloque-producto--precio p.price del {
  font-size: var(--precio-tamano-venta, 1.3rem);
  font-weight: 400;
  margin-right: .6em;
  color: var(--precio-color-venta, var(--primario-osc));
}
.bloque-producto--precio p.price ins {
  font-size: var(--precio-tamano-oferta, 2.6rem);
  text-decoration: none;
  color: var(--precio-color-oferta, var(--primario-osc));
}
/* Precio sin oferta (una sola cantidad, sin del/ins) — usa el tamaño y
   color de oferta, ya que es el precio "de verdad" que se está
   mostrando. */
.bloque-producto--precio p.price:not(:has(ins)) {
  font-size: var(--precio-tamano-oferta, 2.6rem);
  color: var(--precio-color-oferta, var(--primario-osc));
}

/* Descripción corta */
.bloque-producto--descripcion-corta {
  color: var(--tinta-suave);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 640px;
}

/* Formulario de compra — "modulado en cajas": todo el bloque
   (variaciones + cantidad/botón + precio de la variación +
   disponibilidad) va dentro de una tarjeta con borde propio.
   Dentro, Tamaño y Precio van en dos columnas una junto a la otra (como
   en la referencia de diseño), y Disponibilidad + Cantidad/botón
   ocupan el ancho completo debajo, cada uno en su propia fila con
   línea divisoria — usando CSS Grid con "display:contents" en los
   contenedores intermedios que trae WooCommerce (single_variation_wrap,
   woocommerce-variation) para que sus hijos (precio, disponibilidad,
   botón…) actúen como si fueran celdas directas de esa rejilla. */
.bloque-producto--formulario-compra {
  border: 1px solid var(--miga-2);
  border-radius: var(--radio);
  padding: 1.6rem 1.8rem;
  background: var(--blanco);
}
.bloque-producto--formulario-compra form.cart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
/* Productos SIN variaciones: no hay tabla de Tamaño ni bloque de
   precio de variación — el propio form.cart pasa a ser directamente
   la fila "cantidad + botón" (en vez de una rejilla de 2 columnas,
   que aquí no tendría sentido). */
.bloque-producto--formulario-compra form.cart:not(.variations_form) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.bloque-producto--formulario-compra .single_variation_wrap,
.bloque-producto--formulario-compra .woocommerce-variation.single_variation {
  display: contents;
}
.bloque-producto--formulario-compra .quantity { display: flex; align-items: center; }
/* Texto configurable (Agencia Estuma → Producto página → Variaciones),
   impreso justo antes del campo de cantidad. */
.bloque-producto--formulario-compra .aeop-cantidad-etiqueta {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  margin-bottom: .5rem;
  flex-basis: 100%;
}
/* Cantidad con botones +/- (añadidos por JS alrededor del campo
   nativo, que sigue siendo el que WooCommerce valida y envía). */
.bloque-producto--formulario-compra .quantity.aeop-cantidad {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bloque-producto--formulario-compra .aeop-cantidad__boton {
  width: 2.4em;
  height: 2.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--miga-2);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.bloque-producto--formulario-compra .aeop-cantidad__boton:hover {
  background: var(--miga-2);
  border-color: var(--miga-2);
}
.bloque-producto--formulario-compra .quantity.aeop-cantidad .qty {
  width: 3.2em;
  padding: .7em .3em;
}
/* El botón "Añadir a la cesta" crece para ocupar todo el ancho que
   quede libre en su fila (junto a la cantidad), en vez de quedarse
   pegado a la izquierda con hueco vacío a la derecha antes del borde
   de la caja — así ocupa el mismo ancho completo que, por ejemplo, la
   franja de iconos de pago que va justo debajo. */
.bloque-producto--formulario-compra .single_add_to_cart_button,
.bloque-producto--formulario-compra .aeop-comprar-ahora {
  flex: 1 1 auto;
  text-align: center;
}
/* Estas propiedades "de toda la vida" (radio, relleno, tamaño de
   letra, color de fondo — configurable en Agencia Estuma → Producto
   página) solo se aplican si NO se ha elegido uno de los estilos de
   botón del catálogo general (Principal/Secundario/Fantasma) — en ese
   caso manda por completo el estilo elegido (aeop-boton-rol-*, ver
   estilos-boton.php), sin que nada de esto se lo pise. */
.bloque-producto--formulario-compra .button:not([class*="aeop-boton-rol-"]) {
  border-radius: 999px;
  padding: 1em 2.4rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
  background-color: var(--boton-cesta-color, var(--primario)) !important;
  color: #fff !important;
  border-color: var(--boton-cesta-color, var(--primario)) !important;
}
.bloque-producto--formulario-compra .button[class*="aeop-boton-rol-"] {
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
}
.bloque-producto--formulario-compra .button:not([class*="aeop-boton-rol-"]):hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
  filter: brightness(90%);
}

/* Columna "Tamaño" (o el nombre del atributo que sea) — WooCommerce
   pinta un <select> nativo sin estilo alguno; se le da el mismo
   lenguaje visual que al resto de controles (borde, píldora, flecha
   propia en vez de la del navegador).
   El elemento <table> conserva por defecto "display:table" aunque su
   <tbody>/<tr> se pasen a bloque — eso deja el algoritmo de
   maquetación de tablas a medias (el navegador genera cajas anónimas
   para compensar) y es lo que descuadraba la etiqueta fuera de su
   sitio. Se fuerza aquí "display:block/contents" en cada nivel. */
.bloque-producto--formulario-compra table.variations {
  display: contents;
}
.bloque-producto--formulario-compra table.variations tbody {
  display: contents;
}
.bloque-producto--formulario-compra table.variations tr {
  display: block;
  grid-column: 1;
}
/* Si el producto tiene más de un atributo de variación (Tamaño +
   Color, por ejemplo), cada <tr> es una fila propia — solo la
   PRIMERA se empareja con el Precio a su derecha (fila 1); el resto
   se apilan debajo en su propia fila, sin fijar ningún número de fila
   a mano (así no importa cuántos atributos tenga cada producto). */
.bloque-producto--formulario-compra table.variations tr:first-of-type {
  grid-row: 1;
}
.bloque-producto--formulario-compra table.variations th.label {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  text-align: left;
  padding: 0;
  margin-bottom: .5rem;
  width: auto;
}
.bloque-producto--formulario-compra table.variations td.value {
  display: block;
  padding: 0;
  width: auto;
}
.bloque-producto--formulario-compra table.variations select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid var(--miga-2);
  border-radius: 999px;
  padding: .65em 2.6em .65em 1.2em;
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--tinta);
  background-color: var(--blanco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312293A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  cursor: pointer;
  transition: border-color var(--transicion);
}
.bloque-producto--formulario-compra table.variations select:hover,
.bloque-producto--formulario-compra table.variations select:focus {
  border-color: var(--primario);
  outline: none;
}
.bloque-producto--formulario-compra .reset_variations {
  display: inline-block;
  font-size: .82rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: .5rem;
}
.bloque-producto--formulario-compra .reset_variations:hover { color: var(--primario); }

/* Columna "Precio" — etiqueta "PRECIO" (configurable) antepuesta por
   JS, en el mismo estilo que "TAMAÑO", y color propio independiente
   del precio de rango de arriba (que se oculta en cuanto hay una
   variación seleccionada: ver .aeop-precio-oculto-variacion). */
.bloque-producto--formulario-compra .woocommerce-variation-price {
  grid-column: 2;
  grid-row: 1;
}
.bloque-producto--formulario-compra .aeop-precio-variacion-etiqueta {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  margin-bottom: .5rem;
}
.bloque-producto--formulario-compra .woocommerce-variation-price .price,
.bloque-producto--formulario-compra .woocommerce-variation-price .price * {
  color: var(--precio-color-variacion, var(--precio-color-oferta, var(--primario-osc))) !important;
}
.bloque-producto--formulario-compra .woocommerce-variation-price .price {
  display: block;
  font-weight: 800 !important;
  font-size: 2rem !important;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.bloque-producto--formulario-compra .woocommerce-variation-price .price ins {
  text-decoration: none !important;
}
.bloque-producto--formulario-compra .woocommerce-variation-price .price del {
  font-weight: 400 !important;
  font-size: .55em !important;
  opacity: .7;
}
.bloque-producto--formulario-compra .woocommerce-variation-description {
  grid-column: 1 / -1;
  color: var(--tinta-suave);
  line-height: 1.6;
  padding-top: 1.2rem;
}
/* Disponibilidad ("50 disponibles", "Agotado"...) — a todo lo ancho,
   debajo de Tamaño/Precio; tanto la general del producto simple como
   la que aparece dentro de una variación. Se oculta la fila entera si
   WooCommerce no imprime ningún aviso para esa variación. */
.bloque-producto--formulario-compra .woocommerce-variation-availability {
  grid-column: 1 / -1;
  padding-top: 1.2rem;
}
.bloque-producto--formulario-compra .woocommerce-variation-availability:empty {
  display: none;
  padding: 0;
}
.bloque-producto--formulario-compra .stock {
  color: var(--disponibilidad-color, var(--tinta-suave)) !important;
  font-weight: 600;
  margin: 0;
}
/* Cantidad + botón — a todo lo ancho, con línea divisoria por encima
   para separarlo de Tamaño/Precio/Disponibilidad. */
.bloque-producto--formulario-compra .woocommerce-variation-add-to-cart {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--miga-2);
}
/* Precio de rango de arriba (bloque--precio): oculto mientras haya
   una variación completa seleccionada, para no duplicar la
   información con el precio ya resuelto de la variación. */
.bloque-producto--precio.aeop-precio-oculto-variacion {
  display: none;
}
/* En móvil, Tamaño y Precio pasan de 2 columnas a 1 (apilados) — se
   sueltan también las filas fijas de la rejilla de escritorio y se
   deja que todo fluya en el orden natural del HTML. */
@media (max-width: 480px) {
  .bloque-producto--formulario-compra form.cart {
    grid-template-columns: 1fr;
  }
  .bloque-producto--formulario-compra .woocommerce-variation-price,
  .aeop-guia-tamanos,
  .bloque-producto--formulario-compra .woocommerce-variation-description,
  .bloque-producto--formulario-compra .woocommerce-variation-availability,
  .bloque-producto--formulario-compra .woocommerce-variation-add-to-cart {
    grid-column: 1;
    grid-row: auto;
  }
  .bloque-producto--formulario-compra .woocommerce-variation-price {
    margin-top: 1.2rem;
  }
}

/* Iconos de confianza y Características de este producto comparten el
   mismo patrón visual (icono en insignia circular arriba, título y
   subtítulo centrados debajo), pero cada uno tiene AHORA sus propias
   columnas y color de fondo independientes (Agencia Estuma → Producto
   página → Iconos de pago).
   Ambas franjas ocupan siempre el ancho completo del contenedor, sea
   cual sea el nº de elementos que tengan — "Iconos de confianza" con
   una rejilla de columnas iguales; "Características de este producto"
   con flexbox y "flex-grow", así que si hay menos elementos que
   columnas configuradas, esos elementos crecen para repartirse el
   ancho completo en vez de quedarse pequeños con hueco vacío. */
.iconos-confianza {
  display: grid;
  grid-template-columns: repeat(var(--iconos-confianza-cols-escritorio, 4), 1fr);
  gap: 1.6rem 1rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.caracteristicas-producto {
  display: grid;
  grid-template-columns: repeat(var(--caracteristicas-cols-escritorio, 4), 1fr);
  gap: 1.6rem 1rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
@media (max-width: 900px) {
  .iconos-confianza {
    grid-template-columns: repeat(var(--iconos-confianza-cols-tablet, 3), 1fr);
  }
  .caracteristicas-producto {
    grid-template-columns: repeat(var(--caracteristicas-cols-tablet, 3), 1fr);
  }
}
@media (max-width: 600px) {
  .iconos-confianza {
    grid-template-columns: repeat(var(--iconos-confianza-cols-movil, 3), 1fr);
  }
  .caracteristicas-producto {
    grid-template-columns: repeat(var(--caracteristicas-cols-movil, 3), 1fr);
  }
}
.iconos-confianza__item,
.caracteristicas-producto__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}
.iconos-confianza__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transicion);
}
.iconos-confianza__enlace:hover {
  opacity: .75;
}
/* Insignia circular detrás del icono. En "Iconos de confianza" el
   propio <img> hace de insignia (con relleno interno); en
   "Características" hay un <span> envoltorio dedicado. */
.iconos-confianza__icono {
  width: 42px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--iconos-confianza-fondo, var(--miga-2));
  object-fit: contain;
  flex-shrink: 0;
}
.iconos-confianza__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.iconos-confianza__titulo {
  font-size: .88rem;
  font-weight: 700;
  color: var(--tinta);
}
.iconos-confianza__subtitulo {
  font-size: .8rem;
  color: var(--tinta-suave);
}

/* Características de este producto (metabox por producto, encima del
   cuadro de SEO en el editor). */
.caracteristicas-producto__icono-envoltorio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--caracteristicas-fondo, var(--miga-2));
  flex-shrink: 0;
}
.caracteristicas-producto__icono {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.caracteristicas-producto__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.caracteristicas-producto__titulo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--tinta);
}
.caracteristicas-producto__subtitulo {
  font-size: .78rem;
  color: var(--tinta-suave);
}

/* Valoraciones (estrellas + "(24 reseñas)") — WooCommerce ya trae su
   propio marcado y CSS de estrellas; aquí solo se ajusta color y
   espaciado para que encaje con la tipografía de la plantilla. */
.bloque-producto--valoraciones .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: -.4rem 0 1rem;
}
.bloque-producto--valoraciones .star-rating {
  font-size: .95rem;
}
.bloque-producto--valoraciones .star-rating span::before,
.bloque-producto--valoraciones .star-rating::before {
  color: var(--dorado);
}
.bloque-producto--valoraciones .woocommerce-review-link {
  font-size: .85rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bloque-producto--valoraciones .woocommerce-review-link:hover { color: var(--primario); }

/* Guía de tamaños — enlace junto al selector de Tamaño (Agencia Estuma
   → Producto página → Variaciones). Se añade por JS, dentro de la
   columna de Tamaño, justo debajo del selector. */
.aeop-guia-tamanos {
  grid-column: 1;
  display: inline-block;
  font-size: .82rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: .6rem;
}
.aeop-guia-tamanos:hover { color: var(--primario); }

/* Precio "por defecto" (el rango, antes de elegir variación) — vive ya
   en el mismo hueco de la rejilla que el precio de la variación
   elegida (columna 2, fila 1, junto a Tamaño), así que no hace falta
   esperar a seleccionar nada para verlo alineado a la derecha. */
.aeop-precio-base {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-weight: 800 !important;
  font-size: 2rem !important;
  line-height: 1.2;
  overflow-wrap: break-word;
}
/* El HTML real que imprime WooCommerce aquí no siempre envuelve el
   <del>/<ins> en un elemento con clase "price" (depende del tipo de
   producto), y cuando el precio es un RANGO sin oferta ("35€ - 45€")
   ni siquiera lleva <ins>/<del>, es texto suelto — por eso el tamaño
   grande se pone en la BASE (arriba), no en el <ins>: así llega por
   igual al precio con oferta, al precio simple y al rango, sin tener
   que adivinar qué etiquetas trae cada caso. Solo el <del> (el precio
   tachado) es la excepción que se encoge aparte, más abajo. */
.aeop-precio-base .price,
.aeop-precio-base .price *,
.aeop-precio-base > ins,
.aeop-precio-base > ins *,
.aeop-precio-base > del,
.aeop-precio-base > del * {
  color: var(--precio-color-variacion, var(--precio-color-oferta, var(--primario-osc))) !important;
}
.aeop-precio-base .price ins,
.aeop-precio-base > ins {
  text-decoration: none !important;
}
.aeop-precio-base .price del,
.aeop-precio-base > del {
  font-weight: 400 !important;
  font-size: .55em !important;
  opacity: .7;
}
.aeop-precio-base.aeop-precio-oculto-variacion {
  display: none;
}
@media (max-width: 480px) {
  .aeop-precio-base {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1.2rem;
  }
}
/* El bloque de precio de rango independiente (bloque--precio, el que
   viene de su propio bloque en "Bloques de la ficha") se oculta en
   cuanto el JS consigue insertar el precio dentro de la caja (tanto en
   productos con variaciones como en simples — ver .aeop-precio-base),
   para no duplicar la información. Si por lo que sea el JS no llega a
   insertarlo, este bloque se queda visible como red de seguridad. */
.bloque-producto--precio.aeop-precio-reemplazado {
  display: none;
}

/* Productos SIN variaciones: la disponibilidad ("50 disponibles") y el
   precio quedan uno junto al otro (disponibilidad a la izquierda,
   precio a la derecha), igual que Tamaño/Precio en los productos con
   variaciones — y la fila de cantidad + botón debajo, a todo lo ancho. */
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
/* Por defecto, CUALQUIER otro hijo de la caja (avisos de terceros,
   el botón de pago rápido de la pasarela — Google Pay/tarjeta —,
   campos extra de otros plugins…) ocupa el ancho completo de las 2
   columnas. Sin esto, cualquier elemento nuevo que no seamos
   nosotros los que imprimamos cae en una sola columna (media caja) en
   vez de a ancho completo, como le pasaba al botón de pago rápido. */
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra > * {
  grid-column: 1 / -1;
}
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra > .stock {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: center;
}
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra > .aeop-precio-base {
  grid-column: 2;
  grid-row: 1;
}
/* Cuando NO hay disponibilidad que mostrar junto al precio (columna 1
   vacía), el precio se queda sin querer pegado a la derecha, en la
   columna 2 — se le hace ocupar las dos columnas y centrarse, en vez
   de quedarse descuadrado hacia un lado. */
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra:not(:has(> .stock)) > .aeop-precio-base {
  grid-column: 1 / -1;
  text-align: center;
}
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra:not(:has(> .stock)) > .aeop-precio-base .price {
  text-align: center;
}
.woocommerce div.product.product-type-simple .bloque-producto--formulario-compra > form.cart {
  grid-row: 2;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--miga-2);
}
@media (max-width: 480px) {
  .woocommerce div.product.product-type-simple .bloque-producto--formulario-compra {
    grid-template-columns: 1fr;
  }
  .woocommerce div.product.product-type-simple .bloque-producto--formulario-compra > .aeop-precio-base {
    grid-column: 1;
    grid-row: 2;
    margin-top: .6rem;
  }
  .woocommerce div.product.product-type-simple .bloque-producto--formulario-compra > form.cart {
    grid-row: 3;
  }
}

/* Botón "Comprar ahora" — variante secundaria (contorno) junto al
   botón principal "Añadir a la cesta", para diferenciarlos a simple
   vista sin depender de un segundo color configurable. */
.bloque-producto--formulario-compra .aeop-comprar-ahora {
  border-radius: 999px;
  padding: 1em 2.4rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  background: transparent !important;
  color: var(--tinta) !important;
  border: 2px solid var(--miga-2) !important;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.bloque-producto--formulario-compra .aeop-comprar-ahora:hover {
  border-color: var(--primario) !important;
  background: var(--miga-2) !important;
}
.bloque-producto--formulario-compra .aeop-comprar-ahora:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Iconos de pago (Agencia Estuma → Producto página → Iconos de pago) —
   texto de cabecera + fila de logos, debajo del formulario de compra. */
.iconos-pago {
  margin-top: 1.6rem;
}
.iconos-pago__texto {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  text-align: center;
  margin: 0 0 .8rem;
}
.iconos-pago__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.iconos-pago__item img {
  height: 26px;
  width: auto;
  max-width: 52px;
  object-fit: contain;
}

/* Pestañas (Descripción larga) */
.bloque-producto--descripcion-larga .woocommerce-tabs { margin-top: 1rem; }
.bloque-producto--descripcion-larga .woocommerce-tabs ul.tabs::before { border-color: rgba(91,58,30,.15); }
.bloque-producto--descripcion-larga .woocommerce-tabs ul.tabs li {
  background: var(--miga-2);
  border-color: rgba(91,58,30,.15);
  border-radius: 10px 10px 0 0;
  font-weight: 600;
}
.bloque-producto--descripcion-larga .woocommerce-tabs ul.tabs li.active { background: var(--blanco); }
.bloque-producto--descripcion-larga .woocommerce-tabs .panel { line-height: 1.8; color: var(--tinta-suave); font-size: 1.02rem; }

/* Productos relacionados — reutiliza el mismo estilo de tarjeta que el
   resto del sitio (misma plantilla content-product.php de WooCommerce). */
.bloque-producto--relacionados {
  padding-top: 3.5rem;
  border-top: 1px solid rgba(63,32,33,.1);
}
.bloque-producto--relacionados .related.products {
  position: relative;
}
.bloque-producto--relacionados .related.products > h2 {
  font-family: var(--f-display);
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 2.2rem;
}
/* Rejilla de relacionados por CSS Grid — más fiable que un cálculo
   manual con flexbox (que en algunas filas no encajaba bien el
   redondeo del ancho). Grid reparte el espacio exacto entre columnas
   sin que haya que restar el gap a mano. */
.bloque-producto--relacionados ul.products,
.bloque-categoria--secciones-productos ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
}
.bloque-producto--relacionados ul.products.columns-3,
.bloque-categoria--secciones-productos ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.bloque-producto--relacionados ul.products.columns-2,
.bloque-categoria--secciones-productos ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.bloque-producto--relacionados ul.products > li.product,
.bloque-categoria--secciones-productos ul.products > li.product {
  width: auto !important;
  flex: unset !important;
}
@media (max-width: 1024px) {
  .bloque-producto--relacionados ul.products,
  .bloque-categoria--secciones-productos ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 780px) {
  .bloque-producto--relacionados ul.products,
  .bloque-categoria--secciones-productos ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }
}
/* En móvil, en vez de apilar en columnas, se desliza horizontalmente,
   con una fila de controles (flecha, puntos, flecha) DEBAJO — nunca
   encima de las imágenes, para no taparle el clic a la tarjeta. */
@media (max-width: 600px) {
  .bloque-producto--relacionados ul.products,
  .bloque-categoria--secciones-productos ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1.25rem !important;
    padding: 0 1.25rem .6rem !important;
  }
  .bloque-categoria--subcategorias .categoria-subcategorias {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1.25rem !important;
    padding: 0 1.25rem .6rem !important;
    gap: .8rem !important;
  }
  .bloque-producto--relacionados ul.products::-webkit-scrollbar,
  .bloque-categoria--secciones-productos ul.products::-webkit-scrollbar,
  .bloque-categoria--subcategorias .categoria-subcategorias::-webkit-scrollbar { display: none; }
  .bloque-producto--relacionados ul.products > li.product,
  .bloque-categoria--secciones-productos ul.products > li.product {
    flex: 0 0 78% !important;
    scroll-snap-align: start;
  }
  /* Un poco más ancha que "la mitad exacta" a propósito: incluso con
     solo 2 subcategorías (el caso más habitual) debe quedar overflow
     real que desplazar, si no las flechas saldrían deshabilitadas. */
  .bloque-categoria--subcategorias .categoria-subcategoria {
    flex: 0 0 62% !important;
    scroll-snap-align: start;
  }
  /* Fila de controles: flecha · puntos · flecha, todo en línea debajo
     de la lista — nunca superpuesto a las imágenes. */
  .relacionados-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  .relacionados-flecha {
    position: static;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 1.5px solid #E5E7EB;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    color: var(--primario-osc, #12293A);
    cursor: pointer;
    padding: 0;
  }
  .relacionados-flecha:disabled { opacity: .35; cursor: default; }
  .relacionados-flecha::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  .relacionados-flecha--prev::before { transform: rotate(135deg); margin-left: 3px; }
  .relacionados-flecha--next::before { transform: rotate(-45deg); margin-right: 3px; }
  .relacionados-puntos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
  }
  .relacionados-puntos button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #D9DEE2;
    cursor: pointer;
    transition: background .2s, transform .2s;
  }
  .relacionados-puntos button.activo {
    background: var(--primario);
    transform: scale(1.25);
  }
}
@media (min-width: 601px) {
  .relacionados-controles { display: none; }
}
.bloque-producto--relacionados .relacionados-boton-envoltorio {
  text-align: center;
  margin: 2.4rem 0 0;
}
.seccion__boton-envoltorio {
  text-align: center;
  margin: 2.4rem 0 0;
}
.carrito-vacio-boton-envoltorio {
  text-align: center;
  margin-top: 1.4rem;
}

/* Avisos */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--dorado);
  background: var(--miga-2);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--dorado-osc); }

/* Carrito y checkout */
.woocommerce table.shop_table {
  border: 1px solid rgba(91,58,30,.15);
  border-radius: var(--radio);
  overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--miga-2); }
/* En "Mi cuenta" (ej. la tabla de "Pedidos") y en el Carrito, sin el
   fondo beige que se quitó también del menú de pestañas. */
.woocommerce-account table.shop_table th,
.woocommerce-cart table.shop_table th { background: #fff; }
/* Igual que la cabecera de la tabla de pedidos: en "Mi cuenta" (aquí,
   el aviso de "No se han encontrado métodos guardados" en Métodos de
   pago) tampoco debe llevar el fondo beige — se deja en blanco. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  background: #fff;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 2px solid var(--miga-2);
  border-radius: 10px;
  padding: .7em 1em;
  background: var(--blanco);
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  background: var(--miga-2);
  border-radius: var(--radio);
}

/* ==========================================================================
   Página de Carrito — WooCommerce trae de fábrica un layout de ancho
   fijo/flotado (pensado para columnas estrechas de temas antiguos) que
   no se adapta a un contenedor ancho como el nuestro. Se reconstruye
   en dos columnas: la tabla de productos a la izquierda (ancha de
   verdad) y los totales como una tarjeta a la derecha.
   ========================================================================== */
.carrito-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  width: 100%;
}
.carrito-grid .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.woocommerce-cart .bloque-categoria--secciones-productos {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2.5rem;
}
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce-cart table.cart {
  width: 100% !important;
  border-collapse: collapse;
  border: 1px solid var(--miga-2);
  border-radius: var(--radio);
  overflow: hidden;
}
.woocommerce-cart table.cart th {
  background: #fff;
  padding: 1rem;
  text-align: left;
  font-family: var(--f-display);
  border-bottom: 1px solid var(--miga-2);
}
.woocommerce-cart table.cart td { padding: 1rem; vertical-align: middle; border-top: 1px solid var(--miga-2); }
.woocommerce-cart table.cart td.product-remove { text-align: center; width: 40px; }
.woocommerce-cart table.cart img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.woocommerce-cart table.cart .product-name a { font-weight: 600; color: var(--corteza-osc); }
.woocommerce-cart .coupon {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.woocommerce-cart .coupon .input-text {
  padding: .8em 1em;
  border: 1.5px solid var(--miga-2);
  border-radius: 10px;
  flex: 1 1 220px;
  min-width: 180px;
}
.woocommerce-cart button[name="update_cart"] { margin-top: 1.2rem; }
.woocommerce-cart .cart_totals {
  /* WooCommerce trae por defecto .cart_totals con float:right y un
     ancho del 48% — de ahí que quedara pegado a la derecha y estrecho.
     Lo forzamos a ancho completo, debajo de la tabla de productos. */
  float: none !important;
  width: 100% !important;
  margin-top: 2rem;
  background: var(--carrito-totales-fondo, var(--miga-2));
  border-radius: var(--radio);
  padding: 1.6rem;
}
.woocommerce-cart .cart_totals h2 { font-size: var(--tam-h4); margin: 0 0 1rem; }
.woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(63,32,33,.12);
  text-align: left;
  vertical-align: top;
}
.woocommerce-cart .cart_totals table th {
  width: 34%;
  font-weight: 700;
  padding-right: 1rem;
}
.woocommerce-cart .cart_totals table tr:first-child th,
.woocommerce-cart .cart_totals table tr:first-child td { border-top: none; padding-top: 0; }
.woocommerce-cart .cart_totals table tr:last-child th,
.woocommerce-cart .cart_totals table tr:last-child td {
  padding-bottom: 0;
  font-size: 1.15rem;
}
/* Opciones de envío como cajas con borde (como en "Opciones de envío"
   de Finalizar compra), en vez de radios sueltos sin ningún límite
   visual. */
.woocommerce-cart .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart .woocommerce-shipping-methods li {
  border: 1.5px solid var(--miga-2);
  border-radius: 10px;
  padding: .8em 1em;
  margin-bottom: .6rem;
}
.woocommerce-cart .woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--primario);
}
.woocommerce-cart .woocommerce-shipping-methods li input[type="radio"] { margin-right: .5em; }
.woocommerce-cart .woocommerce-shipping-destination {
  border: 1.5px solid var(--miga-2);
  border-radius: 10px;
  padding: .9em 1em;
  margin-top: .8rem;
}
.woocommerce-cart .shipping-calculator-button { display: inline-block; margin-top: .6rem; }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 1.2rem; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--primario);
  color: #fff;
  padding: .9em 1.4em;
  border-radius: 10px;
  font-weight: 600;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--primario-osc); }
@media (max-width: 600px) {
  .woocommerce-cart table.cart thead { display: none; }
  .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody, .woocommerce-cart table.cart tr, .woocommerce-cart table.cart td { display: block; width: 100%; }
  .woocommerce-cart table.cart tr { padding: 1rem 0; border-top: 1px solid var(--miga-2); }
  .woocommerce-cart table.cart td { border: none; padding: .3rem 0; }
  .woocommerce-cart table.cart td.product-remove { text-align: left; }
}

/* Migas de pan (nunca mejor dicho) — para tienda/categoría; en la
   ficha de producto, el bloque de migas tiene su propio color más
   abajo y no debe verse afectado por esta regla. */
.woocommerce .woocommerce-breadcrumb:not(.bloque-producto--migas *):not(.bloque-categoria--migas *) { color: rgba(44,33,22,.6); font-size: .85rem; margin-bottom: 2rem; }
.woocommerce .woocommerce-breadcrumb:not(.bloque-producto--migas *):not(.bloque-categoria--migas *) a { color: var(--dorado-osc); }

/* Paginación */
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0 .2rem; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 999px;
  min-width: 2.4em;
  padding: .6em;
  font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--corteza); color: var(--blanco); }

/* ==========================================================================
   7. Contenido y blog
   ========================================================================== */
.pagina-cabecera { background: #004F71; color: #fff; padding: 3.5rem 0; text-align: center; position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); }
.pagina-cabecera h1 { color: #fff; }
.pagina-cabecera .eyebrow { color: rgba(255,255,255,.85); }
.pagina-cabecera__video, .pagina-cabecera__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pagina-cabecera__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 1; }
.pagina-cabecera__contenido { position: relative; z-index: 2; }
/* ".pagina-cabecera .pagina-cabecera__migas" con el ancestro explícito
   (no solo ".pagina-cabecera__migas") para que esta regla de posición
   absoluta solo se aplique cuando de verdad vive dentro del banner de
   página/entrada — nunca se comparte con ".categoria-migas". */
.pagina-cabecera .pagina-cabecera__migas.woocommerce-breadcrumb {
  position: absolute;
  top: 1.5rem;
  left: 0;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.5rem;
  margin: 0;
  text-align: left;
  font-size: var(--migas-tamano, .78rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--migas-color-texto, #ffffff) !important;
}
.pagina-cabecera .pagina-cabecera__migas.woocommerce-breadcrumb a { color: var(--migas-color-enlace, var(--migas-color-texto, #ffffff)) !important; }
.pagina-cabecera .pagina-cabecera__migas.woocommerce-breadcrumb a:hover { color: var(--migas-color-enlace-hover, var(--migas-color-enlace, #ffffff)) !important; }
/* Modo "Solo migas de pan" (Fondo de la cabecera → Tipo de fondo) —
   sin título ni imagen, la franja se queda estrecha (sin el padding
   pensado para un título grande) y las migas dejan de ir en posición
   absoluta (ya no hay nada más detrás con lo que superponerse). */
.pagina-cabecera--solo-migas { padding: 1rem 0; }
.pagina-cabecera--solo-migas .pagina-cabecera__migas.woocommerce-breadcrumb {
  position: static;
  padding: 0 1.5rem;
}
/* Migas de pan (Agencia Estuma → Productos → Migas de pan) */
.migas-de-pan {
  display: block;
  font-size: .82rem;
  color: var(--tinta-suave);
  padding: 1rem 0;
}
.migas-de-pan a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 2px; }
.migas-de-pan a:hover { color: var(--primario); }
.migas-de-pan__separador { opacity: .5; padding: 0 .1rem; }
.contenido { padding: 3.5rem 0; }
.pagina-cabecera + .contenido { padding-top: 2rem; }
body.single-product .contenido,
body.single-product main#contenido,
body.woocommerce-shop .contenido,
body.woocommerce-shop main#contenido,
body.tax-product_cat .contenido,
body.tax-product_cat main#contenido,
body.aetienda-migas-completas .contenido,
body.aetienda-migas-completas main#contenido {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.single-product .woocommerce div.product {
  margin-top: 0 !important;
}
/* La regla de arriba (aetienda-migas-completas) quita el padding
   superior del contenido para tienda/categoría/producto/cesta/checkout,
   pensada para diseños con imagen detrás de la cabecera. La página
   "Mi cuenta" no tiene esa imagen y su navegación por pestañas no
   aporta suficiente separación propia, así que quedaba pegada a la
   cabecera — le devolvemos el mismo respiro que tiene el resto de
   páginas normales tras la cabecera. */
body.woocommerce-account .contenido,
body.woocommerce-account main#contenido {
  padding-top: 2rem !important;
}
@media (max-width: 900px) {
  body.woocommerce-account .contenido,
  body.woocommerce-account main#contenido { padding-top: 1.5rem !important; }
}
.contenido--estrecho .entrada { max-width: 760px; margin-inline: auto; }
.entrada p { margin: 0 0 1.4em; line-height: 1.75; }
.entrada p:last-child { margin-bottom: 0; }
.entrada img { border-radius: var(--radio); }

.busqueda-seccion { margin-bottom: 3.5rem; }
.busqueda-seccion:last-of-type { margin-bottom: 0; }
.busqueda-seccion__titulo {
  border-bottom: 2px solid var(--miga-2, #F3EADA);
  padding-bottom: .75rem;
  margin-bottom: 1.75rem;
}
.busqueda-seccion__contador { color: var(--gris, #6B7280); font-weight: 400; font-size: .7em; }

.lista-entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.tarjeta-entrada {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}
.tarjeta-entrada img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.tarjeta-entrada--producto img { aspect-ratio: 1 / 1; object-fit: cover; }
.tarjeta-entrada__cuerpo { padding: 1.4rem 1.4rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.tarjeta-entrada__fecha { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dorado-osc); font-weight: 700; }
.tarjeta-entrada h3 { margin: .4rem 0 .5rem; font-size: var(--escala-titulo-tarjeta, var(--tam-h3)); }
.tarjeta-entrada h3 a { color: var(--corteza-osc); }
.tarjeta-entrada__cuerpo p { font-size: var(--escala-texto, var(--tam-h4)); margin: 0 0 1rem; }
.tarjeta-entrada__boton { margin-top: auto; align-self: center; }

/* ==========================================================================
   8. Pie con máscara corporativa (firma visual de la marca)
   ========================================================================== */
/* ---- Navegación de "Mi cuenta" (con iconos) ---- */
.woocommerce-account .woocommerce-MyAccount-content { margin-top: 0; }
.aeop-cuenta-navegacion { margin-bottom: 2.5rem; margin-top: 2rem; }
.aeop-cuenta-navegacion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.aeop-cuenta-navegacion li a {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.1rem; border-radius: 10px;
  color: var(--tinta); font-weight: 600; font-size: .95rem;
  transition: background var(--transicion), color var(--transicion);
}
.aeop-cuenta-navegacion li a:hover { background: #fff; }
.aeop-cuenta-navegacion li.is-active a { background: var(--primario); color: #fff; }
.aeop-cuenta-navegacion__icono { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.aeop-cuenta-navegacion__icono svg { width: 100%; height: 100%; }
/* Los títulos "Dirección de facturación" / "Dirección de envío" (y
   cualquier título dentro del contenido de Mi cuenta) heredaban el
   tamaño de h2/h3 general del sitio, pensado para portada/entradas —
   aquí quedaban desproporcionados. Los reducimos a un tamaño acorde
   al resto de la página de cuenta. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-size: 1.1rem;
  margin: 0 0 .3rem;
}
/* WooCommerce, por defecto, pone el enlace "Editar"/"Añadir" flotando
   a la derecha del título — aquí lo queremos junto al título, a la
   izquierda. */
.woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  text-align: left;
}
.woocommerce-Address-title a {
  float: none;
  text-align: left;
}
@media (min-width: 782px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 260px; }
  .woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 300px); }
}
@media (max-width: 781px) {
  /* En móvil, en vez de pestañas en fila, se muestran como una
     cuadrícula con bordes tipo tabla: icono arriba, texto debajo,
     dos columnas. Si el número de pestañas visibles es impar, la
     última ocupa el ancho completo de su fila. */
  .aeop-cuenta-navegacion ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--miga-2, #E5DFD3);
    border-left: 1px solid var(--miga-2, #E5DFD3);
    border-radius: 10px;
    overflow: hidden;
  }
  .aeop-cuenta-navegacion li {
    border-right: 1px solid var(--miga-2, #E5DFD3);
    border-bottom: 1px solid var(--miga-2, #E5DFD3);
  }
  .aeop-cuenta-navegacion li:nth-child(odd):last-child { grid-column: 1 / -1; }
  .aeop-cuenta-navegacion li a {
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    padding: 1.2rem .6rem;
    border-radius: 0;
    height: 100%;
  }
  .aeop-cuenta-navegacion li.is-active a { background: var(--primario); color: #fff; }
  .aeop-cuenta-navegacion__icono { width: 22px; height: 22px; }
}

.pie {
  position: relative;
  background: var(--miga);
  color: var(--secundario);
  padding: 0 0 2rem;
  margin-top: 0;
  font-family: var(--f-footer, var(--f-body));
  font-weight: var(--peso-footer, 400);
  line-height: var(--altura-footer, 1.6);
}
/* Fondo blanco → se funde con la máscara (que es sobre blanco) */
.pie__contenido { padding: 3rem 0 2rem; }
.pie a { color: var(--pie-color-enlaces, var(--primario-osc)); font-weight: 700; }
.pie a:hover { color: var(--secundario); }

/* Cabecera del pie: logo + texto, centrados */
.pie__cabecera {
  text-align: center;
  max-width: 42em;
  margin: 0 auto 3rem;
}
.pie__cabecera .custom-logo-link,
.pie__logo-enlace { display: inline-block; margin-bottom: 1rem; }
.pie__cabecera .custom-logo,
.pie__logo-propio { max-width: 180px; max-height: 70px; width: auto; height: auto; margin-inline: auto; }
.pie__nombre {
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--secundario);
  margin: 0 0 1rem;
}
.pie__texto { color: var(--pie-color-texto, var(--tinta-suave)); margin: 0; }

/* Rejilla de 4 columnas: Tienda / Contacto / Horario / Avisos legales */
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  text-align: var(--footer-align, left);
}
.pie__rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.pie__rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.pie__rejilla--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .pie__rejilla,
  .pie__rejilla--3,
  .pie__rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pie__rejilla,
  .pie__rejilla--2,
  .pie__rejilla--3,
  .pie__rejilla--4 { grid-template-columns: 1fr; }
}
.pie h4 {
  color: var(--pie-color-titulos, var(--secundario));
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--f-body);
  font-weight: 700;
  border-bottom: 3px solid var(--primario);
  padding-bottom: .5rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .55rem; color: var(--pie-color-texto, var(--tinta-suave)); display: flex; align-items: center; justify-content: var(--footer-justify, flex-start); gap: .5rem; }
.pie__icono-linea { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }

/* Redes sociales, centradas, debajo de la rejilla */
.pie__redes {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--primario);
  color: var(--blanco) !important;
  border-radius: 999px;
  font-weight: 700;
  overflow: hidden;
  transition: background var(--transicion), transform var(--transicion);
}
.pie__red:hover { background: var(--secundario); transform: translateY(-3px); }
.pie__red img { width: 20px; height: 20px; object-fit: contain; }

.pie__premios {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.pie__premios-insignias {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.pie__premios-insignias img { max-height: 90px; width: auto; object-fit: contain; }
.pie__premios-texto {
  font-size: .85rem;
  color: var(--pie-color-copyright, var(--tinta-suave));
  margin: 0;
}

.pie__legal {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 1.5rem;
  font-size: .85rem;
  color: var(--pie-color-copyright, var(--tinta-suave));
  text-align: center;
}

/* ==========================================================================
   9. Utilidades y accesibilidad
   ========================================================================== */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.salto-contenido {
  position: absolute;
  left: -9999px;
  background: var(--corteza);
  color: var(--blanco);
  padding: .8em 1.4em;
  z-index: 999;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   10. Parches: ocultar título/tagline duplicados y widgets accidentales
   ========================================================================== */
/* Widgets de Elementor que muestran título/tagline redundantes en portada
   (el tema ya muestra el logo en la cabecera; título+tagline se convierten en ruido) */
body.home .elementor-widget-site-title,
body.home .elementor-widget-site-tagline,
body.home .elementor-widget-page-title:not(.tema-permite-titulo),
/* Bloques Gutenberg */
body.home .wp-block-site-title,
body.home .wp-block-site-tagline,
body.home .wp-block-post-title,
/* Clásicos WP */
body.home > .site-title,
body.home > .site-description {
  display: none !important;
}
/* Escape hatch: añade la clase .tema-permite-titulo a un widget de Elementor
   para dejarlo visible aunque coincida con las reglas anteriores. */

/* ==========================================================================
   12. Firma de agencia — badge "Arquitectura publicitaria · Estuma"
   ========================================================================== */
.pie a.pie__estuma {
  display: block;
  text-align: center;
  width: 100%;
  padding: .7rem 1rem;
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 400;
  color: var(--pie-color-credito, var(--pie-color-copyright, var(--tinta-suave)));
  background: var(--pie-color-credito-fondo, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .01em;
  transition: color var(--transicion), background var(--transicion);
}
.pie a.pie__estuma:hover { color: var(--pie-color-credito-hover, var(--secundario)); }

/* ==========================================================================
   Slider móvil para rejillas (Destacados / Productos / Entradas)
   Activable por módulo desde Agencia Estuma → Home. Sin JavaScript:
   scroll horizontal nativo con "snap" a cada tarjeta, más ligero y con
   mejor soporte táctil que un slider por JS.
   ========================================================================== */
@media (max-width: 600px) {
  ul.products.columns-4.grid-slider-movil,
  .categorias.grid-slider-movil,
  .lista-entradas.grid-slider-movil {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem !important;
    padding-bottom: .6rem;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .grid-slider-movil > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .grid-slider-movil::-webkit-scrollbar { height: 5px; }
  .grid-slider-movil::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; }
  .grid-slider-movil::-webkit-scrollbar-track { background: transparent; }
}

/* Módulo Vitrina — rejilla de imágenes destacadas a pantalla completa */
.vitrina {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.vitrina--1col { grid-template-columns: 1fr; }
.vitrina--3col { grid-template-columns: repeat(3, 1fr); }
.vitrina--4col { grid-template-columns: repeat(4, 1fr); }
.vitrina__tarjeta {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
}
.vitrina--1col .vitrina__tarjeta { min-height: 80vh; }
.vitrina__tarjeta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vitrina__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
  z-index: 1;
}
.vitrina__contenido {
  position: relative;
  z-index: 2;
  padding: 2.4rem;
  color: #fff;
  text-align: left;
}
.vitrina__titulo {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: #fff;
  margin: 0 0 .3rem;
}
.vitrina__subtitulo {
  font-size: .92rem;
  color: rgba(255,255,255,.9);
  margin: 0 0 1.1rem;
}
.vitrina__boton {
  display: inline-block;
  padding: .7rem 1.6rem;
  border-radius: 2px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
@media (max-width: 900px) {
  .vitrina, .vitrina--3col, .vitrina--4col { grid-template-columns: 1fr; }
  .vitrina__tarjeta, .vitrina--1col .vitrina__tarjeta { min-height: 65vh; }
  .vitrina__contenido { padding: 1.6rem; }
}