/* ============================================================
   STAAD HOME — Tienda (WooCommerce)
   ============================================================ */

.shop {
  width: var(--container-wide);
  margin-inline: auto;
  padding-block: var(--space-sm) var(--space-2xl);
}

/* ============================================================
   Mini-banner (tienda / categoria / coleccion)
   ============================================================ */
.shop-banner { margin-bottom: var(--space-lg); }

.shop-banner__eyebrow {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-2xs);
}

.shop-banner__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section-title);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0;
}

/* Descripcion de coleccion: tamano de nota al pie, discreta bajo el titulo */
.shop-banner__desc {
  margin-top: var(--space-xs);
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.8;
  letter-spacing: .01em;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}
.shop-banner__desc p { margin: 0; }

/* Variante con imagen (colecciones): texto izquierda, foto derecha */
.shop-banner--split {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  /* La foto se alinea con el borde derecho y el texto se apoya en su base.
     Antes iba centrado (el texto caia 154px por debajo) y ademas la foto,
     limitada por ALTO, quedaba 380px corta de la derecha: se limita por
     ANCHO y la proporcion 16/9 decide el alto. */
  align-items: end;
  grid-template-columns: 1.5fr 1fr;
}
/* La foto conserva su proporcion (16:9) para que no se corten las patas de
   los muebles. El tope evita que se vuelva gigante en pantallas muy anchas;
   si llega a recortar, lo hace por arriba (pared) y no por abajo. */
.shop-banner--split .shop-banner__media {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  width: 100%;
  overflow: hidden;
}
/* La foto es un <img> real (con texto alt para SEO), ya no un fondo CSS */
.shop-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

@media (max-width: 820px) {
  .shop-banner--split { grid-template-columns: 1fr; }
  /* En movil la foto va arriba y tambien conserva su proporcion */
  .shop-banner--split .shop-banner__media { order: -1; height: auto; max-height: 300px; }
}

/* ============================================================
   Avisos de WooCommerce (info / mensaje / error) — estilo STAAD
   ============================================================ */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.cart-empty {
  margin: 0 0 var(--space-md) !important;
  padding: var(--space-sm) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--c-line) !important;
  border-bottom: 1px solid var(--c-line) !important;
  border-radius: 0 !important;
  list-style: none;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  line-height: 1.7;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none !important; display: none !important; }
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a { color: var(--c-ink); text-decoration: underline; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: var(--space-sm); }

/* ============================================================
   Barra de filtros (Oferta / En stock / Tipo / Resultados / Orden)
   ============================================================ */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-line);
}

.shop-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.shop-filters__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink);
  cursor: pointer;
  user-select: none;
}
.shop-filters__check input {
  width: 14px;
  height: 14px;
  accent-color: var(--c-ink);
  cursor: pointer;
}

.shop-filters__select {
  font: inherit;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 20px 4px 2px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23171717' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/* Cambio de vista (densidad del grid) */
.shop-filters__view { display: inline-flex; align-items: center; gap: 8px; }
.shop-view {
  border: 0;
  background: transparent;
  padding: 2px;
  line-height: 0;
  color: var(--c-line);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.shop-view:hover { color: var(--c-ink-soft); }
.shop-view.is-active { color: var(--c-ink); }

/* Dropdown personalizado (reemplaza al <select> nativo) */
.dd { position: relative; }
/* La barra de filtros va en la escala MICRO del tema, la de las etiquetas:
   menuda y con aire entre letras. Con --fs-small competia con el nombre de
   las piezas, y una barra de filtros no es contenido, es herramienta. */
.dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding: 4px 0;
}
.dd__caret {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.dd.is-open .dd__caret { transform: rotate(-135deg) translate(-1px, 0); }
.dd__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  min-width: 168px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}
.dd.is-open .dd__menu { opacity: 1; visibility: visible; transform: none; }
/* Que el menu nunca sea gigante: altura tope con scroll interno */
.dd__menu { max-height: min(320px, 55vh); overflow-y: auto; max-width: min(300px, calc(100vw - 32px)); }
/* La barra de ese scroll salia gruesa y oscura dentro de un menu que es
   todo linea fina: un bloque negro en la esquina. Se deja en un hilo. */
.dd__menu {
  scrollbar-width: thin;
  scrollbar-color: var(--c-line) transparent;
}
.dd__menu::-webkit-scrollbar { width: 4px; }
.dd__menu::-webkit-scrollbar-track { background: transparent; }
.dd__menu::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border-radius: 2px;
}
/* Cerrado ocupa sitio invisible y en movil empujaba el ancho de la pagina
   (scroll horizontal fantasma en la tienda): cerrado = fuera del layout.
   display admite transicion discreta, asi que el fundido se conserva. */
.dd__menu {
  display: none;
  transition-behavior: allow-discrete;
  transition-property: opacity, transform, visibility, display;
}
.dd.is-open .dd__menu { display: block; }
@starting-style {
  .dd.is-open .dd__menu { opacity: 0; transform: translateY(-6px); }
}
/* El grupo de la derecha (orden/vista) abre el menu hacia la izquierda para no salirse */
.shop-filters__group:last-child .dd__menu { left: auto; right: 0; }
.dd__opt {
  padding: 9px 16px;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dd__opt:hover { background: var(--c-bg-2); color: var(--c-ink); }
.dd__opt.is-sel { color: var(--c-ink); }

/* El contador va en la misma escala que los desplegables: la barra entera
   se lee como una sola linea de herramientas, no como dos tamanos. */
.shop-filters .woocommerce-result-count {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Dropdown con seleccion activa */
.dd--active .dd__label { color: var(--c-ink); }

/* Chips de filtros activos (se ve lo seleccionado) */
.shop-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 var(--space-md);
}
.shop-active__label {
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-right: 2px;
}
.shop-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.shop-active__chip span { font-size: 14px; line-height: 1; }
.shop-active__chip:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.shop-active__clear {
  margin-left: 4px;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.shop-active__clear:hover { color: var(--c-ink); }

/* ============================================================
   Paginacion (1 2 3...) estilo STAAD
   ============================================================ */
.woocommerce-pagination {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 16px);
  margin: 0;
  padding: 0;
  border: 0 !important;
  list-style: none;
}
.woocommerce-pagination ul li {
  margin: 0;
  border: 0 !important;
}
/* OJO: WooCommerce estiliza la paginacion con `.woocommerce nav.woocommerce-pagination
   ul li a` (mas especifico que un selector suelto), asi que sin ese prefijo GANA
   su lila por defecto #816f98 y su min-width de 1em. Cada regla se escribe en las
   dos formas: la suelta (por si el nav no cuelga de .woocommerce) y la prefijada. */
.woocommerce-pagination ul li a.page-numbers,
.woocommerce-pagination ul li span.page-numbers,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(34px, 3vw, 44px);
  height: 44px;
  padding: 0 6px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: var(--c-ink-soft);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Subrayado fino bajo el numero: el indicador de pagina actual */
.woocommerce-pagination ul li a.page-numbers::after,
.woocommerce-pagination ul li span.current::after,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers::after,
.woocommerce nav.woocommerce-pagination ul li span.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 11px;
  width: 60%;
  height: 1px;
  background: var(--c-ink);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  color: var(--c-ink);
  background: transparent !important;
}
.woocommerce-pagination ul li span.current::after,
.woocommerce nav.woocommerce-pagination ul li span.current::after { transform: translateX(-50%) scaleX(1); }

