/* ==========================================================================
   ERINCO — hoja de estilos del borrador de home
   Sistema editorial: masthead de revista + retratos circulares de categoría
   ========================================================================== */

:root{
  /* color */
  --ground:      #F3EEE7;   /* porcelana cálida, no crema pura */
  --ground-2:    #EAE2D6;   /* paneles ligeramente más oscuros */
  --ink:         #241F2C;   /* casi negro con matiz berenjena */
  --ink-soft:    #56505E;   /* texto secundario */
  --plum:        #5B3A52;   /* marca — logotipo, acentos oscuros */
  --brass:       #C4901F;   /* acento cálido — CTA, rebajas, precios oferta */
  --brass-deep:  #93691F;
  --sage:        #737F5E;   /* acento frío — temporada, etiquetas "nuevo" */
  --line:        #D9CEBD;   /* líneas y bordes */
  --line-strong: #B9AC94;
  --surface:     #FFFFFF;
  --error:       #C13A2C;

  /* tipografía */
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Newsreader", "Iowan Old Style", Georgia, serif;

  /* espaciado */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1360px;
}

/* Erinco es una identidad de marca de un solo tono: se mantiene igual
   con independencia del tema del sistema (como cualquier tienda real). */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }
body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-inline: var(--gutter);
  overflow-x: hidden;
}
img, svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input{ font: inherit; color: inherit; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }
.wrap{ max-width: var(--maxw); margin-inline: auto; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.eyebrow{
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn:hover{ background: var(--plum); border-color: var(--plum); }
.btn.ghost{ background: transparent; color: var(--ink); }
.btn.ghost:hover{ background: var(--ink); color: var(--ground); }
.btn.brass{ background: var(--brass); border-color: var(--brass); color: var(--ground); }
.btn.brass:hover{ background: var(--brass-deep); border-color: var(--brass-deep); }
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.icon{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.filled{ fill: currentColor; stroke: none; }

/* ---------- marquee superior ---------- */
.marquee-bar{
  background: var(--ink);
  color: var(--ground);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.marquee-bar .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 38px;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.marquee-track{
  overflow: hidden;
  flex: 1;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track ul{
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: scroll-left 26s linear infinite;
}
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee-lang{ display: flex; align-items: center; gap: .4rem; opacity: .85; flex-shrink: 0; }

/* ---------- masthead ---------- */
.masthead{
  border-bottom: 1px solid var(--line);
  padding-block: 1.1rem;
}
.masthead .wrap{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.masthead-side{ display: flex; align-items: center; gap: 1.1rem; }
.lang-switch{ position: relative; }
.lang-switch-btn{ display: flex; align-items: center; gap: .3rem; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.lang-switch-list{
  display: none; position: absolute; top: calc(100% + .6rem); right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 28px -8px rgba(36,31,44,.2); overflow: hidden; z-index: 60; min-width: 84px;
}
.lang-switch-list.open{ display: block; }
.lang-switch-list a{
  display: block; padding: .55rem 1rem; font-family: var(--font-display); font-size: .72rem;
  font-weight: 600; letter-spacing: .04em; color: var(--ink);
}
.lang-switch-list a:hover, .lang-switch-list a.active{ background: var(--ground-2); color: var(--brass-deep); }
.masthead-side.right{ justify-content: flex-end; }
.icon-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); padding: 6px; margin: -6px; }
.icon-btn .badge{
  position: absolute; top: -1px; right: -3px;
  background: var(--brass); color: var(--ground);
  font-family: var(--font-display); font-size: .62rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Empieza invisible: el número que imprime PHP puede venir de una copia en
     caché y no ser el real de quien está viendo la página en ese momento.
     main.js la enseña (añadiendo la clase "mostrar") en cuanto confirma el
     número de verdad, así nunca se ve un número equivocado ni aunque sea un
     instante. */
  opacity: 0; transition: opacity .15s;
}
.icon-btn .badge.mostrar{ opacity: 1; }
.logo{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: .02em;
}
.logo-svg{ height: clamp(1.95rem, 4.8vw, 2.85rem); width: auto; display: block; }
.logo-img{ height: clamp(2.6rem, 6vw, 3.7rem); width: auto; display: block; }
/* Refuerzo ante .woocommerce img{height:auto} de WooCommerce (0,1,1): en
   fichas de producto el body lleva clase .woocommerce y sin esto el logo
   perdía su altura y se veía gigante. No cambia ningún tamaño. */
.masthead .logo-img{ height: clamp(2.6rem, 6vw, 3.7rem); width: auto; max-width: none; }
.drawer-logo{ height: 1.7rem; }
.mobile-drawer-head .drawer-logo{ height: 1.7rem; width: auto; max-width: none; }
.foot-brand .logo-img.foot-logo{ height: 2.2rem; max-width: none; }
a.logo{ display: inline-flex; align-items: center; justify-content: flex-start; }
.hide-desktop{ display: none; }
.search-wrap{ display: flex; justify-content: center; width: 100%; }
.search-box{ position: relative; width: min(440px, 92%); }
.search-input{
  width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--ground); padding: .6rem 2.6rem .6rem 1.2rem;
  font-family: var(--font-body); font-style: italic; font-size: .92rem;
  transition: border-color .2s, background .2s;
}
.search-input::placeholder{ color: var(--ink-soft); }
.search-input:focus{ outline: none; border-color: var(--brass); background: var(--surface); }
.search-box .icon{ position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; width: 17px; height: 17px; color: var(--ink-soft); }
.search-suggestions{
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 28px -8px rgba(36,31,44,.2); overflow: hidden; z-index: 60;
}
.search-suggestions a{
  display: block; padding: .7rem 1.2rem; font-family: var(--font-body); font-style: italic; font-size: .9rem;
}
.search-suggestions a:hover, .search-suggestions a.active{ background: var(--ground-2); }
.search-suggestions[hidden]{ display: none; }

/* ---------- navegación + mega menú estilo Shein (panel de 2 columnas) ---------- */
.mainnav{ border-bottom: 1px solid var(--line); position: relative; }
.mainnav .wrap{ display: flex; justify-content: center; position: relative; }
.mainnav-list{ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.45rem, .8vw, 1rem); }
.mainnav-list > li{ position: relative; }
.navlink{
  display: inline-block;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 0 .9rem;
  border-bottom: 2px solid transparent;
}
.navlink:hover, .navlink[aria-expanded="true"]{ border-bottom-color: var(--ink); }
.navlink.sale{ color: var(--error); }

.shein-mega{
  display: none;
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--line);
  width: min(1080px, 94vw); max-height: 68vh;
  box-shadow: 0 18px 30px -22px rgba(36,31,44,.28);
  z-index: 40;
}
.shein-mega.open{ display: flex; }
.shein-mega-side{
  display: flex; flex-direction: column; flex: 0 0 200px;
  border-right: 1px solid var(--line); padding: 1.2rem 0; background: var(--surface);
  overflow-y: auto;
}
.shein-side-item{
  padding: .8rem 1.6rem; font-family: var(--font-display); font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; border-left: 3px solid transparent;
}
.shein-side-item.active, .shein-side-item:hover{
  background: var(--ground); color: var(--brass-deep); border-left-color: var(--brass);
}
.shein-mega-content{ flex: 1; padding: 1.8rem 2.2rem; overflow-y: auto; }
.shein-mega-panel{ display: none; }
.shein-mega-panel.active{ display: flex; align-items: flex-start; }
.shein-mega-cols{ display: flex; align-items: flex-start; min-width: 0; }
.shein-mega-categorias, .shein-mega-articulos{ flex: 0 0 auto; max-width: 420px; }
/* ancho fijo de verdad (rejilla de 3 columnas, no flex) para que ningún nombre largo de
   categoría pueda "empujar" el contenedor y sacar scroll lateral en el menú. */
.shein-mega-categorias{ width: 340px; max-height: 420px; overflow-y: auto; overflow-x: hidden; padding-right: .6rem; }
.shein-mega-categorias .shein-mega-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem .8rem; }
.shein-mega-categorias .shein-tile{ min-width: 0; }
.shein-mega-categorias .shein-tile span:last-child{ overflow-wrap: break-word; }
.shein-mega-articulos{ display: none; border-left: 1px solid var(--line); padding-left: 1.8rem; margin-left: 1.8rem; }
.shein-mega-articulos.active{ display: block; }
.shein-mega-heading{ font-family: var(--font-display); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem; }
.shein-mega-grid{ display: flex; gap: clamp(1rem, 2.2vw, 1.8rem) clamp(.8rem, 2vw, 1.4rem); flex-wrap: wrap; align-content: flex-start; }
/* artículos siempre en 4 columnas x 2 filas (máximo 8), en vez de ajustarse solos y
   estirarse hacia abajo de forma irregular (3-3-2, etc). */
.shein-mega-articulos .shein-mega-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem .9rem; }
.shein-tile-wrap{ display: flex; }
.shein-mega-subpanel{
  display: none; flex: 0 0 auto;
  border-left: 1px solid var(--line); padding-left: 1.8rem; margin-left: 1.8rem;
}
.shein-mega-subpanel.active{ display: block; }
.shein-tile{ display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 92px; }
.mega-thumb{
  width: 82px; height: 82px; border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.mega-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.mega-thumb--vacio, .cat-thumb--vacio{ background: var(--ground); }
.shein-tile:hover .mega-thumb img{ transform: scale(1.08); }
.shein-tile span:last-child{ font-size: .8rem; text-align: center; font-family: var(--font-body); font-style: italic; font-weight: 500; color: var(--ink); }

/* ---------- menú móvil ---------- */
.mobile-drawer{
  position: fixed; inset: 0 22% 0 0; background: var(--ground);
  transform: translateX(-101%); transition: transform .28s ease;
  z-index: 100; overflow-y: auto; border-right: 1px solid var(--line);
}
.mobile-drawer.open{ transform: translateX(0); }
.mobile-drawer-head{ display: flex; justify-content: space-between; align-items: center; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--line); }
.mobile-drawer nav{ padding: .5rem var(--gutter) 2rem; }
.mobile-drawer details{ border-bottom: 1px solid var(--line); }
.drawer-link{
  display: block; padding: 1rem var(--gutter); margin-inline: calc(var(--gutter) * -1);
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ground-2); box-shadow: inset 0 -1px 0 var(--line);
}
/* Nivel 1: categorías principales (Bohemio, Colecciones...) */
.mobile-drawer nav > details > summary{
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 1rem var(--gutter); margin-inline: calc(var(--gutter) * -1);
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  background: var(--ground); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line);
  transition: background .2s, color .2s;
}
.mobile-drawer nav > details[open] > summary{
  background: var(--plum); color: var(--ground);
}
.mobile-drawer summary::-webkit-details-marker{ display: none; }
.mobile-drawer summary .icon{ transition: transform .2s; }
.mobile-drawer nav > details[open] > summary .icon{ transform: rotate(180deg); }
.mobile-sub{ display: flex; flex-direction: column; gap: 2px; padding: .3rem 0 .8rem; }
/* Nivel 2: subcategorías sin hijos (Vestidos, Blusas...) */
.mobile-sub > a{
  font-family: var(--font-body); font-style: italic; font-size: .92rem;
  padding: .7rem var(--gutter); margin-inline: calc(var(--gutter) * -1);
  background: var(--ground-2); color: var(--ink);
}
.mobile-sub > a:active{ background: var(--line); }
.mobile-sub > details{ border-bottom: none; }
/* Nivel 2: subcategorías CON hijos (Colección Otoño-Invierno...) */
.mobile-sub > details > summary{
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-style: italic; font-size: .92rem;
  padding: .7rem var(--gutter); margin-inline: calc(var(--gutter) * -1);
  background: var(--ground-2); color: var(--ink); cursor: pointer;
  border-left: 3px solid var(--brass); transition: background .2s, color .2s;
}
.mobile-sub > details[open] > summary{
  background: var(--brass); color: var(--ground); border-left-color: var(--brass-deep);
}
.mobile-sub > details > summary::-webkit-details-marker{ display: none; }
.mobile-sub > details > summary .icon{ width: 14px; height: 14px; transition: transform .2s; }
.mobile-sub > details[open] > summary .icon{ transform: rotate(180deg); }
/* Nivel 3: lo más profundo (Cápsula de Algodón...) */
.mobile-sub-nested{ display: flex; flex-direction: column; gap: 2px; padding-bottom: .3rem; }
.mobile-sub-nested a{
  font-family: var(--font-body); font-style: italic; font-size: .86rem;
  padding: .65rem var(--gutter) .65rem calc(var(--gutter) * 1.6); margin-inline: calc(var(--gutter) * -1);
  background: #FAF6F0; color: var(--ink-soft);
}
.mobile-sub-nested a:active{ background: var(--line); }

