.gv360 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}


.spin-bottom-ui {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 1;
  height: var(--lb-thumbs-h) !important;
  min-height: var(--lb-thumbs-h) !important;
  max-height: var(--lb-thumbs-h) !important;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px !important;
  box-shadow: none;
  overflow: hidden;
}
.spin-bottom-ui canvas {
  width: 100%;
  max-width: 480px;
  height: 240px;
  background: #222;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 8px;
}
.spin-bottom-ui .icon360 {
  margin: 12px 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spin-bottom-ui .zoom-indicator,
.spin-bottom-ui .hud,
.spin-bottom-ui .progress {
  margin-top: 8px;
}
.spin-bottom-ui .hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.spin-bottom-ui .badge {
  background: #222;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  margin: 0 2px;
}
.spin-bottom-ui .progress {
  width: 100%;
  max-width: 320px;
  background: #eee;
  border-radius: 4px;
  padding: 4px 8px;
  box-sizing: border-box;
}
.spin-bottom-ui .progress .bar {
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}
.spin-bottom-ui .progress .bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #3b82f6;
  border-radius: 3px;
  transition: width 0.3s;
}
.spin-bottom-ui .shield {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.05);
  pointer-events: none;
  border-radius: 8px;
}
.spin-bottom-ui .protect {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 15px;
  z-index: 2;
  display: none;
}
:root {
  --lb-max-w: 1200px;
  --lb-topbar-h: 36px;
  --lb-thumbs-h: clamp(50px, 12vw, 72px);
  --lb-top-gap: clamp(4px, 1.2vh, 10px);
  --lb-bottom-gap: clamp(6px, 1.6vh, 12px);
  --lb-topbar-space: calc(var(--lb-topbar-h) + var(--lb-top-gap) + 8px);
  --lb-gap-to-stage-top: 8px;
  --lb-gap-to-stage-bottom: 10px;
}


.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 1rem 4.5vw 4rem;
  background: #090909;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
  background: #000;
  color: #fff;
  transition: transform .3s;
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .overlay {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0,0,0,.5);
  padding: .5rem;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.gallery-item:hover .overlay { opacity: 1; }

.filters-section { padding: 1rem 6.5vw 1rem; background:#090909; text-align:left; margin:0; }
.filters { display:inline-flex; flex-wrap:wrap; gap:.6rem; margin-top:40px; margin-left:-40px; }
.filters .filter { padding:.6rem 1.2rem; border:none; border-radius:999px; background:#222; color:#fff; cursor:pointer; transition:background .2s; }
.filters .filter.active, .filters .filter:hover { background:#ee0302; }
@media (max-width:600px){
  .filters-section { padding:3rem 17.5vw 1rem; margin-top:-70px; }
}

.gallery-item .mode-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
  flex-wrap: wrap;
  max-width: calc(100% - 16px);
}
.gallery-item .mode-badge {
  --mb-bg: rgba(0,0,0,.48);
  --mb-border: rgba(255,255,255,.18);
  --mb-text: #fff;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 6px 4px 6px;
  border-radius: 6px;
  background: rgba(var(--bs-secondary-rgb), 0.48);
  border: 1px solid var(--mb-border);
  color: var(--mb-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gallery-item .mode-badge[data-mode="persp"] { --mb-border: rgba(255,255,255,.22); }
.gallery-item .mode-badge[data-mode="ortho"] { --mb-border: rgba(255,255,255,.20); }
.gallery-item .mode-badge[data-mode="spin"]  { --mb-border: rgba(255,255,255,.26); }


.gallery-item .mode-badge svg { width:16px; height:16px; display:block; }
.gallery-item .mode-badge svg path, 
.gallery-item .mode-badge svg polygon, 
.gallery-item .mode-badge svg rect { fill:#ffffff; stroke:none; }

@media (max-width:600px) {
  .gallery-grid { padding: 2rem 7.5vw 4rem; }
}


.product-gallery {
  background: #0b0b0b;
  padding: clamp(16px,5vw,36px) clamp(16px,5vw,42px);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.slider-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.06);
}
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; }
.slide { display: none; }
.slide.active { display: block; }
.slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .5s ease;
}
.slide img:hover { transform: scale(1.02); }
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.slider-arrow:hover { background: rgba(0,0,0,.55); }
.slider-arrow.left { left: 14px; }
.slider-arrow.right { right: 14px; }
.thumbs {
  margin-top: 12px;
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  overflow: auto;
  padding-bottom: 2px;
}
.thumbs .thumb {
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  padding: 0;
  cursor: pointer;
  width: 110px;
  height: 72px;
  display: block;
  flex: 0 0 auto;
}
.thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumbs .thumb.active {
  border-color: #ee0302;
  box-shadow: 0 0 0 2px rgba(238,3,2,.25);
}


.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgb(20 20 20 / 85%);
  backdrop-filter: blur(27px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: clamp(8px, 3vw, 24px);
}
.gallery-lightbox.active { display: flex; }

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 54%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 4;
}
.lightbox-prev { left: max(30px,2vw); margin-top: -30px; }
.lightbox-next { right: max(30px,2vw); margin-top: -30px; }

.gallery-lightbox .lb-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, var(--lb-max-w));
}


