/* Solira Build a Box (Fase B, 2026-08-15). Tokens del rediseno promovido:
   azul unico #4980CC, verde de estado #157F3D, superficie clara. */

.sbb { padding: 26px 0 60px; background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 240px); }
.sbb__head { max-width: 1200px; margin: 0 auto 18px; padding: 0 20px; }
.sbb__eyebrow { display: inline-block; background: #EDF2FA; color: #3A6BB0; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.sbb__title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.7rem, 4vw, 2.6rem); color: #1B2A4A; margin: 0 0 8px; }
.sbb__sub { color: #475569; max-width: 62ch; margin: 0 0 16px; }

/* El selector de modo bajo a `.sbb__modes`, justo encima del buscador: es un
   CONTROL, no un anuncio. Arriba llevaba peso de marketing que no puede
   sostener — la cifra del descuento vive ahora en su tarjeta. */
.sbb__modes { margin: 0 0 14px; }
.sbb__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sbb__tab { border: 1px solid #DCE4EF; background: #FFFFFF; color: #1B2A4A; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.sbb__tab.is-on { background: #4980CC; border-color: #4980CC; color: #FFFFFF; }
.sbb__tabnote { font-size: 0.85rem; color: #64748B; margin: 8px 0 0; }

/* ------------------------------------------------------------------------
   LAS CUATRO TARJETAS (16-08-2026)
   Antes esto eran tres frases con un check verde y dos lineas de letra
   pequena: todo lo que tenemos que decir, en gris. Medido, la primera tarjeta
   de producto empezaba en y=623 en escritorio y en y=706 en movil — con un
   viewport de 659 no se veia NI UN producto en la primera pantalla.
   Una idea por tarjeta, y el dato como imagen (el numero enorme, la foto del
   vial, el chip de pureza, las pildoras de meses). El color es tinte de marca,
   no pastel: la fuerza la da el TAMANO, no la saturacion.
   ---------------------------------------------------------------------- */
.sbb__cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0 0 12px; }
.sbb-hcard { position: relative; overflow: hidden; border-radius: 14px; padding: 15px 15px 14px; min-height: 136px; display: flex; flex-direction: column; }
.sbb-hcard b { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: #1B2A4A; margin-top: auto; }
.sbb-hcard__note { font-size: 0.78rem; color: #475569; margin-top: 3px; line-height: 1.35; }
.sbb-hcard__note .amount { font-weight: 600; }

/* Un punto mas de color y un borde propio, para que las cuatro se despeguen
   del fondo (operador, 2026-08-16: "just to make them pop more").
   El fondo sube poco a proposito: encima va texto gris, y oscurecer el campo
   sin mirar el texto es como se pierde el contraste sin enterarse — paso hace
   una hora en las tarjetas del catalogo, que cayeron a 4,14:1. Medido despues
   de este cambio: el titulo entre 11,4 y 12,2 y la nota entre 6,3 y 6,7 en las
   cuatro, o sea AA de sobra. */
.sbb-hcard { border: 1.5px solid transparent; }
.sbb-hcard--amber { background: #FBE9CC; border-color: #F1CE93; }
.sbb-hcard--green { background: #DCEEE3; border-color: #A9D6BB; }
.sbb-hcard--blue  { background: #DCE8F8; border-color: #A9C4EA; }
.sbb-hcard--slate { background: #E3E7EF; border-color: #C0C8D8; }

/* El numero ES el grafico. */
.sbb-hcard__big { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 0.95; color: #1B2A4A; letter-spacing: -0.02em; }
.sbb-hcard__big span { font-size: 0.42em; vertical-align: super; margin-left: 2px; }

.sbb-hcard__tag { align-self: flex-start; background: #FFFFFF; color: #157F3D; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 999px; }
/* El vial asoma por la esquina inferior: ensena el regalo sin robarle sitio al
   texto. 🔴 Se limita la ALTURA, no el ancho: el recorte del vial es 1:2.26,
   asi que fijando el ancho a 92px salia de 208px de alto — se salia de la
   tarjeta (la recortaba el overflow) y se plantaba encima del titulo, que
   quedaba en "Bacteriostatic Water 10m". Misma trampa que las miniaturas del
   carrito. El padding-right del texto es el que garantiza que no se toquen,
   pase lo que pase con la foto. */
.sbb-hcard__vial { position: absolute; bottom: -8px; right: -6px; width: auto; height: 116px; object-fit: contain; pointer-events: none; }
.sbb-hcard--green b,
.sbb-hcard--green .sbb-hcard__note { padding-right: 84px; }

.sbb-hcard__chip { align-self: flex-start; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; background: #FFFFFF; border-radius: 10px; padding: 7px 10px; }
.sbb-hcard__chip b { font-size: 1.05rem; margin: 0; font-family: 'DM Sans', sans-serif; }
.sbb-hcard__chip em { font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: #157F3D; }
.sbb-hcard__chip > span { flex: 1 0 100%; font-size: 0.68rem; color: #64748B; }

/* Los meses 2 y 3 tachados: dibujan lo que NO se firma. Es la unica ventaja
   real que tenemos frente a una caja por suscripcion, y hasta hoy solo se
   decia en gris ("One-time order. No subscription."). */
.sbb-hcard__months { display: flex; gap: 5px; flex-wrap: wrap; }
.sbb-hcard__months em { font-style: normal; font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.sbb-hcard__months .is-on { background: #1B2A4A; color: #FFFFFF; }
.sbb-hcard__months .is-off { background: transparent; border: 1px dashed #B6BECD; color: #8892A4; text-decoration: line-through; }

/* Lo logistico, en blanco y pequeno: importa, pero no es el argumento. */
.sbb__plain { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0 0 4px; }
/* Una sola linea por tarjeta: son datos de servicio, no argumentos. En dos
   filas costaban 69px de pliegue que le hacen falta a los productos. */
.sbb__plain li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; border: 1px solid #E8EDF4; border-radius: 12px; padding: 10px 14px; background: #FFFFFF; }
.sbb__plain b { font-size: 0.88rem; color: #1B2A4A; }
.sbb__plain span:not(.sbb-plain__ico) { font-size: 0.76rem; color: #64748B; }
.sbb-plain__ico { color: #4980CC; font-size: 0.55rem; align-self: center; }

@media (max-width: 900px) {
    .sbb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    /* REJILLA 2x2 — las cuatro en pantalla, dos arriba y dos abajo (decision
       del operador el 16-08). Se probo antes un carril horizontal porque la
       2x2 medida en crudo se iba a 390px de alto; lo que la hace caber ahora
       es recortar el CONTENIDO, no la caja: notas de una linea, la atribucion
       del lote fuera en movil y tipografia mas apretada. El coste de pliegue
       es real y esta medido en el commit — se paga a proposito, porque los
       cuatro argumentos son el motivo de la pagina. */
    .sbb__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; }
    .sbb-hcard { min-height: 118px; padding: 12px 12px 11px; border-radius: 12px; }
    .sbb-hcard__big { font-size: 2.3rem; }
    /* La foto del vial se cae en movil: en 208px de ancho el hueco que hay que
       reservarle deja el titulo en una columna de texto inservible. La tarjeta
       sigue diciendo FREE, el nombre y el valor, que es lo que vende. */
    .sbb-hcard__vial { display: none; }
    .sbb-hcard--green b,
    .sbb-hcard--green .sbb-hcard__note { padding-right: 0; }
    .sbb-hcard b { font-size: 0.8rem; line-height: 1.25; }
    .sbb-hcard__note { font-size: 0.7rem; line-height: 1.3; }
    /* El lote y el compuesto del COA sobran en una columna de 143px: la
       tarjeta se iba cuatro lineas solo por la atribucion. El dato duro
       —la pureza y el PASS— sigue en el chip. */
    .sbb-hcard__attr { display: none; }
    .sbb-hcard__chip { padding: 5px 8px; }
    .sbb-hcard__chip b { font-size: 0.95rem; }
    /* Las tres pildoras, en UNA linea: a 0.72rem "Mo 3" se caia a una segunda
       fila y estiraba la tarjeta (y con ella toda la rejilla, que iguala
       alturas). El gesto solo se lee si las tres se ven juntas. */
    .sbb-hcard__months { gap: 4px; }
    .sbb-hcard__months em { font-size: 0.63rem; padding: 4px 6px; }
    /* Las dos de servicio, en una sola fila y sin subtitulo: apiladas y con
       su linea de apoyo costaban 152px de pliegue, mas que las cuatro
       tarjetas de valor juntas (134). Lo que aportan es el titular. */
    .sbb__plain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* nowrap: con el subtitulo oculto, el `flex-wrap` mandaba el punto a su
       propia linea y las dos tarjetas quedaban descuadradas. */
    .sbb__plain li { padding: 9px 10px; flex-wrap: nowrap; align-items: center; }
    .sbb__plain b { font-size: 0.8rem; }
    .sbb__plain span:not(.sbb-plain__ico) { display: none; }
}

.sbb__layout { max-width: 1200px; margin: 18px auto 0; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.sbb__main { min-width: 0; }
/* Cinturon del viewport: nada de esta seccion puede inflar el documento. */
.sbb { overflow-x: clip; }

.sbb__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sbb__search { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border: 1px solid #DCE4EF; border-radius: 10px; font-size: 0.95rem; }
/* 🔴 flex: 1 1 100% + min-width: 0 son LOAD-BEARING. Sin ellos esta fila toma
   su max-content (~900px de pildoras en nowrap), desborda el documento y
   Chrome movil INFLA el layout viewport a 1324x2219 en vez de recortar: las
   media queries de movil dejan de aplicar (960 < 1324) y todo position:fixed
   (la hoja, la barra) ancla a ese viewport fantasma — la hoja "no abria".
   Cazado el 15-08-2026 biseccionando con la pagina sin JS y sin CSS. */
/* Las pildoras ENVUELVEN a una segunda linea; antes era un carril horizontal
   `nowrap` + `overflow-x: auto` y en escritorio se leia como cortado por la
   derecha ("Longevity & Mitochond...") sin nada que indicara que se podia
   deslizar. Medido: 776px de ancho para 1381px de contenido. Envolver ademas
   quita el desbordamiento que en movil inflaba el viewport de disposicion (ver
   el comentario de arriba). `overflow-x: clip` queda de red por si una sola
   pildora fuera mas ancha que el contenedor — clip y no hidden, para no crear
   un contenedor de scroll. */
.sbb__cats { display: flex; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; max-width: 100%; gap: 6px; overflow-x: clip; padding-bottom: 2px; }
/* En MOVIL vuelve a ser un carril. No es una excepcion caprichosa: nuestros
   nombres de categoria son largos ("Metabolic Research Peptides"), asi que
   envueltos ocupan cuatro o cinco filas a 393px y empujan los productos bajo
   el pliegue — el mismo motivo por el que la tienda ya lo resolvio asi. El
   scroll es del carril, nunca del documento. */
@media (max-width: 782px) {
    .sbb__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .sbb__cats::-webkit-scrollbar { display: none; }
}
.sbb__cats::-webkit-scrollbar { display: none; }
.sbb__cat { flex: 0 0 auto; white-space: nowrap; border: 1px solid #DCE4EF; background: #FFFFFF; color: #475569; font-size: 0.85rem; font-weight: 600; padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.sbb__cat.is-on { background: #1B2A4A; border-color: #1B2A4A; color: #FFFFFF; }

.sbb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sbb-card { background: #FFFFFF; border: 1px solid #E8EDF4; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; }
.sbb-card__media { position: relative; background: #F4F7FB; border-radius: 10px; height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sbb-card__media img { max-height: 128px; width: auto; }
/* .sbb-coa retirada el 16-08: la insignia de pureza salia solo en los pocos
   compuestos con COA publicado, y una rejilla con insignia en tres tarjetas y
   sin ella en el resto se lee como "las demas no estan testadas". */
.sbb-card h3 { font-size: 0.98rem; color: #1B2A4A; margin: 0 0 2px; }
.sbb-sub { font-size: 0.78rem; color: #64748B; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sbb-sizes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sbb-size { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #E2E8F0; background: #FFFFFF; border-radius: 9px; padding: 8px 11px; font-size: 0.85rem; color: #1B2A4A; cursor: pointer; }
.sbb-size.is-on { border-color: #4980CC; background: #EDF2FA; }
.sbb-size.is-out { opacity: 0.45; cursor: not-allowed; }
.sbb-size i { font-style: normal; font-size: 0.7rem; color: #B4443C; }
/* flex-wrap SIN media query: la rejilla va a 3 columnas fijas desde 961px
   junto al panel de 360, y el pie necesita ~252px que la tarjeta no tiene
   hasta ~1208 de viewport. Sin wrap, la pildora desbordaba su tarjeta y la
   VECINA (hermano posterior, fondo blanco) la pintaba encima — reportado
   por el operador el 18-08. Cuando cabe, el wrap no actua. */
.sbb-cardfoot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; row-gap: 6px; }
.sbb-inbox b { font-size: 1.05rem; color: #1B2A4A; }
.sbb-inbox del { color: #94A3B8; font-size: 0.82rem; margin-left: 6px; }
.sbb-inbox em { font-style: normal; font-size: 0.72rem; color: #64748B; margin-left: 4px; white-space: nowrap; }
.sbb-add { border: 0; background: #1B2A4A; color: #FFFFFF; font-weight: 600; font-size: 0.85rem; padding: 9px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.sbb-add:disabled { opacity: 0.4; cursor: not-allowed; }
.sbb-none { color: #64748B; }

/* Panel */
.sbb__panel { position: sticky; top: 90px; background: #FFFFFF; border: 1px solid #E8EDF4; border-radius: 16px; padding: 18px; box-shadow: 0 18px 44px rgba(27, 42, 74, 0.08); }
.sbb__panel h2 { font-size: 1.1rem; color: #1B2A4A; margin: 0 0 2px; display: flex; justify-content: space-between; align-items: baseline; }
.sbb__panel h2 span { font-size: 0.8rem; font-weight: 600; color: #64748B; }
.sbb__slots { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.sbb-slot { display: flex; align-items: center; gap: 10px; border: 1px dashed #CBD5E1; border-radius: 10px; padding: 8px 10px; min-height: 52px; color: #94A3B8; font-size: 0.85rem; position: relative; }
.sbb-slot.is-full { border-style: solid; border-color: #E8EDF4; color: #1B2A4A; }
.sbb-slot img { width: 26px; height: auto; }
.sbb-slot b { display: block; font-size: 0.86rem; }
.sbb-slot span { font-size: 0.75rem; color: #64748B; }
.sbb-slot__n { width: 22px; height: 22px; border-radius: 50%; background: #F1F5F9; color: #64748B; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sbb-slot__price { margin-left: auto; text-align: right; }
.sbb-slot__price b { color: #1B2A4A; }
.sbb-slot__price del { display: block; color: #94A3B8; font-size: 0.72rem; }
/* 🔴 `padding: 0` es LO QUE HACE que esto sea un circulo. Astra le mete ~12px
   de padding horizontal a TODO <button> desde su CSS dinamico en linea, asi que
   este circulo de 20px renderizaba 60x30 y se plantaba ENCIMA del precio del
   slot ($17.24 tapado, reportado por el operador el 15-08). Mismo fallo que el
   contador del carrito: nosotros ponemos el width, Astra el padding, y se
   aplican los dos. El ::after amplia el area de toque a 44px sin agrandar el
   circulo — un objetivo de 24px es demasiado pequeno en movil, que es el 80%. */
.sbb-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 0; background: #1B2A4A; color: #FFF; font-size: 0.85rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sbb-remove::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.sbb-card__warn { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.3; color: #8A5B14; opacity: 0; transition: opacity 0.15s ease; }
.sbb-card__warn.is-on { opacity: 1; }

.sbb__water { display: none; align-items: center; justify-content: space-between; gap: 8px; background: #F1F8F3; border: 1px solid #D7E9DD; border-radius: 10px; padding: 9px 11px; font-size: 0.83rem; color: #1B2A4A; margin-bottom: 12px; }
.sbb__water b { color: #157F3D; }
.sbb__water del { color: #94A3B8; font-size: 0.75rem; }
.sbb__receipt { border-top: 1px solid #EDF1F5; padding-top: 10px; font-size: 0.88rem; color: #475569; }
.sbb__receipt > div { display: flex; justify-content: space-between; margin-bottom: 5px; }
.sbb__receipt .is-green { color: #157F3D; }
.sbb__receipt .is-total { font-size: 1.15rem; color: #1B2A4A; font-weight: 700; border-top: 1px solid #EDF1F5; padding-top: 8px; margin-top: 6px; }
.sbb__tier { font-size: 0.78rem; color: #8A5B14; min-height: 1.1em; margin: 2px 0 8px; }
.sbb__cta { width: 100%; border: 0; border-radius: 999px; background: #4980CC; color: #FFF; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; padding: 14px 18px; cursor: pointer; }
/* Deshabilitado = fondo claro y texto OSCURO. En blanco sobre #C6D4E8 daba
   1,5:1 medido, o sea el aviso que mas falta hace —"Pick 2 more to start"—
   era justo el ilegible. Lo que comunica "no puedes pulsar todavia" es el
   contraste bajo del BOTON contra el fondo, no el del texto contra el boton. */
.sbb__cta:disabled { background: #DCE5F1; color: #33507D; cursor: not-allowed; }
.sbb__fine { font-size: 0.75rem; color: #64748B; text-align: center; margin: 8px 0 0; }

/* Barra movil */
.sbb__bar { display: none; }

@media (max-width: 960px) {
    .sbb__layout { grid-template-columns: 1fr; }
    .sbb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* el panel pasa a hoja: cerrado = solo barra fija abajo */
    .sbb__panel { position: fixed; inset: auto 0 0 0; top: auto; max-height: 76vh; overflow-y: auto; border-radius: 18px 18px 0 0; transform: translateY(calc(100% + 10px)); transition: transform 0.25s ease; z-index: 9000; }
    #solira-box-app.sbb-open .sbb__panel { transform: none; }
    .sbb__bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 8990; background: #1B2A4A; color: #FFF; border-radius: 999px; padding: 12px 18px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 12px 30px rgba(27, 42, 74, 0.35); }
    .sbb__bar button { border: 0; background: #4980CC; color: #FFF; font-weight: 600; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
    .sbb__close { display: block; margin: 0 0 6px auto; border: 0; background: #F1F5F9; color: #1B2A4A; width: 30px; height: 30px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
}
@media (min-width: 961px) {
    .sbb__close { display: none; }
}
@media (max-width: 560px) {
    .sbb__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sbb-card__media { height: 118px; }
    .sbb-card__media img { max-height: 100px; }
}