/* Listing detail media must stay inside its own grid cell. */
#modal { box-sizing:border-box; overflow-x:hidden; overscroll-behavior:contain; }
body:has(#modal[open]) { overflow:hidden; }
#modal .close { position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; padding:0; display:grid; place-items:center; }
#modal:has(.modal-photo) { width:min(1080px,calc(100vw - 40px)); max-height:calc(100dvh - 48px); padding:32px; }
#modal:has(.modal-photo) #modal-body { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px 32px; align-items:start; }
#modal:has(.modal-photo) #modal-body > * { min-width:0; margin:0; overflow-wrap:anywhere; }
#modal:has(.modal-photo) .eyebrow { grid-column:1/-1; padding-right:44px; color:#687892; font-size:10px; line-height:1.7; letter-spacing:1.2px; }
#modal .modal-photo { grid-column:1; grid-row:2/7; width:100%; height:auto; aspect-ratio:4/3; margin:0; border-radius:14px; overflow:hidden; background:#f0f3f8; display:grid; place-items:center; }
#modal .modal-photo img, #modal .modal-photo svg, #modal .modal-photo .illustration { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
#modal:has(.modal-photo) h2 { grid-column:2; font-size:30px; line-height:1.15; letter-spacing:-.8px; color:#1a2742; }
#modal:has(.modal-photo) #modal-body > p:not(.demo), #modal:has(.modal-photo) .detail-specs, #modal:has(.modal-photo) .modal-actions { grid-column:2; }
#modal:has(.modal-photo) #modal-body > p { font-size:14px; line-height:1.75; color:#58687e; }
#modal:has(.modal-photo) h2 + p { padding:16px 0; border-top:1px solid #e5eaf2; border-bottom:1px solid #e5eaf2; }
#modal:has(.modal-photo) .detail-specs { display:grid; gap:8px; padding:16px; background:#f5f7fb; border:1px solid #e8edf4; border-radius:10px; font-size:13px; line-height:1.6; color:#41516a; }
#modal:has(.modal-photo) .modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#modal:has(.modal-photo) .modal-actions .btn { min-height:44px; font-size:13px; padding:12px; border-radius:8px; }
#modal:has(.modal-photo) .modal-actions .btn:first-child { grid-column:1/-1; }
#modal:has(.modal-photo) #modal-body > .demo { grid-column:1/-1; margin-top:6px; padding-top:16px; border-top:1px solid #e5eaf2; font-size:11px; line-height:1.6; color:#77849a; }
.product-layout > *, .buy-box { min-width:0; }
.product-visual img, .product-visual svg { max-width:100%; object-fit:contain; }
@media(max-width:700px) {
  #modal:has(.modal-photo) { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); padding:22px 18px; border-radius:14px; }
  #modal:has(.modal-photo) #modal-body { grid-template-columns:minmax(0,1fr); gap:16px; }
  #modal:has(.modal-photo) #modal-body > *, #modal .modal-photo { grid-column:1; grid-row:auto; }
  #modal:has(.modal-photo) h2 { font-size:26px; }
  #modal:has(.modal-photo) #modal-body > p:not(.demo), #modal:has(.modal-photo) .detail-specs, #modal:has(.modal-photo) .modal-actions { grid-column:1; }
  #modal .close { top:12px; right:12px; }
}