/*
Theme Name: El Presente Perfecto (kadence-child)
Theme URI: https://wp-ai-lab.local
Description: Child theme de Kadence para el taller de serigrafía. Reproduce el boceto epp con un sistema de tokens y componentes limpio (ver ai-specs/wordpress/tema-kadence-child.md). Color y tipografía de uso habitual se cambian desde Apariencia > Personalizar.
Author: Javi + agentes
Version: 0.1.9
Template: kadence
Text Domain: epp-child
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
*/

/* ============================================================
   FUENTES — alojadas en el propio tema (sin peticiones a Google).
   Solo los estilos/pesos que usa el diseño: Roboto Condensed en
   cursiva (400/500/700), Oswald normal (400/500, siempre activa
   para el hero) y Geist Mono normal (300/400/500).
   ============================================================ */
@font-face{
  font-family:"Roboto Condensed";
  font-style:italic;font-weight:400;font-display:swap;
  src:url("assets/fonts/roboto-condensed-italic-400.woff2") format("woff2");
}
@font-face{
  font-family:"Roboto Condensed";
  font-style:italic;font-weight:500;font-display:swap;
  src:url("assets/fonts/roboto-condensed-italic-500.woff2") format("woff2");
}
@font-face{
  font-family:"Roboto Condensed";
  font-style:italic;font-weight:700;font-display:swap;
  src:url("assets/fonts/roboto-condensed-italic-700.woff2") format("woff2");
}
@font-face{
  font-family:"Oswald";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/oswald-normal-400.woff2") format("woff2");
}
@font-face{
  font-family:"Oswald";
  font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/oswald-normal-500.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;font-weight:300;font-display:swap;
  src:url("assets/fonts/geist-mono-normal-300.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/geist-mono-normal-400.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/geist-mono-normal-500.woff2") format("woff2");
}

/* ============================================================
   TOKENS — sistema único. Solo se escribe aire desde aquí.
   ============================================================ */
:root{
  /* Colores (map: ai-specs + design system Novamira) */
  --epp-ink:#242422;
  --epp-paper:#F2F2F0;
  --epp-surface:#FFFFFF;
  --epp-muted:#6B6B67;
  --epp-rule:#D2D2CD;
  --epp-accent:#D8431C;
  --epp-footer:#A21C19;
  --epp-highlight:#F6E7BC;                /* franja crema del método de pago elegido */

  --epp-invert-a:rgba(255,255,255,.66);   /* texto claro sobre tinta/footer */
  --epp-invert-b:rgba(255,255,255,.26);   /* filete claro sobre tinta/footer */

  --epp-over-photo:#F2F2F0;               /* lo que va sobre foto es claro siempre */
  --epp-over-photo-muted:rgba(242,242,240,.74);
  --epp-over-photo-rule:rgba(242,242,240,.3);
  --epp-velo:18,18,17;                    /* rgb del velo de los degradados */

  /* Ritmo de página: 10 pasos clamp(en vw). Nada se escribe a mano. */
  --epp-e1:clamp(6px,0.83vw,12px);
  --epp-e2:clamp(10px,1.11vw,16px);
  --epp-e3:clamp(14px,1.53vw,22px);
  --epp-e4:clamp(16px,1.94vw,28px);
  --epp-e5:clamp(20px,2.64vw,38px);
  --epp-e6:clamp(27px,3.47vw,50px);
  --epp-e7:clamp(32px,4.58vw,66px);
  --epp-e8:clamp(39px,6.11vw,88px);
  --epp-e9:clamp(46px,8.06vw,116px);
  --epp-e10:clamp(67px,10.83vw,156px);

  /* Interior de componentes: escala fija base de 4. */
  --epp-p1:4px;
  --epp-p2:8px;
  --epp-p3:12px;
  --epp-p4:16px;
  --epp-p5:20px;
  --epp-p6:24px;

  /* Geometría */
  --epp-logo-h:clamp(30px,3.4vw,44px);
  /* Alto de la cabecera = hueco superior (24 + 8) + logo + hueco inferior:
     los contenidos bajan del borde de arriba y todo lo que cuelga de la
     cabecera (relleno de página, menú móvil, hero) usa este mismo valor. */
  --epp-hd:calc(var(--epp-p6) + var(--epp-p2) + var(--epp-logo-h) + var(--epp-p3));
  --epp-gut:clamp(24px,6vw,88px);
  --epp-wrap:1120px;
  --epp-gut-rail:clamp(20px,2.6vw,38px);
  --epp-pad-l:max(var(--epp-gut),calc((100vw - var(--epp-wrap)) / 2 + var(--epp-gut)));

  /* Tipografía */
  --epp-font-display:"Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --epp-font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --epp-font-hero:"Oswald",var(--epp-font-display);

  /* Mono: escala ascendente, m4 es el paso del menú */
  --epp-m0:.66rem;
  --epp-m1:clamp(.66rem,.63rem + .14vw,.75rem);
  --epp-m2:clamp(.72rem,.69rem + .16vw,.82rem);
  --epp-m3:clamp(.78rem,.74rem + .2vw,.88rem);
  --epp-m4:clamp(.86rem,.8rem + .35vw,1.02rem);

  /* Display: escala ascendente d1..d6. El boceto tenía d-md/d-lg cruzados. */
  --epp-d1:clamp(.92rem,.82rem + .34vw,1.12rem);
  --epp-d2:clamp(1rem,.85rem + .55vw,1.3rem);
  --epp-d3:clamp(1.1rem,.9rem + .8vw,1.6rem);
  --epp-d4:clamp(1.35rem,.95rem + 1.7vw,2.5rem);
  --epp-d5:clamp(1.5rem,1.05rem + 2vw,2.9rem);
  --epp-d6:clamp(1.6rem,5.5vw,4.5rem);
}

/* ============================================================
   BASE — sobre body, sin wrapper.
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html body{
  margin:0;
  font-family:var(--epp-font-mono);
  font-size:var(--epp-m3);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--epp-ink);
  background:var(--epp-paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
/* Kadence trae "a{color:var(--global-palette-highlight)}" con la misma
   especificidad que "a{color:inherit}" y carga después: sin la paleta
   guardada en la base de datos cae a su azul de fábrica. Con "html body"
   el reset gana sin depender de la paleta ni del orden de carga. */
html body a{color:inherit}
:focus-visible{outline:2px solid var(--epp-accent);outline-offset:3px}

/* Titulares en Roboto Condensed cursiva; la mono siempre abierta y recta. */
h1,h2,h3,.epp-disp{
  font-family:var(--epp-font-display);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
}
.mono{font-family:var(--epp-font-mono);letter-spacing:.03em;text-transform:uppercase}

.epp-wrap{max-width:var(--epp-wrap);margin:0 auto;padding:10px var(--epp-gut)}

/* ============================================================
   CABECERA — fija, sobre-foto.
   ============================================================ */
.epp-hd{
  position:fixed;top:0;left:0;right:0;z-index:60;
  min-height:var(--epp-hd);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--epp-p5);
  padding:calc(var(--epp-p6) + var(--epp-p2)) var(--epp-gut) var(--epp-p3);
  background:transparent;
}
.epp-logo{display:block;line-height:0}
/* Kadence trae ".woocommerce-page img{height:auto}" (1 clase + elemento,
   misma especificidad que ".epp-logo img") en páginas con contexto
   WooCommerce (cesta/checkout/mi-cuenta) — al ganar el empate por orden de
   carga, anulaba el alto fijo y el logo salía a tamaño natural (400×55) en
   vez de con el mismo alto que en el resto del sitio. Se sube la
   especificidad con ".epp-hd" (ya está siempre presente) para no depender
   del orden de carga. */
.epp-hd .epp-logo img{width:auto;height:var(--epp-logo-h)}
.epp-hd-derecha{display:flex;align-items:center;gap:var(--epp-e3)}
.epp-nav{display:flex;align-items:center}
.epp-nav a{
  font-family:var(--epp-font-mono);
  font-size:var(--epp-m4);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--epp-over-photo);
  transition:color .18s ease;
}
.epp-nav a:hover{color:var(--epp-accent)}
/* La raya separa dos palabras: mismo margen a cada lado. */
.epp-nav a:not(.epp-cesta)::before{
  content:"\2014";margin:0 .58em;
}
.epp-cesta,.epp-cuenta{display:flex;align-items:center;gap:var(--epp-p3);color:var(--epp-over-photo)}
.epp-cesta svg,.epp-cuenta svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.epp-cesta span{font-size:var(--epp-m2);letter-spacing:.06em}
.epp-hd-acciones{
  display:flex;align-items:center;gap:var(--epp-e3);
  padding-left:var(--epp-e3);
  border-left:1px solid var(--epp-invert-b);
}
.epp-hd .epp-menu-btn{
  display:none;background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;cursor:pointer;
  font-family:var(--epp-font-mono);font-size:1.5rem;line-height:1;
  color:var(--epp-over-photo);
}
/* Kadence pinta "button" (y su :hover/:focus) con el color de botón de su
   paleta; se vuelve a fijar con la misma especificidad que arriba. */
.epp-hd .epp-menu-btn:hover,.epp-hd .epp-menu-btn:focus{background:none;box-shadow:none}
.epp-hd .epp-menu-btn:hover{color:var(--epp-accent)}
.epp-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Cabecera en tinta: texto e iconos oscuros y el logo invertido. La llevan
   siempre las páginas interiores (fondo papel) y, en la portada, solo mientras
   no hay detrás una foto oscura: epp.js pone ".is-tinta" en la cabecera según
   la sección que tenga debajo ([data-cabecera="claro"] = foto o fondo
   oscuro, cabecera clara). Sin JS la portada queda en claro, como arriba del
   todo. La página «Próximamente» conserva la cabecera clara sobre foto. */
.epp-cabecera-tema .epp-hd{background:var(--epp-paper)}
:is(.epp-cabecera-tema, .epp-hd.is-tinta) .epp-nav a{color:var(--epp-ink)}
:is(.epp-cabecera-tema, .epp-hd.is-tinta) .epp-nav a:hover{color:var(--epp-accent)}
:is(.epp-cabecera-tema, .epp-hd.is-tinta) .epp-cesta,
:is(.epp-cabecera-tema, .epp-hd.is-tinta) .epp-cuenta{color:var(--epp-ink)}
:is(.epp-cabecera-tema, .epp-hd.is-tinta) .epp-hd-acciones{border-left-color:var(--epp-rule)}
:is(.epp-cabecera-tema .epp-hd, .epp-hd.is-tinta) .epp-menu-btn{color:var(--epp-ink)}
:is(.epp-cabecera-tema .epp-hd, .epp-hd.is-tinta) .epp-menu-btn:hover{color:var(--epp-accent)}
:is(.epp-cabecera-tema, .epp-hd.is-tinta) .epp-logo img{filter:invert(1)}
/* Cambio de color suave (el bloque de movimiento reducido ya anula todas las
   transiciones). */
.epp-cesta,.epp-cuenta,.epp-hd .epp-menu-btn{transition:color .25s ease}
.epp-hd-acciones{transition:border-color .25s ease}
.epp-hd .epp-logo img{transition:filter .25s ease}

/* ============================================================
   HERO — solo portada.
   ============================================================ */
.epp-hero{
  position:relative;height:100svh;min-height:420px;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--epp-ink);
}
.epp-hero figure{margin:0;overflow:hidden}
.epp-hero img{width:100%;height:100%;object-fit:cover}
/* Único degradado de la página: da contraste al nombre. */
.epp-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:48%;
  background:linear-gradient(to top,rgba(var(--epp-velo),.78),rgba(var(--epp-velo),.26) 46%,rgba(var(--epp-velo),0));
  pointer-events:none;
}
.epp-hero h1{
  position:absolute;z-index:2;
  left:var(--epp-pad-l);bottom:clamp(20px,4.5vh,54px);
  font-family:var(--epp-font-hero);
  font-weight:500;
  letter-spacing:.01em;              /* Oswald en versales pide tracking positivo */
  font-size:var(--epp-d6);
  line-height:.96;
  color:var(--epp-paper);
}

