/* ═══════════════════════════════════════════════════════════ CUSTOMER REVIEW IMAGES — the buy-column photo strip + viewer Rendered by lauxuria_ri_html() (inc/review-images.php). Enqueued only on a product page that actually has photos to show, so a store not using the feature never downloads this. ═══════════════════════════════════════════════════════════ */ .lx-ri { /* Overridden per store by the inline `--lx-ri-size` the renderer writes; the fallback keeps the strip sane if that attribute is ever stripped by a caching/optimisation layer. */ --lx-ri-size: 54px; --lx-ri-gap: 8px; margin: 18px 0; } .lx-ri--center { text-align: center; } /* Sentence case, not the uppercase eyebrow the rest of the buy column uses: the heading is admin-typed free text, and `text-transform` would overrule whatever they wrote. */ .lx-ri-head { font-size: 13px; letter-spacing: .01em; color: var(--ink, #0e0c0b); margin-bottom: 8px; font-weight: 500; } .lx-ri-strip { display: flex; flex-wrap: wrap; gap: var(--lx-ri-gap); list-style: none; margin: 0; padding: 0; } .lx-ri--center .lx-ri-strip { justify-content: center; } .lx-ri-item { margin: 0; /* The overflow tail is in the DOM so the viewer can page through the whole set and the "+N" chip can open straight at the first photo it covers — laid out only up to the configured `visible` count. */ flex: 0 0 auto; } .lx-ri-item--extra { display: none; } .lx-ri-thumb { display: block; width: var(--lx-ri-size); height: var(--lx-ri-size); padding: 0; border: 1px solid var(--border, #e8e0d4); background: var(--warm, #f4ede0); overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } button.lx-ri-thumb { cursor: zoom-in; } .lx-ri--rounded .lx-ri-thumb { border-radius: 8px; } .lx-ri--square .lx-ri-thumb { border-radius: 0; } .lx-ri--circle .lx-ri-thumb { border-radius: 50%; } /* A portrait strip is what most phone-camera review photos actually are, so the shape is a setting rather than an assumption. */ .lx-ri--ratio-portrait .lx-ri-thumb { height: calc(var(--lx-ri-size) * 1.34); } .lx-ri--ratio-natural .lx-ri-thumb { height: auto; } .lx-ri-img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-ri--ratio-natural .lx-ri-img { height: auto; } button.lx-ri-thumb:hover, button.lx-ri-thumb:focus-visible { transform: translateY(-2px); border-color: var(--gold, #b8963e); box-shadow: 0 6px 16px rgba(14, 12, 11, .14); outline: none; } .lx-ri-more { display: flex; align-items: center; justify-content: center; background: var(--ink, #0e0c0b); border-color: var(--ink, #0e0c0b); color: var(--gold-light, #f0d9a8); font-family: var(--font-body, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .02em; } .lx-ri-caption { margin: 8px 0 0; font-size: 11px; color: var(--muted, #7a7168); line-height: 1.5; } /* ── Viewer ─────────────────────────────────────────────── One instance, built on first open by assets/review-images.js and appended to . z-index 9990 matches the PDP gallery's own lightbox: above the sticky header, cart drawer and mobile nav (999), below the shade modal (9998). ─────────────────────────────────────────────────────── */ .lx-ri-lb { position: fixed; inset: 0; z-index: 9990; background: rgba(8, 7, 6, .93); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .lx-ri-lb.is-open { opacity: 1; visibility: visible; } .lx-ri-lb-stage { max-width: min(94vw, 900px); max-height: 78vh; display: flex; align-items: center; justify-content: center; } .lx-ri-lb-stage img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; } .lx-ri-lb-close, .lx-ri-lb-nav { position: absolute; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease; } .lx-ri-lb-close:hover, .lx-ri-lb-nav:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); } .lx-ri-lb-close { top: 18px; right: 18px; font-size: 22px; line-height: 1; } .lx-ri-lb-nav--prev { left: 18px; } .lx-ri-lb-nav--next { right: 18px; } /* Both arrows are hidden rather than removed on a single-photo set, and each needs its own [hidden] rule: an explicit `display` outranks the UA sheet's `[hidden] { display: none }` — the same trap the bulk-discount badges hit. */ .lx-ri-lb-nav[hidden], .lx-ri-lb-count[hidden] { display: none; } .lx-ri-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .78); font-family: var(--font-body, sans-serif); font-size: 12px; letter-spacing: .08em; background: rgba(0, 0, 0, .4); padding: 6px 14px; border-radius: 999px; } @media (max-width: 600px) { .lx-ri-lb-nav { width: 38px; height: 38px; } .lx-ri-lb-nav--prev { left: 8px; } .lx-ri-lb-nav--next { right: 8px; } .lx-ri-lb-close { top: 10px; right: 10px; } }