/* ============================================================
   STAAD HOME — Cabecera + menu de lujo (slide-out)
   ============================================================ */

/* ---------- Barra superior (fija; se oculta al bajar) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* ---------- Barra de administracion de WordPress ----------
   Solo la ve quien tiene la sesion abierta, pero era la culpable del hueco
   enorme entre el menu y el contenido: WP empuja el documento entero con
   html{margin-top} y pinta su barra fija encima de todo. La cabecera, en
   top:0, se le metia DEBAJO (por eso el logo salia cortado) y el empujon
   quedaba como vacio muerto bajo el menu. Medido en el navegador: 52px en
   movil y 56px en escritorio, contra los 6 y 24px que ve un visitante.
   Basta con bajar la cabecera lo que mide la barra: las dos se desplazan
   igual y el respiro del contenido vuelve a ser el disenado. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
/* Por debajo de 600px la barra de WP deja de ser fija: vive en el flujo y
   se va al bajar. La cabecera arranca igualmente debajo de ella (asi el
   administrador puede pulsarla) y, en cuanto se pasa el umbral de scroll
   —con la barra ya fuera de la pantalla—, sube a ras. El contenido no se
   mueve en ningun caso: su respiro no depende de donde este la cabecera. */
@media screen and (max-width: 600px) {
  body.admin-bar.is-scrolled .site-header { top: 0; }
}

/* ---------- Franja de aviso (envio gratuito) ----------
   Va DENTRO de la cabecera fija, encima de la barra: se esconde y vuelve
   junto con ella al hacer scroll. Fondo tinta para que se lea igual sobre
   el crema de las paginas internas y sobre la foto del home.
   Su alto vive en --aviso-h (tokens.css) y ya esta sumado a --header-h /
   --header-h-sm, que es de donde todo el sitio saca su respiro superior. */
.site-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .7em;
  min-height: var(--aviso-h);
  padding: 4px var(--lux-pad-x);
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.55rem, 0.51rem + 0.16vw, 0.66rem);
  line-height: 1.3;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}
/* Solo cuando la clienta pone enlace la franja es pulsable */
a.site-aviso { transition: opacity var(--dur) var(--ease-out); }
a.site-aviso:hover { opacity: .78; }

/* La condicion, un punto por debajo: se lee, pero no compite con el aviso */
.site-aviso__nota {
  color: rgba(255, 255, 255, .62);
  letter-spacing: .1em;
}

/* En movil el aviso no cabe en una linea (medido: harian falta 5px de
   letra), asi que se reparte en DOS con menos tracking y menos margen
   lateral. --aviso-h sube en consecuencia para que la cabecera siga
   apartando el contenido justo lo que ocupa. */
@media (max-width: 560px) {
  :root { --aviso-h: 34px; }
  .site-aviso {
    padding-inline: 14px;
    column-gap: .5em;
    letter-spacing: .08em;
  }
  .site-aviso__nota { letter-spacing: .06em; }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--bar-h);
  padding-inline: var(--lux-pad-x);
  transition: min-height var(--dur) var(--ease);
}

.site-header__logo {
  display: block;
  line-height: 0;
  transition: opacity var(--dur) var(--ease);
}

.site-header .brand-full,
.site-header .brand-icon {
  display: block;
  width: auto;
  max-width: none;
  transition: filter var(--dur) var(--ease);
}

.site-header .brand-full { height: clamp(58px, 6.4vw, 98px); }
.site-header .brand-icon { display: none !important; }

/* Logo SIEMPRE completo (nunca cambia al monograma); solo se achica al compactar */
body.is-scrolled .site-header .brand-full,
body:not(.home) .site-header .brand-full { height: clamp(54px, 5.4vw, 74px); }

/* En paginas internas (sin hero) deja sitio bajo la barra fija.
   El respiro es `--space-sm` (16-26px), no `--space-md` (26-44px): con el
   md el contenido arrancaba ~112px abajo y se veia un vacio enorme al
   entrar a cualquier pagina.
   (El compacto para movil vive al FINAL de ux.css: esa hoja carga despues
   y a igual especificidad ganaria — no mover el bloque aqui.) */
body:not(.home) #main { padding-top: calc(var(--header-h-sm) + var(--space-sm)); }
body:not(.staad-top-oscuro):not(.staad-top-claro) .site-header { background: var(--c-bg); }
/* Modo claro: barra transparente y textos en tinta (los del tema por
   defecto). El velo crema que los hace legibles lo pone el propio
   banner de apertura, ver .collection--intro en home.css. */
