/* SNKXBY Shop V3 product-detail layer
   Loaded after shop-blue-responsive-v2.css.
   Keeps the whole overlay scrollable and lets the React product detail define its natural content order. */

html:has(.hero-grid) div[style*="position: fixed"]:has(.shop-detail-grid) {
  align-items: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  touch-action: pan-y;
}

html:has(.hero-grid) div[style*="position: fixed"]:has(.shop-detail-grid) > div:has(> .shop-detail-grid) {
  max-height: none !important;
  overflow: visible !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  flex: 0 0 auto;
}

html:has(.hero-grid) div:has(> .shop-detail-grid) {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html:has(.hero-grid) .product-gallery {
  width: 100%;
}

html:has(.hero-grid) .product-thumbnails,
html:has(.hero-grid) .product-lightbox-thumbnails {
  scrollbar-color: rgba(0,102,255,.55) rgba(255,255,255,.04);
  scrollbar-width: thin;
}

html:has(.hero-grid) .product-thumbnails::-webkit-scrollbar,
html:has(.hero-grid) .product-lightbox-thumbnails::-webkit-scrollbar {
  height: 6px;
}

html:has(.hero-grid) .product-thumbnails::-webkit-scrollbar-thumb,
html:has(.hero-grid) .product-lightbox-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(0,102,255,.55);
  border-radius: 99px;
}

html:has(.hero-grid) .product-meta-grid > div {
  border-color: rgba(0,102,255,.14) !important;
  background: rgba(5,13,26,.78) !important;
}

html:has(.hero-grid) .product-options-priority {
  padding: 14px;
  border: 1px solid rgba(0,102,255,.16);
  background: rgba(0,102,255,.035);
}

html:has(.hero-grid) .product-options-priority section + section {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

html:has(.hero-grid) .product-lightbox {
  touch-action: pan-y;
}

@media (max-width: 700px) {
  html:has(.hero-grid) div[style*="position: fixed"]:has(.shop-detail-grid) {
    padding: 6px !important;
    align-items: flex-start !important;
  }

  html:has(.hero-grid) div[style*="position: fixed"]:has(.shop-detail-grid) > div:has(> .shop-detail-grid) {
    width: calc(100vw - 12px) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  html:has(.hero-grid) .product-meta-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  html:has(.hero-grid) .product-options-priority {
    padding: 12px;
    margin-bottom: 18px !important;
  }
}

@media (max-width: 380px) {
  html:has(.hero-grid) .product-meta-grid {
    grid-template-columns: 1fr !important;
  }
}