/* Shared customer product screen: website, Android and installed iPhone PWA. */
:root {
  --g31-safe-top: env(safe-area-inset-top, 0px);
  --g31-safe-bottom: env(safe-area-inset-bottom, 0px);
  --g31-safe-left: env(safe-area-inset-left, 0px);
  --g31-safe-right: env(safe-area-inset-right, 0px);
}
.g31-viewer {
  inset: 0 !important; margin: 0 !important;
  width: 100vw !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; background: #090b0e !important; color: white !important;
  overflow: hidden; overscroll-behavior: contain;
}
.g31-viewer::backdrop { background: #090b0e; }
.g31-viewer-head {
  position: absolute; z-index: 3; top: var(--g31-safe-top);
  left: var(--g31-safe-left); right: var(--g31-safe-right);
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: linear-gradient(#090b0eee, #090b0e00);
}
.g31-viewer-head output { font: 600 14px/1.4 system-ui, sans-serif; }
.g31-viewer .g31-close {
  position: static !important; width: 44px !important; height: 44px !important;
  border: 0; border-radius: 50%; color: white !important;
  background: #ffffff20 !important; font-size: 25px; cursor: pointer;
}
.g31-viewer-track {
  position: absolute; inset: calc(62px + var(--g31-safe-top)) var(--g31-safe-right) calc(45px + var(--g31-safe-bottom)) var(--g31-safe-left);
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom;
}
.g31-viewer-track::-webkit-scrollbar { display: none; }
.g31-viewer-slide { flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; position: relative; scroll-snap-align: start; display: grid; place-items: center; }
.g31-viewer .g31-viewer-slide img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; touch-action: pan-x pan-y pinch-zoom; }
.g31-viewer-error { padding: 20px; text-align: center; color: #bec4ce; font: 14px system-ui; }
.g31-viewer-hint { position: absolute; bottom: calc(12px + var(--g31-safe-bottom)); left: 14px; right: 14px; margin: 0; text-align: center; color: #a4adb8; font: 12px/1.4 system-ui; }
.g31-viewer .g31-viewer-arrow { position: absolute; z-index: 2; top: 50% !important; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff26; color: white; font-size: 24px; cursor: pointer; }
.g31-viewer-arrow[data-g31-step="-1"] { left: max(12px, var(--g31-safe-left)); right: auto !important; }
.g31-viewer-arrow[data-g31-step="1"] { right: max(12px, var(--g31-safe-right)); }
.g31-viewer-arrow:disabled { opacity: .25; cursor: default; }
/* The :has header rule used to override iPhone's status-bar inset. */
.g20-app #header:has(.g20-header-inner) {
  padding-top: var(--g31-safe-top);
}
.g20-app .g20-header-inner {
  padding-left: max(14px, var(--g31-safe-left));
  padding-right: max(14px, var(--g31-safe-right));
}
.g20-app[data-g20-page="product"] #header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 65;
  min-height: 0; border: 0; background: transparent;
  padding: var(--g31-safe-top) max(14px, var(--g31-safe-right)) 0 max(14px, var(--g31-safe-left));
  pointer-events: none;
}
.g20-app[data-g20-page="product"] #header .g20-header-inner {
  min-height: 64px; padding: 8px 0 12px; gap: 8px;
}
.g20-app[data-g20-page="product"] #header .g20-detail-header-title,
.g20-app[data-g20-page="product"] #header [data-market-theme] { display: none; }
.g20-app[data-g20-page="product"] #header [data-action="back"] { margin-right: auto; }
.g20-app[data-g20-page="product"] #header .g20-round,
.g20-site .g20-product-dialog .g20-detail-tools .g20-round,
.g20-site #product-dialog.g20-product-dialog .dialog-close {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%; border: 1px solid var(--g20-line);
  background: var(--g20-surface); color: var(--g20-text);
  box-shadow: 0 2px 10px #00000012; pointer-events: auto;
}
.g20-app[data-g20-page="product"] #header .g20-round svg { width: 22px; height: 22px; }
@media (max-width: 799px) {
  .g20-app[data-g20-page="product"] #main { padding-top: calc(16px + var(--g31-safe-top)); }
  .g20-gallery-track {
    height: min(clamp(320px, 116vw, 520px), 59svh);
  }
  .g20-gallery-track > button { height: 100%; min-height: 0; aspect-ratio: auto; }
  .g20-gallery-track img { object-fit: contain; object-position: center; }
  .g20-photo-controls { min-height: 38px; padding-top: 5px; padding-bottom: 5px; }
  .g20-gallery { margin-bottom: 8px; }
  .g20-detail-content .g20-price-panel { margin-bottom: 8px; }
  .g20-app[data-g20-page="product"] .g20-buy-bar,
  .g20-site .g20-product-dialog .g20-buy-bar {
    padding-bottom: max(12px, var(--g31-safe-bottom));
    padding-left: max(12px, var(--g31-safe-left));
    padding-right: max(12px, var(--g31-safe-right));
  }
  .g20-site .g20-product-dialog > #product-detail {
    padding: calc(16px + var(--g31-safe-top)) max(14px, var(--g31-safe-right)) calc(20px + var(--g31-safe-bottom)) max(14px, var(--g31-safe-left));
  }
  .g20-site .g20-product-dialog::before { content: ''; height: var(--g31-safe-top); padding: 0; border: 0; }
  .g20-site #product-dialog.g20-product-dialog > .product-page-bar { display: contents; }
  .g20-site #product-dialog.g20-product-dialog .product-page-brand,
  .g20-site #product-dialog.g20-product-dialog .product-page-hours { display: none; }
  .g20-site #product-dialog.g20-product-dialog .dialog-close {
    position: fixed; z-index: 65; right: auto;
    top: calc(8px + var(--g31-safe-top)); left: max(14px, var(--g31-safe-left));
    font-size: 0;
  }
  .g20-site #product-dialog.g20-product-dialog .dialog-close span { display: none; }
  .g20-site #product-dialog.g20-product-dialog .dialog-close::after { content: '←'; font-size: 25px; }
  .g20-site .g20-product-dialog .g20-detail-tools {
    top: calc(8px + var(--g31-safe-top)); right: max(14px, var(--g31-safe-right)); gap: 8px;
  }
  .g20-site .g20-product-dialog .g20-gallery { top: auto; }
  .g31-viewer-arrow { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .g20-gallery-track { height: min(310px, 68svh); }
}
@media (prefers-reduced-motion: reduce) {
  .g31-viewer-track { scroll-behavior: auto; }
}
/* Override the legacy #viewer img pinch-only rule which blocks finger swipes. */
#viewer.g31-viewer .g31-viewer-track,
#viewer.g31-viewer .g31-viewer-slide img { touch-action: none !important; user-select: none; -webkit-user-select: none; }
#viewer.g31-viewer .g31-viewer-track { bottom: calc(96px + var(--g31-safe-bottom)); }
#viewer.g31-viewer .g31-viewer-slide img { transform-origin: center; }
.g31-zoom-bar { position:absolute; z-index:3; bottom:calc(43px + var(--g31-safe-bottom)); left:50%; transform:translateX(-50%); display:flex; gap:10px; }
#viewer.g31-viewer .g31-zoom-bar button { min-width:44px; height:44px; padding:0 12px; border:1px solid #ffffff30; border-radius:22px; color:white; background:#222832; font:600 15px system-ui; }