.store-opening-test-page { min-height: 78vh; padding-top: 58px; padding-bottom: 96px; }
.store-opening-test-head { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.store-opening-test-head > span { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: #edf6cf; color: #647d25; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.store-opening-test-head h1 { margin: 17px 0 13px; font-size: clamp(35px, 5vw, 55px); font-weight: 400; line-height: 1.03; }
.store-opening-test-head p { max-width: 640px; margin: 0 auto; color: #6c7473; font-size: 15px; line-height: 1.6; }
.store-opening-test-product { max-width: 850px; margin: 0 auto; overflow: hidden; display: grid; grid-template-columns: minmax(280px, .9fr) minmax(330px, 1.1fr); border: 1px solid #e5e5e1; border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgba(42,51,52,.1); }
.store-opening-test-image { min-height: 480px; position: relative; overflow: hidden; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 72% 25%, rgba(255,255,255,.85), transparent 19%), linear-gradient(145deg, #dfe9ef 0%, #f1e7e8 48%, #e5efc6 100%); }
.store-opening-test-image::before, .store-opening-test-image::after { content: ''; position: absolute; border-radius: 50%; }
.store-opening-test-image::before { width: 250px; height: 250px; left: -120px; bottom: -100px; border: 38px solid rgba(49,158,206,.16); }
.store-opening-test-image::after { width: 180px; height: 180px; top: -90px; right: -80px; background: rgba(239,126,129,.18); }
.store-opening-test-image span { position: relative; z-index: 1; color: #34383a; font-size: 54px; font-weight: 700; letter-spacing: -.055em; }
.store-opening-test-image small { position: relative; z-index: 1; color: #5d6969; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; }
.store-opening-test-copy { padding: 52px 48px; display: flex; justify-content: center; flex-direction: column; }
.store-opening-test-label { margin: 0 0 8px; color: #778092; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.store-opening-test-copy h2 { margin: 0 0 15px; font-size: 34px; font-weight: 400; line-height: 1.08; }
.store-opening-test-price { margin-bottom: 30px; font-size: 23px; font-weight: 400; }
.store-opening-test-copy fieldset { margin: 0 0 24px; padding: 0; border: 0; }
.store-opening-test-copy legend { margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.store-opening-test-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.store-opening-test-sizes input { position: absolute; opacity: 0; pointer-events: none; }
.store-opening-test-sizes span { min-width: 54px; min-height: 43px; padding: 8px 11px; display: grid; place-items: center; border: 1px solid #d8d7d3; border-radius: 8px; cursor: pointer; transition: border-color .2s, background .2s; }
.store-opening-test-sizes input:checked + span { border-color: #319ece; background: #eef8fc; box-shadow: inset 0 0 0 1px #319ece; }
.store-opening-test-sizes input:focus-visible + span { outline: 3px solid rgba(49,158,206,.28); }
.store-opening-test-copy .add-cart-button { width: min(330px, 100%); }
.store-opening-test-copy [data-product-error], .store-opening-test-copy [data-product-success] { min-height: 0; margin: 0; }
.store-opening-dialog { width: min(560px, calc(100% - 32px)); max-width: none; margin: auto; padding: 0; position: fixed; inset: 0; overflow: visible; border: 0; border-radius: 28px; background: transparent; color: var(--ink, #34383a); }
.store-opening-dialog::backdrop { background: rgba(31, 38, 40, .72); backdrop-filter: blur(8px); animation: storeOpeningBackdropIn .35s ease both; }
.store-opening-dialog[open] { animation: storeOpeningDialogIn .58s cubic-bezier(.18,.86,.28,1.08) both; }
.store-opening-card { min-height: 430px; padding: 48px 52px 45px; position: relative; overflow: hidden; display: flex; align-items: center; flex-direction: column; text-align: center; border: 1px solid rgba(255,255,255,.72); border-radius: 28px; background: radial-gradient(circle at 50% -5%, rgba(173,210,82,.26), transparent 34%), linear-gradient(145deg, #fff 0%, #fbfcf7 58%, #f1f7df 100%); box-shadow: 0 30px 90px rgba(19,27,28,.28); }
.store-opening-card::before, .store-opening-card::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.store-opening-card::before { width: 230px; height: 230px; right: -130px; bottom: -118px; border: 38px solid rgba(49,158,206,.09); }
.store-opening-card::after { width: 110px; height: 110px; top: 28px; left: -70px; background: rgba(239,126,129,.1); }
.store-opening-close { width: 40px; height: 40px; padding: 0; position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; border: 1px solid rgba(49,56,58,.12); border-radius: 50%; background: rgba(255,255,255,.74); color: #555e5f; font: 300 25px/1 Arial, sans-serif; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.store-opening-close:hover { transform: rotate(7deg) scale(1.05); background: #fff; }
.store-opening-close:focus-visible { outline: 3px solid rgba(49,158,206,.3); outline-offset: 3px; }
.store-opening-date { width: 132px; height: 132px; margin: 0 auto 24px; position: relative; display: grid; place-content: center; border-radius: 50%; background: linear-gradient(145deg, var(--lime, #add252), #c7df79); color: #35403b; box-shadow: 0 18px 38px rgba(125,157,48,.24); animation: storeOpeningDateFloat 3.4s ease-in-out infinite; }
.store-opening-date::before { content: ''; position: absolute; inset: -9px; border: 1px solid rgba(125,157,48,.27); border-radius: 50%; animation: storeOpeningRing 2.4s ease-out infinite; }
.store-opening-date span { font-size: 53px; font-weight: 700; line-height: .82; letter-spacing: -.05em; }
.store-opening-date small { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.store-opening-date i { width: 9px; height: 9px; position: absolute; border-radius: 50%; background: var(--blue, #319ece); box-shadow: 0 0 0 5px rgba(49,158,206,.11); animation: storeOpeningSpark 2.3s ease-in-out infinite; }
.store-opening-date i:nth-child(1) { top: 8px; right: -12px; }
.store-opening-date i:nth-child(2) { bottom: 12px; left: -15px; background: var(--pink, #ef7e81); animation-delay: -.8s; }
.store-opening-date i:nth-child(3) { right: -2px; bottom: -12px; width: 6px; height: 6px; background: var(--orange, #f48e3e); animation-delay: -1.5s; }
.store-opening-kicker { margin: 0 0 10px; color: #7b982f; font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.store-opening-card h2 { max-width: 410px; margin: 0; font-size: clamp(30px, 5vw, 43px); font-weight: 400; line-height: 1.04; letter-spacing: -.025em; }
.store-opening-card > p:not(.store-opening-kicker) { max-width: 410px; margin: 19px 0 27px; color: #626b69; font-size: 16px; line-height: 1.55; }
.store-opening-card > p strong { color: #343c3b; }
.store-opening-continue { min-width: 230px; position: relative; z-index: 1; border-color: #343c3b; background: #343c3b; color: #fff; }
.store-opening-dialog-visible { overflow: hidden; }
@keyframes storeOpeningBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes storeOpeningDialogIn { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes storeOpeningDateFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes storeOpeningRing { 0% { opacity: .5; transform: scale(.94); } 75%, 100% { opacity: 0; transform: scale(1.16); } }
@keyframes storeOpeningSpark { 0%, 100% { opacity: .55; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.12); } }
@media (max-width: 560px) {
    .store-opening-test-page { padding-top: 34px; padding-bottom: 72px; }
    .store-opening-test-head { margin-bottom: 26px; text-align: left; }
    .store-opening-test-head h1 { font-size: 38px; }
    .store-opening-test-product { grid-template-columns: 1fr; border-radius: 20px; }
    .store-opening-test-image { min-height: 260px; }
    .store-opening-test-copy { padding: 31px 24px 34px; }
    .store-opening-test-copy h2 { font-size: 29px; }
    .store-opening-dialog { width: calc(100% - 24px); }
    .store-opening-card { min-height: 0; padding: 42px 25px 34px; border-radius: 23px; }
    .store-opening-date { width: 112px; height: 112px; margin-bottom: 22px; }
    .store-opening-date span { font-size: 46px; }
    .store-opening-card h2 { font-size: 32px; }
    .store-opening-card > p:not(.store-opening-kicker) { font-size: 15px; }
    .store-opening-continue { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .store-opening-dialog::backdrop, .store-opening-dialog[open], .store-opening-date, .store-opening-date::before, .store-opening-date i { animation: none; }
    .store-opening-close { transition: none; }
}