/* Tienda Barveo pública (/tienda/, prefijo tb-). Hoja propia con los colores de la marca Barveo, sin panel-core.css:
   hueso de fondo, tinta para el texto, rojo señal para la acción principal (con la paleta de Colores Barveo si la hay)
   y verde solo para «hecho» o «disponible» (semáforo). Contraste: sobre sólido, blanco; sobre claro, tinta.

   Pensada como las tiendas de barbería que mejor venden (titular, 29-10-2026: «más profesional y visual, menos texto y
   más imagen»): fotos grandes a todo lo ancho, titulares cortos, la tarjeta solo con foto, nombre y precio, las
   ventajas en iconos y el texto largo plegado en acordeones.

   iPad y iPhone antiguos (Safari 12-14): las capas a todo el marco van con top/right/bottom/left (no conocen `inset`) y
   las cajas con `aspect-ratio` (Safari 15) llevan además un relleno que da el mismo alto. */
:root {
  --tb-hueso: #f4f2ed;
  --tb-tinta: #26313a;
  --tb-rojo: var(--barveo-palette-01, #c8463d);
  /* El rojo como texto: sobre el hueso, el de la marca se queda en 4,3:1; este pasa de 5:1 sobre hueso y blanco. */
  --tb-rojo-texto: #b23a32;
  --tb-rojo-claro: #fbecea;
  --tb-tarjeta: #ffffff;
  --tb-borde: rgba(38, 49, 58, 0.14);
  --tb-borde-fuerte: rgba(38, 49, 58, 0.28);
  --tb-suave: #5b6670;
  --tb-ok: #22c55e;
  --tb-ok-texto: #166534;
  --tb-ok-claro: #dcfce7;
  --tb-error: #b42318;
  --tb-error-claro: #fef3f2;
  --tb-ambar-claro: #fef3c7;
  --tb-ambar-texto: #78350f;
  --tb-noche: #13110f;
  --tb-radio: 14px;
  --tb-radio-lg: 18px;
  --tb-radio-xl: 24px;
  --tb-sombra: 0 10px 30px rgba(38, 49, 58, 0.07);
  --tb-sombra-alta: 0 24px 60px rgba(38, 49, 58, 0.18);
  /* Carrito: fondo difuminado claro, como los modales del panel (estilo-diseno-bardev). */
  --tb-scrim: rgba(255, 255, 255, 0.72);
  --tb-scrim-blur: blur(12px) saturate(1.4);
  --tb-btn-h: 48px;
  --tb-ancho: 1200px;
  --tb-margen: 24px;
  /* Lo que ocupan arriba la barra y el menú fijos (tienda-cabecera.css). */
  --tb-arriba: calc(56px + 46px + env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* El foco con el teclado no se queda debajo de la barra y el menú fijos. Con esto, el margen de las anclas de
   tienda-cabecera.css sobra en toda la tienda: sumados, lo que ya se veía saltaba hacia abajo al llegarle el foco; y en
   el carrito (fuera de la página, con su propio scroll), el «+» que se pulsa bajaba hasta 118 px. */
html { scroll-padding-top: calc(var(--tb-arriba) + 12px); }
.tb-pagina [id] { scroll-margin-top: 0; }
html.tb-sin-scroll, html.tb-sin-scroll body { overflow: hidden; }
.tb-pagina {
  min-height: 100dvh;
  background: var(--tb-hueso);
  color: var(--tb-tinta);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.tb-oculto { display: none !important; }
.tb-saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 80;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--tb-tinta);
  font-weight: 700;
  text-decoration: none;
}
.tb-saltar:focus { top: calc(110px + env(safe-area-inset-top, 0px)); }
.tb-pagina a { color: inherit; }
.tb-pagina :focus-visible { outline: 3px solid rgba(38, 49, 58, 0.45); outline-offset: 2px; }
/* Sobre las fotos oscuras de la portada y la franja, el anillo gris no se ve: blanco. */
.tb-hero :focus-visible, .tb-banner :focus-visible { outline-color: #fff; }
.tb-pagina img { max-width: 100%; }

/* Barra, carrito y menú de la tienda: css/tienda-cabecera.css (compartida con las condiciones de venta). */

/* --- Barra de anuncios: tres datos de compra en una línea; en el móvil, solo el del envío --------------------------- */
.tb-anuncio {
  background: var(--tb-tinta);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tb-anuncio__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--tb-ancho);
  min-height: 36px;
  margin: 0 auto;
  padding: 8px 16px;
  list-style: none;
  text-align: center;
}
.tb-anuncio__lista li + li::before { content: '·'; margin: 0 14px; opacity: 0.55; }

/* --- Estructura: secciones a todo lo ancho y su contenido centrado ------------------------------------------------ */
.tb-main { padding: 0 0 72px; outline: none; }
.tb-envoltura {
  width: 100%;
  max-width: calc(var(--tb-ancho) + 2 * var(--tb-margen));
  margin: 0 auto;
  padding: 0 var(--tb-margen);
}
.tb-eyebrow {
  margin: 0;
  color: var(--tb-rojo-texto);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tb-seccion { margin: 64px 0 0; }
.tb-seccion__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.tb-seccion__titulo {
  margin: 0 0 20px;
  font-size: 1.35rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.tb-seccion__cab .tb-seccion__titulo { margin: 0; }
.tb-seccion__mas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.tb-seccion__mas svg { width: 18px; height: 18px; color: var(--tb-rojo); transition: transform 0.2s ease; }
@media (hover: hover) {
  .tb-seccion__mas:hover svg { transform: translateX(3px); }
}

/* --- Portada: foto a todo lo ancho, una frase y un botón ---------------------------------------------------------- */
.tb-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 440px;
  min-height: clamp(440px, 64vh, 640px);
  background: var(--tb-noche);
  color: #fff;
  overflow: hidden;
}
.tb-hero__fondo img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 45%;
}
.tb-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(19, 17, 15, 0.9) 0%, rgba(19, 17, 15, 0.62) 40%, rgba(19, 17, 15, 0.08) 72%);
}
.tb-hero__cuerpo { padding-top: 64px; padding-bottom: 64px; }
.tb-hero__antetitulo {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tb-hero__titulo {
  max-width: 12ch;
  margin: 0 0 16px;
  font-size: 2.3rem;
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.tb-hero__titulo:focus { outline: none; }
.tb-hero__texto { max-width: 34ch; margin: 0 0 28px; color: rgba(255, 255, 255, 0.84); font-size: 1rem; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.5; }

/* Ventajas en iconos, justo debajo de la portada. */
.tb-confianza {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tb-borde);
}
.tb-confianza li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 24px 14px;
  color: var(--tb-suave);
  font-size: 0.92rem;
  line-height: 1.35;
}
.tb-confianza li + li { border-left: 1px solid var(--tb-borde); }
.tb-confianza svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--tb-tinta); }
.tb-confianza strong { color: var(--tb-tinta); font-weight: 800; }

/* Producto destacado: la foto manda. */
.tb-portada-estado:empty { display: none; }
.tb-portada-estado { margin: 40px 0 0; }
.tb-destacado {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  margin: 64px 0 0;
}
.tb-destacado__fotos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  text-decoration: none;
}
.tb-destacado__fotos--varias { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.tb-destacado__fotos--varias .tb-destacado__foto:first-child { grid-row: 1 / span 3; }
.tb-destacado__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--tb-radio-xl);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-destacado__fotos--varias .tb-destacado__foto:not(:first-child) { border-radius: var(--tb-radio); }
.tb-destacado__foto img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s ease; }
@media (hover: hover) {
  .tb-destacado__fotos:hover .tb-destacado__foto:first-child img { transform: scale(1.03); }
}
.tb-destacado__nombre {
  margin: 12px 0 14px;
  font-size: 1.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.tb-destacado__nombre a { text-decoration: none; }
.tb-destacado__resumen { max-width: 44ch; margin: 18px 0 0; color: var(--tb-suave); font-size: 1.02rem; line-height: 1.6; }
.tb-destacado__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }

