@charset "UTF-8";
/*
Theme Name: Sam Gold Framework

WooCommerce styles override
*/
/* AQUÍ DENTRO NO SE EMITE CSS — 1 oct
   ===================================
   Este índice trae variables, breakpoints y mixins: cosas de Sass, que
   no escriben ni un byte en la hoja compilada. `tokens` NO está, y es a
   propósito: ese fichero sí escribe, un `:root{}` con los 142 tokens.

   Estaba aquí, y como `woocommerce.scss` también importa este índice
   —necesita las variables—, el bloque entero salía DOS veces, una en
   `style.css` y otra en `woocommerce.css`. El hijo, que compila igual,
   lo sacaba una tercera.

   Y el orden de carga es: style.css, el bloque del panel, la hoja del
   hijo, woocommerce.css. O sea que lo que el panel escribía lo
   machacaba woocommerce.css acto seguido, con los valores de fábrica,
   a igual especificidad y por llegar después.

   Eso explica por qué el panel no servía para nada: elegías 80px de
   alto de cabecera, se guardaba, se emitía correctamente, y 20 líneas
   más abajo otra hoja volvía a poner 72. No era un mando desconectado,
   era un mando al que le pisaban el cable.

   Los tokens los importa `style.scss`, una vez. Si algún día hace falta
   otro punto de entrada, que importe este índice y NO los tokens. */
/* EL TEXTO DE LEER NO ENCOGE. EL DE MIRAR, SI.
   ============================================
   Medido en un sitio de lujo que funciona (29 sep), comparando su
   version de escritorio con la de movil:

     display   62px -> 38px   (x0.61)
     titular   47px -> 34px   (x0.72)
     seccion   36px -> 28px   (x0.78)
     texto     17px -> 17px   (x1.00)
     pequeno   15px -> 15px   (x1.00)

   La regla no es "todo encoge un poco". Es que el texto de LECTURA
   es una constante —16px se leen igual en un movil que en un
   monitor— y lo unico que se adapta es el texto que esta ahi para
   mirarse. Y cuanto mas grande es, mas encoge: un titular de 64px
   en una pantalla de 375 no es grande, es una palabra por linea.

   De ahi que xs/sm/base/md/lg sigan fijos y solo los cuatro
   escalones de arriba lleven `clamp()`. El comentario de antes decia
   "sin clamp para que el catalogo no cambie de tamano": eso sigue
   siendo verdad, y por eso el catalogo usa base y sm, que no se
   tocan.

   El `vw` del medio esta calculado para que cada escalon llegue a su
   maximo justo a 1280px de ancho, que es donde empieza nuestro
   escritorio grande.

   Lo que NO cambia es el tracking ni el interlineado: van en `em` y
   sin unidad, asi que la proporcion se mantiene sola a cualquier
   tamano. Por eso el tracking se escribe en `em` y nunca en `px`. */
/* ESCALA EMPAREJADA: TAMANO + INTERLINEADO + TRACKING
   ===================================================
   Un cuerpo de letra no se elige solo. A cada tamano le corresponde
   un interlineado y un tracking, y las dos cosas van en sentido
   CONTRARIO al tamano:

     cuanto mas grande el texto  ->  menos interlineado y mas tracking
                                     negativo (letras mas juntas)

   El porque es optico, no estetico. A 62px el ojo ya no necesita
   tanto aire entre lineas para no perderse de renglon, y el espacio
   entre letras que a 14px hace falta para leer, a 62px se convierte
   en agujeros. Dejar el mismo tracking en toda la escala es lo que
   hace que un titular grande se vea "de plantilla": no esta mal
   dibujado, esta mal espaciado.

   Los valores salen de medir un sitio de lujo que funciona
   (29 sep): -0.045em a 62px, -0.03em a 36px, -0.013em a 15px, con el
   interlineado bajando de 1.57 a 1.15 en el mismo recorrido. Aqui
   esta la misma curva ajustada a nuestra escala.

   Se usan EMPAREJADOS. Si pones `--sgf-text-4xl`, pon tambien
   `--sgf-lead-4xl` y `--sgf-track-4xl`. Usar un tamano con el
   tracking de otro es exactamente el defecto que esto corrige. */
/* UN SOLO CANAL, 16px, EN TODAS LAS PANTALLAS — 29 sep
   ----------------------------------------------------
   Estaba en 48px en escritorio y 16 en movil. Dos valores para lo
   mismo, y el de escritorio dejaba las fotos encerradas en el centro
   de la pantalla.

   24px en escritorio, 16 de tablet para abajo. Lo que da sensacion
   de amplitud no es el aire de los lados, es que la imagen sea
   grande; el aire lateral solo la encoge. Pero pegado del todo al
   borde el contenido parece un descuido, asi que 24 en pantalla
   grande y 16 donde el ancho escasea.

   El escalon se da en 1023px, que es el corte de tablet que ya usa
   el tema en otros veintitantos sitios. Inventar un corte nuevo aqui
   seria una linea mas donde el diseno se parte sin que nadie sepa
   por que. */
/* EL HOVER TENÍA QUE NOTARSE, Y NO SE NOTABA — 1 oct
   ==================================================
   Esto solo movía el `border-color` de `--sgf-color-control` a
   `--sgf-color-text`. Un botón de 56px cuyo único cambio al pasar el
   ratón es el tono de una línea de 1px no está respondiendo: parece
   que no has llegado a él.

   Ahora además entra un lavado de fondo muy tenue, derivado del propio
   color de texto. Es el mismo gesto en toda la casa —aclarar o teñir
   un paso desde el color que ya tiene la pieza— y funciona sobre
   cualquier marca, porque sale de sus tokens y no de un gris elegido
   para el fondo blanco de fábrica.

   `6%` es poco a propósito: sobre un botón de contorno el protagonista
   sigue siendo el borde; el fondo solo confirma que lo estás apuntando. */
/* LA FLECHA DE UN CARRIL, UNA SOLA VEZ — 1 oct
   ============================================
   Había TRES flechas de carrusel en el tema —la de recomendados de la
   ficha, la de la historia de producto y la del cajón del carrito— con
   tres geometrías y tres aspectos:

       recomendados   48px   fondo surface   sin borde   círculo
       historia       40px   fondo bg        1px borde   círculo
       cajón          28px   sin fondo       sin borde   CUADRADA

   Hacen exactamente lo mismo: mover un carril un paso. La diferencia
   no la decidió nadie, la decidió el fichero donde cayó cada una. Y la
   de recomendados tenía el hover en `$sgf-gray-200`, un gris fijo de
   Sass, sobre una web de fondo crema.

   El tamaño sí es legítimo que cambie —una flecha de 40 dentro del
   cajón del carrito se come el ancho—, pero entonces se declara como
   tamaño, no se reinventa la pieza entera.

   El estado desactivado se apaga y NO se oculta: si desapareciera, la
   otra flecha saltaría de sitio justo cuando la estás pulsando. Esa
   razón estaba escrita dos veces, en dos ficheros; ahora está aquí.

   @param {Length} $lado  Lado del botón.
   @param {Length} $icono Lado del SVG de dentro. */
/* ESTADOS DE UN CAMPO, EN UN SOLO SITIO — 30 sep
   ==============================================
   `.sgf-input`, `.sgf-textarea` y `.sgf-select` repetian las mismas
   diez declaraciones y tenian los mismos dos estados: reposo y foco.
   Tres copias que hay que recordar cambiar a la vez.

   Aqui estan los seis estados que necesita un campo, una vez:

     hover          se puede escribir aqui
     focus-visible  estoy aqui con el teclado
     focus          estoy aqui (raton)
     error          esto hay que arreglarlo
     disabled       esto no se puede tocar
     readonly       esto se lee pero no se cambia

   Sobre el foco, que es donde estaba el fallo gordo: habia
   `outline: none` y solo cambiaba el borde. Quitar el contorno sin
   poner otro deja a quien navega con teclado sin saber donde esta, y
   el borde por si solo no basta porque ya cambia por otras razones.

   Ahora el contorno vuelve, pero SOLO en `:focus-visible`, o sea
   solo con teclado. Con raton se queda el cambio de borde, que es
   suficiente porque ya sabes donde has pulsado. */
/* ═══════════════════════════════════════════════════════════
   EL TITULAR DE UNA SECCIÓN
   ═══════════════════════════════════════════════════════════

   Una sección de página tiene un titular, y ese titular mide siempre
   lo mismo esté en la portada, en Nosotros o en Los viñedos. Suena
   obvio y no lo estaba: medido en el navegador, «Nuestros vinos» en
   la portada salía a 40,96px y «Nuestra historia» en Nosotros a 25,6.
   La misma pieza, dos tamaños, y el sitio parecía de dos personas.

   El motivo era que `.sgf-coleccion__heading` y
   `.sgf-pilares__heading` llevaban la escala escrita a mano —las dos,
   palabra por palabra, copiada la una de la otra— y
   `.sgf-home-section__title` no llevaba ninguna: heredaba el tamaño
   de `h1`/`h2` del texto corrido, que es otra cosa.

   Escrito aquí, el tamaño del titular de sección se decide una vez.
   Y como es un mixin y no una clase suelta, cada componente sigue
   poniendo lo suyo —el margen inferior, la alineación— sin tener que
   heredar decisiones que no son de su incumbencia.

   El `clamp` empieza en 28px y llega a 48: en un móvil un titular de
   48px parte en cuatro líneas y deja de ser un titular.
   ─────────────────────────────────────────────────────────── */
/* ─── Título de bloque de la ficha ───────────────────────────

   «Del elaborador», «Notas de cata», «Detalles del producto», «Perfil
   sensorial», «En nariz y boca». En la columna de compra todos esos son
   la misma cosa: el nombre de un bloque. Tienen que leerse como una sola
   escala o la columna parece montada por tres personas distintas.

   Existe porque pasó: el perfil sensorial nació con la clase del
   `eyebrow` —14px y en color de acento— y su rótulo interno en mono a
   10,5 y caja alta, mientras los acordeones de al lado iban a 16. Tres
   tamaños y tres familias para cinco rótulos que están uno debajo de
   otro.

   Escrito aquí se decide una vez. Cada componente sigue poniendo lo
   suyo —el margen, el gesto de abrir— que eso sí es de su incumbencia.
   ─────────────────────────────────────────────────────────── */
/**
 * Shop tables
 */
table.shop_table_responsive thead {
  display: none;
}
table.shop_table_responsive tbody th {
  display: none;
}
table.shop_table_responsive tr td {
  display: block;
  text-align: right;
  clear: both;
}
table.shop_table_responsive tr td::before {
  content: attr(data-title) ": ";
  float: left;
}
table.shop_table_responsive tr td.product-remove a {
  text-align: left;
}
table.shop_table_responsive tr td.product-remove::before {
  display: none;
}
table.shop_table_responsive tr td.actions::before, table.shop_table_responsive tr td.download-actions::before {
  display: none;
}
table.shop_table_responsive tr td.download-actions .button {
  display: block;
  text-align: center;
}

@media screen and (min-width: 48em) {
  table.shop_table_responsive thead {
    display: table-header-group;
  }
  table.shop_table_responsive tbody th {
    display: table-cell;
  }
  table.shop_table_responsive tr th,
  table.shop_table_responsive tr td {
    text-align: left;
  }
  table.shop_table_responsive tr td {
    display: table-cell;
  }
  table.shop_table_responsive tr td::before {
    display: none;
  }
}
/**
 * Products
 */
/* Rejilla de catalogo
   3 columnas, 16px entre columnas, 48px entre filas.
   Sin max-width: el catalogo ocupa el viewport menos los gutters.

   Se engancha a la CLASE, no al elemento. Estaba escrito `ul.products`
   y el contenedor es hoy un <div> —las tarjetas son <article>, y un
   <article> colgando de un <ul> es HTML invalido—, con lo que un
   selector atado al elemento tumbaba la rejilla entera de golpe.
   Los hijos, por la misma razon, se seleccionan por `> *`. */
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sgf-grid-gap);
  row-gap: var(--sgf-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.products > * {
  list-style: none;
  margin: 0;
  min-width: 0;
}
.products > * img {
  display: block;
}

/* 2 columnas por debajo de 1024px, incluido movil.
   No se baja nunca a una sola columna. */
@media (max-width: 1023px) {
  .products,
  .products[class*=columns-] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sgf-space-5);
  }
}
@media (max-width: 767px) {
  .products,
  .products[class*=columns-] {
    column-gap: var(--sgf-space-2);
    row-gap: var(--sgf-space-4);
  }
}
/* ═══════════════════════════════════════════════════════════
   PRECIOS — definicion unica
   ═══════════════════════════════════════════════════════════

   Un precio es el mismo dato en la tarjeta, en la ficha, en la barra
   fija de compra, en la cesta y en el pedido. Si cambia de cuerpo, de
   peso o de color segun donde salga, deja de leerse como el mismo dato
   y hay que volver a interpretarlo cada vez.

   Estaba divergiendo: 16/500 negro en la ficha y en la tarjeta, pero
   14/400 en NARANJA en la barra fija. Se define una vez y todos los
   sitios apuntan aqui.

   Dos niveles, y solo dos:

     principal   16/500 en negro. El precio de lo que se esta mirando.
     secundario  14/400 en gris.  El precio unitario cuando al lado ya
                 hay un total de linea, que es el que manda.
   ─────────────────────────────────────────────────────────── */
.single-product .summary > .price,
.single-product .entry-summary > .price,
.sgf-product-card__price,
.sgf-sticky-atc__price,
.sgf-cart-item__line,
.sgf-thanks__item-price {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  font-variant-numeric: tabular-nums;
}

/* El precio unitario cuando hay un total de linea al lado. */
.sgf-cart-item__price {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sgf-color-muted);
  font-variant-numeric: tabular-nums;
}

/* El precio tachado de una oferta: mismo cuerpo, en gris.
   Mas pequeño se leeria como una nota al pie y perderia la
   comparacion, que es justo lo que tiene que hacer. */
.single-product .summary > .price del,
.sgf-product-card__price del,
.sgf-sticky-atc__price del {
  color: var(--sgf-color-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: var(--sgf-space-2);
}

.single-product .summary > .price ins,
.sgf-product-card__price ins,
.sgf-sticky-atc__price ins {
  text-decoration: none;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

/**
 * Single product
 */
:root {
  --pdp-space-xs: 8px;
  --pdp-space-sm: 16px;
  --pdp-space-md: 24px;
  --pdp-space-lg: 32px;
  --pdp-space-xl: 48px;
  --pdp-space-2xl: 64px;
  --pdp-space-3xl: 80px;
  /* Geometria de la ficha.
     ----------------------
     56 + 8 + 704  = 768  columna de galeria
                48        separacion
                384       columna de informacion
     ------------------------------------------
                1200      total

     Se subio desde 935. La foto crece un 43% y la columna de
     informacion tambien: a 346 se quedaba corta para la rejilla de
     tallas y los paneles plegables.

     NO se llevo a 1440. Con ese ancho y la informacion en 346, la
     foto pasaba de 1000px y el boton de compra acababa pegado al
     borde derecho, a mas de mil pixeles de donde empieza la mirada:
     se alarga el recorrido entre "me gusta" y "lo compro" justo en
     la pantalla donde se decide. Si algun dia se quiere 1440, la
     reparticion que mantiene la proporcion es 56 + 8 + 880 + 48 +
     448; cambiar solo el maximo dejaria la columna derecha anemica. */
  --pdp-thumb: 56px;
  --pdp-image: 704px;
  --pdp-info: 384px;
  --pdp-max: 1200px;
}

/* ─── Contenedor propio del PDP ──────────────────────────────
   Anula el ancho completo que usa el catalogo. */
.single-product .sgf-site-main--woo {
  max-width: var(--pdp-max);
  margin-inline: auto;
  padding-inline: 0;
  padding-block: var(--pdp-space-xl) var(--pdp-space-3xl);
}
@media (max-width: 1199px) {
  .single-product .sgf-site-main--woo {
    max-width: 100%;
    padding-inline: var(--sgf-gutter);
  }
}
@media (max-width: 767px) {
  .single-product .sgf-site-main--woo {
    padding-inline: 0;
    padding-block: 0 var(--pdp-space-xl);
  }
}

/* La miga de pan SE VE, y encima del titulo. Aqui habia un
   `display: none` que la escondia; su sitio en el diseño anterior era
   justo ese, y `_components.scss` ya le tiene puesto el estilo para
   toda la tienda. Se retira la regla en vez de taparla con otra: dos
   reglas contrarias sobre lo mismo obligan al siguiente que pase por
   aqui a averiguar cual de las dos gana. */
/* El campo de cantidad, escondido — el porque esta en
   `inc/woocommerce-pdp-buy.php`. Se cubre tambien el bloque de
   variacion, que es donde vive en un producto variable.

   Y NO con `display: none`. Al elegir talla, el JS de variaciones de
   WooCommerce hace `.show()` sobre este bloque, y jQuery escribe un
   `display` EN LINEA que gana a cualquier hoja de estilos. La salida
   facil seria `!important`, que es empezar una discusion que hay que
   volver a ganar cada vez que WooCommerce toque su JS. Sacarlo de la
   vista con posicion y recorte no le disputa nada: `.show()` escribe
   su `display` y el campo sigue sin verse.

   Ademas asi el campo conserva su tamaño cero pero su valor: sigue en
   el formulario y sigue enviando 1. */
.single-product form.cart .quantity,
.sgf-quick-view form.cart .quantity {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* Mismo aviso con reloj que el carrito, mismo estilo: la regla vive
   en `_blocks.scss` y alli se le ha añadido este selector. Aqui solo
   se separa del boton de comprar. */
.single-product .sgf-pdp__scarcity,
.sgf-quick-view .sgf-pdp__scarcity {
  margin-block: var(--sgf-space-3) var(--sgf-space-2);
}

/* ─── Rejilla principal ─────────────────────────────────────
   Galeria (thumbs + imagen) | informacion. */
.single-product div.product {
  display: grid;
  grid-template-columns: calc(var(--pdp-thumb) + var(--pdp-space-xs) + var(--pdp-image)) var(--pdp-info);
  column-gap: var(--pdp-space-xl);
  align-items: start; /* alineacion superior, nunca centrado */
}
@media (max-width: 1199px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
@media (max-width: 767px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--pdp-space-md);
  }
}

/* Colocacion explicita de las dos columnas.
   -----------------------------------------
   La rejilla repartia por orden del documento, asi que bastaba un
   hijo directo de mas para descolocarla entera. Es justo lo que
   pasaba con los productos rebajados: WooCommerce mete <span
   class="onsale"> como hermano antes de la galeria, ocupaba la
   primera celda, y galeria y resumen se iban cada uno a un sitio.
   Solo se veia en productos en oferta, que es la peor clase de fallo:
   el que no aparece hasta que hay una campana en marcha.

   Con las dos columnas fijadas, ningun hermano inesperado —de
   WooCommerce o de un plugin— puede volver a mover nada. */
.single-product div.product > .woocommerce-product-gallery {
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 767px) {
  .single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
  }
}

.single-product div.product > .summary {
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 767px) {
  .single-product div.product > .summary {
    grid-column: 1;
    grid-row: 2;
    padding-inline: var(--sgf-space-3);
  }
}

/* La etiqueta "¡Oferta!" de WooCommerce no se pinta en la ficha.
   El descuento ya se lee en el precio, tachado y precio nuevo uno al
   lado del otro, que es mas concreto que la palabra "oferta". Para
   rotulos de campana el theme tiene lo suyo, sgf_single_product_flag(),
   encima del titulo. */
.single-product div.product > .onsale {
  display: none;
}

/* ─── Galeria ────────────────────────────────────────────────
   La estructura y el comportamiento viven en
   plugins/woocommerce/_gallery.scss. Aqui solo queda la colocacion
   dentro de la rejilla de la ficha.

   Lo que habia era un juego de reglas atadas a las clases de
   FlexSlider —.flex-viewport, .flex-control-thumbs— que ya no
   existen. Peor aun: la regla
   `:not(:has(.flex-control-thumbs))` estaba pensada para el caso de
   una sola foto, y al desaparecer esas clases pasó a cumplirse
   SIEMPRE, colapsando la galeria a una columna y dejando las
   miniaturas encima de la imagen. */
.woocommerce-product-gallery {
  position: relative;
  display: grid;
  grid-template-columns: var(--pdp-thumb) minmax(0, 1fr);
  column-gap: var(--pdp-space-xs);
  align-items: start;
}
@media (max-width: 767px) {
  .woocommerce-product-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sin miniaturas —producto de una sola foto— la imagen ocupa todo. */
.woocommerce-product-gallery:not(:has(.sgf-gallery__thumbs)) {
  grid-template-columns: minmax(0, 1fr);
}

.woocommerce-product-gallery__wrapper {
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 767px) {
  .woocommerce-product-gallery__wrapper {
    grid-column: 1;
  }
}

.woocommerce-product-gallery:not(:has(.sgf-gallery__thumbs)) .woocommerce-product-gallery__wrapper {
  grid-column: 1;
}

/* Las flechas de la galeria eran de FlexSlider, que ya no corre.
   En escritorio se navega con las miniaturas y en movil deslizando,
   asi que no hacen falta: una flecha sobre la foto tapa producto. */
.sgf-product-flag {
  margin: 0 0 var(--pdp-space-xs);
  font-size: var(--sgf-text-sm);
  font-weight: 500;
  line-height: 20px;
  color: var(--sgf-color-accent);
}

/* Titulo 24/28. Contenido: no es un hero de marketing. */
.single-product .product_title,
.sgf-quick-view .product_title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sgf-color-text);
}

/* Subtitulo a 8px del titulo. */
.single-product .woocommerce-product-details__short-description,
.sgf-quick-view .woocommerce-product-details__short-description {
  margin: var(--pdp-space-xs) 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-muted);
}
.single-product .woocommerce-product-details__short-description p,
.sgf-quick-view .woocommerce-product-details__short-description p {
  margin: 0;
  max-width: none;
}

/* Precio a 16px del subtitulo. */
.single-product .summary > .price,
.single-product .entry-summary > .price,
.sgf-quick-view .price {
  margin: var(--pdp-space-sm) 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--sgf-color-text);
}
.single-product .summary > .price del,
.single-product .entry-summary > .price del,
.sgf-quick-view .price del {
  color: var(--sgf-color-muted);
  font-weight: 400;
  margin-right: var(--pdp-space-xs);
}
.single-product .summary > .price ins,
.single-product .entry-summary > .price ins,
.sgf-quick-view .price ins {
  text-decoration: none;
}

/* ─── Aire entre precio y tallas ─────────────────────────────
   64px. Es el detalle que mas define el ritmo del PDP: pegar las
   tallas al precio rompe el registro entero. */
.single-product form.cart,
.sgf-quick-view form.cart {
  display: block;
  margin: var(--pdp-space-xl) 0 0;
}

.single-product .quantity,
.sgf-quick-view .quantity {
  display: none;
}

/* Cabecera de tallas: «Talla» + pista, guía a la derecha. */
.sgf-size-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pdp-space-sm);
  margin-bottom: var(--pdp-space-xs);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.sgf-size-head__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
}

.sgf-size-head__name {
  font-weight: 500;
  color: var(--sgf-color-text);
}

.sgf-size-head__hint {
  color: var(--sgf-color-muted);
}

/* Barra de tallas: las que haya, hasta 5 por fila, celdas iguales.
   El fondo de la rejilla es transparente: si hay 6 tallas, el hueco
   de la segunda fila no se pinta de gris. Las rayas van en cada
   botón, no en el contenedor. */
.sgf-size-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--pdp-space-sm);
  background: transparent;
  border: 1px solid var(--sgf-color-control);
  border-radius: 8px;
  overflow: hidden;
}

/* TANTAS COLUMNAS COMO VALORES — 2 oct
   ====================================
   Esto era `repeat(5, …)` fijo. Con un producto de 3 valores —un vino
   con tres añadas— quedaban dos columnas vacías dentro de la caja:
   medido en el Rosado, la rejilla ocupaba 513px con cinco carriles de
   102 y solo tres llenos. No es un hueco, es media barra en blanco con
   borde alrededor, y se lee como que algo no ha cargado.

   Cinco era un número de zapatería: viene de cuando la tienda vendía
   tallas, y nadie volvió a mirarlo al meter vinos.

   Las columnas se cuentan solas con `:has()`, mirando cuántos hijos
   hay: la última regla que encaja manda, y cada una pide «al menos N»,
   así que sale el menor entre los que haya y cinco. Las cinco pesan lo
   mismo y decide el orden; aquí el orden es la regla, no un accidente,
   y están seguidas en el mismo bloque para que se vea.

   Se hace en CSS y no pasando el número desde PHP a propósito: esta
   rejilla la pintan DOS sitios —`woocommerce.php` para los productos
   simples y `variations.js` para los variables, que es el caso del
   vino—. Lo que se decide en CSS lo heredan los dos, y el tercero que
   venga. Lo que se pasa como dato hay que acordarse de pasarlo. */
.sgf-size-grid:has(> .sgf-size:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sgf-size-grid:has(> .sgf-size:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sgf-size-grid:has(> .sgf-size:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sgf-size-grid:has(> .sgf-size:nth-child(5)) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sgf-size {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sgf-color-muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--sgf-color-control);
  border-bottom: 1px solid var(--sgf-color-control);
  border-radius: 0;
  cursor: pointer;
}
.sgf-size:nth-child(5n) {
  border-right: 0;
}
.sgf-size {
  /* Y si caben todas en un renglón, la raya sobra en la última, sea
     la quinta o la tercera: la pone el borde de la caja. Esto es lo
     que dejaba una raya suelta detrás de «2024» con tres añadas.
     `:first-child:nth-last-child(-n + 5)` es la forma de preguntar
     «¿hay cinco hijos o menos?»; el `:first-child:last-child` de
     abajo cubre el caso de un solo valor, donde no hay hermano que
     seleccionar. */
}
.sgf-size:first-child:nth-last-child(-n+5) ~ .sgf-size:last-child, .sgf-size:first-child:last-child {
  border-right: 0;
}
.sgf-size {
  /* Última fila: sin raya inferior, que ya la pone el borde. */
}
.sgf-size:nth-child(5n+1):nth-last-child(-n+5), .sgf-size:nth-child(5n+1):nth-last-child(-n+5) ~ .sgf-size {
  border-bottom: 0;
}
.sgf-size {
  transition: color var(--sgf-duration-fast) var(--sgf-ease-out), background-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-size:hover {
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
}
.sgf-size[aria-pressed=true], .sgf-size.is-selected {
  color: var(--sgf-color-text);
  font-weight: 500;
  background: var(--sgf-color-bg);
}
.sgf-size.is-aviso {
  color: var(--sgf-color-muted);
  cursor: pointer;
}
.sgf-size[disabled] {
  color: var(--sgf-color-control);
  cursor: not-allowed;
  text-decoration: none;
  background: var(--sgf-color-bg);
}
.sgf-size:focus-visible {
  outline: 1px solid var(--sgf-color-text);
  outline-offset: -2px;
  z-index: 1;
}

.sgf-size__txt {
  min-width: 0;
}

/* La campana no empuja el número: si ocupara hueco, 37 y 40
   dejarían de compartir eje. */
.sgf-size__campana {
  position: absolute;
  top: 5px;
  right: 4px;
  display: block;
  width: 8px;
  height: 8px;
  opacity: 0.7;
  pointer-events: none;
}

/* Cuando la cabecera propia esta justo encima de la tabla, el rotulo
   «Talla» de WooCommerce sobra: son dos nombres para el mismo control,
   uno debajo del otro. El selector se apoya en esa vecindad a
   proposito —solo hay hermano adyacente si `sgf_pdp_size_head_variable()`
   ha decidido pintarlo—, asi que en un producto con dos ejes de
   variacion, donde no la pinta, las etiquetas siguen ahi.

   Lleva `.single-product` delante por una razon concreta: unas lineas
   mas abajo, `.single-product .variations` le pone `display: block` a
   todas sus celdas. Sin ese prefijo las dos reglas empatan a
   especificidad, gana la ultima escrita —la otra— y la etiqueta
   seguia viendose. */
.single-product .sgf-size-head + .variations th,
.sgf-quick-view .sgf-size-head + .variations th {
  display: none;
}

/* Variaciones nativas, con el mismo tratamiento. */
.single-product .variations,
.sgf-quick-view .variations {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--pdp-space-md);
  /* `border: 0` y no solo `padding: 0`.
     ---------------------------------
     `base/elements/_tables.scss` le pone a toda celda una linea
     inferior, que en una tabla de datos esta bien y aqui no: la
     tabla de variaciones no es una tabla, es la envoltura que
     WooCommerce usa para el selector de tallas. Esas dos lineas
     —una bajo el rotulo, otra bajo las tallas— eran justo la
     diferencia con la ficha del producto simple, que no las tiene. */
}
.single-product .variations th, .single-product .variations td,
.sgf-quick-view .variations th,
.sgf-quick-view .variations td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}
.single-product .variations th label,
.sgf-quick-view .variations th label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: var(--pdp-space-xs);
}
.single-product .variations td,
.sgf-quick-view .variations td {
  margin-bottom: var(--pdp-space-sm);
}
.single-product .variations select,
.sgf-quick-view .variations select {
  width: 100%;
  height: 48px;
  padding-inline: var(--pdp-space-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  cursor: pointer;
}
.single-product .variations select:hover, .single-product .variations select:focus,
.sgf-quick-view .variations select:hover,
.sgf-quick-view .variations select:focus {
  border-color: var(--sgf-color-text);
  outline: none;
}

/* CTA: 32px sobre la rejilla de tallas, 56px, pildora negra. */
.single-product .single_add_to_cart_button,
.sgf-quick-view .single_add_to_cart_button {
  width: 100%;
  height: 56px;
  margin-top: var(--pdp-space-md);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  box-shadow: none;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.single-product .single_add_to_cart_button:focus-visible,
.sgf-quick-view .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.single-product .single_add_to_cart_button,
.sgf-quick-view .single_add_to_cart_button {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .single-product .single_add_to_cart_button:hover,
  .sgf-quick-view .single_add_to_cart_button:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}
.single-product .single_add_to_cart_button,
.sgf-quick-view .single_add_to_cart_button {
  /* Sin talla elegida el boton ya se atenua, pero seguia enseñando
     la manita: parecia pulsable, y de hecho lo era. El JS lo frena;
     esto lo cuenta antes de que nadie lo intente. */
}
.single-product .single_add_to_cart_button.disabled, .single-product .single_add_to_cart_button.wc-variation-is-unavailable,
.sgf-quick-view .single_add_to_cart_button.disabled,
.sgf-quick-view .single_add_to_cart_button.wc-variation-is-unavailable {
  cursor: not-allowed;
}

/* El «Ver carrito» que WooCommerce cuelga del boton.
   -------------------------------------------------
   Lo añade su propio JS al recibir `added_to_cart`, y ese evento lo
   disparamos nosotros a proposito: lo escuchan el cajon, la animacion
   de vuelo y la analitica. Asi que el enlace no se puede evitar en
   origen sin dejar a los tres sin aviso — se esconde aqui.

   Sobra por dos motivos. Uno, que el cajon YA se ha abierto con la
   cesta delante: el enlace ofrece ir a ver algo que se esta viendo.
   Y dos, que lleva a la pagina del carrito, o sea fuera de la ficha,
   que es justo lo que el cajon existe para no tener que hacer. */
.single-product form.cart .added_to_cart,
.sgf-quick-view form.cart .added_to_cart {
  display: none;
}

/* Favorito: 8px bajo el CTA, pildora blanca con borde. */
.sgf-favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pdp-space-xs);
  width: 100%;
  height: 56px;
  margin-top: var(--pdp-space-xs);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: var(--sgf-radius-pill);
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-favorite:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-favorite:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
.sgf-favorite svg {
  width: 20px;
  height: 20px;
}

/* ─── Recogida ───────────────────────────────────────────────
   Solo tipografia. Sin caja, sin fondo gris. */
.sgf-pickup {
  margin-top: var(--pdp-space-xl);
}
.sgf-pickup__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.sgf-pickup__link {
  display: inline-block;
  margin-top: var(--pdp-space-xs);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-pickup__note {
  margin: var(--pdp-space-sm) 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}

/* ─── Descripcion y metadatos ────────────────────────────────── */
.sgf-pdp-desc {
  margin-top: var(--pdp-space-2xl);
  max-width: var(--pdp-info);
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-text);
  text-align: left;
}
.sgf-pdp-desc p {
  margin: 0 0 var(--pdp-space-sm);
  max-width: none;
}

.single-product .product_meta {
  margin-top: var(--pdp-space-sm);
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--sgf-color-muted);
}
.single-product .product_meta > span {
  display: block;
}
.single-product .product_meta a {
  color: inherit;
}