/* Próximamente: el nombre va en el logo; sobre la foto, solo el aviso. */
.epp-hero-texto{
  position:absolute;z-index:2;
  left:var(--epp-pad-l);right:var(--epp-gut);bottom:clamp(20px,4.5vh,54px);
  display:grid;gap:var(--epp-p3);
}
.epp-hero-texto h1{position:static}
.epp-hero-texto p{
  margin:0;font-family:var(--epp-font-mono);font-size:var(--epp-m4);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--epp-over-photo-muted);
}

/* ============================================================
   BLOQUE DE SECCIÓN — una pantalla cada uno.
   ============================================================ */
.epp-bloque{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--epp-hd) + var(--epp-e5)) 0 var(--epp-e8);
}
.epp-bloque .epp-sec{margin-top:0}
/* Aire entre la etiqueta de sección y su contenido, igual en todas las
   secciones de la portada. */
.epp-bloque > .epp-sec{margin-bottom:var(--epp-e5)}
/* La de "sobre" es más corta: no forzar a pantalla completa. */
.epp-bloque[data-bloque="sobre"]{min-height:auto;padding-bottom:var(--epp-e8)}

/* ============================================================
   ETIQUETA DE SECCIÓN + PESTAÑAS DE TIENDA
   ============================================================ */
.epp-sec{
  scroll-margin-top:calc(var(--epp-hd) + var(--epp-p4));
  display:flex;align-items:flex-start;
  padding-left:var(--epp-pad-l);
  margin-top:var(--epp-e9);
}
.epp-sec b{
  background:var(--epp-ink);color:var(--epp-paper);
  padding:var(--epp-p2) var(--epp-p4);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.epp-sec i{flex:1;height:1px;background:var(--epp-rule)}

/* Las dos mitades de la tienda como pestañas: hacen de título de la página. */
.epp-tabs{align-items:stretch;gap:var(--epp-p3)}
.epp-tabs a{
  display:flex;align-items:center;
  padding:var(--epp-p3) var(--epp-e2) var(--epp-p3);
  border:1px solid var(--epp-rule);
  font-family:var(--epp-font-display);font-style:italic;font-weight:400;
  font-size:var(--epp-d2);line-height:1;
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--epp-muted);text-decoration:none;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.epp-tabs a:hover{color:var(--epp-ink);border-color:var(--epp-ink)}
.epp-tabs a[aria-current]{background:var(--epp-ink);border-color:var(--epp-ink);color:var(--epp-paper)}
.epp-tabs h1{margin:0;display:flex}
.epp-tabs i{margin-left:var(--epp-e3)}

.epp-shop-head[data-solo-texto]{grid-template-columns:minmax(0,1fr)}
.epp-shop-head[data-solo-texto] p{max-width:62ch}

/* Enunciado de apertura: texto gris corto + chip entre corchetes. */
.epp-lead{
  display:grid;gap:var(--epp-p5);justify-items:start;
  padding-top:var(--epp-e6);
}
.epp-lead p{
  margin:0;max-width:40ch;
  font-family:var(--epp-font-mono);font-size:var(--epp-m3);
  line-height:1.75;letter-spacing:.05em;text-transform:uppercase;
  color:var(--epp-muted);
}
.epp-lead span{
  border:1px solid var(--epp-rule);
  padding:var(--epp-p2) var(--epp-p4);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--epp-muted);
}

/* ============================================================
   SOBRE
   ============================================================ */
.epp-about{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:var(--epp-e5) var(--epp-e9);
  padding-top:var(--epp-e7);
  align-items:start;
}
.epp-about-media{position:relative;padding:0 0 var(--epp-e7) 0;justify-self:end}
.epp-about figure{margin:0;max-width:210px}
.epp-about img,.epp-about video{width:100%;aspect-ratio:660/836;object-fit:cover;display:block}
.epp-about figcaption{
  margin-top:var(--epp-p4);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--epp-muted);
}
.epp-about-media{grid-column:1;grid-row:2}
.epp-about-body{display:contents}
.epp-about-body h2{grid-column:2;grid-row:1;font-size:var(--epp-d5);line-height:1.02;max-width:16ch;color:var(--epp-ink)}
.epp-about-texto{grid-column:2;grid-row:2;display:grid;gap:var(--epp-e5)}
.epp-about-body p{margin:0;max-width:44ch;font-size:var(--epp-m3);line-height:1.75;letter-spacing:.03em;color:var(--epp-muted)}

/* ============================================================
   CARRIL DE PROYECTOS
   ============================================================ */
.epp-rail-wrap{padding-top:var(--epp-e7)}
.epp-rail{
  display:flex;gap:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:0 0 var(--epp-p2);
  scroll-padding-left:0;
  scrollbar-width:thin;scrollbar-color:var(--epp-rule) transparent;
  cursor:grab;
}
.epp-rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.epp-rail.is-auto{scroll-snap-type:none}
.epp-rail::-webkit-scrollbar{height:5px}
.epp-rail::-webkit-scrollbar-thumb{background:var(--epp-rule)}
.epp-rail::-webkit-scrollbar-track{background:transparent}
.epp-piece{
  position:relative;flex:0 0 auto;width:50vw;
  scroll-snap-align:start;
  display:grid;gap:var(--epp-p4);
  text-decoration:none;
}
.epp-piece img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:opacity .3s ease}
.epp-piece:hover img{opacity:.86}
.epp-piece div{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:0 var(--epp-gut-rail) var(--epp-e4);
  display:grid;gap:var(--epp-p1);
  color:var(--epp-over-photo);
}
.epp-piece::after{
  content:"";position:absolute;inset:auto 0 0 0;z-index:1;height:46%;
  background:linear-gradient(to top,rgba(var(--epp-velo),.74),rgba(var(--epp-velo),.22) 52%,rgba(var(--epp-velo),0));
  pointer-events:none;
}
.epp-piece h3{font-size:var(--epp-d3);line-height:1;color:inherit}
.epp-piece p{
  margin:0;font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.6;
  color:var(--epp-over-photo-muted);
}

/* ============================================================
   FILAS DE SERVICIO — crecen al hover.
   ============================================================ */
.epp-list{
  --epp-exp:clamp(88px,9vw,116px);
  padding-top:var(--epp-e7);
  padding-bottom:var(--epp-exp);
  transition:padding-bottom .45s cubic-bezier(.2,.7,.3,1);
}
.epp-list:has(.epp-row:hover),
.epp-list:has(.epp-row:focus-within){padding-bottom:0}
.epp-row{
  --epp-h-head:clamp(70px,7.5vw,98px);
  position:relative;display:grid;
  grid-template-columns:clamp(34px,4vw,52px) minmax(0,1fr) minmax(0,clamp(190px,25vw,310px));
  grid-template-rows:var(--epp-h-head) auto;
  column-gap:var(--epp-e5);
  padding:var(--epp-e2) 0;
  border-bottom:1px solid var(--epp-rule);
  text-decoration:none;
}
.epp-row-n{
  grid-column:1;grid-row:1;align-self:center;
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.1em;color:var(--epp-muted);
}
.epp-row h3{
  grid-column:2;grid-row:1;align-self:center;
  font-size:var(--epp-d4);line-height:1;
  color:var(--epp-muted);transition:color .3s ease;
}
.epp-row:hover h3,.epp-row:focus-within h3{color:var(--epp-ink)}
.epp-row-body{
  grid-column:2;grid-row:2;
  height:0;overflow:hidden;
  transition:height .45s cubic-bezier(.2,.7,.3,1);
}
.epp-row:hover .epp-row-body,.epp-row:focus-within .epp-row-body{height:var(--epp-exp)}
.epp-row-body p{
  margin:0;max-width:44ch;
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  line-height:1.7;letter-spacing:.05em;text-transform:uppercase;
  color:var(--epp-muted);
  opacity:0;transition:opacity .35s ease;
}
.epp-row:hover .epp-row-body p,.epp-row:focus-within .epp-row-body p{opacity:1}
/* La imagen conserva SIEMPRE la misma proporción: cambia el ancho, no el ratio. */
.epp-row-img{
  grid-column:3;grid-row:1 / span 2;
  align-self:start;justify-self:end;
  width:calc(var(--epp-h-head) * 1.5);
  aspect-ratio:3 / 2;overflow:hidden;
  transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.epp-row:hover .epp-row-img,.epp-row:focus-within .epp-row-img{width:min(100%,calc((var(--epp-h-head) + var(--epp-exp)) * 1.5))}
.epp-row-img img{width:100%;height:100%;object-fit:cover}

/* Variante sin imagen ni despliegue: texto siempre visible. */
.epp-list[data-solo-texto]{padding-bottom:0;transition:none}
.epp-list[data-solo-texto] .epp-row{
  grid-template-columns:clamp(34px,4vw,52px) minmax(0,1fr);
  cursor:default;
}
.epp-list[data-solo-texto] .epp-row h3{transition:none}
.epp-list[data-solo-texto] .epp-row-body{height:auto;transition:none}
.epp-list[data-solo-texto] .epp-row-body p{opacity:1;transition:none}

/* ============================================================
   TIRA DE TIENDA (portada) + FICHA DE ARCHIVO
   ============================================================ */
.epp-tienda .epp-sec{margin-top:0}
.epp-shelf{
  --epp-hueco:clamp(28px,3.6vw,56px);
  display:flex;gap:var(--epp-hueco);
  overflow-x:auto;overflow-y:hidden;
  padding:var(--epp-e6) var(--epp-gut-rail) var(--epp-p3);
  scrollbar-width:thin;scrollbar-color:var(--epp-rule) transparent;
}
.epp-shelf::-webkit-scrollbar{height:5px}
.epp-shelf::-webkit-scrollbar-thumb{background:var(--epp-rule)}
.epp-item{flex:0 0 calc((100% - 3 * var(--epp-hueco)) / 4);display:grid;text-decoration:none}
.epp-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:opacity .3s ease}
/* Soledad Gómez: fotos de camisa en vertical 2:3, la tarjeta sigue esa
   proporción para que la prenda salga entera, sin recorte. */
.epp-item[data-linea="soledad-gomez"] img{aspect-ratio:2/3}
.epp-item:hover img{opacity:.86}

/* Ficha de archivo: código, título, dos palabras, pie de estado. */
.epp-ficha{
  border-top:1px solid var(--epp-rule);
  margin-top:var(--epp-p4);padding-top:var(--epp-p4);
  display:grid;gap:var(--epp-p3);
}
.epp-ficha p{margin:0}
.epp-ficha-cod{font-family:var(--epp-font-mono);font-size:var(--epp-m1);letter-spacing:.14em;color:var(--epp-muted)}
.epp-ficha-tit{font-family:var(--epp-font-display);font-style:italic;font-size:var(--epp-d3);line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--epp-ink)}
.epp-ficha-sub{font-family:var(--epp-font-mono);font-size:var(--epp-m1);letter-spacing:.1em;color:var(--epp-muted)}
.epp-ficha-pie{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--epp-p4);
  margin-top:var(--epp-p1);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);letter-spacing:.1em;color:var(--epp-ink);
}
.epp-ficha-pie span:last-child{white-space:nowrap}
.epp-item:hover .epp-ficha-tit{color:var(--epp-accent)}
.epp-ficha-ver{margin-top:var(--epp-p1)}
.epp-ficha-ver span{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--epp-muted);
  border-bottom:1px solid var(--epp-rule);
  padding-bottom:var(--epp-p1);
  transition:color .2s ease,border-color .2s ease;
}
.epp-item:hover .epp-ficha-ver span{color:var(--epp-accent);border-color:var(--epp-accent)}

.epp-tienda-pie{padding:var(--epp-e4) var(--epp-gut-rail) 0;display:flex;justify-content:center}
.epp-tienda-pie span{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--epp-muted);
}

/* ============================================================
   BOTÓN / CTA — un solo componente, dos variantes.
   ============================================================ */