.mobile-sub-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1.1rem .6rem; padding: .2rem 0 1.2rem;
}
.mobile-cat-item{ display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.mobile-cat-thumb{
  width: 58px; height: 58px; border-radius: 50%;
  overflow: hidden; box-shadow: 0 0 0 1px var(--line);
}
.mobile-cat-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.mobile-cat-item span{ font-family: var(--font-body); font-style: italic; font-size: .74rem; }
.scrim{ position: fixed; inset: 0; background: rgba(36,31,44,.35); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.show{ opacity: 1; pointer-events: auto; }

/* ---------- ventana emergente de favoritos (visitantes sin cuenta) ---------- */
.fav-modal{
  display: none; position: fixed; z-index: 110; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 2.2rem 2rem; width: min(380px, 88vw); text-align: center;
  box-shadow: 0 24px 48px -20px rgba(36,31,44,.35);
}
.fav-modal.open{ display: block; }
.fav-modal .icon-btn{ position: absolute; top: .7rem; right: .7rem; }
.fav-modal h3{ font-family: var(--font-body); font-style: italic; font-size: 1.3rem; margin-bottom: .8rem; }
.fav-modal p{ color: var(--ink-soft); font-size: .92rem; line-height: 1.5; margin-bottom: 1.5rem; }

/* ---------- hero / carrusel ---------- */
.hero{ position: relative; margin-block: var(--gutter); overflow: hidden; max-width: var(--maxw); margin-inline: auto; }
.hero-track{ display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.slide{
  min-width: 100%;
  min-height: 480px;
  position: relative;
  display: flex; align-items: flex-end;
  color: var(--ground);
  overflow: hidden;
}
.slide img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.slide::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,16,22,.78) 0%, rgba(20,16,22,.32) 42%, rgba(20,16,22,0) 68%);
}
/* aspect-ratio toma el mando en pantallas anchas; min-height evita que el
   texto se corte en el hero cuando el hueco calculado por el ratio es bajo */
