body {
  background-color: var(--sb-linen);
  color: var(--sb-ink);
  font-family: var(--sb-font-sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, blockquote {
  font-family: var(--sb-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Ninguna palabra se queda sola al final. Los titulares reparten sus líneas
   («balance») y los textos corridos evitan la última línea de una palabra
   («pretty»). Los navegadores que no lo entienden parten como siempre. */
h1, h2, h3, h4, h5, h6, blockquote, .sb-display, figcaption, legend, dt {
  text-wrap: balance;
}
p, li, dd, summary, label, td, th {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--sb-sap-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Contenedor ancho del diseño */
.sb-ancho {
  margin-inline: auto;
  width: 100%;
  max-width: var(--sb-ancho);
  padding-inline: 1rem;
}
@media (min-width: 768px) { .sb-ancho { padding-inline: 2rem; } }

/* Titular editorial */
.sb-display {
  font-family: var(--sb-font-display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

/* Etiqueta pequeña de sección */
.sb-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Formas orgánicas */
.sb-blob-a { border-radius: 62% 38% 46% 54% / 54% 46% 58% 42%; }
.sb-blob-b { border-radius: 1.75rem 3rem 1.75rem 3rem; }
.sb-blob-c { border-radius: 8rem 8rem 1.5rem 1.5rem; }
.sb-tarjeta { border-radius: 1.75rem 2.75rem 1.75rem 2.75rem; }

/* Grano de papel */
.sb-grain { position: relative; }
.sb-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* Subrayado dibujado a mano */
.sb-subrayado {
  background-image: linear-gradient(to right, rgba(255, 164, 0, 0.55), rgba(213, 133, 38, 0.45));
  background-repeat: no-repeat;
  background-size: 100% 0.28em;
  background-position: 0 88%;
}

/* Botones */
.sb-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.75rem;
  padding-inline: 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.sb-boton:active { transform: translateY(1px); }
.sb-boton--principal {
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  box-shadow: var(--sb-shadow-soft);
}
.sb-boton--principal:hover { background-color: var(--sb-surface-brand-hover); color: var(--sb-surface-brand-fg); }
.sb-boton--organico {
  border-radius: 1.75rem 3rem 1.75rem 3rem;
  padding-inline: 1.75rem;
  height: 3.25rem;
  font-size: 1rem;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  box-shadow: var(--sb-shadow-lift);
}
.sb-boton--organico:hover { background-color: var(--sb-surface-brand-hover); color: var(--sb-surface-brand-fg); }
.sb-boton--linea {
  border: 1px solid color-mix(in oklab, var(--sb-sap-ink) 35%, transparent);
  background: transparent;
  color: var(--sb-sap-ink);
}
.sb-boton--linea:hover { background-color: var(--sb-linen-deep); color: var(--sb-sap-ink); }
.sb-boton--fantasma { color: var(--sb-sap-ink); background: transparent; }
.sb-boton--fantasma:hover { background-color: var(--sb-linen-deep); }
.sb-boton--corcho {
  background-color: var(--sb-surface-warm);
  color: var(--sb-surface-warm-fg);
}
.sb-boton--corcho:hover { filter: brightness(0.95); color: var(--sb-surface-warm-fg); }

/* Etiquetas de producto */
.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.sb-badge--preventa { background-color: var(--sb-surface-brand); color: var(--sb-surface-brand-fg); }
.sb-badge--outlet { background-color: var(--sb-surface-warm); color: var(--sb-surface-warm-fg); }

/* Aparición al entrar en pantalla. Solo si hay JavaScript: sin él, todo se ve. */
.sb-js .sb-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.sb-js .sb-reveal.esta-dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sb-js .sb-reveal { opacity: 1; transform: none; }
}

/* Precio en las tarjetas de producto */
.sb-precio-antes { margin-right: 0.375rem; color: var(--sb-muted-fg); text-decoration: line-through; }
.sb-precio-oferta { color: var(--sb-sap-ink); }

/* Página de categoría */
.sb-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--sb-muted-fg); }
.sb-migas a { color: inherit; text-decoration: none; }
.sb-migas a:hover { color: var(--sb-sap-ink); }
.sb-migas [aria-current="page"] { color: var(--sb-ink); }

/* La nota de la categoría era una píldora amarilla entera y se comía el hero.
   Ahora es una anotación: el amarillo solo en el filete de la izquierda. */
.sb-nota {
  display: inline-block;
  border-left: 2px solid var(--sb-sap);
  background: transparent;
  padding: 0.15rem 0 0.15rem 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sb-gris-70);
}

.sb-filtro { min-width: 0; border: 0; margin: 0; padding: 0; }
.sb-filtro + .sb-filtro { margin-top: 1.25rem; }
.sb-filtro legend { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.sb-chip { display: inline-flex; align-items: center; border-radius: 2px; border: 1px solid var(--sb-gris-14); background-color: transparent; padding: 0.45rem 0.85rem; font-size: 0.8125rem; color: var(--sb-ink); text-decoration: none; transition: background-color .2s, border-color .2s; }
.sb-chip:hover { border-color: var(--sb-gris-30); background-color: transparent; }
.sb-chip--activo { border-color: var(--sb-gris-90); background-color: var(--sb-gris-90); color: var(--sb-blanco); }
.sb-chip--activo:hover { border-color: var(--sb-gris-70); background-color: var(--sb-gris-70); }

.sb-limpiar { display: inline-block; margin-top: 1.5rem; border: 0; border-bottom: 1px solid var(--sb-gris-30); padding: 0 0 0.35rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-90); text-decoration: none; }
.sb-limpiar:hover { border-bottom-color: var(--sb-gris-90); }

.sb-orden { display: grid; gap: 0.375rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-orden select { border-radius: 2px; border: 1px solid var(--sb-gris-14); background-color: transparent; padding: 0.5rem 1rem; font-family: inherit; font-size: 0.875rem; letter-spacing: normal; text-transform: none; color: var(--sb-ink); }

.sb-otras { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }

/* El contenido va a sangre: las secciones ponen su propio fondo */
.site-content, .content-area, .site-main, .inside-article,
.one-container .container, .one-container .site-content,
.separate-containers .inside-article { background-color: transparent; padding: 0; }
.site-content { display: block; }
.content-area { width: 100%; float: none; }
.entry-content > :first-child { margin-top: 0; }

/* El tema no limita el ancho: cada sección centra su propio contenido con .sb-ancho */
.container, .site-content .container, .inside-header, .site-footer .container { max-width: 100%; padding: 0; }
.site-content { padding: 0; }

/* WooCommerce fuerza height:auto en todas las imágenes de sus páginas y aplasta
   los tamaños de los bloques. Las imágenes de marca llevan su alto aquí. */
.woocommerce .gb-media-cablogoimg,
.woocommerce-page .gb-media-cablogoimg { height: 2.25rem; width: auto; }
.woocommerce .gb-media-movlogo,
.woocommerce-page .gb-media-movlogo { height: 2rem; width: auto; }
.woocommerce .gb-media-pielogo,
.woocommerce-page .gb-media-pielogo { height: 3rem; width: auto; }
@media (max-width: 767px) {
  .woocommerce .gb-media-cablogoimg,
  .woocommerce-page .gb-media-cablogoimg { height: 2rem; }
}

/* Las listas de los bloques no llevan sangría, pero sus márgenes los pone cada bloque */
ul[class*="gb-"], ol[class*="gb-"] { margin-left: 0; margin-right: 0; padding-left: 0; list-style: none; }

/* ---------- Ficha de producto ---------- */
.sb-galeria-marco { position: relative; overflow: hidden; border-radius: 2px; background-color: var(--sb-card); font-size: 0; }
.sb-galeria-foto { display: block; width: 100%; height: auto; }
.sb-galeria-badges { position: absolute; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: 0.375rem; font-size: 1rem; }
.sb-minis { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.sb-mini { width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 2px; border: 1px solid transparent; background: none; padding: 0; cursor: pointer; transition: border-color .2s; }
.sb-mini img { width: 100%; height: 100%; object-fit: contain; background-color: var(--sb-card); display: block; }
.sb-mini:hover { border-color: var(--sb-gris-30); }
.sb-mini--activa { border-color: var(--sb-gris-90); }

.sb-precio-ahora { font-size: 1.5rem; font-weight: 500; }
.sb-precio-antes { margin-right: 0.75rem; color: var(--sb-muted-fg); text-decoration: line-through; }

.sb-datos { display: grid; gap: 0.5rem; margin: 0; font-size: 0.875rem; }
.sb-dato { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; }
.sb-dato dt { color: var(--sb-muted-fg); margin: 0; }
.sb-dato dd { margin: 0; }

.sb-acordeon { border-bottom: 1px solid var(--sb-gris-14); }
.sb-acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-family: var(--sb-font-display); font-weight: 500; font-size: 1.05rem; cursor: pointer; list-style: none; }
.sb-acordeon summary::-webkit-details-marker { display: none; }
.sb-acordeon summary::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; }
.sb-acordeon[open] summary::after { transform: rotate(-135deg); }
.sb-acordeon-cuerpo { padding-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.7; }
.sb-acordeon-cuerpo > :first-child { margin-top: 0; }
.sb-acordeon-cuerpo > :last-child { margin-bottom: 0; }
.sb-acordeon-cuerpo p { margin: 0 0 0.75rem; }
/* Los títulos que vienen dentro de la descripción del producto: por debajo del
   resumen del acordeón, con aire arriba para que no se peguen al párrafo anterior. */
.sb-acordeon-cuerpo :is(h1, h2, h3, h4, h5, h6) { margin: 1.5rem 0 0.5rem; font-family: var(--sb-font-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--sb-ink); }
.sb-acordeon-cuerpo :is(ul, ol) { margin: 0 0 0.75rem; padding-left: 1.15rem; }
.sb-acordeon-cuerpo :is(ul, ol) li + li { margin-top: 0.35rem; }
.sb-acordeon-cuerpo a { color: var(--sb-sap-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.sb-acordeon-cuerpo a:hover, .sb-acordeon-cuerpo a:focus { color: var(--sb-moss-deep); }
.sb-acordeon-cuerpo :is(strong, b) { font-weight: 600; }
.sb-acordeon-cuerpo img { max-width: 100%; height: auto; }
.sb-lista-check { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sb-lista-check li { display: flex; gap: 0.625rem; }
.sb-lista-check li::before { content: "✓"; color: var(--sb-sap-ink); flex-shrink: 0; }

/* Preguntas frecuentes */
.sb-faq-etiqueta { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-faq-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 0.6rem; }
.sb-faq-fila input[type="search"] { flex: 1 1 16rem; min-width: 0; border-radius: 2px; border: 1px solid var(--sb-gris-14); background-color: transparent; padding: 0.7rem 0.9rem; font-family: inherit; font-size: 0.95rem; color: var(--sb-ink); }
.sb-faq-fila input[type="search"]:focus { border-color: var(--sb-gris-30); outline: 2px solid var(--sb-gris-30); outline-offset: 1px; }
.sb-faq-fila input[type="search"]::placeholder { color: var(--sb-gris-50); }
.sb-faq-limpiar { flex-shrink: 0; border: 0; border-bottom: 1px solid var(--sb-gris-30); border-radius: 0; background-color: transparent; padding: 0 0 0.35rem; font-family: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-90); cursor: pointer; }
.sb-faq-limpiar:hover, .sb-faq-limpiar:focus { background-color: transparent; border-bottom-color: var(--sb-gris-90); color: var(--sb-gris-90); }
.sb-faq-resultados { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--sb-muted-fg); }
.sb-faq-resultados:empty { display: none; }
.sb-faq-lista .sb-acordeon-cuerpo { padding-bottom: 1.5rem; padding-right: 0.5rem; font-size: 0.95rem; line-height: 1.75; color: var(--sb-muted-fg); }
.sb-faq-lista .sb-acordeon-cuerpo a { color: var(--sb-sap-ink); }


/* El formulario de WooCommerce, con la cara del diseño */
.sb-compra .variations { margin: 0; }
.sb-compra .variations tr, .sb-compra .variations th, .sb-compra .variations td { display: block; padding: 0; border: 0; text-align: left; }
.sb-compra .variations .label { margin-bottom: 0.75rem; }
.sb-compra .variations label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.sb-compra .reset_variations { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--sb-muted-fg); }

.sb-tallas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.sb-talla { min-width: 3rem; border-radius: 2px; border: 1px solid color-mix(in oklab, var(--sb-sap-ink) 25%, transparent); background: transparent; padding: 0.625rem 0.875rem; font: inherit; font-size: 0.875rem; color: var(--sb-ink); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.sb-talla:hover { background-color: var(--sb-linen-deep); }
.sb-talla[aria-pressed="true"] { border-color: transparent; background-color: var(--sb-surface-brand); color: var(--sb-surface-brand-fg); }
.sb-talla[disabled] { cursor: not-allowed; border-style: dashed; border-color: color-mix(in oklab, var(--sb-sap-ink) 20%, transparent); color: var(--sb-muted-fg); text-decoration: line-through; }
.sb-talla[disabled]:hover { background: transparent; }
.sb-pista { margin-top: 0.625rem; font-size: 0.75rem; color: var(--sb-muted-fg); }

.sb-compra .quantity { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 2px; border: 1px solid var(--sb-gris-14); padding: 0.25rem; }
.sb-compra .quantity input { width: 3rem; border: 0; background: transparent; text-align: center; font: inherit; font-size: 0.875rem; -moz-appearance: textfield; }
.sb-compra .quantity input::-webkit-outer-spin-button, .sb-compra .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-cantidad-boton { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 2px; background: transparent; font-size: 1.125rem; line-height: 1; cursor: pointer; color: var(--sb-ink); }
.sb-cantidad-boton:hover { background-color: var(--sb-linen-deep); }

.sb-compra form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.75rem 0 0; }
.sb-compra .variations_form.cart { display: block; }
.sb-compra .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.sb-compra button.single_add_to_cart_button {
  flex: 1 1 13rem;
  border: 0;
  border-radius: 1.75rem 3rem 1.75rem 3rem;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  box-shadow: var(--sb-shadow-lift);
  padding: 0 1.75rem;
  height: 3.25rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.sb-compra button.single_add_to_cart_button:hover { background-color: var(--sb-surface-brand-hover); }
.sb-compra button.single_add_to_cart_button:active { transform: translateY(1px); }
.sb-compra button.single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.sb-compra .woocommerce-variation-price { margin-bottom: 0.75rem; font-size: 1.25rem; }
.sb-compra .woocommerce-variation-availability { font-size: 0.875rem; color: var(--sb-muted-fg); }
.sb-compra .stock.out-of-stock { color: var(--sb-salmon-ink); }

.sb-garantias { display: grid; gap: 0.5rem; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--sb-gris-14); background: none; color: var(--sb-gris-70); font-size: 0.8125rem; list-style: none; }
.sb-garantias li { display: flex; align-items: flex-start; gap: 0.625rem; }
.sb-garantias li::before { content: "·"; font-weight: 700; color: var(--sb-sap); }

/* El botón de compra de WooCommerce lleva sus propias clases de tema: aquí manda el diseño.
   Su clase .alt trae el azul #1e73be con la misma especificidad que teníamos, así que
   hay que nombrarla para ganarle en todos los estados, el hover incluido. */
.sb-compra .single_add_to_cart_button.button,
.sb-compra .single_add_to_cart_button.wp-element-button,
.woocommerce .sb-compra button.single_add_to_cart_button,
.woocommerce .sb-compra button.single_add_to_cart_button.alt {
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  height: 3.25rem;
  padding: 0 1.75rem;
  font-size: 1rem;
  font-weight: 500;
}
.woocommerce .sb-compra button.single_add_to_cart_button:hover,
.woocommerce .sb-compra button.single_add_to_cart_button:focus,
.woocommerce .sb-compra button.single_add_to_cart_button:active,
.woocommerce .sb-compra button.single_add_to_cart_button.alt:hover,
.woocommerce .sb-compra button.single_add_to_cart_button.alt:focus,
.woocommerce .sb-compra button.single_add_to_cart_button.alt:active {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}
.woocommerce .sb-compra button.single_add_to_cart_button.disabled,
.woocommerce .sb-compra button.single_add_to_cart_button.alt.disabled,
.woocommerce .sb-compra button.single_add_to_cart_button.alt.disabled:hover,
.woocommerce .sb-compra button.single_add_to_cart_button:disabled {
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  opacity: 0.45;
}

/* El rótulo de la talla lo pone la plantilla, no WooCommerce */
.sb-compra .variations .label { display: none; }
.sb-compra .variations td.value { padding: 0; }

/* Los botones de cantidad los pone WooCommerce: aquí solo se les da forma */
.sb-compra .quantity button,
.sb-compra .quantity .qty-btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 2px; background: transparent;
  font-size: 1.125rem; line-height: 1; cursor: pointer; color: var(--sb-ink);
}
.sb-compra .quantity button:hover { background-color: var(--sb-gris-7); }

/* La tabla de variaciones no pinta bordes ni fondos */
.sb-compra .variations, .sb-compra .variations tbody, .sb-compra .variations tr, .sb-compra .variations td, .sb-compra .variations th {
  border: 0 !important; background: transparent !important; padding: 0;
}

/* El estado desactivado del botón conserva el color de marca.
   Mientras se añade al carrito, el JavaScript lo deshabilita, y ahí volvía el
   azul de GeneratePress (#1e73be): su regla es
   «.woocommerce button.button.alt:disabled[disabled]:hover», que repitiendo el
   atributo y el estado suma (0,6,1) y le ganaba a lo de aquí. Con el ratón
   encima —que es justo donde está, recién pulsado— el botón se volvía azul.
   Se le gana nombrando «.alt», el atributo, el estado y el hover: (0,7,1). Por
   eso estos selectores tan largos no son adorno. */
.woocommerce .sb-compra button.single_add_to_cart_button.disabled,
.woocommerce .sb-compra button.single_add_to_cart_button:disabled,
.woocommerce .sb-compra button.button.alt.disabled,
.woocommerce .sb-compra button.single_add_to_cart_button.alt[disabled]:disabled,
.woocommerce .sb-compra button.single_add_to_cart_button.alt[disabled]:disabled:hover,
.woocommerce .sb-compra button.single_add_to_cart_button.alt[disabled]:disabled:focus,
.woocommerce .sb-compra button.single_add_to_cart_button.alt[disabled]:disabled:active,
.woocommerce .sb-compra button.single_add_to_cart_button.alt.disabled[disabled] {
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  opacity: 1;
}

/* Mientras añade, el cursor dice que hay algo en marcha. */
.sb-compra button.single_add_to_cart_button[aria-busy="true"] { cursor: progress; }
.sb-compra .quantity { display: inline-flex !important; align-items: center; border-radius: 2px; overflow: hidden; }
.sb-compra .quantity input.qty { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* Tallas: las agotadas se ven, tachadas y con el borde de puntos */
.sb-talla--agotada { border-style: dashed; border-color: color-mix(in oklab, var(--sb-sap-ink) 20%, transparent); color: var(--sb-muted-fg); text-decoration: line-through; cursor: not-allowed; }
.sb-talla--agotada:hover { background: transparent; }

/* Fila de compra: cantidad, botón y corazón, como el diseño */
.sb-fila-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.sb-fila-compra .quantity { flex: 0 0 auto; }
.sb-deseos {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; flex-shrink: 0; padding: 0; line-height: 0;
  border-radius: 2px; border: 1px solid var(--sb-gris-14);
  background: transparent; color: var(--sb-gris-90); cursor: pointer;
}
.sb-deseos:hover { border-color: var(--sb-gris-30); background: transparent; }
.sb-deseos svg { width: 1.15rem; height: 1.15rem; display: block; }

/* Los signos de cantidad son enlaces de WooCommerce: sin caja, solo el símbolo */
.sb-compra .quantity.buttons-added .minus,
.sb-compra .quantity.buttons-added .plus,
.woocommerce .sb-compra .quantity .minus,
.woocommerce .sb-compra .quantity .plus {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 0 !important; border-radius: 2px;
  background: transparent !important; box-shadow: none !important;
  color: var(--sb-ink); font-size: 1.05rem; line-height: 1; text-decoration: none;
}
.woocommerce .sb-compra .quantity .minus:hover,
.woocommerce .sb-compra .quantity .plus:hover { background-color: var(--sb-gris-7) !important; }
.sb-compra .quantity input.qty { border: 0 !important; box-shadow: none !important; outline: 0; }
.sb-compra .quantity { border: 1px solid color-mix(in oklab, var(--sb-sap-ink) 25%, transparent) !important; padding: 0.25rem; }

/* Cantidad, botón y corazón, los tres de la misma altura */
.sb-compra .quantity,
.woocommerce .sb-compra .quantity {
  height: 3.25rem;
  box-sizing: border-box;
  padding: 0 0.25rem;
}
.sb-compra .quantity input.qty { height: 100%; }
.woocommerce .sb-compra button.single_add_to_cart_button { height: 3.25rem; box-sizing: border-box; }

/* Fila de compra afinada: trazos de 1 px y alturas iguales */
.sb-compra .quantity,
.woocommerce .sb-compra .quantity {
  height: 2.875rem;
  border: 1px solid var(--sb-gris-14) !important;
  border-radius: 2px;
  padding: 0 0.375rem;
}
.woocommerce .sb-compra .quantity .minus,
.woocommerce .sb-compra .quantity .plus { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
/* El ancho del campo lo pone WooCommerce en «em» (.woocommerce .quantity .qty,
   3.631em), que le gana a esto: por eso va marcado. Con las unidades estrechas
   caben en la misma fila la cantidad, el botón de añadir y el corazón. */
.sb-compra .quantity input.qty { width: 2rem !important; min-width: 0 !important; font-size: 0.8125rem; }

.woocommerce .sb-compra button.single_add_to_cart_button {
  height: 2.875rem;
  border-radius: 2px;
  padding: 0 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
}


.sb-deseos {
  width: 2.875rem; height: 2.875rem;
  border: 1px solid var(--sb-gris-14);
}
.sb-deseos svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }

/* Las tallas, también más finas. Las que se pueden comprar tienen que cantar
   más que las agotadas: borde marcado y texto a plena tinta. */
.sb-talla {
  min-width: 2.875rem;
  padding: 0.5rem 0.75rem;
  border-color: var(--sb-gris-30);
  color: var(--sb-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* La talla que se está señalando tiene que verse claramente */
.sb-talla:hover:not([disabled]),
.sb-talla:focus-visible:not([disabled]) {
  border-color: var(--sb-gris-90);
  background-color: transparent;
  color: var(--sb-gris-90);
}

/* Agotadas: se ven, pero se apartan. No hacen nada al pasar por encima. */
.sb-talla--agotada,
.sb-talla[disabled] {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--sb-ink) 14%, transparent);
  color: color-mix(in oklab, var(--sb-ink) 44%, var(--sb-linen));
  font-weight: 400;
  text-decoration: line-through;
  cursor: not-allowed;
}
.sb-talla--agotada:hover,
.sb-talla[disabled]:hover {
  border-color: color-mix(in oklab, var(--sb-ink) 14%, transparent);
  background: transparent;
  color: color-mix(in oklab, var(--sb-ink) 44%, var(--sb-linen));
}

/* Los signos de cantidad, cuadrados y no medias cajas */
.woocommerce .sb-compra .quantity .minus,
.woocommerce .sb-compra .quantity .plus,
.sb-compra .quantity.buttons-added .minus,
.sb-compra .quantity.buttons-added .plus {
  flex: 0 0 auto !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 0 !important;
  align-self: center;
  border-radius: 2px !important;
  overflow: hidden;
}
.sb-compra .quantity { overflow: visible; gap: 0.125rem; border-radius: 2px; }

/* Desplegable con la forma de la marca. La lista de un <select> la dibuja el
   sistema operativo y no hay CSS que la toque, así que se pinta una propia y el
   <select> de verdad se queda debajo guardando el valor. Sin JavaScript se ve él. */
.sb-select { position: relative; }

.sb-select-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border-radius: 2px;
  border: 1px solid var(--sb-gris-14);
  background-color: transparent;
  padding: 0.6rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
/* GeneratePress pinta todo <button> de gris con texto blanco en hover y foco,
   así que aquí hay que repetir el color de fondo y el de texto. */
.sb-select-boton:hover,
.sb-select-boton:focus,
.sb-select-boton:active {
  background-color: var(--sb-linen);
  color: inherit;
  border-color: color-mix(in oklab, var(--sb-sap-ink) 45%, transparent);
}
.sb-select-boton[aria-expanded="true"],
.sb-select-boton[aria-expanded="true"]:hover,
.sb-select-boton[aria-expanded="true"]:focus {
  border-color: var(--sb-sap-ink);
  background-color: var(--sb-card);
  color: inherit;
}
.sb-select-boton svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: var(--sb-sap-ink);
  transition: transform 0.2s;
}
.sb-select-boton[aria-expanded="true"] svg { transform: rotate(180deg); }

.sb-select-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  border-radius: 1.25rem 1.75rem 1.25rem 1.75rem;
  border: 1px solid var(--sb-border);
  background-color: var(--sb-card);
  box-shadow: var(--sb-shadow-lift);
}
.sb-select-lista[hidden] { display: none; }

.sb-select-opcion {
  margin: 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: color-mix(in oklab, var(--sb-ink) 85%, transparent);
  cursor: pointer;
}
.sb-select-opcion:hover,
.sb-select-opcion.esta-senalada {
  background-color: var(--sb-linen-deep);
  color: var(--sb-sap-ink);
}
.sb-select-opcion[aria-selected="true"] {
  font-weight: 600;
  color: var(--sb-sap-ink);
}

/* Contador del carrito: sin nada dentro no se pinta. */
.sb-carro-num[hidden] { display: none; }

/* ---------- Distribuidores ---------- */

/* Lo que sin JavaScript no hace nada, sin JavaScript no se ve. Va con
   :not() para ganarle a las reglas propias de cada pieza, que llegan después. */
html:not(.sb-js) .sb-solo-js { display: none; }
/* Sin mapa no hay segunda columna: el listado ocupa el ancho entero. */
html:not(.sb-js) .sb-dist-rejilla { grid-template-columns: minmax(0, 1fr); }

/* Pestañas: dos rótulos con filete debajo, como el resto del rediseño. */
.sb-dist-pestanas { display: flex; gap: 2rem; border-bottom: 1px solid var(--sb-gris-14); }
.sb-dist-pestanas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background-color: transparent; padding: 0 0 0.75rem; font-family: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-50); cursor: pointer; transition: color .2s, border-color .2s; }
.sb-dist-pestanas button:hover, .sb-dist-pestanas button:focus { background-color: transparent; color: var(--sb-gris-90); }
.sb-dist-pestanas button[aria-selected="true"], .sb-dist-pestanas button[aria-selected="true"]:hover, .sb-dist-pestanas button[aria-selected="true"]:focus { border-bottom-color: var(--sb-gris-90); background-color: transparent; color: var(--sb-gris-90); }