.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce-pagination ul li a.page-numbers:focus,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
  color: var(--c-ink);
  background: transparent !important;
}
.woocommerce-pagination ul li a.page-numbers:hover::after,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover::after { transform: translateX(-50%) scaleX(1); }

/* Los puntos suspensivos no son un boton: sin subrayado ni hover */
.woocommerce-pagination ul li span.dots,
.woocommerce nav.woocommerce-pagination ul li span.dots {
  color: var(--c-line);
  letter-spacing: .1em;
}
.woocommerce-pagination ul li span.dots::after,
.woocommerce nav.woocommerce-pagination ul li span.dots::after { content: none; }

/* Anterior / Siguiente: flechas con mas aire y un desplazamiento sutil */
.woocommerce-pagination ul li a.prev,
.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  min-width: 44px;
  font-size: 1rem;
  letter-spacing: 0;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce-pagination ul li a.prev::after,
.woocommerce-pagination ul li a.next::after,
.woocommerce nav.woocommerce-pagination ul li a.prev::after,
.woocommerce nav.woocommerce-pagination ul li a.next::after { content: none; }
.woocommerce nav.woocommerce-pagination ul li a.next:hover { transform: translateX(3px); }
.woocommerce nav.woocommerce-pagination ul li a.prev:hover { transform: translateX(-3px); }

/* La paginacion de la pagina de busqueda (markup de WordPress) con el mismo look */
.staad-search .navigation.pagination { margin-top: var(--space-xl); text-align: center; }
.staad-search .navigation.pagination .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.staad-search .navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  letter-spacing: .05em;
  transition: color var(--dur-fast) var(--ease-out);
}
.staad-search .navigation.pagination .page-numbers.current {
  color: var(--c-ink);
  box-shadow: inset 0 -1px 0 var(--c-ink);
}
.staad-search .navigation.pagination a.page-numbers:hover { color: var(--c-ink); }
.staad-search .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   Pagina de la promocion (SALE)
   Una portada centrada y, debajo, la misma rejilla de la tienda.
   El sello "30% OFF" ya va en cada tarjeta: aqui arriba se cuenta
   la promocion una sola vez y en voz baja.
   ============================================================ */
/* La franja: ancha, de otro color y centrada, como la de la referencia.
   El fondo es --c-bg-2, el crema "un tono mas" del tema: se separa de la
   pagina sin gritar, y deja el texto en tinta —que se lee—. El taupe de la
   marca daria mas contraste de fondo pero el blanco encima solo llega a
   3.7:1, por debajo del minimo legible para un parrafo. */
.promo-banda {
  margin: var(--space-xs) 0 var(--space-lg);
  padding: clamp(28px, 3.5vw, 52px) clamp(20px, 4vw, 64px);
  background: var(--c-bg-2);
  text-align: center;
}
/* base.css limita TODO parrafo a 68ch. Sin margen automatico ese limite los
   pega a la izquierda, y dentro de una franja centrada eso canta: el titular
   salia 300px a la izquierda del centro (visto en el navegador). De ahi el
   margin-inline: auto de los tres. */