/* Precio grande con el IVA en pequeño (destacado y ficha). */
.tb-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.tb-precio strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; }
.tb-precio span { color: var(--tb-suave); font-size: 0.85rem; }

/* Categorías con foto (solo con dos o más): en las mismas 4 columnas que los productos de debajo. */
.tb-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb-cat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--tb-radio-lg);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
}
/* El alto de 4/5 también sin aspect-ratio: el relleno en % se calcula sobre el ancho. */
.tb-cat::before { content: ''; display: block; padding-top: 125%; }
.tb-cat__foto { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.tb-cat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.tb-cat::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Oscuro de sobra donde va el nombre (blanco a más de 4,5:1 también sobre fotos de fondo blanco). */
  background: linear-gradient(180deg, rgba(19, 17, 15, 0) 40%, rgba(19, 17, 15, 0.55) 65%, rgba(19, 17, 15, 0.85) 100%);
}
.tb-cat__nombre {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  /* Con el texto más espaciado (WCAG 1.4.12), un nombre largo parte en vez de salirse de la foto (word-break, para
     Safari antes del 15.4). */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tb-cat__cuantos { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.8); font-size: 0.8rem; font-weight: 600; }
@media (hover: hover) {
  .tb-cat:hover img { transform: scale(1.04); }
}

