/* Scoped OneStop screenshot showcase. Existing Greenlyz styles stay intact. */
.product-grid:has(.os-preview) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-card-onestop:has(.os-preview) { grid-column:1/-1; display:grid; grid-template-columns:1fr 1.1fr; column-gap:36px; }
.product-card-onestop:has(.os-preview) > :not(.os-preview) { grid-column:1; }
.product-card-onestop .os-preview { grid-column:2; grid-row:1/5; align-self:center; margin:0; z-index:1; }
.os-preview { display:block; position:relative; margin:14px 0 22px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#202128; text-decoration:none; }
.os-preview img { display:block; width:100%; height:auto; }
.os-preview > span { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; color:var(--ink); background:var(--surface-soft); font-size:14px; font-weight:700; }
.os-preview:hover > span { color:var(--forest); }
.os-gallery { padding:60px 0 72px; scroll-margin-top:110px; }
.os-gallery-heading { display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:end; }
.os-gallery-heading h2 { margin:12px 0 0; font-family:var(--font-display); font-size:clamp(32px,4vw,52px); line-height:1.08; letter-spacing:-.035em; }
.os-gallery-heading p { margin:0; color:var(--copy); font-size:17px; }
.os-gallery-note { margin:24px 0 30px; color:var(--copy); font-size:13px; max-width:850px; }
.os-shots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.os-shot { margin:0; min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); }
.os-shot-lead { grid-column:1/-1; }
.os-shot > a { display:block; position:relative; background:#e8edf2; text-decoration:none; overflow:hidden; }
.os-shot img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.os-enlarge { position:absolute; right:12px; bottom:12px; padding:7px 12px; border:1px solid #ffffff4d; border-radius:8px; background:#10231ae8; color:white; font-size:12px; font-weight:700; }
.os-shot > a:hover .os-enlarge,.os-shot > a:focus-visible .os-enlarge { background:#0c3b2a; }
.os-shot figcaption { display:flex; gap:16px; padding:22px 24px 26px; }
.os-shot-number { color:var(--green); font-size:12px; font-weight:800; padding-top:4px; letter-spacing:.08em; }
.os-shot h3 { margin:0 0 6px; font:700 21px/1.3 var(--font-sans); letter-spacing:-.025em; }
.os-shot p { margin:0; color:var(--copy); font-size:14px; line-height:1.6; }
.os-gallery-cta { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px; margin-top:32px; background:var(--surface-soft); border:1px solid var(--line); border-radius:18px; }
.os-gallery-cta h3 { margin:0 0 6px; font:700 24px/1.2 var(--font-display); }
.os-gallery-cta p { margin:0; color:var(--copy); font-size:14px; }
.os-gallery-cta .product-actions { margin:0; }
.os-lightbox:not([open]) { display:none; }
.os-lightbox { width:min(1440px,96vw); max-width:96vw; max-height:96dvh; padding:16px; border:1px solid #506057; border-radius:16px; background:#111918; color:#fff; box-shadow:0 30px 100px #0009; }
.os-lightbox::backdrop { background:#06100ded; }
.os-lightbox-bar,.os-lightbox-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.os-lightbox-bar { margin-bottom:14px; }
.os-lightbox-bar h2 { font:600 18px/1.3 var(--font-sans); margin:0; color:#fff; }
.os-lightbox button { padding:9px 14px; border:1px solid #61706c; border-radius:8px; background:#25332f; color:#fff; font:600 14px/1.2 var(--font-sans); cursor:pointer; }
.os-lightbox button:hover { background:#395247; }
.os-lightbox-image { display:block; width:100%; max-height:70dvh; object-fit:contain; background:#0a1010; }
.os-lightbox-bottom { margin-top:14px; }
.os-lightbox-bottom p { margin:0; color:#d6e4dd; font-size:13px; }
.os-lightbox > a { display:block; width:fit-content; margin:12px auto 0; color:#a4e7c0; font-size:13px; text-align:center; }
.os-preview:focus-visible,.os-shot > a:focus-visible,.os-lightbox button:focus-visible,.os-lightbox a:focus-visible { outline:3px solid #7772ff; outline-offset:3px; }
html.os-lightbox-open { overflow:hidden; }
@media(max-width:900px) {
 .product-grid:has(.os-preview) { grid-template-columns:1fr; }
 .product-card-onestop:has(.os-preview) { display:flex; }
 .product-card-onestop .os-preview { margin:14px 0 22px; }
}
@media(max-width:700px) {
 .os-gallery { padding:40px 0; }
 .os-gallery-heading { grid-template-columns:1fr; gap:18px; }
 .os-shots { grid-template-columns:1fr; gap:22px; }
 .os-shot figcaption { padding:18px; }
 .os-gallery-cta { align-items:flex-start; flex-direction:column; padding:22px; }
 .os-lightbox { padding:10px; }
 .os-lightbox-bar h2 { font-size:15px; }
 .os-lightbox button { font-size:12px; padding:10px; }
}