.promo-banda p { margin-inline: auto; }
.promo-banda__titulo {
  margin: 0 auto;
  /* En mayusculas cada letra ocupa mas que el "0" con el que se mide ch:
     con 46ch el titular partia en dos lineas teniendo sitio de sobra. */
  max-width: 62ch;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(0.92rem, 0.75rem + 0.85vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-wrap: balance;
}
.promo-banda__texto {
  margin: var(--space-xs) auto 0;
  max-width: 70ch;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}
.promo-banda__nota {
  margin: var(--space-xs) auto 0;
  max-width: none;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* La misma franja dentro de una coleccion (Sofas, Mesas de comedor...).
   Alli no es la portada de la pagina sino un aviso debajo del titulo de la
   coleccion, asi que va mas baja y mas justa: si ocupara lo mismo que en la
   pagina SALE empujaria la rejilla fuera del primer pantallazo, que es lo
   que la clienta vino a ver. */
.promo-banda--archivo {
  margin: 0 0 var(--space-md);
  padding: clamp(18px, 2.2vw, 30px) clamp(20px, 4vw, 64px);
}
.promo-banda--archivo .promo-banda__titulo {
  font-size: clamp(0.82rem, 0.72rem + 0.5vw, 1.05rem);
}
.promo-banda--archivo .promo-banda__texto {
  margin-top: 6px;
  font-size: var(--fs-micro);
  line-height: 1.7;
}
.promo-banda--archivo .promo-banda__nota { margin-top: 6px; }
.promo-page__count {
  margin: 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.promo-page__nav {
  margin-top: var(--space-lg);
  text-align: center;
}
.promo-page__nav .page-numbers {
  display: inline-block;
  padding: 6px 10px;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.promo-page__nav .page-numbers:hover,
.promo-page__nav .page-numbers.current { color: var(--c-ink); }
.promo-page__nav .page-numbers.current { box-shadow: inset 0 -1px 0 var(--c-ink); }

/* Sin promocion en marcha se dice, y se ofrece la salida: una cuadricula
   vacia parece un error de la web. */
.promo-page__vacio {
  margin: var(--space-lg) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink-soft);
}
.promo-page__vacio-cta {
  margin: var(--space-sm) auto var(--space-2xl);
  text-align: center;
}
.promo-page__vacio-cta a {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 4px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.promo-page__vacio-cta a:hover { border-bottom-color: var(--c-ink); }

/* ============================================================
   Grid + tarjeta de producto
   ============================================================ */
.shop ul.products {
  list-style: none;
  clear: both;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(54px, 6vw, 110px) clamp(56px, 8vw, 150px);
}
/* WooCommerce mete pseudo-elementos (clearfix) que en un grid ocupan celdas vacias */
.shop ul.products::before,
.shop ul.products::after { content: none; display: none; }

/* Woo trae una rejilla antigua de columnas flotantes. Debajo de 768px su hoja
   'woocommerce-smallscreen' impone width:48.05% + float + margin con el
   selector [class*="columns-"], que gana por especificidad: la tarjeta se
   quedaba a media anchura de su celda. Repetimos ese selector para anularlo. */
.shop ul.products li.product,
.shop ul.products[class*="columns-"] li.product {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
}

.staad-card { position: relative; text-align: center; }

.staad-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg);
  margin-bottom: var(--space-sm);
}
.staad-card__media-link {
  position: absolute;
  inset: 0;
  display: block;
}
.staad-card__media img,
.staad-card__media-hover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}
/* Libros: cada portada tiene su propia proporcion — mostrarla COMPLETA
   (sin recortar) en vez de forzarla al 4:5 con "cover". */
.product_cat-libros .staad-card__media img {
  object-fit: contain !important;
  background: var(--c-bg);
}

/* Muebles: las fotos del proveedor son CUADRADAS y la pieza va de lado a
   lado, asi que el 4:5 de la tarjeta con "cover" les cortaba los brazos.
   Se muestran completas sobre el crema — como las fotos ya vienen con
   fondo crema, el encaje no se nota. */
.product_cat-sofas .staad-card__media img,
.product_cat-poltronas .staad-card__media img,
.product_cat-sillas .staad-card__media img,
.product_cat-mesas-de-centro .staad-card__media img,
.product_cat-mesa-comedor .staad-card__media img,
.product_cat-mesas-auxiliares .staad-card__media img,
.product_cat-mobiliario .staad-card__media img {
  object-fit: contain !important;
  background: var(--c-bg);
}

/* Segunda foto: aparece al pasar el mouse */
.staad-card__media-hover {
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.staad-card:hover .staad-card__media-hover { opacity: 1; }
/* Si ya se eligio un acabado, manda ESA foto: la del hover es de otro
   acabado y, como los cuadritos estan dentro de la tarjeta, la tapaba. */
.staad-card.has-acabado .staad-card__media-hover { opacity: 0 !important; }

/* Si no hay 2a foto, un leve zoom al pasar el mouse */
.staad-card__media img { transition: opacity .6s var(--ease), transform 1.3s var(--ease); }
.staad-card:hover .staad-card__media img:not(.staad-card__media-hover) { transform: scale(1.045); }

/* Badges: Oferta / Nuevo */
/* Los sellos van apilados en la esquina: la columna manda la posicion y
   cada sello es solo una etiqueta. Asi caben dos ("30% OFF" y "Nuevo")
   sin pelearse por el mismo hueco. */
.staad-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.staad-badge {
  display: inline-block;
  padding: 4px 9px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.staad-badge--promo { background: var(--c-accent); color: var(--c-white); }
.staad-badge--sale  { background: var(--c-accent); color: var(--c-white); }
.staad-badge--new   { background: var(--c-ink); color: var(--c-white); }

/* Compra rapida: barra que sube sobre la foto */
.staad-card__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 12px;
  transform: translateY(101%);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.staad-card:hover .staad-card__actions,
.staad-card:focus-within .staad-card__actions { transform: none; opacity: 1; }
/* En tactil (movil/tablet) ocultamos la compra rapida: tocas la tarjeta y entras al producto */
@media (hover: none) {
  .staad-card__actions { display: none !important; }
}
.staad-card__actions .button,
.staad-card__actions a.button {
  position: relative;
  display: block;
  width: 100%;
  background: rgba(23, 23, 23, .92);
  color: var(--c-white);
  border: 0;
  padding: 11px 14px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.staad-card__actions .button:hover,
.staad-card__actions a.button:hover { background: var(--c-ink); }
.staad-card__actions .button:active,
.staad-card__actions a.button:active { transform: translateY(1px); }
.staad-card__actions .added_to_cart { display: none; }

/* ----- Corazon de favoritos en las tarjetas ----- */
.staad-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 244, 241, .82);
  border: 0;
  border-radius: 50%;
  color: var(--c-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.staad-card:hover .staad-fav,
.staad-fav.is-fav { opacity: 1; transform: none; }
.staad-fav svg { fill: none; transition: fill var(--dur-fast) var(--ease-out); }
.staad-fav.is-fav svg { fill: var(--c-ink); }
.staad-fav:hover { background: var(--c-bg); }
.staad-fav.just-faved { animation: staad-pop .42s var(--ease-out); }
@keyframes staad-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@media (hover: none) { .staad-fav { opacity: 1; transform: none; } }

/* Corazon en la ficha de producto (con texto) */
.staad-fav--single {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  gap: 9px;
  padding: 0;
  margin-top: var(--space-sm);
  background: transparent;
  border-radius: 0;
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.staad-fav--single:hover { background: transparent; color: var(--c-ink); }
.staad-fav--single.is-fav { color: var(--c-ink); }
.staad-fav--single.is-fav svg { fill: var(--c-ink); }

/* Info: titulo / acabados / precio. Centrado bajo la foto (referencia RH):
   la imagen es la pieza y el texto es un pie discreto, no una columna. */
.staad-card__info { display: block; color: var(--c-ink); }
.staad-card__title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.64rem, 0.6rem + 0.15vw, 0.72rem);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
}
.staad-card__link { display: block; color: inherit; }
.staad-card__meta {
  display: block;
  margin: 5px 0 0;
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--c-ink-soft);
}

/* Acabados en la tarjeta: mismo lenguaje que la ficha (ver .staad-swatches
   en este archivo) — cuadraditos sueltos y CENTRADOS bajo el nombre, para
   que la foto siga siendo lo unico grande de la tarjeta. Mas pequenos que
   en la ficha porque aqui es una vista rapida, no el argumento de venta. */
.staad-card__swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  gap: 6px;
  margin: 9px 0 14px;
  border: 0;
}
/* El color elegido se suma al nombre */
.staad-card__variant { color: var(--c-ink-soft); }
.staad-card__swatch {
  flex: 0 0 auto;
  width: clamp(38px, 3.4vw, 50px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--c-line);
  /* Mismo zoom que en la ficha (ver .staad-swatch) */
  background: var(--c-bg-2, #EFEDE8) center / 600% no-repeat;
  cursor: pointer;
  position: relative;
}
.staad-card__swatch:hover::after { opacity: .35; }
.staad-card__swatch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--c-ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.staad-card__swatch.is-sel::after { opacity: 1; }
.staad-card__price {
  display: block;
  margin-top: 6px;
  font-size: clamp(0.66rem, 0.63rem + 0.1vw, 0.72rem);
  font-weight: 300;
  color: var(--c-ink-soft);
}
.staad-card__price del { opacity: .5; margin-right: 6px; }
.staad-card__price ins { text-decoration: none; color: var(--c-ink); }

/* Densidad del grid (cambio de vista) */
.shop ul.products.products--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop ul.products.products--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .shop ul.products.products--cols-2,
  .shop ul.products.products--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Botones (producto / carrito)
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-block;
  background: var(--c-ink);
  color: var(--c-white);
  border: 1px solid var(--c-ink);
  border-radius: 0;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  opacity: .85;
  color: var(--c-white);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active { transform: translateY(1px); }

/* Insignia de oferta (generica) */
.woocommerce span.onsale {
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: 0;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
}

@media (max-width: 900px) { .shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .shop ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 5vw, 26px) clamp(9px, 3vw, 14px);
  }
  .staad-card__title { font-size: 9px; letter-spacing: .05em; line-height: 1.4; margin-top: 2px; }
  .staad-card__price { font-size: 10px; margin-top: 4px; }
  .staad-card__actions { display: none !important; }
  /* Solo el corazon de las TARJETAS: el boton de la ficha (--single) lleva
     texto "Agregar a favoritos" y encogerlo a 27px lo partia en vertical. */
  .staad-fav:not(.staad-fav--single) { width: 27px; height: 27px; top: 8px; right: 8px; }
  .staad-fav:not(.staad-fav--single) svg { width: 14px; height: 14px; }
  .staad-badges { top: 9px; left: 9px; gap: 3px; }
  .staad-badge { font-size: 8px; padding: 3px 7px; letter-spacing: .12em; }
}

