/* App pages fit the window; long content scrolls in its own accessible region. */
html:has(body[data-viewport-fit]){height:100%;overflow:hidden}
body[data-viewport-fit]{height:100vh;height:100dvh;min-height:0;margin:0;overflow:hidden;display:flex;flex-direction:column}
body[data-viewport-fit]>.public-header{flex-shrink:0}
body[data-viewport-fit]>.legal-strip,body[data-viewport-fit]>.samples-footer{flex-shrink:0;width:100%;margin:0;box-sizing:border-box;padding:10px 18px;gap:12px}
body[data-viewport-fit]>.store-page,body[data-viewport-fit]>.samples-main{flex:1;min-height:0;width:100%;box-sizing:border-box;margin:0 auto;padding:24px;display:flex;flex-direction:column;overflow:hidden}
body[data-viewport-fit] .store-page>h1{font-size:clamp(30px,4vw,56px);margin-bottom:12px}
body[data-viewport-fit] .store-intro{font-size:15px;margin-bottom:16px}
body[data-viewport-fit] .store-filters{margin-bottom:14px}
body[data-viewport-fit] .store-status:empty{display:none}
body[data-viewport-fit] .store-grid,body[data-viewport-fit] .samples-grid{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;align-content:start;padding:4px 6px 8px 4px}
body[data-viewport-fit] .store-grid{gap:24px}
body[data-viewport-fit] .store-product-image{height:clamp(100px,25dvh,320px);aspect-ratio:auto}
body[data-viewport-fit] .store-product-body{padding-top:14px}
body[data-viewport-fit] .store-note{margin:12px 0 0}
body[data-viewport-fit] .samples-heading{margin-bottom:14px}
body[data-viewport-fit] #sampleStatus{margin:10px 0 8px}
body[data-viewport-fit] .samples-more{margin-top:8px;flex-shrink:0}
body[data-viewport-fit] .samples-footer{font-size:11px}
body[data-viewport-fit] .samples-footer nav{gap:12px;flex-wrap:wrap}
body[data-viewport-fit] .store-grid:focus-visible,body[data-viewport-fit] .samples-grid:focus-visible{outline:2px solid var(--brand-accent);outline-offset:-2px}

/* Studio uses the actual measured header/toolbars at every window size. */
body[data-viewport-fit][data-studio-flow]{display:block}
body[data-viewport-fit][data-studio-flow] .app{height:calc(100dvh - var(--studio-header-height,124px) - var(--studio-toolbar-height,88px));min-height:0}
body[data-viewport-fit][data-studio-flow] .stage{height:100%;min-height:0;overflow:hidden;box-sizing:border-box;padding:8px 12px;gap:8px}
body[data-viewport-fit][data-studio-flow] .canvas-wrap{width:min(100%,calc(100dvh - var(--studio-header-height,124px) - var(--studio-toolbar-height,88px) - 72px));max-width:100%;min-height:0;flex-shrink:1}
body[data-viewport-fit][data-studio-flow] #view{width:100%;height:auto;max-height:calc(100dvh - var(--studio-header-height,124px) - var(--studio-toolbar-height,88px) - 72px)}
body[data-viewport-fit][data-studio-flow] .rail{min-height:0}
body[data-viewport-fit][data-studio-flow] .studio-toolbar{margin:0 12px 0 222px;flex-shrink:0}
body[data-viewport-fit][data-studio-flow] .ctrl{top:calc(var(--studio-header-height,124px) + 8px);bottom:calc(var(--studio-toolbar-height,88px) + 8px);max-height:calc(100dvh - var(--studio-header-height,124px) - var(--studio-toolbar-height,88px) - 16px)}
@media(max-width:760px){
 body[data-viewport-fit]>.store-page,body[data-viewport-fit]>.samples-main{padding:14px 12px}
 body[data-viewport-fit] .samples-heading p{display:none}
 body[data-viewport-fit] .samples-filters{gap:8px}
 body[data-viewport-fit] .samples-filters label{flex:1 1 calc(50% - 8px);max-width:none}
 body[data-viewport-fit] .samples-filters #clearFilters{padding:8px 12px}
 body[data-viewport-fit] .store-grid{gap:24px}
 body[data-viewport-fit][data-studio-flow] .ctrl{top:auto}
 body[data-viewport-fit][data-studio-flow] .studio-toolbar{margin:0}
}
/* Very short windows retain all content through the internal main region. */
@media(max-height:600px){
 body[data-viewport-fit]>.store-page,body[data-viewport-fit]>.samples-main{overflow:auto;overscroll-behavior:contain}
 body[data-viewport-fit] .store-grid,body[data-viewport-fit] .samples-grid{flex:none;overflow:visible}
 body[data-viewport-fit] .store-page>h1{font-size:30px}
}