/* ─── Acordeones ─────────────────────────────────────────────
   Secciones apiladas separadas por 1px. Sin cajas, sin fondo,
   sin radio. */
.single-product .woocommerce-tabs {
  grid-column: 2;
  margin-top: var(--pdp-space-2xl);
}
@media (max-width: 767px) {
  .single-product .woocommerce-tabs {
    grid-column: 1;
    padding-inline: var(--pdp-space-sm);
  }
}

.single-product .woocommerce-tabs ul.tabs {
  display: none;
}

.single-product .woocommerce-tabs .panel {
  display: block !important;
  max-width: var(--pdp-info);
  margin: 0;
  padding: var(--pdp-space-md) 0;
  border-top: 1px solid var(--sgf-color-border);
  font-size: 16px;
  line-height: 24px;
}
.single-product .woocommerce-tabs .panel h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--pdp-space-xs);
}
.single-product .woocommerce-tabs .panel p {
  margin: 0 0 var(--pdp-space-xs);
  max-width: none;
}
.single-product .woocommerce-tabs .panel p:last-child {
  margin-bottom: 0;
}
.single-product .woocommerce-tabs .panel ul {
  margin: 0;
  padding-left: var(--pdp-space-sm);
}
.single-product .woocommerce-tabs .panel li {
  margin-bottom: var(--pdp-space-xs);
}

.sgf-accordion {
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--pdp-space-md) 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--sgf-color-text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.sgf-accordion__toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-accordion__toggle[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.sgf-accordion__panel {
  padding-bottom: var(--pdp-space-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}
.sgf-accordion__panel[hidden] {
  display: none;
}

/* ─── Relacionados ───────────────────────────────────────────── */
.single-product .related,
.single-product .upsells {
  grid-column: 1/-1;
  margin-top: var(--pdp-space-3xl);
}
.single-product .related > h2,
.single-product .upsells > h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-transform: none;
  margin: 0 0 var(--pdp-space-md);
}

/* ─── Movil ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .single-product .woocommerce-product-gallery__image img {
    border-radius: 0;
  }
  .single-product .product_title,
  .sgf-quick-view .product_title {
    font-size: 20px;
    line-height: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sgf-gallery__thumb,
  .sgf-size,
  .sgf-favorite,
  .sgf-accordion__toggle svg {
    transition: none;
  }
}
/* Los enlaces de la columna heredaban el acento de la etiqueta de
   campana. En el PDP solo hay negro y gris. */
.single-product .entry-summary a:not(.sgf-product-flag),
.sgf-pickup__link,
.sgf-size-head a {
  color: var(--sgf-color-text);
}

.sgf-pickup__note {
  color: var(--sgf-color-muted);
}

/* Boton de lupa de WooCommerce.
   Se oculta: ensucia la foto y el lightbox se sigue abriendo al
   hacer clic sobre la propia imagen. */
.woocommerce-product-gallery__trigger {
  display: none;
}

/* ─── Recomendaciones ────────────────────────────────────────
   Ancho completo, fuera del contenedor de 935px del PDP.
   Carril horizontal que sangra hasta el borde derecho: la tarjeta
   siguiente asoma, que es lo que indica que hay mas. */
.sgf-reco {
  width: 100%;
  margin-top: var(--pdp-space-3xl);
  margin-bottom: var(--pdp-space-3xl);
  overflow: hidden; /* contiene el carril, no recorta el foco */
}

.sgf-reco__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pdp-space-md);
  padding-inline: var(--sgf-gutter);
  margin-bottom: var(--pdp-space-md);
}
@media (max-width: 767px) {
  .sgf-reco__head {
    padding-inline: var(--pdp-space-sm);
  }
}

.sgf-reco__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ── Flechas ─────────────────────────────────────────────── */
.sgf-reco__nav {
  display: flex;
  gap: var(--pdp-space-xs);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .sgf-reco__nav {
    display: none;
  }
}

.sgf-reco__arrow {
  /* Era la misma flecha que la de la historia con otro tamaño, otro
     fondo y SIN borde, y además con el hover en `$sgf-gray-200`: un
     gris fijo de Sass sobre una web de fondo crema. */
  /* 40px, la misma que la de «Cómo se hace». Eran 48 aquí y 40 allí,
     en la MISMA página: dos flechas de carrusel a dos tamaños una
     debajo de la otra. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 50%;
  color: var(--sgf-color-text);
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-reco__arrow:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-reco__arrow:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
.sgf-reco__arrow svg {
  width: 16px;
  height: 16px;
}
.sgf-reco__arrow:disabled, .sgf-reco__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Carril ──────────────────────────────────────────────── */
.sgf-reco__grid.products {
  display: flex;
  gap: var(--sgf-grid-gap);
  margin: 0;
  padding: 0;
  padding-inline: var(--sgf-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sgf-gutter);
  /* La barra molesta en un carril de producto; el arrastre y las
     flechas siguen funcionando. */
  scrollbar-width: none;
}
.sgf-reco__grid.products::-webkit-scrollbar {
  display: none;
}
.sgf-reco__grid.products {
  /* La tarjeta se imprime como <article>, no como <li>, asi que se
     apunta a los hijos directos y no a la etiqueta. */
}
.sgf-reco__grid.products > * {
  /* 3 tarjetas visibles y un poco de la cuarta. */
  flex: 0 0 calc((100% - var(--sgf-gutter) * 2 - var(--sgf-grid-gap) * 3) / 3.25);
  scroll-snap-align: start;
  min-width: 0;
  list-style: none;
  margin: 0;
}
@media (max-width: 1023px) {
  .sgf-reco__grid.products > * {
    flex-basis: calc((100% - var(--sgf-gutter) * 2 - var(--sgf-grid-gap)) / 2.2);
  }
}
@media (max-width: 767px) {
  .sgf-reco__grid.products {
    padding-inline: var(--pdp-space-sm);
    scroll-padding-left: var(--pdp-space-sm);
  }
  .sgf-reco__grid.products > * {
    flex-basis: calc((100% - var(--pdp-space-sm) * 2) / 1.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sgf-reco__arrow {
    transition: none;
  }
  .sgf-reco__grid.products {
    scroll-behavior: auto;
  }
}
/* Tallas de un producto VARIABLE.
   El `<select>` de WooCommerce sigue siendo el campo del formulario y
   el que manda: solo se saca de la vista. No se usa `display:none`
   porque asi deja de poder recibir el foco y algunos navegadores dejan
   de validarlo; y no se borra porque si `variations.js` no carga tiene
   que reaparecer y poder comprarse igual. */
/* El selector va cargado a proposito. `.sgf-size-select--oculto` a
   secas lo perdia contra `.single-product .variations select`, que le
   pone 48 px de alto: el desplegable quedaba invisible pero seguia
   ocupando su hueco, y entre las tallas y el boton de comprar se veia
   una franja vacia de 48 px sin nada dentro. Con la clase colgada del
   mismo `select` la regla gana por especificidad, que es una razon que
   se puede leer en el propio selector — un `!important` aqui solo
   diria «gano yo» sin decir a quien. */
.single-product .variations select.sgf-size-select--oculto,
.sgf-quick-view .variations select.sgf-size-select--oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.variations_form .sgf-size-grid--variable {
  margin-top: 0;
}

/* UN PRECIO, EN UN SITIO — 1 oct
   =============================
   Al elegir añada, `variations.js` sube el precio de la variación al
   hueco donde estaba el rango, arriba, y marca el formulario. Entonces
   el bloque de WooCommerce sobra: si no se esconde, el mismo precio
   sale dos veces, arriba y debajo del selector.

   La clase la pone el JS, no PHP, y eso es a propósito: si el JS no
   carga, el precio NO ha subido, así que esconder el de abajo dejaría
   la ficha sin precio tras elegir. Sin clase no se esconde nada y se
   vuelve al comportamiento de antes —feo pero completo—. */
.variations_form.sgf-precio-arriba .woocommerce-variation-price {
  display: none;
}

/* El aviso de «Agotado» de WooCommerce, cuando alguien señala una
   talla con campana. La campana ya lo ha dicho. */
.single-product .woocommerce-variation-availability .out-of-stock,
.sgf-quick-view .woocommerce-variation-availability .out-of-stock {
  display: none;
}

/* Descuento: la etiqueta junto al precio y la nota del codigo.
   El porcentaje se calcula del precio; el codigo solo aparece si hay un
   cupon de verdad detras (inc/woocommerce-pricing.php). */
/* El descuento va en el ACENTO y sin caja, pegado al precio rebajado.
   Se probo en verde y no era: el acento es el color con el que esta
   tienda ya marca lo comercial, y meter un verde nuevo solo para esto
   añade un color al sistema para decir algo que el acento ya dice. */
.sgf-discount-badge {
  margin-left: var(--sgf-space-2, 8px);
  color: var(--sgf-color-accent);
  font-size: inherit;
  white-space: nowrap;
  vertical-align: baseline;
}

.sgf-discount-note {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2, 8px);
  flex-wrap: wrap;
  margin: var(--pdp-space-xs, 8px) 0 0;
  font-size: 14px;
  color: var(--sgf-color-muted, #57574a);
}

/* El codigo es un boton porque se puede copiar, y se parece a un campo
   de texto porque lo que hay dentro es texto que el cliente va a
   teclear en la caja. Un boton con aspecto de boton invita a pulsarlo
   esperando que pase algo mas. */
.sgf-discount-note__code {
  padding: 4px 10px;
  border: 1px dashed currentColor;
  border-radius: var(--sgf-radius-sm, 4px);
  background: none;
  color: inherit;
  font-family: var(--sgf-font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.sgf-discount-note__code:hover,
.sgf-discount-note__code:focus-visible {
  border-style: solid;
}

/* ─── Guía de tallas ────────────────────────────────────────────
   El velo es el del carrito (`.sgf-cart-overlay`): mismo gris,
   misma transición. Aquí solo vive el cajón, anclado bajo la
   cabecera como la cesta. */
.sgf-size-guide {
  position: fixed;
  inset: 0;
  z-index: var(--sgf-z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sgf-duration-drawer) var(--sgf-ease-out);
}
.sgf-size-guide.is-open {
  opacity: 1;
}

.sgf-size-guide[hidden] {
  display: none;
}

.sgf-size-guide__panel {
  position: absolute;
  top: var(--sgf-drawer-top, calc(var(--sgf-header-utility) + var(--sgf-header-primary)));
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--sgf-color-bg);
  border-left: 1px solid var(--sgf-color-border);
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform var(--sgf-duration-drawer) var(--sgf-ease-drawer);
}
.sgf-size-guide__panel:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: -2px;
}

.sgf-size-guide.is-open .sgf-size-guide__panel {
  transform: none;
}

.sgf-size-guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sgf-space-4);
  padding: var(--sgf-space-4) var(--sgf-space-5);
  flex-shrink: 0;
}

.sgf-size-guide__title {
  margin: 0;
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sgf-color-text);
}

.sgf-size-guide__close {
  display: flex;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sgf-color-text);
  cursor: pointer;
}

.sgf-size-guide__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--sgf-space-5) var(--sgf-space-6);
}

.sgf-size-guide__modelo {
  margin: 0 0 var(--sgf-space-5);
}
.sgf-size-guide__modelo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sgf-size-guide__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sgf-color-text);
}
.sgf-size-guide__body h2 {
  margin: 0 0 var(--sgf-space-4);
  font-family: var(--sgf-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.sgf-size-guide__body p {
  margin: 0 0 var(--sgf-space-4);
  color: var(--sgf-color-muted);
  font-size: 13px;
  line-height: 1.5;
}
.sgf-size-guide__body .wp-block-table {
  margin: 0;
  overflow: visible;
}
.sgf-size-guide__body .wp-block-table table {
  width: 100%;
}
.sgf-size-guide__body table,
.sgf-size-guide__body .sgf-guide-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sgf-size-guide__body th, .sgf-size-guide__body td {
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--sgf-color-border);
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
.sgf-size-guide__body th {
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sgf-color-muted);
}
.sgf-size-guide__body td {
  color: var(--sgf-color-muted);
}
.sgf-size-guide__body th:first-child,
.sgf-size-guide__body td:first-child {
  text-align: left;
  padding-left: 0;
  color: var(--sgf-color-text);
}
.sgf-size-guide__body th:last-child,
.sgf-size-guide__body td:last-child {
  padding-right: 0;
}
.sgf-size-guide__body tr:last-child td {
  border-bottom: 0;
}
.sgf-size-guide__body tr.is-current td {
  color: var(--sgf-color-text);
}
.sgf-size-guide__body > :first-child {
  margin-top: 0;
}
.sgf-size-guide__body > :last-child {
  margin-bottom: 0;
}

.sgf-size-guide__intro {
  margin-bottom: var(--sgf-space-5);
}

.sgf-size-guide__seccion + .sgf-size-guide__seccion {
  margin-top: var(--sgf-space-6);
}

/* Con la ventana abierta, el fondo no se desplaza. */
html.sgf-guide-abierta,
body.sgf-guide-abierta {
  overflow: hidden;
}

/* El disparador vive dentro de `.sgf-size-head`, que ya le da color y
   subrayado a su `a`. Como aqui es un `<button>`, se le quita la piel
   de boton para que herede ese mismo tratamiento. */
.sgf-size-head .sgf-size-guide__open {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--sgf-color-muted);
  text-decoration: none;
  cursor: pointer;
}
.sgf-size-head .sgf-size-guide__open:hover {
  color: var(--sgf-color-text);
}

/* -----------------------------------------------
   FICHA «MITAD Y MITAD» — 29 sep

   La segunda version de la ficha. `inc/pdp-layouts.php` pone
   `body.sgf-pdp--mitad` y TODO lo visual vive aqui: ese fichero no
   pinta nada, solo marca. La clave existia desde el principio; esto
   es la mitad que faltaba.

   La idea: la foto deja de ser una columna y pasa a ser la mitad
   izquierda de la pantalla, fija. La compra ocupa la otra mitad y se
   desplaza sola. Es el patron de las tiendas de moda cara, y funciona
   porque la foto nunca se va: el argumento de compra sigue delante
   mientras se leen las tallas y los materiales.

   EN MOVIL NO HAY DOS MITADES. Se apila: foto arriba a todo lo ancho
   y la compra debajo. Se eligio esto y no caer a la clasica porque en
   el movil es donde mas se compra, y la foto grande es justo lo que
   esta tienda tiene que ensenar.
   ----------------------------------------------- */
.sgf-pdp--mitad .site-main,
.sgf-pdp--mitad .sgf-site-main {
  /* A sangre: la version parte la PANTALLA, no el contenedor. */
  max-width: none;
  padding-inline: 0;
}
.sgf-pdp--mitad {
  /* SIN AIRE ARRIBA — 29 sep
     ------------------------
     En la clasica el aire de arriba separa la cabecera de la ficha.
     Aqui la galeria arranca pegada al borde y ocupa media pantalla:
     ese hueco deja una franja de fondo entre la navegacion y la
     foto que no separa nada, solo empuja la foto hacia abajo.

     Solo en `--mitad`. La clasica se queda como estaba.

     Arriba va `0` y no `var(--pdp-space-0)`: ese token NO EXISTE, y
     un `var()` sin definir invalida la declaracion ENTERA en
     silencio. Habria caido tambien el valor de abajo y el padding
     habria vuelto al de la regla base sin que nada avisara. */
}
.sgf-pdp--mitad .sgf-site-main--woo {
  padding-block: 0 var(--pdp-space-3xl);
}
.sgf-pdp--mitad div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin: 0;
}
.sgf-pdp--mitad .woocommerce-product-gallery {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
}
.sgf-pdp--mitad .summary.entry-summary {
  width: auto;
  max-width: none;
  margin: 0;
  padding: clamp(var(--sgf-space-8), 6vw, var(--sgf-space-16)) clamp(var(--sgf-space-5), 5vw, var(--sgf-space-12));
}
@media (min-width: 1024px) {
  .sgf-pdp--mitad div.product {
    /* `minmax(0, 1fr)` y no `1fr` a secas. `1fr` es
       `minmax(auto, 1fr)`: deja que el contenido empuje la
       columna, y aqui la de compra tiene tablas y botones que
       la ensanchaban. Medido antes del arreglo: 329px de foto
       contra 680px de texto, que de mitad y mitad no tiene
       nada. Con `minmax(0, …)` ninguna columna puede crecer
       por su contenido y las dos valen lo mismo. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .sgf-pdp--mitad {
    /* La foto se queda quieta y ocupa el alto de la ventana.
       `position: sticky` y no `fixed`: asi respeta la cabecera y
       suelta la columna cuando termina el producto, en vez de
       quedarse pegada sobre las secciones de abajo. */
  }
  .sgf-pdp--mitad .woocommerce-product-gallery {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
  .sgf-pdp--mitad .woocommerce-product-gallery__wrapper {
    height: 100%;
    margin: 0;
  }
  .sgf-pdp--mitad .woocommerce-product-gallery__wrapper img,
  .sgf-pdp--mitad .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sgf-pdp--mitad {
    /* Las miniaturas se montan sobre la foto: en media pantalla no
       sobra sitio para una columna propia. */
  }
  .sgf-pdp--mitad .sgf-gallery__thumbs {
    position: absolute;
    left: var(--sgf-space-5);
    bottom: var(--sgf-space-5);
    z-index: 2;
    flex-direction: row;
    margin: 0;
  }
  .sgf-pdp--mitad .summary.entry-summary {
    /* El aire es lo que la hace cara. A partir de aqui la
       columna de compra tiene sitio de sobra. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: clamp(var(--sgf-space-10), 7vw, var(--sgf-space-24));
  }
  .sgf-pdp--mitad .summary.entry-summary > * {
    max-width: 34rem;
  }
}
.sgf-pdp--mitad {
  /* La barra de compra fija sobra: el boton ya esta siempre a la
     vista dentro de su mitad. Dos llamadas a la misma accion en la
     misma pantalla compiten entre ellas. */
}
@media (min-width: 1024px) {
  .sgf-pdp--mitad .sgf-sticky-atc {
    display: none;
  }
}

/**
 * Checkout
 */
/* =============================================
   WOOCOMMERCE CHECKOUT

   `.col2-set` is WooCommerce's two-up form row wrapper
   (billing / shipping, first name / last name, etc.).
   ============================================= */
@media screen and (min-width: 768px) {
  .col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sgf-space-4) var(--sgf-space-6);
  }
  .col2-set .form-row-first,
  .col2-set .form-row-last {
    margin-right: 0;
    min-width: 0;
  }
}
/* ═══════════════════════════════════════════════════════════
   EL RESUMEN, SIN CAJA
   ═══════════════════════════════════════════════════════════

   WooCommerce Blocks encierra el resumen en un rectangulo con borde
   gris y esquina redondeada de 5px. Sobran las dos cosas: el catalogo
   entero es de esquina viva, y el borde no separa nada que no separara
   ya el espacio en blanco. Ademas convierte el resumen en un widget
   pegado al lado del formulario en vez de en la otra mitad de la
   pantalla. */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-checkout-order-summary {
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   PASOS
   ═══════════════════════════════════════════════════════════

   Tres marcas y una linea. Ni barra de progreso con porcentaje ni
   animacion: lo unico que tiene que contestar es "cuanto falta", y para
   tres pasos eso se lee de un vistazo. */
/* Sin ancho ni margenes propios: render_block los pinta DENTRO de
   .sgf-entry__content, que ya los trae. Al añadirle otro max-width y
   otro gutter encima, los pasos y la cabecera quedaban 48px a la
   derecha del formulario que encabezan. */
.sgf-checkout-steps {
  margin: 0 0 var(--sgf-space-10);
}
@media (max-width: 767px) {
  .sgf-checkout-steps {
    margin-bottom: var(--sgf-space-6);
  }
}

.sgf-checkout-steps__list {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .sgf-checkout-steps__list {
    gap: var(--sgf-space-2);
  }
}
@media (max-width: 519px) {
  .sgf-checkout-steps__list {
    gap: 10px;
  }
}

/* Las listas del contenido van a 68ch, que es la medida de lectura. Esta
   no se lee como texto: es una fila de tres marcas. Con el tope puesto,
   el <ol> medía 605px dentro de un contenedor de 1040 y centrarlo por
   dentro no servía de nada, porque la caja ya estaba pegada a la
   izquierda.

   Hace falta el selector completo: la regla original es
   `.sgf-entry__content ol` —una clase y un elemento— y le gana a
   `.sgf-checkout-steps__list` a secas. */
.sgf-entry__content .sgf-checkout-steps__list {
  max-width: none;
}

.sgf-checkout-steps__item {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2);
  margin: 0;
}
.sgf-checkout-steps__item:not(:last-child)::after {
  content: "";
  width: clamp(24px, 6vw, 64px);
  height: 1px;
  background: var(--sgf-color-border);
  margin-left: var(--sgf-space-2);
}
@media (max-width: 519px) {
  .sgf-checkout-steps__item {
    gap: 6px;
  }
  .sgf-checkout-steps__item:not(:last-child)::after {
    display: none;
  }
}

.sgf-checkout-steps__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  font-family: var(--sgf-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--sgf-color-border);
  border-radius: 50%;
  color: var(--sgf-color-muted);
}
.sgf-checkout-steps__mark svg {
  width: 12px;
  height: 12px;
}

.sgf-checkout-steps__label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-muted);
  text-decoration: none;
}
@media (max-width: 519px) {
  .sgf-checkout-steps__label {
    font-size: 13px;
  }
}

/* Hecho: marca negra rellena. Es la unica que se ve de lejos, y ver de
   un golpe lo que ya esta resuelto es lo que hace que el resto parezca
   poco. */
.sgf-checkout-steps__item.is-done .sgf-checkout-steps__mark {
  background: var(--sgf-color-text);
  border-color: var(--sgf-color-text);
  color: var(--sgf-color-bg);
}
.sgf-checkout-steps__item.is-done .sgf-checkout-steps__label {
  color: var(--sgf-color-text);
}
.sgf-checkout-steps__item.is-done .sgf-checkout-steps__label:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Confirmado: el ultimo paso en verde, y solo en la pantalla de
   confirmacion.

   El verde sale de $sgf-color-success de la paleta (#2e7d4f) y no del
   token --sgf-color-success, que vale #4ade80. Ese verde claro sobre
   blanco da 1,7:1 de contraste: la marca de verificacion en blanco
   dentro del circulo no se veria. Los dos valores conviven en el
   proyecto —_colors.scss define uno y _tokens.scss escribe otro
   encima— y aqui hace falta el que se lee. */
.sgf-checkout-steps__item.is-confirmed .sgf-checkout-steps__mark {
  background: #2e7d4f;
  border-color: #2e7d4f;
  color: var(--sgf-color-bg);
}
.sgf-checkout-steps__item.is-confirmed .sgf-checkout-steps__label {
  color: #2e7d4f;
  font-weight: 500;
}

/* Actual: contorno negro y texto negro, sin relleno. Se distingue del
   hecho sin gritar. */
.sgf-checkout-steps__item.is-current .sgf-checkout-steps__mark {
  border-color: var(--sgf-color-text);
  color: var(--sgf-color-text);
}
.sgf-checkout-steps__item.is-current .sgf-checkout-steps__label {
  color: var(--sgf-color-text);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   CABECERA
   ═══════════════════════════════════════════════════════════ */
.sgf-checkout-intro {
  margin: 0 0 var(--sgf-space-6);
}

.sgf-checkout-intro__title {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-2);
}
@media (max-width: 767px) {
  .sgf-checkout-intro__title {
    font-size: 22px;
    line-height: 30px;
  }
}

.sgf-checkout-intro__text {
  font-family: var(--sgf-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
  max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════
   GARANTIAS DENTRO DEL RESUMEN
   ═══════════════════════════════════════════════════════════

   Pegadas al total y al boton. Es el sitio donde se decide, y una
   objecion contestada a 800px de la decision no cuenta. */
.sgf-checkout-assurance-list {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-3);
  margin: var(--sgf-space-4) 0 0;
  padding: var(--sgf-space-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-checkout-assurance {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--sgf-space-2);
  align-items: start;
  margin: 0;
}

.sgf-checkout-assurance__icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--sgf-color-text);
}

.sgf-checkout-assurance__text {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sgf-color-muted);
}

/* ═══════════════════════════════════════════════════════════
   FRANJA DE GARANTIAS, DEBAJO
   ═══════════════════════════════════════════════════════════ */
/* LA FRANJA SE ATOMIZÓ EN TRES TARJETAS — 1 oct
   --------------------------------------------
   Era un rectángulo beis a ancho completo con tres columnas dentro.
   El `background` se va de aquí: el color lo pone cada tarjeta, no el
   contenedor. Lo que queda del contenedor es solo el aire de arriba.

   Por qué importa: una caja que envuelve tres cosas dice «esto es un
   bloque»; tres cajas dicen «esto son tres cosas». Lo segundo es lo
   que son. */
.sgf-checkout-assurances {
  margin-top: var(--sgf-space-11);
}
@media (max-width: 767px) {
  .sgf-checkout-assurances {
    margin-top: var(--sgf-space-9);
  }
}

.sgf-checkout-assurances__inner {
  padding-inline: var(--sgf-space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* El mismo hueco que entre fichas del catálogo y fotos del carril.
     No uno parecido: el mismo token. */
  gap: var(--sgf-grid-gap);
}
@media (max-width: 767px) {
  .sgf-checkout-assurances__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--sgf-space-4);
  }
}

/* La tarjeta. Mismo perfil que los avisos de la cesta —borde fino,
   radio medio, fondo de página— para que las dos pantallas del mismo
   pedido se parezcan. */
.sgf-checkout-assurances__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sgf-space-5);
  border: 1px solid var(--sgf-color-border);
  border-radius: var(--sgf-radius-md);
  background: var(--sgf-color-bg);
}

.sgf-checkout-assurances__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--sgf-space-4);
  border-radius: 50%;
  background: var(--sgf-color-surface);
  color: var(--sgf-color-text);
}
.sgf-checkout-assurances__chip svg {
  width: 20px;
  height: 20px;
}

.sgf-checkout-assurances__title {
  font-family: var(--sgf-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 var(--sgf-space-1);
}

.sgf-checkout-assurances__text {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0;
  max-width: 46ch;
}

/* El titulo de la pagina, fuera.
   ------------------------------
   La cabecera del checkout ya hace de titulo, y con las dos salia
   "Pagar" encima de "Ya casi esta". Se esconde por CSS y no tocando
   page.php: esa plantilla sirve a todas las paginas del sitio y no
   tiene por que saber que existe un checkout.

   display:none tambien lo saca del arbol de accesibilidad, asi que no
   quedan dos h1 compitiendo: solo se anuncia el de la cabecera.

   Vale igual para "pedido recibido", que comparte esta clase. Ahi
   sgf_thanks_hide_page_title() ya vacia el titulo con el filtro
   the_title, pero el <header> se seguia imprimiendo: un h1 vacio con
   sus margenes, que abria un claro de 165px entre la cabecera del sitio
   y la marca de confirmacion. Vaciar el texto no quita la caja. */
.woocommerce-checkout .sgf-entry__header,
.woocommerce-cart .sgf-entry__header {
  display: none;
}

/* LA CESTA CON PRODUCTOS NO LLEVA ALTO MÍNIMO — 2 oct
   ===================================================
   El carril de recomendados de la cesta se pinta en `get_footer`, o
   sea FUERA del `main` (lo explica `woocommerce-recommendations.php`:
   la cesta es una página, así que los hooks de plantilla de
   WooCommerce no llegan y el carril tiene que salir después de
   `</main>` para ir a sangre). Y `_body.scss` le pone al `main` un
   `min-height: 100svh - cabecera` para que el pie no se suba en las
   páginas cortas.

   Las dos cosas por separado están bien. Juntas, en una pantalla
   alta, el `min-height` estira el `main` por encima de su contenido
   y ese estirón se mete ENTRE la cesta y el carril. Medido a
   1512×1200: contenido 986px, `min-height` 1120px, o sea 134px de
   nada, y el carril arrancando en el píxel 1296 con la ventana
   acabando en el 1200. El carril no asomaba: había que adivinar que
   existía algo debajo.

   A 900px de alto el `min-height` ni ataba (986 > 820), y por eso no
   se veía en un portátil y sí en un monitor grande.

   Aquí no hace falta: debajo del `main` SIEMPRE hay carril y pie, así
   que el pie no se puede subir —que es lo único que el `min-height`
   venía a evitar—. Con productos, el alto lo pone el contenido.

   El `:not()` no es por especificidad, que ya sobraba: es para que se
   lea que la cesta VACÍA es otra pantalla y tiene su propio alto
   —64svh, justo debajo— por la misma razón al revés: allí no hay
   contenido que empuje y el carril hay que traerlo a la primera
   vista a mano. */
.woocommerce-cart:not(.sgf-cart-empty) .sgf-site-main {
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════
   CESTA VACIA
   ═══════════════════════════════════════════════════════════

   No es un hero. El estado de catálogo (.sgf-empty) sí va centrado
   porque es lo único de la página; aquí debajo hay un carril de
   producto y ese carril tiene que entrar en la primera vista.

   El `body.` delante no es adorno: `_blocks.scss` declara
   `.woocommerce-cart .sgf-site-main { padding-block: … }` con las
   mismas dos clases y se compila DESPUÉS, así que a igual
   especificidad ganaba él y dejaba 96px de padding abajo —el
   contenido quedaba 48px por encima del centro, que es justo el
   «casi centrado» que se ve peor que no centrarlo—. Con `body.`
   son tres selectores contra dos y el orden deja de decidir. */
body.sgf-cart-empty .sgf-site-main,
body.sgf-checkout-vacio .sgf-site-main {
  /* El `padding-block` era `space-6 0`: aire arriba y nada abajo,
     que es lo que pide un bloque pegado al techo. Centrando, esa
     asimetría mueve el contenido 28px hacia arriba del centro real y
     se nota —queda «casi centrado», que se lee peor que no centrado—.
     Con el centrado, el aire lo reparte el propio `min-height`. */
  padding-block: 0;
  /* EL MENSAJE VA EN EL CENTRO, NO PEGADO ARRIBA — 1 oct
     ----------------------------------------------------
     La cesta vacía salía con el titular justo debajo de la cabecera
     y mil píxeles de blanco debajo. No era que faltara centrado
     horizontal —eso ya estaba—: era que el bloque se quedaba arriba
     en una página altísima, y el ojo lo lee como «aquí falta algo
     que no ha cargado».

     `64svh` y no `100svh`: el alto justo para que el mensaje quede
     centrado en una zona cómoda Y asomen los productos recomendados
     de abajo. A pantalla completa el cliente tendría que adivinar
     que hay algo más; asomando, baja. Una cesta vacía es el momento
     en que más falta hace enseñar producto.

     Se resta `--sgf-header-total`, que desde hoy se calcula con
     `var()` y sigue al alto real de la cabecera. Antes era un
     `calc(40px + 56px)` fijo y con la tira a 24px se pasaba 16. */
  min-height: calc(64svh - var(--sgf-header-total));
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* En móvil la misma razón: el padding asimétrico descentraba. Lo
     que sí cambia es el alto —72svh en vez de 64— porque en una
     pantalla alta y estrecha 64 deja el mensaje demasiado arriba y
     los recomendados ya asoman de sobra. */
}
@media (max-width: 767px) {
  body.sgf-cart-empty .sgf-site-main,
  body.sgf-checkout-vacio .sgf-site-main {
    min-height: calc(72svh - var(--sgf-header-total));
  }
}

/* UNA CESTA VACIA NO ES UNA BANDA — 30 sep
   ========================================
   Esto estaba montado como una franja: texto pegado a la izquierda y
   boton pegado a la derecha, con `justify-content: space-between`.
   Funciona cuando hay algo mas en la pagina y la franja es un aviso
   por encima del contenido.

   Pero en la cesta vacia no hay contenido. Medido a 1009px: el texto
   arrancaba en el pixel 24 y el boton en el 765, con setecientos
   pixeles de nada entre los dos. No se lee como una composicion: se
   lee como que algo no ha cargado.

   Cuando una pantalla tiene UNA sola cosa que decir, esa cosa va en
   el medio. El `main` ya llega al alto de la ventana, asi que aqui
   solo hay que dejar de deshacer el centrado que `.sgf-empty` ya
   trae de serie. */
.woocommerce-cart .sgf-empty--cart,
.woocommerce-checkout .sgf-empty--cart {
  max-width: 44ch;
  margin-inline: auto;
  padding: 0 0 var(--sgf-space-7);
  text-align: center;
}

.woocommerce-cart .sgf-empty--cart .sgf-empty__head,
.woocommerce-checkout .sgf-empty--cart .sgf-empty__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sgf-space-6);
  max-width: none;
  margin: 0;
  text-align: center;
}

