.product-dialog {
  position: fixed;
  inset: 0;
  width: min(100% - 24px, 520px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 19px 75px #0a1014c7;
}
.product-dialog[open] { animation: product-enter .25s cubic-bezier(.18,.68,.29,1) both; }
.product-dialog::backdrop { background: #100c09cc; backdrop-filter: blur(5px); }
@keyframes product-enter { from { transform: translateY(25px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.product-panel { position: relative; }
.product-close,.product-photo-control {
  display: grid;
  place-items: center;
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  font: 700 15px/1 var(--menu-font);
}
.product-close { position: absolute; top: 13px; left: 13px; z-index: 1; box-shadow: 0 2px 9px #11181e66; }
.product-close:hover,.product-photo-control:hover { background: var(--orange); border-color: var(--orange); color: #151d21; }
.product-gallery {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: 42px;
  min-height: 150px;
  background: linear-gradient(#100c0926 66%, var(--surface)), var(--marble-portrait) center / cover;
  touch-action: pan-y;
}
.product-image { display: block; width: 100%; max-width: 100%; height: clamp(244px, 69vw, 365px); max-height: 54dvh; object-fit: contain; padding: 6px 18px 11px; filter: drop-shadow(0 9px 8px #0a0f13ad); }
.product-image-note { padding: 0 18px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.product-image-empty { display: grid; place-items: center; min-height: 133px; text-align: center; padding: 25px 22px 22px; color: var(--muted); font-size: 14px; }
.product-photo-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 0 6px; color: #cad3d8; font-size: 13px; font-weight: 600; }
.product-photo-control { color: var(--orange-bright); }
.product-details { padding: 15px 21px max(23px,env(safe-area-inset-bottom)); }
.product-details h2 { font: 700 clamp(34px, 8vw, 46px)/1.05 var(--menu-font); overflow-wrap: anywhere; }
.product-description { color: var(--muted); margin-top: 9px; line-height: 1.5; font-size: 14px; }
.product-price { margin-top: 11px; color: var(--orange-bright); font-weight: 750; font-size: 19px; }
.product-dismiss { width: 100%; min-height: 46px; margin-top: 19px; border: 1px solid var(--orange-bright); border-radius: 7px; background: linear-gradient(108deg, var(--orange-bright), var(--orange)); color: #1d160f; font-size: 14px; font-weight: 750; cursor: pointer; }
.product-dismiss:hover { background: var(--orange-bright); }
body:has(.product-dialog[open]) { overflow: hidden; }
@media (max-width: 590px) {
  .product-dialog { inset: 0; width: 100%; height: 100dvh; max-width: 100%; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .product-panel { display: flex; flex-direction: column; min-height: 100%; }
  .product-close { top: max(13px,env(safe-area-inset-top)); }
  .product-gallery { padding-top: max(52px,env(safe-area-inset-top)); }
  .product-image { height: clamp(235px,77vw,420px); max-height: 60dvh; }
  .product-details { display: flex; flex: 1; flex-direction: column; padding-top: 20px; }
  .product-dismiss { margin-top: auto; }
  .product-details h2:last-of-type { margin-bottom: 18px; }
  .product-description,.product-price { margin-top: 0; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .product-dialog[open] { animation: none; } }