/* ================================================ PRODUCT — detalle de producto. ──────────────────────────────────────────────── La firma del proyecto: tiñe automáticamente todos los acentos (CTA, tabs, chips, precios) gracias a --bb-accent definido en tokens.css. ================================================ */ /* ================================================ LAYOUT GENERAL ================================================ */ .product-page { padding-top: 0; } .product-row { display: grid; /* minmax(0, ...) evita que el contenido intrínseco (ej. imagen 900px de ancho) empuje a la columna a crecer indefinidamente. Bug clásico de CSS Grid. */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; } @media (max-width: 991.98px) { .product-row { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } } /* Cualquier hijo directo del row tampoco debe crecer */ .product-row > * { min-width: 0; } /* ================================================ GALERÍA — main image + thumbs Swiper ================================================ */ /* Galería principal — BULLETPROOF. Padding-bottom hack para forzar aspect ratio 1:1. La img es position: absolute → JAMÁS puede crecer fuera del contenedor. Sin aspect-ratio CSS (que tiene bugs raros en algunos browsers cuando se combina con grid + object-fit: cover). */ .gallery-main { position: relative; width: 100%; height: 0; /* altura = padding-bottom */ padding-bottom: 100%; /* 1:1 ratio */ overflow: hidden; border: 1px solid var(--bb-line); background: var(--bb-bg-warm); } .gallery-main img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; cursor: zoom-in; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .gallery-zoom-hint { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); padding: 0.45rem 0.7rem; font-size: 0.65rem; letter-spacing: var(--ls-uppercase); text-transform: uppercase; font-weight: 700; color: var(--bb-ink); display: inline-flex; align-items: center; gap: 0.5rem; z-index: 3; pointer-events: none; /* Click pasa al botón debajo */ border-left: 2px solid var(--bb-accent); } .gallery-thumbs { margin-top: 1rem; overflow: hidden; } .gallery-thumbs .swiper-slide { aspect-ratio: 1 / 1; cursor: pointer; border: 1px solid var(--bb-line); background: var(--bb-bg-warm); overflow: hidden; transition: border-color var(--dur) var(--bb-ease), transform var(--dur) var(--bb-ease); } .gallery-thumbs .swiper-slide:hover { transform: translateY(-2px); } .gallery-thumbs .swiper-slide.is-active { border-color: var(--bb-accent); } .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; } /* ================================================ INFO PANEL — derecha ================================================ */ .product-info { display: flex; flex-direction: column; gap: 1.25rem; } .product-eyebrow { font-size: 0.7rem; letter-spacing: var(--ls-uppercase); text-transform: uppercase; font-weight: 700; color: var(--bb-accent-dark); display: inline-flex; align-items: center; gap: 0.5rem; } .product-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bb-accent); } .product-title { font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 2.85rem); line-height: 1.05; font-weight: 500; color: var(--bb-ink); margin: 0; letter-spacing: var(--ls-tight); } .product-rating { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--bb-ink-muted); } .product-price-block { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1.5px solid var(--bb-accent); margin-top: 0.25rem; } .product-price-main { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--bb-ink); line-height: 1; } .product-price-usd-line { font-family: var(--font-body); font-size: 0.78rem; color: var(--bb-ink-muted); letter-spacing: 0.1em; font-weight: 600; } .product-price-old { font-family: var(--font-display); font-size: 1.2rem; color: var(--bb-ink-faint); text-decoration: line-through; } .product-shortdesc { color: var(--bb-ink-muted); font-size: 0.98rem; line-height: 1.7; margin: 0.5rem 0; } /* ================================================ VARIANTES — chips (talles) y swatches (colores) ================================================ */ .variant-group { display: flex; flex-direction: column; gap: 0.6rem; } .variant-label { font-size: var(--bb-label-size); font-weight: var(--bb-label-weight); letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--bb-label-text); } .variant-label .picked { margin-left: 0.5rem; color: var(--bb-ink); font-weight: 700; text-transform: none; letter-spacing: 0.04em; } .variant-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .variant-chip { background: #fff; border: 1px solid var(--bb-line-strong); color: var(--bb-ink); padding: 0.65rem 1.1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: all var(--dur-fast) var(--bb-ease); } .variant-chip:hover { border-color: var(--bb-accent); color: var(--bb-accent); } .variant-chip.is-active { background: var(--bb-accent); color: var(--bb-accent-text); border-color: var(--bb-accent); } .variant-chip.is-disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } .swatch { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bb-line-strong); cursor: pointer; position: relative; transition: transform var(--dur-fast) var(--bb-ease); } .swatch:hover { transform: scale(1.08); } .swatch.is-active::after { content: ''; position: absolute; inset: -5px; border: 1.5px solid var(--bb-accent); border-radius: 50%; } /* ================================================ ADD TO CART ROW — qty + main CTA + favorite ================================================ */ .add-to-cart-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; margin-top: 0.5rem; } @media (max-width: 540px) { .add-to-cart-row { grid-template-columns: 1fr 1fr; } .add-to-cart-row .qty-stepper { grid-column: span 2; justify-self: start; } } .btn-add-cart { background: var(--bb-accent); color: var(--bb-accent-text); border: none; padding: 0 1.5rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: var(--ls-uppercase); text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; transition: background var(--dur-fast) var(--bb-ease), transform var(--dur-fast) var(--bb-ease); box-shadow: var(--bb-shadow-cta); } .btn-add-cart:hover { background: var(--bb-accent-dark); transform: translateY(-2px); box-shadow: var(--bb-shadow-cta-hover); } .btn-fav { width: 52px; height: 52px; background: #fff; border: 1px solid var(--bb-line-strong); color: var(--bb-ink); cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; transition: all var(--dur-fast) var(--bb-ease); } .btn-fav:hover { border-color: var(--bb-accent); color: var(--bb-accent); } .btn-fav.is-active { background: var(--bb-accent-soft); color: var(--bb-accent); border-color: var(--bb-accent); } /* ================================================ BENEFITS LIST — debajo del CTA ================================================ */ .benefits { list-style: none; padding: 1.5rem 0 0; margin: 0; display: grid; gap: 0.85rem; } .benefits li { display: flex; align-items: center; gap: 0.85rem; font-size: 0.85rem; color: var(--bb-ink-soft); } .benefits li i { width: 32px; height: 32px; display: grid; place-items: center; background: var(--bb-bg-soft); border: 1px solid var(--bb-line); color: var(--bb-ink); font-size: 0.95rem; } .benefits strong { font-weight: 600; color: var(--bb-ink); } /* ================================================ TABS — usa --bb-accent (cambia con marca) ================================================ */ .product-tabs-section { border-top: 1px solid var(--bb-line); padding: var(--section-y) 0; background: var(--bb-bg); } .product-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--bb-line); margin-bottom: 2.5rem; overflow-x: auto; scrollbar-width: none; } .product-tabs::-webkit-scrollbar { display: none; } .product-tab { background: transparent; border: none; padding: 1rem 1.75rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--bb-ink-muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur) var(--bb-ease), border-color var(--dur) var(--bb-ease); } .product-tab:hover { color: var(--bb-ink); } .product-tab.is-active { color: var(--bb-accent); border-bottom-color: var(--bb-accent); } .tab-panel { display: none; } .tab-panel.is-active { display: block; animation: fadeIn 0.3s var(--bb-ease); } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tab-prose { max-width: 720px; color: var(--bb-ink-soft); font-size: 1rem; line-height: 1.8; } .tab-prose p { margin-bottom: 1rem; } .tab-prose h4 { font-family: var(--font-display); color: var(--bb-ink); margin: 2rem 0 1rem; font-size: 1.4rem; } /* Tab 2: ficha técnica */ .spec-table { width: 100%; border-collapse: collapse; max-width: 720px; } .spec-table th, .spec-table td { text-align: left; padding: 0.95rem 0; border-bottom: 1px solid var(--bb-line); font-size: 0.92rem; } .spec-table th { width: 40%; color: var(--bb-ink-muted); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; } .spec-table td { color: var(--bb-ink); } /* Tab 3: envío y devolución */ .shipping-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 820px; } @media (max-width: 540px) { .shipping-grid { grid-template-columns: 1fr; } } .shipping-grid .item h5 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--bb-accent-dark); font-weight: 700; margin-bottom: 0.6rem; } .shipping-grid .item p { color: var(--bb-ink-muted); font-size: 0.92rem; line-height: 1.7; margin: 0; } /* Tab 4: reviews */ .reviews-summary { display: flex; align-items: center; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--bb-line); margin-bottom: 2rem; flex-wrap: wrap; } .reviews-score { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--bb-accent-dark); font-weight: 500; } .reviews-meta { display: flex; flex-direction: column; gap: 0.35rem; } .review-list { display: grid; gap: 1.5rem; max-width: 720px; } .review-card { padding: 1.5rem; background: var(--bb-bg-soft); border: 1px solid var(--bb-line); } .review-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; } .review-card .author { font-family: var(--font-display); font-size: 1.1rem; color: var(--bb-ink); margin: 0; } .review-card .date { font-size: 0.72rem; color: var(--bb-ink-muted); letter-spacing: 0.1em; } .review-card .text { color: var(--bb-ink-soft); line-height: 1.65; font-size: 0.92rem; margin: 0.5rem 0 0; } /* ================================================ PRODUCTOS RELACIONADOS ================================================ */ .related-section { background: var(--bb-bg-soft); } /* ================================================ STARS theming — en contexto de producto detail, los stars heredan el accent de la marca activa. Fuera de producto detail se quedan dorados (--bb-star). ================================================ */ .product-info .stars i.is-on, .product-rating .stars i.is-on, .reviews-meta .stars i.is-on, .review-card .stars i.is-on { color: var(--bb-accent); } /* ================================================ LINKS / SUBRAYADOS dentro del producto detail ================================================ */ .product-info a:not(.btn-bb-primary):not(.btn-bb-ghost):not(.btn-add-cart):not(.btn-fav), .tab-prose a, .review-card a { color: var(--bb-accent-dark); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur) var(--bb-ease); } .product-info a:hover, .tab-prose a:hover, .review-card a:hover { color: var(--bb-accent); } /* Beneficios: el ícono toma sutil tinte de accent al hover */ .benefits li:hover i { border-color: var(--bb-accent); color: var(--bb-accent); } /* ================================================ STICKY CTA — overrides en contexto mobile El sticky-cta.btn-add-cart hereda la accent fill pero necesita dimensiones más chicas que el desktop. ================================================ */ .sticky-cta .btn-add-cart { padding: 0.95rem 1.2rem; font-size: 0.72rem; height: auto; box-shadow: none; } .sticky-cta .btn-add-cart:hover { transform: none; } /* ================================================ PHOTOSWIPE LIGHTBOX — themed por marca via --bb-accent. PhotoSwipe v5 expone variables CSS propias (--pswp-*). .pswp se inyecta como hijo directo de body, así que el selector body[data-brand="..."] .pswp aplica. ================================================ */ .pswp { --pswp-bg: #0a0a0a; --pswp-placeholder-bg: #1a1a1a; --pswp-icon-color: #ffffff; --pswp-icon-color-secondary:#0a0a0a; --pswp-icon-stroke-color: transparent; --pswp-icon-stroke-width: 0; } /* Counter (X / Y) y barra inferior con accent */ .pswp__counter { color: var(--bb-accent-text); font-family: var(--font-body); font-weight: 700; letter-spacing: var(--ls-uppercase); font-size: 0.72rem; text-transform: uppercase; opacity: 0.95; padding: 0 1rem; background: rgba(15, 15, 15, 0.6); backdrop-filter: blur(10px); border-left: 2px solid var(--bb-accent); height: 32px; line-height: 32px; align-self: center; margin: 0 0.5rem; } /* Botones de UI: hover toma color accent */ .pswp__button:hover .pswp__icn { color: var(--bb-accent); } .pswp__button:focus { outline: none; } /* Underline accent en title cuando hay caption */ .pswp__custom-caption { background: rgba(15, 15, 15, 0.7); backdrop-filter: blur(8px); color: #fff; padding: 0.85rem 1.25rem; font-family: var(--font-body); font-size: 0.85rem; border-left: 3px solid var(--bb-accent); position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: 90%; z-index: 1; } .pswp__custom-caption strong { color: var(--bb-accent); font-weight: 600; } /* (Bloque de botón eliminado: la imagen principal es directa con cursor:zoom-in y click handler en JS. Más simple y robusto.) */