/* Shared interaction and layout refinements. */
:root{color-scheme:dark;--focus:#24d3f2}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
html{scroll-padding-top:100px}
.skip-link{position:fixed;left:20px;top:-100px;z-index:200;padding:14px 20px;border-radius:8px;background:#f6f3ff;color:#0b0812!important;font:700 16px 'Space Grotesk',sans-serif}
.skip-link:focus{top:16px}
body.modal-open{overflow:hidden}
#cartdrawer,#mmenu{overscroll-behavior:contain}
#cartdrawer .lines{min-height:70px;overscroll-behavior:contain}
#cartdrawer .ft{max-height:55dvh;overflow:auto}
#toast{max-width:calc(100vw - 32px);white-space:normal;line-height:1.4;text-align:center}
#cartdrawer .q button:disabled{opacity:.35;cursor:default}
#cartdrawer .cart-progress{height:3px;background:#30253f;border-radius:3px;margin:10px 0}
#cartdrawer .cart-progress i{display:block;height:100%;background:#24d3f2;border-radius:3px}
#cartdrawer .cart-heading{display:flex;align-items:center;gap:10px}
.cart-heading small{font:500 11px 'JetBrains Mono',monospace;color:#a99fc4}
.store .pc{background:linear-gradient(150deg,#1b132b,#110d1b);border-radius:16px}
.store .pc .im{aspect-ratio:1.35}
.store .pc h3{font-size:17px;line-height:1.25}
.store .pc .sz{letter-spacing:.06em;min-height:29px}
.store .pc .cv{min-height:44px}
.store .pc .pr b{font-size:18px}
.store .pc .add{min-height:44px}
.shop-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;margin:38px 0 64px}
.shop-hero .ttl{font-size:clamp(32px,4.1vw,57px);max-width:none;line-height:1.08;letter-spacing:-.05em}
.shop-hero .lede{max-width:40ch;margin:24px 0 30px;line-height:1.65}
.shop-hero .btn{gap:36px;padding:18px 24px}
.shop-steps{display:flex;gap:18px;margin-top:40px;color:#b8adc9;font-size:11px}
.shop-steps b{display:block;color:#24d3f2;font:500 10px 'JetBrains Mono',monospace;margin-bottom:7px}
.shop-hero-art{position:relative;display:block;aspect-ratio:1.1;overflow:hidden;border-radius:24px;border:1px solid #483159;isolation:isolate;background:#1c1231;box-shadow:0 30px 90px -40px #7a2bc966}
.shop-hero-art img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.shop-hero-art:hover img{transform:scale(1.045)}
.shop-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#090511e8);z-index:0;pointer-events:none}
.art-tag{position:absolute;top:20px;left:20px;padding:8px 12px;background:#0b0812b8;backdrop-filter:blur(12px);border:1px solid #ffffff30;border-radius:30px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.art-caption{position:absolute;bottom:24px;left:24px;right:24px;z-index:1;display:flex;justify-content:space-between;align-items:end}
.art-caption small{display:block;color:#d2c6e6;font-size:12px;margin-bottom:5px}
.art-caption strong{font:900 clamp(24px,3vw,40px) 'Unbounded',sans-serif;text-transform:uppercase}
.art-arrow{border:1px solid #ffffff60;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:24px}
.shop-tools{border-top:1px solid #ffffff20;padding-top:30px}
.shop-search-row{display:grid;grid-template-columns:1fr 230px;gap:24px;align-items:end}
.shop-tools label{display:block;font:500 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:#b8adc9;margin-bottom:10px}
.search-field>div{position:relative}
.search-field svg{position:absolute;left:17px;top:16px;width:21px;height:21px;stroke:#a99fc4;stroke-width:1.5;fill:none;pointer-events:none}
.shop-tools input,.shop-tools select{border:1px solid #ffffff26;border-radius:10px;background:#171120;color:#f6f3ff;font:400 16px 'Space Grotesk',sans-serif;min-height:54px;width:100%;padding:14px 16px}
.shop-tools input{padding-left:50px}
.shop-tools input::placeholder{color:#a99fc4}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 18px}
.filter-chips button{padding:11px 15px;min-height:44px;border:1px solid #ffffff26;border-radius:30px;background:transparent;color:#c9bfd9;font:500 12px 'Space Grotesk',sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.filter-chips button:hover{border-color:#24d3f2}
.filter-chips button[aria-pressed=true]{background:#24d3f2;color:#0b0812;border-color:#24d3f2}
.results-meta{display:flex;justify-content:space-between;align-items:center;min-height:42px;color:#a99fc4;font-size:13px}
.results-meta p{margin:0}
.results-meta button{border:0;padding:10px 0;background:none;color:#f6f3ff;text-decoration:underline;cursor:pointer;font:inherit}
#shop-results{margin-top:16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shop-empty{text-align:center;padding:80px 24px;border:1px dashed #ffffff30;border-radius:20px;margin-top:24px}
.shop-empty>span{font-size:50px;color:#24d3f2}
.shop-empty h2{font-size:26px!important;margin-top:12px!important}
.shop-empty p{color:#a99fc4}
.finish-studio{display:grid;grid-template-columns:1.1fr 1fr;margin-top:36px;border:1px solid #ffffff26;border-radius:24px;overflow:hidden;background:#130e1e}
.finish-preview{position:relative;min-height:540px;overflow:hidden}
.finish-preview>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.finish-preview>span{position:absolute;bottom:16px;left:16px;right:16px;width:fit-content;padding:8px 12px;border-radius:8px;background:#0b0812c9;color:#e3d9f5;font:400 10px/1.5 'JetBrains Mono',monospace;backdrop-filter:blur(12px)}
.finish-controls{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.finish-controls h3{font-size:clamp(27px,3.5vw,42px);line-height:1.15}
#finish-recipe{color:#b8adc9;font-size:15px;min-height:48px;line-height:1.5}
.finish-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 24px}
.finish-picks button{padding:4px 4px 8px;border:1px solid #ffffff26;border-radius:9px;background:transparent;color:#c9bfd9;cursor:pointer;font:500 11px 'Space Grotesk',sans-serif;min-width:0}
.finish-picks img{width:100%;height:44px;object-fit:cover;border-radius:5px;margin-bottom:8px}
.finish-picks button[aria-pressed=true]{border-color:#24d3f2;background:#24d3f218;color:#fff;box-shadow:0 0 0 1px #24d3f2}
.finish-price{border-top:1px solid #ffffff20;padding:20px 0;display:flex;gap:16px;justify-content:space-between;align-items:start;font-size:14px}
.finish-price small{display:block;color:#a99fc4;font-size:11px;margin-top:6px;max-width:24ch}
.finish-price b{font:700 20px 'Space Grotesk',sans-serif;white-space:nowrap}
.finish-controls .btn{justify-content:space-between}
.finish-size{color:#c9bfd9;font-size:13px;text-align:center;padding:16px 0 0;text-decoration:underline}
.product-colors{display:flex;gap:9px;flex-wrap:wrap;margin:-2px 0 22px}
.product-colors button{border:2px solid transparent;padding:3px;background:transparent;border-radius:50%;cursor:pointer}
.product-colors button[aria-pressed=true]{border-color:#24d3f2}
.product-colors img{width:40px;height:40px;object-fit:cover;border-radius:50%}
#stage.has-frame .initial-poster{display:none}
@media(min-width:1600px){#shop-results{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.shop-hero{gap:28px}.shop-steps{gap:14px}#shop-results{grid-template-columns:repeat(2,minmax(0,1fr))}.finish-studio{grid-template-columns:1fr 1fr}.finish-preview{min-height:520px}}
@media(max-width:700px){.shop-hero{grid-template-columns:1fr;margin:24px 0 36px;gap:28px}.shop-hero .ttl{font-size:clamp(30px,7.5vw,46px)}.shop-hero .lede{margin:18px 0 24px}.shop-hero-art{aspect-ratio:1.6}.shop-steps{margin-top:26px;justify-content:space-between}.shop-search-row{grid-template-columns:1fr;gap:16px}.sort-field{display:flex;align-items:center;gap:16px}.sort-field label{margin:0;white-space:nowrap}.sort-field select{min-height:44px}.filter-chips{flex-wrap:nowrap;overflow-x:auto;padding:3px 2px 10px;margin-right:-20px;scrollbar-width:thin}.filter-chips button{flex-shrink:0}#shop-results{gap:14px}.store .pc .bd{padding:14px}.store .pc .pr{flex-wrap:wrap}.store .pc .pr b{font-size:16px}.store .pc h3{font-size:14px}.store .pc .sz{font-size:10px}.store .pc .cv{font-size:12px}.store .pc .add{width:100%;margin-top:5px}.finish-studio{grid-template-columns:1fr}.finish-preview{min-height:0;aspect-ratio:1.35}.finish-controls{padding:26px}.finish-picks img{height:54px}.finish-price small{max-width:none}.skip-film{bottom:24px;right:16px;padding:11px;font-size:10px}.readout .track{display:none}.readout{gap:10px;font-size:10px;letter-spacing:.1em}.shop-empty h2{font-size:22px!important}}
@media(max-width:370px){#shop-results{grid-template-columns:1fr}.shop-steps{gap:10px}.shop-hero .ttl{font-size:29px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.skip-film{display:none}}
.collection-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.collection-heading .t{font-size:clamp(30px,4vw,54px)}
.collection-heading .lede{font-size:18px;margin:0}
.collection-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.collection-links a{border-top:1px solid #ffffff30;padding:20px 0;color:#d8d0ee;font-size:14px;transition:color .2s}
.collection-links a:hover{color:#24d3f2}
.launch-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.launch-products .pc h3{font-size:16px;line-height:1.2}
.launch-products .pc .pr{flex-wrap:wrap}
.launch-products .pc .pr b{font-size:16px}
.launch-products .pc .pr .btn{min-height:44px}
.quote-buy h2{font-size:24px!important;line-height:1.3!important}
.quote-buy>p:not(.stock){color:#b8adc9;font-size:15px}
.pc[data-product="cosmic-epoxy-resin"] .pr b,.pc[data-product="cosmic-epoxy-hardener"] .pr b{font:700 16px 'Space Grotesk',sans-serif}
@media(max-width:1000px){.launch-products{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-heading{grid-template-columns:1fr;gap:20px}.collection-links{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.launch-products{grid-template-columns:1fr}.collection-links{gap:0 18px}.collection-links a{font-size:13px}.site-header .nav>.btn{display:none}}
.pc[data-product="cosmic-epoxy-resin"] .im img,.pc[data-product="cosmic-epoxy-hardener"] .im img{object-fit:contain}
[data-product-page="cosmic-epoxy-resin"] .gal .big img,[data-product-page="cosmic-epoxy-hardener"] .gal .big img{object-fit:contain}

/* Liquid Cosmos: a single, immediate cinematic opening. */
.cosmos-hero{isolation:isolate;position:relative;min-height:780px;height:100svh;max-height:1200px;overflow:hidden;background:#07060c;color:#f6f3ff}
.cosmos-media,.cosmos-shade{position:absolute;inset:0;pointer-events:none}
.cosmos-media{z-index:-3}
.cosmos-media img,.cosmos-media video{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0}
.cosmos-media video{opacity:0;transition:opacity 1s ease}
.cosmos-media.ready video{opacity:1}
.cosmos-shade{z-index:-2;background:linear-gradient(90deg,rgba(7,6,12,.45),rgba(7,6,12,.16) 44%,transparent 64%),linear-gradient(0deg,#0b0812,transparent 24%,transparent 85%,rgba(7,6,12,.35))}
.cosmos-copy{position:relative;width:min(1380px,100%);margin:0 auto;padding:clamp(160px,21vh,230px) clamp(24px,5.5vw,80px) 140px}
.cosmos-eyebrow{display:flex;align-items:center;gap:12px;font:500 10px/1.5 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.18em;color:#c8c1d5;margin:0 0 30px}
.cosmos-eyebrow>span{width:6px;height:6px;background:#ff7a1a;border-radius:50%;box-shadow:0 0 16px #ff7a1a}
#cosmos-title{font-size:clamp(48px,5.25vw,80px);line-height:1.04;letter-spacing:-.055em;max-width:12ch;text-transform:uppercase}
#cosmos-title em{color:#ff8a29;font-size:.64em;letter-spacing:-.035em;display:inline-block;margin-top:12px}
.cosmos-intro{font-size:clamp(16px,1.3vw,20px);line-height:1.65;color:#c6bfd2;margin:28px 0 28px;max-width:42ch}
.cosmos-actions{display:flex;align-items:center;gap:28px}
.cosmos-actions .btn{padding:19px 25px;border-radius:8px;gap:28px;font-size:14px;box-shadow:0 8px 36px -10px #ff7a1a55}
.cosmos-text-link{font:500 14px 'Space Grotesk',sans-serif;color:#e6dced;padding:12px 0;border-bottom:1px solid #ffffff45;display:inline-flex;align-items:center;gap:22px}
.cosmos-text-link:hover{color:#24d3f2;border-color:#24d3f2}
.cosmos-components{font:400 10px/1.8 'JetBrains Mono',monospace;color:#a59bae;letter-spacing:.02em;margin-top:30px}
.cosmos-bottom{position:absolute;bottom:30px;left:clamp(24px,5.5vw,80px);right:clamp(24px,5.5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:20px;font:400 10px/1.5 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#aaa0ba}
.cosmos-explore{display:flex;align-items:center;gap:16px;color:#d8d0e7}
.cosmos-explore>span{height:34px;width:34px;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;font-size:17px}
.cosmos-caption{display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:28px}
.cosmos-caption-dot{width:4px;height:4px;background:#24d3f2;border-radius:50%;box-shadow:0 0 10px #24d3f2}
.cosmos-caption-no{color:#635e6d;margin-left:18px}
#cosmos-motion{display:flex;align-items:center;gap:10px;border:1px solid #ffffff2b;background:#100b18a1;color:#c7bdd2;border-radius:30px;padding:10px 14px;min-height:44px;backdrop-filter:blur(8px);font:400 10px 'JetBrains Mono',monospace;cursor:pointer}
#cosmos-motion svg{height:16px;width:16px;stroke:currentColor;stroke-width:2;fill:none}
.cosmos-hero .cosmos-copy{animation:cosmos-enter 1s cubic-bezier(.16,1,.3,1) both}
@keyframes cosmos-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.cosmos-copy{padding-top:22vh}.cosmos-media img,.cosmos-media video{object-position:50% 56%}}
@media(max-width:1000px){.cosmos-hero{min-height:740px}.cosmos-copy{padding-top:22vh}.cosmos-media img,.cosmos-media video{object-position:57% center}.cosmos-caption{display:none}.cosmos-components{max-width:38ch}.cosmos-actions{gap:20px}.cosmos-shade{background:linear-gradient(90deg,#07060c99,transparent 85%),linear-gradient(0deg,#0b0812,transparent 60%)}}
@media(max-width:700px){.cosmos-hero{height:auto;min-height:850px;min-height:max(850px,100svh);max-height:none}.cosmos-media{height:64%;top:26px}.cosmos-media img,.cosmos-media video{object-position:76% center}.cosmos-shade{background:linear-gradient(0deg,#0b0812 0%,#0b0812 15%,rgba(11,8,18,.95) 30%,rgba(11,8,18,.50) 50%,transparent 72%)}.cosmos-copy{padding:370px 24px 130px;min-height:850px}.cosmos-eyebrow{font-size:8px;letter-spacing:.1em;margin:0 0 20px}#cosmos-title{font-size:clamp(42px,11vw,68px);line-height:1.02;max-width:none}#cosmos-title em{font-size:.65em;margin-top:8px;letter-spacing:-.05em}.cosmos-intro{font-size:15px;margin:22px 0;max-width:35ch}.cosmos-actions{gap:18px}.cosmos-actions .btn{padding:17px 18px;font-size:12px;gap:15px}.cosmos-text-link{font-size:12px;gap:8px}.cosmos-components{font-size:8px;max-width:none;line-height:1.8;margin-top:24px}.cosmos-bottom{left:24px;right:24px;bottom:22px;font-size:8px;letter-spacing:0}.cosmos-explore{gap:10px}#cosmos-motion{font-size:8px;gap:6px;padding:8px 10px}.cosmos-explore>span{width:28px;height:28px}.cosmos-hero .cosmos-copy{animation:none}}
@media(max-width:370px){.cosmos-copy{padding-left:18px;padding-right:18px}.cosmos-actions{gap:12px}.cosmos-actions .btn{padding:16px 12px;gap:10px}.cosmos-text-link{font-size:11px}.cosmos-bottom{left:18px;right:18px}}
@media(prefers-reduced-motion:reduce){.cosmos-copy{animation:none!important}.cosmos-media video{transition:none}}

/* Shared journey controls and resilient form layouts. */
.location-context{padding:18px;border:1px solid #6b567d;border-radius:12px;margin-bottom:22px;background:#1b1428;color:#f8f4ff}.location-context label{display:block!important;color:#e6ddec!important;font-size:14px!important}.location-context select{width:100%;min-height:48px;background:#100c18;border:1px solid #887698;border-radius:7px;color:#fff;padding:10px;font:16px 'Space Grotesk',sans-serif}.location-context a,.location-badge{color:#8ce8f5!important;text-decoration:underline;text-underline-offset:4px}.location-context .fine{color:#c5b8d2!important;font-size:14px!important}.location-retry{padding:12px;background:#ff873b;color:#160c05;border:0;border-radius:6px;font:inherit;min-height:44px}.form-focused #mbar{display:none!important}input,textarea,select{scroll-margin-block:110px}.qbox .done:focus{outline:3px solid #8ce8f5;outline-offset:6px}.qbox .done span{display:block}.cobox h2{font-size:23px;margin-bottom:12px}.location-badge{min-height:44px;display:inline-flex;align-items:center}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8ce8f5;outline-offset:4px}
@media(max-width:700px){.qbox input,.qbox textarea,.qbox select,.cobox input,.cobox select,.cobox textarea{font-size:16px}.cobox{min-width:0}.co{grid-template-columns:minmax(0,1fr)}.location-context{padding:14px}.form-focused .sh{position:relative}}
.store .location-context a,.store .fine a,.store .empty a,.store p a:not(.btn){text-decoration:underline;text-underline-offset:4px}

.catalog-failure{margin:24px auto;padding:22px;max-width:1000px;border:1px solid #fa9a71;background:#291524;color:#fff;border-radius:12px}.catalog-failure button{min-height:44px;padding:12px 20px;background:#ff873b;color:#190d07;border:0;border-radius:6px;font:inherit;cursor:pointer}

.request-summary{padding:14px;border-left:3px solid #ff873b;background:#241b30;color:#eee3fa;font-size:15px;line-height:1.5}.qbox .row:has(>[hidden]){grid-template-columns:1fr}