.sb-dist-controles { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-top: 2rem; }
.sb-dist-controles[hidden] { display: none; }
.sb-dist-busca { flex: 1 1 18rem; min-width: 0; max-width: 24rem; }
.sb-dist-busca label { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-dist-busca input[type="search"] { margin-top: 0.5rem; width: 100%; border-radius: 2px; border: 1px solid var(--sb-gris-14); background-color: transparent; padding: 0.6rem 0.9rem; font-family: inherit; font-size: 0.9rem; color: var(--sb-ink); }
.sb-dist-busca input[type="search"]:focus { border-color: var(--sb-gris-30); outline: 2px solid var(--sb-gris-30); outline-offset: 1px; }
.sb-dist-busca input[type="search"]::placeholder { color: var(--sb-gris-50); }
.sb-dist-lead { margin: 2rem 0 0; max-width: 42rem; font-size: 0.95rem; line-height: 1.7; color: var(--sb-muted-fg); }
.sb-dist-lead[hidden] { display: none; }

.sb-dist-rejilla { display: grid; gap: 3.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; margin-top: 2.5rem; }
@media (max-width: 1024px) { .sb-dist-rejilla { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.sb-dist-panel[hidden] { display: none; }
.sb-dist-panel + .sb-dist-panel { margin-top: 3rem; }
.sb-js .sb-dist-panel + .sb-dist-panel { margin-top: 0; }
.sb-dist-titulo { margin: 0; font-family: var(--sb-font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.sb-js .sb-dist-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sb-dist-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sb-dist-cuenta { margin: 0; font-size: 0.875rem; color: var(--sb-muted-fg); }
.sb-dist-pista { margin-left: 0.75rem; color: var(--sb-gris-50); }
.sb-dist-limpiar { border: 0; border-bottom: 1px solid var(--sb-gris-30); border-radius: 0; background: transparent; padding: 0 0 0.35rem; font-family: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-90); cursor: pointer; }
.sb-dist-limpiar:hover, .sb-dist-limpiar:focus { background: transparent; border-bottom-color: var(--sb-gris-90); color: var(--sb-gris-90); }
.sb-dist-limpiar[hidden] { display: none; }

/* El listado no son tarjetas: son filas separadas por un filete. */
.sb-dist-lista { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sb-gris-14); }
@media (min-width: 1025px) {
  .sb-js .sb-dist-lista { max-height: 38rem; overflow-y: auto; padding-right: 1rem; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); }
  .sb-js .sb-dist-lista.esta-abajo { -webkit-mask-image: none; mask-image: none; }
}
.sb-dist-item { border-bottom: 1px solid var(--sb-gris-14); }
.sb-dist-item[hidden] { display: none; }
.sb-dist-tarjeta { padding: 1.25rem 0; transition: background-color .2s, padding .2s; }
.sb-js .sb-dist-tarjeta { cursor: pointer; }
.sb-dist-item.esta-activa .sb-dist-tarjeta { background-color: var(--sb-gris-7); padding-right: 1rem; padding-left: 1rem; }
.sb-dist-lugar { margin: 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-dist-nombre { margin: 0.5rem 0 0; font-family: var(--sb-font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; }
.sb-dist-dir { margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--sb-muted-fg); }
.sb-dist-acciones { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.9rem 0 0; }
.sb-dist-accion { display: inline-flex; border: 0; border-bottom: 1px solid var(--sb-gris-30); border-radius: 0; background: transparent; padding: 0 0 0.35rem; font-family: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-90); text-decoration: none; cursor: pointer; transition: border-color .2s; }
.sb-dist-accion:hover, .sb-dist-accion:focus { background: transparent; border-bottom-color: var(--sb-gris-90); color: var(--sb-gris-90); }
.sb-dist-vacio { margin: 2rem 0 0; font-size: 0.9rem; color: var(--sb-muted-fg); }
.sb-dist-vacio[hidden] { display: none; }

.sb-dist-mapa-caja { overflow: hidden; border-radius: 2px; border: 1px solid var(--sb-gris-14); }
@media (min-width: 1025px) { .sb-js .sb-dist-mapa-caja { position: sticky; top: 7rem; } }
.sb-dist-mapa { height: 24rem; width: 100%; background-color: var(--sb-gris-7); }
@media (min-width: 640px) { .sb-dist-mapa { height: 30rem; } }
@media (min-width: 1025px) { .sb-dist-mapa { height: 40rem; } }
.sb-dist-mapa .leaflet-container { font-family: var(--sb-font-sans); }
.sb-dist-mapa .leaflet-popup-content-wrapper { border-radius: 2px; background-color: var(--sb-blanco); color: var(--sb-gris-90); box-shadow: var(--sb-shadow-soft); }
.sb-dist-mapa .leaflet-popup-tip { background-color: var(--sb-blanco); }
.sb-dist-mapa .leaflet-popup-content { margin: 0.75rem 1rem; font-size: 0.8125rem; line-height: 1.45; }
.sb-dist-mapa .leaflet-popup-content strong { font-family: var(--sb-font-display); font-size: 0.95rem; font-weight: 500; }
.sb-dist-mapa .leaflet-bar { border: 0; box-shadow: none; }
.sb-dist-mapa .leaflet-bar a { border-radius: 0; border-color: var(--sb-gris-14); color: var(--sb-gris-90); }
.sb-dist-mapa .leaflet-control-attribution { background-color: color-mix(in oklab, var(--sb-blanco) 85%, transparent); font-size: 0.68rem; }
.sb-dist-mapa .leaflet-control-attribution a { color: var(--sb-gris-70); }

/* Formulario de alta de distribuidores (Contact Form 7) */
.sb-dist-form .wpcf7 form { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sb-dist-form .wpcf7 form > * { width: 100%; }
.sb-dist-form .wpcf7 p { margin: 0; }
.sb-dist-form .wpcf7 input[type="text"],
.sb-dist-form .wpcf7 input[type="email"],
.sb-dist-form .wpcf7 textarea { width: 100%; border-radius: 2px; border: 1px solid var(--sb-caja-borde); background-color: var(--sb-caja-campo); padding: 0.7rem 0.9rem; font-family: inherit; font-size: 0.9rem; color: var(--sb-gris-90); }
.sb-dist-form .wpcf7 input::placeholder, .sb-dist-form .wpcf7 textarea::placeholder { color: var(--sb-gris-50); }
.sb-dist-form .wpcf7 input:focus, .sb-dist-form .wpcf7 textarea:focus { border-color: var(--sb-gris-50); outline: 2px solid var(--sb-gris-30); outline-offset: 1px; }
.sb-dist-form .wpcf7 textarea { height: 7.5rem; min-height: 5rem; resize: vertical; }
@media (min-width: 480px) { .sb-dist-form .wpcf7 .half { width: calc(50% - 0.375rem); } }
.sb-dist-form .wpcf7 .wpcf7-acceptance { display: block; font-size: 0.8125rem; line-height: 1.5; color: color-mix(in oklab, var(--sb-gris-90) 75%, transparent); }
.sb-dist-form .wpcf7 .wpcf7-list-item { margin: 0; }
.sb-dist-form .wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 0.5rem; }
.sb-dist-form .wpcf7 input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 0.15rem; accent-color: var(--sb-gris-90); }
.sb-dist-form .wpcf7 a { color: var(--sb-gris-90); }
.sb-dist-form .wpcf7 input[type="submit"] { width: auto; align-self: flex-start; height: 3rem; margin-top: 0.25rem; border: 0; border-radius: 0; background-color: var(--sb-gris-90); padding: 0 2rem; font-family: inherit; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-blanco); cursor: pointer; }
.sb-dist-form .wpcf7 input[type="submit"]:hover, .sb-dist-form .wpcf7 input[type="submit"]:focus { background-color: var(--sb-gris-70); color: var(--sb-blanco); }
.sb-dist-form .wpcf7-not-valid-tip { margin-top: 0.25rem; font-size: 0.8rem; color: var(--sb-salmon-ink); }
.sb-dist-form .wpcf7-response-output { margin: 1rem 0 0 !important; border-radius: 2px; border-width: 1px !important; padding: 0.75rem 1rem !important; font-size: 0.875rem; }