/* `flex: 0 0 auto` y no `1 1 16rem` — 30 sep
   ------------------------------------------
   Este `flex: 1` es de cuando el bloque era una FILA: alli hacia que
   el texto creciera a lo ANCHO y empujara el boton al otro extremo.
   Al pasar a columna, la misma declaracion lo hace crecer a lo ALTO.

   Medido: el bloque de texto ocupaba 256px de alto para dos lineas
   que necesitan sesenta, y abria un agujero de 240px entre el texto
   y el boton. La regla no habia cambiado; habia cambiado el eje. */
.woocommerce-cart .sgf-empty--cart .sgf-empty__copy,
.woocommerce-checkout .sgf-empty--cart .sgf-empty__copy {
  flex: 0 0 auto;
  min-width: 0;
}

/* El titular de una pantalla vacia manda — 30 sep
   -----------------------------------------------
   Estaba en la palo seca a 24px porque convivia con el titulo de
   pagina «Cesta», que ahora esta oculto. Sin aquel al lado, este es
   lo UNICO que se lee en la pantalla y puede subir un escalon.

   A la display y con los valores emparejados del sistema, no con
   `24px / 32px / -0.01em` a mano: eran tres numeros sueltos que no
   seguian ninguna escala. */
.woocommerce-cart .sgf-empty--cart .sgf-empty__title,
.woocommerce-checkout .sgf-empty--cart .sgf-empty__title {
  font-family: var(--sgf-font-display);
  font-size: var(--sgf-text-3xl);
  font-weight: 400;
  line-height: var(--sgf-lead-3xl);
  letter-spacing: var(--sgf-track-3xl);
  text-transform: none;
  margin: 0 0 var(--sgf-space-3);
}

.woocommerce-cart .sgf-empty--cart .sgf-empty__text,
.woocommerce-checkout .sgf-empty--cart .sgf-empty__text {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0;
  max-width: 42rem;
}

.woocommerce-cart .sgf-empty--cart .sgf-empty__cta,
.woocommerce-checkout .sgf-empty--cart .sgf-empty__cta {
  flex: 0 0 auto;
  text-decoration: none;
}

/* Centrada en las tres pantallas.
   ------------------------------
   Cesta, checkout y confirmacion comparten barra, y solo se lee como
   UNA si aparece siempre en el mismo sitio. Alineada a la izquierda en
   una pantalla y centrada en otra, cambia de posicion justo cuando se
   pasa de paso, que es cuando mas se mira: parecen dos indicadores
   distintos en vez del mismo avanzando. */
.sgf-checkout-steps__list {
  justify-content: center;
}

/* Si el bloque acaba pintando la pantalla de cesta vacia, lo que la
   rodea sobra. Lo marca js/modules/checkout-ux.js sobre el BODY, porque
   ese estado lo decide el navegador y PHP no siempre lo sabe.

   Sobre el body y no sobre <html>, que es donde se marcaba hasta el 2
   de octubre: estos tres de aqui funcionaban igual desde arriba, pero
   `body.sgf-checkout-vacio .sgf-site-main` —el centrado, mas arriba en
   este mismo fichero— no casaba nunca y la pantalla vacia del checkout
   se quedaba pegada al techo.

   Y LA CESTA PEDIA LO MISMO — 2 oct
   ---------------------------------
   `sgf_cart_steps()` escribe la barra de pasos Y la cabecera «Esto es
   lo que llevas», y ya se aparta cuando el servidor ve la cesta vacia.
   Pero eso lo decide UNA vez, al pintar. Quitando el ultimo vino sin
   recargar, las dos se quedaban puestas encima de «Tu cesta esta
   vacia»: dos titulares seguidos diciendo cosas distintas, y una barra
   de pasos prometiendo un recorrido sobre una pantalla que dice que no
   hay nada —justo lo que el comentario de `sgf_cart_steps()` da por
   evitado—.

   Lo decide el mismo sitio que lo decide todo ahora: `sgf-cart-empty`,
   que `js/modules/cesta-vacia.js` mantiene al dia desde la tienda de
   bloques. Por eso basta con sumar la clase aqui en vez de escribir
   otro mecanismo: la pregunta «esta vacia?» ya tiene una respuesta y
   esta en el body. */
.sgf-checkout-vacio .sgf-checkout-steps,
.sgf-checkout-vacio .sgf-checkout-intro,
.sgf-checkout-vacio .sgf-checkout-assurances,
.sgf-cart-empty .sgf-checkout-steps,
.sgf-cart-empty .sgf-checkout-intro,
.sgf-cart-empty .sgf-checkout-assurances {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   EL CHECKOUT VACIO
   ═══════════════════════════════════════════════════════════

   Normalmente no se ve: con la cesta vacia, WooCommerce manda a la
   pagina de cesta, que tiene su propia pantalla. Queda el caso de
   volver atras desde la confirmacion, donde el navegador restaura esta
   pagina de su cache sin pasar por el servidor. Eso lo resuelve
   checkout-ux.js mandando a la cesta, pero si el JavaScript falla o
   tarda, esto es lo que se ve — asi que se viste igual que la cesta
   vacia en vez de dejar el aviso de fabrica. */
.wc-block-checkout-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title cta" "desc  cta";
  align-items: center;
  column-gap: var(--sgf-space-6);
  row-gap: var(--sgf-space-1);
  padding: 0 0 var(--sgf-space-5);
  text-align: left;
}
@media (max-width: 767px) {
  .wc-block-checkout-empty {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "desc" "cta";
    justify-items: start;
    row-gap: var(--sgf-space-2);
  }
}
.wc-block-checkout-empty > svg, .wc-block-checkout-empty__image {
  display: none !important;
}
.wc-block-checkout-empty__title {
  grid-area: title;
  display: block;
  font-family: var(--sgf-font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0;
}
.wc-block-checkout-empty__description {
  grid-area: desc;
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sgf-color-muted);
  max-width: 42rem;
  margin: 0;
}
.wc-block-checkout-empty .wp-block-button {
  grid-area: cta;
  margin: 0;
}
.wc-block-checkout-empty .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--sgf-space-5);
  font-family: inherit;
  font-size: var(--sgf-text-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--sgf-color-bg);
  background: var(--sgf-color-text);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.wc-block-checkout-empty .wp-block-button__link:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.wc-block-checkout-empty .wp-block-button__link {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .wc-block-checkout-empty .wp-block-button__link:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}

/* ═══════════════════════════════════════════════════════════
   ZONA TÁCTIL

   Los radios y casillas nativos miden 20 px. Envío, pago y
   «usar la misma dirección» son los controles que más se pulsan
   aquí. 44 px es el mínimo de Baymard / HIG.
   ═══════════════════════════════════════════════════════════ */
.wc-block-checkout .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-components-checkbox,
.wc-block-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .wc-block-components-radio-control__option,
.woocommerce-checkout .wc-block-components-checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  min-height: 44px;
}
.wc-block-checkout .wc-block-components-checkbox label,
.woocommerce-checkout .wc-block-components-checkbox label {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .form-row input.input-text,
.wc-block-checkout .form-row select,
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select {
  min-height: 44px;
}

/**
 * General WooCommerce components
 */
/**
 * Header cart
 */
.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
}
.site-header-cart .cart-contents {
  text-decoration: none;
}
.site-header-cart .widget_shopping_cart {
  display: none;
}
.site-header-cart .product_list_widget {
  margin: 0;
  padding: 0;
}

/**
 * Star rating — la forma vive en `_states-and-modules.scss`.
 * Aquí no se pinta nada: esta copia usaba la fuente `star` del plugin
 * y, sin ella, escribía «SSSSS».
 */
/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.woocommerce-tabs ul.tabs li {
  display: block;
  margin: 0;
  position: relative;
}
.woocommerce-tabs ul.tabs li a {
  padding: 1em 0;
  display: block;
}
.woocommerce-tabs .panel h2:first-of-type {
  margin-bottom: 1em;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
  text-align: right;
}
.woocommerce-password-strength.strong {
  color: #0f834d;
}
.woocommerce-password-strength.short {
  color: #e2401c;
}
.woocommerce-password-strength.bad {
  color: #e2401c;
}
.woocommerce-password-strength.good {
  color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
  box-shadow: inset 2px 0 0 #0f834d;
}
.form-row.woocommerce-invalid input.input-text {
  box-shadow: inset 2px 0 0 #e2401c;
}

.required {
  color: #f00;
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: #0f834d;
  clear: both;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  background-color: #3d9cd2;
}

.woocommerce-error {
  background-color: #e2401c;
}

.demo_store {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 1em;
  background-color: #3d9cd2;
  z-index: 9999;
}

@media screen and (min-width: 48em) {
  /**
   * Header cart
   */
  .site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999999;
    left: -999em;
    display: block;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  }
  .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart {
    left: 0;
    display: block;
  }
}
/* =============================================
   AVISOS DE WOOCOMMERCE — REDISEÑO 1 oct
   =============================================

   Los de antes eran una caja beis a sangre con una raya de color en
   el filo izquierdo. Sam: «son horribles». Lo son por una razón
   concreta: una banda de color pegada al borde de un rectángulo plano
   es el lenguaje de un panel de administración, no el de una tienda
   donde todo lo demás son tarjetas con aire.

   LO QUE SE COPIA DE APPLE, Y LO QUE NO
   -------------------------------------
   De sus avisos se copia la ESTRUCTURA, que es lo que los hace
   legibles: una pieza suelta y redondeada que flota sobre la página,
   el icono metido en un círculo de color tenue a la izquierda, el
   texto al lado y el color solo en el icono. Nunca el fondo entero
   teñido: un bloque rojo grita, un punto rojo señala.

   No se copia su sombra larga ni su desenfoque de fondo. Esta web es
   mate y de papel; una tarjeta flotando con `backdrop-filter` encima
   de una fotografía de bodegón se ve prestada de otro sistema.

   EL ICONO SE PINTA SIN TOCAR EL MARCADO
   --------------------------------------
   WooCommerce imprime estos avisos y no deja meterles un `<svg>`
   dentro sin reescribir media plantilla. Así que el círculo es un
   `::before` y el glifo una máscara SVG encima: el color sale de
   `currentColor` y cada tipo solo cambia una variable.
   ============================================= */
.woocommerce-notices-wrapper {
  max-width: var(--sgf-container, 1280px);
  margin-inline: auto;
  padding-inline: var(--sgf-space-6);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  --sgf-aviso-color: var(--sgf-color-accent);
  --sgf-aviso-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='16.5' r='.5' fill='black' stroke='none'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sgf-space-3);
  row-gap: var(--sgf-space-2);
  margin: 0 0 var(--sgf-space-4);
  padding: var(--sgf-space-4);
  list-style: none;
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-border);
  border-radius: var(--sgf-radius-foto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-sm);
  line-height: 1.5;
  color: var(--sgf-color-text);
  /* EL ICONO SON DOS CAPAS, Y TIENEN QUE SERLO
     ------------------------------------------
     Lo escribí primero en un solo `::before`: el círculo con un
     `background-color` tenue y encima la máscara del glifo. No
     funciona, y en pantalla se ve por qué: la máscara recorta TODO
     el elemento, fondo incluido, así que no queda un glifo dentro de
     un círculo —queda solo el glifo, y encima el segundo
     `background-color` pisa al primero—. Medido: una raya ámbar de
     dos píxeles donde tenía que haber un círculo.

     Son dos capas porque son dos cosas: el círculo tenue y el trazo
     opaco. `::before` pinta el círculo, `::after` el glifo, y las
     dos ocupan la MISMA celda de la rejilla —misma fila, misma
     columna— así que se superponen sin márgenes negativos.

     `grid-row: 1 / -1` con `align-self: start` para que el icono se
     quede arriba aunque el aviso tenga tres líneas: centrado
     verticalmente en un párrafo largo parece suelto. */
}
.woocommerce-message::before, .woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after {
  content: "";
  display: block;
  grid-column: 1;
  grid-row: 1/-1;
  align-self: start;
  width: 32px;
  height: 32px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  border-radius: 50%;
  background: color-mix(in srgb, var(--sgf-aviso-color) 14%, transparent);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  /* Si el navegador no entiende máscaras, esta capa se queda en un
     cuadrado del color del aviso encima del círculo. Para evitarlo
     se pinta solo cuando hay soporte: sin máscara, círculo tenue y
     sin glifo, que es menos información pero no una mancha. */
}
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .woocommerce-message::after,
  .woocommerce-info::after,
  .woocommerce-error::after {
    background: var(--sgf-aviso-color);
    mask-image: var(--sgf-aviso-glifo);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 20px 20px;
    -webkit-mask-image: var(--sgf-aviso-glifo);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 20px 20px;
  }
}
.woocommerce-message > *,
.woocommerce-message li,
.woocommerce-info > *,
.woocommerce-info li,
.woocommerce-error > *,
.woocommerce-error li {
  grid-column: 2;
  margin: 0;
  list-style: none;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--sgf-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sgf-color-control);
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
  border-bottom-color: var(--sgf-color-text);
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  grid-column: 2;
  justify-self: start;
  margin: 0;
}

/* El color va SOLO en el icono. El fondo se queda en el de la página
   en los tres casos: lo que cambia entre un aviso y otro es qué
   significa, no cuánto grita. */
.woocommerce-message {
  --sgf-aviso-color: #2e7d4f;
  --sgf-aviso-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.woocommerce-info {
  --sgf-aviso-color: var(--sgf-color-accent);
}

/* El aviso de algo que hay que corregir. En ámbar y no en rojo: el
   rojo dice «se ha roto», y lo que casi siempre pasa aquí es que
   falta un carácter en una contraseña. El rojo se guarda para cuando
   algo se pierde de verdad. */
.woocommerce-error {
  --sgf-aviso-color: #e3b341;
}
.woocommerce-error ul {
  margin: 0;
  padding: 0;
  grid-column: 2;
}

/* =============================================
   LAYOUT DE CATALOGO

   Ancho completo del viewport menos 48px de gutter.
   Sin max-width: el catalogo respira en horizontal.
   ============================================= */
.sgf-site-main--woo {
  max-width: none;
  margin: 0;
  padding-inline: var(--sgf-gutter);
  padding-block: var(--sgf-space-7) var(--sgf-space-12);
}
@media (max-width: 767px) {
  .sgf-site-main--woo {
    padding-inline: var(--sgf-space-3);
    padding-block: var(--sgf-space-4) var(--sgf-space-9);
  }
}

/* Cabecera de catalogo: titulo + contador a la izquierda,
   control de orden a la derecha. */
.sgf-site-main--woo .woocommerce-products-header {
  margin: 0 0 var(--sgf-space-6);
}
@media (max-width: 767px) {
  .sgf-site-main--woo .woocommerce-products-header {
    margin-bottom: var(--sgf-space-5);
  }
}

.sgf-site-main--woo .woocommerce-products-header__title,
.sgf-site-main--woo .page-title {
  font-size: var(--sgf-text-xl);
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0;
}

.sgf-site-main--woo .woocommerce-breadcrumb {
  font-size: var(--sgf-text-xs);
  line-height: 16px;
  color: var(--sgf-color-muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--sgf-space-2);
}
.sgf-site-main--woo .woocommerce-breadcrumb a {
  color: inherit;
}
.sgf-site-main--woo .woocommerce-breadcrumb a:hover {
  color: var(--sgf-color-text);
}

/* Fila de resultados + orden */
.sgf-site-main--woo .woocommerce-result-count {
  font-size: var(--sgf-text-sm);
  color: var(--sgf-color-muted);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.sgf-site-main--woo .woocommerce-ordering {
  float: none;
  margin: 0;
}
.sgf-site-main--woo .woocommerce-ordering select {
  font-family: inherit;
  font-size: var(--sgf-text-base);
  font-weight: 500;
  color: var(--sgf-color-text);
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
  border: 0;
  padding: var(--sgf-space-1) 0;
  cursor: pointer;
}

/* ─── Dos columnas: filtros + catalogo ──────────────────────── */
.sgf-shop-layout {
  display: grid;
  grid-template-columns: var(--sgf-sidebar-width) minmax(0, 1fr);
  column-gap: var(--sgf-sidebar-gap);
  align-items: start;
  padding-top: var(--sgf-space-5);
  transition: grid-template-columns var(--sgf-duration-drawer) var(--sgf-ease-drawer), column-gap var(--sgf-duration-drawer) var(--sgf-ease-drawer);
}
@media (max-width: 1023px) {
  .sgf-shop-layout {
    grid-template-columns: minmax(0, 1fr);
    transition: none;
  }
}
.sgf-shop-layout {
  /* OCULTAR FILTROS COLAPSA LA VARIABLE, NO UNA COLUMNA FIJA — 29 sep
     ----------------------------------------------------------------
     Esto decía `grid-template-columns: 0px minmax(0, 1fr)`, que da por
     hecho que el sidebar es la PRIMERA columna. Con el sidebar a la
     derecha las columnas van al revés, así que al ocultar los filtros
     se colapsaba la columna del CATÁLOGO: medido, `0px 913px`. Las
     tarjetas seguían en el DOM con ancho cero — no «desaparecían»,
     quedaban aplastadas, que es peor de diagnosticar.

     Ahora se pone a cero la variable que ya existía. Cada variante
     declara en qué orden van sus columnas y todas colapsan bien, sin
     que esta regla tenga que saber cuántas variantes hay. */
}
.sgf-shop-layout.sgf-shop-layout--filters-off {
  --sgf-sidebar-width: 0px;
  column-gap: 0;
}
.sgf-shop-layout.sgf-shop-layout--filters-off > #sgf-filter-sidebar {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  /* Sale por su lado: a la izquierda por defecto, y a la
     derecha cuando ese es su sitio. Salir por el lado
     contrario se lee como un salto, no como un cierre. */
  transform: translateX(-100%);
}
.sgf-shop-layout {
  /* La primera pintura, si la pestaña ya tenía los filtros cerrados,
     no debe recitar el cierre. */
}
.sgf-shop-layout.sgf-shop-layout--instant {
  transition: none;
}
.sgf-shop-layout.sgf-shop-layout--instant > #sgf-filter-sidebar {
  transition: none;
}
.sgf-shop-layout > #sgf-filter-sidebar {
  min-width: 0;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--sgf-duration-ui) var(--sgf-ease-out), transform var(--sgf-duration-drawer) var(--sgf-ease-drawer);
}

.sgf-shop-layout__filters {
  position: sticky;
  top: calc(var(--sgf-header-primary) + var(--sgf-space-4));
  max-height: calc(100vh - var(--sgf-header-primary) - var(--sgf-space-7));
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (max-width: 1023px) {
  .sgf-shop-layout__filters {
    display: none;
  }
}

.sgf-shop-layout__main {
  min-width: 0;
}

/* Barra superior del catalogo */
.sgf-shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sgf-space-4);
  margin-bottom: var(--sgf-space-4);
}

/* ─── Sidebar de filtros ─────────────────────────────────────
   Solo tipografia y separadores. Sin cajas, sin pildoras,
   sin fondo gris. */
.sgf-filters {
  font-size: var(--sgf-text-base);
}

.sgf-filters__list {
  margin: 0 0 var(--sgf-space-5);
  padding: 0;
  list-style: none;
}
.sgf-filters__list li {
  margin: 0;
}
.sgf-filters__list a {
  display: block;
  padding-block: var(--sgf-space-1);
  font-size: var(--sgf-text-base);
  line-height: 24px;
  color: var(--sgf-color-text);
}
.sgf-filters__list a:hover {
  color: var(--sgf-color-muted);
}
.sgf-filters__list .is-active > a {
  font-weight: 500;
}

.sgf-filters__group {
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-filters__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sgf-space-3) 0;
  font-family: inherit;
  font-size: var(--sgf-text-base);
  font-weight: 400;
  line-height: 24px;
  color: var(--sgf-color-text);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.sgf-filters__toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-filters__toggle[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.sgf-filters__panel {
  padding-bottom: var(--sgf-space-3);
}
.sgf-filters__panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sgf-filters__toggle svg {
    transition: none;
  }
}
/* Etiqueta del control de orden */
.sgf-site-main--woo .woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-1);
}

.sgf-sort-label {
  font-size: var(--sgf-text-base);
  font-weight: 500;
  color: var(--sgf-color-text);
}

/* ─── La medida de lectura no aplica a WooCommerce ───────────
   .sgf-entry__content > * queda limitado a 68ch, que es la medida
   correcta para texto corrido. Pero el carrito, la caja, la cuenta y
   el pedido recibido salen como hijos directos de ese contenedor y no
   son prosa: son interfaces, y cada una fija su propio ancho.

   Sin esto quedaban encajonadas en 605px y pegadas a la izquierda,
   con media pantalla vacia al lado. */
.sgf-entry__content > .woocommerce,
.sgf-entry__content > .wp-block-woocommerce-cart,
.sgf-entry__content > .wp-block-woocommerce-checkout,
.sgf-entry__content > .sgf-checkout-steps,
.sgf-entry__content > .sgf-checkout-intro,
.sgf-entry__content > .sgf-checkout-assurances {
  max-width: none;
}

/**
 * WooCommerce widgets
 */
/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
  margin-bottom: 1.5em;
}
.widget_price_filter .price_slider_amount {
  text-align: right;
  line-height: 2.4;
}
.widget_price_filter .price_slider_amount .button {
  float: left;
}
.widget_price_filter .ui-slider {
  position: relative;
  text-align: left;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: ew-resize;
  outline: none;
  background: var(--sgf-color-accent);
  box-sizing: border-box;
  margin-top: -0.25em;
  opacity: 1;
}
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
  margin-left: -1em;
}
.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  display: block;
  border: 0;
  background: var(--sgf-color-accent);
}
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider-horizontal {
  height: 0.5em;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
  height: 100%;
}

/**
 * Shop filters
 */
/* =============================================
   SGF SHOP FILTERS
   ============================================= */
/* -----------------------------------------------
   FILTER BAR (top — results count + chips + sort)
   ----------------------------------------------- */
.sgf-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sgf-space-4);
  padding-bottom: var(--sgf-space-5);
  flex-wrap: wrap;
}
.sgf-filter-bar__left {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-3);
  flex-wrap: wrap;
  flex: 1;
}
.sgf-filter-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-4);
  flex-shrink: 0;
}
.sgf-filter-bar__results {
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  color: var(--sgf-color-muted);
  white-space: nowrap;
}
.sgf-filter-bar__orderby {
  min-width: 160px;
}
.sgf-filter-bar__sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sgf-space-2);
  height: 40px;
  padding-inline: var(--sgf-space-4);
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: var(--sgf-radius-pill);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .sgf-filters-ready .sgf-filter-bar__sidebar-toggle {
    display: inline-flex;
  }
}
.sgf-filter-bar__sidebar-toggle {
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-filter-bar__sidebar-toggle:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-filter-bar__sidebar-toggle:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
.sgf-filter-bar__sidebar-toggle svg {
  display: block;
  flex-shrink: 0;
}
.sgf-filter-bar__mobile-toggle {
  display: none;
  align-items: center;
  gap: var(--sgf-space-2);
  font-size: var(--sgf-text-xs);
  position: relative;
  /* Solo cuando shop-filters.js ha arrancado: si no, seria un
     boton que abre un cajon vacio. */
}
@media (max-width: 1023px) {
  .sgf-filters-ready .sgf-filter-bar__mobile-toggle {
    display: inline-flex;
  }
}
.sgf-filter-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  border-radius: 8px;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  font-size: 10px;
  font-family: var(--sgf-font-body);
  font-weight: 600;
}

/* -----------------------------------------------
   ACTIVE FILTER CHIPS
   ----------------------------------------------- */
.sgf-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sgf-space-2);
}
.sgf-filter-chips:empty {
  display: none;
}

.sgf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 12px;
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: var(--sgf-radius-pill);
  cursor: pointer;
  appearance: none;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-filter-chip:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-filter-chip:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
.sgf-filter-chip__label {
  line-height: 1;
}
.sgf-filter-chip {
  /* La cruz va fija a 10px. El svg global lleva max-width:100%
     y, sin esto, se hincha al ancho del botón. */
}
.sgf-filter-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--sgf-color-muted);
}
.sgf-filter-chip__remove svg {
  display: block;
  width: 10px;
  height: 10px;
  max-width: none;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-filter-chip:hover .sgf-filter-chip__remove {
    color: var(--sgf-color-text);
  }
}

/* -----------------------------------------------
   FILTER SIDEBAR
   ----------------------------------------------- */
.sgf-filter-sidebar {
  position: sticky;
  top: calc(var(--sgf-nav-height) + var(--sgf-space-6));
  /* En movil su sitio es el cajon, adonde la mueve shop-filters.js.
     Fuera de el se oculta: sin JS las casillas no filtran nada, y
     enseñar controles muertos es peor que no enseñarlos. */
}
@media (max-width: 1023px) {
  .sgf-filter-sidebar {
    display: none;
  }
  .sgf-filter-drawer__body .sgf-filter-sidebar {
    display: block;
    position: static;
    max-height: none;
  }
}
.sgf-filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sgf-space-4);
  border-bottom: 1px solid var(--sgf-color-border);
  margin-bottom: var(--sgf-space-1);
}
.sgf-filter-sidebar__title {
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  color: var(--sgf-color-text);
}

/* «QUITAR TODO» SON DOS COSAS DISTINTAS, Y AHORA SE DICE — 1 oct
   --------------------------------------------------------------
   El mismo texto existe dos veces en la tienda: en la cabecera de la
   barra lateral y en el pie del cajón del móvil. Compartían clase, así
   que esta regla —pensada para el primero— se colaba en el segundo y
   le ganaba a su variante de botón: salía un texto de 12px dentro de
   una píldora de 48. De ahí el hallazgo de «existe dos veces con dos
   diseños»: no eran dos decisiones, era una filtración.

   El de la barra lateral es un ENLACE: va en la cabecera, junto a
   «Filtrar», y compite con los filtros mismos por la atención; una
   píldora ahí pesaría más que lo que ordena. El del cajón es un BOTÓN:
   está en el pie, al lado de «Ver resultados», y los dos son las
   salidas del cajón.

   Por eso se acota al aside. No se pasa a `.sgf-btn--text` porque esa
   variante es de 16px y esto son 12: convertirlo cambiaría el peso de
   la cabecera de filtros, y eso es una decisión de diseño que no toca
   aquí. Lo que sí tocaba era que una no pisara a la otra. */
.sgf-filter-sidebar .sgf-filter-clear-all {
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  color: var(--sgf-color-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--sgf-duration-fast);
}
.sgf-filter-sidebar .sgf-filter-clear-all:hover {
  color: var(--sgf-color-text);
}

/* -----------------------------------------------
   FILTER GROUPS (accordion)
   ----------------------------------------------- */
/* Ritmo de la barra de filtros
   ----------------------------
   Todo en multiplos de 8, y apretado: 16 arriba y abajo de cada
   grupo, 8 entre el titulo y sus opciones, 8 entre opciones.

   Estaba en 24 de relleno y 16 entre titulo y cuerpo, y con cinco
   grupos eso son casi 200px de aire que empujaban Talla fuera de la
   primera pantalla. Una lista de filtros se recorre entera de un
   vistazo: cuanto mas apretada, mas cabe y menos hay que desplazar. */
.sgf-filter-group {
  border-bottom: 1px solid var(--sgf-color-border);
  padding-block: var(--sgf-space-4);
}
.sgf-filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  color: var(--sgf-color-text);
  cursor: pointer;
}
.sgf-filter-group__toggle:hover {
  color: var(--sgf-color-text);
}
.sgf-filter-group__chevron {
  flex-shrink: 0;
  transition: transform var(--sgf-duration-fast);
}
.sgf-filter-group__toggle[aria-expanded=false] .sgf-filter-group__chevron {
  transform: rotate(-90deg);
}
.sgf-filter-group__body {
  margin-top: var(--sgf-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-3);
  padding-bottom: var(--sgf-space-1);
  overflow: hidden;
}
.sgf-filter-group__body.is-collapsed {
  display: none;
}

/* Dos columnas, como Pas Normal. El check es una marca, no un botón. */
.sgf-filter-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-2);
  /* Las opciones son `label`, y el `label` global lleva
     `margin-bottom` porque en un campo normal la etiqueta va encima
     del input. Aquí el label ES la fila entera, así que ese margen no
     separa nada: se SUMA al `gap` —dentro de un grid los márgenes no
     colapsan— y 8 + 8 daban 16. El hueco lo manda el `gap` y nadie
     más; si mañana se cambia, se cambia en un sitio. */
}
.sgf-filter-options > * {
  margin-block: 0;
}
.sgf-filter-options--stack {
  grid-template-columns: 1fr;
}

.sgf-filter-count {
  color: var(--sgf-color-muted);
  font-size: 10px;
  margin-left: var(--sgf-space-1);
}

/* -----------------------------------------------
   PRICE RANGE SLIDER
   ----------------------------------------------- */
.sgf-price-range__track {
  position: relative;
  height: 20px;
  background: transparent;
  margin-block: var(--sgf-space-3);
}
.sgf-price-range__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--sgf-color-border);
  border-radius: 2px;
}
.sgf-price-range__fill {
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--sgf-color-text);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.sgf-price-range__input {
  position: absolute;
  width: 100%;
  height: 20px;
  top: 50%;
  left: 0;
  margin: 0;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.sgf-price-range__input--min {
  z-index: 2;
}
.sgf-price-range__input--max {
  z-index: 3;
}
.sgf-price-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sgf-color-bg);
  border: 2px solid var(--sgf-color-text);
  pointer-events: all;
  cursor: pointer;
  position: relative;
}
.sgf-price-range__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sgf-color-bg);
  border: 2px solid var(--sgf-color-text);
  pointer-events: all;
  cursor: pointer;
}
.sgf-price-range__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  color: var(--sgf-color-muted);
  margin-top: var(--sgf-space-2);
}

/* -----------------------------------------------
   COLOR SWATCHES
   ----------------------------------------------- */
.sgf-filter-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgf-space-2);
}

.sgf-swatch {
  cursor: pointer;
}
.sgf-swatch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sgf-swatch__dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--sgf-duration-fast);
}
input:checked + .sgf-swatch__dot {
  outline-color: var(--sgf-color-text);
}
.sgf-swatch:hover .sgf-swatch__dot {
  outline-color: var(--sgf-color-border);
}

/* -----------------------------------------------
   MOBILE FILTER DRAWER
   ----------------------------------------------- */
.sgf-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--sgf-z-modal, 900);
  pointer-events: none;
  visibility: hidden;
}
.sgf-filter-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.sgf-filter-drawer__overlay {
  position: absolute;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.5);
  opacity: 0;
  transition: opacity var(--sgf-duration-ui) var(--sgf-ease-out);
}
.sgf-filter-drawer.is-open .sgf-filter-drawer__overlay {
  opacity: 1;
}
.sgf-filter-drawer__panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--sgf-color-bg);
  border-right: 1px solid var(--sgf-color-border);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--sgf-duration-drawer) var(--sgf-ease-drawer);
  overflow: hidden;
}
.sgf-filter-drawer.is-open .sgf-filter-drawer__panel {
  transform: translateX(0);
}
.sgf-filter-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sgf-space-5) var(--sgf-space-6);
  border-bottom: 1px solid var(--sgf-color-border);
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  flex-shrink: 0;
}
.sgf-filter-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sgf-color-muted);
  padding: var(--sgf-space-1);
}
.sgf-filter-drawer__close:hover {
  color: var(--sgf-color-text);
}
.sgf-filter-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sgf-space-4) var(--sgf-space-6);
}
.sgf-filter-drawer__foot {
  display: flex;
  gap: var(--sgf-space-3);
  padding: var(--sgf-space-4) var(--sgf-space-6);
  border-top: 1px solid var(--sgf-color-border);
  flex-shrink: 0;
}
.sgf-filter-drawer__apply {
  flex: 1;
}

/* Prevent body scroll when drawer open */
html.sgf-filter-drawer-open {
  overflow: hidden;
}

/* -----------------------------------------------
   SHOP GRID LOADING STATE
   ----------------------------------------------- */
.sgf-shop__grid.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.sgf-product-card--skeleton {
  pointer-events: none;
}

.sgf-shop__no-results {
  grid-column: 1/-1;
  text-align: center;
  padding-block: var(--sgf-space-16);
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-sm);
  color: var(--sgf-color-muted);
}

/* ESTADO VACIO
   ------------
   Ambos bloques son hijos de la rejilla de productos, asi que llevan
   `grid-column: 1 / -1` o se meterian en la primera columna y
   quedarian como una tarjeta estrecha y rara.

   El aire de arriba es generoso y el de abajo no: lo que viene debajo
   son las sugerencias, y tienen que leerse como parte de la misma
   respuesta, no como otra seccion. */