/* Franja de ambiente: foto del barbero a todo lo ancho. */
.tb-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 320px;
  min-height: clamp(320px, 40vw, 500px);
  margin: 72px 0 0;
  background: var(--tb-noche);
  color: #fff;
  overflow: hidden;
}
.tb-banner__fondo img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 18%;
}
.tb-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(270deg, rgba(13, 12, 16, 0.9) 0%, rgba(13, 12, 16, 0.55) 38%, rgba(13, 12, 16, 0) 68%);
}
.tb-banner__cuerpo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tb-banner__titulo {
  max-width: 11ch;
  margin: 0 0 22px;
  font-size: 1.9rem;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* ¿Tienes barbería? */
.tb-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  margin: 72px 0 0;
  padding: 24px;
  border: 1px solid var(--tb-borde);
  border-radius: var(--tb-radio-xl);
  background: #fff;
}
.tb-pro__foto { display: block; }
.tb-pro__foto img { display: block; width: 100%; height: auto; border-radius: var(--tb-radio-lg); }
.tb-pro__titulo { margin: 0 0 10px; font-size: 1.5rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.tb-pro__texto { max-width: 34ch; margin: 0 0 22px; color: var(--tb-suave); font-size: 1.02rem; line-height: 1.55; }

/* --- Avisos (vuelta de Stripe) ----------------------------------------------------------------------------------- */
.tb-aviso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 22px;
  padding: 18px 18px;
  border: 1px solid var(--tb-borde);
  border-radius: var(--tb-radio-lg);
  background: #fff;
  box-shadow: var(--tb-sombra);
}
.tb-aviso--ok { border-color: rgba(34, 197, 94, 0.45); }
.tb-aviso--error { border-color: rgba(180, 35, 24, 0.35); background: var(--tb-error-claro); }
.tb-aviso--info { background: #fff; }
.tb-aviso--espera { background: #fff; }
.tb-aviso__ico { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px; color: var(--tb-suave); }
.tb-aviso--error .tb-aviso__ico { color: var(--tb-error); }
.tb-aviso__cuerpo { min-width: 0; flex: 1 1 auto; }
.tb-aviso__titulo { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.tb-aviso__texto { margin: 0 0 4px; line-height: 1.5; color: var(--tb-tinta); }
.tb-aviso .tb-btn { margin-top: 10px; }
.tb-aviso__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tb-aviso__acciones .tb-btn { text-decoration: none; }

/* Resumen de la compra, bajo «Pedido confirmado». */
.tb-compra { margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); background: #fff; max-width: 560px; }
.tb-compra__titulo { margin: 0 0 8px; font-size: 0.95rem; font-weight: 800; }
.tb-compra__lineas { list-style: none; margin: 0; padding: 0; }
.tb-compra__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 6px 0; }
.tb-compra__nombre { min-width: 0; overflow-wrap: anywhere; }
.tb-compra__importe { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-compra__desc { margin: 6px 0; color: var(--tb-ok-texto); font-weight: 700; font-size: 0.9rem; }
.tb-compra__envio { padding-top: 8px; border-top: 1px solid var(--tb-borde); color: var(--tb-suave); }
.tb-compra__total { font-weight: 800; font-size: 1.05rem; }
/* Pantalla del pedido (pago confirmado): el aviso solo, sin la portada, el catálogo ni las otras pantallas. */
.tb-main--pedido > :not(.tb-aviso-caja) { display: none !important; }
.tb-main--pedido .tb-aviso { margin-top: 28px; padding: 24px 22px; }
.tb-aviso-caja .tb-aviso { margin-top: 20px; }
/* Tienda cerrada: sin los botones de comprar de la portada y de la franja (llevarían al mismo aviso de «cerrada»). */
.tb-main--cerrada .tb-hero .tb-btn,
.tb-main--cerrada .tb-banner .tb-btn { display: none; }

/* --- Pantallas de la tienda (data-vista de #tb-app, por el ancla) ------------------------------------------------- */
/* Inicio: portada, ventajas, destacado y franjas. Productos: su cabecera y el catálogo. Producto, envíos, devoluciones
   y ayuda: solo su pantalla. */
.tb-vista { display: none; }
.tb-main[data-vista='producto'] #tb-vista-producto,
.tb-main[data-vista='envios'] #tb-vista-envios,
.tb-main[data-vista='devoluciones'] #tb-vista-devoluciones,
.tb-main[data-vista='ayuda'] #tb-vista-ayuda,
.tb-main[data-vista='cuenta'] #tb-vista-cuenta,
.tb-main[data-vista='almacen'] #tb-vista-almacen { display: block; }
.tb-main:not([data-vista='inicio']) .tb-solo-inicio { display: none !important; }
.tb-main:not([data-vista='productos']) .tb-solo-productos { display: none !important; }

.tb-vista-cab { margin: 0; padding: 36px 0 24px; }
.tb-vista-cab__titulo {
  margin: 0 0 6px;
  font-size: 1.9rem;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.tb-vista-cab__titulo:focus { outline: none; }
.tb-vista-cab__texto { margin: 0; max-width: 640px; color: var(--tb-suave); font-size: 1.02rem; line-height: 1.55; }
.tb-vista-cab__texto:empty { display: none; }
.tb-vista-cab--ilustrada { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 12px; }
.tb-vista-cab--ilustrada .tb-btn { margin-top: 18px; }
.tb-vista-cab--ilustrada > div { flex: 1 1 0%; }
/* En un móvil muy estrecho, el dibujo encoge (el texto no baja de lo que ocupa su palabra más larga). */
.tb-vista-cab__ilustracion { flex: 0 1 auto; min-width: 0; width: 220px; }
.tb-vista-cab__ilustracion img { display: block; width: 100%; height: auto; }
.tb-vista-cab--ilustrada + .tb-seccion__titulo { margin-top: 20px; }

/* Cifras en grande: lo que más se pregunta, de un vistazo. */
.tb-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 36px;
  padding: 0;
  list-style: none;
}
.tb-cifras li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid var(--tb-borde);
  border-radius: var(--tb-radio-lg);
  background: #fff;
}
.tb-cifras svg { width: 28px; height: 28px; margin: 0 0 10px; color: var(--tb-rojo); }
.tb-cifras strong { font-size: 1.3rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tb-cifras span { color: var(--tb-suave); font-size: 0.9rem; line-height: 1.4; }

/* Acordeones (details/summary, sin JavaScript): el detalle, plegado. */
.tb-acordeones { border-top: 1px solid var(--tb-borde); }
.tb-acordeon { border-bottom: 1px solid var(--tb-borde); }
.tb-acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.tb-acordeon summary::-webkit-details-marker { display: none; }
.tb-acordeon summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 6px 4px 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.tb-acordeon[open] summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.tb-acordeon__cuerpo { padding: 0 2px 20px; color: var(--tb-suave); line-height: 1.6; }
.tb-acordeon__cuerpo p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.tb-acordeon__cuerpo a { color: var(--tb-rojo-texto); font-weight: 600; }
.tb-acordeon__cuerpo .tb-acordeon__mas { margin-top: 10px; }
.tb-info__mas { margin: 22px 0 0; font-size: 0.92rem; }
.tb-info__mas a { color: var(--tb-rojo-texto); font-weight: 600; }
.tb-check { flex: 0 0 auto; width: 52px; height: 52px; display: block; }
.tb-check circle { fill: var(--tb-ok); transform-origin: 50% 50%; animation: tb-crece 0.5s ease-out both; }
.tb-check path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: tb-traza 2s 0.25s ease forwards; }
@keyframes tb-crece { from { transform: scale(0.64); } to { transform: scale(1); } }
@keyframes tb-traza { to { stroke-dashoffset: 0; } }

/* --- Categorías: lateral con el árbol (en el móvil, plegado bajo un botón) --------------------------------------------- */
.tb-productos { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0 40px; align-items: start; }
.tb-productos--sin-lateral { grid-template-columns: minmax(0, 1fr); }
.tb-lateral {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--tb-arriba) + 20px);
  max-height: calc(100vh - var(--tb-arriba) - 40px);
  overflow-y: auto;
  margin: 0 0 24px;
  padding: 0 4px 4px 0;
}
.tb-lateral__abrir { display: none; }
.tb-arbol, .tb-arbol__sub { margin: 0; padding: 0; list-style: none; }
.tb-arbol__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--tb-tinta);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.tb-arbol__enlace:hover { background: rgba(38, 49, 58, 0.07); }
.tb-arbol__enlace[aria-current='true'] { background: var(--tb-tinta); color: #fff; }
.tb-arbol__nombre { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tb-arbol__n { flex: 0 0 auto; color: var(--tb-suave); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-arbol__enlace[aria-current='true'] .tb-arbol__n { color: rgba(255, 255, 255, 0.78); }
/* El triángulo de las que tienen subcategorías: hacia abajo, la desplegada. */
.tb-arbol__item--con-hijos > .tb-arbol__enlace::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 2px 2px 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.55;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tb-arbol__item--abierto > .tb-arbol__enlace::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-bottom: 4px; }
.tb-arbol__sub { margin: 2px 0 8px 16px; padding-left: 8px; border-left: 2px solid var(--tb-borde); }
.tb-arbol__sub[hidden] { display: none; }
.tb-arbol__sub .tb-arbol__enlace { padding: 8px 12px; font-size: 0.9rem; font-weight: 500; }
.tb-arbol__sub .tb-arbol__enlace[aria-current='true'] { font-weight: 700; }
.tb-lateral :focus-visible { outline-offset: -3px; }

/* --- Catálogo: tarjetas solo con foto, nombre y precio ------------------------------------------------------------ */
.tb-catalogo:focus { outline: none; }
.tb-grupo { margin: 0 0 44px; }
.tb-grupo__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 16px; }
.tb-grupo__titulo { margin: 0; font-size: 1.2rem; font-weight: 800; overflow-wrap: anywhere; }
.tb-grupo__mas { color: var(--tb-suave); font-size: 0.9rem; font-weight: 700; }
.tb-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb-producto { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tb-producto__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--tb-radio-lg);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cuadrada también sin aspect-ratio: un hueco (elemento flexible sin ancho) con el relleno en % del ancho. */
.tb-producto__foto::before { content: ''; padding-top: 100%; }
.tb-producto__foto img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.35s ease, transform 0.5s ease;
}
.tb-producto__foto .tb-producto__foto2 { opacity: 0; }
@media (hover: hover) {
  .tb-producto:hover .tb-producto__foto img:first-child { transform: scale(1.04); }
  .tb-producto:hover .tb-producto__foto .tb-producto__foto2 { opacity: 1; }
}
.tb-producto--agotado .tb-producto__foto img:not(.tb-producto__foto2) { opacity: 0.5; }
.tb-sin-foto { width: 38%; height: 38%; color: rgba(38, 49, 58, 0.2); }
.tb-producto__pill { position: absolute; left: 12px; top: 12px; z-index: 2; }
.tb-producto__nombre {
  display: -webkit-box;
  margin: 14px 0 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tb-producto__enlace { text-decoration: none; overflow-wrap: anywhere; }
/* Toda la tarjeta lleva a la ficha (un solo enlace); el botón de añadir queda por encima. */
.tb-producto__enlace::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: var(--tb-radio-lg); }
.tb-producto__enlace:focus-visible { outline: none; }
.tb-producto:focus-within .tb-producto__foto { box-shadow: 0 0 0 3px rgba(38, 49, 58, 0.35); }
.tb-producto__precio { margin: 0; font-size: 1.05rem; font-weight: 800; }
.tb-producto__pvp { margin: 2px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--tb-rojo-texto); }
.tb-producto__ahorro { margin: 1px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--tb-ok-texto); }
/* PVP con el icono de información a la derecha y, debajo, el precio profesional «desde» en azul corporativo (Tinta). */
.tb-producto__fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.tb-producto__etiqueta, .tb-precio .tb-precio__etiqueta { margin-right: 5px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tb-suave); }
.tb-producto__profesional { margin: 2px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--tb-tinta); }
.tb-precio .tb-precio__profesional { flex-basis: 100%; color: var(--tb-tinta); font-weight: 700; }
.tb-iconoinfo {
  position: relative;
  z-index: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tb-suave);
  cursor: pointer;
}
.tb-iconoinfo:hover, .tb-iconoinfo[aria-expanded='true'] { color: var(--tb-tinta); background: rgba(38, 49, 58, 0.08); }
.tb-iconoinfo:focus-visible { outline: 3px solid rgba(38, 49, 58, 0.35); outline-offset: 1px; }
.tb-iconoinfo__ico { width: 18px; height: 18px; }
.tb-precio .tb-iconoinfo { align-self: center; }
/* Recuadro flotante de descuentos: aparece con un fundido y un pequeño escalado desde el icono. */
.tb-info-pop {
  position: fixed;
  z-index: 90;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--tb-borde-fuerte);
  border-radius: var(--tb-radio);
  background: var(--tb-tarjeta);
  box-shadow: var(--tb-sombra-alta);
  color: var(--tb-tinta);
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.96);
  transform-origin: var(--tb-info-origen, 90%) top;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tb-info-pop--arriba { transform: translateY(6px) scale(0.96); transform-origin: var(--tb-info-origen, 90%) bottom; }