.epp-cta,.epp-tienda-pie a,.epp-form-pie button{
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--epp-ink);
  padding:var(--epp-p4) 28px;
  color:var(--epp-ink);background:none;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.epp-cta:hover,.epp-tienda-pie a:hover,.epp-form-pie button:hover{background:var(--epp-ink);color:var(--epp-paper)}
.epp-cta--solido{background:var(--epp-ink);color:var(--epp-paper)}
.epp-cta--solido:hover{background:transparent;color:var(--epp-ink)}

.epp-tienda-pie[data-aire]{padding-top:var(--epp-e7)}

/* ============================================================
   COMPOSICIÓN EDICIONES (portada) — 3 piezas escalonadas.
   ============================================================ */
.epp-ed-compo{
  display:grid;
  grid-template-columns:repeat(3,clamp(210px,23vw,320px));
  justify-content:space-evenly;
  padding:var(--epp-e6) 0 0;
  align-items:start;
}
.epp-ed-compo .epp-item{flex:none;width:auto}
.epp-ed-compo [data-pos="a"]{grid-column:1;grid-row:1;align-self:start}
.epp-ed-compo [data-pos="c"]{grid-column:2;grid-row:1;align-self:end}
.epp-ed-compo [data-pos="b"]{grid-column:3;grid-row:1;align-self:start}
.epp-ed-compo [data-pos="a"] img,.epp-ed-compo [data-pos="c"] img{aspect-ratio:7/5}
.epp-ed-compo [data-pos="b"] img{aspect-ratio:3/4}
/* Piezas pequeñas: paso más bajo en la ficha (adelanto, no tienda). */
.epp-ed-compo .epp-ficha{gap:var(--epp-p2);margin-top:var(--epp-p3);padding-top:var(--epp-p3)}
.epp-ed-compo .epp-ficha-tit{font-size:var(--epp-d1)}

/* ============================================================
   SECTIONES SOBRE FOTOGRAFÍA (se "El taller") y TALLER
   ============================================================ */
.epp-fondo{
  position:relative;
  background-image:url("/wp-content/uploads/2026/09/epp-taller-fondo.webp");
  background-size:cover;background-position:center;background-attachment:fixed;
  color:var(--epp-over-photo);
}
.epp-fondo > *{position:relative;z-index:1}
.epp-fondo .epp-sec{margin-top:0}
.epp-fondo .epp-sec i{background:var(--epp-over-photo-rule)}
.epp-fondo .epp-lead p{color:var(--epp-over-photo)}
.epp-fondo .epp-lead span{color:var(--epp-over-photo-muted);border-color:var(--epp-over-photo-rule)}
.epp-fondo .epp-wrap{width:60%;max-width:1700px;margin:0 auto}

/* Taller: tarjeta de papel casi opaca sobre la foto, tipografía de siempre. */
.epp-bloque[data-bloque="taller"] .epp-wrap{
  background:rgba(255,255,255,.94);
  color:var(--epp-ink);
  display:flex;flex-direction:column;gap:var(--epp-e4);
  padding:var(--epp-e5);
  margin:var(--epp-e6) auto 0;
}
.epp-bloque[data-bloque="taller"] .epp-lead{padding-top:0}
.epp-bloque[data-bloque="taller"] .epp-lead a{overflow-wrap:anywhere}
/* Móvil: la tarjeta ocupa el ancho de página con el mismo margen lateral que
   el resto (el 60% de escritorio la dejaba estrecha y descentrada). */
@media (max-width:660px){
  .epp-bloque[data-bloque="taller"] .epp-wrap{width:auto;max-width:none;margin:var(--epp-e6) var(--epp-gut) 0}
}
.epp-bloque[data-bloque="taller"] .epp-lead p{color:var(--epp-ink)}
.epp-bloque[data-bloque="taller"] .epp-lead span{color:var(--epp-ink);border-color:var(--epp-rule)}

/* Lista sobre foto: el hueco del despliegue es margen, no relleno. */
.epp-list[data-sobre-foto]{
  --epp-exp:calc(3.4 * var(--epp-m2));
  padding:0;
  margin-bottom:var(--epp-exp);
  background:transparent;
  transition:margin-bottom .45s cubic-bezier(.2,.7,.3,1);
}
.epp-list[data-sobre-foto]:has(.epp-row:hover),
.epp-list[data-sobre-foto]:has(.epp-row:focus-within){margin-bottom:0}
.epp-list[data-sobre-foto] .epp-row{
  --epp-h-head:clamp(26px,2.6vw,34px);
  /* Títulos de varias líneas: la fila crece con ellos en vez de solaparse. */
  grid-template-rows:minmax(var(--epp-h-head),auto) auto;
  grid-template-columns:clamp(28px,3vw,40px) minmax(0,1fr) clamp(28px,4vw,40px);
  column-gap:var(--epp-e4);
  padding:var(--epp-p2) 0;
  border-bottom-color:var(--epp-rule);
}
.epp-list[data-sobre-foto] .epp-row:last-child{border-bottom:none}
.epp-list[data-sobre-foto] .epp-row-n{color:var(--epp-ink)}
.epp-list[data-sobre-foto] .epp-row h3{font-size:var(--epp-d2);line-height:1.15;color:var(--epp-ink)}
.epp-list[data-sobre-foto] .epp-row-body p{color:var(--epp-ink);max-width:90%}
.epp-row-mas{
  grid-column:3;grid-row:1;
  align-self:center;justify-self:end;
  font-family:var(--epp-font-mono);font-size:var(--epp-d4);line-height:1;
  color:var(--epp-ink);
}
.epp-row-mas::before{content:"+"}
.epp-row:hover .epp-row-mas::before,
.epp-row:focus-within .epp-row-mas::before{content:"\2212"}

/* ============================================================
   FORMULARIO — líneas de ficha.
   ============================================================ */
.epp-contacto .epp-sec{margin-top:0}
.epp-form{max-width:620px;margin:var(--epp-e6) auto 0;padding:0 var(--epp-gut);display:grid}
.epp-form-cod{
  margin:0 0 var(--epp-e5);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--epp-muted);
}
.epp-campo{
  display:grid;grid-template-columns:minmax(96px,26%) minmax(0,1fr);
  align-items:baseline;gap:var(--epp-p4);
  padding:var(--epp-p4) 0;
  border-bottom:1px solid var(--epp-rule);
}
.epp-campo > span{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--epp-muted);
}
/* ".epp-form" delante: Kadence estiliza input[type=...] (clase + elemento,
   misma especificidad que ".epp-campo input") y, al cargar después, ganaba el
   empate con su borde y color de paleta. */
.epp-form .epp-campo input,.epp-form .epp-campo select,.epp-form .epp-campo textarea{
  width:100%;box-sizing:border-box;
  background:var(--epp-surface);
  border:1px solid var(--epp-rule);border-radius:0;
  padding:var(--epp-p2) var(--epp-p3);margin:0;
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.06em;line-height:1.6;
  color:var(--epp-ink);
  -webkit-appearance:none;appearance:none;
}
.epp-form .epp-campo textarea{resize:vertical;min-height:76px}
.epp-form .epp-campo input::placeholder,.epp-form .epp-campo textarea::placeholder{color:var(--epp-muted);opacity:1}
.epp-form .epp-campo select option{background:var(--epp-surface);color:var(--epp-ink)}
.epp-form .epp-campo input:focus,.epp-form .epp-campo select:focus,.epp-form .epp-campo textarea:focus{outline:none;border-color:var(--epp-accent)}
/* Casillas de aceptación: la del formulario de la home y las del pago
   (términos y piezas de Soledad Gómez, dentro de .place-order) comparten
   aspecto. Las del pago llevan la etiqueta como contenedor (label.checkbox). */
.epp-campo-check,
.epp-woo-page .epp-wrap .place-order label.checkbox{
  display:flex;align-items:flex-start;gap:var(--epp-p3);
  margin:0;padding:var(--epp-p4) 0;
  border-bottom:1px solid var(--epp-rule);
  cursor:pointer;
}
.epp-campo-check input[type="checkbox"],
.epp-woo-page .epp-wrap .place-order label.checkbox input[type="checkbox"]{
  flex:none;width:1.1em;height:1.1em;margin:.2em 0 0;
  accent-color:var(--epp-ink);
}
.epp-campo-check span,
.epp-woo-page .epp-wrap .place-order label.checkbox{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.04em;line-height:1.6;color:var(--epp-ink);
  text-transform:none;
}
.epp-campo-check a{color:var(--epp-ink);text-decoration:underline}
.epp-campo-check a:hover{color:var(--epp-accent)}
.epp-form-nota{
  margin:var(--epp-p3) 0 0;
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.04em;line-height:1.6;color:var(--epp-muted);
}
.epp-form-pie{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--epp-p6);flex-wrap:wrap;
  margin-top:var(--epp-e5);
}
.epp-form-pie small{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--epp-muted);
}
.epp-form-aviso{
  margin:0 0 var(--epp-e5);padding:var(--epp-p4) var(--epp-p5);
  border:1px solid var(--epp-rule);
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);letter-spacing:.04em;
  color:var(--epp-ink);
}
.epp-form-aviso[data-tipo="error"]{border-color:var(--epp-accent)}

/* Ficha de producto: el fondo es el papel del sitio. Kadence pinta #wrapper
   de blanco (superficie de contenido) en la ficha. */
body.single-product #wrapper{background:var(--epp-paper)}

/* ============================================================
   TIENDA — cabecera, filtros, rejilla, densidad.
   ============================================================ */
.epp-bloque-tienda{padding:var(--epp-e6) 0 var(--epp-e9)}
.epp-bloque-tienda .epp-sec{margin-top:0}
.epp-grid[data-aire]{margin-top:var(--epp-e7)}

.epp-shop-head{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--epp-e8);align-items:end;
  padding-top:var(--epp-e7);
}
.epp-shop-head h1{font-size:var(--epp-d5);line-height:1;max-width:12ch}
.epp-shop-head p{
  margin:0;max-width:44ch;
  font-family:var(--epp-font-mono);font-size:var(--epp-m3);
  line-height:1.75;letter-spacing:.05em;text-transform:uppercase;color:var(--epp-muted);
}

.epp-filters{
  display:flex;flex-wrap:wrap;gap:var(--epp-p3);
  padding:var(--epp-e6) 0 var(--epp-e5);
  border-bottom:1px solid var(--epp-rule);
  margin-bottom:var(--epp-e6);
}
/* Pastilla suelta: filtros, talla, color. Enlace u botón, según el caso. */
.epp-pastilla{
  border:1px solid var(--epp-rule);background:none;
  padding:var(--epp-p2) var(--epp-p4);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--epp-muted);text-decoration:none;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.epp-pastilla:hover{color:var(--epp-ink);border-color:var(--epp-ink)}
.epp-pastilla[aria-current],.epp-pastilla[aria-pressed="true"]{
  background:var(--epp-ink);border-color:var(--epp-ink);color:var(--epp-paper);
}
.epp-pastilla[disabled]{cursor:not-allowed;opacity:.4;text-decoration:line-through}
.epp-pastilla[disabled]:hover{color:var(--epp-muted);border-color:var(--epp-rule)}

/* Rejilla del catálogo. Densidad la elige el visitante (2/4/8). */
.epp-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--epp-e5) var(--epp-e2);
  align-items:start;
}
.epp-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--epp-e7) var(--epp-e5)}
.epp-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.epp-grid[data-cols="8"]{grid-template-columns:repeat(8,minmax(0,1fr))}
/* 6: las piezas relacionadas de la ficha (4 fichas a la izquierda, algo más
   grandes que a 8 columnas pero secundarias respecto a la pieza principal). */