.sgf-shop__empty {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sgf-space-3);
  padding-block: var(--sgf-space-12) var(--sgf-space-7);
  text-align: center;
}

.sgf-shop__empty-title {
  margin: 0;
  font-family: var(--sgf-font-display);
  font-size: var(--sgf-text-xl);
  line-height: 1.25;
  color: var(--sgf-color-text);
}

.sgf-shop__empty-body {
  /* Medida de lectura y centrado de la CAJA, no solo de las lineas:
     un parrafo mas estrecho que su contenedor se queda pegado a la
     izquierda por mucho `text-align: center` que tenga. */
  max-width: 44ch;
  margin: 0 auto;
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-sm);
  line-height: 1.6;
  color: var(--sgf-color-muted);
}

.sgf-shop__empty-clear {
  margin-top: var(--sgf-space-2);
}

.sgf-shop__suggestions {
  grid-column: 1/-1;
  border-top: 1px solid var(--sgf-color-border);
  padding-top: var(--sgf-space-7);
}

.sgf-shop__suggestions-title {
  margin: 0 0 var(--sgf-space-5);
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sgf-color-muted);
}

/* Mismo hueco que el catalogo: las sugerencias son productos, y si se
   pintan con otra separacion se leen como otra cosa. */
.sgf-shop__suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sgf-grid-gap);
  row-gap: var(--sgf-row-gap);
}
@media (min-width: 768px) {
  .sgf-shop__suggestions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -----------------------------------------------
   LAYOUT VARIANTS (set by Customizer)
   ----------------------------------------------- */
/* Sidebar right.
   Usa la MISMA variable que la variante por defecto, solo que en la
   otra columna. Antes escribía `240px` a fuego y por eso «Ocultar
   filtros» —que pone la variable a cero— no le afectaba y colapsaba
   la columna equivocada (29 sep). */
.sgf-shop-layout--sidebar-right {
  grid-template-columns: minmax(0, 1fr) var(--sgf-sidebar-width);
}
.sgf-shop-layout--sidebar-right .sgf-filter-sidebar {
  order: 2;
}
.sgf-shop-layout--sidebar-right .sgf-shop__grid-wrap {
  order: 1;
}
.sgf-shop-layout--sidebar-right {
  /* Y se va por la derecha, que es de donde vino. */
}
.sgf-shop-layout--sidebar-right.sgf-shop-layout--filters-off > #sgf-filter-sidebar {
  transform: translateX(100%);
}
@media (max-width: 1023px) {
  .sgf-shop-layout--sidebar-right {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Top bar layout — no sidebar column */
.sgf-shop-layout--top {
  grid-template-columns: 1fr;
}
.sgf-shop-layout--top .sgf-filter-sidebar {
  display: none;
}

/* Drawer only — no sidebar, mobile-style for all viewports */
.sgf-shop-layout--drawer {
  grid-template-columns: 1fr;
}
.sgf-shop-layout--drawer .sgf-filter-sidebar {
  display: none;
}
.sgf-shop-layout--drawer .sgf-filter-bar__mobile-toggle {
  display: inline-flex;
}
.sgf-shop-layout--drawer { /* always show toggle */ }

/* Sticky sidebar modifier */
.sgf-filter-sidebar--sticky {
  position: sticky;
  top: calc(var(--sgf-nav-height) + var(--sgf-space-6));
  max-height: calc(100vh - var(--sgf-nav-height) - var(--sgf-space-12));
  overflow-y: auto;
  /* Sin barra de scroll a la vista.
     Estaba dibujada a proposito —3px, gris— pero se pinta pegada al
     borde derecho de la columna, justo entre los filtros y la
     rejilla, y ahi lee como un separador que no existe. La columna
     sigue desplazandose igual: solo desaparece el rail. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sgf-filter-sidebar--sticky::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* -----------------------------------------------
   FILA DE CATEGORIAS

   Navegacion del catalogo, no un filtro: va a todo el ancho, encima
   de la rejilla de dos columnas, y NO se esconde en el cajon. En
   movil es lo unico que permite cambiar de seccion sin abrir nada.
   ----------------------------------------------- */
.sgf-catalog-nav {
  margin-bottom: 0;
  border-top: 1px solid var(--sgf-color-border);
  border-bottom: 1px solid var(--sgf-color-border);
}
@media (max-width: 767px) {
  .sgf-catalog-nav {
    margin-inline: calc(var(--sgf-space-3) * -1);
    padding-inline: var(--sgf-space-3);
  }
}

.sgf-catalog-nav__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sgf-space-4);
  min-height: 48px;
  padding: 14px 0;
}
@media (max-width: 1023px) {
  .sgf-catalog-nav__meta {
    grid-template-columns: 1fr auto;
  }
}

.sgf-catalog-nav__padres {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.sgf-catalog-nav__count {
  margin: 0;
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sgf-color-text);
  white-space: nowrap;
  text-align: center;
}

.sgf-catalog-nav__acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sgf-space-3);
}
@media (max-width: 1023px) {
  .sgf-catalog-nav__acciones {
    display: none;
  }
}

.sgf-catalog-nav__padre {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sgf-color-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-catalog-nav__padre:hover {
  color: var(--sgf-color-text);
}
.sgf-catalog-nav__padre.is-current {
  color: var(--sgf-color-text);
  font-weight: 500;
}
.sgf-catalog-nav__padre.is-proximamente {
  color: var(--sgf-color-muted);
  cursor: default;
}
.sgf-catalog-nav__padre.is-proximamente:hover {
  color: var(--sgf-color-muted);
}

.sgf-catalog-nav__pronto {
  font-family: var(--sgf-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--sgf-tracking-wider);
  text-transform: uppercase;
  color: var(--sgf-color-muted);
  opacity: 0.72;
}

.sgf-catalog-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  min-width: 100%;
}
@media (max-width: 767px) {
  .sgf-catalog-nav__list {
    gap: var(--sgf-space-4);
  }
}

.sgf-catalog-thumbs {
  margin: 0 0 var(--sgf-space-5);
  padding: 0 0 14px;
  border-bottom: 1px solid var(--sgf-color-border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sgf-catalog-thumbs::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .sgf-catalog-thumbs {
    margin-inline: calc(var(--sgf-space-3) * -1);
    margin-bottom: var(--sgf-space-4);
    padding: 0 var(--sgf-space-3) 14px;
  }
}

.sgf-catalog-nav__item {
  flex: none;
}

.sgf-catalog-nav__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 0;
  margin: 0;
  font-family: var(--sgf-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: var(--sgf-color-muted);
  text-decoration: none;
  transition: color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-catalog-nav__link:hover {
  color: var(--sgf-color-text);
}
.sgf-catalog-nav__link.is-current {
  color: var(--sgf-color-text);
  font-weight: 500;
}

.sgf-catalog-nav__img,
.sgf-catalog-nav__ph,
.sgf-catalog-nav__todo {
  display: block;
  width: 40px;
  height: 48px;
  object-fit: contain;
  /* EL MISMO REDONDEO QUE LA FICHA DE PRODUCTO — 1 oct
     -------------------------------------------------
     Aquí ponía «radio 0, como todo lo demás», y daba por medido que
     las tarjetas de producto estaban a 0. No lo estaban: llevan 8px
     desde hace días, escritos a pelo en `_cards.scss`. O sea que el
     comentario describía un sitio que ya había cambiado, y la tira de
     categorías se quedó sola con la esquina viva.

     Ese es el fallo de verdad: copiar un valor de otro componente «a
     ojo» y escribir el porqué en prosa. Cuando el otro cambia, la
     prosa miente y nadie se entera. Ahora las dos leen el token, que
     no se puede desincronizar. */
  border-radius: var(--sgf-radius-foto);
  background: var(--sgf-color-surface);
  flex: none;
}

/* «TODO»: EL HUECO QUE QUITA EL FILTRO — 1 oct
   ============================================
   Ocupa el mismo cuadro que las demás para que la fila no baile, pero
   va SIN foto y a propósito. No es una categoría más: es quitar el
   filtro. Ponerle una botella lo disfrazaría de sexta categoría y
   obligaría a leer el nombre para entender que no lo es.

   Así que lo que se ve es un marco vacío. La forma dice lo que hace:
   donde las otras tienen producto, esta no tiene nada, que es
   exactamente lo que significa no filtrar. */
.sgf-catalog-nav__todo {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sgf-color-border);
  transition: box-shadow var(--sgf-duration-fast) var(--sgf-ease-out);
}

.sgf-catalog-nav__link--todo:hover .sgf-catalog-nav__todo {
  box-shadow: inset 0 0 0 1px var(--sgf-color-text);
}
.sgf-catalog-nav__link--todo {
  /* EL ACTIVO NO SE RELLENA — 1 oct
     La primera versión rellenaba el marco con `--sgf-color-surface`
     al estar activo. En pantalla se veía el fallo: una categoría SIN
     foto —«Blancos» hoy— pinta `.sgf-catalog-nav__ph`, que es
     exactamente ese mismo bloque beis. O sea que «Todo» activo y una
     categoría a la que no le ha cargado la imagen eran la misma cosa.

     Vacío siempre. Que esté elegido lo dice la etiqueta, que es como
     lo dicen TODAS las demás: ninguna cambia su foto al estar activa,
     solo el nombre se pone oscuro y un poco más grueso. */
}
.sgf-catalog-nav__link--todo.is-current .sgf-catalog-nav__todo {
  box-shadow: inset 0 0 0 1px var(--sgf-color-text);
}

.sgf-catalog-nav__name {
  display: block;
  max-width: 100%;
}

/* Imagen arriba, texto debajo. La grande es para que una botella se lea. */
.sgf-catalog-thumbs--arriba .sgf-catalog-nav__list,
.sgf-catalog-thumbs--grande .sgf-catalog-nav__list {
  align-items: flex-start;
}
.sgf-catalog-thumbs--arriba .sgf-catalog-nav__link,
.sgf-catalog-thumbs--grande .sgf-catalog-nav__link {
  flex-direction: column;
  align-items: center;
  gap: var(--sgf-space-2);
  text-align: center;
  white-space: normal;
}

.sgf-catalog-thumbs--arriba .sgf-catalog-nav__img,
.sgf-catalog-thumbs--arriba .sgf-catalog-nav__ph,
.sgf-catalog-thumbs--arriba .sgf-catalog-nav__todo {
  width: 72px;
  height: 86px;
}
.sgf-catalog-thumbs--arriba .sgf-catalog-nav__name {
  max-width: 72px;
}

/* LA GRANDE LLENA SU COLUMNA — 29 sep
   -----------------------------------
   La botella tenia un ancho fijo de 110px dentro de una celda mas
   ancha: quedaba flotando con aire a los dos lados y la fila no se
   leia como una reticula.

   OJO CON EL 100% AQUI. `.sgf-catalog-nav__list` es `width:
   max-content` —es un carrusel horizontal— y el `<li>` va con `flex:
   none`, asi que un `width: 100%` a secas en la imagen se resuelve
   contra la tira ENTERA: medido, 3000px. El ancho hay que darselo a la
   COLUMNA; la imagen llena esa columna, no la tira.

   El ancho es un token para que un theme hijo lo cambie sin tocar el
   padre, que es justo lo que el hijo tiene que poder hacer.

   Y el nombre se alinea a la IZQUIERDA, no centrado: el ojo baja por
   un unico borde al recorrer la fila en lugar de saltar al centro de
   cada texto. Con nombres de una y de tres palabras —«Tempranillo» y
   «Cabernet Sauvignon Reserva»— el centrado descoloca la lectura. */
.sgf-catalog-thumbs--grande {
  --sgf-catalog-thumb-w: clamp(120px, 14vw, 168px);
}
.sgf-catalog-thumbs--grande .sgf-catalog-nav__item {
  width: var(--sgf-catalog-thumb-w);
}
.sgf-catalog-thumbs--grande .sgf-catalog-nav__link {
  align-items: stretch;
  text-align: left;
  white-space: normal;
}
.sgf-catalog-thumbs--grande .sgf-catalog-nav__img,
.sgf-catalog-thumbs--grande .sgf-catalog-nav__ph,
.sgf-catalog-thumbs--grande .sgf-catalog-nav__todo {
  width: 100%;
  height: auto;
  /* Cuadrada. Estaba en 110/132 —la proporcion de la version
     fija— y Sam la quiere 1:1: una fila de cuadrados da una
     retícula mas tranquila que una de rectangulos altos, y la
     botella se centra sola dentro del cuadro. */
  aspect-ratio: 1/1;
}
.sgf-catalog-thumbs--grande .sgf-catalog-nav__name {
  max-width: 100%;
  text-align: left;
}

/* -----------------------------------------------
   BARRA DE FILTROS EN MOVIL

   En escritorio la barra es discreta: los filtros estan a la
   izquierda y aqui solo quedan los chips y el orden. En movil los
   filtros no estan a la vista, asi que la barra pasa a ser la unica
   entrada: dos pildoras del tamaño de un dedo.
   ----------------------------------------------- */
@media (max-width: 1023px) {
  .sgf-filter-bar {
    gap: var(--sgf-space-2);
    padding-bottom: 0;
    margin-bottom: var(--sgf-space-5);
  }
  .sgf-filter-bar__left, .sgf-filter-bar__right {
    gap: var(--sgf-space-2);
  }
  .sgf-filter-bar {
    /* El recuento vive en la fila de categorias. */
  }
  /* La pildora de filtrar. El orden comparte piel con
     «Ocultar filtros»: esa regla vive abajo, fuera del media,
     para que no vuelva a salir esquinada en escritorio. */
  .sgf-filter-bar__mobile-toggle {
    height: 40px;
    padding-inline: var(--sgf-space-4);
    font-family: var(--sgf-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: var(--sgf-color-bg);
    color: var(--sgf-color-text);
    border: 1px solid var(--sgf-color-control);
    border-radius: var(--sgf-radius-pill);
    transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
  }
  .sgf-filter-bar__mobile-toggle:focus-visible {
    outline: 2px solid var(--sgf-color-text);
    outline-offset: 2px;
  }
}
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  .sgf-filter-bar__mobile-toggle:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
@media (max-width: 1023px) {
  .sgf-filter-bar__orderby {
    min-width: 0;
    max-width: 190px;
  }
}
@media (max-width: 1023px) {
  /* El numero de filtros activos, dentro de la pildora. */
  .sgf-filter-bar__count {
    background: var(--sgf-color-text);
    color: var(--sgf-color-bg);
  }
  /* Los chips ocupan su propia fila: en 375px no caben al lado de
     las pildoras sin partirlas. */
  .sgf-filter-chips {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .sgf-filter-chips::-webkit-scrollbar {
    display: none;
  }
  .sgf-filter-chips:empty {
    display: none;
  }
}
/* -----------------------------------------------
   CAJON DE FILTROS — hoja inferior en movil

   Sube desde abajo, no desde el lado: el pulgar esta abajo, y el
   boton "Ver resultados" queda donde la mano ya esta.
   ----------------------------------------------- */
@media (max-width: 1023px) {
  .sgf-filter-drawer__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    border-right: 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    background: var(--sgf-color-bg);
    border-radius: 0;
    transform: translateY(100%);
    transition: transform var(--sgf-duration-drawer) var(--sgf-ease-out);
  }
  .sgf-filter-drawer.is-open .sgf-filter-drawer__panel {
    transform: translateY(0);
  }
  .sgf-filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sgf-space-4);
    border-bottom: 1px solid var(--sgf-color-border);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }
  .sgf-filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sgf-space-4);
  }
  .sgf-filter-drawer__foot {
    display: flex;
    align-items: center;
    gap: var(--sgf-space-3);
    padding: var(--sgf-space-4);
    padding-bottom: calc(var(--sgf-space-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sgf-color-border);
  }
  .sgf-filter-drawer__foot > * {
    flex: 1;
  }
  /* AQUÍ HABÍA DOS VARIANTES COPIADAS A MANO — 1 oct
     ------------------------------------------------
     `.sgf-filter-drawer__apply` reescribía fondo, color, borde,
     radio, tipografía y hover: un `.sgf-btn--primary` entero, pero a
     48px en vez de 56. `.sgf-filter-clear-all` dentro del cajón hacía
     lo mismo con `--secondary`.

     O sea que los dos botones del cajón no se parecían a los del
     resto del sitio, y no por una decisión de diseño: por una copia
     que se quedó a medio camino. Y mientras estuviera aquí, cambiar
     el botón de la casa no los cambiaba a ellos.

     Ahora la variante va en la clase, en `filter-bar.php`, y la
     geometría la pone el componente una sola vez. Aquí abajo solo
     queda lo que de verdad es del cajón: cómo se reparten el ancho,
     que eso sí es del sitio donde viven y no del botón. */
  .sgf-filter-drawer__apply,
  .sgf-filter-drawer .sgf-filter-clear-all {
    flex: 1;
    min-width: 0;
  }
  /* Dentro del cajon la barra lateral ya no necesita su cabecera:
     el titulo y el "quitar todo" los pone el propio cajon. */
  .sgf-filter-drawer__body .sgf-filter-sidebar__header {
    display: none;
  }
}
/* La pagina no se mueve por detras del cajon. */
html.sgf-filter-drawer-open {
  overflow: hidden;
}

/* -----------------------------------------------
   CORRECCIONES SOBRE LA CASCADA
   ----------------------------------------------- */
/* El contador de filtros activos.
   El JS lo apaga con el atributo `hidden`, pero display:inline-flex
   gana a la hoja de usuario del navegador y el atributo deja de hacer
   efecto: quedaba un circulo negro vacio dentro de la pildora aunque
   no hubiera ni un filtro puesto. */
.sgf-filter-bar__count[hidden] {
  display: none;
}

/* La pildora no parte su texto en dos lineas. */
.sgf-filter-bar__mobile-toggle {
  white-space: nowrap;
}

/* El orden es la misma pildora que «Ocultar filtros».
   `.sgf-select` trae radio 2 y fondo gris; `.woocommerce select`
   (cuenta) lo deja a 48px y esquina. Aqui se gana a los dos. */
.sgf-filter-bar .sgf-filter-bar__orderby,
.woocommerce .sgf-filter-bar__orderby {
  display: block;
  width: auto;
  height: 40px;
  min-width: 160px;
  padding: 0 var(--sgf-space-7) 0 var(--sgf-space-4);
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  background-color: var(--sgf-color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sgf-space-3) center;
  background-size: 16px 16px;
  border: 1px solid var(--sgf-color-control);
  border-radius: var(--sgf-radius-pill);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-filter-bar .sgf-filter-bar__orderby:focus-visible,
.woocommerce .sgf-filter-bar__orderby:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-filter-bar .sgf-filter-bar__orderby:hover,
  .woocommerce .sgf-filter-bar__orderby:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
@media (max-width: 1023px) {
  .sgf-filter-bar .sgf-filter-bar__orderby,
  .woocommerce .sgf-filter-bar__orderby {
    min-width: 0;
    max-width: 190px;
  }
}

/* Las tarjetas del catalogo no llevan subrayado.
   Viene del subrayado general de enlaces, que en una rejilla de
   productos convierte cada titulo en un enlace de texto corrido. */
.sgf-shop__grid a,
.sgf-product-card a {
  text-decoration: none;
}
.sgf-shop__grid a:hover .sgf-product-card__title, .sgf-shop__grid a:hover .woocommerce-loop-product__title,
.sgf-product-card a:hover .sgf-product-card__title,
.sgf-product-card a:hover .woocommerce-loop-product__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* El "Quitar todo" del cajon es una pildora, no un enlace: el
   subrayado venia del estilo de enlaces y competia visualmente con
   la accion principal que tiene al lado. */
.sgf-filter-drawer .sgf-filter-clear-all {
  text-decoration: none;
}

/* La tira de miniaturas se ve en escritorio y en móvil. */
/* -----------------------------------------------
   TIPOGRAFIA DE LA BARRA LATERAL

   La misma que la fila de categorias: 16px, peso medio para los
   titulos de grupo y normal para las opciones, en frase. Se lee mucho
   mejor que el cuerpo pequeño que tenia.
   ----------------------------------------------- */
.sgf-filter-sidebar .sgf-filter-group__toggle {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}
.sgf-filter-sidebar .sgf-check {
  position: relative;
  /* `center` desde que se borro el `::before`. El `flex-start`
     existia para alinear aquel pseudo de 18px con la primera
     linea del texto, y llevaba un `margin-top: 2px` para
     cuadrarlo. Sin el, y con etiquetas de una sola linea,
     centrar es lo que deja casilla y texto a la misma altura
     sin ningun ajuste a mano. */
  align-items: center;
  gap: 10px;
  padding-block: 0;
  min-width: 0;
}
.sgf-filter-sidebar {
  /* UNA SOLA IMPLEMENTACION DEL CONTROL — 30 sep
     --------------------------------------------
     Aqui habia una segunda casilla entera: se escondia el `input`
     real y se dibujaba un `::before` de 18px con todos sus estados.
     Unas cien lineas que repetian, con otros valores, lo que ya
     hace `.sgf-check` en components/forms.

     El motivo original está escrito en el comentario que había: la
     casilla NATIVA de Safari pinta un tick mas grande que su caja.
     Cierto — pero el control generico usa `appearance: none`, o
     sea que no hay tick nativo que se desborde: lo dibuja el con un
     SVG. El problema que justificaba la copia ya estaba resuelto
     en el otro sitio.

     Lo que costaba tenerla: cada estado habia que escribirlo dos
     veces y una de las dos se quedaba atras. Paso cinco veces en un
     dia —el circulo del radio, el cajon de movil, los estados del
     checkbox, el foco a 1px contra 2px— y siempre igual: se
     arreglaba en un sitio y el otro seguia mal.

     Ahora el panel solo dice como se COLOCA la casilla. Como se
     DIBUJA lo dice un unico sitio. */
}
.sgf-filter-sidebar .sgf-check__label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}
.sgf-filter-sidebar {
  /* El contador va un peldaño por debajo: acompaña al nombre, no
     compite con el. */
}
.sgf-filter-sidebar .sgf-filter-count {
  font-size: 14px;
  color: var(--sgf-color-muted);
}
.sgf-filter-sidebar .sgf-filter-sidebar__title {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
}
.sgf-filter-sidebar .sgf-filter-clear-all,
.sgf-filter-sidebar .sgf-price-range__label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 1024px) {
  .sgf-filter-bar:not(:has(.sgf-filter-chip)) {
    padding-bottom: 0;
  }
}
/* -----------------------------------------------
   DENSIDAD DE LA REJILLA

   Va al lado de ocultar/mostrar filtros. El orden vive en el aside.
   ----------------------------------------------- */
.sgf-density {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-1);
  /* Por debajo de 1024px la rejilla son dos columnas fijas: no hay
     nada que elegir, asi que el control no se pinta. */
}
@media (max-width: 1023px) {
  .sgf-density {
    display: none;
  }
}

.sgf-density__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--sgf-radius-pill);
  cursor: pointer;
  color: var(--sgf-color-muted);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-density__btn:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.sgf-density__btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-density__btn:hover {
    color: var(--sgf-color-text);
    border-color: var(--sgf-color-control);
  }
}
.sgf-density__btn {
  /* La opcion activa en negro. Es la unica diferencia entre los dos
     iconos, asi que tiene que ser inequivoca. */
}
.sgf-density__btn.is-active {
  color: var(--sgf-color-text);
}

/* La densidad se marca en <html> para que sobreviva a cualquier
   repintado de la rejilla al filtrar. Solo manda en escritorio: por
   debajo, la regla de dos columnas de _products.scss sigue vigente. */
@media (min-width: 1024px) {
  html[data-sgf-grid="5"] .sgf-shop__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: var(--sgf-space-5);
  }
  /* A cinco por fila la tarjeta ronda los 195px en un monitor de
     1440. Se probo con seis y bajaba a 160px: la foto se quedaba
     en nada y solo entraban cinco miniaturas de color. La tira se
     achica un punto y sigue desplazandose si no caben. */
  html[data-sgf-grid="5"] .sgf-colorways--card .sgf-colorway {
    width: 32px;
    height: 32px;
  }
}
/* Las pildoras ya no se usan en filtros: un filtro es una casilla. */
/**
 * Add to cart animation
 */
/* =============================================
   SGF ADD TO CART ANIMATION
   Parabolic fly-to-cart effect.
   Split-axis: outer X linear + inner Y ease-in.
   ============================================= */
/* -----------------------------------------------
   FLYING DOT
   ----------------------------------------------- */
.sgf-fly-outer {
  /* position:fixed is set inline by JS */
  will-change: transform;
}

.sgf-fly-inner {
  will-change: transform;
}

.sgf-fly-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sgf-color-accent);
  background-size: cover;
  background-position: center;
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--sgf-duration-base) var(--sgf-ease-out), opacity var(--sgf-duration-base);
  box-shadow: 0 4px 16px hsla(0, 0%, 0%, 0.2);
  /* When flying: shrinks slightly for perspective feel */
}
.sgf-fly-dot.is-flying {
  transform: translate(-50%, -50%) scale(0.85);
}
.sgf-fly-dot {
  /* When landed: shrinks to nothing */
}
.sgf-fly-dot.is-landed {
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  transition: transform var(--sgf-duration-ui) var(--sgf-ease-out), opacity var(--sgf-duration-ui);
}
.sgf-fly-dot {
  /* If showing product image */
}
.sgf-fly-dot--image {
  border: 2px solid hsla(0, 0%, 100%, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .sgf-fly-outer,
  .sgf-fly-inner,
  .sgf-fly-dot {
    display: none !important;
  }
}
/* -----------------------------------------------
   CART ICON BUMP (lands here)
   ----------------------------------------------- */
@keyframes sgf-cart-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.35);
  }
  55% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.sgf-nav__cart.is-bumping,
.sgf-nav__cart-count.is-bumping {
  animation: sgf-cart-bump var(--sgf-duration-slow) var(--sgf-ease-spring) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sgf-nav__cart.is-bumping,
  .sgf-nav__cart-count.is-bumping {
    animation: none;
  }
}
/* -----------------------------------------------
   BUTTON STATES
   idle → loading (spinner) → success (check)
   ----------------------------------------------- */
/* Spinner keyframe */
@keyframes sgf-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Wrapper needed for icon swap */
.ajax_add_to_cart,
.add_to_cart_button {
  position: relative;
  overflow: hidden;
  /* The button text — fades out during loading/success */
}
.ajax_add_to_cart::before,
.add_to_cart_button::before {
  content: attr(data-default-text);
  /* fallback: button already has text */
}
.ajax_add_to_cart,
.add_to_cart_button {
  /* Loading spinner overlay */
}
.ajax_add_to_cart::after,
.add_to_cart_button::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--sgf-duration-fast);
  pointer-events: none;
}

/* Loading state */
.ajax_add_to_cart.sgf-btn-state--loading,
.add_to_cart_button.sgf-btn-state--loading {
  pointer-events: none;
  opacity: 0.8;
  /* Spinner via outline */
}
.ajax_add_to_cart.sgf-btn-state--loading::after,
.add_to_cart_button.sgf-btn-state--loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 1;
  animation: sgf-btn-spin 0.6s linear infinite;
}
.ajax_add_to_cart.sgf-btn-state--loading,
.add_to_cart_button.sgf-btn-state--loading {
  /* Dim the text */
}
.ajax_add_to_cart.sgf-btn-state--loading .sgf-btn-text,
.ajax_add_to_cart.sgf-btn-state--loading span:not(.sgf-nav__cart-count),
.add_to_cart_button.sgf-btn-state--loading .sgf-btn-text,
.add_to_cart_button.sgf-btn-state--loading span:not(.sgf-nav__cart-count) {
  opacity: 0;
}

/* Success state */
.ajax_add_to_cart.sgf-btn-state--success,
.add_to_cart_button.sgf-btn-state--success {
  pointer-events: none;
  background: hsl(145, 50%, 40%);
  border-color: hsl(145, 50%, 40%);
  color: hsl(0, 0%, 100%);
}
.ajax_add_to_cart.sgf-btn-state--success::after,
.add_to_cart_button.sgf-btn-state--success::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 1;
  animation: none;
}
.ajax_add_to_cart.sgf-btn-state--success .sgf-btn-text,
.ajax_add_to_cart.sgf-btn-state--success span:not(.sgf-nav__cart-count),
.add_to_cart_button.sgf-btn-state--success .sgf-btn-text,
.add_to_cart_button.sgf-btn-state--success span:not(.sgf-nav__cart-count) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ajax_add_to_cart.sgf-btn-state--loading::after {
    animation-duration: 2s;
  }
}
/**
 * CRO — shipping progress, stock indicator, sticky add to cart
 */
/* =============================================
   SGF CRO COMPONENTS
   Free shipping progress · Stock indicator ·
   Sticky add-to-cart bar.
   ============================================= */
/* -----------------------------------------------
   FREE SHIPPING PROGRESS
   Rendered as a WC fragment — the wrapper is always
   present so the fragment selector has a target.
   ----------------------------------------------- */
@keyframes sgf-ship-shine {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.sgf-ship-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-2);
  /* Fragment placeholder — nothing to show */
}
.sgf-ship-progress.is-empty {
  display: none;
}
.sgf-ship-progress {
  /* NI MAYUSCULAS NI MONOESPACIADA.
     ------------------------------
     Llevaba el tratamiento de rotulo tecnico del tema: mono, versales
     y gris. Ese tratamiento sirve para ETIQUETAR algo —«Formas de
     pago»— y aqui no se etiqueta nada: es una frase que se lee, y la
     mejor noticia de la cesta. En versales pesaba mas que el nombre
     del producto que tenia debajo.

     Y en negro, no en gris ni en el color acento: es informacion
     firme, no un aviso. */
}
.sgf-ship-progress__label {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2);
  margin: 0;
  font-family: inherit;
  font-size: var(--sgf-text-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sgf-color-text);
}
.sgf-ship-progress__label svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sgf-ship-progress__track {
  position: relative;
  height: 2px;
  background: var(--sgf-color-border);
  overflow: hidden;
}
.sgf-ship-progress__fill {
  display: block;
  height: 100%;
  background: var(--sgf-color-text);
  transform-origin: left center;
  transition: width var(--sgf-duration-slow) var(--sgf-ease-out), background var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-ship-progress {
  /* --- Threshold reached --- */
}
.sgf-ship-progress.is-reached .sgf-ship-progress__label svg {
  color: #2e7d4f;
}
.sgf-ship-progress.is-reached .sgf-ship-progress__fill {
  position: relative;
  overflow: hidden;
  background: #2e7d4f;
}
.sgf-ship-progress.is-reached .sgf-ship-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.45) 50%, hsla(0, 0%, 100%, 0) 100%);
  animation: sgf-ship-shine var(--sgf-duration-slower) var(--sgf-ease-out) 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sgf-ship-progress__fill {
    transition: none;
  }
  .sgf-ship-progress.is-reached .sgf-ship-progress__fill::after {
    animation: none;
    display: none;
  }
}
/* -----------------------------------------------
   STOCK INDICATOR
   Semantic green/amber are intentional literals —
   availability must read the same in every palette.
   ----------------------------------------------- */
@keyframes sgf-stock-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.sgf-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sgf-space-2);
}
.sgf-stock__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.sgf-stock__label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.sgf-stock {
  /* --- In stock --- */
}
.sgf-stock--in .sgf-stock__dot {
  background: #16a34a;
}
.sgf-stock--in .sgf-stock__label {
  color: var(--sgf-color-muted);
}
.sgf-stock {
  /* --- Low stock (scarcity) --- */
}
.sgf-stock--low .sgf-stock__dot {
  background: var(--sgf-color-accent);
  animation: sgf-stock-pulse 2s ease-in-out infinite;
}
.sgf-stock--low .sgf-stock__label {
  color: var(--sgf-color-accent);
}
.sgf-stock {
  /* --- Out of stock --- */
}
.sgf-stock--out .sgf-stock__dot {
  background: var(--sgf-color-muted);
}
.sgf-stock--out .sgf-stock__label {
  color: var(--sgf-color-muted);
  text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
  .sgf-stock--low .sgf-stock__dot {
    animation: none;
  }
}
/* -----------------------------------------------
   STICKY ADD TO CART BAR
   Hidden until the main form scrolls out of view.
   ----------------------------------------------- */
