/* ==========================================================================
   Carrito, finalizar compra y mi cuenta
   Se carga solo en esas tres páginas (ver compra.php).
   ========================================================================== */

.sb-compra { padding-block: 2rem 4rem; }
@media (min-width: 768px) { .sb-compra { padding-block: 2.5rem 5rem; } }

/* Con JavaScript el botón de actualizar sobra: la cantidad se envía sola.
   Lleva :not(.sb-js) invertido a propósito, igual que .sb-solo-js en base.css. */
.sb-js .sb-solo-nojs { display: none; }

/* ---------- Cabecera ---------- */
.sb-compra-cab { margin-bottom: 2rem; }
.sb-compra-titulo { margin: 0.75rem 0 0; font-size: clamp(2.25rem, 5vw, 3.25rem); }
.sb-compra-bajada { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--sb-gris-70); }

/* ---------- Rejilla de dos columnas ---------- */
.sb-carrito { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) {
  .sb-carrito { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; }
}
@media (min-width: 1200px) {
  .sb-carrito { grid-template-columns: minmax(0, 1fr) 23rem; }
}

/* ---------- Líneas del carrito ---------- */
.sb-lineas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sb-gris-14); }

.sb-linea {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas: "foto cuerpo" "foto importe";
  gap: 0.5rem 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--sb-gris-14);
}
@media (min-width: 640px) {
  .sb-linea {
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    grid-template-areas: "foto cuerpo importe";
    gap: 1.5rem;
    align-items: start;
  }
}

.sb-linea-foto { grid-area: foto; }
.sb-linea-foto a { display: block; }
.sb-linea-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background-color: var(--sb-card);
}

.sb-linea-cuerpo { grid-area: cuerpo; min-width: 0; }
.sb-linea-nombre {
  margin: 0;
  font-family: var(--sb-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sb-linea-nombre a { color: var(--sb-ink); text-decoration: none; }
.sb-linea-nombre a:hover { color: var(--sb-sap-ink); }

.sb-linea-talla { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--sb-gris-70); }
.sb-linea-datos { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--sb-gris-70); }
.sb-linea-datos p { margin: 0; }
.sb-linea-aviso { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--sb-salmon-ink); }
.sb-linea-unica { margin: 0; font-size: 0.8125rem; color: var(--sb-gris-70); }

.sb-linea-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.875rem; }

.sb-linea-importe { grid-area: importe; text-align: left; }
@media (min-width: 640px) { .sb-linea-importe { text-align: right; } }
.sb-linea-total { margin: 0; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.sb-linea-total del { margin-right: 0.4rem; color: var(--sb-gris-50); font-weight: 400; }
.sb-linea-unitario { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--sb-gris-50); white-space: nowrap; }

/* Paso de cantidad: mismo trazo que la ficha de producto */
.sb-cantidad {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  box-sizing: border-box;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  padding: 0 0.25rem;
  background-color: var(--sb-blanco);
}
.sb-cantidad button {
  display: grid;
  place-items: center;
  padding: 0;
  width: 1.875rem;
  height: 1.875rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--sb-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.sb-cantidad button:hover,
.sb-cantidad button:focus { background-color: var(--sb-gris-7); color: var(--sb-ink); }
.sb-cantidad button[disabled] { opacity: 0.35; cursor: not-allowed; }
.sb-cantidad button[disabled]:hover { background: transparent; }
.sb-cantidad-num {
  width: 2.25rem;
  /* La misma altura y la misma caja que los botones de al lado: el campo traía su
     propia línea base y dejaba el menos y el más medio renglón más abajo. */
  height: 1.875rem;
  line-height: 1.875rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 0.875rem;
  color: var(--sb-ink);
  -moz-appearance: textfield;
}
.sb-cantidad-num::-webkit-outer-spin-button,
.sb-cantidad-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sb-linea-quitar {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--sb-gris-50);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.sb-linea-quitar:hover { color: var(--sb-salmon-ink); }

/* ---------- Pie de la lista ---------- */
.sb-carrito-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.sb-seguir { font-size: 0.875rem; color: var(--sb-gris-70); text-decoration: none; }
.sb-seguir:hover { color: var(--sb-sap-ink); }
.sb-actualizar {
  height: 2.5rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  background-color: transparent;
  padding-inline: 1.25rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--sb-ink);
  cursor: pointer;
}
.sb-actualizar:hover { background-color: var(--sb-gris-7); color: var(--sb-ink); }

/* ---------- Resumen ---------- */
@media (min-width: 960px) {
  .sb-resumen { position: sticky; top: 1.5rem; }
}
.sb-resumen-caja {
  border: 1px solid var(--sb-border);
  border-radius: 2px;
  background-color: var(--sb-card);
  padding: 1.5rem;
}
.sb-resumen-tit {
  margin: 0 0 1.25rem;
  font-family: var(--sb-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-gris-70);
}

.sb-resumen-filas { margin: 0; }
.sb-resumen-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9375rem; }
.sb-resumen-fila dt { margin: 0; color: var(--sb-gris-70); }
.sb-resumen-fila dd { margin: 0; text-align: right; }
.sb-resumen-fila--cupon dt { color: var(--sb-moss); }
.sb-resumen-nota { font-size: 0.8125rem; color: var(--sb-gris-50); }
.sb-cupon-quitar { border: 0; background: none; padding: 0; font: inherit; margin-left: 0.5rem; font-size: 0.75rem; color: var(--sb-gris-50); text-decoration: underline; cursor: pointer; }
.sb-cupon-quitar:hover,
.sb-cupon-quitar:focus,
.sb-cupon-quitar:focus-visible { background-color: transparent; color: var(--sb-salmon-ink); }

.sb-resumen-fila--total {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sb-gris-14);
  font-size: 1.125rem;
}
.sb-resumen-fila--total dt { color: var(--sb-ink); font-weight: 500; }
.sb-resumen-fila--total dd { font-family: var(--sb-font-display); font-size: 1.5rem; font-weight: 500; }
.sb-resumen-fila--total .amount { font-weight: 500; }

/* Cupón */
.sb-cupon { margin-top: 1rem; border-top: 1px solid var(--sb-gris-14); padding-top: 1rem; }
.sb-cupon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sb-gris-70);
  cursor: pointer;
  list-style: none;
}
.sb-cupon summary::-webkit-details-marker { display: none; }
.sb-cupon summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
  flex-shrink: 0;
}
.sb-cupon[open] summary::after { transform: rotate(-135deg); }
.sb-cupon-etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sb-cupon-fila { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.sb-cupon-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.5rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  background-color: var(--sb-blanco);
  padding-inline: 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--sb-ink);
}
.sb-cupon-boton {
  height: 2.5rem;
  border: 1px solid var(--sb-gris-30);
  border-radius: 2px;
  background-color: transparent;
  padding-inline: 1rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--sb-ink);
  cursor: pointer;
}
.sb-cupon-boton:hover { background-color: var(--sb-gris-7); color: var(--sb-ink); }