/* ============================================================
   Pagina de producto (single)
   ============================================================ */
.single-product div.product {
  display: block;
}

/* Galeria (izquierda) + resumen (derecha). El resumen es sticky DENTRO de __top,
   asi se queda fijo mientras subes por las fotos y no se solapa con relacionados. */
/* ---------- La ficha arranca pegada a la barra ----------
   El aire de arriba lo ponia `--space-sm` de header.css y, sumado a la
   franja de migas que iba a todo lo ancho sobre las dos columnas, dejaba
   ~114px de vacio antes de la foto. Las migas ahora viven dentro del
   resumen (ver staad_migas_ficha en inc/woocommerce.php) y aqui solo
   queda el hueco de la cabecera fija.
   OJO especificidad: header.css trae `body:not(.home) #main` = (1,1,1);
   con `body.single-product:not(.home)` subimos a (1,2,1) y ademas
   shop.css se encola DESPUES, asi que gana sin !important. */
body.single-product:not(.home) #main {
  padding-top: calc(var(--header-h-sm) + var(--space-2xs));
}
@media (max-width: 860px) {
  body.single-product:not(.home) #main {
    padding-top: calc(var(--header-h-sm) + 6px);
  }
}
/* Migas dentro de la columna del resumen, justo encima del titulo */
.single-product .summary .woocommerce-breadcrumb--ficha {
  margin: 0 0 var(--space-2xs);
}

/* La FOTO es la protagonista (estilo RH): la galeria se lleva todo el ancho
   que sobra y el resumen queda en una columna estrecha y fija de lectura
   comoda (~300-420px), no en media pagina como antes. */
.staad-single__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 29vw, 420px);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: start;
}

/* ----- Galeria: stack vertical estilo RH (una imagen debajo de otra) ----- */
.single-product .staad-gallery {
  display: flex !important;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 26px);
  margin: 0;
  width: 100% !important;
  opacity: 1 !important;
}
.single-product .staad-gallery__img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--c-bg);
}

/* ----- Piezas por cotizacion (WhatsApp) ----- */
.staad-quote-wrap { margin: var(--space-sm) 0 var(--space-md); }
.staad-quote-note {
  margin: 0 0 14px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.staad-quote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.staad-quote:hover { opacity: .88; color: var(--c-white); }
.staad-quote:active { transform: translateY(1px); }
.staad-quote svg { display: block; flex: none; }

/* ----- Resumen (sticky) ----- */
.single-product .summary {
  position: sticky;
  top: calc(var(--header-h-sm) + clamp(20px, 3vw, 48px));
  margin: 0;
  padding-bottom: var(--space-md);
}
/* WooCommerce pone width:48% al resumen y a la galeria: los anulamos para que llenen su columna. */
.woocommerce div.product .summary,
.single-product div.product .summary {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
}
.woocommerce div.product .woocommerce-product-gallery,
.single-product div.product .staad-gallery {
  width: 100% !important;
  float: none !important;
}
/* El nombre de la pieza es lo mas importante de la ficha: va con la
   tipografia de titulos de la marca, como los banners y las paginas. */
.single-product .summary .product_title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 6px;
  text-wrap: balance;
}
/* Byline de coleccion: el renglon pequeno bajo el titulo, en taupe.
   Va pegado al titulo (6px) porque forman una sola unidad de lectura. */
