/* Store design, template onboarding, and shared storefront components. */
.studio-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.signup-studio{max-width:1390px;margin:auto;padding:0 clamp(20px,5vw,72px) 70px;color:#102c40}
.signup-studio h1,.signup-studio h2{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.055em}
.signup-header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;gap:14px}
.signup-header .logo{width:165px}
.signup-header>a:not(.logo){font-size:.85rem;font-weight:700}
.signup-hero{background:radial-gradient(ellipse at 87% 8%,#17646a,transparent 53%),#0f2c42;color:#fff;padding:clamp(34px,6vw,78px);border-radius:26px;margin:12px 0 36px}
.signup-hero .eyebrow{color:#a6ebe5}
.signup-hero h1{font-size:clamp(2.55rem,7vw,6.3rem);line-height:.96;max-width:870px;margin:.18em 0}
.signup-hero p{color:#e2edf2;font-size:clamp(1rem,2vw,1.25rem);margin:.9em 0 0}
.signup-templates h2,.signup-details h2{font-size:clamp(1.8rem,4vw,2.75rem);margin:.3em 0}
.signup-templates>p{max-width:690px;margin:5px 0 22px}
.signup-templates fieldset{padding:0;margin:0;border:0;min-width:0}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.template-card{background:#fff;border:1px solid #cfdde6;border-radius:16px;overflow:hidden;position:relative;transition:box-shadow .2s,border-color .2s}
.template-card:hover,.template-card:has(input:checked){border-color:#14827b;box-shadow:0 0 0 2px #14827b}
.template-card input{position:absolute;z-index:1;right:12px;top:12px;width:22px;height:22px;accent-color:#15746d;margin:0}
.template-card label{display:block;cursor:pointer}
.template-card img{display:block;width:100%;height:auto;aspect-ratio:1.85;object-fit:cover}
.template-card label span{display:grid;gap:7px;padding:16px 17px 10px}
.template-card strong{font-size:1.16rem;letter-spacing:-.02em}
.template-card small{font-size:.84rem;line-height:1.44;color:#4a6070;min-height:2.9em}
.template-card a{display:inline-block;color:#12665f;padding:0 17px 16px;text-decoration:underline;font-weight:700;font-size:.79rem}
.signup-details{max-width:820px;margin:30px auto 0;border:1px solid #d8e3eb;background:white;border-radius:19px;padding:clamp(20px,4vw,40px)}
.signup-details .form-grid{margin:22px 0}
.example-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding:10px clamp(14px,5vw,60px);background:#102d40;color:white;font:600 .86rem/1.4 Arial,sans-serif}
.example-toolbar>a:first-child{text-decoration:underline}
.store-studio{--studio-line:#d8e3e9;--studio-dark:#102c40;--studio-paper:#eff5f8;display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:560px;height:100dvh;background:var(--studio-paper);color:var(--studio-dark);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.studio-toolbar{display:grid;grid-template-columns:minmax(125px,1fr) auto minmax(125px,1fr);align-items:center;gap:12px;background:#102c40;color:white;padding:10px 16px}
.studio-toolbar-home,.studio-toolbar-actions,.studio-view-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.studio-toolbar-home{gap:10px;flex-wrap:nowrap}
.studio-toolbar-home .logo{display:block;flex:0 0 100px;padding:5px 8px;border-radius:8px;background:#f1f7fa}
.studio-toolbar-home .logo img{width:100%;height:auto;display:block}
.studio-toolbar-home strong,.studio-toolbar-home small{display:block;overflow-wrap:anywhere}
.studio-toolbar-home small{color:#b5d7df;font-size:.72rem;margin-top:3px}
.studio-toolbar-actions{justify-content:flex-end}
.studio-toolbar .btn,.studio-notice .btn{white-space:nowrap;padding:7px 10px;font-size:.74rem}
.studio-toolbar .btn.outline{color:#d3e8ef;border-color:#597584;background:transparent}
.studio-toolbar .btn.outline:hover{background:#23485c}
.studio-toolbar .btn:not(.outline){background:#a9e5cc;border-color:#a9e5cc;color:#102f36}
.studio-toolbar button:disabled{opacity:.35}
.studio-notice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 16px;background:white;border-bottom:1px solid var(--studio-line);font-size:.79rem}
.studio-notice #studio-status{margin-left:auto;font-weight:700}
.studio-notice [hidden]{display:none}
.studio-workbench{display:grid;grid-template-columns:minmax(245px,318px) minmax(0,1fr);min-height:0}
#studio-inspector{background:white;overflow:auto;border-right:1px solid var(--studio-line);overscroll-behavior:contain}
.studio-inspector-inner{padding:14px}
.studio-label{color:#34716e;text-transform:uppercase;font-weight:800;font-size:.66rem;letter-spacing:.175em}
.studio-template-name{color:#102c40;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:4px;font-weight:700;font-size:.88rem;margin:7px 0 13px}
.studio-template-name span{font-weight:700;background:#e6f3f0;color:#185851;border-radius:20px;font-size:.64rem;padding:4px 8px}
.studio-global{display:grid;gap:4px;margin-bottom:10px}
.studio-layer{display:flex;align-items:center;text-align:left;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid transparent;background:transparent;color:#29465b;width:100%;font-size:.83rem;min-height:32px;line-height:1.3}
.studio-layer span[aria-hidden]{font-size:1rem;color:#387772;flex:none}
.studio-layer:hover,.studio-layer.selected{color:#103d3a;background:#e7f4f0;border-color:#c0e1d8}
.studio-layer small{display:block;color:#556a77;margin-top:4px}
.studio-layers{border:1px solid var(--studio-line);padding:9px;border-radius:10px;margin-bottom:15px}
.studio-layers summary,.studio-pairs legend,.studio-fields summary,.product-gallery-editor summary{font-size:.8rem;font-weight:700;cursor:pointer;margin-bottom:6px;color:#1a4055}
.studio-layers summary{padding:2px 0}
.studio-layers .field{margin:7px 0 0}
.studio-fields{border-top:1px solid var(--studio-line);padding-top:12px}
.studio-fields h2{font:700 1.22rem/1.15 Arial,Helvetica,sans-serif;color:#102c40;letter-spacing:-.02em;margin:0 0 10px}
.studio-fields h2:focus{outline:none}
.studio-fields .field,.studio-layers .field{font-size:.74rem;margin-bottom:10px}
.studio-fields .field input,.studio-fields .field select,.studio-fields .field textarea,.studio-layers select{width:100%;min-width:0;border:1px solid #bfcfd8;background:#fbfdfe;border-radius:7px;font-size:.81rem;padding:8px;min-height:34px;margin:3px 0 0}
.studio-fields .field input[type=color]{padding:4px 6px;height:35px}
.studio-section-actions{display:flex;flex-wrap:wrap;margin:0 0 11px;gap:5px}
.studio-fields .btn,.studio-layers .btn{padding:6px 8px;font-size:.72rem}
.studio-section-actions button:disabled{opacity:.4}
.studio-media-field{margin-bottom:11px}
.studio-media-field .field{margin-bottom:4px}
.studio-upload{display:inline-block;max-width:100%;font-size:.72rem;color:#335f71}
.studio-upload input{display:block;max-width:100%;font:inherit;margin-top:2px}
.studio-pairs fieldset{border:1px solid var(--studio-line);padding:8px;margin:6px 0 10px;border-radius:10px;min-width:0}
.studio-stage{display:flex;justify-content:center;min-width:0;min-height:0;overflow:auto;padding:12px;background:#dbe5ea}
.studio-stage iframe{background:white;width:100%;height:100%;min-height:0;border:0;border-radius:10px;box-shadow:0 3px 15px #102c402e}
[data-viewport=tablet] .studio-stage iframe{width:min(100%,768px)}
[data-viewport=phone] .studio-stage iframe{width:min(100%,390px)}
.studio-preview-only .studio-workbench{grid-template-columns:minmax(0,1fr)}
.studio-preview-only #studio-inspector{display:none}
.studio-preview-only[data-viewport=desktop] .studio-stage{padding:0}
.studio-preview-only[data-viewport=desktop] iframe{border-radius:0}
.store-canvas-page{background:white}
.store-canvas-page [data-edit]{cursor:crosshair;outline-offset:-3px}
.store-canvas-page [data-edit]:hover,.store-canvas-page [data-edit]:focus-visible{outline:2px dashed #13a999}
.store-canvas-page [data-edit].canvas-selected{outline:3px solid #17a694;outline-offset:-3px}
.store-canvas-page [data-edit] a,.store-canvas-page [data-edit] button{cursor:crosshair}
.media-card video,.product-showcase video,.section-video video{width:100%;display:block;background:#141414;border-radius:12px}
.product-showcase>img{width:100%;border-radius:12px;aspect-ratio:1;object-fit:cover}
.product-showcase video{margin-top:12px;max-height:360px}
.product-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.product-thumbs button{padding:2px;border:1px solid #ccd9dd;background:white;border-radius:7px}
.product-thumbs img{display:block;width:48px;height:48px;object-fit:cover;border-radius:5px}
.product-gallery-editor{border:1px solid #d6e2e6;border-radius:10px;padding:10px;margin-bottom:12px}
.product-video-mark{position:absolute;right:8px;bottom:8px;border-radius:16px;background:#162637d6;color:#fff;font-size:.65rem;padding:5px 8px}
.store .product-card .picture{position:relative}
.store .store-hero.no-hero-image{grid-template-columns:1fr}
.store.minimal .store-hero{grid-template-columns:1fr}
.store.minimal .store-hero img{display:block;max-height:330px}
.store.market .store-hero{background:color-mix(in srgb,var(--accent) 10%,var(--bg));margin:20px 5% 0;border-radius:20px;overflow:hidden;min-height:380px;grid-template-columns:1.05fr .95fr}
.store.market .store-hero h1,.store.runway .store-hero h1{font-weight:800}
.store.market .store-hero img{height:100%}
.store.runway .store-hero{grid-template-columns:.9fr 1.1fr}
.store.runway .store-hero-copy{background:var(--ink);color:var(--bg);height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.store.runway .store-hero p{color:inherit}
.store.boutique .store-hero{padding:clamp(16px,4vw,52px) 5%;align-items:center;grid-template-columns:.9fr 1.1fr}
.store.boutique .store-hero img{border-radius:48% 48% 14px 14px;height:auto;aspect-ratio:1.18}
.store.boutique .store-hero-copy{padding:25px}
.store .store-hero.no-hero-image{grid-template-columns:1fr}
.store.header-centered .store-nav{flex-direction:column;gap:8px}
.store.grid-compact .product-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))}
.store.grid-large .product-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr))}
.store-section{padding:clamp(30px,5vw,72px) 5%;scroll-margin-top:14px}
.store-section h2{font-size:clamp(1.7rem,4vw,3.3rem);line-height:1;margin-bottom:12px}
.store-section p{line-height:1.7;margin:10px 0 18px}
.store-section.align-center{text-align:center}
.store-section.align-right{text-align:right}
.store-section.tone-soft,.section-benefits,.section-promo{background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
.store-section.tone-accent{background:var(--accent);color:white}
.store-section.tone-accent .store-btn{background:white;color:var(--accent)}
.section-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,6vw,75px);align-items:center}
.section-split>img{width:100%;max-height:450px;object-fit:cover;border-radius:15px}
.section-gallery,.section-category-grid,.section-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;background:transparent;padding:0}
.section-gallery img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:12px}
.section-category-grid button{display:grid;text-align:left;gap:5px;padding:14px;color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,var(--bg));border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:11px}
.section-category-grid button:hover{background:color-mix(in srgb,var(--accent) 21%,var(--bg))}
.section-category-grid span{justify-self:end}
.section-benefits article{padding:18px;border:1px solid color-mix(in srgb,var(--ink) 21%,transparent);border-radius:12px}
.section-benefits article h3{margin:0;font-size:1.2rem}
.section-benefits article p{margin-bottom:0}
.section-questions details{border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);padding:14px 0}
.section-questions summary{font-weight:bold;cursor:pointer}
.section-video video{width:min(100%,850px);max-height:560px}
.section-video.align-center video{margin-inline:auto}
.section-video.align-right video{margin-left:auto}
.section-placeholder{min-height:130px;border:1px dashed currentColor;padding:30px;display:grid;place-items:center}
.store-section .store-btn{margin-top:8px}
@media(max-width:1050px){
 .studio-toolbar{grid-template-columns:minmax(120px,1fr) auto}
 .studio-view-tools{grid-column:2;grid-row:1}
 .studio-toolbar-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:760px){
 .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .store.market .store-hero,.store.runway .store-hero,.store.boutique .store-hero,.section-split{grid-template-columns:1fr;min-height:0}
 .store.market .store-hero{margin-top:12px}
 .store.boutique .store-hero img{max-height:340px}
 .studio-workbench{grid-template-columns:1fr;grid-template-rows:minmax(180px,47%) minmax(0,1fr)}
 #studio-inspector{grid-row:2;border-top:1px solid var(--studio-line);border-right:0}
 .studio-stage{grid-row:1;padding:5px}
 .studio-preview-only .studio-workbench{grid-template-rows:minmax(0,1fr)}
 .studio-toolbar-home .logo{flex-basis:65px}
 .studio-toolbar-home strong{font-size:.81rem}
 .studio-toolbar .btn{font-size:.68rem;padding:6px 7px}
 .studio-notice{font-size:.7rem}
}
@media(max-width:425px){
 .signup-header .logo{width:110px}
 .signup-header>a:not(.logo){font-size:.7rem}
 .template-grid{gap:10px}
 .template-card label span{padding:12px 10px 8px}
 .template-card strong{font-size:.94rem}
 .template-card small,.template-card a{font-size:.72rem}
 .template-card a{padding:0 10px 10px}
 .studio-toolbar{padding:8px}
}