/* Botón de finalizar compra */
.sb-resumen-ir { margin-top: 1.25rem; }
.sb-ir-checkout,
.woocommerce .sb-resumen-ir a.sb-ir-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.25rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}
.sb-ir-checkout:hover,
.sb-ir-checkout:focus,
.woocommerce .sb-resumen-ir a.sb-ir-checkout:hover,
.woocommerce .sb-resumen-ir a.sb-ir-checkout:focus {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}
.sb-ir-checkout:active { transform: translateY(1px); }

.sb-promesas { display: grid; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; line-height: 1.5; color: var(--sb-gris-70); }
.sb-promesas li { display: flex; gap: 0.5rem; }
.sb-promesas li::before { content: "·"; color: var(--sb-sap); font-weight: 700; flex-shrink: 0; }

/* ---------- Carrito vacío ---------- */
.sb-vacio { border-top: 1px solid var(--sb-gris-14); padding-top: 2rem; }
.sb-vacio-texto { margin: 0; max-width: 34rem; font-size: 1rem; line-height: 1.7; color: var(--sb-gris-70); }
.sb-vacio-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.sb-boton-tienda,
.sb-boton-linea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.875rem;
  border-radius: 2px;
  padding-inline: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
}
.sb-boton-tienda { background-color: var(--sb-surface-brand); color: var(--sb-surface-brand-fg); }
.sb-boton-tienda:hover { background-color: var(--sb-surface-brand-hover); color: var(--sb-surface-brand-fg); }
.sb-boton-linea { border: 1px solid var(--sb-gris-30); color: var(--sb-ink); }
.sb-boton-linea:hover { background-color: var(--sb-gris-7); color: var(--sb-ink); }

/* ---------- Sugerencias ---------- */
.sb-sugerencias { margin-top: 4rem; }
.sb-sugerencias-tit {
  margin: 0 0 1.5rem;
  font-family: var(--sb-font-display);
  font-size: 1.5rem;
  font-weight: 500;
}
.sb-suge-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sb-suge-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; } }
.sb-suge-enlace { display: block; text-decoration: none; color: inherit; }
.sb-suge-marco { display: block; overflow: hidden; border-radius: 2px; background-color: var(--sb-card); }
.sb-suge-foto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.sb-suge-enlace:hover .sb-suge-foto { transform: scale(1.03); }
.sb-suge-nombre { display: block; margin-top: 0.75rem; font-family: var(--sb-font-display); font-size: 0.9375rem; font-weight: 500; }
.sb-suge-precio { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--sb-gris-70); }
.sb-suge-precio del { color: var(--sb-gris-50); margin-right: 0.35rem; }
.sb-suge-precio ins { text-decoration: none; }

/* ---------- Avisos de WooCommerce ----------
   En «mi cuenta» los imprime WooCommerce FUERA del contenedor de la plantilla,
   así que salían a lo ancho de la ventana y pegados a la cabecera. Se les da la
   misma medida que el formulario y aire por arriba. */
.woocommerce-account .woocommerce-notices-wrapper {
  max-width: 27rem;
  margin-inline: auto;
  padding-top: 3rem;
}
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-notices-wrapper { padding-top: 4rem; }
}
.woocommerce-account .woocommerce-notices-wrapper:empty { padding-top: 0; }
/* Si hay aviso, la página no repite el aire de arriba. */
.woocommerce-account .woocommerce-notices-wrapper:not(:empty) + .sb-compra--acceso { padding-top: 1.5rem; }


.sb-compra .woocommerce-message,
.sb-compra .woocommerce-error,
.sb-compra .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  margin: 0 0 1.5rem;
  border: 1px solid var(--sb-border);
  border-left: 3px solid var(--sb-sap);
  border-radius: 2px;
  background-color: var(--sb-card);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--sb-ink);
  list-style: none;
}
.sb-compra .woocommerce-error,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error { border-left-color: var(--sb-salmon-ink); }
.sb-compra .woocommerce-message .button,
.sb-compra .woocommerce-error .button,
.sb-compra .woocommerce-info .button,
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-error .button,
.woocommerce-cart .woocommerce-info .button {
  float: right;
  border: 0;
  border-radius: 2px;
  background-color: transparent;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--sb-sap-ink);
  text-decoration: underline;
}

/* ==========================================================================
   Finalizar compra
   ========================================================================== */

.sb-checkout { display: grid; gap: 2.5rem; align-items: start; }
/* En móvil el orden del HTML ya es el bueno: resumen, formulario y pago.

   En escritorio la página se parte en dos mitades que llegan a los bordes: el
   formulario a la izquierda y el pedido a la derecha, sobre su propio fondo.
   Cada columna centra su contenido en su mitad, así que en pantallas anchas los
   dos bloques se quedan juntos en el centro y no se separan hasta los extremos. */