@media (min-width: 720px){ .slide{ aspect-ratio: 21/9; min-height: 380px; } }
@media (min-width: 1100px){ .slide{ aspect-ratio: 21/8; min-height: 420px; } }
.slide-copy{ position: relative; z-index: 2; padding: clamp(1.4rem, 4vw, 3.2rem); max-width: 560px; }
.slide-copy .eyebrow{ color: var(--ground); opacity: .85; }
.slide-copy h1{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: .98; letter-spacing: -.01em;
  text-wrap: balance; margin-block: .5rem 1rem;
}
.slide-copy p{ font-family: var(--font-body); font-style: italic; font-size: 1.05rem; margin-bottom: 1.4rem; max-width: 40ch; }
.hero-nav{
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  display: flex; gap: .6rem; z-index: 5;
}
.hero-nav button{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243,238,231,.6);
  color: var(--ground); display: flex; align-items: center; justify-content: center;
}
.hero-nav button:hover{ background: rgba(243,238,231,.15); }
.hero-ticks{ position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); display: flex; gap: .5rem; z-index: 5; }
.hero-ticks button{ width: 28px; height: 20px; padding: 0; display: flex; align-items: center; background: transparent; }
.hero-ticks button::after{ content: ""; display: block; width: 100%; height: 3px; background: rgba(243,238,231,.45); }
.hero-ticks button.active::after{ background: var(--ground); }