.sb-dist-privacidad { margin-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--sb-gris-90) 18%, transparent); padding-top: 0.9rem; font-size: 0.8rem; color: color-mix(in oklab, var(--sb-gris-90) 72%, transparent); }
.sb-dist-privacidad summary { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-90); cursor: pointer; }
.sb-dist-privacidad p { margin: 0.75rem 0 0; line-height: 1.6; }
.sb-dist-privacidad a { color: var(--sb-gris-90); }

/* El desplegable de orden hereda las mayúsculas y el espaciado del rótulo
   «Ordenar», que son del rótulo y no del control. Y en el rediseño va recto. */
.sb-orden .sb-select { min-width: 13rem; }

/* Los filtros van en la columna de la izquierda, desplegados. Con 18 familias y
   20 tallas la columna se iba a 1.200 px y había que bajar para ver las tallas,
   así que aquí los chips van más apretados que en el resto del sitio: menos
   cuerpo, menos aire y menos hueco entre ellos. Las tallas, además, en una
   rejilla de ancho fijo: son de dos cifras y en flujo dejaban la fila a medias. */
.gb-element-catfil .sb-filtro + .sb-filtro { margin-top: 1.5rem; }
.gb-element-catfil .sb-chips { gap: 0.3rem; margin-top: 0.4rem; }
.gb-element-catfil .sb-chip { padding: 0.28rem 0.55rem; font-size: 0.75rem; }
.gb-element-catfil .sb-filtro--talla .sb-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
}
.gb-element-catfil .sb-filtro--talla .sb-chip { justify-content: center; padding-right: 0.25rem; padding-left: 0.25rem; }
.sb-orden .sb-select-boton,
.sb-orden .sb-select-opcion {
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.8125rem;
  color: var(--sb-gris-90);
}
.sb-orden .sb-select-boton {
  border-radius: 2px;
  border-color: var(--sb-gris-14);
  background-color: transparent;
}
.sb-orden .sb-select-boton:hover,
.sb-orden .sb-select-boton:focus,
.sb-orden .sb-select-boton[aria-expanded="true"] {
  background-color: transparent;
  border-color: var(--sb-gris-30);
}
.sb-orden .sb-select-boton svg { color: var(--sb-gris-70); }
.sb-orden .sb-select-lista { border-radius: 2px; border-color: var(--sb-gris-14); }
.sb-orden .sb-select-opcion { border-radius: 2px; }
.sb-orden .sb-select-opcion:hover,
.sb-orden .sb-select-opcion.esta-senalada { background-color: var(--sb-gris-7); color: var(--sb-gris-90); }
.sb-orden .sb-select-opcion[aria-selected="true"] { font-weight: 600; color: var(--sb-gris-90); }