@media (min-width: 960px) {
  .sb-checkout {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .sb-checkout-datos,
  .sb-checkout-resumen,
  .sb-checkout-pago { box-sizing: border-box; width: 100%; }

  .sb-checkout-datos {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: 41rem;
    margin-left: auto;
    padding: 4rem 3.5rem 5rem 1.5rem;
  }
  .sb-checkout-resumen {
    grid-column: 2;
    grid-row: 1;
    max-width: 37rem;
    margin-right: auto;
    padding: 4rem 1.5rem 0 3.5rem;
  }
  .sb-checkout-pago {
    grid-column: 2;
    grid-row: 2;
    max-width: 37rem;
    margin-right: auto;
    padding: 2rem 1.5rem 5rem 3.5rem;
  }

  /* La mitad de la derecha va sobre lino oscuro, a sangre hasta el borde de la
     ventana, para que el pedido se lea como un panel aparte del formulario.
     El fondo lo pinta un pseudo-elemento y no la columna, porque el resumen y
     el pago son dos celdas distintas de la rejilla y entre ellas quedaría un
     escalón. */
  .sb-checkout::after {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    border-left: 1px solid var(--sb-border);
    background-color: var(--sb-linen-deep);
  }
  .sb-checkout-datos,
  .sb-checkout-resumen,
  .sb-checkout-pago { position: relative; z-index: 1; }

  /* Las dos columnas van a hueso: ni caja ni divisoria, que el fondo ya separa */
  .sb-checkout-resumen .sb-resumen-caja,
  .sb-checkout-pago .sb-resumen-caja {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }
  .sb-checkout-pago .sb-resumen-caja { border-top: 1px solid var(--sb-border); padding-top: 2rem; }
}
@media (min-width: 1400px) {
  .sb-checkout-datos { padding-right: 5rem; }
  .sb-checkout-resumen, .sb-checkout-pago { padding-left: 5rem; }
}

/* Por debajo del partido, los tres bloques ponen su propio margen lateral */
@media (max-width: 959px) {
  .sb-compra--partida { padding-bottom: 4rem; }
  .sb-checkout { gap: 2.5rem; }
  .sb-checkout-datos,
  .sb-checkout-resumen,
  .sb-checkout-pago { box-sizing: border-box; padding-inline: 1rem; }

  /* Aquí el pedido va arriba del todo: se separa con su propio fondo, de borde
     a borde, en vez de con la mitad de la pantalla. */
  .sb-checkout-resumen {
    border-block: 1px solid var(--sb-border);
    padding-block: 1.5rem;
    background-color: var(--sb-linen-deep);
  }
  .sb-checkout-resumen .sb-resumen-caja {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }
}

/* ---------- Entrar en la cuenta desde el checkout ---------- */
/* Va debajo de la cabecera y con su mismo ancho: la página está a sangre, así
   que sin contenedor el aviso de WooCommerce cruzaba la pantalla entera. */
.sb-entrada { padding-bottom: 2rem; }
.sb-entrada-aviso {
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--sb-gris-70);
}
.sb-entrada-aviso a.showlogin {
  color: var(--sb-sap-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sb-entrada-aviso a.showlogin:hover,
.sb-entrada-aviso a.showlogin:focus { color: var(--sb-moss-deep); }
.sb-entrada-nota { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--sb-gris-50); }

/* El formulario reaprovecha «.sb-acceso» de Mi cuenta, sin su línea de arriba:
   aquí ya lo separa la frase del aviso. */
/* Se nombra dos veces la clase porque «.sb-acceso» de Mi cuenta va más abajo en
   la hoja y le ganaría la línea de arriba y los márgenes. */
.sb-acceso.sb-acceso--compra { margin: 0 auto; padding-top: 0; border-top: 0; }
.sb-acceso--compra .form-row:first-of-type { margin-top: 1.75rem; }
.sb-acceso--compra .sb-acceso-pie { margin-top: 1.5rem; padding-top: 1.25rem; }

/* La cabecera de la página, centrada encima del partido */
.sb-compra--partida { padding-block: 0; }
.sb-compra-cab-centro { padding-block: 2.5rem 2rem; }
.sb-compra--partida .sb-compra-cab { margin-bottom: 0; text-align: center; }
.sb-compra--partida .sb-migas { justify-content: center; }
.sb-compra--partida .sb-compra-bajada { margin-inline: auto; }

.woocommerce-checkout-payment { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Líneas del pedido ---------- */
.sb-pedido { transition: opacity .2s; }
.sb-pedido.esta-ocupado { opacity: 0.5; pointer-events: none; }

.sb-pedido-lineas { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 1rem; }
.sb-pedido-linea { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.875rem; align-items: start; }

.sb-pedido-foto { position: relative; }
.sb-pedido-img { display: block; width: 3.5rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background-color: var(--sb-linen); }
.sb-pedido-num {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background-color: var(--sb-gris-90);
  color: var(--sb-blanco);
  font-size: 0.6875rem;
  font-weight: 500;
}

.sb-pedido-cuerpo { min-width: 0; }
.sb-pedido-nombre { margin: 0; font-family: var(--sb-font-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; }
.sb-pedido-talla { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--sb-gris-70); }
.sb-pedido-acciones { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.sb-pedido-importe { margin: 0; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.sb-pedido-quitar { border: 0; background: none; padding: 0; font: inherit; font-size: 0.75rem; color: var(--sb-gris-50); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.sb-pedido-quitar:hover,
.sb-pedido-quitar:focus,
.sb-pedido-quitar:focus-visible { background-color: transparent; color: var(--sb-salmon-ink); }

.sb-cantidad--mini { height: 1.875rem; padding: 0 0.15rem; }
.sb-cantidad--mini button { width: 1.5rem; height: 1.5rem; font-size: 0.875rem; }
.sb-cantidad-valor { display: inline-grid; place-items: center; min-width: 1.5rem; font-size: 0.8125rem; }

/* ---------- Cupón dentro del pedido ---------- */
.sb-cupon-checkout { margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--sb-gris-14); }
.sb-cupon-aviso { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--sb-salmon-ink); }

/* ---------- Envío dentro del resumen ---------- */
.sb-envios { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; text-align: right; }
.sb-envio label { font-size: 0.875rem; }
.sb-envio--elige { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; text-align: left; }
.sb-envio--elige input { accent-color: var(--sb-sap-ink); margin: 0; }
.sb-resumen-nota--aviso { color: var(--sb-salmon-ink); }

/* ---------- Formulario ---------- */
.sb-checkout-datos .col2-set { display: grid; gap: 3rem; }

/* Rótulos de sección: contacto y entrega */
.sb-seccion {
  grid-column: 1 / -1;
  margin: 2rem 0 0.25rem;
  font-family: var(--sb-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.sb-seccion:first-child { margin-top: 0; }

.sb-checkout-datos .woocommerce-billing-fields > h3,
.sb-checkout-datos .woocommerce-shipping-fields > h3,
.sb-checkout-datos .woocommerce-additional-fields > h3,
.sb-checkout-datos #ship-to-different-address {
  margin: 0 0 1.25rem;
  font-family: var(--sb-font-display);
  font-size: 1.375rem;
  font-weight: 500;
}
/* El titular de «tus datos» sobra: las secciones ya lo dicen */
.sb-checkout-datos .woocommerce-billing-fields > h3 { display: none; }
.sb-checkout-datos .woocommerce-additional-fields > h3 { display: none; }

/* Los campos en dos columnas, cada uno con su sitio */
.sb-checkout-datos .woocommerce-billing-fields__field-wrapper,
.sb-checkout-datos .woocommerce-shipping-fields__field-wrapper,
.sb-checkout-datos .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
/* «.woocommerce form .form-row» trae 3 px de relleno y 6 de margen: los quita la
   rejilla, que ya pone el aire con su «gap». */
.sb-checkout-datos .form-row,
.woocommerce .sb-checkout-datos .form-row { position: relative; margin: 0; padding: 0; grid-column: 1 / -1; }
.sb-checkout-datos .form-row-first,
.woocommerce .sb-checkout-datos .form-row-first { grid-column: 1; }
.sb-checkout-datos .form-row-last,
.woocommerce .sb-checkout-datos .form-row-last { grid-column: 2; }
@media (max-width: 479px) {
  .sb-checkout-datos .form-row-first,
  .sb-checkout-datos .form-row-last,
  .woocommerce .sb-checkout-datos .form-row-first,
  .woocommerce .sb-checkout-datos .form-row-last { grid-column: 1 / -1; }
}

/* Etiqueta flotante: sube cuando el campo tiene el foco o algo escrito.
   Por eso los campos llevan un espacio de «placeholder»: sin él,
   «:placeholder-shown» no distingue vacío de lleno. */
.sb-checkout-datos .form-row > label:not(.woocommerce-form__label-for-checkbox) {
  position: absolute;
  z-index: 1;
  top: 1.0625rem;
  left: 1rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--sb-gris-50);
  pointer-events: none;
  transition: transform .15s ease, font-size .15s ease, color .15s ease;
  transform-origin: left top;
}
.sb-checkout-datos .form-row:focus-within > label:not(.woocommerce-form__label-for-checkbox),
.sb-checkout-datos .form-row:has(input:not(:placeholder-shown)) > label:not(.woocommerce-form__label-for-checkbox),
.sb-checkout-datos .form-row:has(textarea:not(:placeholder-shown)) > label:not(.woocommerce-form__label-for-checkbox),
.sb-checkout-datos .form-row:has(select) > label {
  transform: translateY(-0.6875rem) scale(0.75);
  color: var(--sb-gris-70);
}
.sb-checkout-datos .form-row .required { color: var(--sb-gris-30); text-decoration: none; border: 0; }
.sb-checkout-datos .form-row .optional { display: none; }

/* El envoltorio de WooCommerce mete su propia caja de línea y deja 4 px de más
   debajo de los campos de texto: sin ella, las filas con desplegable y las de
   texto miden lo mismo y el ritmo vertical no baila. */
.sb-checkout-datos .woocommerce-input-wrapper { display: block; width: 100%; line-height: 0; }

/* «.woocommerce form .form-row .input-text» de WooCommerce fuerza «height:auto» y
   su propio relleno, y gana por especificidad: hay que subir la nuestra. */
.woocommerce .sb-checkout-datos .form-row .input-text,
.woocommerce .sb-checkout-datos .form-row input[type="text"],
.woocommerce .sb-checkout-datos .form-row input[type="email"],
.woocommerce .sb-checkout-datos .form-row input[type="tel"],
.woocommerce .sb-checkout-datos .form-row input[type="password"],
.woocommerce .sb-checkout-datos .form-row textarea,
.woocommerce .sb-checkout-datos .form-row select,
.woocommerce .sb-checkout-datos .form-row .select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  height: 3.5rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 4px;
  background-color: var(--sb-blanco);
  padding: 1.35rem 1rem 0.35rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--sb-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce .sb-checkout-datos .form-row textarea,
.sb-checkout-datos textarea {
  height: auto;
  min-height: 7rem;
  padding-top: 1.6rem;
  line-height: 1.6;
  resize: vertical;
}
.sb-checkout-datos input::placeholder,
.sb-checkout-datos textarea::placeholder { color: transparent; }
.sb-checkout-datos input:hover,
.sb-checkout-datos textarea:hover,
.sb-checkout-datos select:hover { border-color: var(--sb-gris-30); }
.sb-checkout-datos input:focus,
.sb-checkout-datos textarea:focus,
.sb-checkout-datos select:focus {
  border-color: var(--sb-gris-70);
  box-shadow: 0 0 0 1px var(--sb-gris-70);
  outline: none;
}
.sb-checkout-datos .woocommerce-invalid input,
.sb-checkout-datos .woocommerce-invalid select,
.sb-checkout-datos .woocommerce-invalid .select2-container .select2-selection--single {
  border-color: var(--sb-salmon-ink);
}
.sb-checkout-datos .woocommerce-invalid > label { color: var(--sb-salmon-ink); }

/* Los desplegables: flecha propia y sitio para la etiqueta arriba */
.sb-checkout-datos select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237A776F' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
}

/* El país y la provincia los pinta select2 */
.sb-checkout-datos .select2-container { display: block; width: 100% !important; }
.sb-checkout-datos .select2-container .select2-selection--single {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.55rem;
}
.sb-checkout-datos .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.2;
  color: var(--sb-ink);
}
.sb-checkout-datos .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.sb-checkout-datos .form-row:has(.select2-container)::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 1.55rem;
  width: 0.7rem;
  height: 0.45rem;
  background-color: var(--sb-gris-50);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M.7 1.2 6 6.5 11.3 1.2 10.2.1 6 4.3 1.8.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M.7 1.2 6 6.5 11.3 1.2 10.2.1 6 4.3 1.8.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.select2-dropdown {
  border: 1px solid var(--sb-gris-14);
  border-radius: 4px;
  background-color: var(--sb-blanco);
  box-shadow: var(--sb-shadow-soft);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--sb-surface-brand-soft);
  color: var(--sb-ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
}

/* Casillas. Quedan fuera de la etiqueta flotante de arriba: ahí la etiqueta se
   coloca en absoluto y sin ratón, y en una casilla eso la sacaba de sitio y la
   dejaba sin poder pulsar. */
.sb-checkout-datos .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--sb-ink);
  cursor: pointer;
}
/* «.woocommerce form .form-row .input-checkbox» le mete «margin: -2px 8px 0 0» y
   gana por especificidad: la casilla se subía por encima de su texto. Hay que
   igualarla, y el titular de «enviar a otra dirección» va aparte porque ese sí
   centra la casilla con su línea. */