.tb-info-pop--visible { opacity: 1; pointer-events: auto; transform: none; }
.tb-info-pop p { margin: 6px 0 0; }
.tb-info-pop__titulo { display: block; font-size: 0.95rem; }
.tb-info-pop__profesional { color: var(--tb-tinta); font-weight: 700; }
.tb-info-pop__lista { margin: 6px 0 0; padding: 0 0 0 18px; }
.tb-info-pop__nota { color: var(--tb-suave); font-size: 0.78rem; }
@media (prefers-reduced-motion: reduce) {
  .tb-info-pop { transition: none; transform: none; }
}
.tb-producto__anadir {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tb-tinta);
  box-shadow: 0 6px 18px rgba(38, 49, 58, 0.16);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.tb-producto__anadir svg { width: 17px; height: 17px; color: var(--tb-rojo); }
@media (hover: hover) {
  .tb-producto__anadir:hover { background: var(--tb-rojo); color: #fff; }
  .tb-producto__anadir:hover svg { color: #fff; }
}

/* Esqueleto mientras carga. */
.tb-esqueleto li {
  height: 300px;
  border-radius: var(--tb-radio-lg);
  background: linear-gradient(90deg, #ebe8e1 0%, #f7f5f0 50%, #ebe8e1 100%);
  background-size: 200% 100%;
  animation: tb-brillo 1.4s linear infinite;
}
@keyframes tb-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Tienda cerrada, sin productos o sin conexión. */
.tb-estado-bloque {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 28px 22px;
  border: 1px solid var(--tb-borde);
  border-radius: var(--tb-radio-lg);
  background: #fff;
  box-shadow: var(--tb-sombra);
  text-align: center;
}
.tb-estado-bloque__ico { width: 44px; height: 44px; color: var(--tb-rojo); margin: 0 auto 10px; display: block; }
.tb-estado-bloque h2 { margin: 0 0 8px; font-size: 1.2rem; }
.tb-estado-bloque p { margin: 0 0 16px; color: var(--tb-suave); line-height: 1.55; }
.tb-esqueleto-destacado {
  height: 420px;
  border-radius: var(--tb-radio-xl);
  background: linear-gradient(90deg, #ebe8e1 0%, #f7f5f0 50%, #ebe8e1 100%);
  background-size: 200% 100%;
  animation: tb-brillo 1.4s linear infinite;
}

/* --- Botones ---------------------------------------------------------------------------------------------------- */
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.tb-btn svg { flex: 0 0 auto; width: 18px; height: 18px; }
.tb-btn--rojo { background: var(--tb-rojo); color: #fff; }
.tb-btn--rojo:hover { filter: brightness(0.94); }
.tb-btn--borde { background: #fff; color: var(--tb-tinta); border-color: var(--tb-borde); }
.tb-btn--borde svg { color: var(--tb-rojo); }
.tb-btn--borde:hover { border-color: var(--tb-borde-fuerte); background: #fbfaf7; }
.tb-btn--ancho { width: 100%; min-height: var(--tb-btn-h); }
.tb-btn[disabled] { opacity: 0.55; cursor: default; filter: none; }
/* Acción que no se deshace («Eliminar mi cuenta»): con borde y texto de error, para no confundirla con el rojo de comprar. */
.tb-btn--peligro { background: #fff; color: var(--tb-error); border-color: var(--tb-error); }
.tb-btn--peligro:not([disabled]):hover { background: #fef3f2; }
.tb-pagina a.tb-btn--borde { color: var(--tb-tinta); }

/* Cierre de ventana unificado (modal-cerrar-unificado): círculo blanco de 42 px, trazo #E7EAF0, X #6B7280. */
button.bardev-modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #e7eaf0;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
button.bardev-modal-close:hover { background: #f8fafc; border-color: #d1d5db; }

/* --- Estados (pastillas) ---------------------------------------------------------------------------------------- */
.tb-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.tb-estado::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.tb-estado--ok { background: var(--tb-ok-claro); color: var(--tb-ok-texto); }
.tb-estado--agotado { background: #eceae4; color: var(--tb-tinta); }
.tb-btn--grande { min-height: 54px; padding: 14px 26px; border-radius: 14px; font-size: 1.02rem; }
.tb-btn--blanco { background: #fff; color: var(--tb-tinta); }
.tb-btn--blanco:hover { background: #f4f2ed; }
.tb-btn--tinta { background: var(--tb-tinta); color: #fff; }
.tb-btn--tinta:hover { filter: brightness(1.15); }
.tb-pagina a.tb-btn--rojo,
.tb-pagina a.tb-btn--tinta { color: #fff; }
.tb-pagina a.tb-btn--blanco { color: var(--tb-tinta); }
.tb-btn--rojo svg, .tb-btn--tinta svg { color: #fff; }
.tb-btn--blanco svg { color: var(--tb-rojo); }

/* --- Ficha del producto: su propia pantalla, con la galería a la izquierda y la compra a la derecha --------------- */
.tb-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 0; color: var(--tb-suave); font-size: 0.88rem; }
.tb-migas a { color: var(--tb-suave); font-weight: 600; text-decoration: none; }
.tb-migas a:hover { color: var(--tb-tinta); text-decoration: underline; }
.tb-migas__cat::before { content: '/'; margin: 0 8px 0 0; opacity: 0.6; }
.tb-migas__cat a + a::before { content: '/'; display: inline-block; margin: 0 8px; opacity: 0.6; text-decoration: none; }
.tb-ficha__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}
.tb-ficha__compra { position: sticky; top: calc(var(--tb-arriba) + 24px); min-width: 0; }
.tb-ficha__nombre {
  margin: 8px 0 14px;
  font-size: 1.8rem;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.tb-ficha__nombre:focus { outline: none; }
.tb-ficha__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tb-ficha__desc { margin: 18px 0 0; color: var(--tb-suave); font-size: 1.02rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
/* «Características:» bajo la descripción: una por línea, con un punto delante. */
.tb-ficha__caracs { margin: 16px 0 0; }
.tb-ficha__caracs-titulo { margin: 0 0 6px; color: var(--tb-tinta); font-size: 1rem; font-weight: 700; }
.tb-ficha__caracs-lista { margin: 0; padding: 0; list-style: none; color: var(--tb-suave); font-size: 1rem; line-height: 1.55; }
.tb-ficha__caracs-lista li { position: relative; padding-left: 18px; overflow-wrap: anywhere; }
.tb-ficha__caracs-lista li + li { margin-top: 2px; }
.tb-ficha__caracs-nombre { color: var(--tb-tinta); font-weight: 600; }
.tb-ficha__caracs-lista li::before { content: ''; position: absolute; left: 4px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--tb-tinta); }
/* El importe de lo elegido, siempre en su sitio: al cambiar las unidades, nada se mueve. */
.tb-ficha__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 0; padding: 14px 16px; border-radius: var(--tb-radio); background: #fff; color: var(--tb-suave); font-size: 0.95rem; font-weight: 600; }
.tb-ficha__total-importe { color: var(--tb-tinta); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-ficha__total + .tb-ficha__accion { margin-top: 10px; }
.tb-ficha__accion { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 24px 0 18px; }
.tb-ficha__accion .tb-cantidad { flex: 0 0 auto; }
.tb-ficha__accion .tb-cantidad__btn,
.tb-ficha__accion .tb-cantidad__campo { height: 52px; }
.tb-ficha__accion .tb-btn { flex: 1 1 200px; min-height: 54px; font-size: 1.02rem; }
.tb-ficha__garantias { display: grid; gap: 12px; margin: 0 0 24px; padding: 18px 18px; list-style: none; border-radius: var(--tb-radio-lg); background: #fff; }
.tb-ficha__garantias li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; line-height: 1.35; }
.tb-ficha__garantias svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--tb-tinta); }
.tb-ficha__ref { margin: 18px 0 0; color: var(--tb-suave); font-size: 0.82rem; }
.tb-ficha__ayuda { margin: 18px 0 0; color: var(--tb-suave); font-size: 0.9rem; }
.tb-ficha__ref + .tb-ficha__ayuda { margin-top: 6px; }
.tb-ficha__ayuda a { color: var(--tb-tinta); font-weight: 700; }

/* Galería: se desliza con el dedo (scroll-snap); miniaturas y flechas para el ratón. */
.tb-galeria { min-width: 0; }
.tb-galeria__marco { position: relative; }
.tb-galeria__pista {
  display: flex;
  /* Cuadrada, pero nunca más alta que lo que queda bajo la barra y el menú fijos (móvil en horizontal, ventana baja). */
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - var(--tb-arriba) - 32px);
  max-height: calc(100svh - var(--tb-arriba) - 32px);
  border-radius: var(--tb-radio-xl);
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tb-galeria__pista::-webkit-scrollbar { display: none; }
.tb-galeria__pista:focus-visible { outline: 3px solid rgba(38, 49, 58, 0.45); outline-offset: 3px; }
.tb-galeria__foto {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.tb-galeria__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tb-galeria__flecha {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tb-tinta);
  box-shadow: 0 6px 18px rgba(38, 49, 58, 0.16);
  cursor: pointer;
}
.tb-galeria__flecha svg { width: 20px; height: 20px; }
.tb-galeria__flecha--antes { left: 14px; }
.tb-galeria__flecha--despues { right: 14px; }
.tb-galeria__flecha[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .tb-galeria__flecha { display: inline-flex; }
}
.tb-galeria__contador {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(38, 49, 58, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: none;
}
/* Con aire alrededor para que el anillo del foco se vea entero (la tira recorta lo que sale de ella). */
.tb-galeria__miniaturas { display: flex; gap: 10px; margin: 8px -4px 0; padding: 6px; overflow-x: auto; scrollbar-width: none; }
.tb-galeria__miniaturas::-webkit-scrollbar { display: none; }
.tb-galeria__mini {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.tb-galeria__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-galeria__mini[aria-pressed='true'] { border-color: var(--tb-tinta); }

/* Compra fija abajo (móvil, en la ficha, cuando el botón principal ya no se ve). */
.tb-barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tb-borde);
  background: #fff;
  box-shadow: 0 -10px 30px rgba(38, 49, 58, 0.1);
  animation: tb-entra-arriba 0.2s ease-out;
}
.tb-barra-compra[hidden] { display: none; }
.tb-barra-compra__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tb-barra-compra__nombre { overflow: hidden; color: var(--tb-suave); font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
.tb-barra-compra__precio { font-size: 1.1rem; font-weight: 800; }
.tb-barra-compra .tb-btn { flex: 0 0 auto; min-height: 48px; }
.tb-con-barra .tb-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
  /* La barra no tapa el final de la página (los relacionados y el pie). */
  body.tb-con-barra { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  /* Ni debajo de la barra de compra. */
  html.tb-con-barra { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 901px) {
  .tb-barra-compra { display: none !important; }
  .tb-con-barra .tb-toast { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Capa: carrito (cajón) --------------------------------------------------------------------------------------- */
.tb-capa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  background: var(--tb-scrim);
  -webkit-backdrop-filter: var(--tb-scrim-blur);
  backdrop-filter: var(--tb-scrim-blur);
}
.tb-capa--cajon { justify-content: flex-end; }
.tb-cajon {
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100%;
  border-left: 1px solid var(--tb-borde);
  background: #fff;
  color: var(--tb-tinta);
  box-shadow: var(--tb-sombra-alta);
  outline: none;
  animation: tb-entra-lado 0.22s ease-out;
}
@keyframes tb-entra-lado { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tb-entra-arriba { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.tb-panel__cab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px;
  border-bottom: 1px solid var(--tb-borde);
}
.tb-panel__cab h2 { margin: 0; min-width: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tb-panel__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; -webkit-overflow-scrolling: touch; }
.tb-panel__pie {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tb-borde);
  background: #fff;
}
.tb-cajon .tb-panel__pie { flex-direction: column; align-items: stretch; }


/* Carrito. */
.tb-vacio { padding: 26px 8px; text-align: center; }
.tb-vacio__ico { width: 40px; height: 40px; color: rgba(38, 49, 58, 0.3); margin: 0 auto 10px; display: block; }
.tb-vacio__titulo { margin: 0 0 6px; font-weight: 800; }
.tb-vacio__texto { margin: 0 0 14px; color: var(--tb-suave); line-height: 1.5; }
.tb-lineas { margin: 0; padding: 0; list-style: none; }
.tb-linea {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas: 'foto info importe' 'foto acciones acciones';
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tb-borde);
}
.tb-linea__foto {
  grid-area: foto;
  width: 60px;
  height: 60px;
  border: 1px solid var(--tb-borde);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-linea__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tb-linea__info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-linea__nombre { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tb-linea__unidad { font-size: 0.85rem; color: var(--tb-suave); line-height: 1.2; }
.tb-linea__unidad-precio { font-size: 1rem; font-weight: 800; color: var(--tb-tinta); }
.tb-linea__pvp { font-size: 0.82rem; font-weight: 700; color: var(--tb-rojo-texto); }
.tb-linea__ahorro { font-size: 0.82rem; font-weight: 600; color: var(--tb-ok-texto); }
.tb-linea__aviso { font-size: 0.82rem; font-weight: 700; color: var(--tb-error); }
.tb-linea__importe { grid-area: importe; font-weight: 800; white-space: nowrap; }
.tb-linea__acciones { grid-area: acciones; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tb-linea__quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--tb-borde);
  border-radius: 10px;
  background: #fff;
  color: var(--tb-suave);
  cursor: pointer;
}
.tb-linea__quitar svg { width: 18px; height: 18px; }
.tb-linea__quitar:hover { color: var(--tb-error); border-color: rgba(180, 35, 24, 0.35); }

.tb-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--tb-borde); border-radius: 12px; background: #fff; overflow: hidden; }
.tb-cantidad__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--tb-tinta);
  cursor: pointer;
}
.tb-cantidad__btn svg { width: 16px; height: 16px; }
.tb-cantidad__btn[disabled] { color: rgba(38, 49, 58, 0.3); cursor: default; }
.tb-cantidad__campo {
  width: 44px;
  height: 40px;
  border: 0;
  border-left: 1px solid var(--tb-borde);
  border-right: 1px solid var(--tb-borde);
  background: #fff;
  color: var(--tb-tinta);
  font: inherit;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tb-cantidad__campo::-webkit-outer-spin-button,
.tb-cantidad__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tb-resumen { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--tb-hueso); }
.tb-resumen__fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.95rem; }
.tb-resumen__fila span:last-child { font-weight: 700; }
.tb-resumen__nota { margin: 6px 0 0; font-size: 0.85rem; color: var(--tb-suave); }
.tb-resumen__nota:empty { display: none; }

.tb-pago { margin: 16px 0 0; }
.tb-campo { margin: 0 0 14px; }
.tb-campo label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 0.92rem; }
.tb-campo input {
  width: 100%;
  max-width: 200px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--tb-borde-fuerte);
  border-radius: 12px;
  background: #fff;
  color: var(--tb-tinta);
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.tb-campo input[aria-invalid='true'] { border-color: var(--tb-error); }
.tb-ayuda { margin: 6px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--tb-suave); }
.tb-ayuda--error { color: var(--tb-error); font-weight: 600; }
.tb-enlace-cp { padding: 0; border: 0; background: none; font: inherit; color: var(--tb-tinta); text-decoration: underline; cursor: pointer; }
.tb-enlace-cp:hover { text-decoration-thickness: 2px; }
#tb-cp-cuenta strong { color: var(--tb-tinta); font-weight: 700; }
/* «Revisa tus datos» del carrito (con sesión): resumen con «Cambiar» o los campos con lo que falta. */
.tb-datos { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--tb-borde); border-radius: 12px; min-width: 0; }
.tb-datos legend { padding: 0 4px; font-weight: 800; font-size: 0.95rem; }
.tb-datos__resumen p { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.tb-datos__campos .tb-ayuda:first-child { margin: 0 0 10px; }
.tb-datos .tb-campo input { max-width: 100%; letter-spacing: normal; font-size: 1rem; }
.tb-datos__subtitulo { margin: 6px 0 8px; font-weight: 800; font-size: 0.92rem; }
.tb-opcional { font-weight: 400; color: var(--tb-suave); }
.tb-casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}
.tb-casilla input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tb-tinta); }
.tb-casilla a { font-weight: 700; text-decoration: underline; }
.tb-senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tb-error {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tb-error-claro);
  color: var(--tb-error);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}
.tb-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1rem; }
.tb-total strong { font-size: 1.25rem; font-weight: 800; }
.tb-ahorro-total { margin: 4px 0 0; font-size: 0.88rem; font-weight: 700; color: var(--tb-ok-texto); text-align: right; }
/* Envío gratis: cuánto falta, con su barra. */
.tb-gratis { margin: 0 0 10px; }
.tb-gratis .tb-resumen__nota { margin: 0 0 8px; color: var(--tb-tinta); font-weight: 600; }
.tb-progreso { height: 6px; border-radius: 999px; background: rgba(38, 49, 58, 0.12); overflow: hidden; }
.tb-progreso span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--tb-rojo); transition: width 0.3s ease; }
.tb-progreso--lleno span { background: var(--tb-ok); }
/* Nota fija con el importe desde el que el envío es gratis: pequeña y discreta, bajo la barra. */
/* Siempre en una fila: el JS (`ajustarNotaEnvio`) reduce la letra hasta que cabe en el ancho. */
.tb-resumen__regla { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--tb-suave); white-space: nowrap; overflow: hidden; }
.tb-resumen__regla:empty { display: none; }
.tb-resumen__regla-importe { font-weight: 800; color: var(--tb-tinta); }

/* Aviso breve al añadir. */
/* Centrado con márgenes automáticos (no con transform: la animación de entrada lo pisaría y saldría desplazado). */
.tb-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  background: var(--tb-tinta);
  color: #fff;
  box-shadow: var(--tb-sombra-alta);
  font-size: 0.9rem;
  animation: tb-entra-arriba 0.2s ease-out;
}
.tb-toast span { min-width: 0; overflow-wrap: anywhere; }
.tb-toast__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}


/* --- Pantallas medianas y móvil ---------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tb-confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-confianza li { justify-content: flex-start; padding: 18px 12px; }
  .tb-confianza li + li { border-left: 0; }
  .tb-confianza li:nth-child(even) { border-left: 1px solid var(--tb-borde); }
  .tb-confianza li:nth-child(n + 3) { border-top: 1px solid var(--tb-borde); }
  .tb-destacado { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .tb-ficha__rejilla { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tb-ficha__compra { position: static; }
  .tb-productos { grid-template-columns: minmax(0, 1fr); }
  .tb-lateral { position: static; max-height: none; overflow: visible; padding: 0; margin: 0 0 20px; }
  .tb-lateral__abrir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--tb-borde);
    border-radius: var(--tb-radio);
    background: #fff;
    color: var(--tb-suave);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .tb-lateral__actual { color: var(--tb-tinta); font-weight: 800; overflow-wrap: anywhere; text-align: right; }
  .tb-arbol { display: none; margin-top: 8px; padding: 8px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); background: #fff; }
  .tb-lateral--abierto .tb-arbol { display: block; }
  .tb-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-pro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 720px) {
  /* Sin rotar (lo que cambia solo no da tiempo a leerlo y no se puede parar): devolución y garantía siguen a la vista
     en la franja de ventajas del inicio y en cada ficha. */
  .tb-anuncio__lista li + li { display: none; }
}