body.staad-top-claro:not(.is-scrolled) .site-header { background: transparent; }
body:not(.home) .site-header__bar { min-height: var(--bar-h-sm); }

/* ---------- Menu visible: Tienda + Colecciones (drop) + categorias ---------- */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: clamp(10px, 1.3vw, 22px);
  min-width: 0;
}
.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(0.6rem, 0.54rem + 0.17vw, 0.7rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur) var(--ease);
}
.main-nav__link:hover { opacity: .55; }
/* "Sale" es el unico enlace del menu que no nombra una categoria sino una
   temporada: va en el marron de la marca para que se encuentre. En el hero
   oscuro del home la barra pinta el menu en blanco, y este tiene que ir con
   ella: un marron sobre una foto oscura no se lee (la regla de mas abajo). */
.main-nav__link--sale { color: var(--c-accent); }
.main-nav__item { position: relative; display: inline-flex; align-items: center; }
.main-nav__item > .main-nav__link::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .55;
}
.main-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 190px;
  background: var(--c-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
  z-index: 60;
}
.main-nav__item:hover .main-nav__menu,
.main-nav__item:focus-within .main-nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.main-nav__menu a {
  font-size: clamp(0.56rem, 0.53rem + 0.1vw, 0.62rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav__menu a:hover { color: var(--c-ink); }

/* En movil/tablet el menu visible se oculta: todo pasa al panel (hamburguesa) */
@media (max-width: 1200px) {
  .main-nav { display: none; }
}

/* ---------- Boton hamburguesa ---------- */
.lux-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 32px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lux-toggle span {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

body.lux-open .lux-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
body.lux-open .lux-toggle span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Overlay ---------- */
.lux-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 100;
}

body.lux-open .lux-overlay { opacity: 1; visibility: visible; }

/* ---------- Panel lateral ---------- */
.lux-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(440px, 100vw);
  height: 100dvh;
  background: var(--c-bg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  z-index: 110;
  display: flex;
  flex-direction: column;
  padding: 0 var(--lux-pad-x) clamp(28px, 4vw, 40px);
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .04);
}

body.lux-open .lux-panel { transform: translateX(0); }

/* La cabecera del panel ocupa el alto del header: el logo del panel
   queda alineado VERTICALMENTE con la X. */
.lux-panel__head {
  display: flex;
  align-items: center;
  min-height: var(--bar-h);
  margin-bottom: clamp(26px, 5vh, 54px);
}

.lux-panel__logo {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-ink);
}

/* ---------- Navegacion ---------- */
.lux-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 15px);
  flex: 1 1 auto;
}

.lux-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.62rem, 0.58rem + 0.15vw, 0.72rem);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.lux-link:hover { opacity: .55; color: var(--c-ink); }
.lux-link--sale { color: var(--c-accent); }
.lux-link--soft { font-size: clamp(0.58rem, 0.55rem + 0.1vw, 0.64rem); color: var(--c-ink-soft); }
.lux-link--soft:hover { color: var(--c-ink); opacity: 1; }
.lux-div { display: block; height: 1px; background: var(--c-line); margin: clamp(8px, 1.4vh, 14px) 0; }

/* Menu de compra dentro del panel: solo cuando el menu visible se oculta (<=1200px) */
.lux-shop { display: none; }
@media (max-width: 1200px) {
  .lux-shop {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vh, 15px);
  }
}

/* ---------- Acordeon "Colecciones" ---------- */
.lux-pm {
  position: relative;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

.lux-pm::before,
.lux-pm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-ink);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.lux-pm::before { width: 11px; height: 1px; }
.lux-pm::after  { width: 1px; height: 11px; }

.lux-acc[aria-expanded="true"] .lux-pm::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.lux-sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              margin-top var(--dur) var(--ease);
}

.lux-acc[aria-expanded="true"] + .lux-sub {
  max-height: 320px;
  opacity: 1;
  margin-top: 12px;
}