.woocommerce form .sb-checkout-datos .form-row .woocommerce-form__input-checkbox,
.sb-checkout-datos .woocommerce-form__input-checkbox {
  accent-color: var(--sb-sap-ink);
  width: 1rem;
  height: 1rem;
  margin: 0.375rem 0 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.sb-checkout-datos #ship-to-different-address {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--sb-gris-14);
}
/* La hoja general de WooCommerce flota este titular a la izquierda
   («.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address»), y sin
   la hoja de «layout» nada lo limpia después: las notas del pedido se le subían
   al lado y se pisaban. Hay que igualar su especificidad para quitarlo. */
.woocommerce-checkout .sb-checkout-datos .col-2 h3#ship-to-different-address,
.woocommerce-cart .sb-checkout-datos .col-2 h3#ship-to-different-address {
  float: none;
  clear: both;
}
.sb-checkout-datos #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sb-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  cursor: pointer;
}
.woocommerce form .sb-checkout-datos #ship-to-different-address .woocommerce-form__input-checkbox { margin: 0; }
.sb-checkout-datos .shipping_address { margin-top: 1.5rem; }
.sb-checkout-datos .woocommerce-additional-fields { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--sb-gris-14); }

/* ---------- Pago ---------- */
.woocommerce-checkout-payment { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sb-gris-14); }
.wc_payment_methods { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  padding: 0.875rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.wc_payment_method input[type="radio"] { accent-color: var(--sb-sap-ink); margin: 0; }
.wc_payment_method input[type="radio"]:checked + label { border-color: var(--sb-sap-ink); background-color: var(--sb-surface-brand-soft); }
.payment_box { margin: 0.25rem 0 0; padding: 0.75rem 0.875rem; border-radius: 2px; background-color: var(--sb-gris-7); font-size: 0.8125rem; line-height: 1.6; color: var(--sb-gris-70); }
.payment_box p:first-child { margin-top: 0; }
.payment_box p:last-child { margin-bottom: 0; }

.woocommerce-terms-and-conditions-wrapper { margin-top: 1.25rem; font-size: 0.8125rem; line-height: 1.6; color: var(--sb-gris-70); }
.woocommerce-terms-and-conditions-wrapper a { color: var(--sb-sap-ink); }

/* Aire antes del botón. Va en el propio botón y no en «.place-order»: aquí el botón
   es hermano del bloque de casillas, no está dentro de ese contenedor. */
.place-order { margin-top: 2rem; }
.woocommerce-checkout #place_order,
.woocommerce .sb-checkout #place_order {
  display: block;
  margin-top: 2rem;
  width: 100%;
  height: 3.25rem;
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus,
.woocommerce .sb-checkout #place_order:hover,
.woocommerce .sb-checkout #place_order:focus {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}
.woocommerce-checkout #place_order:active { transform: translateY(1px); }

/* ---------- Entrar y cupón de arriba ---------- */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { margin-bottom: 1.5rem; }
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
  margin: 0 0 1.5rem;
  border: 1px solid var(--sb-border);
  border-radius: 2px;
  background-color: var(--sb-card);
  padding: 1.5rem;
}
.woocommerce-checkout .woocommerce-form-login .button,
.woocommerce-checkout .woocommerce-form-coupon .button {
  height: 2.875rem;
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  padding-inline: 1.5rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--sb-surface-brand-fg);
  cursor: pointer;
}
.woocommerce-checkout .woocommerce-form-login .button:hover,
.woocommerce-checkout .woocommerce-form-coupon .button:hover { background-color: var(--sb-surface-brand-hover); color: var(--sb-surface-brand-fg); }