.gallery-lightbox .lightbox-topbar {
  position: static;
  left: unset;
  top: unset;
  transform: unset;
  z-index: auto;
  margin-bottom: var(--lb-gap-to-stage-top);
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--lb-topbar-h);
  padding: 4px 8px;
  max-width: calc(min(92vw,var(--lb-max-w)) - 140px); 
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none;
  background: none;
  border: 1px solid #ee0302;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gallery-lightbox .lightbox-topbar::-webkit-scrollbar {
  height: 6px;
}
.gallery-lightbox .lb-tab {
  max-width: 140px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0; 
}
@media (max-width: 500px) {
  .gallery-lightbox .lb-tab {
    font-size: 12px;
    padding: 5px 8px;
  }
}


@media (max-width: 420px) {
  .gallery-lightbox .lightbox-topbar {
    gap: 3px; 
    padding: 3px 6px;
  }
  .gallery-lightbox .lb-tab {
    padding: 5px 7px; 
    font-size: 11px; 
    max-width: 110px;
  }
}

.gallery-lightbox .lightbox-topbar::-webkit-scrollbar { display: none; }
.gallery-lightbox .lb-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffffff;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  font-size: 14px;
  line-height: 1;
}
.gallery-lightbox .lb-tab:not(.on):hover { background: rgba(0,0,0,.06); }
.gallery-lightbox .lb-tab.on {
  background: #ee0302;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px rgba(0,0,0,.28);
}
.lightbox-topbar .lb-tab.disabled { opacity: .45; pointer-events: none; }

.gallery-lightbox .lb-stage {
  position: relative;
  width: 100%;
  height: min(78dvh,720px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox .lb-stage > img.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #ececec;
}
.gallery-lightbox .lb-stage .img-wrap,
.gallery-lightbox .lb-stage .gv360 {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
}
.gallery-lightbox .lb-stage .gv360 { background: #000; }

.gallery-lightbox .lightbox-thumbs {
  position: static;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--lb-thumbs-h);
  min-height: var(--lb-thumbs-h);
  max-height: var(--lb-thumbs-h);
  max-width: 100%;
  margin-top: var(--lb-gap-to-stage-bottom);
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
}
.gallery-lightbox .lightbox-thumb-btn {
  width: clamp(56px,13vw,96px);
  height: clamp(40px,9vw,64px);
  border: 2px solid transparent;
  border-radius: 10px;
  background: #111;
  padding: 0;
  cursor: pointer;
}
.gallery-lightbox .lightbox-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}


.gallery-lightbox[data-mode="spin"] .lightbox-thumbs {
  background: transparent !important;
  border: 1px solid transparent !important; 
  padding: 8px !important; 
  gap: 0 !important;
  box-sizing: border-box;
}
.gallery-lightbox[data-mode="spin"] .lightbox-thumbs.lb-spin-hide { visibility: hidden !important; }
.gallery-lightbox[data-mode="spin"] .lightbox-thumbs.lb-spin-hide > * { display: none !important; }
.gallery-lightbox .lightbox-thumb-btn.active {
  border-color: #ee0302;
  box-shadow: 0 0 0 2px rgba(238,3,2,.25);
}


.gv360 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.gv360 canvas { width: 100%; height: 100%; display: block; background: #000; }
.gv360 .shield {
  position: absolute;
  inset: 0;
  background: transparent;
}
.gv360 .protect {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  font-weight: 700;
  color: #222;
  letter-spacing: .3px;
  z-index: 4;
}


.gv360 .zoom-indicator {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: #222;
  background: rgba(255,255,255,.85);
  padding: 4px 9px 5px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.gv360 .icon360 {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a3a;
  pointer-events: none;
}
.gv360 .hud {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  font-size: .85rem;
  z-index: 3;
}
.gv360 .badge {
  background: rgba(0,0,0,.05);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.1);
}

.gv360 .progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.85);
  font-weight: 600;
  letter-spacing: .2px;
  color: #333;
  z-index: 3;
}
.gv360 .progress .bar {
  width: 220px;
  height: 6px;
  background: #ddd;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #bbb;
}
.gv360 .progress .bar>span {
  display: block;
  height: 100%;
  width: 0%;
  background: #ee0302;
}
.gv360 .icon360 {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a3a;
  pointer-events: none;
}
.gv360 .icon360 svg { width: 22px; height: 22px; display: block; opacity: .9; }
@keyframes orbit { from{transform:rotate(0)}to{transform:rotate(360deg)} }
.gv360 .icon360 .ring {
  transform-origin: 12px 12px;
  animation: orbit 8s linear infinite;
  opacity: .95;
}