.single-product .summary .staad-byline {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-taupe-txt, #6E665D);
}
.single-product .summary .staad-byline a {
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}
.single-product .summary .staad-byline a:hover { color: var(--c-ink); }
.single-product div.product .summary .price {
  font-size: clamp(0.85rem, 0.8rem + 0.22vw, 0.98rem);
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--c-ink);
  margin: 0 0 var(--space-xs);
}
.single-product .summary .price del { opacity: .5; margin-right: 8px; }
.single-product .summary .price ins { text-decoration: none; }
.single-product .summary .stock { display: none; }

.single-product .woocommerce-product-details__short-description {
  font-size: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  line-height: 1.75;
  letter-spacing: .01em;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-sm);
}

/* Cantidad + anadir al carrito (en la MISMA linea) */
.single-product form.cart {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 var(--space-md);
}
/* En una pieza con acabados el formulario lleva DENTRO el selector de color,
   la descripcion de la variante y el boton: si es flex quedan en fila y el
   boton se va a la derecha. Aqui va en bloque y la fila es la de dentro. */
.single-product form.cart.variations_form { display: block; }
.single-product form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin-top: var(--space-sm);
}
.single-product form.cart.variations_form .single_variation_wrap { display: block; }
/* La ficha tecnica del acabado se lee como el resto de textos de apoyo:
   pequena y en gris, no como un titular. */
.single-product .woocommerce-variation-description,
.single-product .woocommerce-variation-description p {
  font-size: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--c-ink-soft);
}
.single-product .woocommerce-variation-description p { margin: 0 0 var(--space-2xs); }
.single-product .woocommerce-variation-description strong {
  font-weight: 400;
  color: var(--c-ink);
}
/* Contador de cantidad: menos / numero / mas, como en el carrito lateral.
   Las flechitas nativas del navegador no se pueden estilar y desentonaban
   con el resto; se ocultan y se ponen dos botones propios. */
.single-product form.cart .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-line);
}
.single-product form.cart .quantity .qty {
  width: 40px;
  min-height: 50px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--c-ink);
  appearance: textfield;
  -moz-appearance: textfield;
}
.single-product form.cart .quantity .qty:focus { outline: none; }
.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product form.cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.staad-qty-btn {
  width: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.staad-qty-btn:hover { color: var(--c-ink); background: var(--c-bg-2, #EFEDE8); }
.staad-qty-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.single-product form.cart .single_add_to_cart_button { flex: 1 1 220px; min-height: 50px; }

/* "Agregar al carrito": gana al morado .alt por defecto de WooCommerce */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}
.woocommerce div.product form.cart .button:hover { opacity: .85; color: var(--c-white); }

/* Blindaje: WooCommerce pinta de morado (#a46497) cualquier boton .alt.
   Aqui NUNCA debe verse ese morado, ni en hover. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { opacity: .85; }

/* WooCommerce pinta de morado tambien los botones .alt DESACTIVADOS — que
   es el estado del boton mientras no se elige tela. Esa regla suya lleva una
   clase mas (.alt.disabled) que el blindaje de arriba, asi que le ganaba:
   de ahi el morado del hover. Aqui se cubre ese estado y ademas se atenua,
   para que se lea que falta elegir algo antes de poder anadir. */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce input.button.alt.disabled:hover,
.woocommerce button.button.alt.wc-variation-selection-needed,
.woocommerce button.button.alt.wc-variation-selection-needed:hover {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
  opacity: .45;
  cursor: not-allowed;
}

/* Variaciones */
.single-product .variations { border: 0; margin: 0 0 var(--space-sm); }
.single-product .variations th,
.single-product .variations td { padding: 6px 0; text-align: left; vertical-align: middle; }
.single-product .variations label {
  font-size: var(--fs-small);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.single-product .variations select {
  font: inherit;
  border: 1px solid var(--c-line);
  background: transparent;
  padding: 8px 10px;
  border-radius: 0;
}

/* Meta */
.single-product .product_meta {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-line);
  font-size: clamp(0.56rem, 0.54rem + 0.1vw, 0.64rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.single-product .product_meta > span { display: block; margin-bottom: 7px; }
.single-product .product_meta a { color: var(--c-ink); }

/* ----- Tabs / descripcion ----- */
.single-product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
}
.single-product .woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-sm);
  border-bottom: 1px solid var(--c-line);
}
.single-product .woocommerce-tabs ul.tabs li {
  position: relative;
  margin: 0;
  padding: 0;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { content: none !important; }
.single-product .woocommerce-tabs ul.tabs::before { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0 0 6px;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  box-shadow: inset 0 -1px 0 transparent;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li:hover a { color: var(--c-ink); }
.single-product .woocommerce-tabs ul.tabs li.active a { box-shadow: inset 0 -1px 0 var(--c-ink); }
.single-product .woocommerce-Tabs-panel {
  max-width: 70ch;
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--c-ink-soft);
}
.single-product .woocommerce-Tabs-panel h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-sm);
}

/* ----- Relacionados ----- */
.single-product .related,
.single-product .up-sells {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
}
/* Carrusel "Tambien te puede gustar": 3 visibles, gap amplio, sin barra fea */
.single-product .related ul.products,
.single-product .up-sells ul.products {
  --gap: clamp(28px, 4vw, 64px);
  display: flex !important;
  flex-wrap: nowrap;
  grid-template-columns: none !important;
  gap: var(--gap);
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.single-product .related ul.products::-webkit-scrollbar,
.single-product .up-sells ul.products::-webkit-scrollbar { display: none; }
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .single-product .related ul.products li.product,
  .single-product .up-sells ul.products li.product { flex-basis: calc((100% - var(--gap)) / 2); }
}
/* En movil el carrusel de relacionados muestra 2 por vista, igual que la
   rejilla de la tienda (antes mostraba 1 y se veia desproporcionado). */
@media (max-width: 600px) {
  .single-product .related ul.products li.product,
  .single-product .up-sells ul.products li.product { flex-basis: calc((100% - var(--gap)) / 2); }
}

