a{color:inherit;text-decoration:none}a.btn,a.ghost{display:inline-block;text-align:center}.app{max-width:480px}.shell{max-width:480px;padding:0 19px}.bottom{width:min(480px,100%)}.topInner{gap:6px}.brand{font-size:24px;white-space:nowrap}.topInner>.row{gap:5px}.topInner .ghost{padding:10px 7px;font-size:11px}.iconBtn{min-width:36px}.block,a.block{display:block;width:100%;text-align:center}.space{margin-top:16px}.authPanel{padding:22px}.authPanel h1{margin:12px 0}.cardStore{margin-bottom:10px}.productArt img{width:100%;height:100%;object-fit:cover}.productGallery{scroll-snap-type:x mandatory}.productGallery img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;scroll-snap-align:center}.price{color:var(--accent);margin-top:8px}.subnav a{padding:10px 14px;border:1px solid var(--stroke);border-radius:12px;font-size:12px;white-space:nowrap;background:var(--paper)}.subnav a.active{background:var(--accent);color:var(--bg)}.subnav{padding-bottom:9px}.realMap{height:260px;margin:14px 0;border-radius:14px;z-index:0;background:var(--surface)}.mapPicker .row{align-items:end}.mapPicker .geoResults button{display:block;width:100%;text-align:left;margin-top:8px}.leaflet-container{font:inherit}.reelFeed{height:70dvh;overflow-y:auto;scroll-snap-type:y mandatory;border-radius:18px}.reel{height:70dvh;min-height:400px;scroll-snap-align:start;border-radius:0;background:#171717}.reel video{height:100%;width:100%;object-fit:contain}.reelCopy{bottom:50px;pointer-events:none;background:linear-gradient(transparent,#0009);padding:25px 10px 10px;left:10px;right:10px}.reelCopy a,.reelCopy button{pointer-events:auto}.reelCopy h2{color:white}.reelCopy p{color:#fff}.paletteGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.paletteGrid>div{height:45px;border-radius:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skeletonArt{height:125px}.skeletonLine{height:16px;margin-top:14px}.htmx-indicator{display:none}.htmx-request.htmx-indicator{display:grid}.htmx-request~#catalogueResults{opacity:.5}details{position:relative}summary{list-style:none;cursor:pointer}.filterPanel{position:absolute;right:0;top:35px;z-index:15;width:min(380px,85vw);box-shadow:var(--shadow)}.chips{overflow:visible}.chips>select{min-width:0;flex:1}.chips details{flex:none}button,a,input,select,summary{touch-action:manipulation}button.btn,button.ghost,a.ghost{min-height:42px}input,select,textarea{font-size:16px!important}.panel h3{margin-bottom:10px}label{display:block;margin:12px 0 6px}.empty{grid-column:1/-1}.view{padding-top:17px}progress{width:100%;margin-top:15px;accent-color:var(--accent)}.uploadStatus{font-size:12px;margin-top:10px}.note{overflow-wrap:anywhere}.item{overflow-wrap:anywhere}.geoResults{max-height:200px;overflow:auto}.hidden{display:none!important}html[data-tone=dark]{color-scheme:dark}html[data-tone=dark] body{background:#111}html[data-tone=dark] .app{color-scheme:dark;--bg:#171717;--paper:#22211f;--surface:#302d29;--ink:#f5eee5;--muted:#c3b4a4;--stroke:#45403a;--accent:#d3ad79;--accentSoft:#42362a;--hero1:#3f3024;--hero2:#7e644c}.hero{color:#211b17}.hero h1,.hero .eyebrow{color:#211b17}html[data-tone=dark] .hero h1,html[data-tone=dark] .hero .eyebrow{color:#fff8ee}html[data-tone=dark] .hero{--hero1:#3f3024;--hero2:#64503f}html[data-phase="0"] .app{--bg:#181921;--paper:#22232c;--surface:#2d2e38;--accent:#cfb3d3;--hero1:#282b37;--hero2:#5b5363}html[data-phase="1"] .app{--bg:#1b1a24;--paper:#252330;--surface:#322d3b;--accent:#cfb5d8;--hero1:#303346;--hero2:#676076}html[data-phase="2"] .app{--bg:#231c25;--paper:#2b2430;--surface:#382d3a;--accent:#e2b6c3;--hero1:#3b3548;--hero2:#735967}html[data-phase="3"] .app{--bg:#f9f0e9;--paper:#fff9f3;--surface:#f0e2d7;--accent:#845238;--hero1:#d0a28e;--hero2:#eed1b7}html[data-phase="4"] .app{--bg:#f8f3e9;--paper:#fffdf5;--surface:#eee5d4;--accent:#7b572b;--hero1:#b99e89;--hero2:#eee2d2}html[data-phase="5"] .app{--bg:#f8f5ed;--paper:#fffdf8;--surface:#f0e9db;--accent:#805a2e;--hero1:#c7ac89;--hero2:#f2e8d7}html[data-phase="6"] .app{--bg:#faf6ed;--paper:#fffefa;--surface:#f1e9da;--accent:#805622;--hero1:#d0b78e;--hero2:#f7ebd9}html[data-phase="7"] .app{--bg:#f8f3e8;--paper:#fffbf3;--surface:#ede2cf;--accent:#7b552b;--hero1:#d2b28d;--hero2:#f4e6d2}html[data-phase="8"] .app{--bg:#f8eee6;--paper:#fff8f1;--surface:#efdfd1;--accent:#865035;--hero1:#c8a181;--hero2:#ead5c3}html[data-phase="9"] .app{--bg:#241b20;--paper:#2d2428;--surface:#3b2d32;--accent:#e0b2a0;--hero1:#5c3f43;--hero2:#765a51}html[data-phase="10"] .app{--bg:#1d1a24;--paper:#27232d;--surface:#332d3c;--accent:#d6b7d0;--hero1:#55404c;--hero2:#6d5666}html[data-phase="11"] .app{--bg:#191922;--paper:#23232d;--surface:#2f2e3c;--accent:#c4bbdf;--hero1:#353343;--hero2:#61566c}.top{padding-top:env(safe-area-inset-top)}@media(max-width:360px){.brand{font-size:21px}.shell{padding:0 12px}.heroCopy h1{font-size:27px}.productInfo{padding:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.heroArt{animation:none}}

#searchForm>.chips{overflow-x:auto;flex-wrap:nowrap}#searchForm>.row details{flex-shrink:0}

#mediaDialog{width:min(900px,94vw);max-height:94dvh;overflow:auto;border:1px solid var(--stroke);border-radius:16px;padding:16px;background:var(--bg,#fff);color:var(--ink)}
#mediaDialog::backdrop{background:rgba(0,0,0,.8)}
.mediaViewer{display:flex;justify-content:center;align-items:center;min-height:120px;margin-top:16px}
.mediaViewer img,.mediaViewer video{display:block;max-width:100%;max-height:76dvh;object-fit:contain}
.productGallery>a{flex:0 0 85%;display:block}.productGallery>a img{width:100%;height:auto;object-fit:contain}
.detailList dt{font-weight:600;margin-top:12px}.detailList dd{margin:4px 0 0;overflow-wrap:anywhere}

.productPicker { max-height: 24rem; overflow-y: auto; }

.installBanner{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;padding-top:max(6px,env(safe-area-inset-top));background:var(--surface,#f7f5f0);color:var(--text,#44301e);font-size:12px}.installBanner.hidden{display:none}.installBanner .textBtn{white-space:nowrap}.notificationCount{font-size:10px;border-radius:50%;background:#865b30;color:white;padding:2px 5px}body{overscroll-behavior-y:contain}.bottom{padding-bottom:env(safe-area-inset-bottom)}

.installBanner{color:var(--ink)}.notificationCount{position:absolute;right:-3px;top:-3px}.top .iconBtn{position:relative;flex-shrink:0}@media(max-width:420px){.top .brand{font-size:20px}.topInner>.row{gap:5px}.topInner>.row>.ghost{padding:9px 6px;font-size:11px}}@media(display-mode:standalone){.top{padding-top:env(safe-area-inset-top)}}

/* Motion uses opacity and transforms, keeping input and navigation immediate. */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--motion-fast:140ms;--motion-page:180ms}
button,a,summary{-webkit-tap-highlight-color:transparent}
.btn,.ghost,.iconBtn,.textBtn,.chip,.navBtn,.subnav a,.saveBtn{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast),color var(--motion-fast),opacity var(--motion-fast)}
.btn:active,.ghost:active,.iconBtn:active,.textBtn:active,.chip:active,.navBtn:active,.subnav a:active,.saveBtn:active{transform:scale(.96)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.unitPicker{display:flex;gap:8px;align-items:center;margin:0 0 14px;font-size:12px}.unitPicker label{margin:0;white-space:nowrap}.unitPicker select{min-width:0;flex:1;padding:8px}.unitPicker button{padding:8px}
.navigationProgress{position:fixed;z-index:100;top:0;left:0;right:0;height:3px;pointer-events:none;opacity:0;overflow:hidden;background:var(--surface)}
.navigationProgress:after{content:"";display:block;height:100%;width:40%;background:var(--accent);transform:translateX(-100%)}
.is-navigating .navigationProgress,.is-fetching .navigationProgress{opacity:1}
.is-navigating .navigationProgress:after,.is-fetching .navigationProgress:after{animation:loadingProgress 1.1s var(--ease-out) infinite}
@keyframes loadingProgress{to{transform:translateX(350%)}}
.navigationSkeleton{display:none;pointer-events:none;position:fixed;inset:130px 0 80px;z-index:18;max-width:480px;margin:auto;overflow:hidden;background:var(--bg);padding-top:20px}
.navigation-slow .navigationSkeleton{display:block;animation:softAppear 160ms ease-out}.navigation-slow #main{opacity:.15}
.skeletonTitle{height:26px;width:55%;margin:0 0 24px}.skeletonArt{aspect-ratio:1;height:auto}.skeleton{background:var(--surface);position:relative;overflow:hidden}
.skeleton:after,.media-pending:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--paper) 50%,transparent 80%);transform:translateX(-100%);animation:skeletonSweep 1.25s ease-in-out infinite;pointer-events:none}
@keyframes skeletonSweep{to{transform:translateX(100%)}}
.skeleton{animation:none}.media-pending{position:relative;background:var(--surface)}.media-pending img{opacity:0}.productArt img,.productGallery img{transition:opacity 180ms ease-out}.media-failed{background:var(--surface)}
#searchForm{position:relative}#loadingGrid.htmx-request{position:absolute;z-index:5;left:0;right:0;background:var(--bg);margin-top:8px;pointer-events:none}
.loadingMore{padding:16px;min-height:90px;margin:12px 0;border-radius:14px;background:var(--surface);pointer-events:none}.loadingMore .skeletonLine{width:75%;background:var(--stroke)}.loadingMore .skeletonLine:last-child{width:45%}
[data-loading=true]{pointer-events:none}[data-loading=true]:before,.video-buffering:after{content:"";display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loadingSpin .7s linear infinite;margin-right:8px;vertical-align:middle}
.video-buffering{position:relative}.video-buffering:after{position:absolute;top:50%;left:50%;width:28px;height:28px;color:var(--accent);pointer-events:none}
@keyframes loadingSpin{to{transform:rotate(360deg)}}
@keyframes softAppear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
#mediaDialog[open]{animation:softAppear 160ms var(--ease-out)}#mediaDialog::backdrop{animation:softAppear 160ms ease-out}.hero:not(.hidden){animation:softAppear 220ms ease-out}.toast{animation:softAppear 160ms ease-out}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}.top{view-transition-name:app-header}.bottom{view-transition-name:app-navigation}::view-transition-old(root){animation:120ms ease-out both fadeOut}::view-transition-new(root){animation:180ms ease-out both softAppear}::view-transition-group(app-header),::view-transition-group(app-navigation){animation-duration:180ms}.view{animation:softAppear 180ms var(--ease-out)}@keyframes fadeOut{to{opacity:0}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.skeleton:after,.media-pending:after{transform:none;opacity:.25}.is-navigating .navigationProgress:after,.is-fetching .navigationProgress:after{transform:none;width:100%}.navigation-slow #main{opacity:1}.navigation-slow .navigationSkeleton{display:none}}
