/* One clean surface for dialogs; scrolling remains available to touch and keyboard. */
dialog,dialog *{scrollbar-width:none;-ms-overflow-style:none}
dialog::-webkit-scrollbar,dialog *::-webkit-scrollbar{display:none;width:0;height:0}
dialog{max-height:90vh;max-height:90dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid #eedfe5;border-radius:24px;box-shadow:0 28px 100px #38232f30;background:#fff;scrollbar-gutter:auto}
dialog::backdrop{background:#38232f66;backdrop-filter:blur(6px)}
dialog[open]:not(.welcome-popup){animation:popup-arrive .45s cubic-bezier(.2,.7,.2,1) both}
dialog:not(.welcome-popup){padding:52px 36px 32px}
dialog .close{right:10px;top:8px;z-index:5}
dialog .button{border-radius:10px;min-height:46px}
dialog input,dialog select,dialog textarea{border-radius:9px;border-color:#e7d8df;background:#fff;max-width:100%}
dialog textarea{min-height:90px;resize:none}
dialog h2{overflow-wrap:anywhere}
dialog .detail-image{border-radius:14px;overflow:hidden}
dialog .form-row{min-width:0}
dialog .form-row>*{min-width:0}
dialog .product-preview-actions{gap:12px;padding-top:6px}
dialog .product-preview-actions>.underlink{margin-top:3px}
dialog .product-benefits{border-left:0;border-radius:12px;background:#fcf5f7}
dialog .product-preview-ingredients{border-bottom:0}
#detail:is(.treatment-carousel,.product-carousel){border-radius:24px}
html:has(dialog[open]){overflow:hidden}
@keyframes popup-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){dialog:not(.welcome-popup){width:calc(100% - 24px);padding:48px 22px 26px;max-height:calc(100dvh - 32px);border-radius:20px}#detail:is(.treatment-carousel,.product-carousel){border-radius:20px;padding:48px 20px 26px}dialog .form-row{gap:12px}dialog:not(.welcome-popup) h2{font-size:clamp(27px,7.5vw,34px);line-height:1.16}dialog .eyebrow{letter-spacing:1.6px}dialog .button{padding:13px 18px}}
@media(prefers-reduced-motion:reduce){dialog[open]:not(.welcome-popup){animation:none}}

/* Let the invitation lead; page motion starts only after it closes. */
html.treatment-refresh-pending body{visibility:hidden}
html.treatment-refresh-pending dialog.welcome-popup{visibility:visible}
html.welcome-pending .hero-image img{animation:none;transform:none;opacity:1}
@media(prefers-reduced-motion:no-preference){dialog.welcome-popup[open]{animation:welcome-priority .22s ease-out both}dialog.welcome-popup[open]::backdrop{animation:none}}
@keyframes welcome-priority{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.share-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}.share-actions input{width:100%;min-width:0;padding:10px;border:1px solid #e8dce0;border-radius:8px}.share-actions .small{font-size:12px}