.sgf-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--sgf-color-bg);
  border-top: 1px solid var(--sgf-color-border);
  /* Hidden state — visibility delayed so the slide-out is seen */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--sgf-duration-base) var(--sgf-ease-out), opacity var(--sgf-duration-base) var(--sgf-ease-out), visibility 0s linear var(--sgf-duration-base);
}
.sgf-sticky-atc.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.sgf-sticky-atc__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sgf-space-4);
  padding-block: var(--sgf-space-3);
}
.sgf-sticky-atc__product {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-3);
  min-width: 0;
}
.sgf-sticky-atc__image {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--sgf-radius-sm);
}
.sgf-sticky-atc__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-1);
  min-width: 0;
}
.sgf-sticky-atc__name {
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-sm);
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sgf-sticky-atc {
  /* El precio NO se estila aqui.
     Estaba a 14px, peso normal y en el naranja de campana, mientras
     en la ficha y en la tarjeta iba a 16/500 en negro: el mismo dato
     cambiaba de aspecto tres veces en la misma pagina. Lo define
     ahora el bloque comun de precios en _products.scss. */
}
.sgf-sticky-atc__action {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-4);
}
.sgf-sticky-atc {
  /* --- Mobile: strip to name + price + button --- */
}
@media (max-width: 639px) {
  .sgf-sticky-atc .sgf-sticky-atc__image {
    display: none;
  }
  .sgf-sticky-atc .sgf-sticky-atc__action .sgf-stock {
    display: none;
  }
  .sgf-sticky-atc .sgf-sticky-atc__name {
    max-width: 16ch;
  }
  .sgf-sticky-atc .sgf-sticky-atc__btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sgf-sticky-atc {
    transition: opacity var(--sgf-duration-base), visibility 0s linear var(--sgf-duration-base);
  }
  .sgf-sticky-atc.is-visible {
    transition-delay: 0s;
  }
}
/**
 * Carrito y checkout de bloques
 */
/* ─── Contenedor ─────────────────────────────────────────────
   OJO: carrito y checkout son PAGINAS, no plantillas de
   WooCommerce. Se pintan por page.php con .sgf-site-main.sgf-page,
   no con .sgf-site-main--woo, asi que las reglas del catalogo no
   les llegan.

   Ademas .sgf-entry lleva el ancho de lectura (~640px) para
   articulos. Blocks decide 1 o 2 columnas midiendo el ancho de SU
   contenedor, no el del viewport: con 640px se quedaba en
   `is-medium` y apilaba el resumen sobre el formulario. */
.woocommerce-cart .sgf-container,
.woocommerce-checkout .sgf-container {
  max-width: 1120px;
}
.woocommerce-cart .sgf-entry,
.woocommerce-cart .sgf-entry__content,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wp-block-woocommerce-checkout,
.woocommerce-checkout .sgf-entry,
.woocommerce-checkout .sgf-entry__content,
.woocommerce-checkout .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
.woocommerce-cart .sgf-site-main,
.woocommerce-checkout .sgf-site-main {
  padding-block: var(--sgf-space-7) var(--sgf-space-12);
}
@media (max-width: 767px) {
  .woocommerce-cart .sgf-site-main,
  .woocommerce-checkout .sgf-site-main {
    padding-block: var(--sgf-space-4) var(--sgf-space-9);
  }
}
.woocommerce-cart,
.woocommerce-checkout {
  /* El titulo de la pagina, con el mismo peso que el del catalogo. */
}
.woocommerce-cart .sgf-entry__title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .sgf-entry__title,
.woocommerce-checkout .entry-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-5);
}

/* EL MISMO BLOQUE ESTABA AQUÍ Y EN `_checkout.scss` — 1 oct
   ---------------------------------------------------------
   Dos ficheros declarando el mismo `padding-block` para la cesta
   vacía, palabra por palabra. Y el de `_checkout.scss` lleva encima un
   comentario explicando que está ahí para ganarle a un TERCER sitio,
   `_states-and-modules.scss`.

   O sea que el aire de una página lo decidían tres reglas y el orden
   de importación. Al centrar el mensaje hacía falta elegir una, y la
   elegida es la de `_checkout.scss`: es la que ya tenía escrito el
   porqué, y dejar la explicación lejos de la regla es cómo se pierden
   las dos. */
.wc-block-cart__totals-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Rejilla principal + resumen ────────────────────────────── */
.wc-block-components-sidebar-layout {
  gap: var(--sgf-space-7);
}
@media (max-width: 1023px) {
  .wc-block-components-sidebar-layout {
    gap: var(--sgf-space-5);
  }
}

.wc-block-components-main {
  padding-right: 0;
}

.wc-block-components-sidebar {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .wc-block-components-sidebar {
    flex-basis: 380px;
    max-width: 380px;
  }
}

/* El resumen es una columna con línea, no una tarjeta gris. */
.wc-block-components-order-summary,
.wc-block-cart__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

@media (min-width: 1024px) {
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar {
    padding-left: var(--sgf-space-7);
    border-left: 1px solid var(--sgf-color-border);
  }
}
/* ─── Tipografía y totales ───────────────────────────────────── */
.wc-block-components-title {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}

.wc-block-components-totals-item {
  font-size: 14px;
  line-height: 20px;
  padding-block: var(--sgf-space-2);
}

.wc-block-components-totals-item__label {
  color: var(--sgf-color-muted);
}

.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
  font-variant-numeric: tabular-nums;
  color: var(--sgf-color-text);
}

.wc-block-components-totals-footer-item {
  font-size: 16px;
  font-weight: 500;
  padding-top: var(--sgf-space-3);
  margin-top: var(--sgf-space-2);
}

.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--sgf-color-border);
  padding-block: var(--sgf-space-3);
}
.wc-block-components-totals-wrapper::after {
  display: none;
}
.wc-block-components-totals-wrapper { /* el separador propio de Woo */ }

/* ─── Líneas de producto ─────────────────────────────────────── */
.wc-block-cart-items,
.wc-block-components-order-summary__content {
  border: 0;
}

.wc-block-cart-items__row,
.wc-block-components-order-summary-item {
  border-top: 1px solid var(--sgf-color-border);
  padding-block: var(--sgf-space-3);
}
.wc-block-cart-items__row td,
.wc-block-components-order-summary-item td {
  border: 0;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border-radius: 0;
  background: var(--sgf-color-surface);
}

.wc-block-components-product-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sgf-color-text);
  text-decoration: none;
}

.wc-block-components-product-price,
.wc-block-components-product-metadata {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}

/* ─── Campos de formulario ───────────────────────────────────
   48px, borde 1px, radio 2px. Igual que el selector de tallas. */
/* Se cuelgan de la clase de body: la hoja de Blocks se encola
   despues de la del theme, asi que con la misma especificidad
   ganaba ella y los campos se quedaban en 50px con radio 4px. */
.woocommerce-cart .wc-block-components-text-input input[type=text],
.woocommerce-cart .wc-block-components-text-input input[type=email],
.woocommerce-cart .wc-block-components-text-input input[type=tel],
.woocommerce-cart .wc-block-components-text-input input[type=number],
.woocommerce-cart .wc-block-components-text-input input[type=password],
.woocommerce-cart .wc-block-components-country-input select,
.woocommerce-cart .wc-block-components-state-input select,
.woocommerce-cart .wc-block-components-select select,
.woocommerce-cart .wc-block-components-textarea,
.woocommerce-checkout .wc-block-components-text-input input[type=text],
.woocommerce-checkout .wc-block-components-text-input input[type=email],
.woocommerce-checkout .wc-block-components-text-input input[type=tel],
.woocommerce-checkout .wc-block-components-text-input input[type=number],
.woocommerce-checkout .wc-block-components-text-input input[type=password],
.woocommerce-checkout .wc-block-components-country-input select,
.woocommerce-checkout .wc-block-components-state-input select,
.woocommerce-checkout .wc-block-components-select select,
.woocommerce-checkout .wc-block-components-textarea {
  height: 48px;
  padding: var(--sgf-space-3);
  font-family: var(--sgf-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.woocommerce-cart .wc-block-components-text-input input[type=text]:focus,
.woocommerce-cart .wc-block-components-text-input input[type=email]:focus,
.woocommerce-cart .wc-block-components-text-input input[type=tel]:focus,
.woocommerce-cart .wc-block-components-text-input input[type=number]:focus,
.woocommerce-cart .wc-block-components-text-input input[type=password]:focus,
.woocommerce-cart .wc-block-components-country-input select:focus,
.woocommerce-cart .wc-block-components-state-input select:focus,
.woocommerce-cart .wc-block-components-select select:focus,
.woocommerce-cart .wc-block-components-textarea:focus,
.woocommerce-checkout .wc-block-components-text-input input[type=text]:focus,
.woocommerce-checkout .wc-block-components-text-input input[type=email]:focus,
.woocommerce-checkout .wc-block-components-text-input input[type=tel]:focus,
.woocommerce-checkout .wc-block-components-text-input input[type=number]:focus,
.woocommerce-checkout .wc-block-components-text-input input[type=password]:focus,
.woocommerce-checkout .wc-block-components-country-input select:focus,
.woocommerce-checkout .wc-block-components-state-input select:focus,
.woocommerce-checkout .wc-block-components-select select:focus,
.woocommerce-checkout .wc-block-components-textarea:focus {
  border-color: var(--sgf-color-text);
  outline: none;
  box-shadow: none;
}
.woocommerce-cart .wc-block-components-text-input input[type=text],
.woocommerce-cart .wc-block-components-text-input input[type=email],
.woocommerce-cart .wc-block-components-text-input input[type=tel],
.woocommerce-cart .wc-block-components-text-input input[type=number],
.woocommerce-cart .wc-block-components-text-input input[type=password],
.woocommerce-cart .wc-block-components-country-input select,
.woocommerce-cart .wc-block-components-state-input select,
.woocommerce-cart .wc-block-components-select select,
.woocommerce-cart .wc-block-components-textarea,
.woocommerce-checkout .wc-block-components-text-input input[type=text],
.woocommerce-checkout .wc-block-components-text-input input[type=email],
.woocommerce-checkout .wc-block-components-text-input input[type=tel],
.woocommerce-checkout .wc-block-components-text-input input[type=number],
.woocommerce-checkout .wc-block-components-text-input input[type=password],
.woocommerce-checkout .wc-block-components-country-input select,
.woocommerce-checkout .wc-block-components-state-input select,
.woocommerce-checkout .wc-block-components-select select,
.woocommerce-checkout .wc-block-components-textarea {
  /* 16px EN MÓVIL, Y NO ES CAPRICHO — 1 oct
     ---------------------------------------
     iOS Safari AMPLÍA la página al enfocar cualquier campo de
     texto por debajo de 16px, y la deja ampliada. En un checkout
     de quince campos, el móvil pega un salto de escala en cada
     uno y hay que volver a encuadrar a mano entre campo y campo.

     No se tocan los 14px del escritorio, que ahí están bien: la
     regla solo sube el tamaño donde el navegador castiga, que es
     donde hay teclado en pantalla. */
}
@media (max-width: 767px) {
  .woocommerce-cart .wc-block-components-text-input input[type=text],
  .woocommerce-cart .wc-block-components-text-input input[type=email],
  .woocommerce-cart .wc-block-components-text-input input[type=tel],
  .woocommerce-cart .wc-block-components-text-input input[type=number],
  .woocommerce-cart .wc-block-components-text-input input[type=password],
  .woocommerce-cart .wc-block-components-country-input select,
  .woocommerce-cart .wc-block-components-state-input select,
  .woocommerce-cart .wc-block-components-select select,
  .woocommerce-cart .wc-block-components-textarea,
  .woocommerce-checkout .wc-block-components-text-input input[type=text],
  .woocommerce-checkout .wc-block-components-text-input input[type=email],
  .woocommerce-checkout .wc-block-components-text-input input[type=tel],
  .woocommerce-checkout .wc-block-components-text-input input[type=number],
  .woocommerce-checkout .wc-block-components-text-input input[type=password],
  .woocommerce-checkout .wc-block-components-country-input select,
  .woocommerce-checkout .wc-block-components-state-input select,
  .woocommerce-checkout .wc-block-components-select select,
  .woocommerce-checkout .wc-block-components-textarea {
    font-size: 16px;
  }
}
.woocommerce-cart,
.woocommerce-checkout {
  /* UN CAMPO MAL RELLENADO TIENE QUE VERSE — 1 oct
     ----------------------------------------------
     Reproducido en el checkout con la cesta llena y un correo
     inválido: salían DOCE mensajes de error en rojo y el borde de los
     campos seguía exactamente igual que el de uno correcto. Con
     quince campos, encontrar cuál falla era leer los doce mensajes de
     uno en uno.

     El color sale del token de error, que ya es legible sobre crema
     —se corrigió el 30 sep de `#f87171`, que daba 2,4:1—.

     El borde no es lo único que lo dice: el mensaje sigue ahí. Es la
     regla de no fiar un significado solo al color.

     WooCommerce Blocks valida al ENVIAR, no al salir del campo. Eso es
     suyo y no se toca desde aquí. */
}
.woocommerce-cart .wc-block-components-text-input.has-error input,
.woocommerce-cart .wc-block-components-text-input.has-error textarea,
.woocommerce-cart .wc-block-components-select.has-error select,
.woocommerce-checkout .wc-block-components-text-input.has-error input,
.woocommerce-checkout .wc-block-components-text-input.has-error textarea,
.woocommerce-checkout .wc-block-components-select.has-error select {
  border-color: var(--sgf-color-error);
}
.woocommerce-cart .wc-block-components-text-input.has-error input:focus,
.woocommerce-cart .wc-block-components-text-input.has-error textarea:focus,
.woocommerce-cart .wc-block-components-select.has-error select:focus,
.woocommerce-checkout .wc-block-components-text-input.has-error input:focus,
.woocommerce-checkout .wc-block-components-text-input.has-error textarea:focus,
.woocommerce-checkout .wc-block-components-select.has-error select:focus {
  border-color: var(--sgf-color-error);
}

.wc-block-components-text-input label {
  font-size: 14px;
  color: var(--sgf-color-muted);
}

.wc-block-components-text-input.is-active label {
  font-size: 12px;
}

/* ─── Pasos del checkout ─────────────────────────────────────── */
.wc-block-components-checkout-step {
  padding-block: var(--sgf-space-5);
  border-top: 1px solid var(--sgf-color-border);
}
.wc-block-components-checkout-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.wc-block-components-checkout-step__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.wc-block-components-checkout-step__description {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}

/* El número de paso, como dato discreto. */
.wc-block-components-checkout-step__heading-content {
  font-size: 14px;
  color: var(--sgf-color-muted);
}

/* ─── Envío y pago ───────────────────────────────────────────
   Sin cajas ni fondos: solo una línea entre opciones. */
.wc-block-components-radio-control__option {
  padding: var(--sgf-space-3) 0 var(--sgf-space-3) var(--sgf-space-6);
  border-radius: 0;
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border-bottom: 1px solid var(--sgf-color-border);
  background: transparent;
}
.wc-block-components-radio-control-accordion-option:last-child,
.wc-block-components-radio-control__option:last-child {
  border-bottom: 0;
}

.wc-block-components-radio-control__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  font-variant-numeric: tabular-nums;
}

.wc-block-components-radio-control__input {
  border-color: var(--sgf-color-control);
}
.wc-block-components-radio-control__input:checked {
  border-color: var(--sgf-color-text);
}

/* ─── Cantidad ───────────────────────────────────────────────── */
.wc-block-components-quantity-selector {
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  background: var(--sgf-color-bg);
}
.wc-block-components-quantity-selector input {
  font-variant-numeric: tabular-nums;
}
.wc-block-components-quantity-selector::after {
  display: none;
}

/* ─── Botones ────────────────────────────────────────────────
   Las únicas píldoras de la página. */
.wc-block-components-button:not(.is-link) {
  height: 56px;
  padding-inline: var(--sgf-space-5);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  box-shadow: none;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.wc-block-components-button:not(.is-link):focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.wc-block-components-button:not(.is-link) {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .wc-block-components-button:not(.is-link):hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}

.wc-block-components-button.outlined:not(.is-link) {
  background: var(--sgf-color-bg);
  color: var(--sgf-color-text);
  border-color: var(--sgf-color-control);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.wc-block-components-button.outlined:not(.is-link):focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .wc-block-components-button.outlined:not(.is-link):hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}

.wc-block-components-button.is-link,
.wc-block-components-totals-coupon-link {
  font-size: 14px;
  color: var(--sgf-color-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  background: none;
  border: 0;
  height: auto;
  padding: 0;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   LOS AVISOS DEL CHECKOUT DE BLOQUES
   ═══════════════════════════════════════════════════════════

   POR QUÉ EL REDISEÑO ANTERIOR NO LOS TOCÓ
   ----------------------------------------
   Los avisos clásicos de WooCommerce —`.woocommerce-error` y
   compañía— se rediseñaron en `_components.scss`. Estos NO son esos:
   el carrito y la caja son bloques de React y traen su propio
   componente, `.wc-block-components-notice-banner`, con otras clases
   y otros colores. Por eso el rediseño no se vio donde Sam lo estaba
   mirando, que era la caja.

   Lo que había aquí solo les quitaba el radio y les ponía el fondo
   crema; el resto —el borde rojo de 1px y el fondo rosa de
   WooCommerce— seguía mandando. De ahí el «troncho rojo».

   LO QUE SE HACE AHORA
   --------------------
   La misma pieza que los clásicos: tarjeta suelta, esquinas
   redondeadas, sombra corta, el icono dentro de un círculo de color
   tenue y el COLOR SOLO EN EL ICONO. El fondo se queda en el de la
   página en todos los casos.

   En una caja esto importa el doble. Un rectángulo rojo a lo ancho,
   encima del formulario, con el pedido ya montado, se lee como «se ha
   roto algo» cuando lo que dice es «elige un envío». Es el momento de
   la compra donde más caro sale asustar.

   `is-error` va en ÁMBAR y no en rojo, igual que los clásicos: lo que
   pasa aquí es casi siempre algo que falta por rellenar. El rojo se
   guarda para cuando algo se pierde de verdad.

   EL ICONO ES EL SVG DE WOOCOMMERCE, DEL REVÉS
   --------------------------------------------
   Ellos pintan el círculo del color fuerte y el glifo en blanco.
   Aquí el círculo va tenue y el glifo del color: mismo elemento, dos
   declaraciones, sin tocar el marcado —que no se puede tocar, lo
   escribe React—.
   ═══════════════════════════════════════════════════════════ */
.wc-block-components-notice-banner {
  --sgf-aviso-color: var(--sgf-color-accent);
  align-items: flex-start;
  gap: var(--sgf-space-3);
  margin: var(--sgf-space-4) 0;
  padding: var(--sgf-space-4) !important;
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-border);
  border-radius: var(--sgf-radius-foto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  font-family: var(--sgf-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-text);
}
.wc-block-components-notice-banner > svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  flex: 0 0 32px;
  /* El círculo, tenue; el trazo, del color. Al revés que
     WooCommerce, que pinta el círculo fuerte y el glifo blanco. */
  background-color: color-mix(in srgb, var(--sgf-aviso-color) 14%, transparent);
  fill: var(--sgf-aviso-color);
}
.wc-block-components-notice-banner {
  /* El titular en negrita de WooCommerce baja a 500: a 600 y sobre
     una tarjeta clara pesa más que el titular de la propia sección
     de la caja, y entonces el aviso compite con el formulario en vez
     de acompañarlo. */
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__summary {
  font-weight: 500;
  margin: 0 0 var(--sgf-space-1);
}
.wc-block-components-notice-banner {
  /* La equis de descartar, alineada con la primera línea del texto y
     no flotando a media tarjeta. */
}
.wc-block-components-notice-banner > .wc-block-components-button {
  margin-top: 8px !important;
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  --sgf-aviso-color: #e3b341;
  background-color: var(--sgf-color-bg);
  border-color: var(--sgf-color-border);
}
.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner.is-warning > svg {
  background-color: color-mix(in srgb, #e3b341 14%, transparent);
  fill: #e3b341;
}

.wc-block-components-notice-banner.is-success {
  --sgf-aviso-color: #2e7d4f;
  background-color: var(--sgf-color-bg);
  border-color: var(--sgf-color-border);
}
.wc-block-components-notice-banner.is-success > svg {
  background-color: color-mix(in srgb, #2e7d4f 14%, transparent);
  fill: #2e7d4f;
}

.wc-block-components-notice-banner.is-info {
  --sgf-aviso-color: var(--sgf-color-accent);
  background-color: var(--sgf-color-bg);
  border-color: var(--sgf-color-border);
}
.wc-block-components-notice-banner.is-info > svg {
  background-color: color-mix(in srgb, var(--sgf-color-accent) 14%, transparent);
  fill: var(--sgf-color-accent);
}

/* El aviso flotante de los bloques —el que sale abajo al añadir algo—
   con la misma piel. Es el único que SÍ flota, y está bien que lo
   haga: dice que algo ha salido bien y no hay que hacer nada con él.

   Aquí había además un `.wc-block-components-snackbar` «por si
   acaso». Esa clase no existe en WooCommerce: me la inventé. El
   contrato con un plugin no se escribe a voleo —si la clase no es
   suya, la regla no es defensa, es ruido que el día de la
   actualización te hace creer que algo está cubierto—. La buena es
   ésta, y la vigila `test-woo-contrato.php`. */
.wc-block-components-notice-snackbar {
  border-radius: var(--sgf-radius-foto);
  background: var(--sgf-color-ink);
  color: var(--sgf-color-ink-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ─── Carrito vacío ──────────────────────────────────────────── */
.wc-block-cart__empty-cart__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-transform: none;
}

/* ─── Radios de todo lo que Woo redondea por defecto ─────────── */
.wc-block-components-panel,
.wc-block-components-address-card,
.wc-block-components-express-payment,
.wc-block-components-chip {
  border-radius: 0;
}

/* ─── Dos columnas deterministas ─────────────────────────────
   WooCommerce reparte las columnas segun una clase is-small /
   is-medium / is-large que anade por JS con un observador de
   tamano. En el checkout llega; en el carrito no aparecia nunca y
   la pagina se quedaba apilada.

   Se impone el reparto por CSS y se deja de depender de esa clase. */
@media (min-width: 1024px) {
  .woocommerce-cart .wc-block-components-sidebar-layout,
  .woocommerce-checkout .wc-block-components-sidebar-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .woocommerce-cart .wc-block-components-main,
  .woocommerce-checkout .wc-block-components-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .woocommerce-cart .wc-block-components-sidebar,
  .woocommerce-checkout .wc-block-components-sidebar {
    flex: 0 0 380px;
    max-width: 380px;
    position: sticky;
    top: calc(var(--sgf-header-primary) + var(--sgf-space-4));
  }
}
/* ─── Cabeceras de tabla ─────────────────────────────────────
   "PRODUCT / TOTAL" en mayusculas no aporta nada: el precio ya se
   lee a la derecha de cada linea. */
.wc-block-cart-items__header {
  display: none;
}

/* ─── Titulo del resumen ─────────────────────────────────────── */
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper .wc-block-components-title {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  margin: 0 0 var(--sgf-space-3);
  padding: 0;
}

/* ─── Linea de producto ──────────────────────────────────────
   Imagen a la izquierda, datos en el centro, precio a la derecha.
   Sin subrayados: el nombre ya es un enlace evidente. */
.wc-block-cart-items__row .wc-block-cart-item__image {
  width: 96px;
  padding-right: var(--sgf-space-3);
}
.wc-block-cart-items__row .wc-block-cart-item__image img {
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.wc-block-cart-items__row .wc-block-components-product-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}
.wc-block-cart-items__row .wc-block-components-product-name:hover {
  text-decoration: none;
  color: var(--sgf-color-muted);
}
.wc-block-cart-items__row .wc-block-cart-item__total {
  font-size: 16px;
  font-weight: 500;
  text-align: right;
}

/* ─── Selector de cantidad ───────────────────────────────────
   Pildora, como en la referencia: papelera, cifra y mas, en linea. */
.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 40px;
  padding-inline: var(--sgf-space-1);
  border: 1px solid var(--sgf-color-control);
  border-radius: var(--sgf-radius-pill);
  background: var(--sgf-color-bg);
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  width: 40px;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--sgf-color-text);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
  background: var(--sgf-color-surface);
}

/* Enlace de borrar: junto a la cantidad, discreto. */
.wc-block-cart-item__remove-link {
  font-size: 14px;
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.wc-block-cart-item__remove-link:hover {
  color: var(--sgf-color-text);
}

/* ─── Cupones ────────────────────────────────────────────────── */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-size: 16px;
  font-weight: 400;
  color: var(--sgf-color-text);
  padding-block: var(--sgf-space-2);
}

/* ─── Nada redondeado salvo lo que toca ──────────────────────── */
.wc-block-cart-items,
.wc-block-cart-items__row,
.wc-block-components-totals-wrapper,
.wc-block-cart__submit-container {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* El contenedor pegajoso del boton en movil no lleva sombra. */
.wc-block-cart__submit-container--sticky {
  box-shadow: none;
  border-top: 1px solid var(--sgf-color-border);
}

/* Mismo motivo que los inputs: la hoja de Blocks se encola despues,
   asi que con igual especificidad ganaba ella y el titulo salia en
   mayusculas a 13px. */
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block,
.woocommerce-cart .wc-block-components-checkout-order-summary__title,
.woocommerce-checkout .wc-block-cart__totals-title,
.woocommerce-checkout .wp-block-woocommerce-cart-order-summary-heading-block,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  margin: 0 0 var(--sgf-space-3);
  padding: 0;
}
.woocommerce-cart,
.woocommerce-checkout {
  /* El titulo del resumen del checkout es un boton desplegable en
     movil; mismo tratamiento. */
}
.woocommerce-cart .wc-block-components-checkout-order-summary__title-text,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  font-size: 20px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Recomendaciones bajo el carrito ────────────────────────
   El bloque sale de get_footer, es decir fuera del contenedor de
   1120px, asi que va a ancho completo como en la ficha. */
.woocommerce-cart .sgf-reco,
.woocommerce-checkout .sgf-reco {
  margin-top: var(--sgf-space-12);
  margin-bottom: var(--sgf-space-12);
}

.sgf-cart-empty .sgf-reco,
.sgf-checkout-vacio .sgf-reco {
  margin-top: var(--sgf-space-5);
  margin-bottom: var(--sgf-space-12);
}

/* ─── Refuerzos del carrito ──────────────────────────────────

   AHORA SÍ SON TARJETAS — 1 oct
   -----------------------------
   Aquí ponía «ninguno de estos bloques es una tarjeta» y se pintaban
   con rayas de 1px. El problema es que la tabla de productos de
   WooCommerce cierra con SU raya de 1px, así que la del aviso caía a
   32px de la otra: dos líneas paralelas con nada en medio, que es lo
   que Sam vio y no supo explicar —porque no significan nada—.

   Una raya separa dos cosas. Dos rayas seguidas no separan nada: solo
   parecen un fallo. Con piezas cerradas el aire lo pone la pila, y el
   borde de cada tarjeta ya dice dónde empieza y dónde acaba.

   El lenguaje es el de los avisos de Sileo que pasó Sam: chip
   redondo con el icono, titular y una línea pequeña debajo. Lo que NO
   se copia es el componente —Sileo es una librería de React con
   morphing de SVG y muelles, y esto es un aviso que no se va—. */
.sgf-cart-ux {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-3);
  margin-top: var(--sgf-space-6);
}

.sgf-cart-ux__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sgf-space-3);
  padding: var(--sgf-space-4);
  border: 1px solid var(--sgf-color-border);
  border-radius: var(--sgf-radius-md);
  background: var(--sgf-color-bg);
}

/* El chip. Redondo y de 36px, el mismo gesto que el icono de los
   avisos de Sileo: el icono no flota al lado del texto, está metido
   en algo. */
.sgf-cart-ux__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sgf-color-surface);
  color: var(--sgf-color-text);
}
.sgf-cart-ux__chip svg {
  width: 20px;
  height: 20px;
}

.sgf-cart-ux__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 6px;
}

.sgf-cart-ux__titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--sgf-color-text);
}

.sgf-cart-ux__texto {
  margin: 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}
.sgf-cart-ux__texto a {
  color: var(--sgf-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sgf-color-control);
}
.sgf-cart-ux__texto a:hover {
  border-bottom-color: var(--sgf-color-text);
}

/* Los dos accesos a la cuenta. Separados del texto porque son lo
   único de la pila en lo que se puede pulsar. */
.sgf-cart-ux__acciones {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2);
  margin: var(--sgf-space-2) 0 0;
  font-size: 14px;
  line-height: 20px;
}
.sgf-cart-ux__acciones span {
  color: var(--sgf-color-muted);
}
.sgf-cart-ux__acciones a {
  font-weight: 500;
  color: var(--sgf-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sgf-color-control);
}
.sgf-cart-ux__acciones a:hover {
  border-bottom-color: var(--sgf-color-text);
}

/* El de escasez va en ámbar, como en la ficha: no es un error, es
   una condición de disponibilidad. Solo el chip, para que el aviso no
   grite. */
.sgf-cart-ux__escasez .sgf-cart-ux__chip {
  background: color-mix(in srgb, #b26a00 12%, transparent);
  color: #b26a00;
}

/* Recogida */
.sgf-cart-ux__pickup {
  margin-bottom: var(--sgf-space-4);
}
.sgf-cart-ux__pickup-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.sgf-cart-ux__pickup-link {
  display: inline-block;
  margin-top: var(--sgf-space-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sgf-color-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-cart-ux__pickup-link:hover {
  color: var(--sgf-color-muted);
}

/* Escasez.
   Ambar, no rojo: el rojo dice "error" y aqui no hay ningun
   problema que resolver, solo una condicion de disponibilidad.
   Y sin negrita: un aviso que grita se lee como publicidad. */
/* Lo que comparten la cesta y la ficha son LAS PALABRAS —«Quedan
   pocas unidades»—, no la forma: en la cesta el aviso es una tarjeta
   más de la pila y en la ficha es una línea dentro de la columna de
   compra. La regla de la cesta se fue arriba, con las demás. */
.sgf-pdp__scarcity {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2);
  margin: 0 0 var(--sgf-space-4);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #b26a00;
}
.sgf-pdp__scarcity svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* AQUÍ ESTABAN `__returns` Y `__favorites` — 1 oct
   -----------------------------------------------
   `__returns` se pintaba con una raya arriba y otra abajo; ahora es
   una tarjeta más de la pila y no necesita regla propia. `__favorites`
   ya no se pinta: su invitación a entrar la hace la tarjeta de cuenta,
   y la lista de deseos que prometía todavía no existe (el porqué está
   en `inc/woocommerce-cart-ux.php`).

   Se van las dos reglas enteras y no se dejan «por si acaso»: una
   regla sin marcado al que aplicarse es la que mañana pisa a otra. */
/* El CTA no lleva subrayado: es un boton, no un enlace. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  text-decoration: none;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  text-decoration: none;
}

/* ─── Casillas ───────────────────────────────────────────────
   sass/components/forms/_forms.scss las pone en monoespaciada y
   caja alta; eso venia del registro tecnico anterior. Aqui una
   casilla es una frase que se lee, no una etiqueta de dato. */
.woocommerce-cart .wc-block-components-checkbox__label,
.woocommerce-cart .wc-block-components-checkbox label,
.woocommerce-cart .wc-block-components-radio-control__label,
.woocommerce-checkout .wc-block-components-checkbox__label,
.woocommerce-checkout .wc-block-components-checkbox label,
.woocommerce-checkout .wc-block-components-radio-control__label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}
.woocommerce-cart .wc-block-components-checkbox__input,
.woocommerce-checkout .wc-block-components-checkbox__input {
  width: 18px;
  height: 18px;
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
}
.woocommerce-cart .wc-block-components-checkbox__input:checked,
.woocommerce-checkout .wc-block-components-checkbox__input:checked {
  background: var(--sgf-color-text);
  border-color: var(--sgf-color-text);
}
.woocommerce-cart,
.woocommerce-checkout {
  /* Cualquier caja residual del resumen: aqui solo hay la linea
     vertical que separa las dos columnas. */
}
.woocommerce-cart .wc-block-components-checkout-order-summary,
.woocommerce-cart .wc-block-components-order-summary,
.woocommerce-cart .wc-block-checkout__sidebar > .wc-block-components-panel,
.woocommerce-cart .wc-block-cart__sidebar > .wc-block-components-panel,
.woocommerce-checkout .wc-block-components-checkout-order-summary,
.woocommerce-checkout .wc-block-components-order-summary,
.woocommerce-checkout .wc-block-checkout__sidebar > .wc-block-components-panel,
.woocommerce-checkout .wc-block-cart__sidebar > .wc-block-components-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.woocommerce-cart,
.woocommerce-checkout {
  /* Textos de ayuda bajo los campos. */
}
.woocommerce-cart .wc-block-components-checkout-step__description,
.woocommerce-cart .wc-block-components-address-form__address_2-toggle,
.woocommerce-cart .wc-block-components-validation-error,
.woocommerce-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
.woocommerce-checkout .wc-block-components-validation-error {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce-cart .wc-block-components-validation-error,
.woocommerce-checkout .wc-block-components-validation-error {
  color: #c5361f;
}

/**
 * Mi cuenta, login y registro
 */
.woocommerce-account .sgf-site-main--woo {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--sgf-gutter);
  padding-block: var(--sgf-space-6) var(--sgf-space-12);
}
@media (max-width: 767px) {
  .woocommerce-account .sgf-site-main--woo {
    padding-inline: var(--sgf-space-3);
    padding-block: var(--sgf-space-4) var(--sgf-space-9);
  }
}

/* La cuenta es una página (page.php), no el template Woo: hereda
   el padding de artículo de .sgf-page (128px) y el título display
   de .sgf-entry. El carrito ya los pisa; aquí lo mismo. */
.woocommerce-account .sgf-site-main.sgf-page {
  padding-block: var(--sgf-space-6) var(--sgf-space-12);
}
@media (max-width: 767px) {
  .woocommerce-account .sgf-site-main.sgf-page {
    padding-block: var(--sgf-space-4) var(--sgf-space-9);
  }
}

/* Y EL ANCHO TAMBIÉN — 1 oct
   =========================
   La regla de arriba arregló el relleno y se dejó la anchura, que es
   el mismo problema: el tope de 1120px está escrito para
   `.sgf-site-main--woo` y esta pantalla no lleva esa clase. Medido en
   el navegador: el contenedor salía a 1013px en una ventana de 1024,
   o sea al ancho entero —y en un monitor grande, a 1400 y pico—. Con
   la barra lateral a un extremo y el contenido al otro, la cuenta se
   leía como un panel de administración.

   Se pone donde lo pone el carrito, en el contenedor, no en el
   `main`: así el fondo sigue llegando a los bordes y lo que se limita
   es la lectura. Mismo tope, 1120px, que es lo que ya decía la regla
   de `--woo` que nunca llegó a aplicarse. */
.woocommerce-account .sgf-container {
  max-width: 1120px;
}

.woocommerce-account .sgf-entry,
.woocommerce-account .sgf-entry__content {
  max-width: none;
  width: 100%;
}

.woocommerce-account .sgf-entry__content > * {
  max-width: none;
}

.woocommerce-account .sgf-entry__content > * + * {
  margin-top: 0;
}

/* ─── Login / registro ───────────────────────────────────────
   Columna estrecha centrada: un formulario de acceso a 1120px de
   ancho es ilegible. */
.woocommerce-account:not(.logged-in) {
  /* Título y formulario en la misma columna de 416px, como
     «Cesta» y el cuerpo del cajón: un solo eje, sin hero. */
}
.woocommerce-account:not(.logged-in) .sgf-entry__header {
  max-width: 416px;
  margin: 0 auto var(--sgf-space-5);
}
.woocommerce-account:not(.logged-in) .sgf-entry__title {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce-account:not(.logged-in) #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-9);
  max-width: 880px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
  .woocommerce-account:not(.logged-in) #customer_login {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sgf-space-7);
  }
}
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
  width: 100%;
  float: none;
  margin: 0;
}
.woocommerce-account:not(.logged-in) h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--sgf-space-4);
}

