.product-modal[hidden] { display: none; }
.product-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 50; }
.product-modal-backdrop { background: rgba(48, 37, 31, .68); inset: 0; position: absolute; }
.product-modal-dialog { background: var(--paper); box-shadow: 0 24px 70px rgba(48, 37, 31, .25); display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, .85fr); max-height: min(720px, calc(100vh - 40px)); max-width: 850px; overflow: auto; position: relative; width: 100%; }
.product-modal-image { aspect-ratio: 1 / 1; height: 100%; object-fit: cover; width: 100%; }
.product-modal-content { align-self: center; padding: clamp(28px, 5vw, 58px); }
.product-modal-content h2 { font-family: var(--serif); font-size: clamp(34px, 5vw, 58px); font-weight: 500; letter-spacing: -.06em; line-height: .92; margin: 0 0 18px; }
.product-modal-content p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.product-modal-price { color: var(--terracotta); display: block; font-family: var(--serif); font-size: 25px; margin: 24px 0; }
.product-modal-content .product-size-select { bottom: auto; left: auto; position: static; }
.product-modal-content [data-modal-size] { margin-bottom: 20px; }
.product-modal-content .button { justify-content: space-between; width: 100%; }
.product-modal-close { background: var(--paper); border: 1px solid var(--line); border-radius: 50%; color: var(--cacao); cursor: pointer; font-size: 25px; height: 38px; line-height: 1; position: absolute; right: 14px; top: 14px; width: 38px; z-index: 2; }
.modal-open { overflow: hidden; }
@media (max-width: 650px) { .product-modal-dialog { display: block; max-height: calc(100vh - 24px); } .product-modal-image { height: min(46vh, 360px); } .product-modal-content { padding: 28px 24px 30px; } }