.sb-legal { max-width: 44rem; }
.sb-legal > :first-child { margin-top: 0; }
.sb-legal p {
  margin: 1.15rem 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: color-mix(in oklab, var(--sb-ink) 82%, transparent);
}
.sb-legal h2 {
  margin: 2.75rem 0 0;
  scroll-margin-top: 7rem;
  font-family: var(--sb-font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--sb-ink);
}
.sb-legal h2 + p { margin-top: 0.85rem; }
.sb-legal ul, .sb-legal ol {
  margin: 1.15rem 0 0;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: color-mix(in oklab, var(--sb-ink) 82%, transparent);
}
.sb-legal li { margin-top: 0.4rem; }
.sb-legal li::marker { color: var(--sb-gris-30); }
.sb-legal strong { font-weight: 600; color: var(--sb-ink); }
.sb-legal hr, .sb-legal .wp-block-separator {
  margin: 2.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--sb-gris-14);
}
.sb-legal a { color: var(--sb-sap-ink); text-decoration: underline; text-underline-offset: 3px; }
.sb-legal a:hover, .sb-legal a:focus { color: var(--sb-ink); }

.sb-legal-indice { align-self: start; }
@media (min-width: 1025px) { .sb-legal-indice { position: sticky; top: 7rem; } }
.sb-legal-indice-titulo {
  margin: 0 0 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sb-gris-70);
}
.sb-legal-indice-lista { margin: 0; padding: 0; list-style: none; }
.sb-legal-indice-lista li { margin: 0; border-top: 1px solid var(--sb-gris-14); }
.sb-legal-indice-lista li:first-child { border-top: 0; }
.sb-legal-indice-lista a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--sb-gris-90);
  text-decoration: none;
}
.sb-legal-indice-lista a:hover, .sb-legal-indice-lista a:focus {
  color: var(--sb-sap-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sb-legal-otras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.sb-legal-otras li { margin: 0; }
.sb-legal-otras a {
  font-size: 0.95rem;
  color: var(--sb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sb-gris-30);
  padding-bottom: 2px;
}
.sb-legal-otras a:hover, .sb-legal-otras a:focus { color: var(--sb-sap-ink); border-bottom-color: var(--sb-sap-ink); }

/* Selector de idioma. El HTML lo pinta la etiqueta dinámica «sb_idiomas», con
   la URL que WPML da para la página actual, así que los estilos van aquí. */
.sb-idi {
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  color: color-mix(in oklab, var(--sb-ink) 70%, transparent);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.sb-idi:hover { color: var(--sb-ink); }
.sb-idi--activa {
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
}
.sb-idi--activa:hover { color: var(--sb-surface-brand-fg); }

/* Lista de deseos. La rellena sambas.js desde el navegador. */
.sb-deseos--activo { border-color: var(--sb-sap); color: var(--sb-sap-ink); }
.sb-deseos--activo svg { fill: var(--sb-sap); stroke: var(--sb-sap); }

.sb-deseos-lista { margin: 0; padding: 0; list-style: none; }
.sb-deseos-lista:empty { display: none; }

.sb-deseo {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border-top: 1px solid var(--sb-gris-14);
	padding: 1rem 0;
}
.sb-deseo:last-child { border-bottom: 1px solid var(--sb-gris-14); }

.sb-deseo-enlace {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--sb-ink);
	text-decoration: none;
}
.sb-deseo-enlace:hover .sb-deseo-nombre { color: var(--sb-sap-ink); }

.sb-deseo-foto {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: contain;
	background: var(--sb-linen-deep);
	border: 1px solid var(--sb-gris-14);
	flex: 0 0 auto;
}

.sb-deseo-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sb-deseo-nombre { font-family: var(--sb-font-display); font-weight: 500; font-size: 1.05rem; transition: color .2s; }
.sb-deseo-precio { font-size: 0.875rem; color: var(--sb-muted-fg); }

.sb-deseo-quitar {
	flex: 0 0 auto;
	border: 0;
	background: none;
	padding: 0.35rem 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--sb-muted-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
.sb-deseo-quitar:hover, .sb-deseo-quitar:focus { color: var(--sb-ink); background: none; }

.sb-deseos-vacio {
	margin: 2.5rem 0 0;
	padding: 2rem 0;
	border-top: 1px solid var(--sb-gris-14);
	color: var(--sb-muted-fg);
}

@media (max-width: 600px) {
	.sb-deseo-foto { width: 3.5rem; height: 3.5rem; }
	.sb-deseo-nombre { font-size: 0.95rem; }
}

/* El corazón de la cabecera, relleno cuando hay algo guardado. */
.sb-deseos-lleno svg { fill: currentColor; }

/* Pista de los iconos de la cabecera.
   El texto es el propio «aria-label» del enlace, así que está escrito una sola
   vez y ya viene traducido. Solo donde hay ratón: en pantalla táctil no existe
   el «encima» y quedaría enganchada al tocar. */
@media (hover: hover) {
  .sb-tip { position: relative; }

  /* El texto es el «aria-label», salvo donde ese nombre lleva estado —el
     carrito dice «Carrito, 2 artículos»— y entonces manda «data-sb-tip». */
  .sb-tip::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    z-index: 90;
    transform: translateX(-50%) translateY(-0.2rem);
    padding: 0.35rem 0.6rem;
    border-radius: 2px;
    background: var(--sb-surface-dark);
    color: var(--sb-surface-dark-fg);
    font-family: var(--sb-font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }

  .sb-tip[data-sb-tip]::after { content: attr(data-sb-tip); }

  .sb-tip:hover::after,
  .sb-tip:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* El último icono se pega al borde derecho: la pista se alinea a él para no
     desbordar la ventana. */
  .sb-tip:last-child::after {
    left: auto;
    right: 0;
    transform: translateY(-0.2rem);
  }
  .sb-tip:last-child:hover::after,
  .sb-tip:last-child:focus-visible::after { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-tip::after { transition: opacity .01s; }
}

/* ── Buscador ─────────────────────────────────────────────────────────────
   La lupa de la cabecera y su panel. El botón hereda la forma de los demás
   iconos, pero es un «button» y no un enlace: hay que repetirle el fondo y el
   borde, porque el «button» del navegador trae los suyos. */

.sb-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sb-buscar-abrir {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  padding: 0;
  color: var(--sb-sap-ink);
  cursor: pointer;
  transition: background-color .2s;
}
/* GeneratePress pinta cualquier «button:hover» con su color: hay que repetir
   el nuestro, igual que en los iconos enlace de la cabecera. */
.sb-buscar-abrir:hover,
.sb-buscar-abrir:focus,
.sb-buscar-abrir:focus-visible {
  background-color: var(--sb-linen-deep);
  color: var(--sb-sap-ink);
}
.sb-buscar-abrir svg { width: 1.25rem; height: 1.25rem; }

.sb-buscador { position: fixed; inset: 0; z-index: 100; }
.sb-buscador[hidden] { display: none; }
.sb-buscador-fondo {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, var(--sb-ink) 45%, transparent);
}

/* Cuelga de la cabecera, no del borde de la ventana: pegado arriba tapaba el
   logo y el menú, y parecía una ventana del navegador y no un desplegable de la
   web. El margen es el alto de la barra de aviso más el de la cabecera. */
.sb-buscador-caja {
  position: relative;
  margin: 6.5rem auto 0;
  max-width: 40rem;
  max-height: calc(100vh - 9rem);
  border: 1px solid var(--sb-gris-14);
  background-color: var(--sb-linen);
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.sb-buscador-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--sb-gris-30);
  padding-bottom: 0.75rem;
}

.sb-buscador-campo {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--sb-gris-50);
}
.sb-buscador-campo svg { flex: none; width: 1.1rem; height: 1.1rem; }

/* GeneratePress viste todos los «input» con su fondo blanco, su borde y su
   sombra interior, y con «input[type=search]» empata en especificidad con una
   clase: hay que nombrar el tipo también aquí para que gane el nuestro. */
.sb-buscador-campo input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  padding: 0.35rem 0;
  font-family: var(--sb-font-display);
  font-size: 1.35rem;
  color: var(--sb-ink);
}
.sb-buscador-campo input[type="search"]:focus { outline: none; box-shadow: none; background-color: transparent; }
.sb-buscador-campo input[type="search"]::placeholder { color: var(--sb-gris-30); font-family: var(--sb-font-body, inherit); font-size: 1rem; }
/* La cruz que Chrome mete en los «search» pinta un aspa gris que no es la de
   la casa, y encima de la nuestra. */