/* ---------- Slider con flechas + dots (relacionados y galeria movil) ---------- */
.staad-slider { position: relative; width: 100%; }
.staad-slider__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 6;
  width: clamp(36px, 4vw, 46px);
  height: clamp(36px, 4vw, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.staad-slider__arrow--prev { left: -6px; }
.staad-slider__arrow--next { right: -6px; }
.staad-slider__arrow:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.staad-slider__arrow:disabled { opacity: 0; pointer-events: none; }
.staad-slider__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--space-sm);
}
.staad-slider__dot {
  width: 16px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--c-line);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.staad-slider__dot.is-active { background: var(--c-ink); width: 26px; }

/* En desktop la galeria es stack vertical: ahi no van flechas/dots */
@media (min-width: 861px) {
  .staad-slider--gallery > .staad-slider__arrow,
  .staad-slider--gallery > .staad-slider__dots { display: none; }
}
.single-product .related > h2,
.single-product .up-sells > h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-lg);
}

@media (max-width: 860px) {
  .staad-single__top { grid-template-columns: 1fr; gap: var(--space-md); }
  .single-product .summary { position: static; }
  /* Galeria como slider horizontal (swipe) en movil: una grande + peek de la siguiente */
  .single-product .staad-gallery {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    scrollbar-width: none;
  }
  .single-product .staad-gallery::-webkit-scrollbar { display: none; }
  .single-product .staad-gallery__img {
    flex: 0 0 92%;
    scroll-snap-align: center;
  }
}

/* ============================================================
   Acordeones del producto (Descripcion, Envios y devoluciones)
   ============================================================ */
.staad-acc {
  margin-top: var(--space-md);
  border-top: 1px solid var(--c-line);
}
.staad-acc__item { border-bottom: 1px solid var(--c-line); }
.staad-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-sm) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.staad-acc__head::-webkit-details-marker { display: none; }
.staad-acc__head:hover { opacity: .6; }
.staad-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}
.staad-acc__icon::before,
.staad-acc__icon::after {
  content: "";
  position: absolute;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.staad-acc__icon::before { top: 50%; left: 0; width: 12px; height: 1px; transform: translateY(-50%); }
.staad-acc__icon::after  { left: 50%; top: 0; width: 1px; height: 12px; transform: translateX(-50%); }
.staad-acc__item[open] .staad-acc__icon::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
.staad-acc__body {
  padding: 0 0 var(--space-md);
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  line-height: 1.9;
  color: var(--c-ink-soft);
}
.staad-acc__body > * { max-width: none; }
.staad-acc__body > * + * { margin-top: var(--space-xs); }
.staad-acc__body a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Medidas / especificaciones (dentro del acordeon)
   OJO: NO usar lineas divisorias entre filas. Los acordeones (.staad-acc__item) ya
   se separan con lineas de borde a borde, y repetirlas aqui hacia que "Diametro" o
   "Alto" parecieran otro acordeon mas. Este bloque se distingue por una base
   crema/taupe muy tenue y por el contraste etiqueta (suave) / valor (tinta). */
.staad-medidas {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 2px 0 6px;
  padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2vw, 20px);
  background: rgba(141, 131, 120, .07);
}
.staad-medidas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
  border: 0;
}
.staad-medidas__k {
  flex: 0 0 auto;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  line-height: 1.6;
}
.staad-medidas__v {
  text-align: right;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  /* Mas menudo que el texto del acordeon: cifras finas, en proporcion con
     la etiqueta (la clienta las veia "bastas" al tamano del parrafo). */
  font-size: .74rem;
  font-weight: 300;
  letter-spacing: .02em;
}

/* ============================================================
   Carrito y Checkout (paginas)
   ============================================================ */

/* Tablas (carrito / pedido) */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-line);
  border-radius: 0;
  margin: 0 0 var(--space-md);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  font-size: var(--fs-small);
}
.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.woocommerce .cart_item img,
.woocommerce .product-thumbnail img { width: 70px; height: auto; }

.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--c-ink-soft) !important;
  font-size: 16px;
  border-radius: 0;
}
.woocommerce a.remove:hover { background: var(--c-ink); color: var(--c-white) !important; }

/* Cantidad */
.woocommerce .quantity .qty {
  width: 64px;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  color: var(--c-ink);
}

/* Titulos de seccion (totales, pedido, pago) */
.cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-column__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-sm);
}

/* Campos de formulario */
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--c-ink-soft);
}
.woocommerce .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #order_comments {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
}
.woocommerce .input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--c-ink); }

/* Cupon */
.woocommerce .coupon .input-text { width: auto; min-width: 200px; margin-right: 8px; }

/* Checkout: formulario izquierda, resumen del pedido derecha */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; }

@media (max-width: 860px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: auto; }
}

/* ============================================================
   Mi cuenta (login / registro / pedidos / direcciones)
   ============================================================ */
.woocommerce-account h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-md);
}

/* Login + Registro (sin sesion) */
#customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  max-width: 920px;
  margin-inline: auto;
}
#customer_login .col-1,
#customer_login .col-2 { width: 100%; float: none; }
#customer_login .woocommerce-form { border: 0; padding: 0; }
.woocommerce-form-login__rememberme,
.woocommerce-form-register__rememberme {
  display: block;
  margin: 8px 0 14px;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

/* Panel (con sesion): navegacion lateral + contenido.
   El contenedor lo pone la plantilla del tema (woocommerce/myaccount/
   my-account.php) y no WooCommerce. Colgar la rejilla de su envoltorio era
   colgarla de algo que cambia entre versiones y segun como este montada la
   pagina: el panel salia con el menu a un lado y el texto estrujado al otro. */
.staad-cuenta {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
/* woocommerce-layout.css los flota al 30% y al 68%. Dentro de una rejilla
   los float no pintan nada y descolocan: fuera. */
.staad-cuenta .woocommerce-MyAccount-navigation,
.staad-cuenta .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--c-line); }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 0;
  font-size: var(--fs-small);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  transition: color var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: var(--c-ink); }

.woocommerce-MyAccount-content {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink);
}
/* Un parrafo a todo lo ancho de la columna se lee mal; y alineado a la
   izquierda, no justificado: en columnas estrechas el justificado abre
   rios de espacio entre palabras. */