.epp-grid[data-cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.epp-grid .epp-item{width:auto;flex:none;min-width:0;grid-template-columns:minmax(0,1fr)}
.epp-grid .epp-ficha p{overflow-wrap:anywhere}
.epp-grid .epp-ficha-ver{display:none}
/* Densidades: solo cambia la letra, el ritmo de la ficha es el mismo. */
.epp-grid[data-cols="2"] .epp-ficha-tit{font-size:var(--epp-d3);line-height:1.05}
.epp-grid[data-cols="4"] .epp-ficha-tit{font-size:var(--epp-m3);line-height:1.15}
.epp-grid[data-cols="4"] .epp-ficha-sub{display:none}
.epp-grid[data-cols="8"] .epp-ficha-tit,.epp-grid[data-cols="8"] .epp-ficha-sub,
.epp-grid[data-cols="6"] .epp-ficha-tit,.epp-grid[data-cols="6"] .epp-ficha-sub{display:none}
.epp-grid[data-cols="8"] .epp-ficha-pie span:last-child,
.epp-grid[data-cols="6"] .epp-ficha-pie span:last-child{display:none}
.epp-grid[data-cols="8"] .epp-ficha-cod,.epp-grid[data-cols="8"] .epp-ficha-pie,
.epp-grid[data-cols="6"] .epp-ficha-cod,.epp-grid[data-cols="6"] .epp-ficha-pie{font-size:var(--epp-m0);letter-spacing:.08em}

/* Barra: filtros a un lado, densidad al otro. */
.epp-barra{display:flex;justify-content:space-between;align-items:center;gap:var(--epp-p6);flex-wrap:wrap}
.epp-densidad{display:flex;align-items:center;gap:var(--epp-p3)}
.epp-densidad > span{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--epp-muted);
  margin-right:var(--epp-p1);
}
.epp-densidad button{
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.1em;
  color:var(--epp-muted);background:none;
  border:1px solid var(--epp-rule);
  padding:var(--epp-p3) var(--epp-p4);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.epp-densidad button:hover{color:var(--epp-ink);border-color:var(--epp-ink)}
.epp-densidad button[aria-pressed="true"]{background:var(--epp-ink);border-color:var(--epp-ink);color:var(--epp-paper)}

/* ============================================================
   PRODUCTO — ficha de archivo (caja con marco).
   ============================================================ */
/* El hueco bajo la cabecera fija ya lo pone #inner-wrap
   (body.epp-cabecera-tema): aquí no se repite, y la altura mínima
   descuenta ese mismo hueco para que foto + caja sigan ocupando una
   pantalla, como en el boceto. */
.epp-producto{
  min-height:calc(100svh - var(--epp-hd) - var(--epp-e5));
  display:grid;
  grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:var(--epp-e6);
  align-items:stretch;
  padding:0 var(--epp-gut) var(--epp-e7);
}
/* La caja de al lado marca la altura; la imagen va en posición absoluta
   dentro del marco (igual que en la ficha de edición), para que una foto
   alta no lo desborde ni una baja lo deje corto. */
.epp-producto-foto{position:relative;height:100%;max-height:78svh;background:var(--epp-paper);overflow:hidden}
/* Kadence (woocommerce.min.css) trae ".woocommerce img{height:auto}", que
   empata con ".epp-producto-foto img" y carga después: la clase del
   contenedor sube la especificidad. */
.epp-producto .epp-producto-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}

.epp-caja{
  /* Alto del contenido, no del de la galería: una caja estirada dejaba un
     hueco vacío entre los datos y el precio. Datos y compra van seguidos. */
  align-self:start;
  border:1px solid var(--epp-rule);
  max-height:78svh;min-height:0;
  display:flex;flex-direction:column;
  font-family:var(--epp-font-mono);
}
.epp-caja-bloque{padding:var(--epp-e4) var(--epp-e5)}
.epp-caja-bloque + .epp-caja-bloque{border-top:1px solid var(--epp-rule)}
.epp-caja-prenda{flex:1 1 auto;overflow-y:auto;min-height:0}
.epp-caja-venta{flex:0 0 auto}
.epp-caja-cod{margin:0 0 var(--epp-p3);font-size:var(--epp-m1);letter-spacing:.16em;text-transform:uppercase;color:var(--epp-muted)}
.epp-caja h1{color:var(--epp-ink);margin:0 0 var(--epp-e3);font-family:var(--epp-font-display);font-weight:400;font-size:var(--epp-d5);line-height:1;text-transform:uppercase;letter-spacing:-.01em}

/* Ficha técnica: rótulo gris / dato en tinta. */
.epp-datos{
  margin:0;display:grid;
  grid-template-columns:minmax(90px,30%) minmax(0,1fr);
  gap:var(--epp-p2) var(--epp-p5);
  font-family:var(--epp-font-mono);
  font-size:var(--epp-m1);letter-spacing:.08em;line-height:1.55;
}
.epp-datos dt{font-weight:400;text-transform:uppercase;color:var(--epp-muted)}
.epp-datos dd{margin:0;color:var(--epp-ink)}

/* Historia recortada a cuatro líneas; el botón la despliega. */
.epp-caja-historia{
  margin:var(--epp-e3) 0 0;
  padding-top:var(--epp-e2);
  border-top:1px solid var(--epp-rule);
  font-size:var(--epp-m1);line-height:1.75;letter-spacing:.04em;
  color:var(--epp-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;
}
.epp-caja-historia.is-abierta{display:block;-webkit-line-clamp:none}
.epp-caja-mas{
  display:none;
  margin-top:var(--epp-p3);padding:0;
  background:none;border:0;cursor:pointer;
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--epp-muted);
  border-bottom:1px solid var(--epp-rule);
  transition:color .2s ease,border-color .2s ease;
}
.epp-caja-mas:hover{color:var(--epp-accent);border-color:var(--epp-accent)}
.epp-caja-mas.is-visible{display:inline-block}

/* Bloque comercial: estado, precio y CTA. */
.epp-caja-venta{display:grid;gap:var(--epp-p4);padding:var(--epp-e2) var(--epp-e5)}
.epp-caja-compra{display:flex;justify-content:space-between;align-items:center;gap:var(--epp-p5);flex-wrap:wrap}
.epp-caja-linea{display:flex;justify-content:space-between;align-items:baseline;gap:var(--epp-p4);font-size:var(--epp-m1);letter-spacing:.12em;text-transform:uppercase;color:var(--epp-muted)}
.epp-caja-precio{margin:0;font-family:var(--epp-font-display);font-size:var(--epp-d3);letter-spacing:-.01em;line-height:1;color:var(--epp-ink)}
.epp-caja-venta button{font-family:var(--epp-font-mono);font-size:var(--epp-m1);letter-spacing:.14em;text-transform:uppercase;color:var(--epp-paper);background:var(--epp-ink);border:1px solid var(--epp-ink);padding:var(--epp-p3) 22px;cursor:pointer;transition:background .2s ease,color .2s ease}
.epp-caja-venta button:hover{background:transparent;color:var(--epp-ink)}

/* ============================================================
   FICHA DE EDICIÓN — datos sueltos, sin caja; galería con minis.
   ============================================================ */
.epp-producto[data-ficha="edicion"]{min-height:0}
@media (min-width:901px){
  .epp-producto[data-ficha="edicion"]{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
}
.epp-producto[data-ficha="edicion"] .epp-caja{
  max-height:none;border:0;justify-content:start;gap:var(--epp-e5);
}
.epp-producto[data-ficha="edicion"] .epp-caja-bloque{padding:0;border-top:0}
.epp-producto[data-ficha="edicion"] .epp-caja-historia{border-top:0;padding-top:0;margin-top:0}

/* Manda la columna de datos: el marco rellena su altura, la imagen va
   en posición absoluta dentro. Así cambiando de foto no descuadra la ficha. */
.epp-producto[data-ficha="edicion"] .epp-producto-foto{
  position:relative;height:auto;max-height:none;
  background:var(--epp-rule);overflow:hidden;
}
.epp-producto[data-ficha="edicion"] .epp-producto-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.epp-galeria{height:100%;display:grid;grid-template-columns:clamp(52px,5vw,76px) minmax(0,1fr);gap:var(--epp-e2)}
.epp-producto-foto{grid-column:2;grid-row:1}
/* La columna de miniaturas mide lo que el marco de la foto (misma altura
   máxima; contain:size evita que sus miniaturas empujen la fila) y la lista
   hace scroll por dentro; las flechas solo aparecen si no caben. */
.epp-minis{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:var(--epp-e2);min-height:0;max-height:78svh;contain:size}
.epp-producto[data-ficha="edicion"] .epp-minis{max-height:none}
.epp-minis-lista{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--epp-e2);overflow:auto;scrollbar-width:none}
.epp-minis-lista::-webkit-scrollbar{display:none}
.epp-minis-lista button{flex:none;padding:0;background:none;cursor:pointer;border:1px solid transparent;opacity:.6;transition:border-color .2s ease,opacity .2s ease}
.epp-minis img{width:100%;aspect-ratio:1/1;object-fit:cover}
.epp-minis-lista button:hover{opacity:1}
.epp-minis-lista button[aria-pressed="true"]{border-color:var(--epp-ink);opacity:1}
.epp-minis-flecha{flex:none;display:flex;align-items:center;justify-content:center;padding:var(--epp-p3) 0;background:none;border:0;color:var(--epp-ink);cursor:pointer;transition:opacity .2s ease}
/* Kadence pinta fondo y sombra en button:hover/focus/active: la clase de la
   tira sube la especificidad. */
.epp-minis .epp-minis-flecha:hover,.epp-minis .epp-minis-flecha:focus,.epp-minis .epp-minis-flecha:active{background:none;box-shadow:none;color:var(--epp-ink)}
.epp-minis .epp-minis-flecha:focus-visible{outline:1px solid var(--epp-ink);outline-offset:-1px}
.epp-minis-flecha[hidden]{display:none}
.epp-minis-flecha[data-dir="1"] svg{transform:rotate(180deg)}
.epp-minis-flecha:disabled{opacity:.25;cursor:default}
/* Vídeo en el marco principal: mismo encaje que la foto. */
.epp-producto .epp-producto-foto img[hidden]{display:none}
.epp-producto .epp-producto-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:var(--epp-paper)}
.epp-producto[data-ficha="edicion"] .epp-producto-foto video{object-fit:cover}
/* Miniatura de vídeo: póster con un triángulo discreto dibujado en CSS. */
.epp-minis .epp-mini-video{position:relative}
.epp-minis .epp-mini-video::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-35%,-50%);border-style:solid;border-width:.4rem 0 .4rem .65rem;border-color:transparent transparent transparent var(--epp-paper);filter:drop-shadow(0 0 2px var(--epp-ink))}

/* Elegir talla: rótulo y opciones seguidos, una elegida a la vez. */
.epp-opcion{display:flex;align-items:center;flex-wrap:wrap;gap:var(--epp-p3) var(--epp-e4);font-family:var(--epp-font-mono);font-size:var(--epp-m1);letter-spacing:.12em;text-transform:uppercase;color:var(--epp-muted)}
.epp-opcion + .epp-opcion{margin-top:var(--epp-p4)}
.epp-opcion-valores{display:flex;gap:var(--epp-p2);flex-wrap:wrap}
.epp-opcion .epp-pastilla{padding:var(--epp-p1) var(--epp-p4)}

/* Especificaciones: <details> nativo, sin JS, frases sueltas. */
.epp-especs{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--epp-p1);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  line-height:1.6;letter-spacing:.05em;color:var(--epp-muted);
}
.epp-caja-cta{justify-self:start;margin-top:var(--epp-e1)}
/* En la edición el precio cierra la presentación, con su aire. */
.epp-producto[data-ficha="edicion"] .epp-caja-precio{margin-top:var(--epp-e3)}

/* ============================================================
   MURO DE EDICIONES — filas izq/der/centro, alturas alternas.
   ============================================================ */
.epp-ediciones{
  --epp-alto:clamp(230px,36vh,420px);
  display:grid;
  gap:var(--epp-e10);
  padding:var(--epp-e7) var(--epp-gut-rail) 0;
}
.epp-ed-fila{display:flex;gap:var(--epp-e9);align-items:flex-start}
.epp-ed-fila[data-pos="izq"]{justify-content:space-between}
.epp-ed-fila[data-pos="der"]{justify-content:space-between;flex-direction:row-reverse}
.epp-ed-fila[data-pos="centro"]{justify-content:center}
.epp-ed-fila:nth-child(3n+2){--epp-alto:clamp(190px,29vh,340px)}
.epp-ed-fila:nth-child(3n){--epp-alto:clamp(260px,41vh,470px)}