.sb-buscador-campo input::-webkit-search-cancel-button { display: none; }

.sb-buscador-enviar {
  flex: none;
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  padding: 0.6rem 1.1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--sb-surface-brand-fg);
  cursor: pointer;
}
.sb-buscador-enviar:hover,
.sb-buscador-enviar:focus,
.sb-buscador-enviar:focus-visible {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}

.sb-buscador-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  padding: 0;
  color: var(--sb-gris-70);
  cursor: pointer;
}
.sb-buscador-cerrar:hover,
.sb-buscador-cerrar:focus,
.sb-buscador-cerrar:focus-visible { background-color: var(--sb-gris-7); color: var(--sb-ink); }
.sb-buscador-cerrar svg { width: 1.1rem; height: 1.1rem; }

.sb-buscador-resultados { overflow-y: auto; }
.sb-buscar-grupo { padding-top: 1rem; }
.sb-buscar-rotulo {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-gris-50);
}

.sb-buscar-op {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 2px;
  padding: 0.4rem 0.5rem;
  color: var(--sb-ink);
  text-decoration: none;
}
.sb-buscar-op:hover,
.sb-buscar-op:focus,
.sb-buscar-op--activa { background-color: var(--sb-gris-7); color: var(--sb-ink); }

.sb-buscar-prod img,
.sb-buscar-sinfoto {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 2px;
  background-color: var(--sb-gris-7);
  /* Sin recorte, igual que en la rejilla: el calzado se ve entero. */
  object-fit: contain;
}
.sb-buscar-nom { flex: 1; font-family: var(--sb-font-display); font-size: 1rem; }
.sb-buscar-estado {
  flex: none;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-gris-70);
}
.sb-buscar-precio { flex: none; font-size: 0.875rem; color: var(--sb-gris-70); }
.sb-buscar-precio s { color: var(--sb-gris-30); text-decoration-thickness: 1px; }