/* El cupón de arriba sobra: el resumen ya lleva el suyo */
.woocommerce-form-coupon-toggle { display: none; }

/* ---------- El cargando de WooCommerce ---------- */
.blockUI.blockOverlay { background-color: var(--sb-linen) !important; }

/* ---------- Avisos fuera del contenedor ---------- */
/* En finalizar compra y en mi cuenta, WooCommerce pinta los avisos antes de que
   la plantilla abra su contenedor, así que se centran aquí. */
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-notices-wrapper {
  margin-inline: auto;
  width: 100%;
  max-width: var(--sb-ancho);
  padding-inline: 1rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .woocommerce-checkout .woocommerce-notices-wrapper,
  .woocommerce-account .woocommerce-notices-wrapper { padding-inline: 2rem; }
}
.woocommerce-checkout .woocommerce-notices-wrapper:empty,
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }

/* El icono de la fuente de WooCommerce sale como un cuadro roto: fuera */
.sb-compra .woocommerce-message::before,
.sb-compra .woocommerce-error::before,
.sb-compra .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before { display: none; }

.woocommerce-checkout .woocommerce-message .button,
.woocommerce-checkout .woocommerce-error .button,
.woocommerce-checkout .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-error .button,
.woocommerce-account .woocommerce-info .button {
  float: right;
  border: 0;
  border-radius: 2px;
  background-color: transparent;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--sb-sap-ink);
  text-decoration: underline;
}

/* ---------- El bloque de pago, sin el gris de WooCommerce ---------- */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent;
  border-radius: 0;
}
#payment ul.payment_methods { border: 0; padding: 0; }
#payment div.form-row { padding: 0; }
#payment .payment_box::before { display: none; }

/* Cada forma de pago es una caja entera, con su radio dentro */
.wc_payment_method {
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  padding: 0.875rem;
}
.wc_payment_method:has(input:checked) { border-color: var(--sb-sap-ink); background-color: var(--sb-surface-brand-soft); }
.wc_payment_method > label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.wc_payment_method > input[type="radio"] { margin-right: 0.625rem; vertical-align: middle; }
.wc_payment_method img { max-height: 1.5rem; width: auto; margin-left: 0.5rem; vertical-align: middle; }
.payment_box { margin: 0.75rem 0 0; background-color: transparent; padding: 0; color: var(--sb-gris-70); }

/* WooCommerce pinta la explicación de cada forma de pago sobre un lila suyo con
   «#payment div.payment_box», que gana por el id. */
#payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  border-radius: 0;
  color: var(--sb-gris-70);
  font-size: 0.8125rem;
  line-height: 1.6;
}
/* Y el triangulito gris que apunta a la forma de pago lo dibuja
   «.woocommerce-checkout #payment div.payment_box::before»: hay que repetir el
   selector entero, porque sin la clase de la página no se le gana. */
#payment div.payment_box::before,
#payment div.payment_box::after,
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::after { content: none; display: none; border: 0; }

/* ==========================================================================
   Pedido recibido
   ========================================================================== */
.sb-gracias-texto { margin: 0 0 1.5rem; max-width: 40rem; font-size: 1rem; line-height: 1.7; color: var(--sb-gris-70); }
.sb-gracias-texto a { color: var(--sb-sap-ink); }

