/* site/catalog-system.css */
/* Quiet application geometry sits above the earlier marketing styles. Full images
 * use contain inside a stable stage, never cover. Transparent art gets a neutral
 * surface that keeps black wheels readable. Reduced motion applies to every new
 * interaction. catalog-media.js owns the matching stage and color state.
 */
.market{--app-canvas:#111314;--app-panel:#191c1e;--app-hover:#24292c;--app-text:#eeeef0;--app-muted:#a2a9ae;background:var(--app-canvas);color:var(--app-text);font-family:Phosphor Sans,Arial,sans-serif}
.market main{max-width:1600px;margin-inline:auto}
.market header{max-width:1480px;margin:12px auto 0;padding:14px 22px;border-radius:16px;background:#1a1d1f;box-shadow:0 8px 36px #0002;position:relative;z-index:5}
.market .topnote{color:#969fa5;background:none;padding-block:12px}
.market :is(h1,h2,h3){color:var(--app-text);letter-spacing:-.035em}
.market p{color:#b6bdc2}
.market .hero{padding:40px 4% 36px;gap:40px;align-items:center}
.market .hero h1{font-size:clamp(30px,3vw,42px);line-height:1.16}
.market .hero figure{border-radius:16px;background:#15191b;overflow:hidden;margin:0}
.market .hero img{display:block;width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;padding:0}
.market .hero figcaption{font:10px Phosphor Mono,monospace;color:#a4b8c4;background:#1a1e20;padding:12px 16px}
.market :is(.tinted,.landing-doors){background:transparent}
.market #ideas h2,.market .landing-doors h2{font-size:25px}
.market .manufacturer-links a{background:#202529;color:#b4bdc3}
.market .maker-context{color:#89969e}
.market .catalog-toolbar{padding:5px;background:#1a1e21;border-radius:12px;gap:4px;width:fit-content;max-width:100%}
.market .catalog-toolbar button{border-radius:8px;padding:10px 16px;min-height:40px;font-size:12px;color:#aeb8be;transition:background .18s,color .18s}
.market .catalog-toolbar button[aria-pressed=true]{background:#30373c;color:#f1f2f3}
.market .catalog-toolbar button:hover{background:#282f33}
.market .browse-controls{gap:10px;margin-top:20px}
.market .browse-controls label{gap:7px;color:#a4aeb5}
.market .browse-controls select{background-color:#23292d;color:#e4e7e9;border-radius:9px;line-height:1.5;min-height:42px;padding-block:10px}
.market .quiet,.market .build-actions :is(button,a){background:#242a2e;color:#cdd3d7;border-radius:9px;font:12px/1.4 Phosphor Sans,Arial,sans-serif;min-height:40px;transition:background .18s,color .18s}
.market .quiet:hover,.market .build-actions :is(button,a):hover{background:#333c42;color:#fff}
.market .button{border-radius:9px;font-size:13px;font-weight:600;min-height:42px}
.market .catalog-status{color:#929fa7;font:11px/1.7 Phosphor Mono,monospace}
.market .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.market .products article{border-radius:14px;background:#181c1f;padding:10px 10px 18px;min-width:0;overflow:hidden}
.market .products article[hidden]{display:none}
.market .products article>small,.market .products article>h3,.market .products article>p,.market .products article>.build-specs,.market .products article>.build-actions{margin-left:10px;margin-right:10px}
.market .products article>small{margin-top:19px;font-size:9px;color:#9aa9b3}
.market .products article>h3{font-size:19px;margin-top:10px}
.market .products article>p{font-size:13px;line-height:1.7;min-height:44px}
.market .products .build-specs{font-size:11px;gap:12px;color:#94a1ab}
.market .products .build-actions{gap:8px;margin-top:18px}
.market .build-actions :is(button,a){flex:1;display:flex;align-items:center;justify-content:center;padding:10px 12px}
.market .products article>img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;padding:12px;background:#e2e5e5;border-radius:10px}
.market .product-stage{background:#dce1e4;border-radius:11px;overflow:hidden;position:relative;color:#1e2429}
.market .product-stage[data-mode=scene]{background:#151a1e;color:#e4e9ec}
.market .product-viewport{display:flex;align-items:center;justify-content:center;width:100%;height:auto;aspect-ratio:3/2;border:0;border-radius:0;padding:16px;background:transparent;cursor:zoom-in;overflow:hidden}
.market div.product-viewport{cursor:default}
.market .product-stage[data-mode=scene] .product-viewport{padding:0}
.market .product-stage .product-viewport img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;padding:0;margin:0;border-radius:0;background:none;filter:none}
.market .media-controls{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:52px;padding:8px 10px;background:#cdd4d8}
.market [data-mode=scene] .media-controls{background:#20272b}
.market .product-stage .paint-swatches{display:flex;gap:3px;padding:0;flex-wrap:nowrap}
.market .product-stage .paint-swatches button{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;background:transparent;border:0;border-radius:8px;box-shadow:none;cursor:pointer}
.market .product-stage .paint-swatches button:before{content:'';position:absolute;inset:7px;border-radius:5px;background:var(--paint);box-shadow:0 1px 3px #0003,inset 0 0 0 1px #0002}
.market .product-stage .paint-swatches button[aria-pressed=true]{background:#aab7bf;box-shadow:none}
.market .product-stage[data-mode=scene] .paint-swatches button[aria-pressed=true]{background:#4c5962}
.market .media-views{display:flex;gap:2px;flex:none}
.market .media-views button{width:32px;height:32px;display:grid;place-items:center;padding:7px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.market .media-views button[aria-pressed=true]{background:#acb8c0}
.market [data-mode=scene] .media-views button[aria-pressed=true]{background:#3d4b54}
.market .media-views svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.market .media-original{display:block;padding:12px 16px;background:#252d32;color:#d9e1e6;font-size:12px}
.market .media-original:hover{background:#34414a}
.market .product-stage button:hover{background-color:#00000010}
.market .product-stage[data-mode=scene] button:hover{background-color:#ffffff10}
.market .product-stage button.product-viewport:hover{background:transparent}
.market #build-dialog{width:min(1040px,calc(100% - 32px));max-width:1040px;background:#191e22;color:#e7ecef;border:0;border-radius:18px;padding:30px;box-shadow:0 32px 120px #0009}
.market #build-dialog h2{font-size:26px;margin:12px 0 24px;padding-right:32px}
.market #build-dialog .product-stage{margin-top:18px}
.market #build-dialog .product-viewport{aspect-ratio:3/2;max-height:62vh;padding:24px}
.market #build-dialog [data-mode=scene] .product-viewport{padding:0;aspect-ratio:1.9}
.market #build-dialog .product-stage img{margin:0;background:none;border-radius:0}
.market #build-dialog>div>p{font-size:14px;color:#aab5bd;max-width:680px}
.market #build-dialog dl{gap:14px 24px;font-size:12px;padding:20px;background:#21292e;border-radius:11px}
.market #build-dialog dt{color:#96a5af}
.market #build-dialog dd{color:#dbe2e7}
.market .dialog-close{background:#303a41;border:0;border-radius:9px;color:#dce3e8}
.market dialog::backdrop{background:#080b0ed9;backdrop-filter:blur(9px)}
.market .door-grid>a{background:#1b2024;border-radius:13px;padding:24px 24px 46px}
.market .door-grid>a:hover{background:#252d33}
.market .custom-chips span{background:#252b30;color:#afb9c1;border-radius:8px}
.market .catalog-foot{color:#a4b8c4}
.market .motor-footer{background:#131719;border-radius:20px 20px 0 0;margin:16px 0 0}
.market .footer-invitation h2{font-size:28px}
.market .footer-next{border-radius:11px}
.market nav a:hover,.market .global-search[open],.market .global-search summary:hover{background:#2a3237}
.market .global-search[open] .search-expansion{background:#252d32}
@media(min-width:1450px){.market .products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.market header{margin-inline:3%}.market .products{grid-template-columns:repeat(2,minmax(0,1fr))}.market .hero{gap:28px}}
@media(max-width:600px){.market header{padding:14px 16px;border-radius:13px}.market .hero{padding-top:28px}.market .hero h1{font-size:30px}.market .products{grid-template-columns:1fr;gap:22px}.market #ideas h2{font-size:23px}.market .products article{padding:8px 8px 17px}.market .products article>p{min-height:0}.market .catalog-toolbar{width:100%}.market .catalog-toolbar button{flex:1 1 45%;font-size:11px;padding-inline:10px}.market #build-dialog{padding:22px 16px;width:calc(100% - 20px);max-height:94dvh}.market #build-dialog .product-viewport{padding:12px;max-height:50vh}.market #build-dialog dl{grid-template-columns:1fr;gap:6px;padding:16px}.market #build-dialog dd{margin-bottom:10px}.market .footer-invitation h2{font-size:24px}.market .product-viewport{padding:14px}.market .media-controls{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.market *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Paint reference page separates named custom requests from dated factory codes. */
.market .paint-page{max-width:1480px}
.market .paint-page h1{font-size:clamp(30px,3vw,42px);line-height:1.2;margin:18px 0}
.market .paint-page .paint-lede{max-width:680px}
.market .paint-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:30px 0 14px}
.market .paint-section-head h2{font-size:25px;margin:0}
.paint-section-head>span{font:11px Phosphor Mono,monospace;color:#9eabb4}
.paint-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.paint-option{background:#1b2024;border-radius:13px;padding:14px;display:flex;flex-direction:column;align-items:start;min-width:0}
.paint-block{width:100%;height:100px;background:var(--paint);border-radius:8px;margin-bottom:20px}
.paint-option small{font-size:9px;color:#a4b8c4}
.market .paint-option h3{font-size:19px;margin:12px 0}
.market .paint-option p{font-size:13px;line-height:1.7;margin:0 0 20px}
.market .paint-option .quiet{margin-top:auto;padding:11px 14px;display:inline-flex;align-items:center}
.market .paint-source{font-size:12px;line-height:1.7;margin-top:24px;color:#a4b8c4}
.paint-summary{margin-top:32px;max-width:760px}
.market .paint-summary h3{font-size:21px}
.market .paint-summary .button{margin-top:20px;display:inline-flex;align-items:center;padding:12px 18px}
.market .product-stage[data-mode=scene] .product-viewport{padding:16px}
.market #build-dialog [data-mode=scene] .product-viewport{padding:24px;aspect-ratio:3/2}
@media(max-width:900px){.paint-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.paint-options{grid-template-columns:1fr}.market .paint-section-head h2{font-size:23px}.market #build-dialog [data-mode=scene] .product-viewport{padding:12px}}