.epp-ed-pieza{display:block;text-decoration:none;max-width:100%}
.epp-ed-pieza img{height:var(--epp-alto);width:auto;max-width:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.epp-ed-pieza:hover img{opacity:.86}
.epp-ed-txt{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--epp-p5);
  margin-top:var(--epp-p4);padding-top:var(--epp-p3);
  border-top:1px solid var(--epp-rule);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);
  letter-spacing:.12em;text-transform:uppercase;
}
.epp-ed-txt b{font-weight:400;color:var(--epp-ink)}
.epp-ed-txt span{color:var(--epp-muted)}
.epp-ed-pieza:hover .epp-ed-txt b{color:var(--epp-accent)}

/* ============================================================
   FOOTER — granate, tres bloques, logo que cierra.
   ============================================================ */
.epp-ft{
  margin-top:var(--epp-e10);
  background:var(--epp-footer);color:var(--epp-over-photo);
  padding:var(--epp-e8) 0 var(--epp-e6);
}
.epp-ft-in{display:grid;gap:var(--epp-e8)}
.epp-ft-cols{
  display:grid;
  grid-template-columns:auto auto auto;
  justify-content:space-between;
  gap:var(--epp-e4) var(--epp-e9);
  align-items:start;
}
.epp-ft address + ul{margin-top:var(--epp-e2)}
.epp-ft-mark{margin:0}
/* Mismo tamaño en todas las páginas y nunca por encima del natural (el PNG
   mide 400 px): en páginas con contexto WooCommerce Kadence anulaba el
   max-width y el logo se estiraba hasta el ancho de la columna (~947 px).
   Con ".epp-ft" delante la regla gana sin depender del orden de carga. */
.epp-ft .epp-ft-mark img{width:220px;max-width:100%;height:auto}
.epp-ft h2{
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--epp-invert-a);
  margin:0 0 var(--epp-p5);
}
.epp-ft ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--epp-p3)}
.epp-ft li,.epp-ft address{font-family:var(--epp-font-mono);font-size:var(--epp-m3);letter-spacing:.04em}
/* Kadence trae "a{color:var(--global-palette-highlight)}" en global.min.css,
   con la misma especificidad que el reset "a{color:inherit}" del theme y
   cargada después — gana y deja los enlaces del pie en negro en vez del
   claro del boceto (ver ai-specs, "sobre el rojo el texto va claro"). */
.epp-ft a{text-decoration:none;color:var(--epp-over-photo)}
.epp-ft a:hover{color:var(--epp-accent)}
.epp-ft address{font-style:normal;line-height:1.7}
.epp-ft-legal{
  display:flex;justify-content:space-between;gap:var(--epp-p4);flex-wrap:wrap;
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.12em;text-transform:uppercase;color:var(--epp-invert-a);
}

/* ============================================================
   BREAKPOINTS — tres, globales.
   ============================================================ */