.lux-sub a {
  display: block;
  width: fit-content;
  padding: 4px 0;
  color: var(--c-ink-soft);
  font-size: clamp(0.58rem, 0.55rem + 0.1vw, 0.64rem);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.lux-sub a:hover { color: var(--c-ink); }

/* ---------- Pie del panel ---------- */
.lux-foot {
  margin-top: clamp(36px, 6vh, 56px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lux-foot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lux-foot__row a {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: opacity var(--dur) var(--ease);
}

.lux-foot__row--soft a { color: var(--c-ink-soft); }
.lux-foot__row a:hover { opacity: .6; }

/* ---------- Bloqueo de scroll con el menu abierto ---------- */
body.lux-open { overflow: hidden; }

/* ============================================================
   Comportamiento de COLOR / VISIBILIDAD de la cabecera
   ============================================================ */

/* (1) HOME, arriba del hero y SIN hover -> logo BLANCO (invertido) + boton blanco */
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .brand-full      { filter: brightness(0) invert(1); }
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .lux-toggle span  { background: var(--c-white); }
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .main-nav__link,
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .main-nav__link--sale { color: var(--c-white); }
/* El selector de idioma va con el resto: en tinta sobre una foto oscura no
   se leeria. El actual, blanco entero; el otro, blanco a media luz. */
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .staad-idiomas__op.is-actual { color: var(--c-white); }
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .staad-idiomas__op { color: rgba(255, 255, 255, .7); }
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .staad-idiomas__sep { color: rgba(255, 255, 255, .45); }

/* (2) HOME, arriba + HOVER -> la barra se vuelve crema (texto ya es oscuro) */
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:hover {
  background: var(--c-bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
}

/* (3) Al hacer SCROLL (cualquier pagina) -> barra crema solida */
body.is-scrolled:not(.lux-open) .site-header {
  background: var(--c-bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
}

/* (4) Ocultar al BAJAR / mostrar al SUBIR */
body.nav-up:not(.lux-open) .site-header { transform: translateY(-100%); }

/* (5) Menu ABIERTO: barra transparente y "pasa-clics" (salvo la X);
       se oculta el logo izquierdo y la X queda oscura sobre el panel */
body.lux-open .site-header       { background: transparent; transform: translateY(0); pointer-events: none; }
body.lux-open .lux-toggle        { pointer-events: auto; }
body.lux-open .site-header__logo { opacity: 0; }
body.lux-open .lux-toggle span   { background: var(--c-ink); }
/* Con el menu abierto, ocultar iconos y menu visible (solo queda la X) */
body.lux-open .site-search,
body.lux-open .site-fav,
body.lux-open .site-account,
body.lux-open .site-cart,
body.lux-open .main-nav { opacity: 0; visibility: hidden; }

/* (6) Al hacer SCROLL: barra mas compacta. El panel acompana para que
       la X siga alineada con el logo del panel. */
body.is-scrolled .site-header__bar { min-height: var(--bar-h-sm); }
body.is-scrolled .lux-panel__head  { min-height: var(--bar-h-sm); }

/* ============================================================
   Carrito: icono en el header
   ============================================================ */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
}

/* ----- Selector de idioma (ES / EN) -----
   Dos siglas menudas, en la escala de las etiquetas del tema. El idioma en
   el que ya estas va en tinta y no es enlace; el otro, tenue, se aclara al
   pasar. Nada de banderas: una bandera no es un idioma. */
.staad-idiomas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
.staad-idiomas__op { color: var(--c-ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.staad-idiomas__op:hover { color: var(--c-ink); }
.staad-idiomas__op.is-actual { color: var(--c-ink); }
.staad-idiomas__sep { color: var(--c-line); }

/* En el panel de movil el bloque respira y va alineado con los enlaces. */
.staad-idiomas--panel {
  margin-top: clamp(8px, 1.4vh, 14px);
  gap: 8px;
  font-size: calc(var(--fs-micro) * 1.05);
}

.site-cart {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.site-cart:hover { opacity: .6; color: var(--c-ink); }
.site-cart__icon { display: block; }
.site-cart__count {
  margin: -8px 0 0 2px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}

/* Color del carrito segun contexto (como el menu) */
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .site-cart { color: var(--c-white); }
body.lux-open .site-cart { opacity: 0; pointer-events: none; }

/* ============================================================
   Carrito lateral (side-cart, slide-out)
   ============================================================ */
.side-cart__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
  z-index: 300;
}
body.side-cart-open .side-cart__overlay { opacity: 1; visibility: visible; }

.side-cart {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  background: var(--c-bg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  z-index: 310;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px) var(--lux-pad-x);
  overflow: hidden;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .05);
}
body.side-cart-open .side-cart { transform: translateX(0); transition: transform var(--dur-slow) var(--ease-out); }
body.side-cart-open { overflow: hidden; }

.side-cart__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-line);
}
.side-cart__title {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-ink);
}
.side-cart__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--c-ink);
  cursor: pointer;
}

