.product-gallery { width:100%; } .gallery-main-image { display:block; width:100%; aspect-ratio:1 / 1; max-width:420px; border-radius:14px; background:#f8f9fa; border:1px solid #e9ecef; overflow:hidden; cursor:zoom-in; padding:0; } .gallery-main-image img { width:100%; height:100%; object-fit:contain; object-position:center; padding:12px; box-sizing:border-box; display:block; } .gallery-thumbnail-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; } @container (min-width:700px) { .product-gallery.is-wide .gallery-thumbnail-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } } .gallery-thumbnail { display:block; width:100%; aspect-ratio:1 / 1; border-radius:10px; border:2px solid transparent; background:#f8f9fa; overflow:hidden; cursor:pointer; padding:0; transition:border-color 140ms ease, box-shadow 140ms ease; } .gallery-thumbnail img { width:100%; height:100%; object-fit:contain; object-position:center; padding:4px; box-sizing:border-box; display:block; } .gallery-thumbnail.active { border-color:#e53e3e; box-shadow:0 0 0 2px rgba(229, 62, 62, .22); } @media (hover:hover) and (pointer:fine) { .gallery-thumbnail:hover { border-color:#ced4da; } .gallery-thumbnail.active:hover { border-color:#e53e3e; } } .gallery-photo-count { margin:12px 0 0; color:#6b7280; font-size:13px; line-height:1.35; text-align:center; } @media (max-width:767.98px) { .gallery-main-image { max-width:100%; min-height:240px; border-radius:10px; } .gallery-main-image img { padding:8px; } .gallery-thumbnail-grid { display:grid; grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:10px; overflow-x:visible; padding:0; scroll-snap-type:none; } } @media (max-width:374.98px) { .gallery-thumbnail-grid { gap:5px; } } .product-lightbox[hidden] { display:none; } .product-lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; width:100%; height:100dvh; opacity:0; pointer-events:none; transition:opacity .2s ease; overflow:hidden; } .product-lightbox.is-open { opacity:1; pointer-events:auto; } .product-lightbox__backdrop { position:absolute; inset:0; background:rgba(0, 0, 0, .88); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); cursor:pointer; } .product-lightbox__dialog { position:relative; z-index:1; width:100%; max-width:min(100%, 1200px); height:100dvh; display:flex; align-items:center; justify-content:center; padding:60px 28px 20px; opacity:0; outline:none; transition:opacity .2s ease; } .product-lightbox.is-open .product-lightbox__dialog { opacity:1; } .product-lightbox__close { position:fixed; top:max(14px, env(safe-area-inset-top, 0)); right:max(14px, env(safe-area-inset-right, 0)); z-index:10002; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255, 255, 255, .95); color:#111; border:none; font-size:20px; cursor:pointer; box-shadow:0 4px 20px rgba(0, 0, 0, .4); transition:background 140ms ease, transform 140ms ease; } .product-lightbox__close:hover { background:#fff; transform:scale(1.08); } .product-lightbox__content { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:10px; min-height:0; } .product-lightbox__stage { flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; gap:14px; } .product-lightbox__viewer { flex:1; align-self:stretch; min-width:0; min-height:0; max-width:860px; display:flex; align-items:center; justify-content:center; } .lightbox-image-shell { position:relative; width:100%; height:100%; background:#fff; border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255,255,255,0.06); overflow:hidden; } .product-lightbox__viewer img { background:transparent; box-shadow:none; border-radius:0; max-width:100%; max-height:100%; } .lightbox-image-shell img[data-lightbox-image] { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:transparent; box-shadow:none; border-radius:0; display:block; cursor:zoom-in; transition:transform .28s ease; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:none; } .lightbox-image-shell.is-zoomed img[data-lightbox-image] { cursor:zoom-out; } .lightbox-zoom-btn { position:absolute; bottom:10px; right:10px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(0, 0, 0, .1); color:#444; border:none; font-size:15px; cursor:pointer; opacity:.55; transition:opacity 140ms ease, background 140ms ease; z-index:2; } .lightbox-zoom-btn:hover { opacity:1; background:rgba(0, 0, 0, .2); } .lightbox-image-shell.is-zoomed .lightbox-zoom-btn { background:rgba(229, 62, 62, .12); color:#c53030; opacity:.85; } .product-lightbox__arrow { position:static; transform:none; flex-shrink:0; width:50px; height:50px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255, 255, 255, .92); color:#111; border:none; font-size:24px; cursor:pointer; box-shadow:0 4px 20px rgba(0, 0, 0, .3); transition:background 140ms ease; z-index:2; } .product-lightbox__arrow:hover { background:#fff; transform:scale(1.06); } .product-lightbox__arrow:disabled { opacity:.32; cursor:not-allowed; pointer-events:none; } .lightbox-meta { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px; } .product-lightbox__counter { margin:0; padding:5px 14px; border-radius:999px; color:#fff; background:rgba(0, 0, 0, .5); font-size:13px; line-height:1.2; } .lightbox-title { margin:0; color:rgba(255, 255, 255, .8); font-size:13px; line-height:1.3; text-align:center; max-width:min(100%, 640px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lightbox-thumbs-strip { flex-shrink:0; background:rgba(0, 0, 0, .48); border-radius:14px; padding:6px 10px; width:min(100%, 95vw); max-width:95vw; } .lightbox-thumbnails { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:4px 2px; scroll-behavior:smooth; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; align-items:center; } .lightbox-thumbnails::-webkit-scrollbar { display:none; } .lightbox-thumbnail { width:76px; height:76px; flex:0 0 auto; border:2.5px solid transparent; border-radius:9px; padding:0; opacity:.58; background:#fff; overflow:hidden; cursor:pointer; transition:opacity 140ms ease, border-color 140ms ease, transform 140ms ease; } .lightbox-thumbnail.active { border-color:#ff2020; opacity:1; transform:scale(1.04); box-shadow:0 0 0 2px rgba(255, 32, 32, .28); } .lightbox-thumbnail img { width:100%; height:100%; object-fit:contain; display:block; } @media (hover:hover) and (pointer:fine) { .lightbox-thumbnail:hover { opacity:.9; } .lightbox-thumbnail.active:hover { opacity:1; } } @media (max-width:767.98px) { .product-lightbox { padding:0; } .product-lightbox__dialog { max-width:100%; padding:max(60px, calc(env(safe-area-inset-top) + 54px)) 10px max(10px, env(safe-area-inset-bottom)) 10px; } .product-lightbox__content { gap:8px; justify-content:flex-start; } .product-lightbox__stage { display:block; position:relative; gap:0; } .product-lightbox__viewer { width:100%; height:100%; max-width:100%; } .lightbox-image-shell { width:100%; height:100%; border-radius:12px; padding:10px; } .product-lightbox__arrow { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; font-size:20px; background:rgba(255, 255, 255, .88); z-index:3; } .product-lightbox__arrow--prev { left:6px; } .product-lightbox__arrow--next { right:6px; } .lightbox-title { display:none; } .lightbox-thumbs-strip { width:100%; max-width:100%; border-radius:10px; padding:4px 8px; } .lightbox-thumbnail { width:58px; height:58px; } .lightbox-zoom-btn { width:30px; height:30px; font-size:13px; bottom:8px; right:8px; } .product-lightbox__close { top:max(10px, env(safe-area-inset-top, 0)); right:max(10px, env(safe-area-inset-right, 0)); width:42px; height:42px; font-size:18px; } } @media (max-width:374.98px) { .lightbox-thumbnail { width:52px; height:52px; } .product-lightbox__arrow { width:34px; height:34px; font-size:18px; } } @media (min-width:768px) and (max-width:1023.98px) { .product-lightbox__dialog { padding:60px 16px 18px; } .product-lightbox__arrow { width:44px; height:44px; font-size:22px; } .lightbox-thumbnail { width:66px; height:66px; } .lightbox-title { font-size:13px; } } @media (min-width:1024px) { .product-lightbox__viewer { max-width:820px; } .lightbox-image-shell { border-radius:18px; padding:20px; } .lightbox-thumbnail { width:78px; height:78px; } .lightbox-title { font-size:14px; } } @media (min-width:1280px) { .product-lightbox__viewer { max-width:880px; } .product-lightbox__arrow { width:52px; height:52px; font-size:26px; } } @media (min-width:1536px) { .product-lightbox__viewer { max-width:960px; } }