/* Shop and Samples use document scrolling; Studio remains a fitted workspace. */
body[data-catalog-scroll]{min-height:100dvh;overflow-x:clip}
body[data-catalog-scroll]>.public-header{position:sticky;top:0;z-index:40}
body[data-catalog-scroll]>main{width:100%;box-sizing:border-box;padding:28px 24px 48px;margin:0 auto;overflow:visible}
body[data-catalog-scroll] :is(.store-grid,.samples-grid){overflow:visible;align-items:start;align-content:start;height:auto;min-height:0}
body[data-catalog-scroll] :is(.catalog-filter-bar,.samples-filters){position:sticky;top:var(--catalog-header-height,81px);z-index:20;background:var(--brand-bg);padding:12px 0;border-bottom:1px solid var(--brand-line);margin-bottom:16px}
body[data-catalog-scroll][data-filter-sticky="false"] :is(.catalog-filter-bar,.samples-filters){position:static}
body[data-catalog-scroll] .catalog-filter-bar .store-search{margin-bottom:10px}
body[data-catalog-scroll] .catalog-filter-bar .store-filters{margin:0;gap:8px}
body[data-catalog-scroll] .samples-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:16px}
body[data-catalog-scroll] .samples-filters>label{width:100%;max-width:none;min-width:0}
body[data-catalog-scroll] .samples-filters input,body[data-catalog-scroll] .samples-filters select{box-sizing:border-box;min-width:0}
body[data-catalog-scroll] .samples-filters>#clearFilters{height:44px;white-space:nowrap}
body[data-catalog-scroll] .store-product-image{height:auto;aspect-ratio:1}
body[data-catalog-scroll] .store-product-image img{object-fit:contain}
body[data-catalog-scroll] .store-product-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px}
body[data-catalog-scroll] .store-product-body h3{margin:0;line-height:1.35;overflow-wrap:anywhere}
body[data-catalog-scroll] .store-product-price{margin:0;line-height:1.4}
body[data-catalog-scroll] .store-product-action{margin:0;min-height:44px;line-height:1.4}
body[data-catalog-scroll] .store-grid{gap:32px 24px}
body[data-catalog-scroll] .store-page>h1{font-size:clamp(30px,4vw,48px);margin-bottom:12px}
body[data-catalog-scroll] .store-intro{margin-bottom:16px}
@media(max-width:760px){
 body[data-catalog-scroll]>main{padding:20px 16px 32px}
 body[data-catalog-scroll] .samples-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body[data-catalog-scroll] .samples-filters>label[for="sampleSearch"]{grid-column:1/-1}
 body[data-catalog-scroll] .mobile-sample-filters{width:auto;min-width:0;align-self:start;padding-top:23px}
 body[data-catalog-scroll] .mobile-sample-filters[open]{grid-column:1/-1;padding-top:0}
 body[data-catalog-scroll] .store-grid{gap:28px 16px}
 body[data-catalog-scroll] .samples-heading h1{font-size:30px}
}
html[data-theme] body[data-catalog-scroll]>.public-header{position:sticky;top:0;z-index:60}
body[data-catalog-scroll] .samples-footer{width:100%;box-sizing:border-box}body[data-catalog-scroll] .samples-footer nav{flex-wrap:wrap;max-width:100%;gap:10px 18px}
body[data-catalog-scroll] .store-search{display:flex;gap:8px;max-width:600px}
body[data-catalog-scroll] .store-search input{width:100%;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--brand-line);border-radius:8px;background:var(--brand-surface);color:var(--brand-text);font:inherit;box-sizing:border-box}
body[data-catalog-scroll] .store-search button{min-height:44px;border:0;background:transparent;color:var(--brand-text);font:inherit;white-space:nowrap}