/* Anchos medios: el 8 no cabe, cap a 4. */
@media (max-width:1180px){
  .epp-grid,.epp-grid[data-cols="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Tableta */
@media (max-width:900px){
  .epp-about{grid-template-columns:1fr}
  .epp-about-body h2{grid-column:1;grid-row:1}
  .epp-about-media{grid-column:1;grid-row:2;padding-right:0}
  .epp-about-texto{grid-column:1;grid-row:3}
  .epp-row{grid-template-columns:clamp(30px,4vw,44px) minmax(0,1fr) minmax(0,150px)}
  .epp-producto{grid-template-columns:1fr;min-height:0;align-items:start}
  .epp-producto-foto{grid-column:1;grid-row:1;height:auto;aspect-ratio:4/5}
  .epp-caja{max-height:none}
  .epp-galeria{grid-template-columns:minmax(0,1fr);height:auto}
  .epp-minis{grid-column:1;grid-row:2;flex-direction:row;align-items:center;max-height:none;contain:none}
  .epp-minis-lista{flex-direction:row}
  .epp-minis-lista button{flex:0 0 clamp(58px,16vw,88px)}
  .epp-minis-flecha{padding:0 var(--epp-p3)}
  .epp-minis-flecha[data-dir="-1"] svg{transform:rotate(-90deg)}
  .epp-minis-flecha[data-dir="1"] svg{transform:rotate(90deg)}
  .epp-shop-head{grid-template-columns:1fr;align-items:start;gap:var(--epp-p6)}
  .epp-ed-compo{grid-template-columns:minmax(0,1fr);justify-content:stretch;padding-inline:var(--epp-gut-rail);row-gap:var(--epp-e6)}
  .epp-ed-compo [data-pos="a"],.epp-ed-compo [data-pos="b"],.epp-ed-compo [data-pos="c"]{grid-column:1;grid-row:auto;align-self:start}
  .epp-ediciones{--epp-alto:auto;gap:var(--epp-e8)}
  .epp-ed-fila,.epp-ed-fila[data-pos="der"]{flex-direction:column;gap:var(--epp-e8)}
  .epp-ed-fila:nth-child(3n+2),.epp-ed-fila:nth-child(3n){--epp-alto:auto}
  .epp-ed-pieza img{height:auto;width:100%}
  .epp-tienda-pie{grid-template-columns:1fr;justify-items:center;gap:var(--epp-p4)}
  .epp-tienda-pie a,.epp-tienda-pie span{grid-column:1;justify-self:center;text-align:center}
}

/* Móvil */
@media (max-width:660px){
  .epp-hd{flex-direction:row;align-items:center;gap:var(--epp-p4)}
  .epp-hd .epp-menu-btn{display:block}
  /* Dianas táctiles de 44 px sin mover los iconos: el relleno agranda la zona
     pulsable y el margen negativo del mismo valor devuelve el icono a su sitio. */
  .epp-hd .epp-cuenta{padding:13px;margin:-13px}
  .epp-hd .epp-cesta{padding:13px 0;margin:-13px 0}
  .epp-hd .epp-menu-btn{min-width:44px;min-height:44px;padding:10px 0;margin:-10px -15px -10px -14px}
  .epp-nav{
    position:fixed;left:0;right:0;top:var(--epp-hd);
    flex-direction:column;align-items:flex-start;
    background:var(--epp-paper);
    border-top:1px solid var(--epp-rule);
    padding:var(--epp-p3) var(--epp-gut) var(--epp-p6);
    display:none;
  }
  .epp-nav.is-abierto{display:flex}
  .epp-nav a{color:var(--epp-ink);width:100%;padding:var(--epp-p4) 0;border-bottom:1px solid var(--epp-rule);font-size:var(--epp-m3)}
  .epp-nav a:last-child{border-bottom:0}
  .epp-hd-acciones{border-left:0;padding-left:0}

  .epp-hero{grid-template-columns:1fr}
  .epp-hero figure:nth-of-type(2){display:none}
  .epp-piece{width:88vw}
  .epp-piece img{aspect-ratio:4/5}

  .epp-about figure{max-width:100%}
  .epp-row{grid-template-columns:clamp(28px,7vw,40px) minmax(0,1fr);grid-template-rows:var(--epp-h-head) auto auto}
  .epp-row-img{grid-column:1 / -1;grid-row:3;width:100%;margin-top:var(--epp-p4)}
  .epp-row:hover .epp-row-img,.epp-row:focus-within .epp-row-img{width:100%}

  .epp-grid,.epp-grid[data-cols="4"],.epp-grid[data-cols="8"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Relacionadas: una fila de 3 piezas pequeñas; la cuarta solo en escritorio. */
  .epp-grid[data-cols="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .epp-grid[data-cols="6"] > :nth-child(n+4){display:none}
  .epp-densidad{display:none}

  .epp-shelf{display:grid;grid-template-columns:1fr 1fr;gap:26px var(--epp-p6);overflow:visible;padding:var(--epp-e6) var(--epp-p6) var(--epp-p3)}
  .epp-item{flex:none;width:auto}

  .epp-ft-cols{grid-template-columns:1fr 1fr;justify-content:stretch;gap:var(--epp-e6) var(--epp-p5)}
  .epp-ft-cols > div:last-child{grid-column:1 / -1}
  .epp-ft-legal{flex-direction:column;gap:var(--epp-p2)}

  .epp-campo{grid-template-columns:1fr;gap:var(--epp-p1);align-items:start}
}

/* Movimiento reducido: filas siempre abiertas, sin transiciones. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
  .epp-row-body{grid-template-rows:1fr}
}

/* ============================================================
   CHROME — integración de las plantillas del theme.
   ============================================================ */
/* Páginas sin hero: la cabecera es fija y va sobre el contenido. */
body.epp-cabecera-tema #inner-wrap{padding-top:calc(var(--epp-hd) + var(--epp-e5))}
/* Portada (front-page.php): las secciones EPP mandan dentro de #inner-wrap,
   sin el ancho ni los márgenes que Kadence da a su contenido. */
body.epp-portada #inner-wrap{margin:0;padding:0;max-width:none;width:auto}
body.epp-portada #inner-wrap>*{max-width:100%;width:100%}

/* ============================================================
   TIENDA — formularios nativos de WooCommerce (cesta, checkout, cuenta).
   No se reescribe el HTML del carrito/pago (ver ai-specs/proyecto/
   decisiones.md, 2026-09-20) — solo se viste con los mismos tokens y
   patrones que .epp-campo/.epp-cta, igual que hace Storefront.
   ============================================================ */
.epp-woo-page .epp-wrap{padding-top:calc(var(--epp-e5) + var(--epp-e6));padding-bottom:var(--epp-e8)}

/* Kadence genera su propia tipografía global para h1-h6 sin clase (inyectada
   como <style> inline en <head> desde Personalizar, con font-weight/color/
   tamaño fijo) y carga después de este archivo — empata en especificidad con
   la regla base "h1,h2,h3" y gana en font-family/font-weight porque nuestra
   regla base no los repite aquí. Los títulos que WooCommerce imprime sin
   clase propia ("Resumen del carrito", "Detalles de facturación"…) quedan
   así vestidos igual que cualquier titular del sitio. */
.epp-woo-page .epp-wrap h1,
.epp-woo-page .epp-wrap h2,
.epp-woo-page .epp-wrap h3{
  font-family:var(--epp-font-display);font-weight:400;color:var(--epp-ink);
}
.epp-woo-page .epp-wrap h1{margin:0 0 var(--epp-e5)}
.epp-woo-page .epp-wrap h2,
.epp-woo-page .epp-wrap h3{margin:var(--epp-e6) 0 var(--epp-e4)}
/* El titular que abre cada columna (cesta: Resumen/Totales; pago: Detalles
   de facturación/Tu pedido) no lleva margen superior: el aire superior lo
   pone el contenedor, y así los dos arrancan a la misma altura. */
.epp-woo-page .epp-wrap .cart-summary h2,
.epp-woo-page .epp-wrap .cart_totals h2,
.epp-woo-page .epp-wrap .woocommerce-billing-fields h3,
.epp-woo-page .epp-wrap #order_review_heading{margin-top:0}

/* Kadence trae sus propias reglas de 2 clases para estos mismos elementos
   (.woocommerce .woocommerce-info, .woocommerce .button…) con la misma
   especificidad que un simple ".epp-woo-page .algo"; empatadas, gana la de
   Kadence porque carga después. Se añade siempre .epp-wrap como tercera
   clase para que las nuestras ganen sin depender del orden de carga. */
.epp-woo-page .epp-wrap .woocommerce-error,
.epp-woo-page .epp-wrap .woocommerce-message,
.epp-woo-page .epp-wrap .woocommerce-info{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--epp-p4);
  list-style:none;margin:0 0 var(--epp-e4);padding:var(--epp-p4) var(--epp-p5);
  border:1px solid var(--epp-rule);
  background:none;background-color:transparent;color:var(--epp-ink);
  font-size:var(--epp-m2);letter-spacing:.04em;
}
/* Kadence flota este botón con márgenes negativos pensados para su propio
   botón de subrayado — con nuestra caja (más alta) se monta sobre el texto. */
.epp-woo-page .epp-wrap .woocommerce-error .button,
.epp-woo-page .epp-wrap .woocommerce-message .button,
.epp-woo-page .epp-wrap .woocommerce-info .button{float:none;margin:0;flex:0 0 auto}
.epp-woo-page .epp-wrap .woocommerce-error::before,
.epp-woo-page .epp-wrap .woocommerce-message::before,
.epp-woo-page .epp-wrap .woocommerce-info::before{display:none}
/* Kadence/WooCommerce cierran el flotado del aviso con un ::after vacío que,
   siendo la caja un flex con space-between, cuenta como un tercer elemento y
   deja el botón/enlace a mitad de la caja en vez de al borde derecho. */
.epp-woo-page .epp-wrap .woocommerce-error::after,
.epp-woo-page .epp-wrap .woocommerce-message::after,
.epp-woo-page .epp-wrap .woocommerce-info::after{display:none}
/* Cesta vacía: Kadence da a .cart-empty el gris azulado de su paleta. */
.epp-woo-page .epp-wrap .cart-empty.woocommerce-info{color:var(--epp-ink)}

.epp-woo-page .epp-wrap table.shop_table{
  width:100%;border-collapse:collapse;margin:0 0 var(--epp-e5);
  font-size:var(--epp-m2);background:none;
}
.epp-woo-page .epp-wrap table.shop_table th{
  text-align:left;padding:var(--epp-p3);
  border-bottom:1px solid var(--epp-ink);background:none;
  font-family:var(--epp-font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--epp-muted);font-weight:400;
}
.epp-woo-page .epp-wrap table.shop_table td{
  padding:var(--epp-p4) var(--epp-p3);
  border-bottom:1px solid var(--epp-rule);background:none;
  vertical-align:middle;
}
.epp-woo-page .epp-wrap table.shop_table tr:last-child td{border-bottom:none}
.epp-woo-page .epp-wrap table.shop_table th:last-child,
.epp-woo-page .epp-wrap table.shop_table td:last-child{
  width:1%;white-space:nowrap;text-align:right;
}
/* En las tablas de totales (tfoot del pedido y "Totales del carrito") la
   última columna no es un importe suelto: lleva textos largos (método de
   envío, "Enviar a <dirección>"). Sin la columna estrecha ni nowrap, el texto
   se parte dentro de su columna en vez de ensanchar la tabla. */
.epp-woo-page .epp-wrap table.shop_table tfoot td:last-child,
.epp-woo-page .epp-wrap .cart_totals table.shop_table td:last-child{
  width:auto;white-space:normal;overflow-wrap:anywhere;
}

/* tfoot (Subtotal/Total/Método de pago) comparte columnas con thead/tbody
   por estructura de tabla HTML, pero es un resumen, no más productos: se
   alinea a la derecha como un bloque de totales de factura, separado con
   una línea más gruesa, en vez de leerse como filas de producto más. */
.epp-woo-page .epp-wrap table.shop_table tfoot{
  border-top:2px solid var(--epp-ink);
}
.epp-woo-page .epp-wrap table.shop_table tfoot th,
.epp-woo-page .epp-wrap .cart_totals table.shop_table th{
  text-align:left;padding:var(--epp-p4) var(--epp-p3);
  border-bottom:1px solid var(--epp-rule);background:none;
  font-family:var(--epp-font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--epp-muted);font-weight:400;
}
.epp-woo-page .epp-wrap table.shop_table tfoot tr:last-child th,
.epp-woo-page .epp-wrap table.shop_table tfoot tr:last-child td,
.epp-woo-page .epp-wrap .cart_totals table.shop_table tr:last-child th,
.epp-woo-page .epp-wrap .cart_totals table.shop_table tr:last-child td{border-bottom:none}
/* Etiqueta y valor de cada fila de totales comparten línea base y una sola
   raya continua (la del th, antes tinta, no coincidía con la del td). */
.epp-woo-page .epp-wrap table.shop_table tfoot th,
.epp-woo-page .epp-wrap table.shop_table tfoot td,
.epp-woo-page .epp-wrap .cart_totals table.shop_table th,
.epp-woo-page .epp-wrap .cart_totals table.shop_table td{vertical-align:baseline}
/* Kadence dibuja una raya superior en cada fila de "Totales del carrito" con
   "--global-palette7" (azul grisáceo de fábrica sin paleta) además de nuestra
   raya inferior: dos rayas por fila y de otro color. Se anula la superior; la
   separación la hace solo la inferior, igual en th y td. */
.epp-woo-page .epp-wrap .cart_totals table.shop_table tbody tr th,
.epp-woo-page .epp-wrap .cart_totals table.shop_table tbody tr td{border-top:0}
/* En móvil Kadence convierte estas tablas en tarjetas y pinta las celdas pares
   con un fondo gris y una raya superior de su gris de paleta (#CBD5E0); sin
   ello cada fila queda con una sola raya, la nuestra. */
.epp-woo-page .epp-wrap table.shop_table_responsive tbody tr td{background:none;border-top:0}
@media (max-width:719px){
  /* La última columna "mínima" (1%) de escritorio deja el subtotal en 24px
     cuando la celda pasa a ser una fila de tarjeta. */
  .epp-woo-page .epp-wrap table.shop_table_responsive tbody tr td:last-child{width:auto;white-space:normal}
  /* Avisos: texto y botón en columna, no a medias sobre la misma línea. */
  .epp-woo-page .epp-wrap .woocommerce-error,
  .epp-woo-page .epp-wrap .woocommerce-message,
  .epp-woo-page .epp-wrap .woocommerce-info{flex-direction:column;align-items:flex-start}
}
@media (max-width:719px){
  /* Cada pieza de la cesta, una ficha: miniatura (y × debajo) a la izquierda,
     producto, precio y subtotal a la derecha como filas etiqueta/valor, igual
     que los totales. Las etiquetas son las de escritorio (mono, apagadas). */
  .epp-woo-page .epp-wrap table.cart tr.cart_item{
    display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--epp-p4);
    align-items:start;padding:var(--epp-p4) 0;
    border-bottom:1px solid var(--epp-rule);
  }
  .epp-woo-page .epp-wrap table.cart tr.cart_item td{padding:var(--epp-p2) 0;border:0}
  .epp-woo-page .epp-wrap table.cart tr.cart_item td::before{
    content:attr(data-title);
    font-family:var(--epp-font-mono);font-size:var(--epp-m1);font-weight:400;
    letter-spacing:.14em;text-transform:uppercase;color:var(--epp-muted);
  }
  .epp-woo-page .epp-wrap table.cart td.product-thumbnail{grid-column:1;grid-row:1 / span 2;padding:0}
  .epp-woo-page .epp-wrap table.cart td.product-remove{grid-column:1;grid-row:3;padding:0}
  .epp-woo-page .epp-wrap table.cart td.product-remove a.remove{margin:0 auto}
  .epp-woo-page .epp-wrap table.cart td.product-name{grid-column:2;grid-row:1}
  .epp-woo-page .epp-wrap table.cart td.product-price{grid-column:2;grid-row:2}
  .epp-woo-page .epp-wrap table.cart td.product-subtotal{grid-column:2;grid-row:3}
  /* Cupón: campo y botón en una línea, al borde del resto; "Actualizar" debajo. */
  .epp-woo-page .epp-wrap table.cart td.actions{padding:var(--epp-p4) 0 0}
  .epp-woo-page .epp-wrap .coupon #coupon_code{flex:1 1 0;min-width:0}
  .epp-woo-page .epp-wrap td.actions>.button{width:100%;margin-top:var(--epp-p3)}
}
/* Totales de la cesta en móvil: Kadence/WooCommerce los pasan a filas con
   "Subtotal:" en negrita; se dejan como las etiquetas de escritorio y de la
   ficha de pieza (mono, apagadas, mayúsculas, sin dos puntos) y sobre el
   mismo borde izquierdo que la ficha. */
@media (max-width:719px){
  .epp-woo-page .epp-wrap .cart_totals table.shop_table_responsive tr td{padding-left:0;padding-right:0}
  .epp-woo-page .epp-wrap .cart_totals table.shop_table_responsive tr td::before{
    content:attr(data-title);
    font-family:var(--epp-font-mono);font-size:var(--epp-m1);font-weight:400;
    letter-spacing:.14em;text-transform:uppercase;color:var(--epp-muted);
  }
}
/* En el resumen del pedido la última columna deja de ser una columna mínima:
   el tfoot lleva textos ("Envío estándar: 5 €") que, forzados a ese ancho,
   se partían en tres líneas. */
.epp-woo-page .epp-wrap table.woocommerce-checkout-review-order-table th:last-child,
.epp-woo-page .epp-wrap table.woocommerce-checkout-review-order-table td:last-child,
.epp-woo-page .epp-wrap table.woocommerce-table--order-details th:last-child,
.epp-woo-page .epp-wrap table.woocommerce-table--order-details td:last-child{width:auto}
/* Métodos y destino de envío: lista sin viñetas, alineada con el resto de
   valores (a la derecha) y sin márgenes que descuadren la fila. */
.epp-woo-page .epp-wrap table.shop_table ul.woocommerce-shipping-methods{list-style:none;margin:0;padding:0;text-align:right}
/* Kadence maqueta cada método con "#shipping_method li" (id) como flex sin
   alinear; con el id repetido el método y su importe quedan a la derecha. */
.epp-woo-page .epp-wrap table.shop_table ul#shipping_method li{display:flex;justify-content:flex-end;margin:0;padding:0;text-align:right}
/* Nombre del método de envío: texto secundario (apagado, pequeño) delante del
   importe, que conserva el estilo y el borde derecho del resto de importes. */
.epp-woo-page .epp-wrap table.shop_table ul.woocommerce-shipping-methods li label{
  font-size:var(--epp-m1);font-weight:400;color:var(--epp-muted);letter-spacing:.04em;
}
.epp-woo-page .epp-wrap table.shop_table ul.woocommerce-shipping-methods li label .amount{
  font-size:var(--epp-m2);color:var(--epp-ink);letter-spacing:normal;
}
/* Importe arriba y nombre del método debajo (functions.php,
   epp_child_etiqueta_envio), alineados a la derecha como "(incluye … Impuestos)". */
/* Kadence da "display:block" a "#shipping_method li label" (id): se repite el
   id para que el flex gane. Con varios métodos, el radio queda a la izquierda
   de su etiqueta y arriba, y los importes siguen alineados a la derecha. */
.epp-woo-page .epp-wrap table.shop_table ul#shipping_method li{align-items:flex-start;gap:var(--epp-p2)}
.epp-woo-page .epp-wrap table.shop_table ul#shipping_method li input[type="radio"]{flex:none;margin:.25em 0 0;accent-color:var(--epp-ink)}
.epp-woo-page .epp-wrap table.shop_table ul#shipping_method li label{
  display:flex;flex-direction:column;align-items:flex-end;
}
.epp-woo-page .epp-wrap table.shop_table ul.woocommerce-shipping-methods li label .epp-envio-nombre{margin-top:var(--epp-p2)}
/* Decisión del proyecto: el destino del envío ("Enviar a …", o "Las opciones
   de envío se actualizarán durante el pago" sin dirección) y "Cambiar
   dirección" no van dentro de la tabla de totales de la cesta: alargan la fila
   y estrechan la columna de importes. Se ocultan ahí (sin sobrescribir la
   plantilla); el destino, si se conoce, sale como línea propia bajo la tabla
   (".epp-cesta-destino", functions.php). */
.woocommerce-cart .epp-woo-page .epp-wrap .woocommerce-shipping-destination,
.woocommerce-cart .epp-woo-page .epp-wrap .shipping-calculator-button,
.woocommerce-cart .epp-woo-page .epp-wrap .woocommerce-shipping-calculator{display:none}
/* Datos largos (correo, dirección) no deben salirse de su caja en móvil. */
.epp-woo-page .epp-wrap ul.woocommerce-order-overview li strong,
.epp-woo-page .epp-wrap ul.wc-bacs-bank-details li strong,
.epp-woo-page .epp-wrap .woocommerce-customer-details address{overflow-wrap:anywhere;min-width:0}
/* Filas de cabecera dentro de tbody (nº de pedido en "Pedidos"): se leen como
   una celda más, con la raya de fila y no la gruesa de la cabecera. */
.epp-woo-page .epp-wrap table.shop_table tbody th{
  padding:var(--epp-p4) var(--epp-p3);border-bottom:1px solid var(--epp-rule);
  font-family:inherit;letter-spacing:normal;text-transform:none;color:var(--epp-ink);
}
.epp-woo-page .epp-wrap table.shop_table tbody tr:last-child th{border-bottom:0}
.epp-woo-page .epp-wrap .epp-cesta-destino{
  margin:0 0 var(--epp-p4);padding:0 var(--epp-p3);
  font-family:var(--epp-font-mono);font-size:var(--epp-m1);letter-spacing:.04em;
  line-height:1.6;color:var(--epp-muted);
}
.epp-woo-page .epp-wrap .epp-cesta-destino span{
  display:block;letter-spacing:.14em;text-transform:uppercase;
}

.epp-woo-page .epp-wrap .woocommerce-customer-details address{
  display:inline-block;width:auto;max-width:100%;
  border:1px solid var(--epp-rule);border-radius:0;
  padding:var(--epp-p3) var(--epp-p4);
  font-family:var(--epp-font-mono);line-height:1.7;
}

/* Resumen del pedido y datos bancarios comparten el <ul class="order_details">
   de WooCommerce. Kadence lo maqueta con li flotantes de ancho desigual y
   raya discontinua a la derecha (con "--global-gray-400"); aquí cada dato es
   una fila de ancho completo: etiqueta a la izquierda, valor a la derecha. */
.epp-woo-page .epp-wrap ul.woocommerce-order-overview,
.epp-woo-page .epp-wrap ul.wc-bacs-bank-details{
  list-style:none;
  margin:0 0 var(--epp-e5);padding:0;
  border-top:1px solid var(--epp-ink);
  /* Una columna de etiquetas del ancho de la más larga, compartida por todas
     las filas (subgrid), y el valor justo a su lado en vez de en el borde. */
  display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--epp-e4);
}
.epp-woo-page .epp-wrap ul.woocommerce-order-overview li,
.epp-woo-page .epp-wrap ul.wc-bacs-bank-details li{
  float:none;margin:0;
  display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;
  padding:var(--epp-p3);
  border-right:0;border-bottom:1px solid var(--epp-rule);
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--epp-muted);font-weight:400;
}
.epp-woo-page .epp-wrap ul.woocommerce-order-overview li:last-of-type,
.epp-woo-page .epp-wrap ul.wc-bacs-bank-details li:last-of-type{border-bottom:1px solid var(--epp-rule)}
.epp-woo-page .epp-wrap ul.woocommerce-order-overview li strong,
.epp-woo-page .epp-wrap ul.wc-bacs-bank-details li strong{
  letter-spacing:normal;text-transform:none;
  font-size:var(--epp-m4);color:var(--epp-ink);font-weight:600;
  text-align:left;
}