.woocommerce-MyAccount-content p {
  max-width: 68ch;
  text-align: left;
}
.woocommerce-MyAccount-content a { color: var(--c-ink); }
.woocommerce-MyAccount-content a.button { color: var(--c-white); }
/* Los enlaces sueltos del texto ("pedidos recientes", "editar tu
   contrasena") con la linea fina de la marca. */
.woocommerce-MyAccount-content p a:not(.button) {
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.woocommerce-MyAccount-content p a:not(.button):hover { border-bottom-color: var(--c-ink); }

/* Direcciones: las dos, una al lado de la otra. */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.woocommerce-Addresses .woocommerce-Address { width: auto; float: none; }
/* Los titulos DENTRO del panel son rotulos de seccion, no titulos de
   pagina: con el tamano de h3 del tema, "Direccion de facturacion" pesaba
   mas que el propio "Mi cuenta" de arriba. Y necesitan aire por encima,
   que iban pegados al parrafo anterior. */
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  margin: var(--space-lg) 0 var(--space-sm);
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  color: var(--c-ink);
  margin: 0;
}
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }

/* "Editar" va JUNTO a su titulo. Con space-between en una columna ancha
   acababa a dos palmos, sin que se viera de que direccion hablaba. */
.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: var(--space-2xs);
}
.woocommerce-Address-title .edit {
  font-size: calc(var(--fs-micro) * .95);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.woocommerce-Address-title .edit:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.woocommerce-Address address {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--c-ink-soft);
}

/* Los formularios de la cuenta no necesitan 100% de ancho: un campo de
   correo de 900px es incomodo de leer y de rellenar. */
.woocommerce-MyAccount-content form { max-width: 620px; }

@media (max-width: 760px) {
  #customer_login { grid-template-columns: 1fr; }
  .staad-cuenta { grid-template-columns: 1fr; }
}

/* ============================================================
   Bloques de WooCommerce (Carrito y Finalizar compra)
   WooCommerce los pinta con su propio tema (gris pizarra, textos
   subrayados, esquinas redondeadas). Aqui los traemos al sistema
   STAAD: tinta, mayusculas discretas, esquinas rectas.
   ============================================================ */

/* ---- Botones principales: Finalizar compra / Realizar pedido ---- */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
  background-color: var(--c-ink) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  color: var(--c-white) !important;
  font-family: var(--font-body);
  font-size: var(--fs-micro) !important;
  font-weight: 400 !important;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 17px 32px !important;
  min-height: 0 !important;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
  background-color: var(--c-ink) !important;
  color: var(--c-white) !important;
  opacity: .88;
}
/* El texto interno del boton tambien llega subrayado desde Woo */
.wc-block-components-button__text { text-decoration: none !important; }

/* ---- Botones secundarios (Aplicar cupon, etc.) ---- */
.wc-block-components-button.is-link {
  color: var(--c-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-size: var(--fs-small);
}

/* ---- Titulos: TOTALES DEL CARRITO, pasos del checkout ---- */
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
  font-family: var(--font-body) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 400 !important;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink) !important;
}

/* ---- Cabecera de la tabla: PRODUCTO / TOTAL ---- */
.wc-block-cart-items__header {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
}

/* ---- Filas del carrito ---- */
.wc-block-cart-items__row { border-bottom: 1px solid var(--c-line); }
.wc-block-components-product-name {
  font-size: var(--fs-body);
  color: var(--c-ink) !important;
  text-decoration: none !important;
}
.wc-block-components-product-name:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.wc-block-components-product-metadata { font-size: var(--fs-small); color: var(--c-ink-soft); }

/* ---- Selector de cantidad ---- */
.wc-block-components-quantity-selector {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius) !important;
  background: transparent;
}
.wc-block-components-quantity-selector__button {
  color: var(--c-ink) !important;
  background: transparent !important;
  font-size: 15px;
}
.wc-block-components-quantity-selector__input { font-size: var(--fs-small); color: var(--c-ink); }

/* ---- Totales ---- */
.wc-block-components-totals-item__label { font-size: var(--fs-small); color: var(--c-ink-soft); }
.wc-block-components-totals-item__value { font-size: var(--fs-small); color: var(--c-ink); }
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-xs);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--c-ink);
}

/* ---- Panel de cupones ---- */
.wc-block-components-panel__button {
  font-size: var(--fs-small) !important;
  font-weight: 400 !important;
  color: var(--c-ink) !important;
}

/* ---- Campos de formulario (checkout) ---- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-blocks-components-select__container,
.wc-block-components-textarea {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  font-family: var(--font-body);
  color: var(--c-ink);
}
.wc-block-components-text-input input:focus { border-color: var(--c-ink) !important; box-shadow: none !important; }

/* ---- Carrito vacio ---- */
.wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { opacity: .35; }

/* ---- Colores heredados del tema de Woo que no encajan ---- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { --wp--preset--color--contrast: var(--c-ink); }
.wc-block-components-notice-banner { border-radius: var(--radius) !important; }

/* Woo fija 13px en las celdas de cabecera y en el nombre; ganamos especificidad */
.wc-block-cart-items__header th,
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
  font-size: var(--fs-micro) !important;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft) !important;
}
.wc-block-cart-item__wrap .wc-block-components-product-name { font-size: var(--fs-body) !important; }

/* ============================================================
   Muestras de color (ficha de producto)
   El <select> de WooCommerce sigue existiendo pero oculto:
   es quien manda; los botones solo lo accionan.
   ============================================================ */
.staad-select-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Al estilo RH: la fila de muestras ocupa TODO el ancho de la columna,
   pegadas unas a otras (se reparten el espacio a partes iguales con
   flex:1) — con 2 telas cada una sale ancha, con 5-6 mas estrechas, pero
   la fila SIEMPRE llena el 100%. Un marco fino envuelve el conjunto y
   divisores de 1px separan cada muestra (border, no box-shadow: asi no
   se duplica visualmente donde dos muestras se tocan). */