@media (max-width: 640px) {
  :root { --tb-margen: 16px; }
  .tb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tb-cat__nombre { left: 12px; right: 12px; bottom: 12px; font-size: 1rem; }
  /* Con algún nombre de varias palabras (tienda-publica.js), que aquí puede ir en dos líneas: el oscuro empieza más
     arriba, para que también la primera quede a más de 4,5:1 sobre fotos de fondo blanco. */
  .tb-cats--largos .tb-cat::after { background: linear-gradient(180deg, rgba(19, 17, 15, 0) 25%, rgba(19, 17, 15, 0.62) 50%, rgba(19, 17, 15, 0.88) 100%); }
  .tb-hero { align-items: flex-end; min-height: 520px; }
  .tb-hero::after { background: linear-gradient(180deg, rgba(19, 17, 15, 0) 20%, rgba(19, 17, 15, 0.55) 52%, rgba(19, 17, 15, 0.92) 100%); }
  .tb-hero__fondo img { object-position: 50% 30%; }
  .tb-hero__cuerpo { padding-top: 40px; padding-bottom: 36px; }
  .tb-hero__titulo { max-width: 11ch; }
  .tb-btn--grande { width: 100%; }
  .tb-confianza li { gap: 10px; font-size: 0.84rem; }
  .tb-confianza svg { width: 22px; height: 22px; }
  .tb-seccion, .tb-pro { margin-top: 48px; }
  .tb-banner { align-items: flex-end; min-height: 440px; margin-top: 48px; }
  .tb-banner::after { background: linear-gradient(180deg, rgba(13, 12, 16, 0) 30%, rgba(13, 12, 16, 0.9) 100%); }
  .tb-banner__fondo img { object-position: 50% 20%; }
  .tb-banner__cuerpo { align-items: flex-start; padding-bottom: 32px; text-align: left; }
  .tb-pro { padding: 14px; }
  .tb-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .tb-producto__nombre { font-size: 0.92rem; }
  .tb-producto__precio { font-size: 0.98rem; }
  .tb-producto__anadir { right: 8px; bottom: 8px; min-height: 36px; padding: 6px 11px; font-size: 0.8rem; }
  .tb-vista-cab { padding-top: 26px; }
  .tb-vista-cab__ilustracion { width: 112px; }
  .tb-cifras { gap: 10px; }
  .tb-cifras li { padding: 16px 14px; }
  .tb-cifras strong { font-size: 1.1rem; }
  /* La galería, de borde a borde. */
  .tb-ficha .tb-galeria { margin: 0 calc(-1 * var(--tb-margen)); }
  .tb-galeria__pista { border-radius: 0; }
  .tb-galeria__miniaturas { margin: 8px 0 0; padding: 6px var(--tb-margen); }
  .tb-galeria__mini { width: 60px; height: 60px; }
  .tb-galeria__flecha { display: none !important; }
  .tb-migas { padding: 14px 0; }
  .tb-cajon { width: 100vw; border-left: 0; }
  .tb-esqueleto li { height: 240px; }
  .tb-esqueleto-destacado { height: 320px; }
}
/* Pantallas de menos de 300 px (la exterior de un móvil plegable): sin el dibujo de la cabecera, que ya no se vería. */
@media (max-width: 299px) {
  .tb-vista-cab__ilustracion { display: none; }
}
/* Muy estrecho (pantalla de fuera de un plegable, 400 % de zoom): las cifras en una columna y los nombres de categoría,
   algo más pequeños, para que quepan enteros sin partir las palabras («Precintados» se partía hasta 307 px). En fotos
   tan bajas el nombre sube hacia lo claro del degradado: el oscuro empieza más arriba, como con nombres largos. */