/* ─── Formularios ────────────────────────────────────────────── */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-EditAccountForm,
.woocommerce form.lost_reset_password {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}

.woocommerce .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-2);
  padding: 0;
  margin: 0 0 var(--sgf-space-4);
}

.woocommerce .form-row label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sgf-color-text);
}
.woocommerce .form-row label .required {
  color: var(--sgf-color-muted);
  text-decoration: none;
}

.woocommerce .woocommerce-Input,
.woocommerce .input-text,
.woocommerce input[type=text],
.woocommerce input[type=email],
.woocommerce input[type=tel],
.woocommerce input[type=password],
.woocommerce select {
  width: 100%;
  height: 48px;
  padding-inline: var(--sgf-space-3);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color var(--sgf-duration-fast) var(--sgf-ease-out);
  /* LA CUARTA COPIA DEL MISMO CONTROL — 30 sep
     ------------------------------------------
     Los estados de campo estan en `base/elements/_fields.scss`, que
     alcanza a cualquier `input` del sitio. Pero a estos NO les
     llega, y no por especificidad: por EMPATE.

     `input[type="email"][aria-invalid="true"]`  -> (0,2,1)
     `.woocommerce input[type="email"]`          -> (0,2,1)

     Las dos valen lo mismo, y `woocommerce.css` se encola despues
     de `style.css`, asi que gana esta. Medido en la pagina de
     cuenta: el borde de error no aparecia mientras el cursor y la
     opacidad si, porque esas propiedades no las toca esta regla.

     Por eso el mixin se incluye tambien aqui. Es la cuarta
     implementacion del mismo campo —elemento, `.sgf-input`, esta y
     la de la caja— y mientras sean cuatro, cada estado hay que
     escribirlo cuatro veces. */
}
.woocommerce .woocommerce-Input:hover:not(:disabled):not([readonly]),
.woocommerce .input-text:hover:not(:disabled):not([readonly]),
.woocommerce input[type=text]:hover:not(:disabled):not([readonly]),
.woocommerce input[type=email]:hover:not(:disabled):not([readonly]),
.woocommerce input[type=tel]:hover:not(:disabled):not([readonly]),
.woocommerce input[type=password]:hover:not(:disabled):not([readonly]),
.woocommerce select:hover:not(:disabled):not([readonly]) {
  border-color: var(--sgf-color-text);
}
.woocommerce .woocommerce-Input:focus,
.woocommerce .input-text:focus,
.woocommerce input[type=text]:focus,
.woocommerce input[type=email]:focus,
.woocommerce input[type=tel]:focus,
.woocommerce input[type=password]:focus,
.woocommerce select:focus {
  outline: none;
  border-color: var(--sgf-color-text);
}
.woocommerce .woocommerce-Input:focus-visible,
.woocommerce .input-text:focus-visible,
.woocommerce input[type=text]:focus-visible,
.woocommerce input[type=email]:focus-visible,
.woocommerce input[type=tel]:focus-visible,
.woocommerce input[type=password]:focus-visible,
.woocommerce select:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.woocommerce .woocommerce-Input,
.woocommerce .input-text,
.woocommerce input[type=text],
.woocommerce input[type=email],
.woocommerce input[type=tel],
.woocommerce input[type=password],
.woocommerce select {
  /* Por `aria-invalid`, que es el atributo que ya leen los lectores
     de pantalla. El aviso visual y el hablado salen del MISMO sitio:
     no hay forma de pintar el borde rojo y olvidarse de anunciarlo,
     ni al reves. */
}
.woocommerce .woocommerce-Input[aria-invalid=true],
.woocommerce .input-text[aria-invalid=true],
.woocommerce input[type=text][aria-invalid=true],
.woocommerce input[type=email][aria-invalid=true],
.woocommerce input[type=tel][aria-invalid=true],
.woocommerce input[type=password][aria-invalid=true],
.woocommerce select[aria-invalid=true] {
  border-color: var(--sgf-color-error);
}
.woocommerce .woocommerce-Input[aria-invalid=true]:focus-visible,
.woocommerce .input-text[aria-invalid=true]:focus-visible,
.woocommerce input[type=text][aria-invalid=true]:focus-visible,
.woocommerce input[type=email][aria-invalid=true]:focus-visible,
.woocommerce input[type=tel][aria-invalid=true]:focus-visible,
.woocommerce input[type=password][aria-invalid=true]:focus-visible,
.woocommerce select[aria-invalid=true]:focus-visible {
  outline-color: var(--sgf-color-error);
}
.woocommerce .woocommerce-Input:disabled,
.woocommerce .input-text:disabled,
.woocommerce input[type=text]:disabled,
.woocommerce input[type=email]:disabled,
.woocommerce input[type=tel]:disabled,
.woocommerce input[type=password]:disabled,
.woocommerce select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.woocommerce .woocommerce-Input,
.woocommerce .input-text,
.woocommerce input[type=text],
.woocommerce input[type=email],
.woocommerce input[type=tel],
.woocommerce input[type=password],
.woocommerce select {
  /* Solo lectura no es lo mismo que desactivado: el texto SE LEE
     —y se copia— asi que no se apaga. Lo que se quita es la
     invitacion a escribir. */
}
.woocommerce .woocommerce-Input[readonly],
.woocommerce .input-text[readonly],
.woocommerce input[type=text][readonly],
.woocommerce input[type=email][readonly],
.woocommerce input[type=tel][readonly],
.woocommerce input[type=password][readonly],
.woocommerce select[readonly] {
  border-color: transparent;
  background: var(--sgf-color-bg-alt, var(--sgf-color-surface));
  cursor: default;
}

.woocommerce select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233d3d3d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.woocommerce textarea.input-text {
  height: auto;
  min-height: 120px;
  padding: var(--sgf-space-3);
}

/* Casilla de recordar: en línea, no apilada. */
.woocommerce-form-login__rememberme {
  flex-direction: row;
  align-items: center;
  gap: var(--sgf-space-2);
  font-size: 14px;
  font-weight: 400;
}
.woocommerce-form-login__rememberme input {
  width: auto;
  height: auto;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
  width: 100%;
}

.woocommerce-LostPassword {
  margin: var(--sgf-space-3) 0 0;
  font-size: 14px;
}
.woocommerce-LostPassword a {
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.woocommerce-LostPassword a:hover {
  color: var(--sgf-color-text);
}

.woocommerce-privacy-policy-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}
.woocommerce-privacy-policy-text p {
  max-width: none;
}

/* ─── Cuenta con sesión iniciada ─────────────────────────────
   Navegación lateral con la misma voz que los filtros del
   catálogo: tipografía y separadores, sin cajas. */
.woocommerce-account.logged-in .sgf-entry__header {
  margin: 0 0 var(--sgf-space-5);
}

.woocommerce-account.logged-in .sgf-entry__title {
  font-family: var(--sgf-font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0;
}

.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: var(--sgf-space-7);
  align-items: start;
}
@media (max-width: 1023px) {
  .woocommerce-account.logged-in .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sgf-space-5);
  }
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--sgf-color-border);
}
.woocommerce-MyAccount-navigation li:first-child {
  border-top: 1px solid var(--sgf-color-border);
}
.woocommerce-MyAccount-navigation a {
  display: block;
  padding-block: var(--sgf-space-3);
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-text);
}
.woocommerce-MyAccount-navigation a:hover {
  color: var(--sgf-color-muted);
}
.woocommerce-MyAccount-navigation .is-active > a {
  font-weight: 500;
}

.woocommerce-MyAccount-content {
  min-width: 0;
}
.woocommerce-MyAccount-content p {
  font-size: 16px;
  line-height: 24px;
}
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-transform: none;
  margin: 0 0 var(--sgf-space-4);
}

/* ─── Tablas de pedidos y direcciones ────────────────────────── */
.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-size: 14px;
}
.woocommerce table.shop_table th {
  padding: var(--sgf-space-3) var(--sgf-space-2);
  border: 0;
  border-bottom: 1px solid var(--sgf-color-border);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  color: var(--sgf-color-muted);
}
.woocommerce table.shop_table td {
  padding: var(--sgf-space-3) var(--sgf-space-2);
  border: 0;
  border-bottom: 1px solid var(--sgf-color-border);
  vertical-align: middle;
}
.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: 0;
}

.woocommerce .addresses .col-1,
.woocommerce .addresses .col-2 {
  width: 100%;
  float: none;
}

.woocommerce .addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-7);
}
@media (max-width: 767px) {
  .woocommerce .addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}
.woocommerce .addresses address {
  font-style: normal;
  font-size: 14px;
  line-height: 24px;
  color: var(--sgf-color-muted);
}

/* ─── Avisos ─────────────────────────────────────────────────
   WooCommerce los imprime como hijos directos de .woocommerce, que
   aquí arriba es la rejilla de 240px + contenido. Sin decir nada,
   el aviso ocupa la primera pista y se pinta dentro de una columna
   de 240px, con el texto en tira y el botón encima. Tiene que cruzar
   las dos columnas y quedar por delante de la navegación. */
/* AQUÍ SE REPINTABA EL AVISO ENTERO — 1 oct
   ========================================
   Este bloque volvía a diseñar los avisos solo para la cuenta: otro
   fondo, otro borde, radio 0 y la raya de color en el filo izquierdo.
   O sea, el mismo componente decidido en dos ficheros, y ganaba este
   por orden de compilación. Al rediseñar los avisos en
   `_components.scss` no cambió nada en esta pantalla, que es
   justamente donde Sam los estaba mirando.

   Se queda SOLO lo que de verdad es de aquí: dónde cae el aviso
   dentro de la rejilla de la cuenta, y el botón que WooCommerce mete
   dentro de algunos avisos. La forma —tarjeta, radio, sombra, icono—
   es la del componente, una sola vez y en un solo sitio. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  grid-column: 1/-1;
  order: -1;
  margin-bottom: var(--sgf-space-6);
  /* El botón va en el marcado ANTES del texto. Se reordena en vez
     de tocar la plantilla: es solo posición, no contenido. */
}
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button {
  order: 2;
  height: 40px;
  padding-inline: var(--sgf-space-4);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border-radius: 20px;
}

/* En la pantalla de acceso el aviso tiene que caer sobre la misma
   columna que el formulario. Si se queda a todo el ancho, el error
   arranca a la izquierda del campo al que se refiere y se lee como si
   fuera de otra cosa. */
.woocommerce-account:not(.logged-in) .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-info,
.woocommerce-account:not(.logged-in) .woocommerce-error {
  max-width: 416px;
  margin-inline: auto;
}

/* ─── Correcciones sobre la capa de formularios del theme ────
   sass/components/forms/_forms.scss pone las etiquetas en caja
   alta con tracking; eso venia del registro tecnico anterior y
   aqui desentona. Se anclan a la clase de body para ganar sin
   subir especificidad por todas partes. */
.woocommerce-account label,
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-form__label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}
.woocommerce-account {
  /* Botones: la misma pildora negra que el resto del sitio.
     El ojo de la contraseña no es un CTA. */
}
.woocommerce-account .button:not(.show-password-input),
.woocommerce-account .woocommerce-button:not(.show-password-input),
.woocommerce-account button[type=submit]:not(.show-password-input) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--sgf-space-5);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.woocommerce-account .button:not(.show-password-input):focus-visible,
.woocommerce-account .woocommerce-button:not(.show-password-input):focus-visible,
.woocommerce-account button[type=submit]:not(.show-password-input):focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.woocommerce-account .button:not(.show-password-input),
.woocommerce-account .woocommerce-button:not(.show-password-input),
.woocommerce-account button[type=submit]:not(.show-password-input) {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce-account .button:not(.show-password-input):hover,
  .woocommerce-account .woocommerce-button:not(.show-password-input):hover,
  .woocommerce-account button[type=submit]:not(.show-password-input):hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}
.woocommerce-account {
  /* Enlaces en negro y gris: el naranja se reserva a la etiqueta
     de campana del catalogo. La píldora no es un enlace de texto:
     si hereda el negro, «Ver la tienda» desaparece sobre negro. */
}
.woocommerce-account a:not(.button):not(.sgf-account__cta) {
  color: var(--sgf-color-text);
}
.woocommerce-account a:not(.button):not(.sgf-account__cta):hover {
  color: var(--sgf-color-muted);
}
.woocommerce-account .woocommerce-LostPassword a {
  color: var(--sgf-color-muted);
}

/* ═══════════════════════════════════════════════════════════
   ESCRITORIO DE LA CUENTA
   ═══════════════════════════════════════════════════════════ */
.sgf-account {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-7);
}

/* ─── Reconocimiento ─────────────────────────────────────────
   El nombre y el historial. Un cliente que se ve reconocido no
   vuelve a sentirse un desconocido en la siguiente compra. */
.sgf-account__greeting {
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-2);
}
@media (max-width: 767px) {
  .sgf-account__greeting {
    font-size: 24px;
    line-height: 32px;
  }
}

.sgf-account__since {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
  max-width: none;
}

/* ─── El último pedido ───────────────────────────────────────
   Lo primero de la pantalla porque es a lo que se entra. */
.sgf-account__order {
  padding: var(--sgf-space-5);
  background: var(--sgf-color-surface);
}

.sgf-account__order-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sgf-space-4);
  margin-bottom: var(--sgf-space-4);
}

.sgf-account__order-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0;
}

.sgf-account__order-ref {
  display: flex;
  align-items: baseline;
  gap: var(--sgf-space-2);
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.sgf-account__order-ref span {
  font-size: 14px;
  font-weight: 400;
  color: var(--sgf-color-muted);
}

.sgf-account__order-link {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sgf-color-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-account__order-link:hover {
  color: var(--sgf-color-muted);
}

/* La fecha de entrega, con el peso que merece: es el dato. */
.sgf-account__order-eta {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-4);
}
.sgf-account__order-eta strong {
  color: var(--sgf-color-text);
  font-weight: 500;
}
.sgf-account__order-eta strong::first-letter {
  text-transform: uppercase;
}

/* Miniaturas de lo comprado: reconocer el pedido por la foto es
   inmediato; por el numero, no. */
.sgf-account__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgf-space-2);
  list-style: none;
  margin: 0 0 var(--sgf-space-5);
  padding: 0;
}
.sgf-account__thumbs li {
  width: 56px;
  height: 56px;
  background: var(--sgf-color-bg);
}
.sgf-account__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Los pasos son los MISMOS que los del pedido recibido: se reutiliza
   el componente, no se copia. Aqui solo se ajusta el fondo, porque van
   sobre gris en vez de sobre blanco. */
.sgf-account__steps {
  margin-bottom: 0;
}
.sgf-account__steps .sgf-thanks__step-dot {
  background: var(--sgf-color-surface);
}
.sgf-account__steps .sgf-thanks__step.is-done .sgf-thanks__step-dot {
  background: var(--sgf-color-text);
}

/* ─── Sin pedidos todavia ────────────────────────────────────── */
.sgf-account__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sgf-space-6) var(--sgf-space-5);
  background: var(--sgf-color-surface);
  text-align: center;
}

.sgf-account__empty-title,
.woocommerce-MyAccount-content .sgf-account__empty-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  margin: 0 0 var(--sgf-space-1);
  max-width: 28em;
}

.sgf-account__empty-note,
.woocommerce-MyAccount-content .sgf-account__empty-note {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-5);
  max-width: 28em;
}

.woocommerce-account a.sgf-account__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: var(--sgf-space-5);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.woocommerce-account a.sgf-account__cta:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.woocommerce-account a.sgf-account__cta {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce-account a.sgf-account__cta:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}
.woocommerce-account a.sgf-account__cta:hover {
  color: var(--sgf-color-bg);
}

/* ─── Accesos ────────────────────────────────────────────────
   Cada uno dice lo que resuelve. Un menu de sustantivos sueltos
   —"Direcciones"— obliga a entrar para saber si era lo que buscabas. */
.sgf-account__shortcuts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sgf-account__shortcuts li + li {
  border-top: 1px solid var(--sgf-color-border);
}
.sgf-account__shortcuts a {
  display: block;
  padding-block: var(--sgf-space-4);
  text-decoration: none;
}
.sgf-account__shortcuts a:hover .sgf-account__shortcut-title {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sgf-account__shortcut-title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--sgf-color-text);
}

.sgf-account__shortcut-note {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   DETALLES DE LA CUENTA
   ═══════════════════════════════════════════════════════════ */
/* El bloque de contraseña sin marco.
   WooCommerce lo envuelve en un <fieldset>, y el navegador le pone su
   marco con la leyenda encima montada en la línea. Es un recuadro del
   1998 en medio de un formulario limpio. La agrupación se mantiene con
   espacio y una línea de separación arriba, que es lo que hace falta
   para leerlo como un bloque aparte. */
.woocommerce-EditAccountForm fieldset {
  margin: var(--sgf-space-6) 0 0;
  padding: var(--sgf-space-6) 0 0;
  border: 0;
  border-top: 1px solid var(--sgf-color-border);
}
.woocommerce-EditAccountForm fieldset legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--sgf-space-4);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}

/* El botón de guardar, despegado del último campo.
   Pegado, se lee como parte del formulario en vez de como el final
   del formulario, y se pulsa sin querer al tabular. */
.woocommerce-EditAccountForm > .woocommerce-form-row:last-of-type,
.woocommerce-EditAccountForm > p:last-of-type {
  margin-top: var(--sgf-space-7);
}

.woocommerce-EditAccountForm button[type=submit] {
  margin-top: var(--sgf-space-4);
  width: auto;
  min-width: 200px;
}

/* Ver la contraseña
   -----------------
   Esos botones sueltos bajo cada campo son el conmutador de
   mostrar/ocultar de WooCommerce. Lo envuelve todo en <span
   class="password-input">, pero el estilo lo trae su propia hoja, que
   aquí no cargamos: sin esto cae debajo del campo como una pastilla
   gris que no dice qué es.

   Es la misma corrección que ya estaba en la pantalla de acceso, que
   la tenía acotada a .sgf-auth. Se sube a la cuenta entera, que es
   donde vuelve a aparecer. */
.woocommerce-account .password-input,
.woocommerce-account .woocommerce-password-strength ~ .password-input {
  position: relative;
  display: block;
}
.woocommerce-account .password-input input,
.woocommerce-account .woocommerce-password-strength ~ .password-input input {
  padding-right: 48px;
}

.woocommerce-account .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.woocommerce-account .show-password-input::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sgf-color-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.75'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.75'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
.woocommerce-account .show-password-input:hover::after, .woocommerce-account .show-password-input.display-password::after {
  background-color: var(--sgf-color-text);
}

/* La nota bajo "Nombre visible" venía en cursiva, que en este registro
   canta. Es una aclaración, no una cita. */
.woocommerce-EditAccountForm .woocommerce-form-row span em,
.woocommerce-EditAccountForm em {
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}

/* ═══════════════════════════════════════════════════════════
   FICHA DE UN PEDIDO
   ═══════════════════════════════════════════════════════════ */
.sgf-order {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-6);
}

.sgf-order__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sgf-space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0;
  max-width: none;
}

.sgf-order__dot {
  color: var(--sgf-color-control);
}

/* El estado, como etiqueta y no dentro de una frase.
   WooCommerce lo mete en un <mark> en mitad de una oración, y el
   navegador lo pinta de amarillo fosforito. Aqui es un dato con su
   sitio: se lee de un vistazo sin tener que leer la frase entera. */
.sgf-order__status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--sgf-space-3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-bg);
  background: var(--sgf-color-text);
  border-radius: 999px;
}
.sgf-order__status--completed {
  background: #2e7d4f;
}
.sgf-order__status--on-hold, .sgf-order__status--pending {
  background: var(--sgf-color-muted);
}
.sgf-order__status--cancelled, .sgf-order__status--failed, .sgf-order__status--refunded {
  background: #c5361f;
}

.sgf-order__eta {
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-muted);
  margin: var(--sgf-space-3) 0 0;
  max-width: none;
}
.sgf-order__eta strong {
  color: var(--sgf-color-text);
  font-weight: 500;
}
.sgf-order__eta strong::first-letter {
  text-transform: uppercase;
}

.sgf-order__steps {
  margin-bottom: 0;
}

.sgf-order__panel {
  padding-top: var(--sgf-space-6);
  margin-bottom: 0;
}

.sgf-order__cols {
  margin-bottom: 0;
}

/* ─── Novedades del pedido ───────────────────────────────────── */
.sgf-order__notes {
  padding-top: var(--sgf-space-6);
  border-top: 1px solid var(--sgf-color-border);
}
.sgf-order__notes ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-4);
}

.sgf-order__note-date {
  font-size: 13px;
  line-height: 18px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-1);
}

.sgf-order__note-text p {
  font-size: 15px;
  line-height: 22px;
  margin: 0;
  max-width: none;
}

.sgf-order__actions {
  padding-top: var(--sgf-space-4);
}

/* Los <mark> que WooCommerce siga imprimiendo en cualquier otra
   pantalla de la cuenta tampoco van en amarillo. */
.woocommerce-account mark {
  background: transparent;
  color: var(--sgf-color-text);
  font-weight: 500;
}

.woocommerce-account .sgf-entry__header {
  display: none;
}

.sgf-account-room__title {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-2);
}
@media (max-width: 767px) {
  .sgf-account-room__title {
    font-size: 24px;
    line-height: 32px;
  }
}

.sgf-account-room__lead {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-6);
  max-width: none;
}

.sgf-account-room__back {
  margin: 0 0 var(--sgf-space-4);
  font-size: 14px;
}
.sgf-account-room__back a {
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-account-room__back a:hover {
  color: var(--sgf-color-text);
}

.sgf-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--sgf-color-muted);
}

/* ─── Pedidos ──────────────────────────────────────────────── */
.sgf-account-orders {
  list-style: none;
  margin: var(--sgf-space-6) 0 0;
  padding: 0;
}

.sgf-account-orders__item + .sgf-account-orders__item {
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-account-orders__card {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-4);
  padding-block: var(--sgf-space-5);
  text-decoration: none;
  color: inherit;
}
.sgf-account-orders__card:hover .sgf-account-orders__when {
  color: var(--sgf-color-muted);
}
.sgf-account-orders__card .sgf-account__thumbs {
  margin: 0;
}

.sgf-account-orders__copy {
  min-width: 0;
}

.sgf-account-orders__when {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0 0 4px;
}

.sgf-account-orders__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sgf-space-2);
  margin: 0;
}

.sgf-account-orders__total {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--sgf-color-muted);
}

/* En la lista el estado es un dato, no una pastilla.
   La pastilla vive en la ficha del pedido. Diez verdes
   seguidos se leen como un panel, no como una cuenta. */
.sgf-account-orders .sgf-order__status {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--sgf-color-muted);
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
}

.sgf-account-orders__actions {
  display: flex;
  gap: var(--sgf-space-3);
  margin: 0 0 var(--sgf-space-4);
  font-size: 14px;
}
.sgf-account-orders__actions a {
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sgf-account-orders__pager {
  display: flex;
  gap: var(--sgf-space-4);
  margin-top: var(--sgf-space-6);
  font-size: 14px;
}
.sgf-account-orders__pager a {
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ─── Direcciones ──────────────────────────────────────────── */
.sgf-account-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-5);
  margin-top: var(--sgf-space-2);
}
@media (max-width: 767px) {
  .sgf-account-addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sgf-account-addresses__card {
  padding: var(--sgf-space-5);
  background: var(--sgf-color-surface);
}

.sgf-account-addresses__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sgf-space-3);
  margin: 0 0 var(--sgf-space-3);
}
.sgf-account-addresses__head a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sgf-account-addresses__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
}

.sgf-account-addresses address {
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
}

/* ─── Formularios ──────────────────────────────────────────── */
.sgf-account-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-3);
}
@media (max-width: 479px) {
  .sgf-account-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sgf-account-form__row .form-row,
.sgf-account-form__row .form-row-first,
.sgf-account-form__row .form-row-last {
  width: 100%;
  float: none;
  margin-bottom: var(--sgf-space-4);
}

.sgf-account-form__hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-4);
}

.sgf-account-form__pass {
  margin: var(--sgf-space-6) 0 0;
  padding: var(--sgf-space-6) 0 0;
  border: 0;
  border-top: 1px solid var(--sgf-color-border);
}
.sgf-account-form__pass legend {
  padding: 0;
  margin: 0 0 var(--sgf-space-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.sgf-account-form__submit {
  margin: var(--sgf-space-7) 0 0;
}
.sgf-account-form__submit button,
.sgf-account-form__submit .button {
  width: auto;
  min-width: 160px;
}

.woocommerce-account:not(.logged-in) .sgf-account-room {
  max-width: 416px;
  margin-inline: auto;
}

/* La casilla de marketing es del checkout. En «Tus datos»
   solo hay nombre, correo y contraseña. */
.sgf-account-form .form-row:has([name="_wc_other/sgf-core/marketing-optin"]),
.sgf-account-form .woocommerce-form-row:has([name="_wc_other/sgf-core/marketing-optin"]) {
  display: none;
}

.sgf-account-form .woocommerce-password-strength,
.sgf-account-form .woocommerce-password-hint {
  display: none;
}

.sgf-account-form .optional {
  display: none;
}

/* Select2 y el input nativo: misma caja de 48px. */
.woocommerce-account .select2-container {
  width: 100% !important;
}

.woocommerce-account .select2-container--default .select2-selection--single {
  height: 48px;
  padding-inline: var(--sgf-space-3);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  outline: none;
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 46px;
  font-family: var(--sgf-font-body);
  font-size: 16px;
  color: var(--sgf-color-text);
}

.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  width: 28px;
  right: 4px;
}

.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--sgf-color-text);
}

.select2-dropdown {
  border: 1px solid var(--sgf-color-text);
  border-radius: 2px;
  font-family: var(--sgf-font-body);
  font-size: 16px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
}

/* Barra de contraseña: el mismo ancho que el campo.
   El fieldset tiene min-width: min-content y la barra
   se iba más allá del input. */
.sgf-account-form__pass,
.sgf-account-form .form-row,
.sgf-auth__field {
  min-width: 0;
  max-width: 100%;
}

.sgf-pass {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 8px;
  box-sizing: border-box;
}

.sgf-pass__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 3px;
}

.sgf-pass__track i {
  display: block;
  min-width: 0;
  background: var(--sgf-color-border);
}

.sgf-pass__track i.is-bad {
  background: #c5361f;
}

.sgf-pass__track i.is-mid {
  background: #e3b341;
}

.sgf-pass__track i.is-fill {
  background: var(--sgf-color-control);
}

.sgf-pass__track i.is-ok {
  background: #2e7d4f;
}

.sgf-pass__hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--sgf-color-muted);
  margin: 8px 0 0;
  max-width: 100%;
}

.sgf-pass.is-ok .sgf-pass__hint {
  color: #2e7d4f;
}

/* ═══════════════════════════════════════════════════════════
   VER LA CONTRASEÑA
   ═══════════════════════════════════════════════════════════

   El botón nace OCULTO y lo enciende `auth-email-first.js` poniendo
   `sgf-auth--con-ojo` en la raíz del formulario. Si ese módulo no
   carga, no queda un botón muerto dentro del campo: queda un campo de
   contraseña normal.
   ─────────────────────────────────────────────────────────── */
.sgf-auth__pass {
  position: relative;
  display: block;
  width: 100%;
}
.sgf-auth__pass input {
  width: 100%;
}

.sgf-auth__ojo {
  display: none;
}
.sgf-auth--con-ojo .sgf-auth__ojo {
  position: absolute;
  top: 50%;
  right: var(--sgf-space-3);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  height: 28px;
  padding-inline: var(--sgf-space-2);
  border: 0;
  border-radius: var(--sgf-radius-pill);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--sgf-color-muted);
  cursor: pointer;
  transition: color var(--sgf-duration-fast) var(--sgf-ease-out), background-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-auth--con-ojo .sgf-auth__ojo:hover, .sgf-auth--con-ojo .sgf-auth__ojo:focus-visible {
  color: var(--sgf-color-text);
  background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
}

/* WOOCOMMERCE TRAE SU PROPIO OJO, Y SOBRA UNO — 1 oct
   --------------------------------------------------
   Su JavaScript detecta un campo de contraseña, le pone la clase
   `password-input` al envoltorio —a ESTE, que ya existía— y le mete
   dentro un botón `.show-password-input` con un ojo. Medido: salían
   los dos, montados el uno encima del otro.

   Se queda el nuestro y se esconde el suyo, por lo mismo que la
   cabecera dice «Menú» en vez de pintar tres rayas: un ojo es un
   acertijo que casi todo el mundo ha aprendido a resolver, pero sigue
   siendo un acertijo, y no se puede leer en voz alta. «Ver» y
   «Ocultar» dicen qué va a pasar.

   Se esconde con `display: none` y no se desactiva su script: ese
   script también mide la fuerza de la contraseña, que sí usamos. */
.sgf-auth__pass .show-password-input {
  display: none;
}

/* El texto no puede quedar debajo del botón: se le reserva el hueco.
   Con `Ocultar` el botón mide más que con `Ver`, así que el hueco es
   el de la palabra larga y no baila al pulsar.

   `.password-input` en el selector porque es la clase que pone
   WooCommerce al envoltorio, y su propia regla de `padding-right`
   —48px, para su ojo— se compila después que esta. Sin ella ganaba
   la suya y «Ocultar» se salía del campo. */
.sgf-auth--con-ojo .sgf-auth__pass input,
.sgf-auth--con-ojo .sgf-auth__pass.password-input input {
  padding-right: 84px;
}