.staad-swatches {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  gap: 8px;
  margin: 4px 0 0;
  border: 0;
}
.staad-swatch {
  flex: 0 0 auto;
  /* CUADRADAS y contenidas: la foto de la pieza manda, las muestras son
     una fila discreta de fichas (referencia RH), no una barra a todo lo ancho. */
  width: clamp(56px, 5.4vw, 74px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--c-line);
  /* ZOOM: 600% = se ve 1/6 del ancho de la foto, no la muestra entera.
     Asi se lee el TEJIDO (como en RH) en vez de una foto de tela en
     miniatura, que se veia rara y con aire alrededor. Elegido por la
     clienta entre 1/4, 1/6 y 1/10: a 1/10 se lee la fibra pero deja de
     reconocerse QUE tela es. La foto se pide en tamano 'full' desde PHP
     para que el recorte no salga borroso (1122px / 6 = ventana de 187px). */
  background: var(--c-bg-2, #EFEDE8) center / 600% no-repeat;
  cursor: pointer;
  position: relative;
}
/* Hover: apenas se insinua la linea (feedback sutil sin parecer ya elegida) */
.staad-swatch:hover::after { opacity: .35; }
/* Seleccionada: linea DEBAJO del cuadrado, ligeramente separada (como la
   referencia) — con muestras sueltas se lee mejor que un anillo. */
.staad-swatch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background: var(--c-ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.staad-swatch.is-sel::after { opacity: 1; }
/* ---------- El vacio bajo las muestras ----------
   Entre la fila de muestras y el bloque "Pieza por encargo" se apilaban
   TRES margenes (etiqueta + tabla de variaciones + bloque de cotizar) y
   ademas WooCommerce deja un div VACIO (.woocommerce-variation) mientras
   no hay color elegido. Todo junto: ~90px de blanco sin motivo. */
.single-product .woocommerce-variation.single_variation:empty { display: none !important; }
.staad-cotizar .staad-quote-wrap { margin-top: var(--space-xs); }

/* La etiqueta va ENCIMA de las muestras, en una linea: rotulo fijo a la
   izquierda y referencia elegida a la derecha (patron FINISH de RH). */
.staad-swatches__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 9px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.staad-swatches__rot { flex: none; }
.staad-swatches__val { color: var(--c-ink); }

/* La tabla de variaciones de Woo, sin su marco por defecto */
.variations_form table.variations,
.variations_form table.variations td,
.variations_form table.variations th {
  border: 0;
  padding: 0;
  background: transparent;
}
.variations_form table.variations { margin-bottom: var(--space-xs); }
.variations_form .label { display: none; }
.variations_form .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Piezas por cotizacion: se conserva el selector de color, se quita la compra */
.staad-cotizar .single_add_to_cart_button,
.staad-cotizar form.cart .quantity,
.staad-cotizar .woocommerce-variation-add-to-cart,
.staad-cotizar .woocommerce-variation-availability { display: none !important; }
.staad-cotizar .woocommerce-variation-price { margin-bottom: var(--space-xs); }

/* Cuando la ultima fila queda con un solo producto, se centra: asi se lee
   como una decision de diseno y no como un hueco. */
.shop ul.products > li.product:last-child:nth-child(3n + 1) { grid-column: 2; }
.shop ul.products.products--cols-4 > li.product:last-child:nth-child(4n + 1) { grid-column: 2 / span 2; justify-self: center; max-width: 100%; }
@media (max-width: 900px) {
  .shop ul.products > li.product:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* ============================================================
   Ritmo de la columna del producto (medido en el navegador)
   ------------------------------------------------------------
   El vacio feo tras elegir la tela NO era un margen: era el
   enlace "Limpiar" de WooCommerce. Su JS lo esconde con
   visibility:hidden, asi que seguia ocupando 38px invisibles.
   Sumado a los margenes de la tabla y del formulario daban 84px
   de hueco entre las muestras y el bloque de cotizar.
   Se oculta del todo: nuestras muestras ya permiten deseleccionar
   pulsando la que esta activa, asi que "Limpiar" no hace falta.
   Con esto el hueco baja de 84px a 22px y toda la columna queda
   con un ritmo parejo (8/6/12/12/16/12/18/18), estilo RH.
   ============================================================ */
.variations_form .reset_variations { display: none !important; }
.single-product .variations_form table.variations { margin-bottom: var(--space-2xs); }
.single-product form.cart.variations_form { margin-bottom: var(--space-xs); }
.staad-cotizar .staad-quote-wrap,
.single-product .staad-quote-wrap { margin: var(--space-xs) 0; }
.single-product .staad-fav--single { margin-top: var(--space-xs); }
.single-product .summary .product_meta { margin-top: var(--space-sm); }
.single-product .staad-acc { margin-top: var(--space-sm); }

/* Ultimo apriete del hueco tras las muestras: 84px -> 50px -> 27px */
.single-product form.cart.variations_form { margin-bottom: 10px; }
.single-product .staad-quote-wrap { margin: 10px 0; }
.single-product .staad-quote-note { margin-bottom: 12px; }

/* Tras anadir desde una tarjeta, WooCommerce cuelga un enlace "Ver carrito"
   sin estilo del tema. Sobra: el carrito lateral se abre solo con la pieza
   dentro y ya trae sus botones de Ver carrito y Finalizar compra. Ademas
   empujaba el nombre del producto hacia abajo y descuadraba la fila. */
.staad-card__actions .added_to_cart,
.staad-card .added_to_cart { display: none !important; }

/* ============================================================
   La promocion: 30% OFF
   Es de todo el mundo, se registre o no, asi que no hay nada que
   destapar: esto ES el precio (ver inc/promo.php). Tres piezas y
   ninguna mas: el rotulo encima, la tarifa tachada —discreta, que
   no compita— y al lado lo que se paga.
   ============================================================ */
.staad-promo {
  display: block;
  line-height: 1.35;
}
.staad-promo__label {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}
/* Las dos cifras, una al lado de la otra. Se envuelven en pantallas
   estrechas antes que salirse de la tarjeta. */
.staad-promo__fila {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .5em;
}
/* La tarifa: mas menuda y mas tenue. Esta para dar la referencia, no
   para leerse la primera. */
.staad-promo__antes {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .45;
  font-size: .88em;
}
.staad-promo__ahora { color: var(--c-ink); }
.staad-promo__desde {
  font-size: calc(var(--fs-micro) * .92);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.staad-promo .woocommerce-Price-amount,
.staad-promo__fila .woocommerce-Price-amount { color: inherit; }