GALERÍA
← aparece PRIMERO en HTML
INFO + ATC
← aparece SEGUNDO en HTML
Con position:sticky en el panel derecho, en algunos browsers
el panel "sube" visualmente por encima de la galería.
La solución: quitar sticky en móvil + asegurar order correcto. */
@media (max-width: 768px) {
/* Cualquier elemento con position:sticky en el área de producto
pierde ese comportamiento en móvil */
.bb-section [style*="position:sticky"],
div[style*="position:sticky"] {
position: relative !important;
top: auto !important;
}
/* El botón "Añadir al carrito" de WooCommerce en product page */
#bb-atc-wrap,
.woocommerce-variation-add-to-cart,
.cart,
form.cart {
/* Asegurar que esté abajo del contenido, no flotando */
position: static !important;
top: auto !important;
bottom: auto !important;
order: 99 !important; /* Si está en flex container, va al final */
margin-top: 16px !important;
}
/* WooCommerce add-to-cart button — tamaño adecuado en móvil */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
width: 100% !important;
padding: 16px 24px !important;
font-size: 0.82rem !important;
border-radius: 8px !important;
min-height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Quantity input en móvil */
.woocommerce .quantity {
width: 100% !important;
margin-bottom: 12px !important;
}
.woocommerce .quantity .qty {
width: 100% !important;
text-align: center !important;
}
/* La mini-galería de thumbnails no supera el ancho */
#bb-main-img {
aspect-ratio: 3/4 !important;
width: 100% !important;
}
#bb-main-img img {
width: 100% !important;
height: 100% !important;
}
/* Bloques de info (confección, artesanal, envíos) */
div[style*="display:flex"][style*="gap:12px"][style*="flex-wrap:wrap"] {
flex-direction: column !important;
gap: 8px !important;
}
div[style*="flex:1"][style*="min-width:120px"] {
min-width: 0 !important;
flex: 1 1 100% !important;
}
}
/* ── TAMAÑOS EXTRA-PEQUEÑOS (375px) ──────────────────────────
Pantallas de iPhone SE y similares */
@media (max-width: 390px) {
.prod-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.prod-name {
font-size: 0.8rem !important;
}
.prod-price {
font-size: 0.78rem !important;
}
.hdr-icon {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
/* Payment buttons en producto — 1 por fila */
.bb-pay-btn {
width: 100% !important;
justify-content: space-between !important;
}
/* Urgency bar aún más compacta */
.urgency {
font-size: 0.58rem !important;
padding: 8px 12px !important;
}
}
/* ── TABLET (769px – 1024px) — Validación ───────────────────
El grid de producto funciona bien en tablet, solo ajustar gaps */
@media (min-width: 769px) and (max-width: 1024px) {
div[style*="grid-template-columns:1fr 1fr"][style*="align-items:start"] {
gap: clamp(20px, 4vw, 40px) !important;
}
}
/* ── bb-pd-layout: grid producto RESPONSIVE ─────────────────
Clases añadidas en single-product.php v9.0 */
.bb-pd-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
/* En móvil: columna única — galería primero, ATC después */
@media (max-width: 768px) {
.bb-pd-layout {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* Galería (primer hijo) → PRIMERO */
.bb-pd-layout > div:first-child {
order: 1;
width: 100%;
}
/* Panel de info/ATC (segundo hijo) → SEGUNDO — debajo de la galería */
.bb-pd-layout > div:last-child,
.bb-pd-info-panel {
order: 2;
width: 100%;
position: static !important; /* Quitar sticky */
top: auto !important;
}
}
/* En tablet: mantener 2 columnas pero con menos gap */
@media (min-width: 600px) and (max-width: 768px) {
.bb-pd-layout {
grid-template-columns: 1fr !important;
}
}
/* ── CORRECCIONES GRIDS INLINE EN PÁGINAS DE CATEGORÍA ──────
Todos los grids hardcodeados en PHP se adaptan aquí.
Usamos selectores basados en atributos style para no
modificar el HTML de cada archivo individual. */
@media (max-width: 768px) {
/* page-colecciones.php: 2fr 1fr 1fr → columna única */
div[style*="grid-template-columns:2fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
padding: 0 16px 8px !important;
}
/* page-colecciones.php, page-lookbook.php, page-summer-edit:
repeat(3,1fr) → 2 columnas en móvil */
div[style*="grid-template-columns:repeat(3,1fr)"],
div[style*="grid-template-columns: repeat(3, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
}
/* page-lookbook: 2fr 1fr → columna única */
div[style*="grid-template-columns:2fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* page-contacto: 1fr 1fr → columna única */
div[style*="grid-template-columns:1fr 1fr"][style*="gap:60px"] {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
/* page-envios: 1fr 1fr 1fr → 1 columna */
div[style*="grid-template-columns:1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* page-nosotras: 1fr 1fr con min-height → columna única */
div[style*="grid-template-columns:1fr 1fr"][style*="min-height:500px"] {
grid-template-columns: 1fr !important;
min-height: auto !important;
}
/* stats repeat(3,1fr) en nosotras → columna única */
div[style*="grid-template-columns:repeat(3,1fr)"][style*="border-top"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* page-carteras, page-swimwear: editorial 1fr 1fr → columna */
div[style*="grid-template-columns:1fr 1fr"][style*="background:var(--dark)"] {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* taxonomy-product_cat: promo banner 1fr 1fr → columna */
div[style*="grid-template-columns:1fr 1fr"][style*="overflow:hidden"] {
grid-template-columns: 1fr !important;
}
/* page-catalogo custom banner */
.cat-custom-banner {
grid-template-columns: 1fr !important;
padding: 32px 20px !important;
gap: 24px !important;
}
/* padding lateral de todas las secciones con var(--gutter) */
div[style*="padding:0 var(--gutter)"],
div[style*="padding: 0 var(--gutter)"] {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ── OVERFLOW GLOBAL: PREVENCIÓN DE ÚLTIMO RECURSO ──────────
Aplicado a todos los contenedores directos del body */
@media (max-width: 768px) {
body > *,
#page,
.site,
main,
.site-main {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Asegurar que las secciones PHP no puedan causar scroll lateral */
.bb-section,
section,
article,
.bb-full {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* ==============================================
CORRECCIÓN MENÚ MÓVIL – ESPACIO BLANCO SUPERIOR
============================================== */
/* ==============================================
CORRECCIÓN MENÚ MÓVIL – ESPACIO BLANCO SUPERIOR
============================================== */
#bb-header {
z-index: 9999 !important;
}
.mobile-menu-overlay,
.mobile-menu {
z-index: 999999 !important;
}
.mobile-menu {
top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.mob-logo-wrap {
margin-top: 0 !important;
padding-top: 12px !important;
border-top: none !important;
}
body.admin-bar .mobile-menu,
body.admin-bar .mobile-menu-overlay {
top: 0 !important;
}
body.admin-bar .mobile-menu.open {
margin-top: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
SOLUCIÓN FINAL – BOTÓN DE COMPRA DEBAJO DE LA IMAGEN EN MÓVIL
═══════════════════════════════════════════════════════════════ */
/* =============================================
BOTÓN DE COMPRA SIEMPRE DEBAJO DE LA IMAGEN EN MÓVIL
(Solución final: recorta la imagen por abajo en lugar de usar padding)
============================================= */
@media (max-width: 768px) {
/* La tarjeta de producto no recorta lo que sobresale */
.prod-card {
overflow: visible !important;
}
/* El contenedor de la imagen se adapta */
.prod-img-wrap {
overflow: visible !important;
position: relative !important;
/* Quitamos cualquier padding-bottom que hayamos puesto antes */
padding-bottom: 0 !important;
}
/* La imagen ocupa todo el contenedor MENOS 54px en la parte inferior */
.prod-img-main {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 54px !important; /* ← Espacio reservado para el botón */
height: auto !important; /* Anula height:100% u otros */
width: 100% !important;
object-fit: cover !important;
}
/* La barra de acciones se sitúa justo en el espacio inferior */
.prod-actions {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: none !important;
transform: none !important;
display: flex !important;
gap: 6px !important;
padding: 0 4px 4px !important;
margin: 0 !important;
z-index: 5 !important;
opacity: 1 !important;
visibility: visible !important;
/* Anula herencias de escritorio */
grid-row: auto !important;
grid-area: auto !important;
align-self: auto !important;
order: 0 !important;
}
/* Botón "Comprar" a todo lo ancho */
.prod-atc {
flex: 1 !important;
background: var(--pink, #FB5FAB) !important;
color: #fff !important;
padding: 12px 8px !important;
font-size: 0.68rem !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
border-radius: 6px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
/* Botones de corazón y vista rápida */
.prod-wish,
.prod-qv {
width: 44px;
height: 44px;
flex-shrink: 0;
background: var(--pink-pale, #FEF0F8);
border: 1px solid rgba(251,95,171,.25);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark, #1A0A12);
position: static !important;
opacity: 1 !important;
transform: none !important;
}
/* Pequeño margen entre el botón y los datos del producto */
.prod-info {
margin-top: 6px;
}
/* Oculta quick view en pantallas muy pequeñas si estorba */
@media (max-width: 400px) {
.prod-qv {
display: none !important;
}
}
}
/* ═══════════════════════════════════════════════════════════════
[FIX#11] SWATCHES REALES DE VARIACIÓN (single-product.php)
Generados por JS a partir de los