.sb-gracias-datos {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--sb-border);
  border-radius: 2px;
  background-color: var(--sb-card);
  list-style: none;
}
@media (min-width: 640px) { .sb-gracias-datos { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.sb-gracias-rotulo { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-gracias-datos strong { display: block; margin-top: 0.25rem; font-size: 1rem; font-weight: 500; }

/* La tabla del pedido que pinta WooCommerce debajo */
.sb-gracias .woocommerce-order-details,
.sb-gracias .woocommerce-customer-details { margin-bottom: 2.5rem; }
.sb-gracias h2,
.woocommerce-order-details__title,
.woocommerce-column__title { margin: 0 0 1rem; font-family: var(--sb-font-display); font-size: 1.25rem; font-weight: 500; }
.sb-gracias table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sb-gracias table th,
.sb-gracias table td { border-bottom: 1px solid var(--sb-gris-14); padding: 0.75rem 0; text-align: left; font-weight: 400; }
.sb-gracias table th { color: var(--sb-gris-70); font-size: 0.8125rem; }
.sb-gracias table tfoot th { font-weight: 500; }
.sb-gracias address { font-style: normal; font-size: 0.9375rem; line-height: 1.7; color: var(--sb-gris-70); }
.woocommerce-columns--addresses { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 640px) { .woocommerce-columns--addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Mi cuenta
   ========================================================================== */
.sb-cuenta { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 860px) { .sb-cuenta { grid-template-columns: 14rem minmax(0, 1fr); gap: 3.5rem; } }

.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.125rem; }
.woocommerce-MyAccount-navigation a {
  display: block;
  border-radius: 2px;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--sb-gris-70);
  text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background-color: var(--sb-gris-7); color: var(--sb-ink); }
.woocommerce-MyAccount-navigation .is-active a { background-color: var(--sb-surface-brand-soft); color: var(--sb-ink); font-weight: 500; }

.sb-cuenta-contenido { font-size: 0.9375rem; line-height: 1.7; }
.sb-cuenta-contenido > p:first-child { margin-top: 0; }
.sb-cuenta-contenido a { color: var(--sb-sap-ink); }
.sb-cuenta-contenido table { width: 100%; border-collapse: collapse; }
.sb-cuenta-contenido th,
.sb-cuenta-contenido td { border-bottom: 1px solid var(--sb-gris-14); padding: 0.75rem 0.5rem 0.75rem 0; text-align: left; }
.sb-cuenta-contenido th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-gris-70); }
.sb-cuenta-contenido .button,
.sb-cuenta-contenido button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  padding-inline: 1.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-surface-brand-fg);
  text-decoration: none;
  cursor: pointer;
}
.sb-cuenta-contenido .button:hover,
.sb-cuenta-contenido button[type="submit"]:hover { background-color: var(--sb-surface-brand-hover); color: var(--sb-surface-brand-fg); }
.sb-cuenta-contenido fieldset { border: 1px solid var(--sb-gris-14); border-radius: 2px; padding: 1.25rem; margin: 1.5rem 0; }
.sb-cuenta-contenido legend { padding-inline: 0.5rem; font-family: var(--sb-font-display); font-size: 1.05rem; }
.sb-cuenta-contenido .form-row { display: grid; gap: 0.375rem; margin: 0 0 1rem; }
.sb-cuenta-contenido label { font-size: 0.8125rem; color: var(--sb-gris-70); }
.sb-cuenta-contenido input[type="text"],
.sb-cuenta-contenido input[type="email"],
.sb-cuenta-contenido input[type="tel"],
.sb-cuenta-contenido input[type="password"],
.sb-cuenta-contenido select {
  width: 100%;
  box-sizing: border-box;
  height: 3rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  background-color: var(--sb-blanco);
  padding: 0 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--sb-ink);
}

/* ---------- Entrar, clave perdida y clave nueva ----------
   Una sola columna estrecha y centrada. Sin caja: en una página con un
   formulario y nada más, el marco solo estorba. Los campos llevan el mismo
   trazo fino del resto de la tienda. */
.sb-compra--acceso { padding-block: 3rem 5rem; }
@media (min-width: 768px) { .sb-compra--acceso { padding-block: 4rem 6rem; } }

.sb-compra--acceso .sb-compra-cab { text-align: center; }
.sb-compra--acceso .sb-migas { justify-content: center; }
.sb-compra--acceso .sb-compra-bajada { margin-inline: auto; max-width: 30rem; }

/* WooCommerce le pone al formulario de entrar un marco lila de 1 px con esquina
   de 5 px y 20 px de relleno. Fuera: aquí el marco lo pone la página. */
.sb-acceso form,
.woocommerce .sb-acceso form.login,
.woocommerce .sb-acceso form.register,
.woocommerce .sb-acceso form.lost_reset_password {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: none;
}

.sb-acceso {
  max-width: 27rem;
  margin: 2.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--sb-gris-14);
}

.sb-acceso-tit {
  margin: 0 0 1.75rem;
  font-family: var(--sb-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-gris-70);
  text-align: center;
}

.sb-acceso .form-row { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }

.sb-acceso label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-gris-70);
}
.sb-acceso .required { color: var(--sb-salmon-ink); text-decoration: none; }

.sb-acceso input[type="text"],
.sb-acceso input[type="email"],
.sb-acceso input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  height: 3.25rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  background-color: var(--sb-blanco);
  padding: 0 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--sb-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sb-acceso input[type="text"]:focus,
.sb-acceso input[type="email"]:focus,
.sb-acceso input[type="password"]:focus {
  outline: none;
  border-color: var(--sb-sap);
  box-shadow: 0 0 0 3px var(--sb-surface-brand-soft);
}

/* Chrome pinta de azul lo que autocompleta y se comía el lino. */
.sb-acceso input:-webkit-autofill,
.sb-acceso input:-webkit-autofill:hover,
.sb-acceso input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--sb-blanco) inset;
  -webkit-text-fill-color: var(--sb-ink);
  caret-color: var(--sb-ink);
}

.sb-acceso button,
.sb-acceso button.button,
.sb-acceso button[type="submit"],
.woocommerce .sb-acceso button.button {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin-top: 0.5rem;
  border: 0;
  border-radius: 2px;
  background-color: var(--sb-surface-brand);
  padding-inline: 1.5rem;
  /* Igual que «Realizar el pedido» del checkout: mismo alto, mismo color y sin
     versalitas. Es el mismo embudo, tiene que hablar igual. */
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sb-surface-brand-fg);
  cursor: pointer;
  transition: background-color .18s ease;
}
.sb-acceso button:hover,
.sb-acceso button:focus,
.sb-acceso button.button:hover,
.sb-acceso button[type="submit"]:hover,
.woocommerce .sb-acceso button.button:hover {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}

.sb-acceso-fila { display: block !important; margin: 0 !important; }

.sb-acceso .woocommerce-form__label-for-checkbox {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sb-gris-70);
}
.sb-acceso .woocommerce-form__input-checkbox { accent-color: var(--sb-sap-ink); width: 1rem; height: 1rem; margin: 0; }

.sb-acceso-pie {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sb-gris-14);
  text-align: center;
  font-size: 0.875rem;
  color: var(--sb-gris-70);
}
.sb-acceso-pie a { color: var(--sb-sap-ink); text-underline-offset: 4px; }
.sb-acceso-pie a:hover, .sb-acceso-pie a:focus { color: var(--sb-moss-deep); }
.sb-acceso-pie p { margin: 0; }
.sb-acceso-pie p + p { margin-top: 0.5rem; }

.sb-acceso-nota { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--sb-gris-70); }

@media (max-width: 480px) {
  .sb-acceso { padding-top: 2rem; margin-top: 2rem; }
}

