/* Classic product lightbox: viewport sizing is independent of page layout margins. */
body#product #product-modal { padding: 12px !important; overflow: auto; }
body#product #product-modal .modal-dialog { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 !important; }
body#product #product-modal .modal-content { width: 100%; padding: 0 !important; border: 0; background: transparent; }
body#product #product-modal .modal-header { padding: 0 0 8px; border: 0; min-height: 36px; }
body#product #product-modal .close { float: right; opacity: 1; color: #fff; background: #232323; border-radius: 50%; width: 36px; height: 36px; line-height: 30px; font-size: 30px; text-shadow: none; }
body#product #product-modal .modal-body { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; justify-content: center; margin: 0 !important; padding: 0 !important; width: 100%; min-width: 0; }
body#product #product-modal .modal-body > figure { flex: 0 1 auto; width: fit-content; max-width: calc(100% - 120px); min-width: 0; margin: 0; text-align: center; }
body#product #product-modal .modal-body .product-cover-modal { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: calc(100vh - 140px) !important; max-height: calc(100dvh - 140px) !important; object-fit: contain; margin: 0 auto; }
body#product #product-modal .modal-body .image-caption { width: 100%; max-height: 68px; overflow: auto; padding: 0 !important; background: transparent !important; border: 0 !important; color: #fff; }
body#product #product-modal .modal-body .thumbnails { flex: 0 0 108px; width: 108px; min-width: 0; }
body#product #product-modal .modal-body .mask { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); margin: 0 !important; overflow: auto !important; }
body#product #product-modal .modal-body .product-images { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0; transform: none !important; }
body#product #product-modal .modal-body .product-images > li { display: block; width: 100%; margin: 0; }
body#product #product-modal .modal-body .product-images img { width: 100% !important; height: 96px !important; object-fit: contain; margin: 0; box-sizing: border-box; }
body#product #product-modal .modal-body .arrows { display: none !important; }
@media (max-width: 767px) {
 body#product #product-modal { padding: 8px !important; }
 body#product #product-modal .modal-body { flex-direction: column; gap: 8px; }
 body#product #product-modal .modal-body > figure { flex: none; width: 100%; max-width: 100%; }
 body#product #product-modal .modal-body .product-cover-modal { max-height: calc(100vh - 210px) !important; max-height: calc(100dvh - 210px) !important; }
 body#product #product-modal .modal-body .thumbnails { flex: none; width: 100%; max-width: 100%; }
 body#product #product-modal .modal-body .mask { max-height: 82px; }
 body#product #product-modal .modal-body .product-images { flex-direction: row; width: max-content; }
 body#product #product-modal .modal-body .product-images > li { width: 72px; flex: 0 0 72px; }
 body#product #product-modal .modal-body .product-images img { height: 72px !important; }
}

/* Classic renders an empty caption even when no description is available. */
body#product #product-modal .image-caption:empty,
body#product #product-modal .image-caption:has(> p:only-child:empty) { display: none; }

/* Available even when the native template has no modal header. */
body#product #product-modal .lbpd-gallery-close { position: fixed; top: 12px; left: 12px; right: auto; z-index: 2; width: 44px; height: 44px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #232323; color: #fff; font: 32px/38px Arial,sans-serif; cursor: pointer; box-shadow: 0 2px 8px #0006; }
body#product #product-modal .lbpd-gallery-close:focus-visible { outline: 3px solid #24b9d7; outline-offset: 3px; }