/* ═══════════════════════════════════════════════════════════
   CAMPO OPCIONAL
   ═══════════════════════════════════════════════════════════

   «opcional» va en la etiqueta y en gris, no entre paréntesis dentro
   del texto: así se lee como una propiedad del campo y no como parte
   de su nombre. Y la línea de ayuda explica PARA QUÉ se pide, que es
   lo que decide si alguien lo rellena bien o se lo inventa.
   ─────────────────────────────────────────────────────────── */
.sgf-auth__opcional {
  margin-left: var(--sgf-space-2);
  font-size: 13px;
  font-weight: 400;
  color: var(--sgf-color-muted);
}

.sgf-auth__ayuda {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--sgf-color-muted);
}

body.sgf-is-welcome.woocommerce-account.logged-in .woocommerce {
  display: block;
}

body.sgf-is-welcome .woocommerce-MyAccount-navigation,
body.sgf-is-welcome .sgf-account-nav {
  display: none;
}

.sgf-welcome {
  max-width: 440px;
  margin-inline: auto;
  text-align: center;
}

.sgf-welcome__figure {
  margin: 0 0 var(--sgf-space-5);
}
.sgf-welcome__figure img {
  display: block;
  width: 180px;
  height: auto;
  margin-inline: auto;
}

.sgf-welcome__title {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-3);
}
@media (max-width: 767px) {
  .sgf-welcome__title {
    font-size: 24px;
    line-height: 32px;
  }
}

.sgf-welcome__lead {
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-6);
  max-width: none;
}

.sgf-welcome__gains {
  list-style: none;
  margin: 0 0 var(--sgf-space-7);
  padding: 0;
  text-align: left;
}
.sgf-welcome__gains li {
  padding: var(--sgf-space-3) 0;
  font-size: 16px;
  line-height: 24px;
  border-top: 1px solid var(--sgf-color-border);
}
.sgf-welcome__gains li:last-child {
  border-bottom: 1px solid var(--sgf-color-border);
}

.sgf-welcome__form {
  margin: 0;
}

.sgf-welcome__check {
  margin: 0 0 var(--sgf-space-6);
  text-align: left;
}
.sgf-welcome__check label {
  display: flex;
  align-items: flex-start;
  gap: var(--sgf-space-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
.sgf-welcome__check input[type=checkbox] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--sgf-color-text);
}

.sgf-welcome__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--sgf-space-6);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-welcome__submit:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.sgf-welcome__submit {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .sgf-welcome__submit:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}

/**
 * Acceso en dos pasos (primero el correo)
 */
/* UN ACCESO SE PONE EN EL MEDIO — 30 sep
   ======================================
   Estaba arriba del todo, pegado a la cabecera, con media pantalla
   vacia debajo. Un formulario de cuatro lineas en una pagina que no
   tiene nada mas no se pega a un borde: se centra, porque es lo unico
   que hay que mirar.

   El centrado va en el `main` y no en el bloque: centrar el bloque
   dentro de si mismo no hace nada. El `main` ya llega a la altura de
   la pantalla por la regla de `_body.scss`, asi que aqui solo hay que
   decirle donde poner lo que lleva dentro.

   SOLO SIN SESIÓN — 1 oct
   -----------------------
   Esto estaba en `.woocommerce-account` a secas, y esa clase la lleva
   el body TAMBIÉN cuando ya has entrado. O sea que el panel de la
   cuenta entero se centraba verticalmente, y como cada sección mide
   distinto, el contenido subía y bajaba al cambiar de pestaña.
   Medido: en «Pedidos» arrancaba 173px más abajo que en «Inicio».

   Un formulario de cuatro líneas en una pantalla vacía se centra. Un
   panel con menú lateral y secciones que cambian de alto, no: se
   ancla arriba, porque lo que importa es que el menú no se mueva al
   navegarlo. Son dos pantallas distintas que compartían una clase. */
.woocommerce-account:not(.logged-in) .sgf-site-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sgf-auth {
  max-width: 416px;
  margin-inline: auto;
  padding-block: 0;
}

/* Los tres pasos están en la página desde el principio. Hasta que el
   JS toma el control (.is-live) se ven todos: si el archivo no carga,
   esto sigue siendo un acceso y un alta que funcionan. */
.sgf-auth.is-live .sgf-auth__step {
  display: none;
}
.sgf-auth.is-live[data-step=email] [data-sgf-step=email], .sgf-auth.is-live[data-step=login] [data-sgf-step=login], .sgf-auth.is-live[data-step=register] [data-sgf-step=register] {
  display: block;
}

/* Sin JS los pasos se separan para que no parezcan un mismo bloque. */
.sgf-auth:not(.is-live) .sgf-auth__step + .sgf-auth__step {
  margin-top: var(--sgf-space-9);
  padding-top: var(--sgf-space-9);
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-auth__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
  margin: 0 0 var(--sgf-space-4);
}

/* Correo introducido + "Editar". Confirma a la persona que el paso 1
   se registró, y da marcha atrás sin recargar. */
.sgf-auth__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sgf-space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-5);
}

.sgf-auth__edit {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sgf-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-auth__edit:hover {
  color: var(--sgf-color-muted);
}

.sgf-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-4);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sgf-auth__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-3);
}
@media (max-width: 479px) {
  .sgf-auth__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sgf-auth__field {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-2);
  margin: 0;
}
.sgf-auth__field label {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}
.sgf-auth__field input {
  width: 100%;
  height: 48px;
  padding-inline: var(--sgf-space-3);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-auth__field input:focus {
  border-color: var(--sgf-color-text);
  outline: none;
}

/* Ver la contraseña
   ------------------
   WooCommerce envuelve todo campo de contraseña en <span
   class="password-input"> con un botón de mostrar/ocultar, pero el
   estilo lo pone su propia hoja, que aquí no cargamos: sin esto el
   botón cae debajo del campo como un rectángulo gris suelto.
   Se recupera como icono dentro del campo, que es donde se busca. */
.sgf-auth .password-input {
  position: relative;
  display: block;
}
.sgf-auth .password-input input {
  padding-right: 48px;
}

.sgf-auth .show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sgf-auth .show-password-input::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sgf-color-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.75'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.75'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
.sgf-auth .show-password-input:hover::after {
  background-color: var(--sgf-color-text);
}
.sgf-auth .show-password-input.display-password::after {
  background-color: var(--sgf-color-text);
}

/* Casillas: frases que se leen, no etiquetas de dato. */
.sgf-auth__check,
.sgf-auth__remember {
  margin: 0;
}
.sgf-auth__check label,
.sgf-auth__remember label {
  display: flex;
  align-items: flex-start;
  gap: var(--sgf-space-2);
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  cursor: pointer;
}
.sgf-auth__check input[type=checkbox],
.sgf-auth__remember input[type=checkbox] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--sgf-color-text);
}

.sgf-auth__legal {
  font-size: 13px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0;
}
.sgf-auth__legal a {
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-auth__legal a:hover {
  color: var(--sgf-color-text);
}

.sgf-auth__error {
  font-size: 14px;
  line-height: 20px;
  color: #c5361f;
  margin: 0;
}

.sgf-auth__aside {
  font-size: 14px;
  line-height: 20px;
  margin: var(--sgf-space-4) 0 0;
}
.sgf-auth__aside a {
  color: var(--sgf-color-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-auth__aside a:hover {
  color: var(--sgf-color-text);
}

/* La acción principal: alineada a la derecha como en el resto de
   pantallas de decisión, no estirada de lado a lado. */
.sgf-auth__submit {
  align-self: flex-end;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--sgf-space-6);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-auth__submit:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.sgf-auth__submit {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .sgf-auth__submit:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}
.sgf-auth__submit.is-busy, .sgf-auth__submit:disabled {
  opacity: 0.55;
  cursor: default;
}
@media (max-width: 479px) {
  .sgf-auth__submit {
    align-self: stretch;
  }
}

/* El doble formulario de WooCommerce no debe reaparecer por ninguna
   vía: esta pantalla lo sustituye entera. */
.woocommerce-account:not(.logged-in) .sgf-auth ~ #customer_login,
.woocommerce-account:not(.logged-in) .sgf-auth ~ .u-columns {
  display: none;
}

/**
 * Colores del mismo modelo
 */
.sgf-colorways {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-1);
  margin: 0;
}

.sgf-colorway {
  flex: none;
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--sgf-color-surface);
  border: 1px solid transparent;
  border-radius: 0;
  transition: border-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-colorway img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sgf-colorway:hover, .sgf-colorway:focus-visible {
  border-color: var(--sgf-color-control);
  outline: none;
}
.sgf-colorway.is-current {
  border-color: var(--sgf-color-text);
}

.sgf-colorway--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sgf-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--sgf-color-muted);
  background: transparent;
  border-color: transparent;
}

/* ─── En la tarjeta del catalogo ─────────────────────────────
   Fila unica bajo la foto. Si no caben, se desplaza a lo ancho en
   vez de partirse en dos lineas: una segunda fila movería el titulo
   solo en algunas tarjetas y descuadraria la rejilla. */
.sgf-colorways--card {
  margin-top: var(--sgf-space-1);
  margin-bottom: 12px;
  gap: var(--sgf-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.sgf-colorways--card::-webkit-scrollbar {
  display: none;
}
.sgf-colorways--card .sgf-colorway {
  width: 40px;
  height: 40px;
}
@media (max-width: 767px) {
  .sgf-colorways--card .sgf-colorway {
    width: 34px;
    height: 34px;
  }
}

/* La foto grande cambia sin parpadeo. La imagen nueva se precarga en
   JS, asi que aqui solo se suaviza el relevo. */
.sgf-product-card__image {
  transition: opacity var(--sgf-duration-fast) var(--sgf-ease-out);
}

/* ─── En la ficha ────────────────────────────────────────────
   Rejilla, no fila: en la ficha hay sitio y verlos todos de un
   vistazo evita tener que desplazar algo dentro de la columna. */
.sgf-colorways--single {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: var(--sgf-space-2);
  margin-block: var(--sgf-space-4);
}
.sgf-colorways--single .sgf-colorway {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .sgf-colorways--single {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }
}

/**
 * Pedido recibido
 */
.sgf-thanks {
  max-width: 640px;
  margin-inline: auto;
  padding-block: var(--sgf-space-9) var(--sgf-space-12);
}
@media (max-width: 767px) {
  .sgf-thanks {
    padding-block: var(--sgf-space-6) var(--sgf-space-9);
  }
}

/* ─── Confirmacion ───────────────────────────────────────────── */
.sgf-thanks__head {
  text-align: center;
  margin-bottom: var(--sgf-space-9);
}

/* La marca de verificacion se retiro: la barra de pasos remata en
   verde justo encima y hacia el mismo trabajo. Con las dos, el primer
   golpe de vista tenia que decidir cual de las dos leer. */
.sgf-thanks__title {
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
  margin: 0 0 var(--sgf-space-3);
}
@media (max-width: 767px) {
  .sgf-thanks__title {
    font-size: 26px;
    line-height: 34px;
  }
}

.sgf-thanks__lead {
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-muted);
  margin: 0 auto;
  max-width: 46ch;
}
.sgf-thanks__lead strong {
  color: var(--sgf-color-text);
  font-weight: 500;
}

.sgf-thanks__ref {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sgf-space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: var(--sgf-space-4) 0 0;
}
.sgf-thanks__ref span {
  font-weight: 500;
  color: var(--sgf-color-text);
  font-variant-numeric: tabular-nums;
}

/* ─── Cuando llega ───────────────────────────────────────────
   El dato que de verdad se busca. Va antes que nada administrativo y
   con el peso tipografico que le corresponde por eso. */
.sgf-thanks__eta {
  text-align: center;
  padding: var(--sgf-space-5);
  margin-bottom: var(--sgf-space-7);
  background: var(--sgf-color-surface);
}

.sgf-thanks__eta-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-1);
}

.sgf-thanks__eta-date {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}
.sgf-thanks__eta-date::first-letter {
  text-transform: uppercase;
}

.sgf-thanks__eta-where {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: var(--sgf-space-1) 0 0;
}

/* ─── Por donde va ───────────────────────────────────────────
   Cuatro pasos con el primero ya hecho: el trayecto esta empezado, no
   por empezar. Ver algo de camino recorrido sostiene mejor la espera
   que una barra a cero. */
.sgf-thanks__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 var(--sgf-space-9);
  padding: 0;
}

.sgf-thanks__step {
  position: relative;
  padding-top: var(--sgf-space-4);
  text-align: center;
}
.sgf-thanks__step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sgf-color-border);
}
.sgf-thanks__step:first-child::before {
  left: 50%;
}
.sgf-thanks__step:last-child::before {
  right: 50%;
}
.sgf-thanks__step.is-done::before {
  background: var(--sgf-color-text);
}
.sgf-thanks__step.is-current ~ .sgf-thanks__step::before {
  background: var(--sgf-color-border);
}

.sgf-thanks__step-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sgf-color-bg);
  border: 2px solid var(--sgf-color-border);
}
.is-done .sgf-thanks__step-dot {
  background: var(--sgf-color-text);
  border-color: var(--sgf-color-text);
}

.sgf-thanks__step-label {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: var(--sgf-color-muted);
}
.is-current .sgf-thanks__step-label {
  font-weight: 500;
  color: var(--sgf-color-text);
}
@media (max-width: 479px) {
  .sgf-thanks__step-label {
    font-size: 12px;
  }
}

/* ─── Que has pedido ─────────────────────────────────────────── */
.sgf-thanks__panel {
  padding-top: var(--sgf-space-6);
  border-top: 1px solid var(--sgf-color-border);
  margin-bottom: var(--sgf-space-7);
}

.sgf-thanks__panel-title,
.sgf-thanks__col-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--sgf-space-4);
}

.sgf-thanks__items {
  list-style: none;
  margin: 0 0 var(--sgf-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-4);
}

.sgf-thanks__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--sgf-space-4);
  align-items: start;
  margin: 0;
}

.sgf-thanks__item-media {
  background: var(--sgf-color-surface);
}
.sgf-thanks__item-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.sgf-thanks__item-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  margin: 0;
}

.sgf-thanks__item-meta,
.sgf-thanks__item-qty {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: var(--sgf-space-1) 0 0;
}
.sgf-thanks__item-meta p,
.sgf-thanks__item-qty p {
  margin: 0;
}

.sgf-thanks__item-price {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Totales. Los digitos en tabulares para que las cifras se alineen en
   la columna y se puedan comparar de un vistazo. */
.sgf-thanks__totals {
  margin: 0;
  padding-top: var(--sgf-space-4);
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-thanks__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sgf-space-4);
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
}
.sgf-thanks__total + .sgf-thanks__total {
  margin-top: var(--sgf-space-2);
}
.sgf-thanks__total dt, .sgf-thanks__total dd {
  margin: 0;
}
.sgf-thanks__total dd {
  font-variant-numeric: tabular-nums;
}
.sgf-thanks__total.is-final {
  margin-top: var(--sgf-space-3);
  padding-top: var(--sgf-space-3);
  border-top: 1px solid var(--sgf-color-border);
  font-size: 16px;
  font-weight: 500;
  color: var(--sgf-color-text);
}

/* ─── Donde y como ───────────────────────────────────────────── */
.sgf-thanks__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sgf-space-6);
  padding-top: var(--sgf-space-6);
  border-top: 1px solid var(--sgf-color-border);
  margin-bottom: var(--sgf-space-7);
}
@media (max-width: 599px) {
  .sgf-thanks__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sgf-space-5);
  }
}

.sgf-thanks__col address, .sgf-thanks__col p {
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
}

/* ─── Tranquilidad ───────────────────────────────────────────
   Contesta la duda que aparece justo despues de pagar, antes de que
   nadie tenga que ir a buscarla. */
.sgf-thanks__care {
  display: grid;
  gap: var(--sgf-space-4);
  padding: var(--sgf-space-5);
  margin-bottom: var(--sgf-space-7);
  background: var(--sgf-color-surface);
}

.sgf-thanks__care-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--sgf-space-3);
  align-items: start;
}
.sgf-thanks__care-item svg {
  width: 24px;
  height: 24px;
  color: var(--sgf-color-text);
}

.sgf-thanks__care-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  margin: 0;
}

.sgf-thanks__care-note {
  font-size: 14px;
  line-height: 20px;
  color: var(--sgf-color-muted);
  margin: var(--sgf-space-1) 0 0;
}

/* ─── Que hacer ahora ────────────────────────────────────────
   Sin carrusel de productos. Vender otra vez a los diez segundos de
   cobrar convierte un momento de confianza en otra transaccion. */
.sgf-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgf-space-3);
  justify-content: center;
}

.sgf-thanks__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--sgf-space-6);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-thanks__cta:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.sgf-thanks__cta {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .sgf-thanks__cta:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}
.sgf-thanks__cta--quiet {
  background: var(--sgf-color-bg);
  color: var(--sgf-color-text);
  border-color: var(--sgf-color-control);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-thanks__cta--quiet:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-thanks__cta--quiet:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
@media (max-width: 479px) {
  .sgf-thanks__cta {
    width: 100%;
  }
}

/* Pedido no encontrado o pago fallido: sin marca de verificacion y
   sin celebrar nada. */
.sgf-thanks--empty,
.sgf-thanks--failed {
  text-align: center;
}
.sgf-thanks--empty .sgf-thanks__lead,
.sgf-thanks--failed .sgf-thanks__lead {
  margin-bottom: var(--sgf-space-6);
}

/* ─── Correcciones sobre reglas globales ─────────────────────
   Dos selectores del theme alcanzan hasta aqui y hay que pararlos en
   su sitio, no bajando su especificidad en el origen —donde son
   correctos— sino subiendo la de aqui. */
/* base/elements/_lists.scss pone TODO <dt> en monoespaciada y caja
   alta. En una lista de definiciones de un glosario tiene sentido;
   en una tabla de importes convierte "Subtotal" en un rotulo tecnico
   gritando al lado de una cifra. */
/* Sin anclar a .sgf-thanks: estos mismos totales se reutilizan en la
   ficha de pedido de Mi cuenta, dentro de .sgf-order. Atado al
   contenedor, alli volvia a ganar la regla global de <dt> y los
   rotulos salian en monoespaciada y caja alta otra vez.
   La especificidad que hace falta la da el propio doble selector. */
.sgf-thanks__totals .sgf-thanks__total dt {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.sgf-thanks__totals .sgf-thanks__total.is-final dt {
  font-size: 16px;
  font-weight: 500;
}

/* `.sgf-entry__content a` subraya todo enlace del contenido, y gana a
   .sgf-thanks__cta por especificidad. Un boton no se subraya. */
.sgf-thanks__cta, .sgf-order .sgf-thanks__cta {
  text-decoration: none;
}

/**
 * Historia de producto
 */
.sgf-story {
  padding-block: var(--sgf-space-12);
}
@media (max-width: 767px) {
  .sgf-story {
    padding-block: var(--sgf-space-9);
  }
}

.sgf-story__inner {
  max-width: 1840px;
  margin-inline: auto;
  padding-inline: var(--sgf-gutter);
}
@media (max-width: 767px) {
  .sgf-story__inner {
    padding-inline: var(--sgf-space-3);
  }
}
.sgf-story__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-11);
}
.sgf-story__inner > * {
  margin-block: 0;
}

/* ─── Titulos de seccion ─────────────────────────────────────── */
.sgf-story h2,
.sgf-story__title {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-5);
  max-width: none;
}
@media (max-width: 767px) {
  .sgf-story h2,
  .sgf-story__title {
    font-size: 22px;
    line-height: 30px;
  }
}

/* ─── Caracteristicas: columnas de foto + texto ──────────────── */
/* La disposicion se declara aqui y no se hereda de la hoja de bloques
   de WordPress: el theme no la carga, asi que si algun dia cambia lo
   que WordPress inyecta en linea, esta franja se descuadraria sin que
   nadie hubiera tocado nada. */
.sgf-story .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sgf-space-3);
}
.sgf-story .wp-block-columns > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 781px) {
  .sgf-story .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
  }
}

.sgf-story .wp-block-column figure, .sgf-story .wp-block-column img {
  margin: 0;
  width: 100%;
}
.sgf-story .wp-block-column img {
  display: block;
  aspect-ratio: var(--sgf-ratio-alta);
  object-fit: cover;
  background: var(--sgf-color-surface);
}
.sgf-story .wp-block-column h3 {
  font-family: var(--sgf-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  margin: var(--sgf-space-4) 0 var(--sgf-space-2);
}
.sgf-story .wp-block-column p {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
  max-width: none;
}

/* ─── Cita con foto ──────────────────────────────────────────── */
.sgf-story .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--sgf-color-surface);
}
.sgf-story .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  order: 2;
}
.sgf-story .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  order: 1;
}
@media (max-width: 767px) {
  .sgf-story .wp-block-media-text {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sgf-story .wp-block-media-text .wp-block-media-text__content {
  padding: var(--sgf-space-9);
}
@media (max-width: 767px) {
  .sgf-story .wp-block-media-text .wp-block-media-text__content {
    padding: var(--sgf-space-5);
  }
}
.sgf-story .wp-block-media-text img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sgf-story__quote-text {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: -0.01em;
  color: var(--sgf-color-text);
  text-wrap: balance;
  margin: 0 0 var(--sgf-space-5);
  max-width: none;
}
@media (max-width: 1023px) {
  .sgf-story__quote-text {
    font-size: 22px;
    line-height: 30px;
  }
}

.sgf-story__quote-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--sgf-color-text);
  margin: 0;
}

.sgf-story__quote-role {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
}

/* ─── Galerias dentro de una historia ────────────────────────────
   "Completa el look" ya no vive aqui: tiene su propia franja, en
   _looks.scss. Estas reglas se quedan para cualquier galeria que la
   tienda meta en una historia, que sigue siendo un bloque valido. */
.sgf-story .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sgf-space-3);
}
@media (max-width: 767px) {
  .sgf-story .wp-block-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sgf-story .wp-block-gallery figure {
  margin: 0;
}
.sgf-story .wp-block-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--sgf-color-surface);
}
@media (max-width: 767px) {
  .sgf-story .wp-block-gallery {
    gap: var(--sgf-space-2);
  }
}
.sgf-story .wp-block-gallery a {
  text-decoration: none;
}

/* El pie de foto, de vuelta al flujo.
   -----------------------------------
   El bloque galeria de WordPress lo pinta en `position: absolute`
   sobre la propia imagen, con un degradado negro detras para que el
   texto blanco se lea. Es razonable para una foto con titulo, y
   pesimo para un pie que hay que leer entero.

   Su regla es
     .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption
   y ese `:not(#individual-image)` no filtra nada: es una cuña de
   especificidad, mete el peso de un ID en el selector. Un
   `.sgf-story .wp-block-gallery figcaption` normal pierde contra ella,
   asi que hay que igualar el ID para poder ganarle. */
.sgf-story .wp-block-gallery figure.wp-block-image:not(#individual-image) figcaption {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: auto;
  max-height: none;
  padding: 0;
  margin: var(--sgf-space-2) 0 0;
  background: none;
  text-align: left;
  font-size: inherit;
  color: inherit;
}

/* ─── Foto a sangre ──────────────────────────────────────────── */
.sgf-story__hero,
.sgf-story .wp-block-image.alignfull {
  margin: 0;
}
.sgf-story__hero img,
.sgf-story .wp-block-image.alignfull img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
}

/* Sin bordes redondeados en ninguna foto de la historia: el catalogo
   entero es de esquina viva. */
.sgf-story img {
  border-radius: 0;
}

/* ─── Carriles ───────────────────────────────────────────────
   Con mas de tres piezas la fila se convierte en carrusel. Lo decide
   story-carousel.js contando: con tres o menos no se toca nada,
   porque una fila que se desplaza sin tener mas que enseñar es un
   mecanismo mintiendo. */
.sgf-story__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sgf-space-4);
}
.sgf-story__head h2 {
  margin-bottom: 0;
}
.sgf-story__head {
  margin-bottom: calc(var(--sgf-space-5) - var(--sgf-space-11));
}

.sgf-story__nav {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2);
  flex: none;
}
.sgf-story__nav[hidden] {
  display: none;
}
.sgf-story__nav--alone {
  justify-content: flex-end;
  margin-bottom: var(--sgf-space-4);
}

.sgf-story__arrow {
  /* La pieza la define `sgf-carril-flecha`: era idéntica a la de
     recomendados salvo en el tamaño, con el mismo comentario sobre el
     estado desactivado escrito en los dos ficheros. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 50%;
  color: var(--sgf-color-text);
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-story__arrow:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sgf-story__arrow:hover {
    border-color: var(--sgf-color-text);
    background: color-mix(in srgb, var(--sgf-color-text) 6%, transparent);
  }
}
.sgf-story__arrow svg {
  width: 16px;
  height: 16px;
}
.sgf-story__arrow:disabled, .sgf-story__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* El carril en si. Se desborda a lo ancho con anclaje, para que cada
   parada deje una pieza entera a la vista y nunca media foto. */
.sgf-story__rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.sgf-story__rail::-webkit-scrollbar {
  display: none;
}
.sgf-story__rail > * {
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .sgf-story__rail {
    margin-inline: calc(var(--sgf-space-3) * -1);
    padding-inline: var(--sgf-space-3);
  }
  .sgf-story__rail > * {
    scroll-snap-align: start;
  }
}

/* La galeria en modo carril deja de ser rejilla. */
.sgf-story .wp-block-gallery.sgf-story__rail {
  display: flex;
  grid-template-columns: none;
}

/* Ancho de las piezas del carril
   ------------------------------
   Va aparte y con selector completo a proposito. La regla de las
   columnas —`.sgf-story .wp-block-columns > .wp-block-column`— tiene
   especificidad (0,3,0) y lleva `flex: 1 1 0`. Un `> *` dentro de
   .sgf-story__rail se queda en (0,2,0) y perdia: las cinco piezas se
   repartian el ancho, encajaban justas, el carril no desbordaba y las
   flechas no llegaban a aparecer nunca.

   Tres por pantalla con la cuarta asomando: sin ese trozo visible
   nadie desplaza, porque no sabe que puede. */
.sgf-story .wp-block-columns.sgf-story__rail > .wp-block-column,
.sgf-story .wp-block-gallery.sgf-story__rail > figure,
.sgf-story .wp-block-gallery.sgf-story__rail > .wp-block-image {
  flex: 0 0 clamp(240px, 30%, 380px);
  min-width: 0;
}

@media (max-width: 767px) {
  .sgf-story .wp-block-columns.sgf-story__rail > .wp-block-column,
  .sgf-story .wp-block-gallery.sgf-story__rail > figure,
  .sgf-story .wp-block-gallery.sgf-story__rail > .wp-block-image {
    flex-basis: 78%;
  }
}
.sgf-looks {
  padding-block: var(--sgf-space-12);
}
@media (max-width: 767px) {
  .sgf-looks {
    padding-block: var(--sgf-space-9);
  }
}

.sgf-looks__inner {
  max-width: 1840px;
  margin-inline: auto;
  padding-inline: var(--sgf-gutter);
}
@media (max-width: 767px) {
  .sgf-looks__inner {
    padding-inline: var(--sgf-space-3);
  }
}

.sgf-looks__title {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-5);
}
@media (max-width: 767px) {
  .sgf-looks__title {
    font-size: 22px;
    line-height: 30px;
  }
}

.sgf-looks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sgf-space-3);
}
@media (max-width: 767px) {
  .sgf-looks__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sgf-space-4);
  }
}

.sgf-looks__item {
  position: relative;
  margin: 0;
  background: var(--sgf-color-surface);
  overflow: hidden;
}

.sgf-looks__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--sgf-ratio-retrato);
  object-fit: cover;
}

/* ─── El boton de abrir ──────────────────────────────────────────
   Abajo a la izquierda, sobre la foto. Siempre visible: un look que
   pide hover para revelar el CTA es un look que no se abre. */
.sgf-looks__cta {
  position: absolute;
  left: var(--sgf-space-3);
  bottom: var(--sgf-space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
}
.sgf-looks__cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sgf-looks__cta {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-looks__cta:hover {
  background: var(--sgf-color-surface);
}
@media (max-width: 767px) {
  .sgf-looks__cta {
    left: var(--sgf-space-2);
    bottom: var(--sgf-space-2);
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sgf-looks__cta {
    transition: none;
  }
}
/* ═══════════════════════════════════════════════════════════
   EL DIALOGO
   ═══════════════════════════════════════════════════════════ */
.sgf-looks__modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--sgf-z-nav) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sgf-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-looks__modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sgf-looks__modal .sgf-looks__dialog {
  transform: scale(0.96);
  transform-origin: center;
  transition: transform var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-looks__modal.is-open .sgf-looks__dialog {
  transform: none;
}
.sgf-looks__modal[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .sgf-looks__modal {
    padding: 0;
  }
}

.sgf-looks__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
}

.sgf-looks__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  width: min(1040px, 100%);
  height: min(660px, 92vh);
  max-height: min(660px, 92vh);
  background: var(--sgf-color-bg);
  overflow: hidden;
}
@media (max-width: 767px) {
  .sgf-looks__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    max-height: 100vh;
  }
}

.sgf-looks__close {
  position: absolute;
  top: var(--sgf-space-2);
  right: var(--sgf-space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--sgf-color-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--sgf-color-text);
}
.sgf-looks__close svg {
  width: 18px;
  height: 18px;
}
.sgf-looks__close:hover {
  background: var(--sgf-color-surface);
}

/* ─── La foto del conjunto ───────────────────────────────────── */
.sgf-looks__stage {
  position: relative;
  background: var(--sgf-color-surface);
  min-height: 0;
}
@media (max-width: 767px) {
  .sgf-looks__stage {
    aspect-ratio: 1/1;
  }
}

.sgf-looks__stage-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sgf-looks__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--sgf-color-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--sgf-color-text);
}
.sgf-looks__arrow svg {
  width: 16px;
  height: 16px;
}
.sgf-looks__arrow--prev {
  left: var(--sgf-space-2);
}
.sgf-looks__arrow--next {
  right: var(--sgf-space-2);
}
.sgf-looks__arrow:hover {
  background: var(--sgf-color-surface);
}

.sgf-looks__counter {
  position: absolute;
  top: var(--sgf-space-2);
  left: var(--sgf-space-2);
  padding: 4px 12px;
  font-family: var(--sgf-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--sgf-color-text);
  font-variant-numeric: tabular-nums;
  background: var(--sgf-color-bg);
  border-radius: 999px;
}

/* ─── La lista de piezas ─────────────────────────────────────── */
.sgf-looks__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--sgf-space-6) var(--sgf-space-5);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
@media (max-width: 767px) {
  .sgf-looks__list {
    padding: var(--sgf-space-4) var(--sgf-space-3);
  }
}

.sgf-look-piece {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--sgf-space-3);
  align-items: start;
  padding-block: var(--sgf-space-3);
}
.sgf-look-piece + .sgf-look-piece {
  border-top: 1px solid var(--sgf-color-border);
}
.sgf-look-piece:first-child {
  padding-top: 0;
}

.sgf-look-piece__photo {
  display: block;
  text-decoration: none;
}
.sgf-look-piece__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--sgf-color-surface);
  border-radius: 0;
}

.sgf-look-piece__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sgf-look-piece__name {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--sgf-color-text);
}
.sgf-look-piece__name:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sgf-look-piece__sub {
  margin: 0;
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--sgf-color-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sgf-look-piece__buy {
  align-self: flex-start;
  margin-top: var(--sgf-space-2);
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: none;
  color: var(--sgf-color-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.sgf-look-piece__buy:hover {
  text-decoration-thickness: 2px;
}

/* Con el dialogo abierto la pagina de detras no se desplaza. Solo
   el body: overflow hidden en html bloquea el scroll de la lista. */
body.sgf-looks-abierto {
  overflow: hidden;
}

.sgf-reviews {
  padding-block: var(--sgf-space-12);
}
@media (max-width: 767px) {
  .sgf-reviews {
    padding-block: var(--sgf-space-9);
  }
}

.sgf-reviews__inner {
  max-width: 1840px;
  margin-inline: auto;
  padding-inline: var(--sgf-gutter);
}
@media (max-width: 767px) {
  .sgf-reviews__inner {
    padding-inline: var(--sgf-space-3);
  }
}

.sgf-reviews__title {
  font-family: var(--sgf-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sgf-space-5);
}
@media (max-width: 767px) {
  .sgf-reviews__title {
    font-size: 22px;
    line-height: 30px;
  }
}

.sgf-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sgf-space-3);
}
@media (max-width: 767px) {
  .sgf-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sgf-space-4);
  }
}

.sgf-review-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--sgf-space-5);
  background: var(--sgf-color-surface);
}