.epp-woo-page .epp-wrap .product-thumbnail img{width:64px;height:auto;display:block}
/* Kadence y WooCommerce pintan la × con "color:red !important", que ninguna
   regla normal puede anular; -webkit-text-fill-color sí manda sobre "color"
   al pintar el texto y evita recurrir a !important. */
.epp-woo-page .epp-wrap .product-remove a.remove{color:var(--epp-muted);-webkit-text-fill-color:var(--epp-muted);font-size:1.2em;text-decoration:none;background:none}
.epp-woo-page .epp-wrap .product-remove a.remove:hover{color:var(--epp-accent);-webkit-text-fill-color:var(--epp-accent);background:none}
/* La celda de acciones (cupón, actualizar) arranca en el borde de la tabla:
   el relleno por defecto de la celda la sangraba 12 px. */
.epp-woo-page .epp-wrap table.cart td.actions{padding-left:0;padding-right:0}
/* Piezas únicas: la cantidad siempre es 1 (campo oculto), sin columna. */
.epp-woo-page .epp-wrap table.cart .product-quantity{display:none}
.epp-woo-page .epp-wrap table.cart td.product-name a{color:var(--epp-ink);text-decoration:none;border-bottom:1px solid var(--epp-rule)}

.epp-woo-page .epp-wrap .quantity .qty{
  width:3.4em;text-align:center;
  border:1px solid var(--epp-rule);background:none;color:var(--epp-ink);
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);padding:var(--epp-p2);border-radius:0;
}

.epp-woo-page .epp-wrap .button,
.epp-woo-page .epp-wrap input.button,
.epp-woo-page .epp-wrap button[type="submit"]{
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--epp-ink);border-radius:0;
  padding:var(--epp-p4) 28px;
  color:var(--epp-ink);background:none;background-color:transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.epp-woo-page .epp-wrap .button:hover,
.epp-woo-page .epp-wrap input.button:hover,
.epp-woo-page .epp-wrap button[type="submit"]:hover{background:var(--epp-ink);color:var(--epp-paper)}
.epp-woo-page .epp-wrap .checkout-button,
.epp-woo-page .epp-wrap #place_order{background:var(--epp-ink);color:var(--epp-paper)}
.epp-woo-page .epp-wrap .checkout-button:hover,
.epp-woo-page .epp-wrap #place_order:hover{background:transparent;color:var(--epp-ink)}
/* Kadence pinta el botón de la cesta con "--global-palette-btn-bg" (azul de
   fábrica si no hay paleta guardada) con más especificidad que ".checkout-button"
   a secas. Se repite el botón bajo ".wc-proceed-to-checkout a" para ganar
   siempre, con o sin paleta. */
.epp-woo-page .epp-wrap .wc-proceed-to-checkout a.checkout-button{background:var(--epp-ink);color:var(--epp-paper)}
.epp-woo-page .epp-wrap .wc-proceed-to-checkout a.checkout-button:hover{background:transparent;color:var(--epp-ink)}
.epp-woo-page .epp-wrap .button.disabled,
.epp-woo-page .epp-wrap .button:disabled{opacity:.4;cursor:not-allowed;background:none}

/* Kadence trae ".woocommerce-cart table.cart .coupon .button:not(:hover)" y
   "…td.actions .button:disabled" con más especificidad que cualquier
   selector nuestro razonable (encadenan tabla+3 clases). Es la única
   excepción de !important del theme: sin ella, el botón de cupón se ve con
   el amarillo de fábrica de Kadence sin forma limpia de ganarle. */
.epp-woo-page .epp-wrap .coupon .button:not(:hover),
.epp-woo-page .epp-wrap td.actions .button:disabled{
  background:none !important;color:var(--epp-ink) !important;
}

.epp-woo-page .epp-wrap .coupon{display:flex;gap:var(--epp-p3);align-items:center;flex-wrap:wrap;padding:0}
/* El clearfix de WooCommerce (::before/::after vacíos) cuenta como elemento
   del flex y, con el hueco, sangra el campo 12 px respecto al borde. */
.epp-woo-page .epp-wrap table.cart td.actions .coupon::before,
.epp-woo-page .epp-wrap table.cart td.actions .coupon::after{display:none}
.epp-woo-page .epp-wrap #coupon_code{
  border:1px solid var(--epp-rule);background:none;color:var(--epp-ink);
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  padding:var(--epp-p3) var(--epp-p4);min-width:180px;border-radius:0;
}
.epp-woo-page .epp-wrap #coupon_code:focus{outline:none;border-color:var(--epp-accent)}
/* El placeholder del cupón lo pinta Kadence con su paleta; se fija con el gris del tema. */
.epp-woo-page .epp-wrap #coupon_code::placeholder{color:var(--epp-muted);opacity:1}

/* Cesta en escritorio (mismo punto de corte que Kadence, 1025px): en vez de
   dos flotados al 70/30 pegados, una rejilla con la columna de totales al 30%
   (su ancho de siempre) y un hueco entre columnas; el resumen cede ese hueco. */
@media (min-width:1025px){
  .epp-woo-page .epp-wrap .kadence-woo-cart-form-wrap{
    display:grid;grid-template-columns:minmax(0,1fr) 30%;column-gap:var(--epp-e7);
  }
  .epp-woo-page .epp-wrap .kadence-woo-cart-form-wrap::before,
  .epp-woo-page .epp-wrap .kadence-woo-cart-form-wrap::after{display:none}
  .epp-woo-page .epp-wrap .kadence-woo-cart-form-wrap>form,
  .epp-woo-page .epp-wrap .kadence-woo-cart-form-wrap .cart-collaterals{float:none;width:auto;padding:0}
}
.epp-woo-page .epp-wrap .cart_totals{max-width:420px;margin-left:auto}
.epp-woo-page .epp-wrap .cart_totals h2{
  font-family:var(--epp-font-display);font-size:var(--epp-d3);
  text-transform:uppercase;margin:0 0 var(--epp-e3);
}
.epp-woo-page .epp-wrap .cart_totals tr.order-total .amount{font-weight:600}
/* Kadence da a "small.includes_tax" el gris de su paleta (palette6) y los
   importes lo heredan — sin paleta se veían en gris azulado. */
.epp-woo-page .epp-wrap .cart_totals .includes_tax,
.epp-woo-page .epp-wrap .cart_totals .includes_tax .amount{color:var(--epp-muted)}
/* Textos que WooCommerce añade detrás de un importe ("vía Envío estándar",
   "(incluye 11 € Impuestos)"): en su propia línea bajo el importe, para que
   todos los importes formen una sola columna alineada a la derecha. */
.epp-woo-page .epp-wrap table.shop_table small.shipped_via,
.epp-woo-page .epp-wrap table.shop_table small.includes_tax{
  display:block;margin-top:var(--epp-p2);
  font-size:var(--epp-m1);letter-spacing:.04em;color:var(--epp-muted);
}
.epp-woo-page .epp-wrap .wc-proceed-to-checkout{margin-top:var(--epp-e4)}
.epp-woo-page .epp-wrap .wc-proceed-to-checkout .checkout-button{display:block;text-align:center;width:100%}

/* Facturación y envío/notas van siempre apiladas; Kadence las flota al 48% una
   junto a otra en cuanto el formulario ocupa todo el ancho, y el pedido se
   queda debajo. */
.epp-woo-page .epp-wrap .col2-set .col-1,
.epp-woo-page .epp-wrap .col2-set .col-2{float:none;width:100%;max-width:none}
.epp-woo-page .epp-wrap .form-row{margin:0 0 var(--epp-p4)}
.epp-woo-page .epp-wrap .form-row label{
  display:block;margin-bottom:var(--epp-p2);
  font-family:var(--epp-font-mono);font-weight:400;font-size:var(--epp-m1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--epp-muted);
}
.epp-woo-page .epp-wrap .form-row .required{color:var(--epp-accent);text-decoration:none}
.epp-woo-page .epp-wrap .form-row input.input-text,
.epp-woo-page .epp-wrap .form-row select,
.epp-woo-page .epp-wrap .form-row textarea,
.epp-woo-page .epp-wrap .woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]),
.epp-woo-page .epp-wrap .woocommerce-input-wrapper select{
  width:100%;box-sizing:border-box;
  background:var(--epp-surface);
  border:1px solid var(--epp-rule);border-radius:0;
  padding:var(--epp-p3) var(--epp-p4);margin:0;
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.04em;color:var(--epp-ink);
  -webkit-appearance:none;appearance:none;
}
.epp-woo-page .epp-wrap .form-row input.input-text::placeholder,
.epp-woo-page .epp-wrap .form-row textarea::placeholder{color:var(--epp-muted);opacity:1}
.epp-woo-page .epp-wrap .form-row input.input-text:focus,
.epp-woo-page .epp-wrap .form-row select:focus,
.epp-woo-page .epp-wrap .form-row textarea:focus{outline:none;border-color:var(--epp-accent)}
.epp-woo-page .epp-wrap .select2-container .select2-selection--single{
  border:1px solid var(--epp-rule);border-radius:0;background:var(--epp-surface);height:auto;
  padding:var(--epp-p3) var(--epp-p4);box-sizing:border-box;
}
.epp-woo-page .epp-wrap .select2-container--open .select2-selection--single{border-color:var(--epp-accent)}
.epp-woo-page .epp-wrap .select2-container .select2-selection--single .select2-selection__rendered{font-size:var(--epp-m2);letter-spacing:.04em;line-height:1.6}
.epp-woo-page .epp-wrap .select2-selection__rendered{padding:0!important;font-family:var(--epp-font-mono);color:var(--epp-ink)!important}
.epp-woo-page .epp-wrap .select2-selection__arrow{height:100%!important}