/* La tabla del pedido viene con el marco y el rayado de WooCommerce: aquí manda
   el mismo trazo fino del resto de la tienda. */
.sb-compra table.shop_table,
.sb-compra table.woocommerce-table {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}
.sb-compra table.shop_table th,
.sb-compra table.shop_table td,
.sb-compra table.woocommerce-table th,
.sb-compra table.woocommerce-table td {
  border: 0;
  border-bottom: 1px solid var(--sb-gris-14);
  background: transparent;
  padding: 0.75rem 0.75rem 0.75rem 0;
  text-align: left;
  font-weight: 400;
}
.sb-compra table.shop_table thead th,
.sb-compra table.woocommerce-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-gris-70);
}
.sb-compra table.shop_table tfoot th { font-weight: 500; color: var(--sb-gris-70); }
.sb-compra table.shop_table tfoot tr:last-child th,
.sb-compra table.shop_table tfoot tr:last-child td { border-bottom: 0; font-size: 1.05rem; font-weight: 500; color: var(--sb-ink); }
.sb-compra table.shop_table a { color: var(--sb-sap-ink); }
.sb-compra .woocommerce-customer-details address {
  border: 1px solid var(--sb-gris-14);
  border-radius: 2px;
  padding: 1rem 1.25rem;
}



/* El ojo de «ver contraseña» que mete WooCommerce dentro del campo */
.sb-compra .password-input { display: block; position: relative; }
.sb-compra button.show-password-input,
.woocommerce .sb-compra button.show-password-input {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: transparent;
  color: var(--sb-gris-50);
  cursor: pointer;
}
.sb-compra button.show-password-input::after {
  content: "";
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sb-compra button.show-password-input:hover { background-color: var(--sb-gris-7); color: var(--sb-ink); }
.sb-compra .password-input input { padding-right: 3rem; }

/* Los botones de mi cuenta llevan las clases de WooCommerce, que ganan por
   especificidad: hay que nombrarlas igual que en la ficha de producto. */
.woocommerce .sb-cuenta-contenido a.button,
.woocommerce .sb-cuenta-contenido button.button,
.sb-cuenta-contenido a.button,
.sb-cuenta-contenido button.button {
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
}
.woocommerce .sb-cuenta-contenido a.button:hover,
.woocommerce .sb-cuenta-contenido button.button:hover,
.sb-cuenta-contenido a.button:hover,
.sb-cuenta-contenido button.button:hover {
  background-color: var(--sb-surface-brand-hover);
  color: var(--sb-surface-brand-fg);
}

/* El triangulito que WooCommerce dibuja encima de la explicación del pago */
.sb-checkout .payment_box::before,
.sb-checkout .payment_box::after { content: none; display: none; }

/* Las filas con desplegable de select2 se quedaban 4 px cortas y el campo se
   salía por abajo. */
.sb-checkout-datos .form-row:has(.select2-container) { min-height: 3.5rem; }

/* ==========================================================================
   Afinado del panel del pedido
   Con el partido en dos, el resumen ya no es una caja: es un panel. Los trazos
   se afinan y todo comparte la esquina de 4 px de los campos.
   ========================================================================== */

.sb-checkout .sb-resumen-tit {
  margin-bottom: 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--sb-gris-50);
}

.sb-pedido-lineas { gap: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--sb-border); }
.sb-pedido-linea { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 1rem; }
.sb-pedido-img {
  width: 4rem;
  border: 1px solid var(--sb-border);
  border-radius: 4px;
  background-color: var(--sb-blanco);
}
.sb-pedido-nombre { font-size: 1rem; }
.sb-pedido-importe { font-size: 0.9375rem; }

.sb-cupon-checkout { margin: 1.5rem 0; padding-bottom: 1.5rem; }
.sb-checkout .sb-cupon-campo,
.sb-checkout .sb-cupon-boton { height: 2.875rem; border-radius: 4px; }
.sb-checkout .sb-cupon-campo { border-color: var(--sb-border); }
.sb-checkout .sb-cupon-boton { border-color: var(--sb-gris-30); }

.sb-checkout .sb-resumen-fila { padding: 0.625rem 0; }
.sb-checkout .sb-resumen-fila--total { margin-top: 0.75rem; padding-top: 1.25rem; border-top-color: var(--sb-border); }
.sb-checkout .sb-resumen-fila--total dd { font-size: 1.75rem; }

.sb-checkout .sb-cantidad { border-color: var(--sb-border); border-radius: 4px; background-color: var(--sb-blanco); }

/* Formas de pago: caja blanca sobre el panel */
.sb-checkout .wc_payment_method {
  border-color: var(--sb-border);
  border-radius: 4px;
  background-color: var(--sb-blanco);
  padding: 1rem;
}
.sb-checkout .wc_payment_method:has(input:checked) {
  border-color: var(--sb-sap-ink);
  background-color: var(--sb-blanco);
  box-shadow: inset 0 0 0 1px var(--sb-sap-ink);
}
.sb-checkout .wc_payment_methods { gap: 0.625rem; }

.woocommerce-checkout #place_order,
.woocommerce .sb-checkout #place_order { border-radius: 4px; height: 3.5rem; font-size: 1.0625rem; }

.sb-checkout .sb-promesas { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--sb-border); }

/* El botón de finalizar compra del carrito, con la misma esquina */
.sb-ir-checkout,
.woocommerce .sb-resumen-ir a.sb-ir-checkout { border-radius: 4px; height: 3.5rem; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Seguimiento del pedido

   La página no es de WooCommerce, así que el «body» no lleva la clase
   «.woocommerce» y su hoja general no llega a estos campos: aquí se estilan
   desde cero, sin pelear especificidad con nadie.
   -------------------------------------------------------------------------- */
.sb-compra.sb-seguimiento-zona { padding-block: 0; }
/* Los avisos los imprime el shortcode fuera del formulario: se le pone el mismo
   ancho para que no salgan más anchos que la caja a la que se refieren. */
.sb-seguimiento-zona .woocommerce-error,
.sb-seguimiento-zona .woocommerce-info,
.sb-seguimiento-zona .woocommerce-message { max-width: 44rem; }
.sb-seguimiento { max-width: 44rem; }
.sb-seguimiento-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 1.25rem;
  background-color: var(--sb-blanco);
}
@media (max-width: 599px) { .sb-seguimiento-form { grid-template-columns: 1fr; padding: 1.25rem; } }

.sb-seguimiento-form .form-row { margin: 0; padding: 0; }
.sb-seguimiento-form .form-row-first { grid-column: 1; }
.sb-seguimiento-form .form-row-last { grid-column: 2; }
.sb-seguimiento-envio { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .sb-seguimiento-form .form-row-first,
  .sb-seguimiento-form .form-row-last { grid-column: 1 / -1; }
}

