/* ABOUTME: Product gallery for [wsllc_product_gallery] — thumbnail rail + hero + lightbox. */ /* ABOUTME: Ported from HeirLuxury's Alpine/Tailwind gallery.blade.php to vanilla CSS. */ .wsllc-pgallery { display: grid; grid-template-columns: 88px 1fr; /* 80px thumbs + 3px ring padding + slack */ gap: 12px; align-items: start; overflow: hidden; } /* ── Thumbnail rail (left, scrollable) ── */ /* Scrollbar hidden but the rail stays scrollable (wheel / drag / touch). */ .wsllc-pgallery__thumbs { height: 520px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge/IE */ } .wsllc-pgallery__thumbs::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .wsllc-pgallery__thumbs ul { list-style: none; margin: 0; padding: 0 0 0 3px; /* room for the active ring, clipped by the container otherwise */ display: flex; flex-direction: column; gap: 8px; } .wsllc-pgallery__thumbs li { margin: 0; padding: 0; } /* 80px thumbs: six of them + five 8px gaps = 520px, exactly the rail height, so a 6-image gallery has nothing to scroll (a 48px phantom overflow at 88px made the hidden-scrollbar rail feel broken). More images = scrolls again. */ .wsllc-pgallery__thumb { display: block; width: 80px; height: 80px; padding: 0; border-radius: 6px; overflow: hidden; border: 1px solid #e8ecf0; background: #f7f8fa; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .wsllc-pgallery__thumb:hover { border-color: #ca511d; } .wsllc-pgallery__thumb.is-active { border-color: #ca511d; box-shadow: 0 0 0 2px #ca511d; } .wsllc-pgallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s, transform 0.2s; } .wsllc-pgallery__thumb:hover img { opacity: 0.8; transform: scale(1.05); } /* ── Hero image (right) ── */ .wsllc-pgallery__hero { position: relative; height: 520px; min-width: 0; } .wsllc-pgallery__hero-btn { display: block; width: 100%; height: 100%; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid #e8ecf0; background: #f7f8fa; cursor: zoom-in; } .wsllc-pgallery__hero-img { width: 100%; height: 100%; /* contain, not cover: the awning shots put the product near an edge, so cover's center-crop sliced the product out of the frame. */ object-fit: contain; display: block; } /* Bottom bar: counter pill + round arrows, floating over the hero. pointer-events none on the bar lets clicks between the controls fall through to the hero (zoom); the controls re-enable their own events. */ .wsllc-pgallery__bar { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .wsllc-pgallery__counter { background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; line-height: 1; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); pointer-events: auto; } .wsllc-pgallery__arrows { display: flex; align-items: center; gap: 8px; } .wsllc-pgallery__arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; pointer-events: auto; transition: background 0.2s, border-color 0.2s; } .wsllc-pgallery__arrow:hover { background: #ca511d; border-color: #ca511d; } .wsllc-pgallery__arrow svg { width: 20px; height: 20px; } /* ── Lightbox (JS moves it to : The7/WPBakery wrappers can create stacking contexts that break position:fixed — same reason the Blade original used x-teleport) ── */ .wsllc-pgallery-lightbox { position: fixed; inset: 0; z-index: 10000000; /* above The7 header (500) and the TRP flag (9999999) */ background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; } .wsllc-pgallery-lightbox.is-open { opacity: 1; visibility: visible; } .wsllc-pgallery-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; } .wsllc-pgallery-lightbox__close, .wsllc-pgallery-lightbox__prev, .wsllc-pgallery-lightbox__next { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.2s, border-color 0.2s; } .wsllc-pgallery-lightbox__close:hover, .wsllc-pgallery-lightbox__prev:hover, .wsllc-pgallery-lightbox__next:hover { background: #ca511d; border-color: #ca511d; } .wsllc-pgallery-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; } .wsllc-pgallery-lightbox__close svg { width: 20px; height: 20px; } .wsllc-pgallery-lightbox__prev, .wsllc-pgallery-lightbox__next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; } .wsllc-pgallery-lightbox__prev { left: 16px; } .wsllc-pgallery-lightbox__next { right: 16px; } .wsllc-pgallery-lightbox__prev svg, .wsllc-pgallery-lightbox__next svg { width: 24px; height: 24px; } .wsllc-pgallery-lightbox__counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; line-height: 1; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); } /* ── Responsive: rail moves below the hero as a horizontal strip ── */ @media (max-width: 700px) { .wsllc-pgallery { grid-template-columns: 1fr; } .wsllc-pgallery__hero { order: 1; height: 340px; } .wsllc-pgallery__thumbs { order: 2; height: auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; } .wsllc-pgallery__thumbs ul { flex-direction: row; padding: 3px; } .wsllc-pgallery__thumb { width: 72px; height: 72px; } }