.sb-buscar-suelto { display: inline-flex; margin-right: 0.4rem; font-size: 0.9rem; }
.sb-buscar-todos {
  margin-top: 0.75rem;
  border-top: 1px solid var(--sb-gris-14);
  padding-top: 0.85rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sb-buscar-vacio { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--sb-gris-70); }
.sb-buscador-pista { margin: 0.85rem 0 0; font-size: 0.78rem; color: var(--sb-gris-50); }

/* Los atajos y la salida de la página de resultados. */
.sb-busca-ayuda { margin-top: 0.5rem; }
.sb-busca-ayuda > span {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-gris-50);
}
.sb-busca-ayuda .sb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sb-busca-vacio p { margin: 0 0 1rem; }

@media (max-width: 767px) {
  .sb-buscador-caja { margin-top: 0; max-width: none; max-height: 100vh; border: 0; padding: 1rem; }
  .sb-buscador-campo input { font-size: 1.15rem; }
  .sb-buscador-enviar { display: none; }
}

/* Archivo sin resultados: el aviso ocupa el sitio de la rejilla. */
.sb-cat-vacio { margin-top: 2rem; max-width: 34rem; }
.sb-cat-vacio p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--sb-muted-fg); }
.sb-cat-vacio .sb-limpiar { margin-top: 1rem; }