/* ---------- categorías circulares ---------- */
.cat-strip .wrap{ padding-block: var(--gutter); }
.cat-row{
  display: flex; gap: clamp(1.1rem, 3vw, 2.2rem);
  overflow-x: auto; padding-block: .3rem 1rem; scrollbar-width: thin;
}
.cat-item{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .7rem; width: 108px; text-align: center; }
.cat-thumb{
  width: 100px; height: 100px; border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 10px 20px -14px rgba(36,31,44,.4);
  transition: box-shadow .2s;
  position: relative;
}
.cat-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.cat-item:hover .cat-thumb{ box-shadow: 0 0 0 2px var(--ink), 0 10px 20px -14px rgba(36,31,44,.4); }
.cat-item:hover .cat-thumb img{ transform: scale(1.08); }
.cat-thumb.tag-sale{ display: flex; align-items: flex-end; justify-content: center; }
.cat-thumb.tag-sale img{ position: absolute; inset: 0; }
.cat-thumb.tag-sale span{
  position: relative; z-index: 1; color: var(--ground);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  padding-bottom: .5rem; text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.cat-item span{ font-family: var(--font-display); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- franja USP ---------- */
.usp{ border-block: 1px solid var(--line); background: var(--ground-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.usp .wrap{
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-block: 1.6rem;
}
.usp-item{ display: flex; gap: .9rem; align-items: flex-start; padding-inline: 1.1rem; border-left: 1px solid var(--line-strong); }
.usp-item:first-child{ border-left: none; padding-left: 0; }
.usp-item .icon{ width: 26px; height: 26px; color: var(--plum); margin-top: .1rem; }
.usp-item h3{ font-family: var(--font-display); font-size: .82rem; letter-spacing: .03em; margin-bottom: .2rem; }
.usp-item p{ font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 900px){
  .usp .wrap{ grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
}
@media (max-width: 540px){
  .usp .wrap{ grid-template-columns: 1fr; }
  .usp-item{ border-left: none; padding-left: 0; }
}

/* ---------- productos + filtros ---------- */
.shop{ padding-block: calc(var(--gutter) * 1.3); }
.tabs{ display: flex; gap: 1.8rem; }
.tab{ font-family: var(--font-display); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: .3rem; border-bottom: 2px solid transparent; }
.tab.active{ color: var(--ink); border-color: var(--brass); }
/* En pantallas grandes, el panel de filtros es una columna fija a la izquierda (estilo Shein):
   siempre visible, sin necesidad de pulsar nada, y "sticky" para que acompañe al cliente
   mientras baja a ver los productos. En pantallas pequeñas (ver media queries más abajo) se
   convierte en un desplegable horizontal que se abre con el botón "Filtrar". */
.shop-toolbar{ display: none; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.shop-layout{ display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 2.6rem; }

.filters{
  display: block;
  position: sticky;
  top: 1.6rem;
  max-height: calc(100vh - 3.2rem);
  overflow-y: auto;
  padding-right: .6rem;
}
.filters form{ display: flex; flex-direction: column; gap: 2.2rem; }
.filters input[type="checkbox"]{ position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.sizes label, .swatches label{ position: relative; cursor: pointer; }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.filter-group h4{ font-family: var(--font-display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; color: var(--ink-soft); }
.swatches{ display: flex; flex-wrap: wrap; gap: .55rem; }
.swatch{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(36,31,44,.4); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 1px 2px rgba(36,31,44,.2); position: relative; transition: transform .15s ease; }
.swatch:hover{ transform: scale(1.12); }
.swatch.active::after{ content: ""; position: absolute; inset: -5px; border: 2px solid var(--brass-deep); border-radius: 50%; }
/* variante con foto real de la prenda en ese color, en vez de círculo de color plano */
.swatch.swatch-photo{
  width: 64px; height: 64px; border-radius: 0;
  background-size: cover; background-position: center;
  transition: box-shadow .18s, border-color .18s;
}
.swatch.swatch-photo.active::after{ inset: -3px; border-radius: 0; }
.swatch.swatch-photo:not(.active):not(:disabled):hover{
  border-color: var(--brass); box-shadow: 0 0 0 3px rgba(196,144,31,.35);
}
/* filtro de categoría: lista vertical con casilla visible (los nombres son demasiado
   largos para el formato de círculo/píldora que usan talla y color). */
.filter-checklist{ display: flex; flex-direction: column; gap: .8rem; }
.filter-checklist label{ display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--ink); cursor: pointer; }
.filter-checklist input[type="checkbox"]{ position: static; opacity: 1; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: 0 0 auto; }
.sizes{ display: flex; flex-wrap: wrap; gap: .5rem; }
.size-chip{
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #A89A80;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  transition: border-color .18s, box-shadow .18s;
}
.size-chip.active{ background: var(--ink); color: var(--ground); border-color: var(--ink); }
.size-chip:not(.active):not(:disabled):hover{
  border-color: var(--brass); box-shadow: 0 0 0 3px rgba(196,144,31,.35);
}
.swatch:disabled, .size-chip:disabled{ opacity: .3; cursor: not-allowed; }
.swatch:disabled::after{ content: none; }

.variations{ margin-bottom: .6rem; }
.variations label{ font-family: var(--font-display); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: .6rem; }
.variation-label-elegido{ font-weight: 400; color: var(--ink); }
.variations tr + tr label{ margin-top: 1rem; }
.variations td, .variations th{ padding: 0; border: none; display: block; }
.reset_variations{ font-size: .78rem; text-decoration: underline; margin-top: .6rem; display: inline-block; }
.single_variation_wrap{ margin-block: 1rem; }
.price-range{ display: flex; flex-direction: column; gap: .6rem; }
.price-range input[type="range"]{ width: 100%; accent-color: var(--ink); }
.price-values{ display: flex; justify-content: space-between; font-family: var(--font-display); font-size: .78rem; font-variant-numeric: tabular-nums; }
/* Fundido sutil mientras los filtros se aplican por AJAX (sin recarga). */
.shop-layout .grid{ transition: opacity .22s ease; }
.shop-layout .grid.filtrando{ opacity: .35; pointer-events: none; }
/* Barra de precio doble: dos cursores superpuestos sobre una sola línea. */
.price-range.dual{ gap: .7rem; }
.dual-slider{ position: relative; height: 22px; }
.dual-slider .dual-track{ position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--line); }
.dual-slider .dual-fill{ position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--brass); }
.dual-slider input[type="range"]{ position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual-slider input[type="range"]::-webkit-slider-runnable-track{ height: 22px; background: transparent; }
.dual-slider input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brass-deep); cursor: pointer; }
.dual-slider input[type="range"]::-moz-range-track{ height: 22px; background: transparent; }
.dual-slider input[type="range"]::-moz-range-thumb{ pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brass-deep); cursor: pointer; }
#precioMin{ z-index: 2; }
#precioMax{ z-index: 3; }
.filters-actions{ display: flex; flex-direction: column; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.2rem;
}
@media (min-width: 640px){ .grid{ grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem; } }
@media (min-width: 1000px){ .grid{ grid-template-columns: repeat(4, 1fr); } }
.card{ display: flex; flex-direction: column; cursor: pointer; }
.card-media{ position: relative; aspect-ratio: 3/4; color: var(--ground); display: flex; align-items: flex-end; overflow: hidden; background: var(--ground-2); }
.card-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .35s ease; }
.card:hover .card-media img{ transform: scale(1.05); }
.card-img-hover{ opacity: 0; }
.card:hover .card-img-hover{ opacity: 1; }
.card-tag{ position: absolute; top: .7rem; left: .7rem; font-family: var(--font-display); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .6rem; background: var(--ink); color: var(--ground); z-index: 2; }
.card-tag.new{ background: var(--sage); }
.card-tag.sale{ background: var(--error); }
.wish-btn{
  position: absolute; top: .6rem; right: .6rem; color: var(--ground); z-index: 2;
  background: rgba(36,31,44,.35); border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.wish-btn .icon{ width: 17px; height: 17px; }
.wish-btn.active{ background: var(--ground); }
.wish-btn.active .icon{ fill: var(--error); stroke: var(--error); }
.card-body{ padding-top: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.card-body h3{ font-family: var(--font-body); font-style: italic; font-size: 1rem; margin-bottom: .3rem; }
.price-row{ display: flex; gap: .6rem; align-items: baseline; font-family: var(--font-display); font-size: .92rem; font-variant-numeric: tabular-nums; }
.card-price-row{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.card-mini-actions{ display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.card-add-btn{
  flex: 0 0 auto !important; width: 34px !important; height: 34px !important; min-width: 0 !important;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong) !important; color: var(--ink) !important; background: var(--surface) !important;
  transition: background .18s, color .18s, border-color .18s;
}
.card-add-btn .icon{ width: 15px; height: 15px; }
.card-add-btn:hover{ background: var(--ink) !important; color: var(--ground) !important; border-color: var(--ink) !important; }
.card-add-btn.loading{ opacity: .6; pointer-events: none; }
.card-add-btn.added{ background: var(--sage) !important; border-color: var(--sage) !important; color: var(--ground) !important; }
.card-buy-btn{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--brass); color: var(--ground); background: var(--brass);
  transition: background .18s, border-color .18s;
}
.card-buy-btn .icon{ width: 15px; height: 15px; }
.card-buy-btn:hover{ background: var(--brass-deep); border-color: var(--brass-deep); }
.card-buy-btn.loading{ opacity: .6; pointer-events: none; }
.price-was{ text-decoration: line-through; color: var(--ink-soft); font-size: .8rem; }
.price-sale{ color: var(--brass-deep); }
.stars{ display: flex; gap: .15rem; color: var(--brass); margin-top: .35rem; }
.stars .icon{ width: 13px; height: 13px; }

/* ---------- banner promo + newsletter ---------- */
.promo{ margin-block: var(--gutter); display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 100%; }
@media (min-width: 860px){ .promo{ grid-template-columns: 1.3fr 1fr; } }
.promo--full{ grid-template-columns: 1fr !important; }
/* En móvil, sin aspect-ratio: solo una altura mínima fija, para que no pueda "tironear"
   del ancho de la caja (eso era lo que dejaba la página más ancha que la pantalla). El
   aspect-ratio solo entra en juego a partir de 640px, donde ya no da problemas. */
.promo--full .promo-media{ min-height: 300px; flex-direction: column; align-items: flex-start; }
@media (min-width: 640px){ .promo--full .promo-media{ aspect-ratio: 21/9; } }
.promo-media{ width: 100%; max-width: 100%; color: var(--ground); display: flex; align-items: flex-end; padding: 2rem; position: relative; overflow: hidden; }
@media (min-width: 640px){ .promo-media{ aspect-ratio: 4/3; } }
.promo-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.promo-media::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(20,16,22,.72) 0%, rgba(20,16,22,.15) 55%, rgba(20,16,22,0) 75%); }
.promo-media h2{ position: relative; z-index: 2; }
.promo-media h2{ font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; text-wrap: balance; }
.promo-form{ background: var(--surface); padding: clamp(1.6rem, 4vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.promo-form .eyebrow{ color: var(--brass-deep); }
.promo-form h3{ font-family: var(--font-body); font-style: italic; font-size: 1.5rem; text-wrap: balance; }
.promo-form p{ color: var(--ink-soft); font-size: .92rem; }

/* ---------- categorías destacadas de la home (columnas grandes, rotan solas) ---------- */
.cat-showcase{
  margin-block: var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 760px){ .cat-showcase{ grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.cat-showcase-item{
  position: relative; aspect-ratio: 3/4; overflow: hidden; color: var(--ground);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem;
}
.cat-showcase-item img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .35s; }
.cat-showcase-item:hover img{ transform: scale(1.06); }
.cat-showcase-item::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(20,16,22,.72) 0%, rgba(20,16,22,.1) 55%, rgba(20,16,22,0) 75%); }
.cat-showcase-eyebrow{
  position: relative; z-index: 2; align-self: flex-start; font-family: var(--font-display);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--ground); background: rgba(20,16,22,.45); border: 1px solid rgba(243,238,231,.6);
  border-radius: 999px; padding: .25rem .7rem; margin-bottom: .7rem;
}
.cat-showcase-item h3{ position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; margin-bottom: .3rem; text-wrap: balance; }
.cat-showcase-link{ position: relative; z-index: 2; font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.email-row{ display: flex; border-bottom: 1px solid var(--ink); padding-bottom: .6rem; gap: .8rem; }
.email-row input{ flex: 1; border: none; background: transparent; font-style: italic; }
.email-row button{ font-family: var(--font-display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.form-note{ font-size: .72rem; color: var(--ink-soft); }

/* ---------- instagram strip ---------- */
.social-strip .wrap{ padding-block: var(--gutter); }
.social-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
@media (min-width: 640px){ .social-grid{ grid-template-columns: repeat(5,1fr); } }
.social-grid a{ aspect-ratio: 1; color: var(--ground); position: relative; display: flex; align-items: flex-end; padding: .5rem; overflow: hidden; }
.social-grid a img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.social-grid a:hover img{ transform: scale(1.06); }
.social-grid a::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,22,.55), rgba(20,16,22,0) 55%); }
.social-grid a .icon{ width: 16px; height: 16px; position: relative; z-index: 2; }

/* ---------- footer ---------- */
footer{ border-top: 1px solid var(--line); margin-top: var(--gutter); padding-block: 2.6rem 1.4rem; }
.foot-newsletter{
  display: flex; flex-direction: column; gap: 1rem;
  padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line);
}
.foot-newsletter h3{ font-family: var(--font-body); font-style: italic; font-size: 1.2rem; margin-top: .2rem; }
.foot-newsletter .email-row{ display: flex; border-bottom: 1px solid var(--ink); padding-bottom: .5rem; gap: .8rem; max-width: 420px; }
.foot-newsletter .email-row input{ flex: 1; border: none; background: transparent; font-style: italic; font-family: var(--font-body); }
.foot-newsletter .email-row button{ font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.foot-newsletter .form-note{ font-size: .72rem; color: var(--ink-soft); margin-top: .5rem; }
@media (min-width: 720px){
  .foot-newsletter{ flex-direction: row; align-items: center; justify-content: space-between; }
}
.foot-grid{ display: grid; grid-template-columns: 1fr; gap: 2.2rem; margin-bottom: 2.2rem; }
@media (min-width: 720px){ .foot-grid{ grid-template-columns: 1.3fr repeat(3, 1fr); } }
.foot-col h4{ font-family: var(--font-display); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; color: var(--ink-soft); }
.foot-col ul{ display: flex; flex-direction: column; gap: .6rem; }
.foot-col a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.foot-brand .logo{ text-align: left; font-size: 1.6rem; margin-bottom: .6rem; }
.foot-brand p{ color: var(--ink-soft); font-size: .88rem; max-width: 32ch; margin-bottom: 1rem; }
.social-icons{ display: flex; gap: .9rem; }
.social-icons a{ display: flex; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; align-items: center; justify-content: center; }
.social-icons a:hover{ background: var(--ink); color: var(--ground); border-color: var(--ink); }
.foot-bottom{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.pay-icons{ display: flex; gap: .7rem; flex-wrap: wrap; }
.pay-icons span{ font-family: var(--font-display); font-size: .66rem; letter-spacing: .05em; border: 1px solid var(--line-strong); padding: .3rem .55rem; color: var(--ink-soft); }
.copyright{ font-size: .76rem; color: var(--ink-soft); }

@media (max-width: 900px){
  .masthead .wrap{ grid-template-columns: auto 1fr auto; }
  .hide-desktop{ display: inline-flex; }
  .hide-mobile{ display: none !important; }
  .search-wrap{ display: none; }
  .search-wrap.mobile-open{
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); padding: .8rem var(--gutter) 1rem; z-index: 55;
    border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px -14px rgba(36,31,44,.2);
  }
  .search-wrap.mobile-open .search-box{ width: 100%; }
  .masthead-side.left{ justify-content: flex-start; }
  .shop-toolbar{ display: flex; }
  .shop-layout{ display: block; }
  .filters{
    display: none;
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    border-top: 1px solid var(--line);
    padding-block: 1.6rem;
    margin-bottom: .4rem;
  }
  .filters.open{ display: block; }
  .filters.open form{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
  .filters-actions{ grid-column: 1/-1; flex-direction: row; padding-top: .4rem; }
  .mobile-drawer{ inset: 0 14% 0 0; }
}
@media (max-width: 540px){
  .filters.open form{ grid-template-columns: 1fr; }
  .mobile-drawer{ inset: 0 8% 0 0; }
}

/* ---------- ficha de producto ---------- */
.breadcrumb{ font-family: var(--font-display); font-size: .74rem; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; padding-block: 1.4rem .2rem; }
@media (max-width: 759px){
  /* en móvil se quitan las migas de pan del todo, para que el contenido empiece más
     arriba; en escritorio se quedan exactamente igual. */
  .breadcrumb{ display: none; }
}
.breadcrumb a:hover{ color: var(--ink); text-decoration: underline; }
.pd{ padding-block: 1rem 3rem; }
.pd-grid{ display: grid; gap: 1.8rem 2.4rem; }
@media (min-width: 760px){ .pd-grid{ grid-template-columns: 1.1fr 1fr; align-items: start; } }
.pd-media{ position: relative; background: var(--ground); }
.pd-media > img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pd-media .card-tag{ position: absolute; top: .7rem; left: .7rem; }

/* galeria nativa de WooCommerce */
.woocommerce-product-gallery__wrapper{ margin: 0; }
.woocommerce-product-gallery__image{ aspect-ratio: 3/4; overflow: hidden; }
.woocommerce-product-gallery__image a{ display: block; width: 100%; height: 100%; }
.woocommerce-product-gallery__image img{ width: 100%; height: 100%; object-fit: cover; }
.flex-control-thumbs{ display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: .8rem 0 0; margin: 0; background: var(--ground); }
.flex-control-thumbs li{ width: 70px; }
.flex-control-thumbs img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; cursor: pointer; opacity: .6; transition: opacity .15s; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover{ opacity: 1; }
@media (min-width: 760px){
  /* en escritorio, miniaturas en columna vertical pegadas a la izquierda de la imagen principal.
     ojo: flexslider (JS) envuelve .woocommerce-product-gallery__wrapper dentro de un
     div.flex-viewport nuevo, así que el verdadero hermano de las miniaturas es
     .flex-viewport, no .woocommerce-product-gallery__wrapper. */
  .woocommerce-product-gallery{ display: flex; gap: .7rem; }
  .flex-viewport{ order: 2; flex: 1 1 auto; min-width: 0; }
  .flex-control-thumbs{
    order: 1; flex: 0 0 72px; width: 72px;
    flex-direction: column; flex-wrap: nowrap;
    padding: 0; overflow-y: auto;
    /* sin esto, un elemento flex nunca se encoge por debajo de la altura de su propio
       contenido (aunque tenga overflow:auto) — con más de 8 fotos, la columna se salía
       hacia abajo en vez de hacer scroll. Esta línea es la que de verdad lo arregla. */
    min-height: 0;
    /* scroll fino y discreto, a juego con la web, en vez del gris grueso por defecto */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .flex-control-thumbs::-webkit-scrollbar{ width: 4px; }
  .flex-control-thumbs::-webkit-scrollbar-track{ background: transparent; }
  .flex-control-thumbs::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 999px; }
  .flex-control-thumbs::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }
  /* 8 miniaturas exactas rellenan la altura de la imagen principal (8 huecos + 7 huecos de gap);
     de la 9ª en adelante, se sale del alto disponible y aparece scroll dentro de la columna. */
  .flex-control-thumbs li{ width: 100%; flex: 0 0 calc((100% - 7 * .6rem) / 8); }
  .flex-control-thumbs img{ height: 100%; aspect-ratio: auto; }
}
.pd-info h1, .pd-cabecera h1{ font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .5rem; }
.pd-info .price-row, .pd-cabecera .price-row{ font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-block: .8rem 1.2rem; }
@media (max-width: 759px){
  /* en móvil, para que "Color" no quede lejos: la foto principal deja de ocupar casi
     toda la pantalla (se limita su altura en vez de dejar que la proporción 3/4 la
     estire), las miniaturas se hacen más pequeñas, y el título/precio se compactan.
     No afecta al escritorio. */
  .woocommerce-product-gallery__image{ aspect-ratio: auto; height: 56vh; max-height: 460px; }
  .pd-media > img{ aspect-ratio: auto; height: 56vh; max-height: 460px; }
  .flex-control-thumbs{ gap: .4rem; padding-top: .5rem; }
  .flex-control-thumbs li{ width: 50px; }
  .pd-info h1, .pd-cabecera h1{ font-size: 1.3rem; margin-bottom: .3rem; }
  .pd-info .price-row, .pd-cabecera .price-row{ font-size: 1.15rem; margin-block: .3rem .6rem; }
  .pd-grid{ gap: .8rem; }
}
.pd-desc{ color: var(--ink); font-size: 1.02rem; line-height: 1.65; max-width: 50ch; margin-bottom: 1.4rem; }
.pd-actions{ display: flex; align-items: flex-start; gap: .8rem; margin-block: 1.4rem; }
@media (max-width: 759px){
  /* menos aire entre bloques: cabecera-imagen y miniaturas-Talla quedaban muy separados.
     Van DESPUÉS de las reglas base de arriba a propósito: con la misma especificidad,
     en CSS gana la que esté más abajo en el archivo. */
  .pd-desc{ margin-bottom: .6rem; }
  .pd-actions{ margin-block: .5rem 1rem; }
}
.pd-actions .btn{ flex: 1; padding-block: .9rem; }
.pd-cta-row{ display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.pd-media .wish-btn{ width: 40px; height: 40px; }
.pd-media .wish-btn .icon{ width: 19px; height: 19px; }
.woocommerce-product-gallery .flex-direction-nav{
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  display: flex; justify-content: space-between; padding-inline: .6rem; z-index: 3;
  list-style: none; margin: 0; pointer-events: none;
}
.woocommerce-product-gallery .flex-direction-nav li{ pointer-events: auto; }
.woocommerce-product-gallery .flex-direction-nav a{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; font-size: 0;
  background: rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(36,31,44,.18);
  transition: background .18s;
}
.woocommerce-product-gallery .flex-direction-nav a:hover{ background: var(--surface); }
.woocommerce-product-gallery .flex-direction-nav a::before{
  display: block; font-size: 1.5rem; line-height: 1; font-family: Arial, sans-serif; color: var(--ink);
}
.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before{ content: "‹"; margin-right: 2px; }
.woocommerce-product-gallery .flex-direction-nav a.flex-next::before{ content: "›"; margin-left: 2px; }
.woocommerce-product-gallery .flex-direction-nav .flex-disabled{ opacity: .35; pointer-events: none; }
@media (max-width: 759px){
  /* En móvil el gesto táctil ya permite pasar de foto; las flechas solo restan espacio. */
  .woocommerce-product-gallery .flex-direction-nav{ display: none; }
}
.pd-usp{ display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .88rem; color: var(--ink-soft); }
.pd-usp li{ display: flex; align-items: center; gap: .6rem; }
.pd-usp .icon{ width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 759px){
  /* en móvil, productos SIN tabla de talla/color (simples): el bloque de comprar se
     adelanta justo después del precio; la descripción pasa a mostrarse después. Los
     productos CON talla/color usan pd-cabecera en vez de esto (ver más abajo), así
     que estas reglas no les afectan. */
  .pd-info{ display: flex; flex-direction: column; }
  .pd-info h1{ order: 1; }
  .pd-info .price-row{ order: 2; }
  .pd-info .pd-actions{ order: 3; }
  .pd-info .pd-desc{ order: 4; }
  .pd-info .pd-usp{ order: 5; }
}
/* Productos CON talla/color: título+precio+descripción viven en un bloque aparte,
   .pd-cabecera, hermano de la imagen (.pd-media) y del resto (.pd-info) dentro de
   .pd-grid — así, en móvil (una sola columna, orden natural del HTML) la cabecera
   aparece ANTES que la imagen sin tocar nada más. En escritorio, se usan zonas de
   rejilla con nombre para reconstruir el aspecto de siempre: imagen a la izquierda
   ocupando toda la altura, cabecera arriba a la derecha y el resto (talla, color,
   comprar...) debajo, en la misma columna — exactamente como estaba. NO TOCAR el
   bloque "min-width: 760px" de aquí abajo. */
.pd-cabecera{ margin-bottom: .8rem; }
@media (max-width: 759px){
  .pd-cabecera{ margin-bottom: .2rem; }
}
@media (min-width: 760px){
  .pd-grid.pd-grid--con-cabecera{
    grid-template-areas: "media cabecera" "media info";
  }
  .pd-grid--con-cabecera .pd-cabecera{ grid-area: cabecera; margin-bottom: 0; }
  .pd-grid--con-cabecera .pd-media{ grid-area: media; }
  .pd-grid--con-cabecera .pd-info{ grid-area: info; }
}
/* El precio, en productos con talla/color, existe por duplicado (una copia en
   pd-cabecera para escritorio, otra dentro del formulario de compra —justo después
   de la tabla de talla/color— para móvil); cada copia se enseña solo en su ancho de
   pantalla correspondiente. Es solo texto estático repetido, no afecta en nada al
   funcionamiento de la compra. */
.price-row--mobile{ display: none; }
@media (max-width: 759px){
  .price-row--desktop{ display: none; }
  .price-row--mobile{ display: block; }
  /* el precio en móvil vive junto al botón de comprar: se le da más tamaño/peso para
     que no se pierda entre la tabla de talla/color y el botón. */
  .pd-info .price-row--mobile{ font-size: 1.5rem; font-weight: 700; margin-block: .4rem .2rem; }
  .single_variation_wrap{ margin-block: 0 1rem; }
}

/* ---------- aviso de cookies ---------- */
.cookie-banner{
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200;
  max-width: 640px; margin-inline: auto;
  background: var(--ink); color: var(--ground);
  border-radius: 6px; padding: 1rem 1.2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.4);
}
.cookie-banner p{ font-size: .85rem; flex: 1; min-width: 200px; }
.cookie-banner a{ text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner .btn{ background: var(--ground); color: var(--ink); border-color: var(--ground); flex-shrink: 0; }
.cookie-banner .cookie-actions{ display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-banner .btn.ghost{ background: transparent !important; color: var(--ground) !important; border-color: var(--ground) !important; }

/* ---------- compatibilidad WooCommerce ---------- */
.price ins{ text-decoration: none; color: var(--brass-deep); margin-left: .5rem; }
.price del{ color: var(--ink-soft); font-size: .85em; opacity: .8; }
.price{ font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{
  list-style: none; margin: 0 0 1.4rem; padding: 1rem 1.2rem;
  border: none; border-left: 4px solid var(--line-strong); border-radius: 0 10px 10px 0;
  background: var(--ground-2); font-family: var(--font-body); font-style: normal; color: var(--ink);
}
.woocommerce-info{ border-left-color: var(--brass); background: #F8EFDC; }
.woocommerce-message{ border-left-color: var(--sage); background: #EEF1E7; }
.woocommerce-error{ border-left-color: var(--error); background: #FBEAE8; color: var(--error); }

/* ---------- métodos de pago del checkout ---------- */
.pay-title{ font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; margin: 0 0 .9rem; }
#payment ul.wc_payment_methods{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); padding: 0; }
#payment ul.wc_payment_methods li{ list-style: none; border-bottom: 1px solid var(--line); padding: .9rem 1rem; margin: 0; background: transparent; }
#payment ul.wc_payment_methods li:last-child{ border-bottom: 0; }
#payment ul.wc_payment_methods li:has(> input:checked){ background: #F8EFDC; box-shadow: inset 4px 0 0 var(--brass); }
#payment ul.wc_payment_methods label{ display: flex; align-items: center; gap: .65rem; font-weight: 600; cursor: pointer; margin: 0; }
#payment #wcpay-express-checkout-element{ margin: 0; }
#wcpay-express-checkout-button-separator{ display: none !important; }
/* Los botones express van arriba del formulario con una línea de corte
   sutil debajo (en vez del texto "— O —"), a juego con la web. Solo cuando
   hay botones de verdad (iframe montado): si el dispositivo no tiene
   wallet, el contenedor queda vacío y sin adornos. */
.wcpay-express-checkout-wrapper:has(iframe){ border-bottom: 2px solid var(--line-strong); padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
/* Express en la cesta: aire respecto al botón de finalizar compra. */
.cart-collaterals .wcpay-express-checkout-wrapper{ margin-top: .9rem; }
#payment ul.wc_payment_methods input.input-radio{ accent-color: var(--brass-deep); width: 1.1rem; height: 1.1rem; margin: 0; flex-shrink: 0; }
/* El fieldset que mete WooPayments alrededor de los campos de tarjeta trae
   el borde "ranurado" por defecto del navegador: fuera, limpio. */
#payment fieldset.wc-payment-form{ border: 0; padding: 0; margin: 0; min-width: 0; }
#payment .wc_payment_methods label img{ height: 1.35rem; width: auto; }
/* Casilla de términos + botón final: mismo idioma visual que el resto. */
.woocommerce-terms-and-conditions-wrapper .checkbox{ display: flex; gap: .65rem; align-items: flex-start; font-size: .85rem; }
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"]{ accent-color: var(--brass-deep); width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex-shrink: 0; }
.woocommerce-terms-and-conditions-wrapper a{ color: var(--brass-deep); }
.form-row.place-order{ margin-top: 1.2rem; }
#place_order{ width: 100%; }
#payment div.payment_box{ background: rgba(255,255,255,.6); border-radius: 10px; margin: .8rem 0 0; padding: .9rem 1rem; font-size: .85rem; }
#payment div.payment_box::before{ display: none; }
#wcpay-express-checkout-element{ margin: 0; }
#wcpay-express-checkout-button-separator{ color: var(--ink-soft); letter-spacing: .15em; font-size: .8rem; }
.woocommerce-message .button, .woocommerce-error .button{ margin-left: .8rem; }
/* WooCommerce añade solo un icono de su propia fuente (tick, "i" de info...) delante
   del texto con position:absolute — pensado para un padding-left grande que ya no
   tenemos con este diseño más compacto, así que el icono quedaba montado ENCIMA de
   las primeras letras en vez de al lado. Como el borde de color de la izquierda ya
   indica de sobra si es aviso/éxito/error, quitamos el icono entero en vez de
   intentar volver a encajarlo. */
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before,
.woocommerce-noreviews::before, .woocommerce-message li::before, .woocommerce-error li::before{
  content: none !important;
}

form.cart{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* En productos con tabla de talla/color (form.cart contiene esa tabla Y el bloque de
   cantidad+comprar como dos elementos flex separados), el bloque de cantidad+comprar
   debe bajar SIEMPRE a su propia línea, debajo de la tabla — nunca flotar a su lado.
   Sin este ancho, cuando la tabla es estrecha (pocas opciones, o círculos de color en
   vez de miniaturas de foto) cabían los dos en la misma fila por pura casualidad de
   anchura, y el bloque de comprar quedaba descentrado, pegado a la derecha de la
   tabla en vez de debajo. No afecta a productos simples (sin tabla), que no tienen
   este bloque y siguen en una sola fila como siempre. */
form.cart .single_variation_wrap{ width: 100%; }
/* Selector de cantidad "ligero": sin la píldora con borde grueso de antes (se
   parecía demasiado a un tercer botón, al lado de "Añadir a la cesta" y
   "Comprar ahora") — ahora son dos círculos finos con icono, y el número
   suelto en medio sin caja, para que pese menos que los botones de compra. */
form.cart .quantity, .woocommerce-cart-form .quantity{ display: inline-flex; align-items: center; gap: 6px; }
form.cart .qty, .woocommerce-cart-form .qty{
  width: 28px; padding: 0; text-align: center;
  border: none; background: transparent; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink);
  -moz-appearance: textfield;
}
form.cart .qty::-webkit-inner-spin-button, form.cart .qty::-webkit-outer-spin-button,
.woocommerce-cart-form .qty::-webkit-inner-spin-button, .woocommerce-cart-form .qty::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.qty-step{
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, background-color .18s, color .18s;
}
.qty-step .icon{ width: 12px; height: 12px; }
.qty-step:hover{ border-color: var(--brass); background: #F8EFDC; color: var(--brass-deep); }

.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.single_add_to_cart_button, .checkout-button, button.button, input.button, a.button, .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 1.6rem; border-radius: 999px !important; border: 1px solid var(--ink) !important;
  background: var(--ink) !important; color: var(--ground) !important; transition: background .18s, color .18s;
  text-decoration: none; cursor: pointer;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover, .checkout-button:hover, button.button:hover, input.button:hover, a.button:hover{
  background: var(--plum) !important; border-color: var(--plum) !important;
}
.btn.ghost{ background: transparent !important; color: var(--ink) !important; }
.btn.ghost:hover{ background: var(--ink) !important; color: var(--ground) !important; }
.wc-block-components-button, .single_add_to_cart_button.disabled{ opacity: .6; }

select, .variations select{
  font-family: var(--font-body); font-style: italic; padding: .5rem .6rem;
  border: 1px solid var(--line-strong); background: var(--surface);
}
table.variations{ margin-bottom: 1rem; }
table.variations td, table.variations th{ padding: .4rem .6rem; text-align: left; font-size: .85rem; }

.shop_table{ width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; font-family: var(--font-display); font-size: .85rem; }
.shop_table th, .shop_table td{ border-bottom: 1px solid var(--line); padding: .8rem .6rem; text-align: left; }
.shop_table thead th{ background: var(--ground-2); }

/* Botón "quitar artículo" (×): mismo lenguaje visual que los círculos +/- de
   cantidad, en vez del círculo rojo por defecto de WooCommerce. Con relleno e
   icono en negrita (en vez de un simple contorno) para que se note a simple
   vista que es un botón pulsable, no solo un signo decorativo. */
.shop_table .product-remove{ width: 32px; }
.shop_table .product-remove a.remove{
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--ground-2); color: var(--ink) !important; font-size: 1.15rem; font-weight: 700; line-height: 1;
  transition: border-color .18s, background-color .18s, color .18s;
}
.shop_table .product-remove a.remove:hover{ border-color: var(--error); background: var(--ground-2); color: var(--error) !important; }

/* En móvil la tabla de la cesta deja de comportarse como tabla (las columnas
   se quedaban demasiado estrechas y la × de quitar artículo acababa
   descolocada, fuera de línea con el resto de la fila): cada artículo pasa a
   ser una "tarjeta" en rejilla, con la miniatura a la izquierda y el nombre
   arriba. La × se saca del todo de la rejilla y se coloca con posición
   absoluta en la esquina superior derecha de la tarjeta — así no depende del
   ancho del precio (antes compartía columna con el subtotal, que es mucho
   más ancho que la ×, y eso la empujaba hacia fuera de la fila). Cantidad y
   subtotal comparten la misma celda de la rejilla, uno pegado a la
   izquierda y el otro a la derecha (como si fuera "space-between" de flex),
   en vez de tener cada uno su propia columna de ancho fijo.
   IMPORTANTE: WooCommerce carga su propia hoja "woocommerce-smallscreen.css"
   por debajo de 768px (etiquetas "Producto:"/"Cantidad:" con ::before, y
   oculta la miniatura), con selectores tan específicos como los nuestros —
   por eso aquí se repite ".shop_table_responsive" en cada selector: para
   igualar o superar esa especificidad y que gane siempre nuestra regla. */
@media (max-width: 759px){
  .shop_table.cart.shop_table_responsive thead{ display: none; }
  .shop_table.cart.shop_table_responsive,
  .shop_table.cart.shop_table_responsive tbody,
  .shop_table.cart.shop_table_responsive tr{ display: block; width: 100%; }
  .shop_table.cart.shop_table_responsive tr.cart_item{
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb footer";
    align-items: center; gap: .3rem .8rem;
    padding: 1.1rem 2.6rem 1.1rem 0; border-bottom: 1px solid var(--line);
  }
  .shop_table.cart.shop_table_responsive tr td{
    display: block; border: none; padding: 0; background: none !important; text-align: left !important;
  }
  .shop_table.cart.shop_table_responsive tr td::before{ content: none !important; }
  .shop_table.cart.shop_table_responsive tr td.product-thumbnail{ display: block !important; grid-area: thumb; }
  .shop_table.cart.shop_table_responsive td.product-thumbnail img{ width: 64px; height: auto; }
  .shop_table.cart.shop_table_responsive td.product-name{ grid-area: name; font-size: .88rem; padding-right: .4rem !important; }
  .shop_table.cart.shop_table_responsive td.product-name .reset_variations{ display: block; }
  .shop_table.cart.shop_table_responsive tr td.product-remove{
    position: absolute; top: 1.1rem; right: 0; width: auto; text-align: center !important;
  }
  .shop_table.cart.shop_table_responsive td.product-quantity{ grid-area: footer; justify-self: start; }
  .shop_table.cart.shop_table_responsive tr td.product-subtotal{
    grid-area: footer; justify-self: end; font-weight: 700; text-align: right !important;
  }
  .shop_table.cart.shop_table_responsive td.product-price{ display: none; }
  /* Selector de cantidad más compacto que en escritorio: los círculos y el
     hueco entre ellos se quedaban demasiado sueltos en una pantalla
     estrecha. */
  .shop_table.cart.shop_table_responsive .quantity{ gap: 2px; }
  .shop_table.cart.shop_table_responsive .qty-step{ width: 26px; height: 26px; }
  .shop_table.cart.shop_table_responsive .qty-step .icon{ width: 10px; height: 10px; }
  .shop_table.cart.shop_table_responsive .qty{ width: 20px; font-size: 1rem; }
}

.woocommerce-billing-fields input, .woocommerce-additional-fields input, .woocommerce-additional-fields textarea,
.woocommerce-billing-fields select, #order_comments{
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line-strong); background: var(--surface);
  font-family: var(--font-body); font-style: italic; margin-top: .3rem;
}
.form-row label{ font-family: var(--font-display); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 1rem; }

.woocommerce-pagination ul{ display: flex; gap: .6rem; justify-content: center; list-style: none; padding: 0; margin-top: 2rem; }
.woocommerce-pagination a, .woocommerce-pagination span{
  display: inline-flex; padding: .5rem .9rem; border: 1px solid var(--line-strong); font-family: var(--font-display); font-size: .8rem;
}
.woocommerce-pagination .current{ background: var(--ink); color: var(--ground); }
/* La tienda usa la paginación de WordPress (the_posts_pagination), no la de
   Woo: mismo idioma (píldoras centradas, tipografía de marca). */
.navigation.pagination{ margin-top: 2.2rem; }
.navigation.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; }
.navigation.pagination .page-numbers{
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.navigation.pagination a.page-numbers:hover{ border-color: var(--brass-deep); color: var(--brass-deep); }
.navigation.pagination .page-numbers.current{ background: var(--ink); border-color: var(--ink); color: var(--ground); }
.navigation.pagination .page-numbers.dots{ border: 0; background: none; min-width: 0; height: auto; }

.cross-sells{ margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.cross-sells h2{ font-family: var(--font-body); font-style: italic; font-size: 1.3rem; margin-bottom: 1.2rem; }
.cross-sells ul.products{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; list-style: none; padding: 0; }
@media (min-width: 640px){ .cross-sells ul.products{ grid-template-columns: repeat(4, 1fr); } }
.cross-sells ul.products li.product{ text-align: center; }
.cross-sells ul.products img{ aspect-ratio: 3/4; object-fit: cover; margin-bottom: .6rem; }
.cross-sells ul.products .woocommerce-loop-product__title{ font-family: var(--font-body); font-style: italic; font-size: .92rem; }

.page-content p{ margin-bottom: 1rem; color: var(--ink-soft); }
.page-content h2{ font-family: var(--font-display); font-size: 1.05rem; margin-block: 1.6rem .6rem; }
.page-content a{ color: var(--brass-deep); text-decoration: underline; text-underline-offset: 3px; }
.page-content a:hover{ color: var(--plum); }
.pd-full-desc p{ color: var(--ink-soft); margin-bottom: 1rem; }