.epp-woo-page .epp-wrap #ship-to-different-address label{display:flex;align-items:center;gap:var(--epp-p3);margin:0;cursor:pointer}
.epp-woo-page .epp-wrap #ship-to-different-address input[type="checkbox"]{
  flex:none;width:var(--epp-m4);height:var(--epp-m4);margin:0;
  accent-color:var(--epp-ink);
}

.epp-woo-page .epp-wrap #payment{border:1px solid var(--epp-rule);padding:var(--epp-e4);margin-top:var(--epp-e4);background:none}
.epp-woo-page ul.wc_payment_methods{list-style:none;margin:0;padding:0}
.epp-woo-page ul.wc_payment_methods li{border-bottom:1px solid var(--epp-rule);padding:var(--epp-p3) 0}
.epp-woo-page .epp-wrap ul.wc_payment_methods li:last-child{border-bottom:none}
.epp-woo-page .epp-wrap .payment_box{background:var(--epp-paper);color:var(--epp-muted);font-size:var(--epp-m1);padding:var(--epp-p4) 0 0}
/* Kadence tiñe la etiqueta del método de pago (fondo palette7/palette8,
   borde y punto con "--global-palette-highlight") y la caja de términos con
   la paleta guardada; sin ella salen azules de fábrica. Sus reglas llevan
   el id #payment más el estado del radio, así que se repiten con el mismo
   id y estado bajo ".epp-woo-page .epp-wrap" para ganar con o sin paleta. */
.epp-woo-page .epp-wrap #payment ul.wc_payment_methods li.wc_payment_method>label{background:var(--epp-highlight)}
.epp-woo-page .epp-wrap #payment ul.wc_payment_methods li.wc_payment_method>label:hover{background:var(--epp-highlight)}
.epp-woo-page .epp-wrap #payment ul.wc_payment_methods li.wc_payment_method input[type=radio]:first-child:checked+label{background:var(--epp-highlight);border-left-color:var(--epp-ink)}
.epp-woo-page .epp-wrap #payment ul.wc_payment_methods li.wc_payment_method input[type=radio]:first-child:checked+label:before{background:var(--epp-ink);border-color:var(--epp-ink)}
.epp-woo-page .epp-wrap #payment a{color:var(--epp-ink)}
/* Kadence da color de texto de la paleta (palette4) a la caja del método de
   pago y a los input (radio/checkbox/ocultos) — se fija a tinta. */
.epp-woo-page .epp-wrap #payment .payment_box,
.epp-woo-page .epp-wrap #payment .payment_box p{color:var(--epp-ink)}
.epp-woo-page .epp-wrap input,
.epp-caja input{color:var(--epp-ink)}
.epp-woo-page .epp-wrap .woocommerce-terms-and-conditions{background:var(--epp-paper)}

/* La cuenta trae su propio layout de Kadence (nav flotado al 30% a la
   derecha, avatar en posición absoluta con paddings calculados para su
   propio ancho) — no encaja con nuestra rejilla ni con nuestros tokens, así
   que se desactiva y se sustituye por un flex propio: nav vertical a la
   izquierda, contenido a la derecha con todo el aire que le sobraba. */
.epp-woo-page .epp-wrap .woocommerce{display:flex;flex-wrap:wrap;gap:var(--epp-e7)}
/* Ese flex es de la cuenta con sesión iniciada (nav + contenido). En cesta,
   pago, "pedido recibido" y el acceso sin sesión hace que los avisos y el
   formulario se encojan a su contenido y se separen con el hueco de la
   cuenta; ahí .woocommerce es un bloque normal y todo hijo ocupa el ancho
   completo de la rejilla, con el mismo borde izquierdo que el resto. */
.woocommerce-cart .epp-woo-page .epp-wrap .woocommerce,
.woocommerce-checkout .epp-woo-page .epp-wrap .woocommerce,
.woocommerce-account:not(.logged-in) .epp-woo-page .epp-wrap .woocommerce{display:block}
.epp-woo-page .epp-wrap .account-navigation-wrap{
  float:none!important;flex:0 0 220px;
  border-left:0!important;border-right:1px solid var(--epp-rule);
  padding-right:var(--epp-e5);margin:0!important;
}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-content{float:none!important;flex:1 1 420px;min-width:0;padding:0!important}
/* Kadence coloca el avatar en posición absoluta con un relleno calculado para
   su propio diseño (y se montaba sobre el nombre); con la clase del body se
   gana a sus reglas sin !important. */
.woocommerce-account .epp-woo-page .epp-wrap .kadence-account-avatar{position:static;display:flex;align-items:center;gap:var(--epp-p3);padding:0;margin:0 0 var(--epp-e4)}
.woocommerce-account .epp-woo-page .epp-wrap .kadence-customer-image{position:static}
.woocommerce-account .epp-woo-page .epp-wrap .kadence-customer-image img{position:static;border-radius:50%}
.woocommerce-account .epp-woo-page .epp-wrap .kadence-customer-name{padding:0!important;font-family:var(--epp-font-mono);font-size:var(--epp-m2);letter-spacing:.06em;color:var(--epp-ink)}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--epp-rule)}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-navigation a{
  display:block;padding:var(--epp-p3) 0;margin:0;border-left:0!important;
  font-family:var(--epp-font-mono);font-size:var(--epp-m2);
  letter-spacing:.08em;text-transform:uppercase;color:var(--epp-muted);text-decoration:none;
}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-navigation a:hover{color:var(--epp-ink)}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-navigation .is-active a{color:var(--epp-ink);font-weight:500}
.epp-woo-page .epp-wrap .woocommerce-MyAccount-content h2,
.epp-woo-page .epp-wrap .woocommerce-MyAccount-content h3{font-size:var(--epp-d3);margin-bottom:var(--epp-e3)}
/* Solo el login/registro va a dos columnas — WooCommerce reutiliza la
   misma clase ".u-columns" para el resumen de Direcciones (facturación +
   envío) y ahí dos columnas de 238px son demasiado estrechas para el
   titular. Se acota por id en vez de por ".u-columns" a secas. */
.epp-woo-page .epp-wrap #customer_login.u-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--epp-e6)}
.epp-woo-page .epp-wrap .woocommerce-form-login,.epp-woo-page .epp-wrap .woocommerce-form-register{max-width:none}
/* Kadence enmarca estos formularios con su borde de paleta (azul de fábrica
   sin paleta) y esquinas redondeadas; se visten como el resto de cajas. */
.epp-woo-page .epp-wrap .woocommerce-form-login,
.epp-woo-page .epp-wrap .woocommerce-form-register,
.epp-woo-page .epp-wrap .woocommerce-ResetPassword{
  border:1px solid var(--epp-rule);border-radius:0;background:none;padding:var(--epp-e4);
}

/* Un solo punto de corte para toda la zona de cuenta/tienda: nav+contenido,
   login/registro y direcciones pasan a una columna en el mismo punto. */
/* Kadence deja float:left/float:right puestos en cada .u-column (su propio
   sistema de columnas, previo al nuestro) — con grid eso da un orden y un
   ancho impredecibles. Flex ignora el flotado de forma consistente. */
.epp-woo-page .epp-wrap .woocommerce-Addresses{display:flex;flex-wrap:nowrap;gap:var(--epp-e4)}
.epp-woo-page .epp-wrap .woocommerce-Address{float:none!important;min-width:0;flex:1 1 0}

@media (max-width:700px){
  .epp-woo-page .epp-wrap .account-navigation-wrap{flex-basis:100%;border-right:0;border-bottom:1px solid var(--epp-rule);padding-right:0;padding-bottom:var(--epp-e4)}
  .epp-woo-page .epp-wrap #customer_login.u-columns{grid-template-columns:1fr;gap:var(--epp-e5)}
  .epp-woo-page .epp-wrap .woocommerce-Addresses{gap:var(--epp-e6);flex-wrap:wrap}
  .epp-woo-page .epp-wrap .woocommerce-Address{flex-basis:100%}
}

.epp-woo-page .epp-wrap .woocommerce-Address-title{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--epp-p2);
  margin-bottom:var(--epp-e3);
}
.epp-woo-page .epp-wrap .woocommerce-Address-title h2{
  font-family:var(--epp-font-display);font-style:italic;text-transform:uppercase;
  font-size:var(--epp-d3);margin:0;
}
.epp-woo-page .epp-wrap .woocommerce-Address-title .edit{font-size:var(--epp-m1);letter-spacing:.08em;text-transform:uppercase}
.epp-woo-page .epp-wrap .woocommerce-Address address{font-style:normal}

/* Detalles de la cuenta: fieldset nativo de "Cambio de contraseña" — sin
   estilo del child, se veía con el borde/legend por defecto del navegador. */
.epp-woo-page .epp-wrap fieldset{
  border:none;border-top:1px solid var(--epp-rule);
  margin:var(--epp-e5) 0 0;padding:var(--epp-e5) 0 0;
}
.epp-woo-page .epp-wrap fieldset legend{
  margin:0 0 var(--epp-e4);padding:0;
  font-family:var(--epp-font-mono);font-weight:400;font-size:var(--epp-m1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--epp-muted);
}

/* ============================================================
   PÁGINA ORDINARIA — texto largo (legales, etc.), page.php.
   Mismo patrón de cabecera de sección que .epp-woo-page, con una medida
   de lectura cómoda para párrafos y listas en vez del ancho de tienda.
   ============================================================ */
.epp-pagina .epp-wrap{
  padding-top:calc(var(--epp-e5) + var(--epp-e6));
  padding-bottom:var(--epp-e8);
}
.epp-pagina .epp-wrap>*{max-width:72ch}
.epp-pagina .epp-wrap h1,
.epp-pagina .epp-wrap h2,
.epp-pagina .epp-wrap h3{
  font-family:var(--epp-font-display);font-weight:400;color:var(--epp-ink);
  max-width:none;
}
.epp-pagina .epp-wrap h2,
.epp-pagina .epp-wrap h3{margin:var(--epp-e6) 0 var(--epp-e4)}
.epp-pagina .epp-wrap h2:first-child,
.epp-pagina .epp-wrap h3:first-child{margin-top:0}
.epp-pagina .epp-wrap p{
  margin:0 0 var(--epp-e4);
  font-family:var(--epp-font-mono);font-size:var(--epp-m3);
  line-height:1.75;letter-spacing:.03em;color:var(--epp-ink);
}
.epp-pagina .epp-wrap ul,
.epp-pagina .epp-wrap ol{
  margin:0 0 var(--epp-e5);padding-left:var(--epp-p5);
  font-family:var(--epp-font-mono);font-size:var(--epp-m3);
  line-height:1.75;letter-spacing:.03em;color:var(--epp-ink);
}
.epp-pagina .epp-wrap li{margin-bottom:var(--epp-p2)}
.epp-pagina .epp-wrap a{color:var(--epp-ink);text-decoration:underline;text-underline-offset:.15em}
.epp-pagina .epp-wrap a:hover{color:var(--epp-accent)}
.epp-pagina .epp-wrap strong{font-weight:600}