.lb-info {
  position: absolute;
  z-index: 7;
  top: clamp(25px, 15vh, 88px);
  left: clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
.lb-info .info-card {
  width: clamp(260px, 26vw, 360px);
  padding: 22px 22px 20px;
  border-radius: 14px;
  
  background: linear-gradient(150deg, rgba(20,20,20,.42) 0%, rgba(20,20,20,.38) 55%, rgba(20,20,20,.34) 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
  backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  color: #fff;
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, box-shadow .3s, background .35s;
}
.lb-info .info-card.on {
  display: block;
  opacity: 1;
  transform: none;
  width: 312px;
}


.gallery-lightbox[data-mode="persp"] .lb-info .info-card.on,
.gallery-lightbox[data-mode="ortho"] .lb-info .info-card.on,
.gallery-lightbox[data-mode="spin"]  .lb-info .info-card.on {
  background: linear-gradient(150deg, rgba(20,20,20,.42) 0%, rgba(20,20,20,.38) 55%, rgba(20,20,20,.34) 100%);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10) inset;
  backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
}


@media (prefers-color-scheme: light) {
  .gallery-lightbox[data-mode="persp"] .lb-info .info-card.on,
  .gallery-lightbox[data-mode="ortho"] .lb-info .info-card.on,
  .gallery-lightbox[data-mode="spin"]  .lb-info .info-card.on {
    background: linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.48) 55%, rgba(255,255,255,.42) 100%);
    color:#0b0b0b;
    border:1px solid rgba(0,0,0,.12);
    box-shadow: 0 20px 46px -14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.85) inset;
    backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
    -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  }
  .gallery-lightbox[data-mode="persp"] .lb-info p,
  .gallery-lightbox[data-mode="ortho"] .lb-info p,
  .gallery-lightbox[data-mode="spin"]  .lb-info p { color:#1d1d1d; }
}
.lb-info .info-icon { line-height: 0; margin-bottom: 8px; }

.lb-info .info-card .info-icon svg path,
.lb-info .info-card .info-icon svg polygon,
.lb-info .info-card .info-icon svg rect,
.lb-info .info-card .info-icon svg circle,
.lb-info .info-card .info-icon svg text { fill:#ee0302 !important; stroke:#ee0302 !important; }
.lb-info h3 {
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.22;
  font-size: clamp(20px,1.7vw,24px);
}
.lb-info h3 span { display: block; font-weight: 700; opacity: .9; }
.lb-info p { margin: 0; color: #e4e4e4; line-height: 1.55; font-size: clamp(10px,1.05vw,12px); }
@media (prefers-color-scheme: light) {
  
  .lb-info .info-card {
    background: linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.48) 55%, rgba(255,255,255,.42) 100%);
    color:#0b0b0b;
    border:1px solid rgba(0,0,0,.12);
    box-shadow: 0 20px 46px -14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.85) inset;
    backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
    -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.04);
  }
  .lb-info p { color:#1d1d1d; }
  .lb-info .info-card .info-icon svg path,
  .lb-info .info-card .info-icon svg polygon,
  .lb-info .info-card .info-icon svg rect,
  .lb-info .info-card .info-icon svg circle,
  .lb-info .info-card .info-icon svg text { fill:#ee0302 !important; }
}


@media (max-width: 991px), (hover:none) and (pointer:coarse) and (max-width: 1200px) {
  .lb-info { display: none !important; }
}




@media (max-width: 768px) {
  .gallery-lightbox .lightbox-topbar {
    max-width: 85%;
  }
}


@media (max-height:600px) and (orientation:landscape) {
  :root {
    --lb-topbar-h:36px;
    --lb-thumbs-h:48px;
    --lb-top-gap:4px;
    --lb-bottom-gap:6px;
    --lb-gap-to-stage-top:6px;
    --lb-gap-to-stage-bottom:8px;
  }
  .gallery-lightbox .lb-stage { height: calc(100dvh - var(--lb-topbar-space) - 24px); }
}


@media (max-width:768px) {
  .gallery-lightbox .lb-frame { width: 96vw; }
  .gallery-lightbox .lb-stage { height: min(64dvh,560px); }
  .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}

.spin-bottom-ui {
  margin-top: var(--lb-gap-to-stage-bottom);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.lightbox-share{position:absolute;top:14px;right:62px;display:flex;gap:8px;z-index:6;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);padding:6px;border-radius:999px;backdrop-filter:blur(6px)}
.lightbox-share .share-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.lightbox-share .share-btn:hover{background:rgba(255,255,255,.18)}
.lightbox-share .share-btn.ok{border-color:#28a745;box-shadow:0 0 0 2px rgba(40,167,69,.35)}
@media (max-width:768px){.lightbox-share{top:10px;right:56px}.lightbox-share .share-btn{width:30px;height:30px}}