.sgf-review-card__rating {
  margin: 0 0 var(--sgf-space-3);
}
.sgf-review-card__rating .star-rating {
  font-size: 14px;
}

.sgf-review-card__text {
  margin: 0 0 var(--sgf-space-4);
}
.sgf-review-card__text p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-text);
  max-width: none;
}
.sgf-review-card__text p + p {
  margin-top: var(--sgf-space-2);
}

.sgf-review-card__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--sgf-color-text);
  margin: auto 0 0;
}

.sgf-review-card__meta {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
}

.sgf-reviews__empty {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-5);
  max-width: 46ch;
}

/* El disparador: la píldora secundaria, debajo de las cards.
   El formulario ya no está en la franja — va en el diálogo. */
.sgf-reviews__open {
  margin-top: var(--sgf-space-5);
}

.sgf-reviews__empty + .sgf-reviews__open {
  margin-top: 0;
}

/* ─── El diálogo ───────────────────────────────────────────────
   Copia de la guía de tallas: fondo, panel, cabecera sticky y
   cruz. El z-index es el de «Completa el look»: por encima de
   la cabecera, que si no flota encima del panel. */
.sgf-reviews__modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--sgf-z-nav) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sgf-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-reviews__modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sgf-reviews__modal .sgf-reviews__dialog {
  transform: scale(0.96);
  transform-origin: center;
  transition: transform var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-reviews__modal.is-open .sgf-reviews__dialog {
  transform: none;
}
.sgf-reviews__modal[hidden] {
  display: none;
}

.sgf-reviews__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.sgf-reviews__dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--sgf-color-bg);
}
.sgf-reviews__dialog:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}

.sgf-reviews__dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sgf-space-4);
  padding: var(--sgf-space-4) var(--sgf-space-5);
  background: var(--sgf-color-bg);
  border-bottom: 1px solid var(--sgf-color-border);
}

.sgf-reviews__dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.sgf-reviews__dialog-close {
  display: flex;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sgf-color-text);
  cursor: pointer;
}

.sgf-reviews__dialog-body {
  padding: var(--sgf-space-5);
}

body.sgf-reviews-abierto {
  overflow: hidden;
}

.sgf-reviews__comment-form textarea.input-text {
  width: 100%;
  min-height: 120px;
  padding: var(--sgf-space-3);
}
.sgf-reviews__comment-form .form-submit {
  margin: 0;
}
.sgf-reviews__comment-form .form-submit .sgf-btn {
  --btn-bg: var(--sgf-color-text);
  --btn-fg: var(--sgf-color-bg);
  --btn-border: var(--sgf-color-text);
  width: auto;
  min-width: 160px;
  height: 56px;
  padding-inline: var(--sgf-space-5);
  background: var(--sgf-color-text);
  color: var(--sgf-color-bg);
  border-color: var(--sgf-color-text);
  border-radius: var(--sgf-radius-pill);
  transition: background-color var(--sgf-duration-fast) var(--sgf-ease-out), border-color var(--sgf-duration-fast) var(--sgf-ease-out), color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-reviews__comment-form .form-submit .sgf-btn:focus-visible {
  outline: 2px solid var(--sgf-color-text);
  outline-offset: 2px;
}
.sgf-reviews__comment-form .form-submit .sgf-btn {
  /* EL RELLENO SUBÍA A UN GRIS QUE NO ERA DE LA CASA — 1 oct
     --------------------------------------------------------
     Era `$sgf-gray-700`, o sea `#3d3d3d` escrito a pelo en Sass. En
     Junciera el botón primario es `#1a1814`, un negro CÁLIDO: al
     pasar el ratón saltaba a un gris FRÍO. No es que se viera poco,
     es que cambiaba de familia de color, y encima era un literal que
     ninguna marca podía cambiar desde el panel.

     Ahora se aclara un paso desde su propio color, mezclando con el
     fondo de la página. Conserva el tono de la marca sea cual sea, y
     el salto se nota igual en claro que en oscuro. */
  /* AL GRANATE, QUE YA ES UN COLOR DE LA CASA — 1 oct
     -------------------------------------------------
     Antes aclaraba el propio negro un paso. Funcionaba y no decía
     nada: un botón oscuro que al tocarlo se vuelve un poco menos
     oscuro es un cambio que se mide, no que se siente.

     El granate ya viste el pie y la tira de arriba. Usarlo también
     aquí hace que el color aparezca en los tres sitios donde la web
     responde o cierra, en vez de ser el color de dos adornos. Y el
     salto se nota de verdad, que era lo que faltaba.

     Sale de `--sgf-color-ink`, igual que el pie: un solo sitio donde
     cambiarlo. En un theme recién instalado ese token vale lo mismo
     que el fondo, así que allí el hover sigue siendo el aclarado de
     antes y no un granate que nadie ha elegido. */
}
@media (hover: hover) and (pointer: fine) {
  .sgf-reviews__comment-form .form-submit .sgf-btn:hover {
    --btn-fg: var(--sgf-color-ink-fg);
    background: var(--sgf-color-ink);
    border-color: var(--sgf-color-ink);
    color: var(--sgf-color-ink-fg);
  }
}
.sgf-reviews__comment-form p.comment-form-cookies-consent {
  display: none;
}
.sgf-reviews__comment-form p.stars {
  font-size: 18px;
}
.sgf-reviews__comment-form p.stars span {
  display: flex;
  gap: 2px;
}
.sgf-reviews__comment-form p.stars a {
  width: 18px;
  height: 18px;
}

/**
 * Paneles plegables de la ficha
 */
.sgf-pdp-panels {
  margin-top: var(--sgf-space-6);
  border-top: 1px solid var(--sgf-color-border);
}

.sgf-pdp-panel {
  border-bottom: 1px solid var(--sgf-color-border);
}

.sgf-pdp-panel__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.sgf-pdp-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sgf-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sgf-space-3) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
}
.sgf-pdp-panel__toggle:hover {
  color: var(--sgf-color-muted);
}

.sgf-pdp-panel__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--sgf-duration-fast) var(--sgf-ease-out);
}

.sgf-pdp-panel__toggle[aria-expanded=true] .sgf-pdp-panel__chevron {
  transform: rotate(180deg);
}

.sgf-pdp-panel__body {
  padding-bottom: var(--sgf-space-4);
  overflow: hidden;
  transition: height var(--sgf-duration-ui) var(--sgf-ease-out), opacity var(--sgf-duration-ui) var(--sgf-ease-out);
}
.sgf-pdp-panel__body[hidden] {
  display: none;
}

.sgf-pdp-panel__prose p {
  font-size: 15px;
  line-height: 24px;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-3);
  max-width: none;
}
.sgf-pdp-panel__prose p:last-child {
  margin-bottom: 0;
}

/* Los datos como lista y no como tabla.
   La tabla de WooCommerce ponia los nombres en <th>, que el registro
   del theme pintaba en monoespaciada y caja alta: "TALLA", "COLOR".
   Aqui son frases. */
.sgf-pdp-panel__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sgf-space-2);
}
.sgf-pdp-panel__facts li {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: 0;
}
.sgf-pdp-panel__facts span {
  color: var(--sgf-color-text);
  font-weight: 500;
}
.sgf-pdp-panel__facts a {
  color: var(--sgf-color-text);
}

/* La descripcion, visible bajo el bloque de compra.
   No va en un acordeon: es lo que vende el producto y tiene que
   leerse sin pedir permiso. Lo que se pliega son los datos de
   consulta, que solo se buscan cuando ya hay interes. */
/* La barra fija de compra deja sitio al final de la pagina.
   Sin esto se monta encima de lo ultimo que haya —los paneles, en esta
   ficha— y tapa justo lo que se estaba leyendo. */
.single-product .sgf-site-content {
  padding-bottom: var(--sgf-sticky-atc-height, 0);
}

body.sgf-has-sticky-atc {
  --sgf-sticky-atc-height: 88px;
}
@media (max-width: 767px) {
  body.sgf-has-sticky-atc {
    --sgf-sticky-atc-height: 76px;
  }
}

/* Descriptor de una linea bajo el titulo.
   Identifica el producto de un vistazo; el texto de venta va abajo. */
.sgf-pdp-descriptor {
  font-size: 15px;
  line-height: 22px;
  color: var(--sgf-color-muted);
  margin: var(--sgf-space-1) 0 0;
  max-width: none;
}

/* ─── Ficha tecnica: un icono por dato ──────────────────────
   Antes era «Clave: valor» en una lista plana. Con el icono delante, la
   fila se reconoce antes de leerla: el termometro ya dice que eso es la
   temperatura de servicio, y la chincheta que eso es el origen.

   Tres columnas: icono, clave y valor. La clave en mono y caja alta
   —ahi SI es una etiqueta, no una frase— y el valor en texto normal. */
.sgf-pdp-facts {
  container-type: inline-size;
  container-name: sgf-facts;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sgf-pdp-facts__fila {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: var(--sgf-space-3);
  row-gap: 2px;
  align-items: center;
  margin: 0;
  padding: var(--sgf-space-3) 0;
  border-bottom: 1px solid var(--sgf-color-border);
}
.sgf-pdp-facts__fila:last-child {
  border-bottom: 0;
}

.sgf-pdp-facts__icono {
  grid-area: 1/1/3/2;
  width: 30px;
  height: 30px;
  color: var(--sgf-color-text);
}

.sgf-pdp-facts__clave {
  font-family: var(--sgf-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--sgf-tracking-wider);
  text-transform: uppercase;
  color: var(--sgf-color-muted);
}

.sgf-pdp-facts__valor {
  font-size: 15px;
  line-height: 1.45;
  color: var(--sgf-color-text);
}

.sgf-pdp-facts__fila.is-sin-icono {
  grid-template-columns: minmax(0, 1fr);
}
.sgf-pdp-facts__fila.is-sin-icono .sgf-pdp-facts__clave,
.sgf-pdp-facts__fila.is-sin-icono .sgf-pdp-facts__valor {
  grid-column: 1;
}

@container sgf-facts (min-width: 420px) {
  .sgf-pdp-facts__fila {
    grid-template-columns: 30px minmax(0, 150px) minmax(0, 1fr);
    row-gap: 0;
  }
  .sgf-pdp-facts__icono {
    grid-area: 1/1;
  }
  .sgf-pdp-facts__clave {
    grid-area: 1/2;
  }
  .sgf-pdp-facts__valor {
    grid-area: 1/3;
  }
  .sgf-pdp-facts__fila.is-sin-icono {
    grid-template-columns: 30px minmax(0, 150px) minmax(0, 1fr);
  }
  .sgf-pdp-facts__fila.is-sin-icono .sgf-pdp-facts__clave {
    grid-column: 2;
  }
  .sgf-pdp-facts__fila.is-sin-icono .sgf-pdp-facts__valor {
    grid-column: 3;
  }
}
/**
 * Perfil sensorial de la ficha
 */
.sgf-perfil {
  margin-top: var(--sgf-space-6);
  container-type: inline-size;
  container-name: sgf-perfil;
}

.sgf-perfil__titulo {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  margin: 0 0 var(--sgf-space-4);
}

/* ─── Escalas ──────────────────────────────────────────────── */
.sgf-perfil__escalas {
  display: grid;
  gap: var(--sgf-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sgf-perfil__escala {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--sgf-space-3);
  row-gap: 8px;
  margin: 0;
}
.sgf-perfil__escala .sgf-perfil__eje {
  grid-area: 1/1;
}
.sgf-perfil__escala .sgf-perfil__lectura {
  grid-area: 1/2;
}
.sgf-perfil__escala .sgf-perfil__pista {
  grid-area: 2/1/3/-1;
}

@container sgf-perfil (min-width: 420px) {
  .sgf-perfil__escala {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 210px) 112px;
    align-items: center;
    row-gap: 0;
  }
  .sgf-perfil__escala .sgf-perfil__eje {
    grid-area: 1/1;
  }
  .sgf-perfil__escala .sgf-perfil__pista {
    grid-area: 1/2;
  }
  .sgf-perfil__escala .sgf-perfil__lectura {
    grid-area: 1/3;
    text-align: right;
  }
}
.sgf-perfil__eje {
  font-family: var(--sgf-font-body);
  font-size: var(--sgf-text-sm);
  line-height: 1.3;
  color: var(--sgf-color-text);
}

.sgf-perfil__lectura {
  font-family: var(--sgf-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--sgf-tracking-wider);
  text-transform: uppercase;
  color: var(--sgf-color-muted);
  white-space: nowrap;
}

.sgf-perfil__pista {
  grid-column: 1/-1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
}

.sgf-perfil__paso {
  height: 3px;
  border-radius: 2px;
  background: var(--sgf-color-border);
}
.sgf-perfil__paso.is-on {
  background: var(--sgf-color-ink);
}

/* ─── Notas ────────────────────────────────────────────────── */
.sgf-perfil__rotulo {
  font-family: var(--sgf-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  margin: var(--sgf-space-5) 0 var(--sgf-space-4);
}

.sgf-perfil__notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: var(--sgf-space-4) var(--sgf-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sgf-perfil__nota {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.sgf-perfil__icono {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--sgf-color-text);
}

.sgf-perfil__palabra {
  font-family: var(--sgf-font-body);
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: var(--sgf-color-muted);
}

.sgf-perfil__nota.is-sin-icono {
  justify-content: center;
}

/* ─── La medida se toma, no aparece ──────────────────────────

   Cuando el bloque entra, los tramos llenos crecen de izquierda a
   derecha y los iconos suben detras. No es decoracion: una escala que
   se llena ENSEÑA que eso es una medida, y de paso lleva el ojo por la
   fila en el orden en que se lee.

   Todo cuelga de `[data-reveal]`, que lo pone `reveal.js`. Eso importa
   por dos cosas:

   - Sin JavaScript no hay atributo, no hay `scaleX(0)` y las barras se
     ven llenas desde el primer pintado. La escala nunca depende de que
     un script llegue.
   - Con `prefers-reduced-motion`, `reveal.js` marca `is-visible` de
     entrada y los tokens de duracion ya valen 0,01ms. No hace falta
     repetir aqui la media query: se apaga solo.
*/
.sgf-perfil[data-reveal] .sgf-perfil__paso.is-on {
  transform: scaleX(0);
  transform-origin: left center;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota {
  opacity: 0;
  transform: translateY(8px);
}
.sgf-perfil[data-reveal].is-visible .sgf-perfil__paso.is-on {
  transform: scaleX(1);
  transition: transform var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-perfil[data-reveal].is-visible .sgf-perfil__nota {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--sgf-duration-base) var(--sgf-ease-out), transform var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(1) .sgf-perfil__paso:nth-child(1) {
  transition-delay: 0ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(1) .sgf-perfil__paso:nth-child(2) {
  transition-delay: 35ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(1) .sgf-perfil__paso:nth-child(3) {
  transition-delay: 70ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(1) .sgf-perfil__paso:nth-child(4) {
  transition-delay: 105ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(1) .sgf-perfil__paso:nth-child(5) {
  transition-delay: 140ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(2) .sgf-perfil__paso:nth-child(1) {
  transition-delay: 50ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(2) .sgf-perfil__paso:nth-child(2) {
  transition-delay: 85ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(2) .sgf-perfil__paso:nth-child(3) {
  transition-delay: 120ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(2) .sgf-perfil__paso:nth-child(4) {
  transition-delay: 155ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(2) .sgf-perfil__paso:nth-child(5) {
  transition-delay: 190ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(3) .sgf-perfil__paso:nth-child(1) {
  transition-delay: 100ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(3) .sgf-perfil__paso:nth-child(2) {
  transition-delay: 135ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(3) .sgf-perfil__paso:nth-child(3) {
  transition-delay: 170ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(3) .sgf-perfil__paso:nth-child(4) {
  transition-delay: 205ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(3) .sgf-perfil__paso:nth-child(5) {
  transition-delay: 240ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(4) .sgf-perfil__paso:nth-child(1) {
  transition-delay: 150ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(4) .sgf-perfil__paso:nth-child(2) {
  transition-delay: 185ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(4) .sgf-perfil__paso:nth-child(3) {
  transition-delay: 220ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(4) .sgf-perfil__paso:nth-child(4) {
  transition-delay: 255ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(4) .sgf-perfil__paso:nth-child(5) {
  transition-delay: 290ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(5) .sgf-perfil__paso:nth-child(1) {
  transition-delay: 200ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(5) .sgf-perfil__paso:nth-child(2) {
  transition-delay: 235ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(5) .sgf-perfil__paso:nth-child(3) {
  transition-delay: 270ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(5) .sgf-perfil__paso:nth-child(4) {
  transition-delay: 305ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__escala:nth-child(5) .sgf-perfil__paso:nth-child(5) {
  transition-delay: 340ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota:nth-child(1) {
  transition-delay: 380ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota:nth-child(2) {
  transition-delay: 435ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota:nth-child(3) {
  transition-delay: 490ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota:nth-child(4) {
  transition-delay: 545ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota:nth-child(5) {
  transition-delay: 600ms;
}
.sgf-perfil[data-reveal] .sgf-perfil__nota:nth-child(6) {
  transition-delay: 655ms;
}

/**
 * Preguntas frecuentes de la ficha
 */
.sgf-faq {
  width: 100%;
  margin-top: var(--pdp-space-3xl, var(--sgf-space-16));
  margin-bottom: var(--pdp-space-3xl, var(--sgf-space-16));
  container-type: inline-size;
  container-name: sgf-faq;
}

.sgf-faq__inner {
  display: grid;
  gap: var(--sgf-space-6);
  padding-inline: var(--sgf-gutter);
}
@media (max-width: 767px) {
  .sgf-faq__inner {
    padding-inline: var(--pdp-space-sm, var(--sgf-space-4));
  }
}

.sgf-faq__titulo {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}

@container sgf-faq (min-width: 760px) {
  .sgf-faq__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sgf-space-8);
  }
}
.sgf-faq__cuerpo dl {
  margin: 0;
}
.sgf-faq__cuerpo dt {
  font-family: var(--sgf-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgf-color-text);
  text-wrap: balance;
}
.sgf-faq__cuerpo dd {
  margin: var(--sgf-space-2) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sgf-color-muted);
  max-width: 68ch;
}
.sgf-faq__cuerpo dd + dt {
  margin-top: var(--sgf-space-5);
  padding-top: var(--sgf-space-5);
  border-top: 1px solid var(--sgf-color-border);
}

/**
 * Galería de producto
 */
.woocommerce-product-gallery {
  opacity: 1 !important;
}

/* ─── El carril ──────────────────────────────────────────────── */
.woocommerce-product-gallery__wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.woocommerce-product-gallery__wrapper::-webkit-scrollbar {
  display: none;
}
.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery__image {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
  /* AQUÍ HABÍA UN `a { display: block }` — 1 oct
     -------------------------------------------
     Lo quita Sam. No hacía falta: la imagen de dentro ya es
     `display: block` y el enlace, al no tener más contenido, se
     ajusta a ella igual. */
  /* LA FOTO DE PRODUCTO NO SE RECORTA — 29 sep
     ------------------------------------------
     Esto forzaba 4:5 con `cover`. Medido con una foto real de
     900x829 —casi cuadrada—: salia a 505x631, o sea recortada por
     arriba y por abajo. En una ficha de producto eso es cortarle el
     cuello y la base a la botella, que es justo lo que el cliente
     ha venido a ver.

     La proporcion vertical es buena en una RETICULA, donde todas
     las fichas tienen que medir lo mismo para que la columna cuadre
     y un recorte no cuesta nada. En la ficha manda el producto, no
     la cuadricula.

     `contain` y no `cover`: si algun dia entra una foto apaisada,
     preferimos una banda de fondo a un recorte.

     Sin tope de altura. Lo lleve a poner y sobra: la foto de
     producto se ve entera y punto. Si una foto sale demasiado alta,
     el problema es la foto. */
}
.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--sgf-color-surface);
}

/* ─── Miniaturas: solo escritorio ───────────────────────────── */
.sgf-gallery__thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pdp-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sgf-gallery__thumbs li {
  margin: 0;
}
@media (max-width: 767px) {
  .sgf-gallery__thumbs {
    display: none;
  }
}

.sgf-gallery__thumb {
  display: block;
  width: var(--pdp-thumb);
  height: var(--pdp-thumb);
  padding: 0;
  background: var(--sgf-color-surface);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--sgf-duration-fast) var(--sgf-ease-out);
}
.sgf-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sgf-gallery__thumb:hover {
  border-color: var(--sgf-color-border);
}
.sgf-gallery__thumb.is-current {
  border-color: var(--sgf-color-text);
}

/* ─── Puntos: solo movil ────────────────────────────────────
   Un carril sin bordes visibles no dice cuantas fotos hay ni en cual
   estas. Los puntos lo dicen, y ocupan casi nada. */
.sgf-gallery__dots {
  display: none;
}
@media (max-width: 767px) {
  .sgf-gallery__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sgf-space-2);
    grid-column: 1;
    padding-block: var(--sgf-space-3);
  }
}

.sgf-gallery__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}
.sgf-gallery__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sgf-color-control);
  transition: width var(--sgf-duration-base) var(--sgf-ease-out), border-radius var(--sgf-duration-base) var(--sgf-ease-out), background-color var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-gallery__dot.is-current::after {
  width: 18px;
  border-radius: 3px;
  background: var(--sgf-color-text);
}

/* En movil la galeria ocupa el ancho completo de la pantalla: una
   foto de producto con margenes a los lados se ve como una miniatura
   grande, no como el producto. */
@media (max-width: 767px) {
  .single-product .woocommerce-product-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-product-gallery__wrapper {
    grid-column: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-product-gallery__wrapper {
    scroll-behavior: auto;
  }
  .sgf-gallery__dot::after,
  .sgf-gallery__thumb {
    transition: none;
  }
}
/**
 * Estados de tienda (agotado, sin resultados, cesta vacía) y módulos
 * que se contratan aparte
 */
/* ─────────────────────────────────────────────────────────────────
   DISTINTIVOS — artista, edición limitada, fecha de salida
   ───────────────────────────────────────────────────────────────── */
.sgf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgf-space-2);
  margin: 0 0 var(--sgf-space-3);
}

.sgf-badge {
  display: inline-block;
  font-family: var(--sgf-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--sgf-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 6px;
  border: 0;
  color: var(--sgf-color-muted);
  background: var(--sgf-color-surface);
}

.sgf-badge--limited {
  color: var(--sgf-color-muted);
  background: var(--sgf-color-surface);
}

.sgf-badge--release {
  border-color: var(--sgf-color-accent);
  color: var(--sgf-color-accent);
}

.sgf-product-card__body .sgf-badge {
  margin: 0 var(--sgf-space-1) var(--sgf-space-2) 0;
}

/* ─────────────────────────────────────────────────────────────────
   ESTADOS VACÍOS — catálogo, favoritos
   ───────────────────────────────────────────────────────────────── */
.sgf-empty {
  padding: var(--sgf-space-12) var(--sgf-space-4);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
}

/* DOS `h1` DECIAN LO MISMO — 30 sep
   =================================
   La plantilla pinta «Cesta» como titulo de pagina y el bloque pinta
   «Tu cesta esta vacia» como `h1`. El comentario del PHP daba por
   hecho que el titulo de pagina estaba escondido —«con el titulo de
   la pagina escondido, este es el titular de la pantalla»— pero no
   habia ninguna regla que lo escondiera.

   Resultado medido: dos `h1` en la misma pagina, los dos a 24px, uno
   encima del otro diciendo lo mismo. Mal para quien usa lector de
   pantalla y feo para todos.

   Se esconde el de la plantilla, que es el generico, y manda el del
   bloque, que es el que sabe lo que pasa. */
.woocommerce-cart .sgf-entry__header {
  display: none;
}

.sgf-empty__title {
  font-family: var(--sgf-font-display);
  /* Un escalon por encima: es el unico titular de la pantalla y a
     24px competia de tu a tu con el titulo de pagina que habia al
     lado. Ahora que aquel no esta, este puede mandar. */
  font-size: var(--sgf-text-3xl);
  line-height: var(--sgf-lead-3xl);
  letter-spacing: var(--sgf-track-3xl);
  line-height: var(--sgf-leading-tight);
  margin: 0 0 var(--sgf-space-2);
}

.sgf-empty__text {
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-6);
}

/* ─────────────────────────────────────────────────────────────────
   AGOTADO
   ───────────────────────────────────────────────────────────────── */
.sgf-oos {
  border: 0;
  border-top: 1px solid var(--sgf-color-border);
  padding: var(--sgf-space-5) 0 0;
  margin: var(--sgf-space-5) 0 0;
  background: transparent;
}

.sgf-oos__title {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin: 0 0 4px;
}

.sgf-oos__text {
  color: var(--sgf-color-muted);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.sgf-product-card.sgf-is-agotado .sgf-product-card__image {
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────────────
   LISTA DE ESPERA — preventa y reposición
   ───────────────────────────────────────────────────────────────── */
.sgf-waitlist {
  border: 0;
  border-top: 1px solid var(--sgf-color-border);
  padding: var(--sgf-space-5) 0 0;
  margin: var(--sgf-space-5) 0 0;
  background: transparent;
}

.sgf-waitlist__title {
  font-family: var(--sgf-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 4px;
}

.sgf-waitlist__text {
  color: var(--sgf-color-muted);
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 var(--sgf-space-4);
  max-width: 36em;
}

.sgf-waitlist__row {
  display: flex;
  align-items: stretch;
  gap: var(--sgf-space-2);
}
.sgf-waitlist__row input[type=email] {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding-inline: var(--sgf-space-3);
  font-family: var(--sgf-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 1px solid var(--sgf-color-control);
  border-radius: 2px;
  box-shadow: none;
}
.sgf-waitlist__row input[type=email]:focus {
  border-color: var(--sgf-color-text);
  outline: none;
}
.sgf-waitlist__row .sgf-btn {
  flex: none;
  height: 48px;
  padding-inline: var(--sgf-space-5);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.sgf-waitlist__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sgf-space-2);
  margin: var(--sgf-space-3) 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--sgf-color-muted);
}
.sgf-waitlist__consent input {
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--sgf-color-text);
}

/* ─────────────────────────────────────────────────────────────────
   PACK
   ───────────────────────────────────────────────────────────────── */
.sgf-bundle {
  margin: 0 0 var(--sgf-space-4);
}

.sgf-bundle__title {
  font-family: var(--sgf-font-mono);
  font-size: var(--sgf-text-xs);
  letter-spacing: var(--sgf-tracking-wide);
  text-transform: uppercase;
  color: var(--sgf-color-muted);
  margin: 0 0 var(--sgf-space-2);
}

.sgf-bundle__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sgf-bundle__item {
  display: flex;
  align-items: baseline;
  gap: var(--sgf-space-2);
  padding: var(--sgf-space-2) 0;
  border-bottom: 1px solid var(--sgf-color-border);
}
.sgf-bundle__item:last-child {
  border-bottom: 0;
}

.sgf-bundle__qty {
  font-family: var(--sgf-font-mono);
  font-size: var(--sgf-text-sm);
  color: var(--sgf-color-muted);
}

.sgf-bundle__oos {
  font-size: var(--sgf-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--sgf-tracking-wide);
  color: var(--sgf-color-error);
}

/* ─────────────────────────────────────────────────────────────────
   CUPÓN EN LA FICHA
   ───────────────────────────────────────────────────────────────── */
.sgf-coupon {
  margin: 0 0 var(--sgf-space-4);
  padding: var(--sgf-space-3);
  border: 1px dashed var(--sgf-color-accent);
}

.sgf-coupon__text {
  margin: 0;
  font-size: var(--sgf-text-sm);
}

.sgf-coupon__code {
  font-family: var(--sgf-font-mono);
  letter-spacing: var(--sgf-tracking-wide);
}

.sgf-coupon__terms {
  margin: var(--sgf-space-1) 0 0;
  font-size: var(--sgf-text-xs);
  color: var(--sgf-color-muted);
}

/* ─────────────────────────────────────────────────────────────────
   FAVORITO — estado guardado
   ───────────────────────────────────────────────────────────────── */
.sgf-favorite.is-on svg {
  fill: var(--sgf-color-accent);
  stroke: var(--sgf-color-accent);
}

/* ─────────────────────────────────────────────────────────────────
   RESEÑAS — el resumen junto al precio
   ───────────────────────────────────────────────────────────────── */
:root {
  --sgf-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.1l2.18 4.42 4.88.71-3.53 3.44.83 4.86L12 14.24 7.64 16.53l.83-4.86-3.53-3.44 4.88-.71z'/%3E%3C/svg%3E");
}

.star-rating {
  position: relative;
  display: inline-block;
  width: 5em;
  height: 1em;
  font-family: inherit;
  font-size: var(--sgf-text-sm);
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  color: var(--sgf-color-border);
}
.star-rating::before,
.star-rating span::before {
  content: "";
  display: block;
  width: 5em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--sgf-star) repeat-x;
  -webkit-mask-size: 1em 1em;
  mask: var(--sgf-star) repeat-x;
  mask-size: 1em 1em;
}
.star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  overflow: hidden;
  padding-top: 1.5em;
  color: var(--sgf-color-text);
  white-space: nowrap;
}
.star-rating span::before {
  position: absolute;
  top: 0;
  left: 0;
}

p.stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}
p.stars a {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  margin: 0;
  overflow: hidden;
  text-indent: 0;
  text-decoration: none;
  color: var(--sgf-color-border);
}
p.stars a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--sgf-star) center/contain no-repeat;
  mask: var(--sgf-star) center/contain no-repeat;
}
p.stars a:hover ~ a {
  color: var(--sgf-color-border);
}
p.stars:hover a {
  color: var(--sgf-color-text);
}
p.stars.selected a {
  color: var(--sgf-color-text);
}
p.stars.selected a.active ~ a {
  color: var(--sgf-color-border);
}

.sgf-rating-summary {
  display: flex;
  align-items: center;
  gap: var(--sgf-space-2);
  margin: 0 0 var(--sgf-space-3);
}

.sgf-rating-summary__count {
  font-size: var(--sgf-text-sm);
  color: var(--sgf-color-muted);
}

/* ─────────────────────────────────────────────────────────────────
   VISTA RÁPIDA
   ───────────────────────────────────────────────────────────────── */
.sgf-quick-view__open {
  position: absolute;
  top: var(--sgf-space-3);
  right: var(--sgf-space-3);
  left: auto;
  bottom: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--sgf-color-text);
  background: var(--sgf-color-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.sgf-quick-view__open svg {
  width: 14px;
  height: 14px;
  display: block;
}
.sgf-quick-view__open:hover, .sgf-quick-view__open:focus-visible {
  background: var(--sgf-color-surface);
}
@media (max-width: 767px) {
  .sgf-quick-view__open {
    top: var(--sgf-space-2);
    right: var(--sgf-space-2);
    width: 26px;
    height: 26px;
  }
  .sgf-quick-view__open svg {
    width: 13px;
    height: 13px;
  }
}

.sgf-quick-view {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sgf-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-quick-view.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sgf-quick-view .sgf-quick-view__dialog {
  transform: scale(0.96);
  transform-origin: center;
  transition: transform var(--sgf-duration-base) var(--sgf-ease-out);
}
.sgf-quick-view.is-open .sgf-quick-view__dialog {
  transform: none;
}
.sgf-quick-view[hidden] {
  display: none;
}

.sgf-quick-view__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.sgf-quick-view__dialog {
  position: relative;
  background: var(--sgf-color-bg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sgf-space-6);
}

.sgf-quick-view__close {
  position: absolute;
  top: var(--sgf-space-3);
  right: var(--sgf-space-3);
  z-index: 2;
  display: flex;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sgf-color-text);
  cursor: pointer;
}

.sgf-quick-view__grid {
  display: grid;
  gap: var(--sgf-space-6);
}
@media (min-width: 720px) {
  .sgf-quick-view__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sgf-quick-view__media img {
  width: 100%;
  height: auto;
  display: block;
}

.sgf-quick-view__full {
  display: inline-block;
  margin-top: var(--sgf-space-4);
  font-size: var(--sgf-text-sm);
  color: var(--sgf-color-muted);
}

.sgf-quick-view .reset_variations {
  display: none;
}

.sgf-quick-view__loading,
.sgf-quick-view__error {
  padding: var(--sgf-space-8) 0;
  text-align: center;
  color: var(--sgf-color-muted);
}

.sgf-no-scroll {
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   CESTA VACÍA
   ───────────────────────────────────────────────────────────────── */
.sgf-cart-drawer__empty {
  padding: var(--sgf-space-3) 0 var(--sgf-space-5);
  text-align: left;
}
.sgf-cart-drawer__empty p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--sgf-color-text);
}
.sgf-cart-drawer__empty a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/*# sourceMappingURL=woocommerce.css.map */