@charset "utf-8";

.product-zoom__modal { inset: 0px; display: none; height: auto; margin: auto; position: fixed; transform: translateY(100%); transition: transform 0.25s ease-in-out; width: 95%; z-index: -10; }

.product-zoom__modal.is-active { align-items: center; display: flex; flex-direction: column; justify-content: center; pointer-events: none; z-index: 10; }

.product-zoom__modal.is-visible { transform: translateY(0px); }

.product-zoom__modal > * { background-color: var(--surface-primary); border-radius: 0.25rem; min-height: 50vh; overflow-y: scroll; pointer-events: auto; position: relative; width: 100%; z-index: 1; }

.product-zoom__modal > ::after { animation: 0.6s linear 0s infinite normal none running spinner; border-width: 0.125rem; border-style: solid; border-color: rgb(1, 12, 6) transparent transparent; border-image: initial; border-radius: 50%; content: ""; display: block; height: 2.5rem; left: 50%; margin-left: -1.25rem; margin-top: -1.25rem; position: absolute; top: 50%; width: 2.5rem; z-index: -1; }

.product-zoom__modal.is-active { display: flex !important; }

.product-zoom__modal img { height: 100%; object-fit: cover; width: 100%; }

.product-zoom__modal-btn { --border-radius: 50%; border-radius: var(--border-radius); float: right; margin-bottom: -100%; position: sticky; top: 0px; z-index: 2; }

.product-zoom__modal-btn::before { background-color: var(--surface-primary); border-radius: 50%; content: ""; height: 80%; position: absolute; width: 80%; }

.product-zoom__modal-btn.focus-visible { background-color: var(--surface-primary); border-radius: var(--border-radius,.125rem); box-shadow: rgb(24, 102, 255) 0px 0px 0px 0.125rem inset; }

@media only screen and (min-width: 48em) {
  .product-zoom__modal { max-height: 95vh; }
}