/* White product studio. Shared surfaces for the photograph and device views. */
.photo-viewer {
  --viewer-ink: #1d1d1f;
  --viewer-muted: #63636a;
  color-scheme: light;
  color: var(--viewer-ink);
  background: #fff;
  border: 1px solid #fff;
  border-radius: 32px;
  box-shadow: 0 35px 100px #15152226, 0 0 0 1px #ffffff80;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.photo-viewer::backdrop {
  background: #e4e7eb96;
  backdrop-filter: blur(24px) saturate(110%);
  -webkit-backdrop-filter: blur(24px) saturate(110%);
}
.photo-viewer[open] { grid-template-columns: minmax(0, 1fr); animation: viewer-appear .3s ease-out; }
.photo-viewer-header {
  border: 0;
  padding: 26px 34px 14px;
  gap: 20px;
  background: #fff;
}
.photo-viewer-heading { min-width: 0; }
.photo-viewer .photo-viewer-title { font-size: 1.875rem; font-weight: 650; line-height: 1.18; letter-spacing: -.04em; }
.photo-viewer-button {
  color: #343438;
  background: #f3f3f5;
  border: 1px solid #e9e9ed;
  border-radius: 99px;
  font-size: .875rem;
  font-weight: 550;
  min-height: 44px;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.photo-viewer-button:hover { background: #e9e9ed; }
.photo-viewer-button:active { transform: scale(.97); }
.photo-viewer-button:focus-visible, .photo-gallery-thumbs button:focus-visible,
.photo-viewer-original:focus-visible, .photo-viewer-viewport:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
}
.photo-viewer-viewport:focus-visible { outline-offset: -5px; border-radius: 24px; }
.photo-viewer-close { width: 44px; height: 44px; padding: 12px; align-self: center; }
.photo-viewer-stage { margin: 0 20px; background: #fafafa; border-radius: 24px; isolation: isolate; }
.photo-viewer-viewport { scrollbar-color: #c6c6cc #f7f7f9; scrollbar-width: thin; }
.photo-viewer-canvas { padding: 58px 56px 72px; }
.photo-viewer-image { mix-blend-mode: multiply; }
.photo-viewer-specs {
  position: absolute; z-index: 2; top: 18px; left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none; transition: opacity .2s;
}
.photo-spec {
  padding: 7px 12px; border: 1px solid #e9e9ed; border-radius: 99px;
  background: #ffffffe6; color: #55555d; font-size: .875rem; line-height: 1.4;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.photo-spec-price { color: #343438; font-weight: 600; letter-spacing: -.015em; }
.photo-viewer.is-zoomed .photo-viewer-specs { opacity: 0; }
.photo-viewer-zoom {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3; min-height: 44px; white-space: nowrap;
  background: #ffffffdb; border: 1px solid #ffffff;
  box-shadow: 0 5px 20px #14142610, 0 0 0 1px #00000006;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.photo-viewer-zoom:hover { background: #fff; }
.photo-viewer-zoom:active { transform: translateX(-50%) scale(.97); }
.photo-viewer-status { color: #45454c; background: #fffffff5; box-shadow: 0 8px 40px #17172914; border-radius: 18px; z-index: 4; }
.photo-viewer-footer { display: block; min-width: 0; border: 0; padding: 15px 34px 22px; background: #fff; }
.photo-gallery-caption { display: flex; justify-content: center; align-items: baseline; gap: 12px; color: #63636a; font-size: .875rem; line-height: 1.4; text-align: center; }
.photo-gallery-caption p { margin: 0; }
#photo-gallery-count { color: #74747a; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .75rem; }
.photo-gallery-thumbs { display: flex; gap: 9px; justify-content: flex-start; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 10px 3px 12px; scrollbar-width: thin; }
.photo-gallery-thumbs button:first-child { margin-left: auto; }
.photo-gallery-thumbs button:last-child { margin-right: auto; }
.photo-gallery-thumbs button {
  display: block; flex: 0 0 62px; width: 62px; height: 62px; padding: 7px;
  border: 1px solid #e5e5ea; border-radius: 15px; background: #fafafa;
  cursor: pointer; transition: border-color .18s, box-shadow .18s;
}
.photo-gallery-thumbs button[aria-pressed=true] { border-color: #6e6e78; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #b9b9c0; background: #fff; }
.photo-gallery-thumbs button:hover { border-color: #888891; }
.photo-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.photo-viewer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 10px; border-top: 1px solid #efeff2; }
.photo-viewer .photo-viewer-help { color: #63636a; font-size: .875rem; line-height: 1.5; }
.photo-viewer-original { color: #63636a; font-size: .875rem; gap: 5px; text-decoration: none; min-height: 36px; }
.photo-viewer-original:hover { text-decoration: underline; }
.photo-viewer-original svg { width: 14px; height: 14px; fill: none; }
.photo-viewer-detail { background: #1d1d1f; color: #fff; border-color: #1d1d1f; padding: 12px 19px; }
.photo-viewer-detail:hover { background: #343438; color: #fff; }
.photo-viewer [hidden] { display: none !important; }

/* The interactive detail view keeps the same white, neutral finish. */
.product-dialog { color-scheme: light; color: #1d1d1f; border-radius: 30px; box-shadow: 0 30px 100px #15152226; }
.product-dialog::backdrop { background: #e4e7eb96; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.product-dialog .dialog-header { padding: 18px 24px; border-color: #f0f0f3; background: #ffffffed; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.product-dialog .dialog-header #detail-viewer-name { font-size: 1rem; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; color: #1d1d1f; }
.product-dialog .dialog-header .icon-button { border: 0; background: #f3f3f5; border-radius: 50%; color: #44444c; }
.product-dialog .detail-media { background: #fff; padding: 22px; }
.product-dialog .visual-stage { border-radius: 24px; background: #fafafa; }
.product-dialog .visual-stage[data-mode=spin][data-surface=light] { background: #fafafa; }
.product-dialog .visual-stage model-viewer { --progress-bar-color: #8b8b96; }
.product-dialog .visual-controls { width: fit-content; max-width: 100%; margin: 16px auto 0; gap: 3px; padding: 5px; background: #f3f3f5; border: 1px solid #e9e9ed; border-radius: 19px; }
.product-dialog .visual-controls button { border: 0; border-radius: 13px; background: transparent; color: #45454d; font-size: .875rem; padding: 8px 10px; }
.product-dialog .visual-controls button:hover { background: #fff; }
.product-dialog .visual-controls button[aria-pressed=true] { background: #fff; color: #1d1d1f; box-shadow: 0 2px 8px #1212200d; }
.product-dialog .photo-thumbs { border-color: #efeff2; gap: 10px; }
.product-dialog .photo-thumbs button { border-color: #e5e5ea; background: #fafafa; border-radius: 14px; width: 60px; height: 60px; }
.product-dialog .photo-thumbs button:hover { border-color: #888891; }
.product-dialog .visual-caption { color: #6e6e77; font-size: .875rem; line-height: 1.5; }
.product-dialog .detail-info { padding: 30px; }
.product-dialog .detail-info h2 { color: #1d1d1f; font-size: 2rem; line-height: 1.15; letter-spacing: -.04em; }
.product-dialog .detail-info .eyebrow { color: #6e6e77; }
.product-dialog .detail-price { color: #1d1d1f; }
.product-dialog .detail-storage { color: #63636a; }
.product-dialog .detail-color-field select { border-color: #d2d2d7; border-radius: 13px; background: #fff; color: #1d1d1f; }
.product-dialog .detail-info .primary { background: #1d1d1f; border-color: #1d1d1f; color: #fff; border-radius: 99px; }
.product-dialog .detail-info .primary:hover { background: #343438; }
.product-dialog .detail-info .secondary { border-color: #d2d2d7; background: #fff; color: #1d1d1f; border-radius: 99px; }
.product-dialog .detail-tools button, .product-dialog .quantity-control { border-color: #e5e5ea; background: #f5f5f7; color: #44444d; border-radius: 13px; }
.product-dialog .detail-zoom { color: #343438; background: #f3f3f5; border: 1px solid #e9e9ed; border-radius: 99px; min-height: 44px; }
@keyframes viewer-appear { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 700px) {
  .photo-viewer { border: 0; border-radius: 0; }
  .photo-viewer-header { padding: max(18px, env(safe-area-inset-top)) 20px 17px; gap: 12px; }
  .photo-viewer .photo-viewer-title { font-size: 1.55rem; }
  .photo-viewer-stage { margin: 0 12px; border-radius: 23px; }
  .photo-viewer-canvas { padding: 56px 24px 72px; }
  .photo-viewer-specs { top: 13px; left: 13px; right: 13px; gap: 8px; }
  .photo-spec { font-size: .8125rem; padding: 7px 10px; }
  .photo-viewer-footer { padding: 12px 20px max(16px, env(safe-area-inset-bottom)); }
  .photo-gallery-caption { font-size: .8125rem; gap: 8px; }
  .photo-gallery-thumbs { padding-block: 10px 12px; gap: 10px; }
  .photo-gallery-thumbs button { width: 52px; height: 54px; flex-basis: 52px; padding: 6px; border-radius: 13px; }
  .photo-viewer-bottom { gap: 10px; padding-top: 9px; }
  .photo-viewer .photo-viewer-help { display: none; }
  .photo-viewer-original { font-size: .8125rem; min-height: 44px; }
  .photo-viewer-detail { font-size: .875rem; padding: 11px 15px; gap: 6px; }
  .photo-viewer-zoom { min-height: 42px; padding: 9px 15px; font-size: .8125rem; }
  .product-dialog .dialog-header { padding: 13px 18px; }
  .product-dialog .detail-media { padding: 14px; }
  .product-dialog .visual-stage { height: clamp(280px, 48dvh, 420px); border-radius: 22px; }
  .product-dialog .detail-info { padding: 24px; }
  .product-dialog .detail-info h2 { font-size: 1.875rem; }
  .product-dialog .visual-controls { margin-top: 14px; border-radius: 17px; padding: 4px; }
  .product-dialog .visual-controls button { padding: 8px; font-size: .8125rem; }
  .product-dialog .photo-thumbs button { width: 54px; height: 54px; }
}
@media (max-width: 380px) {
  .photo-viewer-header { padding-inline: 16px; }
  .photo-viewer .photo-viewer-title { font-size: 1.375rem; }
  .photo-viewer-footer { padding-inline: 16px; }
  .photo-viewer-detail { padding-inline: 12px; }
  .photo-viewer-canvas { padding-inline: 17px; }
}
@media (max-height: 560px) {
  .photo-viewer-header { padding-block: 10px; }
  .photo-viewer .photo-viewer-title { font-size: 1.25rem; }
  .photo-viewer-footer { padding-block: 8px; }
  .photo-viewer .photo-viewer-help { display: none; }
  .photo-gallery-thumbs { padding-block: 6px; }
  .photo-gallery-thumbs button { flex-basis: 44px; width: 44px; height: 44px; padding: 4px; }
  .photo-viewer-bottom { border: 0; padding-top: 3px; }
  .photo-viewer-canvas { padding-block: 44px 68px; }
}
@media (max-height: 560px) and (min-width: 520px) {
  .photo-viewer[open] { grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: auto minmax(0, 1fr); }
  .photo-viewer-header { grid-column: 1 / -1; }
  .photo-viewer-stage { grid-column: 1; grid-row: 2; margin: 0 0 12px 12px; }
  .photo-viewer-canvas { padding: 44px 20px 68px; }
  .photo-viewer-footer { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px 14px 16px; overflow-y: auto; }
  .photo-gallery-caption { flex-wrap: wrap; gap: 4px 8px; }
  .photo-gallery-thumbs { flex-shrink: 0; flex-wrap: wrap; overflow: visible; justify-content: center; padding: 3px; gap: 7px; }
  .photo-gallery-thumbs button:first-child, .photo-gallery-thumbs button:last-child { margin: 0; }
  .photo-viewer-bottom { flex-direction: column; gap: 6px; margin-top: auto; }
  .photo-viewer-detail { white-space: nowrap; font-size: .875rem; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-viewer[open] { animation: none; }
  .photo-viewer *, .photo-gallery-thumbs button { transition: none; }
}