/** * Zenth Toolkit — Shop Quick View (vista rápida) * * Modal que se abre desde el botón "ojo" de la card del catálogo. Muestra la * galería del producto (imagen grande + thumbs), título, precio y swatches de * color, sin salir de la página. Lo crea/inyecta shop-quickview.js una sola vez * en y lo puebla vía el endpoint REST /shop/quickview. * * Standalone: usa var(--cr-*, fallback). Look CR oscuro (panel --cr-color-darker, * backdrop unificado --zenth-mm-overlay), tipografía Montserrat. * * ───────────────────────────────────────────────────────────────────────── * ÍNDICE * §1 Overlay → .zenth-quickview (estado open/closed + box reset) * §2 Backdrop → .zenth-quickview__backdrop * §3 Dialog → .zenth-quickview__dialog (panel oscuro redondeado) * §4 Close → .zenth-quickview__close * §5 Loader/Error → estados is-loading / is-error * §6 Galería → stage (imagen) + thumbs (columna) * §7 Footer → meta (título + precio) + swatches * §8 Responsive → @media de tamaño + accesibilidad * ───────────────────────────────────────────────────────────────────────── * BREAKPOINTS (desktop-first): 767 (mobile: galería y footer apilados) * Un solo @media de tamaño (≤767) en §8. Al final, subsección de * ACCESIBILIDAD (prefers-reduced-motion), que NO se consolida. * ───────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ §1 · OVERLAY — .zenth-quickview (estado open/closed + box reset) ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 48px); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms; } .zenth-quickview.is-open { opacity: 1; visibility: visible; transition: opacity 280ms ease; } .zenth-quickview *, .zenth-quickview *::before, .zenth-quickview *::after { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════ §2 · BACKDROP — .zenth-quickview__backdrop ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview__backdrop { position: absolute; inset: 0; background: var(--zenth-mm-overlay, rgba(0, 0, 0, 0.7)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ §3 · DIALOG — .zenth-quickview__dialog (panel oscuro redondeado) ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview__dialog { position: relative; z-index: 1; width: min(920px, 100%); max-height: 92vh; overflow-y: auto; background: var(--cr-color-darker, #0f0f0f); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: clamp(18px, 2vw, 28px); padding: clamp(20px, 3vw, 38px); transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease; font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif); } .zenth-quickview.is-open .zenth-quickview__dialog { transform: translateY(0) scale(1); opacity: 1; } /* Scrollbar fino WebKit (Chromium/Safari) — ver nota de global.css §8: las props estándar ≠auto DESACTIVAN estos pseudo-elementos en Chromium, por eso van aparte en el @supports del final de esta sección. */ .zenth-quickview__dialog::-webkit-scrollbar { width: 6px; } .zenth-quickview__dialog::-webkit-scrollbar-track { background: transparent; } .zenth-quickview__dialog::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .zenth-quickview__dialog::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } /* Firefox only — props estándar de scrollbar */ @supports not selector(::-webkit-scrollbar) { .zenth-quickview__dialog { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } } /* ═══════════════════════════════════════════════════════════════════════ §4 · CLOSE — .zenth-quickview__close ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview__close { position: absolute; top: clamp(12px, 1.5vw, 20px); right: clamp(12px, 1.5vw, 20px); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cr-color-text-muted, rgba(255, 255, 255, 0.7)); font-size: 26px; line-height: 1; cursor: pointer; transition: background var(--cr-transition-base, 250ms ease), color var(--cr-transition-base, 250ms ease); } .zenth-quickview__close:hover, .zenth-quickview__close:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--cr-color-text, #fff); outline: none; } /* ═══════════════════════════════════════════════════════════════════════ §5 · LOADER / ERROR — estados is-loading / is-error ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview__loader { display: none; align-items: center; justify-content: center; min-height: 320px; padding: 40px 20px; } .zenth-quickview__spinner { width: 48px; aspect-ratio: 1; border-radius: 50%; border: 6px solid; border-color: var(--cr-color-white, #fff) transparent; animation: zenth-quickview-spin 1s linear infinite; } @keyframes zenth-quickview-spin { to { transform: rotate(360deg); } } .zenth-quickview__error { display: none; margin: 0; min-height: 220px; padding: 60px 24px; text-align: center; color: var(--cr-color-text-dim, rgba(255, 255, 255, 0.78)); font-size: 0.95rem; } .zenth-quickview.is-loading .zenth-quickview__content, .zenth-quickview.is-error .zenth-quickview__content { display: none; } .zenth-quickview.is-loading .zenth-quickview__loader { display: flex; } .zenth-quickview.is-error .zenth-quickview__error { display: block; } /* ═══════════════════════════════════════════════════════════════════════ §6 · GALERÍA — stage (imagen grande) + thumbs (columna) ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview__gallery { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(12px, 1.6vw, 20px); align-items: start; } .zenth-quickview__stage { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; border-radius: 16px; /* Glow rojo CR sutil enmarcando la foto (mismo lenguaje que before/after) */ box-shadow: inset 0 0 0 1px rgba(192, 0, 0, 0.28), inset 0 0 55px rgba(192, 0, 0, 0.14); } .zenth-quickview__main-img { display: block; width: 100%; height: 100%; max-height: min(56vh, 500px); object-fit: contain; } /* Columna de thumbnails (vertical en desktop) */ .zenth-quickview__thumbs { display: flex; flex-direction: column; gap: 12px; max-height: min(56vh, 500px); overflow-y: auto; } .zenth-quickview__thumbs::-webkit-scrollbar { width: 4px; } .zenth-quickview__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .zenth-quickview__thumb { flex: 0 0 auto; width: clamp(60px, 6vw, 80px); aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; opacity: 0.6; transition: opacity var(--cr-transition-base, 250ms ease), border-color var(--cr-transition-base, 250ms ease); } .zenth-quickview__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .zenth-quickview__thumb:hover, .zenth-quickview__thumb:focus-visible { opacity: 0.9; outline: none; } .zenth-quickview__thumb.is-active { opacity: 1; border-color: var(--cr-color-primary, #c00000); } /* Estado "una sola imagen": shop-quickview.js pone .is-single y deja los thumbs vacíos. Colapsamos la galería a una sola columna y ocultamos la pista de thumbs para no dejar un gutter fantasma a la derecha (desktop) ni una fila vacía debajo (mobile). Mismo patrón que el modal de proyectos. */ .zenth-quickview.is-single .zenth-quickview__gallery { grid-template-columns: 1fr; } .zenth-quickview.is-single .zenth-quickview__thumbs { display: none; } /* ═══════════════════════════════════════════════════════════════════════ §7 · FOOTER — meta (título + precio) + swatches ═══════════════════════════════════════════════════════════════════════ */ .zenth-quickview__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: clamp(18px, 2.2vw, 28px); } .zenth-quickview__meta { min-width: 0; } .zenth-quickview__title { margin: 0; font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif); font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem); font-weight: 700; line-height: 1.15; letter-spacing: 0.005em; color: var(--cr-color-text, #fff); } .zenth-quickview__title-link { color: inherit; text-decoration: none; transition: color var(--cr-transition-fast, 150ms ease); } .zenth-quickview__title-link:hover, .zenth-quickview__title-link:focus-visible { color: var(--cr-color-primary-hover, #e60000); outline: none; } .zenth-quickview__price { margin-top: 8px; font-family: var(--cr-font-body, 'Montserrat', system-ui, sans-serif); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 600; color: var(--cr-color-text-dim, rgba(255, 255, 255, 0.85)); line-height: 1.2; } .zenth-quickview__price * { color: inherit; } .zenth-quickview__price del { opacity: 0.5; font-weight: 400; margin-right: 8px; } .zenth-quickview__price ins { text-decoration: none; color: var(--cr-color-primary-hover, #e60000); } /* Swatches — más grandes que los de la card; el primero "activo" con anillo */ .zenth-quickview__swatches { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .zenth-quickview__swatches:empty { display: none; } .zenth-quickview__swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch-color, #888); border: 1px solid rgba(255, 255, 255, 0.25); display: inline-block; flex-shrink: 0; } .zenth-quickview__swatch--light { border-color: rgba(255, 255, 255, 0.4); } .zenth-quickview__swatch.is-active { box-shadow: 0 0 0 2px var(--cr-color-darker, #0f0f0f), 0 0 0 3.5px rgba(255, 255, 255, 0.9); } /* ═══════════════════════════════════════════════════════════════════════ §8 · RESPONSIVE — @media de tamaño + accesibilidad ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────── MOBILE · max-width: 767px ──────────────────── */ @media (max-width: 767px) { /* §6 · Galería apilada: imagen arriba, thumbs en fila horizontal debajo */ .zenth-quickview__gallery { grid-template-columns: 1fr; gap: 12px; } .zenth-quickview__thumbs { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: visible; padding-bottom: 2px; } .zenth-quickview__thumb { width: clamp(56px, 18vw, 72px); } .zenth-quickview__main-img { max-height: 44vh; } /* §7 · Footer apilado: título/precio arriba, swatches debajo a la izquierda */ .zenth-quickview__footer { flex-direction: column; align-items: flex-start; gap: 14px; } .zenth-quickview__swatches { justify-content: flex-start; } } /* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */ @media (prefers-reduced-motion: reduce) { .zenth-quickview, .zenth-quickview__dialog { transition: opacity 120ms ease; } .zenth-quickview__dialog { transform: none; } .zenth-quickview__spinner { animation-duration: 2s; } .zenth-quickview__thumb, .zenth-quickview__close, .zenth-quickview__title-link { transition: none; } }