.sb-seguimiento-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-gris-70);
}
.sb-seguimiento-form .input-text {
  width: 100%;
  box-sizing: border-box;
  height: 3.25rem;
  border: 1px solid var(--sb-gris-14);
  border-radius: 4px;
  background-color: var(--sb-blanco);
  padding: 0 1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--sb-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sb-seguimiento-form .input-text::placeholder { color: var(--sb-gris-50); }
.sb-seguimiento-form .input-text:hover { border-color: var(--sb-gris-30); }
.sb-seguimiento-form .input-text:focus {
  border-color: var(--sb-gris-70);
  box-shadow: 0 0 0 1px var(--sb-gris-70);
  outline: none;
}
.sb-seguimiento-envio { margin: 0.25rem 0 0; }
.sb-seguimiento-envio .sb-boton-tienda { border: 0; cursor: pointer; font: inherit; font-weight: 500; }

/* La ficha del pedido encontrado */
.sb-seguimiento-ficha { max-width: 48rem; }
.sb-seguimiento-estado {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  font-family: var(--sb-font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
}
.sb-seguimiento-punto {
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  border-radius: 50%;
  background-color: var(--sb-gris-30);
}
.sb-seguimiento-punto--processing,
.sb-seguimiento-punto--on-hold { background-color: var(--sb-amarillo); }
.sb-seguimiento-punto--completed { background-color: var(--sb-sap); }
.sb-seguimiento-punto--cancelled,
.sb-seguimiento-punto--failed,
.sb-seguimiento-punto--refunded { background-color: var(--sb-salmon-ink); }

.sb-seguimiento-notas { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.sb-seguimiento-notas li {
  border-left: 2px solid var(--sb-gris-14);
  padding: 0 0 0 1rem;
  margin-bottom: 1.25rem;
}
.sb-seguimiento-notas p { margin: 0 0 0.25rem; font-size: 0.9375rem; line-height: 1.7; color: var(--sb-gris-70); }
.sb-seguimiento-fecha { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }


/* En las pantallas de entrar y de contraseña el aviso va en la misma columna
   estrecha que el formulario, y con aire por arriba: si no sale a lo ancho de
   la ventana y pegado a la cabecera. La clase la pone compra.php. */
body.sb-pantalla-acceso .woocommerce-notices-wrapper {
  max-width: 27rem;
  padding-top: 3rem;
}
@media (min-width: 768px) {
  body.sb-pantalla-acceso .woocommerce-notices-wrapper { padding-top: 4rem; }
}
body.sb-pantalla-acceso .woocommerce-notices-wrapper:not(:empty) ~ .woocommerce .sb-compra--acceso { padding-top: 1.5rem; }

/* WooCommerce enfoca el aviso para que lo lea un lector de pantalla, y el
   anillo de foco del tema le pintaba un segundo marco alrededor. Se quita solo
   aquí: el aviso no se alcanza con el tabulador (tabindex="-1"), así que no se
   pierde nada. El filete rojo de la izquierda ya lo señala. */
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus { outline: none; }

/* ==========================================================================
   El paso a la pasarela (Redsys)
   ========================================================================== */
.sb-pasarela { max-width: 44rem; }
.sb-pasarela .sb-gracias-datos { margin-bottom: 1.5rem; }

.sb-pasarela-paso {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--sb-border);
  border-radius: 2px;
  background-color: var(--sb-card);
  text-align: center;
}

.sb-pasarela-espera {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 1rem;
  color: var(--sb-gris-70);
}

.sb-pasarela-rueda {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--sb-gris-30);
  border-top-color: var(--sb-sap-ink);
  border-radius: 50%;
  animation: sb-gira 0.9s linear infinite;
}
@keyframes sb-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sb-pasarela-rueda { animation-duration: 3s; }
}

/* El formulario y su aviso los pinta la pasarela: aquí solo se les da forma. */
.sb-pasarela-paso form { display: grid; justify-items: center; gap: 1rem; margin: 0; }
.sb-pasarela-paso p { margin: 0; font-size: 0.9375rem; color: var(--sb-gris-70); }

.sb-pasarela-paso #submit_redsys_payment_form {
  border: 0;
  border-radius: 2px;
  padding: 0.875rem 1.75rem;
  background-color: var(--sb-surface-brand);
  color: var(--sb-surface-brand-fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.sb-pasarela-paso #submit_redsys_payment_form:hover { background-color: var(--sb-surface-brand-hover); }

.sb-pasarela-paso .button.cancel,
.sb-pasarela-paso .button.cancel:hover,
.sb-pasarela-paso .button.cancel:focus {
  color: var(--sb-gris-70);
  background: transparent;
  font-size: 0.875rem;
  text-decoration: underline;
}

.sb-pasarela-nota { margin: 0; font-size: 0.8125rem; color: var(--sb-gris-50); }

/* ==========================================================================
   El pago rápido (Apple Pay, Google Pay y Link, de Stripe)
   ========================================================================== */
.sb-pago-rapido { margin-bottom: 2rem; }

/* Stripe deja sus dos piezas ocultas y solo las enseña si el navegador tiene
   Apple Pay, Google Pay o Link. Sin ellas, el titular se quedaba solo, así que
   el bloque entero espera a que aparezca alguna. Va dentro de «@supports»
   porque un navegador sin «:has()» tiene que verlo, no esconderlo. */
@supports selector(:has(*)) {
  .sb-pago-rapido { display: none; }
  .sb-pago-rapido:has(#wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"])) { display: block; }
}
.sb-pago-rapido #wc-stripe-express-checkout-element { margin-top: 0 !important; }
.sb-pago-rapido #wc-stripe-express-checkout-button-separator {
  margin: 1.25rem 0 0 !important;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-gris-50);
}

/* Las dos casillas del final del pedido: condiciones y newsletter.
   Heredan el tamaño y el color del texto de privacidad, que es el que va justo
   encima, para que el bloque entero se lea como una sola cosa. */
.woocommerce-terms-and-conditions-wrapper .sb-check,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sb-gris-70);
  cursor: pointer;
}

.woocommerce-terms-and-conditions-wrapper .sb-check input[type="checkbox"],
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  width: 1rem;
  height: 1rem;
  /* Marcadas en el amarillo de la marca, no en el negro del navegador. */
  accent-color: var(--sb-sap);
}

.woocommerce-terms-and-conditions-wrapper .sb-check a,
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-link {
  color: var(--sb-sap-ink);
  text-decoration: underline;
}

/* El asterisco de obligatorio en rojo chillón no pega con el resto. */
.woocommerce-terms-and-conditions-wrapper .required {
  color: var(--sb-gris-70);
  text-decoration: none;
  border: 0;
}