.hero .hero-media { min-height: 0; min-width: 0; position: relative; padding-top: 90px; isolation: isolate; }
.gallery-brand-backdrop { position: absolute; top: 0; left: 8%; width: 42%; max-width: 280px; height: auto; transform: rotate(-10deg); pointer-events: none; z-index: -1; }
.product-gallery { width: 100%; position: relative; }
.gallery-slides figure { margin: 0; }
.gallery-slides [hidden] { display: none; }
.gallery-zoom { display: block; width: 100%; padding: 0; border: 1px solid #ffffff38; border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 20px 56px #0004; }
.gallery-zoom img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; }
.gallery-slides figcaption { padding: 16px 0 0; color: #b9c4d2; text-align: center; font-size: 13px; font-weight: 450; letter-spacing: .04em; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 0; padding: 2px 0 0; }
.gallery-controls button { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gallery-controls button span { width: 6px; height: 6px; border-radius: 50%; background: #ffffff55; transition: background .18s ease, transform .18s ease; }
.gallery-controls button[aria-current="true"] span { background: #fff; transform: scale(1.2); }
.gallery-controls button:hover span { background: #ffffffbb; }
.gallery-dialog button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid #ffffff50; border-radius: 10px; background: #ffffff10; color: #fff; cursor: pointer; }
.gallery-dialog button:hover { background: #ffffff28; }
.product-gallery button:focus-visible { outline: 3px solid #8ac9ff; outline-offset: -3px; }
.gallery-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gallery-dialog { width: min(1440px, 95vw); max-width: 95vw; max-height: 94dvh; padding: 12px; border: 1px solid #ffffff40; border-radius: 16px; background: #102237; }
.gallery-dialog::backdrop { background: #030b17dd; }
.gallery-dialog button { display: block; margin: 0 0 10px auto; }
.gallery-dialog img { display: block; width: 100%; max-height: 80dvh; object-fit: contain; }
@media (max-width: 600px) {
  .hero .hero-media { padding-top: 56px; }
  .gallery-brand-backdrop { width: 42%; max-width: 180px; }
  .gallery-slides figcaption { padding-top: 12px; font-size: 12px; }
}

.gallery-preview-note { margin: 12px auto 0; max-width: 54em; color: var(--dark-muted, #b8bec8); font-size: 11px; line-height: 1.6; text-align: center; }

.gallery-controls[hidden] { display: none; }