@media (max-width: 319px) {
  .tb-cifras { grid-template-columns: minmax(0, 1fr); }
  .tb-cat__nombre { left: 10px; right: 10px; font-size: 0.875rem; }
  .tb-cat::after { background: linear-gradient(180deg, rgba(19, 17, 15, 0) 25%, rgba(19, 17, 15, 0.62) 50%, rgba(19, 17, 15, 0.88) 100%); }
}
@media (min-width: 641px) {
  .tb-galeria__contador { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-producto__foto img, .tb-cajon, .tb-toast, .tb-esqueleto li, .tb-esqueleto-destacado, .tb-barra-compra,
  .tb-destacado__foto img, .tb-cat img, .tb-progreso span { animation: none; transition: none; }
  .tb-producto:hover .tb-producto__foto img:first-child, .tb-destacado__fotos:hover .tb-destacado__foto:first-child img,
  .tb-cat:hover img { transform: none; }
  .tb-check circle, .tb-check path { animation: none; stroke-dashoffset: 0; }
}

/* --- Mi cuenta ----------------------------------------------------------------------------------------------------- */
.tb-precio .tb-precio__pvp { flex-basis: 100%; color: var(--tb-rojo-texto); font-weight: 700; }
.tb-precio .tb-precio__plan { flex-basis: 100%; color: var(--tb-ok-texto); font-weight: 700; }
.tb-resumen__fila--pvp { color: var(--tb-rojo-texto); }
.tb-resumen__fila--descuento { color: var(--tb-ok-texto); }
.tb-cuenta { padding-bottom: 48px; }
.tb-cuenta-entrar { max-width: 420px; padding: 20px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio-lg); background: var(--tb-tarjeta); }
.tb-cuenta-entrar .tb-campo input, .tb-cuenta-form .tb-campo input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--tb-borde-fuerte); border-radius: 10px; font: inherit; }
.tb-cuenta-barra { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
/* Mi cuenta con menú lateral; en móvil, el menú arriba en dos columnas. */
.tb-cuenta-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.tb-cuenta-menu { display: grid; gap: 6px; }
.tb-cuenta-menu__op { appearance: none; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); background: #fff; color: var(--tb-tinta); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.tb-cuenta-menu__op--activa { border-color: var(--tb-rojo); background: var(--tb-rojo-claro); color: var(--tb-rojo-texto); }
.tb-cuenta-menu__op:focus-visible { outline: 2px solid var(--tb-rojo); outline-offset: 2px; }
.tb-cuenta-contenido { min-width: 0; }
.tb-cuenta-contenido .tb-cuenta-seccion { margin-bottom: 0; }
@media (hover: hover) {
  .tb-cuenta-menu__op:not(.tb-cuenta-menu__op--activa):hover { border-color: var(--tb-borde-fuerte); background: #fbfaf7; }
}
@media (max-width: 720px) {
  .tb-cuenta-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tb-cuenta-menu { grid-template-columns: 1fr 1fr; }
  .tb-cuenta-menu__op { text-align: center; padding: 8px 10px; font-size: 0.9rem; line-height: 1.25; }
}
.tb-cuenta-seccion { margin: 0 0 28px; padding: 20px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio-lg); background: var(--tb-tarjeta); }
.tb-cuenta-seccion__titulo { margin: 0 0 12px; font-size: 1.15rem; }
.tb-cuenta-nota { margin: 0 0 12px; color: var(--tb-suave); }
.tb-cuenta-barberias, .tb-pedidos, .tb-pedido__lineas { list-style: none; margin: 0; padding: 0; }
.tb-cuenta-barberias { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tb-cuenta-barberia { padding: 14px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); }
.tb-cuenta-barberia--activa { border-color: var(--tb-ok); background: var(--tb-ok-claro); }
.tb-cuenta-barberia__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.tb-cuenta-barberia__desc { margin: 8px 0 0; color: var(--tb-suave); }
.tb-cuenta-barberia__desc--si { color: var(--tb-ok-texto); font-weight: 800; }
.tb-cuenta-barberia__dir { margin: 6px 0 10px; font-size: 0.9rem; color: var(--tb-suave); }
.tb-etiqueta { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--tb-hueso); font-size: 0.8rem; font-weight: 700; }
.tb-etiqueta--pagado, .tb-etiqueta--entregado { background: var(--tb-ok-claro); color: var(--tb-ok-texto); }
.tb-etiqueta--preparando, .tb-etiqueta--enviado { background: var(--tb-ambar-claro); color: var(--tb-ambar-texto); }
.tb-etiqueta--cancelado, .tb-etiqueta--caducado, .tb-etiqueta--reembolsado { background: var(--tb-error-claro); color: var(--tb-error); }
.tb-pedidos { display: grid; gap: 12px; }
/* Marca tras el último pedido pintado: al acercarse a la pantalla se cargan 5 más. */
.tb-pedidos-fin { height: 1px; }
.tb-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; margin: 0 0 8px; }
.tb-filtros__campo--ancho { grid-column: 1 / -1; }
.tb-filtros__campo label { display: block; margin: 0 0 4px; font-weight: 700; font-size: 0.86rem; }
.tb-filtros__campo input, .tb-filtros__campo select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--tb-borde-fuerte); border-radius: 10px; background: #fff; font: inherit; color: inherit; }
.tb-filtros__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.tb-filtros__recuento { margin: 0; font-size: 0.88rem; color: var(--tb-suave); }
.tb-filtros__limpiar { min-height: 38px; padding: 6px 14px; }
.tb-pedido { padding: 14px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); }
.tb-pedido__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-pedido p { margin: 6px 0 0; }
.tb-pedido__fecha, .tb-pedido__dir, .tb-pedido__seguimiento, .tb-pedido__envio { color: var(--tb-suave); font-size: 0.9rem; }
.tb-pedido__desc { color: var(--tb-ok-texto); font-weight: 700; }
.tb-pedido__total { font-weight: 800; }
.tb-pedido__lineas li { margin: 4px 0; }
/* Devoluciones dentro de la tarjeta del pedido (Mi cuenta, fase 1 del plan de devoluciones). */
.tb-devs { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--tb-borde-fuerte); display: grid; gap: 10px; }
.tb-dev { padding: 12px; border-radius: 12px; background: var(--tb-hueso); }
.tb-dev__aviso { color: var(--tb-error); font-weight: 700; }
.tb-dev .tb-pedido__cab strong { white-space: nowrap; }
.tb-dev-form__repaso { padding: 12px; border-radius: 10px; background: var(--tb-rojo-claro); }
.tb-dev-form__repaso p { margin: 6px 0 0; }
.tb-dev-form__repaso .tb-dev-form__etiqueta { margin: 0; }
.tb-dev__cancelar { margin-top: 10px; min-height: 40px; padding: 6px 14px; }
.tb-devs__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tb-devs__acciones .tb-btn { min-height: 44px; }
.tb-devs__plazo { flex: 1 0 100%; margin: 0; color: var(--tb-suave); font-size: 0.88rem; }
.tb-dev-form { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--tb-borde-fuerte); border-radius: 12px; background: #fff; }
.tb-dev-form__titulo { margin: 0; font-size: 1.05rem; }
.tb-dev-form__nota { margin: 0; color: var(--tb-suave); font-size: 0.9rem; }
.tb-dev-form__etiqueta { display: block; margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; }
.tb-dev-form__motivos { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.tb-dev-form__motivos legend { padding: 0; margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; }
.tb-dev-form__motivo { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--tb-borde); border-radius: 10px; cursor: pointer; }
.tb-dev-form__motivo input { width: 18px; height: 18px; accent-color: var(--tb-rojo); flex: 0 0 auto; }
.tb-dev-form__motivo--fuera { color: var(--tb-suave); cursor: default; }
/* Cómo nos lo devuelve (recogida o lo lleva él) y aviso de «sin abrir y con su precinto» (titular, 04-11-2026). */
.tb-dev-form__motivo > span { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.tb-dev-form__motivo em { font-style: normal; color: var(--tb-suave); font-size: 0.88rem; }
.tb-dev-form__precinto { padding: 10px 12px; border-radius: 10px; background: var(--tb-ambar-claro); color: var(--tb-ambar-texto); }
.tb-dev-form__precinto p { margin: 0 0 8px; font-size: 0.9rem; }
.tb-dev-form__check { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; font-weight: 700; color: var(--tb-tinta); cursor: pointer; }
.tb-dev-form__check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tb-rojo); flex: 0 0 auto; }
.tb-dev__dir { font-size: 0.9rem; }
.tb-dev__dir summary { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; color: var(--tb-rojo-texto); cursor: pointer; }
.tb-dev__dir p { overflow-wrap: anywhere; margin: 2px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--tb-hueso); }
.tb-dev .tb-dev__dir p { background: var(--tb-tarjeta); }
.tb-dev__llevas { font-weight: 700; color: var(--tb-tinta); }
.tb-dev__llevar { margin-top: 10px; min-height: 40px; padding: 6px 14px; }
.tb-dev-form__articulos { display: grid; gap: 8px; }
.tb-dev-form__articulos .tb-dev-form__etiqueta { margin: 0; }
.tb-dev-form__articulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tb-dev-form__nombre { flex: 1 1 200px; }
.tb-dev-form select, .tb-dev-form textarea { box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--tb-borde-fuerte); border-radius: 10px; background: #fff; font: inherit; color: inherit; }
.tb-dev-form select { flex: 0 0 auto; min-width: 140px; }
.tb-dev-form textarea { width: 100%; resize: vertical; }
.tb-dev-form__resumen { margin: 0; font-weight: 800; }
.tb-dev-form__resumen:empty { display: none; }
.tb-dev-form__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tb-dev-form__acciones .tb-btn { min-height: 44px; }
@media (max-width: 520px) {
  .tb-dev-form__acciones .tb-btn, .tb-devs__acciones .tb-btn { flex: 1 1 100%; }
}
.tb-cuenta-direccion { margin: 0 0 16px; padding: 14px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); }
.tb-cuenta-direccion legend { padding: 0 6px; font-weight: 800; }
.tb-cuenta-form .tb-btn { margin: 0 8px 8px 0; }
.tb-cuenta-guardado { margin: 8px 0 0; color: var(--tb-ok-texto); font-weight: 700; }
.tb-cuenta-guardado--error { color: var(--tb-error); }
.tb-cuenta-guardado a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.tb-cuenta-borrar__lista { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; font-size: 0.92rem; }
.tb-cuenta-borrar__lista li { margin: 2px 0; }
.tb-cuenta-form .tb-campo { max-width: 520px; }
/* `.tb-campo input` limita a 200 px (campos de código): en la cuenta, nombre, teléfono y dirección ocupan todo el ancho de su campo. */
.tb-cuenta-entrar .tb-campo input, .tb-cuenta-form .tb-campo input { max-width: 100%; }
.tb-cuenta-direccion .tb-campo { max-width: none; width: 100%; }
.tb-cuenta-direccion .tb-campo input { width: 100%; max-width: 100%; }
.tb-cuenta-direccion { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.tb-cuenta-direccion legend { grid-column: 1 / -1; }
.tb-cuenta-direccion .tb-campo:nth-of-type(1), .tb-cuenta-direccion .tb-campo:nth-of-type(2) { grid-column: 1 / -1; }
.tb-cuenta-subtitulo { margin: 22px 0 8px; font-size: 1.1rem; font-weight: 800; }
.tb-cuenta-direccion > .tb-btn { grid-column: 1 / -1; justify-self: start; }
.tb-cuenta-alterna { margin: 14px 0 0; }
.tb-almacen-btn[hidden], .tb-descontar-btn[hidden] { display: none !important; }
.bl-land-bar .bl-land-bar__btn.tb-descontar-btn { width: auto; padding: 0 14px 0 10px; gap: 6px; font: inherit; font-weight: 700; cursor: pointer; }
.tb-descontar-btn__texto { font-size: 0.9rem; line-height: 1; }
@media (max-width: 720px) {
  .bl-land-bar .bl-land-bar__btn.tb-descontar-btn:not([hidden]) {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; height: 52px; padding: 0 22px 0 16px;
    background: var(--tb-rojo-texto); border-color: transparent; border-radius: 26px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  .tb-descontar-btn__texto { font-size: 1rem; }
}

/* Mi cuenta: entrar con biometría en un dispositivo recordado. */
.tb-cuenta-bio { display: grid; gap: 12px; }
.tb-cuenta-bio__quien { margin: 0; font-size: 0.95rem; color: var(--tb-suave); overflow-wrap: anywhere; }
.tb-cuenta-bio__otros { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 0.88rem; }
.tb-cuenta-bio__volver { margin: 0 0 16px; font-size: 0.88rem; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.tb-cuenta-bio__volver .tb-enlace-cp { text-align: left; }
/* «Olvidé mi contraseña», bajo el campo de la contraseña. */
.tb-cuenta-olvido { margin: -4px 0 14px; font-size: 0.88rem; line-height: 1.4; text-align: left; }
#tb-cuenta-recuperar .tb-cuenta-bio__volver { margin: 14px 0 0; }
#tb-cuenta-nueva .tb-cuenta-bio__quien { margin: 0 0 14px; }
.tb-cuenta-recordar { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 0.9rem; line-height: 1.4; cursor: pointer; }
.tb-cuenta-recordar input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tb-rojo); }

/* «IVA incluido» en muy pequeño junto a los importes del carrito (titular, 03-11-2026). Todos los importes de la tienda llevan IVA. */
.tb-iva { margin-left: 4px; font-size: 0.6rem; font-weight: 400; letter-spacing: 0.01em; color: var(--tb-suave); white-space: nowrap; }
.tb-resumen__fila span:last-child .tb-iva { font-weight: 400; }