/* Carga continua del catálogo. Los números se esconden desde el JavaScript, así
   que sin él siguen ahí y los buscadores los siguen leyendo. El selector nombra
   también la clase del bloque a propósito: el CSS que GenerateBlocks imprime por
   bloque va después y con la misma especificidad ganaría él. */
.gb-query-page-numbers-catpags.sb-pags--oculta { display: none; }

.sb-mas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
}
.sb-mas__aviso {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  color: var(--sb-gris-50);
}

/* Panel del carrito.
   Lo escribe el tema en el pie («carrito-panel.php») y solo lo abre el
   JavaScript: sin él no se ve nunca y el icono lleva al carrito de siempre.
   Todo lo de aquí se nombra «sb-carro-» y no reutiliza las clases del embudo
   («sb-linea», «sb-resumen»), que viven en compra.css y solo se cargan en
   carrito, finalizar compra y mi cuenta. */
.sb-carro { position: fixed; inset: 0; z-index: 110; }
.sb-carro[hidden] { display: none; }
.sb-carro-fondo {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, var(--sb-ink) 45%, transparent);
  animation: sb-carro-fondo 0.25s ease;
}
.sb-carro-caja {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(25rem, 100%);
  background-color: var(--sb-linen);
  box-shadow: var(--sb-shadow-lift);
  animation: sb-carro-entra 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sb-carro-entra { from { transform: translateX(100%); } }
@keyframes sb-carro-fondo { from { opacity: 0; } }

.sb-carro-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--sb-gris-14);
  padding: 1.15rem 1.25rem;
}
.sb-carro-tit { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.sb-carro-cerrar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sb-gris-70);
  cursor: pointer;
}
.sb-carro-cerrar:hover,
.sb-carro-cerrar:focus,
.sb-carro-cerrar:focus-visible { background-color: var(--sb-gris-7); color: var(--sb-ink); }
.sb-carro-cerrar svg { width: 1.1rem; height: 1.1rem; }