/* El contenido del mini-carrito ocupa el alto restante: lista (scroll) + pie fijo */
.side-cart .widget_shopping_cart_content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.side-cart .woocommerce-mini-cart__empty-message {
  margin: auto 0;
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--c-ink-soft);
}

/* Lista de productos: toma el espacio disponible y hace scroll si hay muchos */
.side-cart ul.woocommerce-mini-cart {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada item: imagen grande a la izquierda + texto pequeno a la derecha.
   Selectores reforzados para ganarle a los estilos por defecto de WooCommerce. */
.side-cart ul.cart_list li.mini_cart_item {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--c-line);
  list-style: none;
}
.side-cart li.mini_cart_item .mini-cart__img {
  flex: 0 0 80px !important;
  width: 80px !important;
  display: block;
  overflow: hidden;
}
.side-cart li.mini_cart_item .mini-cart__img img {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--c-bg);
  display: block;
  margin: 0 !important;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.side-cart li.mini_cart_item .mini-cart__img:hover img { transform: scale(1.04); }
.side-cart li.mini_cart_item .mini-cart__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 20px 0 0;
}
.side-cart li.mini_cart_item .mini-cart__name {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-cart li.mini_cart_item .mini-cart__price {
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--c-ink-soft);
}
/* Control de cantidad (- N +) en el carrito */
.side-cart li.mini_cart_item .mini-cart__qtybox {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 4px;
  border: 1px solid var(--c-line);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.side-cart .mini-cart__qtybtn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--c-ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.side-cart .mini-cart__qtybtn:hover { background: var(--c-bg-2); }
.side-cart .mini-cart__qtynum {
  min-width: 28px;
  text-align: center;
  font-size: 11px;
  color: var(--c-ink);
}
.side-cart li.mini_cart_item a.remove {
  position: absolute;
  top: 18px;
  right: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  color: var(--c-ink-soft) !important;
  font-size: 16px;
  transition: color var(--dur-fast) var(--ease-out);
}
.side-cart li.mini_cart_item a.remove:hover { color: var(--c-ink) !important; }
/* WooCommerce le pone fondo de color y borde redondo al hover de la X, y
   sobre el carrito claro salia un cuadro oscuro feo. Se anula en los tres
   estados; el unico cambio al pasar por encima es que la X se oscurece. */
.side-cart li.mini_cart_item a.remove,
.side-cart li.mini_cart_item a.remove:hover,
.side-cart li.mini_cart_item a.remove:focus {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
/* ----- Pie FIJO del carrito: subtotal + botones (siempre visibles) ----- */
.side-cart .woocommerce-mini-cart__total {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.side-cart .woocommerce-mini-cart__total .amount { font-weight: 400; }
/* ----- La promocion dentro del carrito -----
   Aqui no se anuncia nada: si sale tachado es porque el cupon YA esta
   puesto y ese es el importe que se cobra (ver inc/promo.php). Las
   clases son las mismas de la tienda; header.css carga en todas las
   paginas y el carrito lateral tambien. */
.staad-promo__fila {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .5em;
}
.staad-promo__antes {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .45;
  font-size: .88em;
}
.staad-promo__ahora,
.staad-promo__ahora .amount { color: var(--c-ink); }
.side-cart .staad-promo__nota {
  flex: 0 0 auto;
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.side-cart .woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-bottom: 4px;
}
.side-cart .woocommerce-mini-cart__buttons .button {
  width: 100%;
  text-align: center;
  padding: 14px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.side-cart .woocommerce-mini-cart__buttons .button:hover { background: var(--c-bg-2); }
.side-cart .woocommerce-mini-cart__buttons .button:active { transform: translateY(1px); }
.side-cart .woocommerce-mini-cart__buttons .checkout {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}
.side-cart .woocommerce-mini-cart__buttons .checkout:hover { background: var(--c-ink); opacity: .88; color: var(--c-white); }

/* ============================================================
   Cuenta: icono en el header
   ============================================================ */
.site-account {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.site-account:hover { opacity: .6; color: var(--c-ink); }
.site-account__icon { display: block; }

/* ============================================================
   Buscador (icono + overlay) + Favoritos (icono + panel)
   ============================================================ */
.site-search,
.site-fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  padding: 0;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.site-search:hover,
.site-fav:hover { opacity: .6; }
.site-search svg,
.site-fav svg { display: block; }
.site-fav__count {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1;
}
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .site-search,
body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .site-fav { color: var(--c-white); }

/* ----- Overlay de busqueda ----- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 17vh;
  background: rgba(23, 23, 23, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__close {
  position: absolute;
  top: clamp(18px, 3vw, 32px);
  right: clamp(18px, 3vw, 34px);
  border: 0;
  background: transparent;
  color: var(--c-white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.search-overlay__form {
  position: relative;
  width: min(680px, 88vw);
  display: flex;
  align-items: center;
  background: var(--c-bg);
  transform: translateY(-12px);
  transition: transform var(--dur) var(--ease-out);
}
.search-overlay.is-open .search-overlay__form { transform: none; }
.search-overlay__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 0.85rem + 1vw, 1.6rem);
  letter-spacing: .02em;
  color: var(--c-ink);
}
.search-overlay__input::placeholder { color: var(--c-ink-soft); }
.search-overlay__input:focus { outline: none; }
.search-overlay__submit {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  padding: 0 clamp(16px, 2vw, 24px);
  cursor: pointer;
}

/* ----- Panel de favoritos (como el side-cart) ----- */
.fav-cart__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
  z-index: 300;
}
body.fav-open .fav-cart__overlay { opacity: 1; visibility: visible; }
.fav-cart {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  background: var(--c-bg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  z-index: 310;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px) var(--lux-pad-x);
  overflow: hidden;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .05);
}
.fav-cart.is-open { transform: translateX(0); transition: transform var(--dur-slow) var(--ease-out); }
body.fav-open { overflow: hidden; }
.fav-cart__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-line);
}
.fav-cart__title {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-ink);
}
.fav-cart__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--c-ink);
  cursor: pointer;
}
.fav-cart__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.fav-empty {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.8;
  letter-spacing: .03em;
  color: var(--c-ink-soft);
}
.fav-loading { margin-top: var(--space-md); text-align: center; font-size: var(--fs-small); color: var(--c-ink-soft); }
.fav-list { list-style: none; margin: 0; padding: 0; }
.fav-item {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: center;
}
.fav-item__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--c-bg);
  display: block;
}
.fav-item__info { display: flex; flex-direction: column; gap: 5px; padding-right: 22px; }
.fav-item__name {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-ink);
}
.fav-item__price { font-size: 11px; color: var(--c-ink-soft); }
.fav-item__remove {
  position: absolute;
  top: 16px;
  right: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.fav-item__remove:hover { color: var(--c-ink); }

body.staad-top-oscuro:not(.is-scrolled):not(.lux-open) .site-header:not(:hover) .site-account { color: var(--c-white); }
body.lux-open .site-account { opacity: 0; pointer-events: none; }

/* "Colecciones" no lleva a ninguna parte: solo abre su desplegable. Es un
   <button> (accesible con teclado) al que se le quitan los rasgos de boton
   para que se lea igual que el resto del menu. */
.main-nav__link--soloabre {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  /* SOLO la tipografia de familia: el tamano, el espaciado, las mayusculas
     y el color los pone .main-nav__link, igual que en los demas enlaces.
     Antes habia aqui 'font: inherit' y 'text-transform: inherit', que
     heredaban del contenedor y pisaban esos estilos: por eso Colecciones
     salia en minusculas y con otra letra. */
  font-family: inherit;
  cursor: default;
}

/* ---------- Velo de "cargando" al eliminar del carrito ----------
   WooCommerce tapa la fila con el velo de blockUI, que por defecto es
   NEGRO al 60%: sobre el crema se veia un bloque gris sucio con un punto
   blanco. Se cambia por un velo del propio fondo y el giro fino de la
   marca (el mismo de los botones AJAX). Los estilos de blockUI llegan
   como atributo inline, por eso hace falta !important. */
.side-cart .blockUI.blockOverlay,
.woocommerce .blockUI.blockOverlay {
  background: var(--c-bg) !important;
  opacity: .72 !important;
}
.side-cart .blockUI.blockOverlay::before,
.woocommerce .blockUI.blockOverlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: none !important;
  border: 1px solid var(--c-line);
  border-top-color: var(--c-ink);
  border-radius: 50%;
  animation: staad-spin .6s linear infinite;
}