.sb-carro-hecho {
  margin: 0;
  border-bottom: 1px solid var(--sb-gris-14);
  background-color: var(--sb-surface-brand-soft);
  padding: 0.7rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--sb-ink);
}
.sb-carro-hecho[hidden] { display: none; }

.sb-carro-cuerpo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sb-carro--esperando .sb-carro-cuerpo { opacity: 0.55; pointer-events: none; }

.sb-carro-lineas {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 0.5rem 1.25rem;
  list-style: none;
}
.sb-carro-linea {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.85rem;
  border-bottom: 1px solid var(--sb-gris-14);
  padding: 1rem 0;
}
.sb-carro-linea:last-child { border-bottom: 0; }
.sb-carro-foto a { display: block; }
.sb-carro-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background-color: var(--sb-card);
}
.sb-carro-datos { min-width: 0; }
.sb-carro-nombre { margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.sb-carro-nombre a { color: var(--sb-ink); text-decoration: none; }
.sb-carro-nombre a:hover,
.sb-carro-nombre a:focus { color: var(--sb-sap-ink); }
.sb-carro-talla { margin: 0.3rem 0 0; font-size: 0.8125rem; color: var(--sb-gris-70); }
.sb-carro-aviso { margin: 0.3rem 0 0; font-size: 0.8125rem; color: var(--sb-salmon-ink); }
.sb-carro-unica { margin: 0; font-size: 0.8125rem; color: var(--sb-gris-70); }
.sb-carro-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-top: 0.6rem; }

.sb-carro-cant {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sb-gris-30);
  border-radius: 999px;
}
/* Los tres, con la misma caja de línea y centrados en rejilla: si el signo y el
   número llevan tamaños distintos, cada glifo se asienta a su manera y los
   signos caen un par de píxeles por debajo del número. */
.sb-carro-cant button {
  display: grid;
  place-items: center;
  /* 1,55 rem son 24,8 px: por debajo de 24 el objetivo se queda pequeño para
     el dedo (y para el criterio de tamaño de destino de las WCAG). */
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sb-gris-70);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
}
.sb-carro-cant button:hover,
.sb-carro-cant button:focus { background-color: var(--sb-gris-7); color: var(--sb-ink); }
.sb-carro-cant button[disabled] { opacity: 0.35; cursor: not-allowed; }
.sb-carro-cant button[disabled]:hover { background: transparent; }
.sb-carro-num-uds { display: grid; place-items: center; min-width: 1.1rem; font-size: 0.8125rem; line-height: 1; }

.sb-carro-quitar {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--sb-gris-50);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* El fondo hay que repetirlo: «background: transparent» de arriba es (0,1,0) y
   el «button:hover, button:focus» de GeneratePress es (0,1,1), así que le gana y
   pintaba la tinta oscura del tema detrás del rótulo. Es la misma trampa que en
   el pie. */
.sb-carro-quitar:hover,
.sb-carro-quitar:focus,
.sb-carro-quitar:focus-visible {
  background-color: transparent;
  color: var(--sb-salmon-ink);
}

.sb-carro-importe { margin: 0; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; text-align: right; }
.sb-carro-importe del { margin-right: 0.35rem; color: var(--sb-gris-50); font-weight: 400; }

.sb-carro-pie {
  border-top: 1px solid var(--sb-gris-14);
  background-color: var(--sb-blanco);
  padding: 1.15rem 1.25rem calc(1.15rem + env(safe-area-inset-bottom));
}
.sb-carro-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.sb-carro-total-num { font-size: 1.0625rem; font-weight: 500; }
.sb-carro-nota { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--sb-gris-50); }

.sb-carro-pagar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.25rem;
  box-sizing: border-box;
  margin-top: 1rem;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}
.sb-carro-pagar:hover,
.sb-carro-pagar:focus {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}
.sb-carro-pagar:active { transform: translateY(1px); }

.sb-carro-ver {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--sb-gris-70);
  text-underline-offset: 3px;
}
.sb-carro-ver:hover,
.sb-carro-ver:focus { color: var(--sb-sap-ink); }

.sb-carro-vacio {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.25rem;
  text-align: center;
}
.sb-carro-vacio-txt { margin: 0; font-size: 0.9375rem; color: var(--sb-gris-70); }

/* El fallo al añadir, en la ficha: debajo del botón de compra. */
.sb-compra-fallo { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--sb-salmon-ink); }

@media (max-width: 480px) {
  .sb-carro-caja { width: 100%; }
  .sb-carro-linea { grid-template-columns: 3.75rem 1fr auto; }
}

/* Aviso del mapa: sale en el hueco del mapa mientras no hay consentimiento para
   llamar a openstreetmap.org. Va dentro del lienzo, que ya tiene su altura. */
.sb-mapa-aviso {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 100%;
	min-height: 18rem;
	padding: 2rem;
	text-align: center;
	background: var(--sb-gris-7);
	border: 1px solid var(--sb-gris-15, rgba(0, 0, 0, 0.08));
}

.sb-mapa-aviso p {
	max-width: 34rem;
	margin: 0;
	color: var(--sb-gris-60, inherit);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Newsletter de la portada. El formulario va dentro de un bloque «text», así que las
   reglas cuelgan de .sb-news y no del id del bloque. */
.sb-news {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

.sb-news-etiqueta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sb-news-campo {
	flex: 1 1 16rem;
	min-width: 0;
	height: 3rem;
	padding: 0 1.25rem;
	border: 1px solid var(--sb-gris-30);
	border-radius: 0;
	background: var(--sb-blanco);
	color: var(--sb-tinta, inherit);
	font: inherit;
	font-size: 0.875rem;
}

.sb-news-campo:focus-visible {
	outline: 2px solid var(--sb-sap);
	outline-offset: 2px;
}

.sb-news-boton {
	height: 3rem;
	padding: 0 2rem;
	border: 0;
	border-radius: 0;
	background: var(--sb-gris-90);
	color: var(--sb-blanco);
	font: inherit;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.sb-news-boton:hover,
.sb-news-boton:focus {
	background: var(--sb-gris-70);
	color: var(--sb-blanco);
}

.sb-news-boton[disabled] {
	opacity: 0.6;
	cursor: default;
}

.sb-news-aviso {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.sb-news--bien .sb-news-aviso { color: var(--sb-verde-ink, #33713F); }
.sb-news--mal  .sb-news-aviso { color: var(--sb-rojo-ink, #B92F33); }

.sb-news-ok {
	flex: 1 0 100%;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: color-mix(in oklab, var(--sb-gris-90) 72%, transparent);
}

.sb-news-ok input {
	margin: 0.15rem 0 0;
	accent-color: var(--sb-gris-90);
	flex: 0 0 auto;
}

.sb-news-ok a { color: inherit; text-decoration: underline; }
.sb-news-ok a:hover, .sb-news-ok a:focus { color: inherit; }