@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:optional;src:url(/assets/fonts/bricolage-grotesque-latin-600-normal.b34fc8c1ef0a.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:optional;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.3e1b5f0a56ee.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:optional;src:url(/assets/fonts/dm-sans-latin-400-normal.4ab51eb2cd73.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:optional;src:url(/assets/fonts/dm-sans-latin-500-normal.19bf19849565.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:optional;src:url(/assets/fonts/dm-sans-latin-700-normal.35c5efa0e5da.woff2) format("woff2")}
:root{--font-heading:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--weight-body:400;--weight-medium:500;--weight-strong:700;--weight-heading:600;--weight-display:800;--text-xs:.8125rem;--text-sm:.9375rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:1.625rem;--text-2xl:2.125rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-sm:8px;--radius:12px;--radius-lg:18px;--radius-pill:999px;--tap:44px;--content:1040px;--bg:#F4F6F9;--surface:#FFFFFF;--surface-2:#EAEFF5;--text:#0E1A2B;--muted:#465267;--line:#D5DBE4;--line-strong:#6B7788;--link:#0B57D0;--primary:#0E1A2B;--on-primary:#FFFFFF;--input-bg:#FFFFFF;--input-border:#6B7788;--focus:#E4572E;--chrome-bg:#0E1A2B;--chrome-text:#FFFFFF;--chrome-muted:#B7C6DA;--chrome-line:#1B2D49;--chrome-active:#FFD27A;--scene-bg:#0E1A2B;--scene-panel:#15253B;--scene-panel-2:#1B2D49;--scene-text:#FFFFFF;--scene-muted:#9FB3CC;--scene-line:#2A4066;--scene-link:#8AB4FF;--scene-accent:#FFD27A;--scene-trust:#7EE0C8;--accent:#FFD27A;--on-accent:#0E1A2B;--accent-ink:#7A5200;--trust:#7EE0C8;--trust-ink:#14705D;--trust-fill:#1B8A72;--trust-bg:#E3F6F1;--warn:#E4572E;--on-warn:#0E1A2B;--warn-ink:#A93C1C;--warn-bg:#FFF1EC;--warn-line:#F0B8A5;--ok-ink:#0B5D3F;--ok-bg:#E6F6EF;--ok-line:#A3D9B8;--bad:#B42318;--bad-ink:#8F1D14;--bad-bg:#FDECEA;--bad-line:#F3B4AE;--info-ink:#0B3B8C;--info-bg:#E8F0FE;--info-line:#AAC4F5;--awn-stripe:rgba(255,255,255,.42);--awn-red:#C0392B;--awn-orange:#E67E22;--awn-amber:#D4A017;--awn-green:#2E8B57;--awn-teal:#16A2A2;--awn-blue:#2F6FD0;--awn-purple:#7E57C2;--awn-pink:#D6558F;--font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;--bld-sky-top:#060B16;--bld-sky-bottom:#16264A;--bld-star:#FFF3C4;--bld-stone:#1D2536;--bld-stone-2:#121926;--bld-stone-line:#3A4660;--bld-on-stone:#F2EEE3;--bld-on-stone-muted:#B7C0D1;--bld-slate:#2A3342;--bld-slate-2:#1B222F;--bld-dormer-lit:#FFD98A;--bld-gold:#E7B84B;--bld-gold-ink:#F0C766;--bld-roof-text:#F0C766;--bld-glow:rgba(240,199,102,.55);--bld-lacquer:#0B0B0E;--bld-lacquer-text:#F0C766;--bld-ground:#0E1320;--bld-ground-line:#2B364D;--bld-glass-top:#2C4466;--bld-glass-bottom:#0F1A2C;--bld-spot:rgba(255,244,214,.5);--bld-light:#FFD98A;--bld-ped:#F6F4EF;--bld-ped-shade:#CFC8BA;--bld-plate:#1A1710;--bld-plate-text:#F5EFD9;--bld-open:#2FBF71;--bld-closed:#F2A33A;--bld-ribbon:#C62B34;--bld-on-ribbon:#FFFFFF;--bld-mat:#B3262E;--bld-on-mat:#FFFFFF;--bld-bronze:#C98A4B;--bld-silver:#C7CDD6;--bld-brass:#E3B84F;--bld-platinum:#E8EDF3;--bld-on-metal:#16120A;--bld-shutter:#2A3140}
:root[data-theme="light"]{--font-heading:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--weight-body:400;--weight-medium:500;--weight-strong:700;--weight-heading:600;--weight-display:800;--text-xs:.8125rem;--text-sm:.9375rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:1.625rem;--text-2xl:2.125rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-sm:8px;--radius:12px;--radius-lg:18px;--radius-pill:999px;--tap:44px;--content:1040px;--bg:#F4F6F9;--surface:#FFFFFF;--surface-2:#EAEFF5;--text:#0E1A2B;--muted:#465267;--line:#D5DBE4;--line-strong:#6B7788;--link:#0B57D0;--primary:#0E1A2B;--on-primary:#FFFFFF;--input-bg:#FFFFFF;--input-border:#6B7788;--focus:#E4572E;--chrome-bg:#FFFFFF;--chrome-text:#0E1A2B;--chrome-muted:#465267;--chrome-line:#D5DBE4;--chrome-active:#7A5200;--scene-bg:#EAEFF5;--scene-panel:#FFFFFF;--scene-panel-2:#F4F6F9;--scene-text:#0E1A2B;--scene-muted:#465267;--scene-line:#C5CEDB;--scene-link:#0B57D0;--scene-accent:#7A5200;--scene-trust:#14705D;--accent:#FFD27A;--on-accent:#0E1A2B;--accent-ink:#7A5200;--trust:#7EE0C8;--trust-ink:#14705D;--trust-fill:#1B8A72;--trust-bg:#E3F6F1;--warn:#E4572E;--on-warn:#0E1A2B;--warn-ink:#A93C1C;--warn-bg:#FFF1EC;--warn-line:#F0B8A5;--ok-ink:#0B5D3F;--ok-bg:#E6F6EF;--ok-line:#A3D9B8;--bad:#B42318;--bad-ink:#8F1D14;--bad-bg:#FDECEA;--bad-line:#F3B4AE;--info-ink:#0B3B8C;--info-bg:#E8F0FE;--info-line:#AAC4F5;--awn-stripe:rgba(255,255,255,.42);--awn-red:#C0392B;--awn-orange:#E67E22;--awn-amber:#D4A017;--awn-green:#2E8B57;--awn-teal:#16A2A2;--awn-blue:#2F6FD0;--awn-purple:#7E57C2;--awn-pink:#D6558F;--font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;--bld-sky-top:#BFD9F2;--bld-sky-bottom:#F6EBD9;--bld-star:rgba(255,255,255,0);--bld-stone:#F2E9D7;--bld-stone-2:#E6D9BC;--bld-stone-line:#B9A982;--bld-on-stone:#2B2418;--bld-on-stone-muted:#5A4F3A;--bld-slate:#566074;--bld-slate-2:#444D5F;--bld-dormer-lit:#FFE9B0;--bld-gold:#B88A1E;--bld-gold-ink:#6F4F00;--bld-roof-text:#FFE29A;--bld-glow:rgba(184,138,30,.25);--bld-lacquer:#0B0B0E;--bld-lacquer-text:#F0C766;--bld-ground:#DCD2BC;--bld-ground-line:#B9AC8E;--bld-glass-top:#C4DCF0;--bld-glass-bottom:#93B4D2;--bld-spot:rgba(255,255,255,.7);--bld-light:#FFE7A8;--bld-ped:#F6F4EF;--bld-ped-shade:#D8D0BF;--bld-plate:#1A1710;--bld-plate-text:#F5EFD9;--bld-open:#2FBF71;--bld-closed:#F2A33A;--bld-ribbon:#C62B34;--bld-on-ribbon:#FFFFFF;--bld-mat:#B3262E;--bld-on-mat:#FFFFFF;--bld-bronze:#C98A4B;--bld-silver:#C7CDD6;--bld-brass:#E3B84F;--bld-platinum:#E8EDF3;--bld-on-metal:#16120A;--bld-shutter:#D2C6AA}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:var(--weight-body) var(--text-md)/1.5 var(--font-body);overflow-wrap:break-word}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--space-2);top:var(--space-2);background:var(--surface);color:var(--text);padding:var(--space-2);z-index:30}
h1,h2,h3{font-family:var(--font-heading);color:inherit}
h1{font-size:var(--text-xl);font-weight:var(--weight-display);line-height:1.2;margin:var(--space-2) 0 var(--space-4)}
h2{font-size:var(--text-lg);font-weight:var(--weight-heading);line-height:1.3;margin:var(--space-5) 0 var(--space-2)}
h3{font-size:var(--text-md);font-weight:var(--weight-heading);margin:var(--space-4) 0 var(--space-1)}
strong,b,th{font-weight:var(--weight-strong)}
main{flex:1 0 auto;width:100%;max-width:var(--content);margin:0 auto;padding:var(--space-4)}
footer{width:100%;max-width:var(--content);margin:var(--space-5) auto;padding:0 var(--space-4) var(--space-5);color:var(--muted);font-size:var(--text-sm)}
.muted{color:var(--muted)}
.code{color:var(--muted);font-size:var(--text-xs);font-family:var(--font-mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);margin:0 0 var(--space-4)}
.narrow{max-width:480px}
label{display:block;font-weight:var(--weight-strong);margin:var(--space-3) 0 var(--space-1)}
label.choice{font-weight:var(--weight-body);display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);margin:0}
.hint{color:var(--muted);font-size:var(--text-sm);margin:var(--space-1) 0 0}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=file],input[type=date],select,textarea{width:100%;min-height:var(--tap);padding:var(--space-2) var(--space-3);border:1px solid var(--input-border);border-radius:var(--radius-sm);font:inherit;background:var(--input-bg);color:var(--text)}
textarea{min-height:96px}
input[type=radio],input[type=checkbox]{width:22px;height:22px;accent-color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);font:inherit;font-weight:var(--weight-strong);text-decoration:none;cursor:pointer;margin-top:var(--space-4)}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* Back links and other link-buttons: one pill style (decision 0110) */
.backrow{margin:var(--space-2) 0 var(--space-4)}
.backlink,.mrow-head a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--space-4) 0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-weight:var(--weight-strong);font-size:var(--text-sm);text-decoration:none}
.mrow-head a{padding:0 var(--space-4)}
.backarrow{flex:none;transition:transform .18s ease}
.backlink:hover,.backlink:focus-visible,.mrow-head a:hover,.mrow-head a:focus-visible{border-color:var(--bld-gold)}
.backlink:hover .backarrow,.backlink:focus-visible .backarrow{transform:translateX(-4px)}
.btn.pillbtn{border-radius:var(--radius-pill);min-height:44px;margin-top:0;padding:0 var(--space-5);line-height:1.2;text-decoration:none}
.notfound .btn.pillbtn{margin-top:var(--space-2)}
.notfound{text-align:center;margin-top:var(--space-5)}
@media(prefers-reduced-motion:reduce){.backarrow{transition:none}.backlink:hover .backarrow,.backlink:focus-visible .backarrow{transform:none}}
.btn.small{min-height:var(--tap);margin-top:0}
.err{color:var(--bad-ink);font-size:var(--text-sm);margin:var(--space-1) 0 0}
.notice{padding:var(--space-3) 14px;border-radius:var(--radius-sm);margin:0 0 var(--space-4);border:1px solid}
.notice.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.notice.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.notice.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.previewbar{background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--warn-ink);padding:8px 14px;margin:0;text-align:center;font-weight:var(--weight-strong);font-size:.9rem}
.testmoney{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);padding:10px 14px;border-radius:var(--radius-sm);margin:0 0 var(--space-4);font-weight:var(--weight-strong)}

.badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-strong);border:1px solid var(--line);background:var(--surface);color:var(--text)}
.badge.draft,.badge.seller-paused,.badge.needs_new_photo,.badge.pending,.badge.disputed,.badge.refunded{color:var(--warn-ink);border-color:var(--warn-line);background:var(--warn-bg)}
.badge.seller-new,.badge.under_review,.badge.paid,.badge.dispatched,.badge.delivered,.badge.confirmed{color:var(--info-ink);border-color:var(--info-line);background:var(--info-bg)}
.badge.seller-verified,.badge.approved,.badge.active,.badge.completed{color:var(--ok-ink);border-color:var(--ok-line);background:var(--ok-bg)}
.badge.rejected,.badge.suspended{color:var(--bad-ink);border-color:var(--bad-line);background:var(--bad-bg)}
.badge.tier-trusted,.badge.tier-top{color:var(--trust-ink);border-color:var(--trust-fill);background:var(--trust-bg)}

.bigcode{font:var(--weight-strong) 2.2rem/1.2 var(--font-mono);letter-spacing:.25em;background:var(--surface-2);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);display:inline-block}
.amount{font-weight:var(--weight-strong);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:10px var(--space-2);border-bottom:1px solid var(--line);vertical-align:top}
.row{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center}
form .row{margin-top:var(--space-3)}
.sidebyside{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:720px){.sidebyside{grid-template-columns:1fr 1fr}}
.idphoto{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
.floor{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--text);min-height:var(--tap)}
.avatar{width:96px;height:96px;object-fit:cover;border-radius:50%;background:var(--surface-2)}
.logo{max-width:160px;max-height:160px;border-radius:var(--radius-sm);background:var(--surface-2)}
.awn-red{background:var(--awn-red)}.awn-orange{background:var(--awn-orange)}.awn-amber{background:var(--awn-amber)}.awn-green{background:var(--awn-green)}
.awn-teal{background:var(--awn-teal)}.awn-blue{background:var(--awn-blue)}.awn-purple{background:var(--awn-purple)}.awn-pink{background:var(--awn-pink)}
.awning{display:inline-block;width:64px;height:14px;border-radius:0 0 12px 12px;vertical-align:middle}
.banner{width:100%;max-height:200px;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2)}
.thumb{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2)}
.photos{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.photos figure{margin:0;display:grid;gap:6px;justify-items:start}
.before-after{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.before-after figure{margin:0;display:grid;gap:4px;justify-items:start}
.before-after .thumb{width:128px;height:160px}
.swatch{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);margin-right:var(--space-3)}
ul.rows{list-style:none;margin:0 0 var(--space-4);padding:0}
ul.rows li>span{min-width:0;overflow-wrap:anywhere}
ul.rows li>a{flex:none}
ul.rows li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:10px 0;border-bottom:1px solid var(--line)}
.plainlist{list-style:none;padding:0;margin:0 0 var(--space-3)}
.plainlist li{padding:10px 0;border-bottom:1px solid var(--line);min-height:var(--tap)}
.codes{font:var(--text-md)/1.8 var(--font-mono);background:var(--surface-2);padding:var(--space-3);border-radius:var(--radius-sm);word-break:break-all}
.secret{font:1.1rem/1.6 var(--font-mono);letter-spacing:.06em;word-break:break-all;background:var(--surface-2);padding:10px;border-radius:var(--radius-sm)}
.payhere{font-weight:var(--weight-strong)}

.searchbox{display:flex;gap:var(--space-2);margin:0 0 var(--space-3);align-items:stretch}
.searchbox .btn{margin-top:0}
.searchbox input{flex:1;min-width:0}
.floorsec{margin:0 0 20px}
.awning-bar{display:block;height:12px;border-radius:0 0 10px 10px}
.sign{display:flex;align-items:center;gap:var(--space-2);padding:10px;font-weight:var(--weight-strong);overflow-wrap:anywhere}
.sign.big{padding:10px 0}
.sign img{border-radius:6px;object-fit:cover}
.shophead{margin:0 0 var(--space-2)}
.pname{font-weight:var(--weight-medium);overflow-wrap:anywhere}
.gallery{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory}
.gallery img{flex:0 0 min(100%,480px);width:min(100%,480px);scroll-snap-align:start;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2)}
.cartline{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.cartline img,.cartline .thumb{width:64px;height:64px;border-radius:6px;object-fit:cover}
blockquote{margin:var(--space-2) 0;padding:var(--space-1) var(--space-3);border-left:3px solid var(--line-strong);color:var(--text)}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);margin:var(--space-3) 0;padding:var(--space-2) var(--space-3)}
legend{font-weight:var(--weight-strong);padding:0 var(--space-1)}
.stars{color:var(--accent-ink);letter-spacing:.05em}


header.site{background:var(--chrome-bg);color:var(--chrome-text);border-bottom:1px solid var(--chrome-line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);max-width:var(--content);margin:0 auto;padding:var(--space-2) var(--space-4)}
.brand{font-family:var(--font-heading);font-weight:var(--weight-display);font-size:1.25rem;color:var(--chrome-text);text-decoration:none;margin-right:auto;min-height:var(--tap);display:inline-flex;align-items:center;gap:var(--space-2)}
.brand::before{content:"";width:18px;height:22px;border-radius:3px 3px 0 0;background:linear-gradient(var(--chrome-active) 0 30%,transparent 30% 38%,var(--chrome-active) 38% 62%,transparent 62% 70%,var(--chrome-active) 70%);opacity:.95}
.tools{display:flex;gap:var(--space-1)}
.tool{min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-2);color:var(--chrome-text);text-decoration:none;border-radius:var(--radius-sm)}
.tool:hover{background:var(--chrome-line)}
button.tool{background:none;border:0;font:inherit;cursor:pointer;margin:0}
button.tool[hidden]{display:none}
/* the search bar that drops down from the top (a popover: it focuses the box, and a tap outside or Escape closes it) */
.hsearch{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;overflow-y:auto;overscroll-behavior:contain;border:0;padding:max(var(--space-3),env(safe-area-inset-top)) var(--space-4) var(--space-5);background:var(--chrome-bg);color:var(--chrome-text);z-index:2147483000}
.hsearch form{position:sticky;top:0;z-index:2;padding:var(--space-1) 0 var(--space-2);background:var(--chrome-bg)}
.hsearch .hs-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;min-height:48px;border:1px solid var(--chrome-line);border-radius:var(--radius-sm);background:transparent;color:inherit;font:inherit;font-size:1.4rem;line-height:1;cursor:pointer}
.hsearch .suggest{position:static;display:block;margin:var(--space-2) auto 0;max-width:var(--content);max-height:none;overflow:visible;box-shadow:none}
.hsearch .suggest[hidden]{display:none}
@media(min-width:900px){.hsearch{inset:var(--hs-top,0px) 0 auto 0;height:auto;max-height:calc(100dvh - var(--hs-top,0px));border-bottom:3px solid var(--chrome-active);box-shadow:0 12px 30px rgba(0,0,0,.4)}.hsearch form{position:static;padding:0}}
.hsearch::backdrop{background:rgba(7,12,22,.35)}
.hsearch form{display:flex;gap:var(--space-2);max-width:var(--content);margin:0 auto}
.hsearch input{flex:1 1 auto;min-width:0;min-height:48px;font:inherit;padding:0 var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--chrome-line);background:var(--surface);color:var(--text)}
.hsearch .btn{margin-top:0;min-height:48px}
@media(prefers-reduced-motion:no-preference){.hsearch:popover-open{animation:hsdrop .18s ease-out}}
@keyframes hsdrop{from{transform:translateY(-30%);opacity:0}to{transform:none;opacity:1}}
.toollabel{font-weight:var(--weight-medium)}
@media(max-width:599px){.toollabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
nav.main{display:flex;flex-wrap:wrap;gap:0 var(--space-1)}
nav.main a,nav.main button{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 10px;color:var(--chrome-text);text-decoration:none;background:none;border:0;font:inherit;font-weight:var(--weight-medium);cursor:pointer}
nav.main a:hover,nav.main button:hover{text-decoration:underline}
nav.main a[aria-current=page]{color:var(--chrome-active);text-decoration:underline;text-underline-offset:6px}
form.inline{display:inline;margin:0}
nav.adminbar{max-width:var(--content);margin:0 auto;padding:0 var(--space-4) var(--space-2);border-top:1px solid var(--chrome-line)}
nav.adminbar a{font-size:var(--text-sm);color:var(--chrome-muted)}
html{scroll-padding-bottom:72px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--chrome-bg);color:var(--chrome-text);border-top:1px solid var(--chrome-line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;color:var(--chrome-muted);text-decoration:none;font-size:var(--text-xs);font-weight:var(--weight-medium)}
.tabbar a svg{width:22px;height:22px}
.tabbar a[aria-current=page]{color:var(--chrome-active);box-shadow:inset 0 3px 0 var(--chrome-active);font-weight:var(--weight-strong)}
.tabbar a:hover{color:var(--chrome-text)}
body.hastabs{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.hastabs nav.main .intab{display:none}
/* wide screens: the tab row already has Cart, so the Cart icon above it is not shown twice */
@media(min-width:900px){body.hastabs .tools .cartlink{display:none}}
@media(min-width:900px){
html{scroll-padding-bottom:0}
.tabbar{position:static;display:flex;gap:var(--space-1);max-width:var(--content);margin:0 auto;padding:0 var(--space-4) var(--space-2);border-top:0;background:none}
.tabbar a{flex-direction:row;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-3);font-size:var(--text-md);border-radius:var(--radius-sm)}
.tabbar a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--chrome-active)}
.tabbar a:hover{background:var(--chrome-line)}
body.hastabs{padding-bottom:0}
}
header.site a:focus-visible,header.site button:focus-visible{outline-color:var(--chrome-active)}
/* infinite lists (phones): the status line keeps its height so loading never moves the page; the pager link stays for the keyboard */
.infstatus{min-height:2.75rem;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--text-sm)}
.infinite.inf-on:not(.inf-manual) nav.pager,.infinite.inf-on:not(.inf-manual) p.center{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.infinite.inf-on:not(.inf-manual) nav.pager:focus-within,.infinite.inf-on:not(.inf-manual) p.center:focus-within{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
/* the floating bars (phones and small tablets, decision 0121): hidden on wide screens, where the header stays as it is */
.fbtop,.fbnav,.totop,.fab,.stickyact,.pmenu,.listlink,.phonesort{display:none}
@media(max-width:1023px){
:root{--fbgap:10px;--fbh:46px;--fbnavh:56px;--fbpill:color-mix(in srgb,var(--chrome-bg) 82%,transparent);--fbsolid:color-mix(in srgb,var(--chrome-bg) 92%,transparent)}
/* --fbtop-h is the real bottom edge of the floating top bars, measured by the page script (larger text or a taller chips row never leaves content under them) */
html:has(body.fb){scroll-padding-top:max(calc(env(safe-area-inset-top) + 130px),calc(var(--fbtop-h,0px) + 8px))}
body.fb header.site,body.fb .tabbar{display:none}
body.fb.fb{padding-top:max(calc(env(safe-area-inset-top) + var(--fbgap) * 2 + var(--fbh) + 6px),calc(var(--fbtop-h,0px) + 6px));padding-bottom:calc(var(--fbnavh) + var(--fbgap) * 2 + env(safe-area-inset-bottom) + 16px)}
body.fb.fb-chips{padding-top:max(calc(env(safe-area-inset-top) + var(--fbgap) * 2 + var(--fbh) + 62px),calc(var(--fbtop-h,0px) + 12px))}
body.fb.fb-nonav{padding-bottom:calc(var(--fbh) + var(--fbgap) * 2 + env(safe-area-inset-bottom) + 16px)}
body.fb.fb-action.fb{padding-bottom:calc(var(--fbnavh) + var(--fbgap) * 2 + env(safe-area-inset-bottom) + 92px)}
body.fb.wide:has(.stickybuy){padding-bottom:calc(var(--fbnavh) + var(--fbgap) * 2 + env(safe-area-inset-bottom) + 92px)}
.fpill,.fbpill,.fbround,.chips a,.pmenu,.totop{background:var(--fbpill);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--chrome-line);box-shadow:0 6px 20px rgba(0,0,0,.28);color:var(--chrome-text)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fpill,.fbpill,.fbround,.chips a,.pmenu,.totop{background:var(--fbsolid)}}
.fbtop{display:flex;position:fixed;z-index:40;top:calc(env(safe-area-inset-top) + var(--fbgap));left:var(--fbgap);right:var(--fbgap);flex-direction:column;gap:8px;pointer-events:none}
.fbrow{display:flex;gap:8px;align-items:center}
.fbrow>*,.chips{pointer-events:auto}
.fpill{display:flex;align-items:center;gap:8px;min-height:var(--fbh);border-radius:999px;padding:0 14px;text-decoration:none;font:inherit;font-weight:var(--weight-medium);cursor:pointer;margin:0;flex:0 0 auto;white-space:nowrap}
.fpill.searchpill,.fpill.shopstrip,.fpill.titlepill,.fpill.shopname{flex:1 1 auto;min-width:0}
.fpill.shopname{overflow:hidden}
.fpill.shopname span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the shop page's top row (shop name, follow, store search, menu) must never overlap at 360 to 412 px: the store search shrinks to its icon */
@media(max-width:480px){.fbrow:has(.shopname) .searchpill{flex:0 0 auto;width:var(--fbh);padding:0;justify-content:center}.fbrow:has(.shopname) .searchpill span{display:none}}
.fpill.titlepill,.fpill.escrowpill{font-weight:var(--weight-strong);overflow:hidden;text-overflow:ellipsis}
.fpill.escrowpill{font-size:var(--text-sm)}
.shoppill{padding:0 4px 0 14px}
.fblogo{margin:0;min-height:44px;font-size:1.05rem}
.fbbtn,.fbround{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;padding:0;color:inherit;background:none;border:0;font:inherit;cursor:pointer;box-shadow:none}
.fpill.fbround,.fbnav .fbround{width:var(--fbh);height:var(--fbh);background:var(--fbpill);border:1px solid var(--chrome-line);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.fbround[hidden],.fbpill [hidden]{display:none}
/* the round Back button: a light face with a navy arrow and a gold ring, clear on dark and light pages */
.fbround[data-back],.fbnav .fbround,.fpill.fbround[data-back]{background:#FFF8E6;color:#0E1A2B;border:2px solid var(--chrome-active);-webkit-backdrop-filter:none;backdrop-filter:none}
.fpill .follow{margin:0;min-height:44px}
.fblogoimg{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.fblogoinit{display:inline-flex;align-items:center;justify-content:center;background:var(--chrome-line);font-weight:var(--weight-strong)}
.stripname{overflow:hidden;text-overflow:ellipsis;font-weight:var(--weight-strong)}
.stripgo{margin-left:auto;color:var(--chrome-active);font-size:var(--text-sm)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:var(--weight-medium);white-space:nowrap}
.chips a[aria-current=page]{background:var(--primary);color:#FFD27A;border-color:var(--chrome-active)}
.minipill{position:absolute;left:0;top:0;opacity:0;visibility:hidden}
.fbtop .fpill,.fbtop .chips,.fbpill a,.fbpill button{transition:transform .2s ease,opacity .2s ease,visibility 0s linear .2s}
html.fold .fbtop .fbrow>:not([data-keep]):not(.minipill),html.fold .fbtop .chips{transform:translateY(calc(-100% - 24px));opacity:0;visibility:hidden}
html.fold .fbtop .minipill{opacity:1;visibility:visible;transition:opacity .2s ease}
html.fold .fbpill a:not([aria-current=page]):not([data-tab=cart]),html.fold .fbpill button{display:none}
/* folded: the bottom pill shrinks to its icons and sits in the middle; the page keeps its bottom padding, so it never covers a name or heading */
html.fold .fbnav{justify-content:center}
html.fold .fbpill{flex:0 0 auto}
html.fold .fbpill a{flex:0 0 auto;padding:0 14px}
.fbnav{display:flex;position:fixed;z-index:40;left:var(--fbgap);right:var(--fbgap);bottom:calc(env(safe-area-inset-bottom) + var(--fbgap));align-items:center;gap:8px;pointer-events:none}
.fbnav>*{pointer-events:auto}
.fbpill{flex:1 1 auto;display:flex;justify-content:space-around;gap:2px;min-height:var(--fbnavh);border-radius:999px;padding:4px}
.fbpill a,.fbpill button{position:relative;flex:1 1 0;min-width:44px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 6px;border-radius:999px;color:inherit;text-decoration:none;background:none;border:0;font:inherit;font-size:var(--text-xs);font-weight:var(--weight-medium);cursor:pointer}
.fbpill svg{width:22px;height:22px}
.fbpill [aria-current=page]{background:var(--primary);color:#FFD27A;box-shadow:inset 0 0 0 1px var(--chrome-line)}
.tabbadge{position:absolute;top:1px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#d9382c;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.pmenu{margin:0;inset:calc(env(safe-area-inset-top) + var(--fbgap) + var(--fbh) + 8px) auto auto var(--fbgap);min-width:220px;max-width:calc(100vw - var(--fbgap) * 2);padding:8px;border-radius:20px;background:var(--fbsolid)}
.pmenu:popover-open{display:block}
.pmenu::backdrop{background:rgba(7,12,22,.25)}
.pmenu a,.pmenu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border-radius:12px;color:inherit;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.pmenu a:hover,.pmenu button:hover{background:var(--chrome-line)}
.pmenu button[hidden]{display:none}
.totop,.fab{position:fixed;z-index:39;right:var(--fbgap);bottom:calc(env(safe-area-inset-bottom) + var(--fbgap) * 2 + var(--fbnavh) + 8px);width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;padding:0;font:inherit;cursor:pointer}
.totop:not([hidden]){display:flex}
body.fb-action .totop,body.fb-action .fab{bottom:calc(env(safe-area-inset-bottom) + var(--fbgap) * 2 + var(--fbnavh) + 80px)}
.fab{display:flex;width:56px;height:56px;font-size:2rem;line-height:1;background:var(--primary);color:#FFD27A;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.fab + .totop{bottom:calc(env(safe-area-inset-bottom) + var(--fbgap) * 2 + var(--fbnavh) + 72px)}
body.fb .stickyact,body.fb .stickybuy{display:flex;position:fixed;z-index:39;left:var(--fbgap);right:var(--fbgap);bottom:calc(env(safe-area-inset-bottom) + var(--fbgap) * 2 + var(--fbnavh));border-radius:18px;margin:0;padding:8px;background:color-mix(in srgb,var(--surface) 98%,transparent);color:var(--text);border:1px solid var(--line-strong);box-shadow:0 6px 20px rgba(0,0,0,.28)}
body.fb.fb-nonav .stickyact{bottom:calc(env(safe-area-inset-bottom) + var(--fbgap) * 2 + var(--fbh))}
.stickyact .btn,.stickyact button{width:100%;margin:0;min-height:48px}
.stickyact form{width:100%;margin:0}
.desk-only{display:none}
/* the floating Search, Filters and floor chips replace the page's own: hide the old ones (the Filters panel holds Sort and the filters) */
body.fb .hero .searchbox,body.fb .hero .views,body.fb .floorbadge,body.fb .marketbar{display:none}
body.fb .listlink{display:block;margin:0}
body.fb .listlink a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--text-sm);text-decoration:underline;text-underline-offset:4px}
body.fb .phonesort{display:block;margin:var(--space-3) 0}
body.fb .phonesort h3{margin:0 0 var(--space-1);font-size:var(--text-md)}
body.fb .phonesort .sortopt{display:flex;align-items:center;min-height:44px;color:inherit}
body.fb .phonesort .sortopt[aria-current]{font-weight:var(--weight-strong);text-decoration:underline}
/* the Filters panel is a bottom sheet on phones, above the floating bars */
body.fb .drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-height:82vh;z-index:45;border-radius:20px 20px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.35);transform:translateY(105%);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}
body.fb .drawer:target{transform:none}
body.fb .drawer:target~.drawer-backdrop{z-index:44}
@media(prefers-reduced-motion:reduce){.fbtop .fpill,.fbtop .chips,.fbpill a,.fbpill button,html.fold .fbtop .minipill{transition:none}}
}
/* the delivery road of an order: Placed, Packed, Dispatched, Delivered */
.dsteps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--space-2);padding:0}
.dstep{padding:6px 14px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted)}
.dstep.done{color:var(--text);border-color:var(--text)}
.dstep.now{background:var(--primary);border-color:var(--primary);color:#FFD27A;font-weight:var(--weight-strong)}
.dlvtag{display:block;margin-top:2px;font-size:var(--text-xs);text-align:center;opacity:.9}
.deliveryblock h2{font-size:var(--text-md);margin:var(--space-3) 0 var(--space-1)}
.deliveryblock ul{margin:0;padding-left:1.1rem}
/* the computer's one slim sticky top bar (decision 0124): logo, Building, Market, Search, Cart and the account links in one row; it slides away on a scroll down */
:root{--dt-h:56px}
.dtback,.dttop,.dtlinks,.acctmenu{display:none}
@media(min-width:1024px){
/* the bar floats over the page (frosted, the content scrolls behind it); the page keeps its top room, so nothing starts under it */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .2s ease;background:color-mix(in srgb,var(--chrome-bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.site{background:color-mix(in srgb,var(--chrome-bg) 96%,transparent)}}
html.fold header.site{transform:translateY(-100%)}
body{padding-top:var(--dt-h)}
html{scroll-padding-top:calc(var(--dt-h) + var(--space-3))}
header.site:not(:has(.adminbar)){height:var(--dt-h)}
body .marketbar{background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* one row, as wide as the page below it (same maximum width and side room), so the logo lines up with the page title */
header.site:not(:has(.adminbar)){display:flex;flex-wrap:nowrap;align-items:center;gap:0 var(--space-2);padding:0 max(var(--page-pad,var(--space-4)),calc((100% - var(--page-w,var(--content))) / 2 + var(--page-pad,var(--space-4))))}
header.site:not(:has(.adminbar)) .bar{display:contents}
header.site .brand{order:1;margin-right:var(--space-2)}
header.site .tabbar{order:2;margin:0 auto 0 0;padding:0;max-width:none}
header.site .dtlinks{order:2;display:flex;margin-right:auto}
header.site .dtlinks a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-3);color:var(--chrome-text);text-decoration:none;font-weight:var(--weight-medium);border-radius:var(--radius-sm)}
header.site .dtlinks a:hover{background:var(--chrome-line)}
header.site .tools{order:4}
header.site .tabbar a{padding:0 var(--space-2)}
header.site .dtsearch .toollabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Demo tools and Log out live in the Account menu, so the row never wraps */
header.site:has(.acctmenu) nav.main .lablink,header.site:has(.acctmenu) nav.main .logoutform{display:none}
header.site .acctmenu{order:5;display:block;position:relative}
.acctmenu summary{list-style:none;min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--chrome-text);border-radius:var(--radius-sm)}
.acctmenu summary::-webkit-details-marker{display:none}
.acctmenu summary:hover,.acctmenu[open] summary{background:var(--chrome-line)}
.acctpanel{position:absolute;right:0;top:100%;z-index:60;display:flex;flex-direction:column;min-width:200px;padding:8px;border-radius:16px;background:color-mix(in srgb,var(--chrome-bg) 97%,transparent);border:1px solid var(--chrome-line);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.acctpanel a,.acctpanel button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border-radius:12px;color:var(--chrome-text);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.acctpanel a:hover,.acctpanel button:hover{background:var(--chrome-line)}
header.site nav.main{order:3;flex-wrap:nowrap}
body.dt-nosearch .dtsearch{display:none}
/* Back (a round pill with a navy arrow and a gold ring, like the phones') and back to top, bottom right and clear of the Building's lift rail */
header.site .dtback{order:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 var(--space-2) 0 0;padding:0;border-radius:50%;background:#FFF8E6;color:#0E1A2B;border:2px solid var(--chrome-active);cursor:pointer}
.dttop{position:fixed;z-index:45;right:24px;bottom:24px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer}
/* the Market bar sits under the top bar and slides away with it, on the same rule */
html.fold .marketbar{transform:translateY(calc(-100% - var(--dt-h)))}
}
@media(min-width:1180px){body:has(.lift) .dttop{right:76px}}
@media(prefers-reduced-motion:reduce){header.site{transition:none}}


body.scene{background:var(--bld-sky-top);color:var(--scene-text)}
body.scene::before,body.scene::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body.scene::before{background:radial-gradient(1.5px 1.5px at 8% 12%,var(--bld-star),transparent),radial-gradient(1px 1px at 22% 30%,var(--bld-star),transparent),radial-gradient(1.5px 1.5px at 37% 8%,var(--bld-star),transparent),radial-gradient(1px 1px at 52% 22%,var(--bld-star),transparent),radial-gradient(1.5px 1.5px at 66% 11%,var(--bld-star),transparent),radial-gradient(1px 1px at 81% 27%,var(--bld-star),transparent),radial-gradient(1.5px 1.5px at 93% 9%,var(--bld-star),transparent),radial-gradient(1px 1px at 14% 55%,var(--bld-star),transparent),radial-gradient(1px 1px at 74% 48%,var(--bld-star),transparent),radial-gradient(1.5px 1.5px at 46% 66%,var(--bld-star),transparent),linear-gradient(var(--bld-sky-top),var(--bld-sky-bottom))}
body.scene::after{background:radial-gradient(2px 2px at 30% 18%,var(--bld-star),transparent),radial-gradient(2px 2px at 60% 36%,var(--bld-star),transparent),radial-gradient(2px 2px at 88% 20%,var(--bld-star),transparent),radial-gradient(2px 2px at 10% 40%,var(--bld-star),transparent);animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
body.scene main a{color:var(--scene-link)}
body.scene footer,body.scene .muted{color:var(--scene-muted)}
body.scene h1,body.scene h2{color:var(--scene-text)}
body.bld main,body.bld .bar,body.bld nav.adminbar{max-width:1280px}
body.bld{--page-w:1280px}
.hero{padding:var(--space-4) 0 var(--space-3)}
.hero h1{font-size:var(--text-xl);margin:var(--space-2) 0 var(--space-2)}
.hero .lead{margin:0 0 var(--space-4);color:var(--scene-muted);max-width:44ch}
.searchbox.big input{min-height:48px;border-radius:var(--radius);border-color:var(--scene-line)}
.searchbox.big .btn{min-height:48px}
.searchbox.big{flex-wrap:wrap}
.searchbox.big input{flex:1 1 220px}
@media(max-width:420px){.searchbox.big .btn{flex:1 1 100%}}
.views{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 0}
.views a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--scene-line);text-decoration:none;font-weight:var(--weight-medium)}
.views a[aria-current=page]{background:var(--scene-accent);color:var(--scene-bg);border-color:var(--scene-accent)}
body.scene .views a[aria-current=page]{color:var(--scene-bg)}
.skip-building{margin:var(--space-2) 0 0}
.skip-building a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:underline;text-underline-offset:4px;font-weight:var(--weight-medium)}
/* ---- an approved shop-front photo (decision 0102): in the window pane, or as the whole front with our own name plate under it */
.fp-frame{position:absolute;inset:0;overflow:hidden}
.fp-img{width:100%;height:100%;object-fit:cover;display:block}
.awning-bar{height:16px;border-radius:0 0 12px 12px;background-image:repeating-linear-gradient(90deg,transparent 0 14px,var(--awn-stripe) 14px 28px)}
.assure{display:flex;align-items:flex-start;gap:var(--space-3);margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);background:var(--scene-panel);border:1px solid var(--scene-trust);border-radius:var(--radius);color:var(--scene-text);font-weight:var(--weight-medium)}
.assure svg{flex:none;color:var(--scene-trust)}

/* ---- the page: one column up to 1023 px; a sticky left column and the street on the right from 1024 px */
.boutique{display:flex;flex-direction:column;max-width:1280px;margin:0 auto}
.hero{order:1}.street-col{order:2;min-width:0}
.pill-wrap{margin:var(--space-2) 0 var(--space-2);text-align:left}
.pill{display:inline-block;padding:7px 20px;border-radius:var(--radius-pill);background:var(--bld-gold);color:var(--bld-lacquer);font-weight:var(--weight-strong);font-size:var(--text-sm);letter-spacing:.03em;box-shadow:0 0 20px var(--bld-glow)}
@media(min-width:1024px){
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--space-6);align-items:center}
.hero h1,.hero .pill-wrap,.hero .lead{grid-column:1}
.hero .searchbox,.hero .views,.hero .skip-building{grid-column:2}
.hero h1{grid-row:1}.hero .pill-wrap{grid-row:2}.hero .lead{grid-row:3}.hero .searchbox{grid-row:1/span 2}.hero .views{grid-row:3}.hero .skip-building{grid-row:4}
.hero{padding:var(--space-2) 0 var(--space-1)}.hero h1{margin:0}.hero .lead{margin:0}
.hero .lead{max-width:none}.hero .pill-wrap{margin:var(--space-1) 0}
.hero .skip-building{margin:0;min-height:0}.hero .skip-building a:not(:focus){position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sky{height:46px;margin-bottom:-16px}.moon{width:40px;height:40px;top:0}
.floor-index{order:0}
}

/* ---- on a short window the list of floors gets compact (two columns, small rows) and the column stops sticking; it never has its own scrollbar */

/* ---- the building: --bw is the building's width and --u about one shopfront's width, both from the viewport */
.facade{--bw:calc(100vw - 48px);--u:calc((100vw - 90px) / 2.25)}
@media(max-width:479px){body.bld main{padding-left:12px;padding-right:12px}.facade{--bw:calc(100vw - 24px);--u:calc((100vw - 64px) / 2.2)}.facade{border-left-width:4px;border-right-width:4px}.bay{padding-left:8px;padding-right:8px}}
@media(min-width:768px){.facade{--u:calc((100vw - 130px) / 3.45)}}
@media(min-width:1024px){.facade{--bw:min(100vw - 64px,1280px);--u:calc((min(100vw - 64px,1280px) - 90px) / 4.4)}}
.front-grid{--u:clamp(150px,22vw,260px)}
.facade{position:relative;background:var(--bld-stone);background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.03) 31px 32px);border-left:8px solid var(--bld-stone-2);border-right:8px solid var(--bld-stone-2);box-shadow:0 0 0 2px var(--bld-gold),0 18px 50px rgba(0,0,0,.45);margin:0}
.roof{position:relative;margin:0 -8px;line-height:0}
.roof svg{display:block;width:100%;height:auto;aspect-ratio:4/1}
@media(min-width:1024px){.roof svg{aspect-ratio:6.67/1}}
.roof .deck{fill:var(--bld-slate-2)}.roof .slope{fill:var(--bld-slate)}
.roof .slates{stroke:rgba(0,0,0,.28);stroke-width:1.5;fill:none}
.roof .ridge{stroke:var(--bld-gold);stroke-width:3;fill:none}
.roof .cap{fill:var(--bld-slate-2);stroke:var(--bld-gold);stroke-width:1.5}
.roof .win{fill:var(--bld-dormer-lit);stroke:var(--bld-gold);stroke-width:2;animation:lit 4s ease-in-out infinite alternate}
.roof .dormer+.dormer .win{animation-delay:-2s}
.roof .bar{stroke:var(--bld-slate-2);stroke-width:2;fill:none}
@keyframes lit{from{opacity:.82}to{opacity:1}}
.roof-word{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);margin:0;padding-left:.34em;white-space:nowrap;font-family:var(--font-serif);font-weight:700;letter-spacing:.34em;line-height:1;font-size:clamp(.62rem,calc(var(--bw) * .04),1.7rem);color:var(--bld-roof-text);text-shadow:0 0 14px var(--bld-glow),0 0 3px rgba(0,0,0,.6)}
.bfloor{content-visibility:auto;contain-intrinsic-size:auto 420px;position:relative}
.bfloor::after{content:"";display:block;height:30px;background:linear-gradient(var(--bld-gold),var(--bld-gold)) top/100% 4px no-repeat,repeating-linear-gradient(90deg,var(--bld-gold) 0 2px,transparent 2px 11px) bottom/100% 24px no-repeat,var(--bld-stone-2)}
.cornice{display:flex;align-items:center;gap:var(--space-3);padding:8px var(--space-4);background:linear-gradient(var(--bld-stone-2),var(--bld-stone));border-top:3px solid var(--bld-gold);border-bottom:1px solid var(--bld-gold);box-shadow:0 6px 12px rgba(0,0,0,.35)}
.cornice .no{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.7rem,calc(var(--bw) * .07),2.5rem);line-height:1;color:var(--bld-gold-ink);text-shadow:0 0 12px var(--bld-glow);min-width:.9em;text-align:center}
.cornice h2{margin:0;font:var(--weight-strong) var(--text-xs)/1.3 var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.cornice h2 a,body.scene .cornice h2 a{color:var(--bld-gold-ink);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.cornice h2 a:hover{text-decoration:underline}
.bay{padding:14px 12px 8px;position:relative}
.shops{--gap:clamp(8px,1.6vw,16px);list-style:none;margin:0;padding:0 0 var(--space-2);display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--bld-gold) transparent}
.unit{flex:0 0 calc((100% - var(--gap)) / 2);scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;min-width:0;list-style:none}
.bfloor.scrolls .unit{flex-basis:calc((100% - 2 * var(--gap)) / 2.25)}
.more{display:none}
.bfloor.gt4 .more{display:flex}
.swipe{margin:2px 0 0;text-align:center;font-size:var(--text-xs);letter-spacing:.08em;color:var(--bld-on-stone-muted)}
.bfloor:not(.scrolls) .swipe{display:none}
@media(min-width:768px){
.shops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
.bfloor.gt3 .shops{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(64px,.4fr)}
.unit,.bfloor.scrolls .unit{flex:none}
.unit.cell:nth-child(n+4){display:none}
.bfloor.gt3 .more{display:flex}
.swipe{display:none!important}
}
@media(min-width:1024px){
.shops{grid-template-columns:repeat(4,minmax(0,1fr))}
.bfloor.gt3 .shops{grid-template-columns:repeat(4,minmax(0,1fr))}
.bfloor.gt4 .shops{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(64px,.4fr)}
.unit.cell:nth-child(n+4){display:flex}
.unit.cell:nth-child(n+5){display:none}
.bfloor.gt3 .more{display:none}.bfloor.gt4 .more{display:flex}
}

/* A floor with one or two shops: wider doors (and a compact invitation tile), so the row does not look empty */
@media(max-width:767px){.bfloor.n1 .unit.cell:not(.invite){flex-basis:min(72%,300px)}}
/* phones: on a floor with an invitation, the doors wrap and "Open your shop here" is a full-width tile under them (not beside a door) */
@media(max-width:767px){
.bfloor:has(.unit.invite) .shops{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
.bfloor:has(.unit.invite) .unit.cell:not(.invite){flex:0 0 calc((100% - var(--gap)) / 2)}
.bfloor:has(.unit.invite).n1 .unit.cell:not(.invite){flex-basis:min(72%,300px)}
.bfloor .unit.invite{flex:0 0 100%;order:99;align-self:stretch}
.bfloor .unit.invite .openhere{width:100%}
.bfloor:has(.unit.invite) .swipe{display:none}
}
@media(min-width:768px){
.bfloor.few .shops{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,40px)}
.bfloor.few .unit.cell:not(.invite){flex:0 1 clamp(230px,30vw,360px)}
.bfloor.few .unit.invite{flex:0 0 clamp(130px,14vw,180px);align-self:center}
}

/* ---- the shopfront: fascia, window, door, plaque, live line. Few elements, and the pedestals, the door and the light are background layers. */
.acc-red{--acc:var(--awn-red)}.acc-orange{--acc:var(--awn-orange)}.acc-amber{--acc:var(--awn-amber)}.acc-green{--acc:var(--awn-green)}.acc-teal{--acc:var(--awn-teal)}.acc-blue{--acc:var(--awn-blue)}.acc-purple{--acc:var(--awn-purple)}.acc-pink{--acc:var(--awn-pink)}
.front{display:flex;flex-direction:column;text-decoration:none;color:var(--bld-on-stone);border-radius:6px;min-height:var(--tap)}
body.scene main a.front{color:var(--bld-on-stone)}
.front:focus-visible,.seeall:focus-visible{outline:3px solid var(--bld-gold);outline-offset:3px}
.fascia{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.7rem;padding:6px 18px;background:var(--bld-lacquer);border:1px solid var(--bld-gold);border-radius:3px}
.fascia::before,.fascia::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--acc,var(--bld-gold));transform:rotate(45deg)}
.fascia::before{left:6px}.fascia::after{right:6px}
.nm{display:block;max-width:100%;text-align:center;font-family:var(--font-serif);font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.15;color:var(--bld-lacquer-text);overflow-wrap:anywhere}
.size-l .nm{font-size:clamp(.7rem,calc(var(--u) * .086),1.1rem)}
.size-m .nm{font-size:clamp(.7rem,calc(var(--u) * .072),.98rem)}
.size-s .nm{font-size:clamp(.7rem,calc(var(--u) * .062),.86rem)}
.size-xs .nm{font-size:.7rem}
.shape.phone{background:linear-gradient(var(--bld-ped),var(--bld-ped)) 50% 50%/46% 92% no-repeat,linear-gradient(var(--bld-glass-bottom),var(--bld-glass-bottom)) 50% 42%/36% 66% no-repeat}
.shape.dress{background:radial-gradient(circle at 50% 12%,var(--bld-ped) 0 9%,transparent 10%),linear-gradient(var(--bld-ped),var(--bld-ped)) 50% 52%/54% 44% no-repeat,linear-gradient(var(--bld-ped),var(--bld-ped)) 50% 100%/10% 40% no-repeat}
.shape.vase{background:linear-gradient(var(--bld-ped),var(--bld-ped)) 50% 6%/30% 28% no-repeat,radial-gradient(ellipse at 50% 68%,var(--bld-ped) 0 34%,transparent 36%)}
.shape.neutral{background:radial-gradient(circle at 38% 34%,#fff 0 6%,transparent 7%),radial-gradient(circle at 50% 54%,var(--bld-ped) 0 34%,transparent 36%)}
.price{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);padding:1px 7px;border-radius:var(--radius-pill);background:var(--bld-ped);color:var(--bld-on-metal);font-weight:var(--weight-strong);font-size:clamp(.66rem,calc(var(--u) * .064),.82rem);white-space:nowrap;z-index:2}
.ribbon{position:absolute;top:11px;right:-30px;z-index:3;width:104px;padding:2px 0;transform:rotate(40deg);text-align:center;font-weight:var(--weight-strong);font-size:.72rem;letter-spacing:.06em}
.ribbon.discount{background:var(--bld-ribbon);color:var(--bld-on-ribbon)}
.ribbon.new{background:var(--bld-gold);color:var(--bld-lacquer)}
.plaque{display:flex;align-items:center;justify-content:center;gap:5px;margin:8px auto 0;padding:3px 12px;border-radius:3px;background:var(--m);color:var(--bld-on-metal);font-family:var(--font-serif);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;border:1px solid rgba(0,0,0,.28)}
.metal-bronze{--m:var(--bld-bronze)}.metal-silver{--m:var(--bld-silver)}.metal-gold{--m:var(--bld-brass)}.metal-platinum{--m:var(--bld-platinum)}
.crown{fill:currentColor;flex:none}
.live{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:var(--text-sm);color:var(--bld-on-stone)}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bld-open);animation:ping 2.4s ease-in-out infinite}
@keyframes ping{0%,100%{opacity:1}50%{opacity:.35}}
.seeall{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1;min-height:150px;padding:12px 8px;text-align:center;text-decoration:none;border:1px solid var(--bld-gold);border-radius:3px;background:var(--bld-lacquer);color:var(--bld-lacquer-text);font-family:var(--font-serif);font-weight:700;font-size:.8rem;letter-spacing:.06em}
body.scene main a.seeall{color:var(--bld-lacquer-text)}
.seeall .count{font-size:1.8rem;line-height:1}
@media(max-width:767px){.more{flex:0 0 38%}}

/* ---- the ground floor */
.ground{background:var(--bld-stone-2);padding:14px 12px 0}
.canopy{margin:0;padding:6px clamp(18px,calc(var(--bw) * .08),56px);border-radius:4px 4px 50% 50%/4px 4px 16px 16px;background:linear-gradient(var(--bld-brass),#B8892E);color:var(--bld-lacquer);font-family:var(--font-serif);font-weight:700;font-size:clamp(.62rem,calc(var(--bw) * .026),.82rem);letter-spacing:.3em;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.strip{margin:14px -12px 0;padding:9px 8px;text-align:center;background:var(--bld-ground);border-top:2px dashed var(--bld-ground-line);color:var(--bld-gold-ink);font-family:var(--font-serif);font-weight:700;font-size:var(--text-xs);letter-spacing:.28em;text-transform:uppercase}

/* ---- the plain list of floors (Skip the building; Jump to floor) */
.floor-index{margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);background:var(--bld-stone-2);border:1px solid var(--bld-stone-line);border-radius:var(--radius);color:var(--bld-on-stone)}
body.scene .floor-index h2{color:var(--bld-on-stone);font-size:var(--text-md);margin:0 0 var(--space-2)}
.floor-index ol{list-style:none;margin:0;padding:0}
.floor-index li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--tap);border-bottom:1px solid var(--bld-stone-line)}
.floor-index li:last-child{border-bottom:0}
body.scene .floor-index a{color:var(--bld-gold-ink);display:inline-flex;align-items:center;min-height:var(--tap)}
body.scene .floor-index .muted{color:var(--bld-on-stone-muted);font-size:var(--text-sm);white-space:nowrap}
.floor-index p{margin:var(--space-2) 0 0}

/* ---- floor page and search results: the same shopfronts in a plain grid */
.front-grid{list-style:none;margin:var(--space-3) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:clamp(12px,2.4vw,24px)}
.front-grid .unit{flex:none;padding:10px;background:var(--bld-stone);border:1px solid var(--bld-stone-line);border-radius:6px}
.front-grid .seen{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---- the shop page keeps the same sign, so the step inside feels like one journey */
.shophead .sign.big{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:10px 16px;background:var(--bld-lacquer);border:1px solid var(--bld-gold);border-radius:3px}
.shophead .sign.big h1{margin:0;font-family:var(--font-serif);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bld-lacquer-text);font-size:clamp(1.05rem,4.6vw,1.7rem);text-wrap:balance}

/* ---- motion: off for reduced motion, and paused while the tab is hidden */
@media(prefers-reduced-motion:reduce){
body.scene::after,.bld *,.bld *::before,.bld *::after{animation:none!important;transition:none!important}
.shops{scroll-behavior:auto}
}
html[data-paused] body.scene::after,html[data-paused] .bld *,html[data-paused] .bld *::before,html[data-paused] .bld *::after{animation-play-state:paused!important}

/* ---- the door: one tall arched door under the sign, the display (three products and the price) behind it. The leaf only turns with a
   transform, so nothing moves on the page while it swings. An open shop's door stands half open (58 degrees) with warm light showing. */
.unit{position:relative}
.doorframe{--ease:cubic-bezier(.4,0,.2,1);position:relative;display:block;margin-top:6px;aspect-ratio:3/4.4;border:3px solid var(--bld-brass);border-radius:999px 999px 4px 4px;overflow:hidden;background:var(--bld-lacquer)}
.inside{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse 75% 62% at 50% 100%,var(--bld-light),transparent 72%),radial-gradient(ellipse 60% 40% at 50% 0,var(--bld-spot),transparent 70%),linear-gradient(var(--bld-glass-top),var(--bld-glass-bottom))}
.inside.has-photo{background:var(--bld-lacquer)}
.doorframe{container-type:inline-size}
/* The display: up to three equal square tiles in the lower part of the door, inside the opening that stays clear when the door stands half open (the leaf covers the left side) */
.tiles{position:absolute;left:48%;right:4%;bottom:15%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;z-index:1}
.tile{display:block;aspect-ratio:1;border-radius:4px;background:#F6F3EA;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tile img{display:block;width:100%;height:100%;padding:6%;box-sizing:border-box;object-fit:contain}
.tile.blank{background:var(--bld-glass-bottom)}
.tile .shape{display:block;width:100%;height:100%}
@container (max-width:200px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6%}.tile:first-child{display:none}}
.leaf{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:perspective(720px) rotateY(var(--turn,58deg));backface-visibility:hidden;background:radial-gradient(circle at 84% 54%,var(--bld-gold) 0 4px,transparent 5px),linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%),repeating-linear-gradient(90deg,transparent 0 34%,rgba(255,255,255,.1) 34% 35%),linear-gradient(105deg,color-mix(in srgb,var(--acc,var(--bld-brass)) 62%,var(--bld-lacquer)),color-mix(in srgb,var(--acc,var(--bld-brass)) 28%,var(--bld-lacquer)));border-right:3px solid var(--bld-brass);transition:transform 2.4s ease}
.open .leaf{will-change:transform}
.closed .leaf{transform:none;border-right:0;transition:none;background:radial-gradient(circle at 84% 54%,var(--bld-brass) 0 4px,transparent 5px),linear-gradient(105deg,var(--bld-lacquer),#000)}
.closed .inside{filter:brightness(.18) saturate(.4)}
.shut{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.opensat{display:block;margin-top:6px;font-weight:var(--weight-strong);font-size:.78rem;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.redsign{padding:5px 12px;background:var(--bld-closed);color:#fff;border:2px solid #fff;border-radius:3px;font-weight:var(--weight-strong);letter-spacing:.16em;font-size:clamp(.66rem,calc(var(--u) * .07),.9rem);transform:rotate(-5deg);box-shadow:0 2px 10px rgba(0,0,0,.6)}
.doorway{display:flex;justify-content:center;margin-top:6px}
.plate{display:inline-block;padding:2px 9px 2px 21px;border-radius:3px;border:1px solid var(--bld-brass);background:radial-gradient(circle at 11px 50%,var(--lamp,var(--bld-open)) 0 3.5px,transparent 4.5px),var(--bld-plate);color:var(--bld-plate-text);font-weight:var(--weight-strong);font-size:clamp(.62rem,calc(var(--u) * .054),.74rem);letter-spacing:.06em}
.closed .plate{--lamp:var(--bld-closed)}
@media(hover:hover) and (pointer:fine){
.open .front:hover .leaf,.open .front:focus-visible .leaf{transform:perspective(720px) rotateY(84deg)}
}
.open.entering .leaf{transform:perspective(720px) rotateY(104deg);transition-duration:2.2s}
.peek{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);width:max(100%,230px);margin-top:6px;z-index:20;flex-direction:column;gap:6px;padding:8px 10px;background:var(--bld-lacquer);color:var(--bld-lacquer-text);border:1px solid var(--bld-gold);border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.55);pointer-events:none;font-size:var(--text-xs)}
@media(hover:hover) and (pointer:fine) and (min-width:768px){.unit.open:hover .peek,.unit.open:focus-within .peek{display:flex}}
.pk{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pkn{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.pkp{font-weight:var(--weight-strong);white-space:nowrap}

/* ---- the night sky over the street: a moon and a few stars (CSS only; the twinkle is cheap and stops for reduced motion) */
.sky{position:relative;height:84px;margin:0 0 -22px;pointer-events:none}
.moon{position:absolute;right:9%;top:6px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 34% 34%,#fff 0 12%,var(--bld-gold-ink) 60%,var(--bld-gold));box-shadow:0 0 34px 8px var(--bld-glow),inset -9px -6px 0 rgba(0,0,0,.12)}
.st{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--bld-star);box-shadow:0 0 6px var(--bld-star);animation:twinkle 3.2s ease-in-out infinite alternate}
.st.s1{left:14%;top:22px}.st.s2{left:38%;top:48px;animation-delay:-1.1s}.st.s3{left:63%;top:14px;animation-delay:-2.2s}

/* ---- the lift: floor buttons on the right from 1180 px; a small floating badge with the current floor on smaller screens */
.lift{display:none}
.floorbadge{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:20;margin:0;padding:1px 10px;border-radius:var(--radius-pill);background:var(--bld-lacquer);color:var(--bld-lacquer-text);border:1px solid var(--bld-gold);font-size:var(--text-xs);font-weight:var(--weight-strong);white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.5);opacity:0;transition:opacity .4s;pointer-events:none}
.floorbadge.show{opacity:1}
.floorbadge[hidden]{display:none}
@media(min-width:1180px){
.floorbadge{display:none}
.lift{display:flex;flex-direction:column;gap:6px;position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;padding:8px 6px;background:var(--bld-lacquer);border:1px solid var(--bld-gold);border-radius:var(--radius-pill);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.lift a,body.scene .lift a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--bld-lacquer-text);text-decoration:none;font-family:var(--font-serif);font-weight:700;border:1px solid transparent}
.lift a:hover{border-color:var(--bld-gold)}
.lift a[aria-current=true],body.scene .lift a[aria-current=true],body.scene .lift a[aria-current=true]:hover,body.scene .lift a[aria-current=true]:focus-visible{background:var(--bld-gold);color:var(--bld-lacquer);border-color:var(--bld-gold)}
.lift a:focus-visible{outline:3px solid var(--bld-gold);outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.floorbadge{transition:none}.leaf{transition:none}.st,.live::before,.roof .win,body.scene::after{animation:none}}

/* ---- the main entrance: a real link to the Market. Two glass doors with warm light behind them stand ajar and swing open slowly (about 2 s) before the Market loads. */
.entrance{display:flex;flex-direction:column;align-items:center;text-decoration:none;min-height:var(--tap);border-radius:6px;color:var(--bld-gold-ink)}
.entrance:focus-visible{outline:3px solid var(--bld-gold);outline-offset:4px}
.gdoors{position:relative;display:flex;width:clamp(120px,calc(var(--bw) * .3),240px);height:clamp(80px,calc(var(--bw) * .18),130px);margin-top:6px;border:2px solid var(--bld-brass);border-radius:3px 3px 0 0;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 100%,var(--bld-light),transparent 80%),linear-gradient(var(--bld-glass-top),var(--bld-glass-bottom))}
.gdoor{position:relative;flex:1 1 50%;background:linear-gradient(105deg,var(--bld-light),var(--bld-glass-top) 60%,var(--bld-glass-bottom));border:1px solid var(--bld-brass);transition:transform 2s ease;will-change:transform}
.gdoor.l{transform-origin:0 50%;transform:perspective(600px) rotateY(var(--ent,48deg))}
.gdoor.r{transform-origin:100% 50%;transform:perspective(600px) rotateY(calc(var(--ent,48deg) * -1))}
.gdoor::before{content:"";position:absolute;top:40%;width:3px;height:26%;border-radius:2px;background:var(--bld-brass)}
.gdoor.l::before{right:10%}.gdoor.r::before{left:10%}
@media(hover:hover) and (pointer:fine){.entrance:hover .gdoors,.entrance:focus-visible .gdoors{--ent:72deg}}
.entrance.entering .gdoors{--ent:104deg}
.entlabel{margin-top:8px;padding:0 var(--space-3);text-align:center;font-weight:var(--weight-strong);font-size:var(--text-sm);color:var(--bld-gold-ink)}
@media(prefers-reduced-motion:reduce){.gdoor{transition:none}}

/* an approved shop-front photo as the whole front (decision 0102): the photo with our own name plate under it, no door */
.fullfront{position:relative;display:block;margin-top:4px;aspect-ratio:4/3;overflow:hidden;border:2px solid var(--bld-brass);border-radius:3px;background:var(--bld-lacquer)}
.nameplate{display:block;margin-top:4px;padding:5px 10px;text-align:center;background:var(--bld-lacquer);color:var(--bld-lacquer-text);border:1px solid var(--bld-gold);border-radius:3px;font-family:var(--font-serif);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(.7rem,calc(var(--u) * .07),.9rem);overflow-wrap:anywhere}


.market-layout{margin:var(--space-3) 0}
.market-main{min-width:0}
.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-1) 0 var(--space-2);margin:0 0 var(--space-2);scrollbar-width:thin}
.chips a{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);text-decoration:none;font-weight:var(--weight-medium)}
.chips a[aria-current]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;margin:0 0 var(--space-3)}
.filterbtn{display:inline-flex;gap:var(--space-2)}
.sortbox{display:flex;align-items:center;gap:var(--space-2);margin:0;font-weight:var(--weight-medium)}
.sortbox select{width:auto;min-width:11rem}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(88vw,360px);overflow-y:auto;background:var(--surface);color:var(--text);padding:var(--space-4);box-shadow:-8px 0 24px rgba(0,0,0,.35);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.drawer:target{transform:none;visibility:visible}
.drawer-backdrop{display:none}
.drawer:target~.drawer-backdrop{display:block;position:fixed;inset:0;z-index:39;background:rgba(14,26,43,.55)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-2)}
.drawer-head h2{margin:0}
.drawer-close{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-3)}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}
/* the product grids (decision 0134): 2 columns under 700px, 4 to 1023px, 5 to 1179px, 6 from 1180px; gaps 16px, and 20px (rows 22px) on a computer */
.mgrid,.fy-grid,.shelf,.room .shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media(min-width:700px){.mgrid,.fy-grid,.shelf,.room .shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.mgrid,.fy-grid,.shelf,.room .shelf{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 20px}}
@media(min-width:1180px){.mgrid,.fy-grid,.shelf,.room .shelf{grid-template-columns:repeat(6,minmax(0,1fr))}}
.saletag{align-self:flex-start;background:var(--warn);color:var(--on-warn);border-radius:var(--radius-pill);padding:1px var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-strong)}
.mcard-shop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);padding:var(--space-2);border-top:1px solid var(--line);background:var(--surface-2);font-size:var(--text-sm)}
.mcard-shop .shopname{font-weight:var(--weight-medium);overflow-wrap:anywhere;flex:1 1 100%}
.mcard-shop .visit{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:var(--weight-medium)}
.center{text-align:center}
/* the For you row: as wide as the page (no fade over its right edge), and the card names keep the normal text colour on the dark Building page too */
.foryou{min-width:0;max-width:100%;margin-bottom:var(--space-3)}
.foryou::after{display:none}
.foryou .mrow-track{max-width:100%}
/* the Building's lift rail stands at the right edge from 1180 px: the suggestions keep clear of it */
@media(min-width:1180px){body.bld .foryou{padding-right:64px}}
/* frameless cards sit on the page itself: on the night Building page their text uses the night text colours (the photo keeps its light ground) */
body.scene .mcard,body.scene .mcard-main,body.scene .mcard .amount.pr{color:var(--scene-text)}
body.scene .mcard .amount.pr .pcur,body.scene .mcard .amount.pr .pfrom,body.scene .mcard .oldprice,body.scene .mcard .pshop .shopname,body.scene .mcard .reason,body.scene .mcard .pstock.out{color:var(--scene-muted)}
@media(min-width:900px){
  .market-layout{display:block}
  /* the filter panel slides in from the left over a dim backdrop; it opens with a link to #filters and closes with a link away from it */
  .drawer{left:0;right:auto;width:min(92vw,380px);transform:translateX(-102%);transition:transform .25s ease;border-radius:0;box-shadow:8px 0 24px rgba(0,0,0,.35)}
  .drawer:target{transform:none}
  /* the slim bar: search, Filters with its count, Sort, and the floor chips below */
  .marketbar{position:sticky;top:var(--dt-h,0px);z-index:25;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"search tools" "chips chips";gap:var(--space-2) var(--space-3);align-items:center;background:var(--bg);padding:var(--space-2) 0;margin:0 0 var(--space-3);border-bottom:1px solid var(--line);transition:transform .2s}
  .marketbar>.searchbox{grid-area:search;margin:0}
  .marketbar>.chips{grid-area:chips;margin:0}
  .marketbar>.toolbar{grid-area:tools;margin:0;flex-wrap:nowrap}
  .sortbtn,.sortsheet{display:none}
}
/* the Market's page (decision 0134): centred, 1180px wide with 20px at the sides; the header, the search bar, the shop cards and the grid share it */
body.wide:has(.marketbar){--page-w:1180px;--page-pad:20px}
body.wide:has(.marketbar) main{max-width:1180px;padding-left:20px;padding-right:20px}
.countbadge{display:inline-flex;align-items:center;justify-content:center;min-width:1.4em;height:1.4em;padding:0 .35em;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font-size:var(--text-xs);font-weight:var(--weight-strong)}
@media(prefers-reduced-motion:reduce){.marketbar{transition:none}}
/* the For you feed (decision 0133): sets of swipeable shop cards, each followed by a grid of 8 product cards */
.nearrow{min-width:0;margin:0 0 var(--space-4)}
.nr-track{display:flex;gap:12px;margin:0;padding:4px 0 8px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:24px}
.nr-track::-webkit-scrollbar{display:none}
.nr-track:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.nr-slide{flex:1 0 min(268px,82%);min-width:0;scroll-snap-align:start}
.nr-track[data-n="1"] .nr-slide{flex-basis:100%}
.nr-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:224px;padding:10px;border-radius:24px;overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;background:var(--acc,var(--primary));box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .2s ease}
.nr-card:hover{transform:translateY(-2px)}
.nr-card:active{transform:scale(.98)}
.nr-card:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.nr-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block;background:var(--acc,var(--primary))}
.nr-bglogo{display:flex;align-items:center;justify-content:center}
.nr-bglogo img{width:80px;height:80px;object-fit:cover;border-radius:50%;background:#fff}
.nr-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%);pointer-events:none}
.nr-pick{position:absolute;top:10px;left:10px;max-width:calc(100% - 20px);padding:3px 10px;border-radius:var(--radius-pill);background:#fff;color:#111;font-size:var(--text-xs);font-weight:var(--weight-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-big{height:auto;min-height:300px;justify-content:flex-end;gap:12px}
.nr-tiles{display:flex;gap:10px;margin-bottom:4px}
.nr-tile{position:relative;flex:1 1 0;max-width:150px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#fff}
.nr-tile img{width:100%;height:100%;object-fit:cover;display:block}
.nr-tileprice{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:#111;font-size:var(--text-xs);font-weight:var(--weight-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr-also{background:var(--primary);color:var(--on-primary)}
.nr-info{display:flex;align-items:center;gap:8px;min-width:0}
.nr-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;overflow:hidden;background:#fff;color:#111;font-weight:var(--weight-strong);border:2px solid rgba(255,255,255,.85)}
.nr-logo img{width:100%;height:100%;object-fit:cover;display:block}
.nr-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.nr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--weight-strong);font-size:var(--text-md);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.nr-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fy-body{min-width:0}
.fy-set{min-width:0;margin-bottom:var(--space-3)}
.fy-carousel{position:relative;min-width:0;--fy-gap:12px;--fy-peek:24px}
.fy-track{display:flex;gap:var(--fy-gap);margin:0;padding:4px 0 6px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:28px}
.fy-track::-webkit-scrollbar{display:none}
.fy-track:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.fy-slide{flex:0 0 calc(100% - var(--fy-peek) - var(--fy-gap));min-width:0;scroll-snap-align:start;container-type:inline-size}
@media(min-width:700px){.fy-slide{flex-basis:calc((100% - var(--fy-gap))/2)}}
@media(min-width:1180px){.fy-slide{flex-basis:calc((100% - 2*var(--fy-gap))/3)}}
/* fewer cards than columns: they share the row (a single card takes the full width; two share a three-up row), never leaving the right edge empty */
.fy-track>.fy-slide:only-child{flex-basis:100%}
@media(min-width:700px){.fy-track>.fy-slide:only-child .fy-shop{aspect-ratio:auto;min-height:420px}}
@media(min-width:1180px){
  .fy-track:has(>.fy-slide:nth-child(2):last-child)>.fy-slide{flex-basis:calc((100% - var(--fy-gap))/2)}
  .fy-track:has(>.fy-slide:nth-child(2):last-child) .fy-shop{aspect-ratio:auto;min-height:440px}
}
.fy-shop{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;aspect-ratio:5/7;padding:12px;border-radius:28px;overflow:hidden;isolation:isolate;color:#fff;background:var(--acc,var(--primary));box-shadow:0 6px 18px rgba(0,0,0,.22)}
.fy-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block;background:var(--acc,var(--primary))}
.fy-bglogo{display:flex;align-items:center;justify-content:center}
.fy-bglogo img{width:96px;height:96px;object-fit:cover;border-radius:50%;background:#fff}
.fy-bgblur{filter:blur(14px);transform:scale(1.2)}
.fy-shop::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.18) 38%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.7) 100%);pointer-events:none}
.fy-shop.closed .fy-bg{filter:grayscale(.75) brightness(.7)}
.fy-shop.closed .fy-bgblur{filter:grayscale(.75) brightness(.7) blur(14px)}
.fy-shop.closed .fy-tiles{opacity:.72}
.fy-top{display:flex;align-items:center;gap:10px;min-width:0}
.fy-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#fff;color:#111;font-weight:var(--weight-strong);border:2px solid rgba(255,255,255,.85)}
.fy-logo img{width:100%;height:100%;object-fit:cover;display:block}
.fy-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.fy-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:var(--weight-strong);font-size:var(--text-md);text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fy-name:hover,.fy-name:focus-visible{text-decoration:underline}
.fy-meta{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--text-xs)}
.fy-meta .badge{flex:none}
.fy-rating{overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fy-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;font-size:20px;text-decoration:none;transition:transform .2s ease,background .2s ease}
.fy-go:hover,.fy-go:focus-visible{background:#fff;transform:translateX(2px)}
.fy-go:active{transform:scale(.94)}
.fy-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;min-height:0}
.fy-tile{position:relative;container-type:inline-size;min-width:0;min-height:44px;border-radius:16px;background:#fff;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.fy-tilelink{position:absolute;inset:0;display:block;color:#111;text-decoration:none}
.fy-tilelink img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.fy-tilelink .pshape{position:absolute;inset:18%}
.fy-pill{position:absolute;top:6px;left:6px;max-width:calc(100% - 12px);padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text) 9%,#fff);overflow:hidden;white-space:nowrap}
.fy-pill .amount.pr{font-size:12.5px;font-weight:600;color:var(--text)}
@container (max-width:125px){.fy-pill .pcur,.fy-pill .pfrom{display:none}}
@container (max-width:96px){.fy-pill .amount.pr{font-size:11px}}
.fy-tile .heart{top:auto;right:4px;bottom:4px;opacity:1}
.fy-tile .heart button,.fy-tile a.heart{min-width:44px;min-height:44px;border-color:transparent;background:rgba(255,255,255,.85)}
.fy-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;min-width:0;font-size:var(--text-xs);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fy-why{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fy-open{flex:none;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.2);font-weight:var(--weight-strong)}
.fy-shop.closed .fy-open{background:rgba(0,0,0,.45)}
/* a wide card (a computer with two cards in view): the four products sit in one row */
@container (min-width:500px){
.fy-shop{aspect-ratio:2.1/1}
.fy-tiles{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
}
@media(hover:hover) and (pointer:fine){
.fy-tile:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.fy-tile:hover .fy-tilelink img{transform:scale(1.06)}
}
.fy-tile:has(:focus-visible){outline:3px solid var(--primary);outline-offset:2px}
.fy-tile:active{transform:scale(.97)}
.fy-dots{display:flex;align-items:center;justify-content:center;gap:2px;min-height:28px}
.fy-dots[hidden]{display:none}
.fy-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.fy-dot::before{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--line-strong);transition:width .25s ease,background .25s ease}
.fy-dot[aria-current=true]::before{width:22px;background:var(--text)}
.fy-dot:focus-visible{outline:3px solid var(--primary);outline-offset:1px;border-radius:50%}
.fy-nav,.fy-nav[hidden]{display:none}
@media(hover:hover) and (pointer:fine){
.fy-carousel.fy-js .fy-nav:not([hidden]){position:absolute;top:calc(50% - 22px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#111;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease}
.fy-carousel.fy-js:hover .fy-nav,.fy-carousel.fy-js:focus-within .fy-nav{opacity:1;pointer-events:auto}
.fy-prev{left:6px}
.fy-next{right:6px}
.fy-nav:disabled{opacity:0!important;pointer-events:none}
}
/* a spotlight card: the same size, corners and shadow; the standout product's photo fills it, the name and price sit low, with a View button */
.fy-spot .fy-top{position:relative}
.fy-spot .heart{position:static;flex:none}
.fy-spot .heart button,.fy-spot a.heart{border-color:transparent;background:rgba(255,255,255,.88)}
.fy-spotlink{align-self:end;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:44px;padding:4px 0;color:#fff;text-decoration:none;border-radius:16px;transition:transform .2s ease}
.fy-spotname{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-lg);font-weight:var(--weight-strong);line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.fy-spotrow{display:flex;align-items:center;gap:6px 8px;min-width:0;flex-wrap:wrap}
.fy-spotrow .fy-pill{position:static;flex:0 1 auto;min-width:0}
.fy-spotrow .dpct{flex:none;padding:2px 8px;border-radius:var(--radius-pill);background:var(--warn);color:var(--on-warn);font-size:var(--text-xs);font-weight:var(--weight-strong)}
.fy-view{flex:none;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);background:#fff;color:#111;font-weight:var(--weight-strong);transition:transform .2s ease,background .2s ease}
.fy-spotlink:active{transform:scale(.97)}
.fy-spotlink:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fy-spot .fy-bg{transition:transform .3s ease}
@media(hover:hover) and (pointer:fine){
.fy-spot:hover .fy-bg{transform:scale(1.05)}
.fy-spotlink:hover .fy-view{transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce){.fy-spot .fy-bg,.fy-spotlink,.fy-view{transition:none}.fy-spot:hover .fy-bg,.fy-spotlink:hover .fy-view,.fy-spotlink:active{transform:none}}
/* the product grid after a set: 2 columns on a phone, 4 on a tablet, 6 on a computer */
.fy-grid{margin:var(--space-2) 0 0}
.fy-grid>.mcard{min-width:0;max-width:100%}
.fy-morewrap{display:flex;justify-content:center;margin:0 0 var(--space-3)}
.fy-more{margin:0}
.fy-set.fy-fade{transition:opacity .25s ease}
.fy-set.fy-out,.fy-set.fy-in{opacity:0}
@media(prefers-reduced-motion:reduce){
.fy-set.fy-fade,.fy-go,.fy-tile,.fy-tilelink img,.fy-dot::before,.fy-nav{transition:none}
.fy-tile:hover,.fy-tile:active{transform:none;box-shadow:none}
.fy-tile:hover .fy-tilelink img{transform:none}
}


.tabs{display:flex;gap:var(--space-2);margin:0 0 var(--space-3)}
.tabs a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);text-decoration:none;font-weight:var(--weight-medium)}
.tabs a[aria-current=page]{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:var(--weight-strong)}
@media(min-width:600px){.tabs a{flex:none;min-width:9rem}}
.ordercards{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ordercard{margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.ordercard p{margin:0}
.ordercard .btn{align-self:flex-start}
.ordercard-head,.ordercard-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.progress{list-style:none;margin:0 0 var(--space-3);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1)}
.step{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center;position:relative;font-size:var(--text-xs);color:var(--muted)}
.step::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:3px;background:var(--line-strong)}
.step:first-child::before{display:none}
.step.done::before,.step.now::before{background:var(--primary)}
.dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--weight-strong);background:var(--surface);border:2px solid var(--line-strong);color:var(--muted)}
.step.done .dot{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.step.now .dot{border-color:var(--primary);color:var(--text);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--primary)}
.step.now .steplabel,.step.done .steplabel{color:var(--text)}
.step.now .steplabel{font-weight:var(--weight-strong)}
.heldcard{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.heldcard h2{color:inherit}
.heldcard p{margin:0}
.codeboxes{display:flex;gap:var(--space-2);margin:var(--space-2) 0 var(--space-3)}
.codebox{flex:1;max-width:3.5rem;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:3/4;border:2px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2);font:var(--weight-strong) 1.9rem/1 var(--font-mono);color:var(--text)}


/* ---- the product card (decision 0134): no frame, a square photo with its badges, a tight stack of lines; cards in a row align at the top and
   have no fixed or minimum heights, so rows of different heights are fine */
.mcard{position:relative;container-type:inline-size;width:100%;display:flex;flex-direction:column;gap:5px;min-width:0;align-self:start;background:none;border:0;border-radius:0;box-shadow:none;color:var(--text)}
.mcard .pphoto{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#F2F3F5}
.mcard .pphoto{display:block}
.mcard .pphoto img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;box-sizing:border-box;display:block}
.pc-disc{position:absolute;top:8px;left:8px;z-index:2;padding:2px 8px;border-radius:var(--radius-pill);background:#C62828;color:#fff;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.pc-star{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);color:#8A5A00;font-size:15px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mcard .heart{top:calc(100cqw - 50px);right:6px;bottom:auto}
.mcard .heart button,.mcard a.heart{border-color:transparent;background:rgba(110,110,120,.22);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mcard .heart button[aria-pressed=true]{background:rgba(255,255,255,.9)}
.mcard-main{display:flex;flex-direction:column;gap:5px;min-width:0;text-decoration:none;color:var(--text)}
.mcard .pname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;font-weight:var(--weight-strong)}
.mcard .priceline{margin:0;min-height:0;gap:2px 8px}
.mcard .amount,.mcard .oldprice,.mcard .pc-disc{white-space:nowrap}
.pstock{font-size:var(--text-sm);line-height:1.3;color:var(--warm,#9A4A00);font-weight:var(--weight-strong)}
.pstock.out{color:var(--muted)}
.mcard.soldout .pphoto img{filter:grayscale(1);opacity:.55}
.mcard .pshop{margin:0;min-width:0}
.mcard .pshop .shopname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--text-sm);line-height:1.3;text-decoration:none}
.mcard .pshop a.shopname:hover,.mcard .pshop a.shopname:focus-visible{text-decoration:underline;text-underline-offset:3px}
.mcard .reason{margin:0;font-size:var(--text-sm);line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.pshape{display:block;position:absolute;left:27%;top:24%;width:46%;aspect-ratio:3/5;border-radius:12px;background:linear-gradient(160deg,var(--line-strong),var(--line))}
.pshape.dress{clip-path:polygon(35% 0,65% 0,58% 30%,100% 100%,0 100%,42% 30%);aspect-ratio:1/1.3;width:56%;left:22%;border-radius:0}
.pshape.vase{border-radius:40% 40% 46% 46%/30% 30% 60% 60%;aspect-ratio:4/5;width:50%;left:25%}
.pshape.neutral{aspect-ratio:1;width:48%;left:26%;top:30%;border-radius:10px}

/* ---- Market rows: one per floor, sideways with snap, a visible hint and a "See all" tile at the end */
.mrows h2{margin:var(--space-5) 0 var(--space-2)}
.mrow{margin:0 0 var(--space-4);position:relative}
.mrow-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.mrow-head h3{margin:0;font-size:var(--text-lg)}
.mrow-head a{min-height:var(--tap);display:inline-flex;align-items:center}
.mrow-track{list-style:none;margin:0;padding:var(--space-2) 0;display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.mrow-track>li{flex:0 0 clamp(150px,42vw,210px);scroll-snap-align:start;display:flex;align-items:flex-start}
.mrow-track>li>.mcard{width:100%}
.mrow-all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:200px;border:2px dashed var(--line-strong);border-radius:var(--radius);color:var(--text);text-decoration:none;font-weight:var(--weight-strong);text-align:center;padding:var(--space-3)}
.mrow-hint{margin:0;font-size:var(--text-sm)}
.mrow::after{content:"";position:absolute;right:0;top:34px;bottom:24px;width:28px;background:linear-gradient(90deg,transparent,var(--bg));pointer-events:none}
@media(min-width:1024px){.mrow-track>li{flex-basis:clamp(180px,16vw,220px)}}

/* ---- the Building: the small invitation after the shutters */
.invite{display:flex;align-items:center;justify-content:center}
.shopclosed{display:inline-block;margin:0 0 var(--space-3);padding:6px 14px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface-2);font-weight:var(--weight-strong);font-size:var(--text-sm)}
.openhere{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--space-3);border:1px dashed var(--bld-gold);border-radius:var(--radius-pill);color:var(--bld-gold-ink);font-weight:var(--weight-strong);font-size:var(--text-sm);text-decoration:none;text-align:center}
.openhere:focus-visible{outline:3px solid var(--bld-gold);outline-offset:2px}

/* ---- the cart: quantity stepper */
.stepper{display:inline-flex;align-items:center;gap:4px;margin:6px 0}
.stepper button{min-width:44px;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-size:1.25rem;cursor:pointer}
.stepper button:disabled{opacity:.45;cursor:not-allowed}
.stepper .qty{min-width:2.5ch;text-align:center;font-weight:var(--weight-strong)}

/* ---- "Visit this shop" is a clear button with an arrow */
.mcard-shop .visit,a.visit{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-weight:var(--weight-strong);text-decoration:none}
a.visit::after{content:"→"}

/* ---- the product page: the buy box with the shop, its plaque, the delivery and the escrow note */
.buybox{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);background:var(--surface);margin:var(--space-4) 0}
.buybox>*:first-child{margin-top:0}.buybox .buyshop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-weight:var(--weight-strong)}
.buybox .plaque{margin:0}
.buybox .escrow{color:var(--text)}

/* ---- the administrator's menu: a bar on wide screens, a dropdown on narrow ones */
.adminmenu{display:none}
@media(max-width:767px){
nav.adminbar.adminwide{display:none}
.adminmenu{display:block;position:relative;max-width:var(--content);margin:0 auto;padding:0 var(--space-4) var(--space-2);border-top:1px solid var(--chrome-line)}
.adminmenu summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;gap:8px;color:var(--chrome-text);font-weight:var(--weight-strong);list-style:none}
.adminmenu summary::-webkit-details-marker{display:none}
.adminmenu summary::after{content:"▾"}
.adminmenu[open] summary::after{content:"▴"}
.adminmenu nav{position:absolute;left:var(--space-4);right:var(--space-4);top:100%;z-index:30;display:flex;flex-direction:column;background:var(--chrome-bg);border:1px solid var(--chrome-line);border-radius:var(--radius-sm);padding:var(--space-2)}
.adminmenu nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--space-3);font-size:var(--text-md);color:var(--chrome-text)}
}

/* ---- the Market on phones and tablets: a slim bar (Filters, Sort) that hides on the way down; filters and sort open as bottom sheets */
.pcrumb{margin:var(--space-2) 0 0;font-size:var(--text-sm)}.pcrumb a{color:var(--link)}.refine{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3)}.chipmenu{position:relative}.chipmenu summary{list-style:none;cursor:pointer}.chipmenu summary::-webkit-details-marker{display:none}.chipmenu ul{position:absolute;z-index:40;top:100%;left:0;margin:4px 0 0;padding:6px;min-width:160px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm)}.chipmenu ul a{display:block;padding:8px 10px;color:inherit;text-decoration:none}.chipmenu ul a:hover{background:var(--surface-2)}.activechips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-2);padding:0}
.chip-x{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-size:var(--text-sm);text-decoration:none}
.sortopt{display:flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none}
.sortopt[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media(max-width:899px){
.drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-height:82vh;border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.35);transform:translateY(100%)}
.drawer:target{transform:none}
.filterbar{position:sticky;top:0;z-index:25;background:var(--bg);padding:var(--space-2) 0;margin:0 0 var(--space-2);transition:transform .2s;flex-wrap:nowrap}
.filterbar.hide{transform:translateY(-130%)}
.filterbar .sortbox,.filterbar button[type=submit]{display:none}
.filterbar .btn{flex:1 1 0}
}
@media(min-width:900px){.sortbtn,.sortsheet{display:none}}
@media(prefers-reduced-motion:reduce){.filterbar{transition:none}}

/* ---- live search suggestions: a listbox under the search field */
.placecards{display:grid;grid-template-columns:1fr;gap:var(--space-2);margin:var(--space-2) 0 var(--space-3)}
@media(min-width:700px){.placecards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.placecard{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:var(--space-3);border:2px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);text-decoration:none}
.placecard:hover{border-color:var(--primary)}
.placecard:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.placecard[aria-current=true]{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.placenew{border-style:dashed;color:var(--primary);font-weight:var(--weight-strong)}
.pc-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--surface-2);font-size:20px}
.pc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-name{font-weight:var(--weight-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-sub,.pc-info{font-size:var(--text-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-info{color:var(--text)}.pc-info.bad{color:var(--bad-ink)}
.pn-quick{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0}
.pn-chip{cursor:pointer}
.pn-legend{margin:var(--space-3) 0 0;font-weight:var(--weight-strong)}
.deliverybox{margin:var(--space-4) 0;padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius)}[data-flatfee].greyed{opacity:.55}[data-flatfee].greyed input{background:var(--surface-2)}
.pinmap{height:280px;max-width:100%;margin:var(--space-3) 0;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.suggest{position:absolute;left:0;right:0;top:100%;z-index:50;list-style:none;margin:4px 0 0;padding:4px;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.3);max-height:70vh;overflow-y:auto}
.suggest[hidden]{display:none}.sg-group{padding:6px 10px 2px;font-size:var(--text-sm);font-weight:700;color:var(--muted);text-transform:none}.sghome{padding:var(--space-3);max-height:70vh;overflow:auto}.searchhome h2{font-size:var(--text-base);margin:var(--space-3) 0 var(--space-2)}.sh-head{display:flex;align-items:center;justify-content:space-between}.linkbtn{background:none;border:0;padding:6px 8px;color:var(--link);font:inherit;cursor:pointer;text-decoration:underline}.sh-terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}.sh-terms a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-pill);color:inherit;text-decoration:none}.sh-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-3)}.sh-tiles a{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;font-size:var(--text-sm)}.sh-pic{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted)}.sh-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0}.sh-tiles img,.sh-noimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2);display:block}
.suggest li{margin:0}
.suggest a{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:6px 8px;border-radius:6px;color:inherit;text-decoration:none}
.suggest li[aria-selected=true] a,.suggest a:hover{background:var(--surface-2);outline:2px solid var(--focus);outline-offset:-2px}
.suggest img,.sg-noimg{width:40px;height:50px;object-fit:cover;border-radius:4px;background:var(--surface-2);flex:none;display:block}
.sg-text{display:flex;flex-direction:column;min-width:0}
.sg-name{font-weight:var(--weight-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-shop{color:var(--muted);font-size:var(--text-sm)}
.sg-kind{font-size:var(--text-sm);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:0 8px;flex:none}

/* the pilot's payment history: a card for each payment, so nothing is cut off on a phone and the whole transaction ID can be read */
.paylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.paycard{display:grid;gap:6px;min-width:0;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.paycard>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.paycard .k{flex:none;color:var(--muted);font-size:var(--text-sm)}
.paycard .v{min-width:0;text-align:right;overflow-wrap:anywhere}
.paycard .payid{flex-direction:column;align-items:stretch;gap:2px}
.paycard .payid .v{text-align:left;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;color:var(--text);font-size:inherit}
fieldset.plain{border:0;margin:0;padding:0;min-width:0}
fieldset.plain:disabled{opacity:.55}
/* the pilot's reconciliation: a difference that is not zero is red */
.reconbad{color:var(--bad-ink);font-weight:700}
tr.bad th,tr.bad td{background:var(--bad-bg)}
/* ---- save (the heart) and follow */
.heart{position:absolute;top:10px;right:10px;z-index:3;margin:0;display:inline-flex}
.heart button,a.heart{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer;text-decoration:none}
.heart button[aria-pressed=true]{color:var(--primary);border-color:var(--primary)}
.heart.labelled{position:static}
.heart.labelled button,a.heart.labelled{padding:0 var(--space-3);font-size:var(--text-md)}
.followform{display:inline;margin:0}
.follow{margin-top:0}
.followrow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}

/* ---- the three-way photo choice (clean background, polished, original) */
.photo-choice{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0}
.photo-choice form{margin:0}
.photo-choice .btn{margin-top:0}
/* ---- product cards: hover, press and keyboard focus (decision 0129). CSS only; transform and shadow never move the layout. */
.mcard .pphoto{transition:transform .2s ease,box-shadow .2s ease}
.mcard{transition:transform .12s ease}
.mcard .pphoto img{transition:transform .25s ease}
.mcard .pphoto .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .25s ease}
.mcard:has(:focus-visible) .pphoto{box-shadow:0 0 0 3px var(--primary)}
@media(hover:hover) and (pointer:fine){
.mcard:hover .pphoto{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.mcard:hover .pphoto img:not(.alt){transform:scale(1.03)}
.mcard:hover .pphoto .alt{opacity:1}
.mcard:hover .pname{text-decoration:underline;text-decoration-color:var(--bld-gold);text-decoration-thickness:2px;text-underline-offset:3px}
.mcard .heart{opacity:.7;transition:opacity .2s ease}
.mcard:hover .heart,.mcard:focus-within .heart{opacity:1}
.mcard .heart{top:calc(100cqw - 42px)}
.mcard .heart button,.mcard a.heart{min-width:36px;min-height:36px;width:36px;height:36px;padding:0;font-size:1.1rem}
}
.mcard:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){
.mcard,.mcard .pphoto,.mcard .pphoto img,.mcard .pphoto .alt{transition:none}
.mcard:active{transform:none}
.mcard:hover .pphoto{transform:none;box-shadow:none}
.mcard:hover .pphoto img:not(.alt){transform:none}
}
/* ---- prices (decisions 0131 and 0132): one style everywhere. The amount is the normal text colour (blue is for links and buttons); "UGX" and "From" are
   smaller, lighter and muted grey; a long number steps down in size. */
.amount{font-weight:600;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;text-shadow:none}
.amount.pr,.amount.final{color:var(--text)}
.amount.pr{white-space:nowrap;font-size:max(13px,calc(var(--price-base,1em) * var(--price-step,1)))}
.amount.pr.p8{--price-step:.92}
.amount.pr.p9{--price-step:.82}
.amount.pr .pcur,.amount.pr .pfrom{font-size:.75em;font-weight:400;color:var(--muted)}
.pprice.amount.pr{--price-base:var(--text-xl)}
.stickybuy .amount.pr{--price-base:var(--text-lg)}
.priceline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--space-2);min-height:1.5em;margin-top:2px}
.oldprice{font-size:var(--text-sm);font-weight:400;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.dpct{padding:0 6px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:11px;font-weight:600;line-height:1.5;color:var(--text);white-space:nowrap}
.saletag{font-size:11px;font-weight:500}
/* the door tiles, the peek over them and the room's shelves have grounds of their own: their price keeps that ground's text colour */
.unit .price .amount.pr,.pkp .amount.pr,.amount.pr.niche-price{color:inherit}
.unit .price .pcur,.pkp .pcur,.niche-price .pcur{color:inherit;opacity:.8}

/* ---- sideways rows: no native scrollbar anywhere; a mouse gets small arrows at the edges (rows-script.ts), a touch screen swipes */
.mrow-track,.fy-track,.nr-track,.chips,.shops{scrollbar-width:none;-ms-overflow-style:none}
.mrow-track::-webkit-scrollbar,.fy-track::-webkit-scrollbar,.nr-track::-webkit-scrollbar,.chips::-webkit-scrollbar,.shops::-webkit-scrollbar{display:none}
.rowarrow{position:absolute;z-index:4;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface,#fff);color:var(--text);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.rowarrow:hover{background:var(--primary);color:var(--on-primary,#fff);border-color:var(--primary)}
.rowarrow[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.mrow-hint{display:none}}
@media(hover:none),(pointer:coarse){.rowarrow{display:none}}

/* ---- equal card heights in a row (item 4): one line each for the name, the price line and the reason; a row stretches its cards to the tallest */
.mgrid,.fy-grid,.shelf,.room .shelf{align-items:stretch}
.mcard{align-self:stretch}
.mrow-track>li{align-items:stretch}
.mcard .priceline{flex-wrap:wrap;height:1.5em;overflow:hidden;align-content:flex-start}
.mcard .reason{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}

/* ---- the personal grid shows full rows only (item 5): the cards that would leave the last row short are hidden at each column count */
@media(max-width:699px){.fy-grid:has(>:nth-child(2n+1):last-child)>:last-child{display:none}}
@media(min-width:700px) and (max-width:1023px){
  .fy-grid:has(>:nth-child(4n+1):last-child)>:nth-last-child(-n+1),
  .fy-grid:has(>:nth-child(4n+2):last-child)>:nth-last-child(-n+2),
  .fy-grid:has(>:nth-child(4n+3):last-child)>:nth-last-child(-n+3){display:none}
}
@media(min-width:1024px) and (max-width:1179px){
  .fy-grid:has(>:nth-child(5n+1):last-child)>:nth-last-child(-n+1),
  .fy-grid:has(>:nth-child(5n+2):last-child)>:nth-last-child(-n+2),
  .fy-grid:has(>:nth-child(5n+3):last-child)>:nth-last-child(-n+3),
  .fy-grid:has(>:nth-child(5n+4):last-child)>:nth-last-child(-n+4){display:none}
}
@media(min-width:1180px){
  .fy-grid:has(>:nth-child(6n+1):last-child)>:nth-last-child(-n+1),
  .fy-grid:has(>:nth-child(6n+2):last-child)>:nth-last-child(-n+2),
  .fy-grid:has(>:nth-child(6n+3):last-child)>:nth-last-child(-n+3),
  .fy-grid:has(>:nth-child(6n+4):last-child)>:nth-last-child(-n+4),
  .fy-grid:has(>:nth-child(6n+5):last-child)>:nth-last-child(-n+5){display:none}
}

/* ---- Market spacing (item 8): 24px between the sections down the page, no large gap under the intro */
.market-main>.nearrow,.market-main .mrow,.market-main .foryou{margin-top:0;margin-bottom:24px}
.market-main .mrows>h2:not(:first-child){margin-top:24px}
.market-main .mrows>h2{margin-bottom:var(--space-2)}
.market-main>.marketbar{margin-bottom:24px}

/* ---- sticky bars (item 9): a jump to #content or any #anchor lands below the sticky Market bar as well as the header */
@media(min-width:900px){html:has(.marketbar){scroll-padding-top:calc(var(--dt-h,0px) + var(--mb-h,130px) + var(--space-3))}}


body.wide main{max-width:1200px}
body.wide{--page-w:1200px}
.pdp{display:flex;flex-direction:column;gap:var(--space-4)}
.pgallery{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.pmain{position:relative}
.ptrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--radius);background:var(--surface-2)}
.ptrack::-webkit-scrollbar{display:none}
.ptrack img,.ptrack .pbig{flex:0 0 100%;width:100%;height:auto;aspect-ratio:1;object-fit:contain;scroll-snap-align:start;display:block}
.pbig{min-height:240px}
.ptrack img[tabindex]:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
@media(hover:hover) and (pointer:fine){
.pmain.canzoom .ptrack img{cursor:zoom-in}
.pmain.canzoom:hover::after,.pmain.canzoom:focus-within::after{content:attr(data-hint);position:absolute;left:50%;bottom:var(--space-3);transform:translateX(-50%);padding:4px 12px;border-radius:var(--radius-pill);background:rgba(0,0,0,.72);color:#fff;font-size:var(--text-sm);pointer-events:none}
}
/* the full-screen photo viewer */
html.viewing{overflow:hidden}
.viewer{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(8,10,14,.99);color:#fff;overscroll-behavior:contain}
.viewer::backdrop{background:rgba(8,10,14,.99)}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3)}
.vcount{margin:0;font-weight:var(--weight-strong);font-size:var(--text-sm)}
.vbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.vbtn:hover{background:rgba(255,255,255,.28)}
.vbtn:focus-visible,.vthumb:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vstage{position:relative;min-height:0;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center}
.vimg{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;touch-action:none}
.vnav{position:absolute;top:50%;margin-top:-24px}
.vprev{left:var(--space-3)}.vnext{right:var(--space-3)}
.vthumbs{display:flex;gap:var(--space-2);overflow-x:auto;justify-content:safe center;padding:var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom))}
.vthumb{flex:none;width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:6px;background:#1b1f27;overflow:hidden;cursor:pointer}
.vthumb[aria-current=true]{border-color:#fff}
.vthumb img{display:block;width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:no-preference){.viewer[open]{animation:vfade .18s ease-out}@keyframes vfade{from{opacity:0}to{opacity:1}}}
.pthumbs{display:none}
.pdots{display:flex;justify-content:center;gap:2px;margin-top:var(--space-2)}
.pdots a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}
.pdots a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.pdots a[aria-current=true]::before{background:var(--primary);transform:scale(1.25)}
.pribbon{position:absolute;top:var(--space-3);left:0;z-index:2;padding:4px 12px;background:var(--danger,var(--primary));color:var(--on-primary);font-weight:var(--weight-strong);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pinfo{min-width:0}
.pinfo h1{margin:var(--space-2) 0}
.pinfo .buyshop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font-weight:var(--weight-strong)}
.pinfo .plaque{margin:0}
.priceline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);margin:var(--space-2) 0 0}
.priceline .pprice{font-size:var(--text-xl,1.75rem);font-weight:var(--weight-strong)}
.priceline .oldprice{color:var(--muted)}
.stockline{margin:var(--space-1) 0 var(--space-3)}
.buyform{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-3)}
.pqty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pqty .stepper{margin:0}
.pqty input{width:4.5rem;min-height:44px;text-align:center;font:inherit;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.btn.buy{width:100%;margin-top:0;min-height:52px;font-size:var(--text-lg)}
.buynote{margin:0 0 var(--space-1);font-size:var(--text-sm)}
.buyform .btn.secondary{width:100%;margin-top:0}
.pactions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-3) 0}
.pactions .btn{margin-top:0}
.copylink{display:inline-block}
.copylink summary{list-style:none;cursor:pointer}
.copylink summary::-webkit-details-marker{display:none}
.copylink label{display:block;margin-top:var(--space-2)}
.copylink input{width:100%;min-width:14rem;font:inherit;padding:var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.protect{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3) var(--space-4);background:var(--surface);margin:var(--space-3) 0}
.protect h2{margin:0 0 var(--space-2);font-size:var(--text-md)}
.protect ol{list-style:none;counter-reset:ps;margin:0;padding:0;display:grid;gap:var(--space-2)}
.protect li{counter-increment:ps;display:flex;align-items:center;gap:var(--space-3)}
.protect li::before{content:counter(ps);flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:var(--on-primary);font-weight:var(--weight-strong);font-size:var(--text-sm)}
.protect .escrow{margin:var(--space-2) 0 0;font-size:var(--text-sm)}
.desc summary{list-style:none;cursor:pointer}
.desc summary::-webkit-details-marker{display:none}
.desc:not([open]) .desc-text{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.desc .more,.desc .less{display:inline-block;margin-top:var(--space-1);color:var(--link,var(--primary));font-weight:var(--weight-medium);text-decoration:underline}
.desc .less,.desc[open] .more{display:none}
.desc[open] .less{display:inline-block}
.desc-text{white-space:pre-line}
.stickybuy{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:29;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:0 -4px 12px rgba(0,0,0,.18)}
.stickybuy .amount{font-weight:var(--weight-strong);font-size:var(--text-lg);white-space:nowrap}
.stickybuy .btn{width:auto;flex:1;max-width:20rem;min-height:48px;margin:0;font-size:var(--text-md);padding:0 var(--space-3)}
body.wide:has(.stickybuy){padding-bottom:calc(64px + 84px + env(safe-area-inset-bottom))}
@media(min-width:900px) and (max-width:1023px){.stickybuy{bottom:0}body.wide:has(.stickybuy){padding-bottom:84px}}
.pdp+.like,.pdp~.like{margin-top:var(--space-5)}
.like .mrow-track{scroll-snap-type:x mandatory}
@media(min-width:1024px){
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.pgallery{flex-direction:row;align-items:flex-start}
.pthumbs{display:flex;flex-direction:column;gap:var(--space-2);flex:none;width:76px;position:sticky;top:calc(var(--dt-h) + var(--space-4))}
.pthumbs a{display:block;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;line-height:0}
.pthumbs a[aria-current=true]{border-color:var(--primary)}
.pthumbs img{width:72px;height:72px;object-fit:cover}
.pmain{flex:1;min-width:0;position:sticky;top:calc(var(--dt-h) + var(--space-4))}
html.fold .pmain,html.fold .pthumbs{top:var(--space-4)}
/* the buy panel stays in view on the right while the photos scroll: solid, and it ends where the page's columns end (never over the footer) */
.pinfo{position:sticky;top:calc(var(--dt-h) + var(--space-4));align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4)}
html.fold .pinfo{top:var(--space-4)}
.pgallery .porig{flex-basis:100%}
.pdots{display:none}
.stickybuy{display:none}
body.wide:has(.stickybuy){padding-bottom:0}
.buyform{max-width:28rem}
.like .mrow-track>li{flex-basis:calc((100% - 5 * var(--space-3)) / 6)}
.like .mrow-all{display:none}
}
@media(max-width:1023px){.like .mrow-track>li{flex-basis:calc((100% - var(--space-3)) / 2)}}

/* ---- cart: two columns from 1024 px, the summary stays in view */
.emptycart{margin:var(--space-4) 0}
.cartcols{display:block}
.cartsummary{margin-top:var(--space-3)}
.cart-shops-side{display:none}
.cartsummary h2{margin-top:0}
.cartsummary dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-3)}
.cartsummary dd{margin:0;text-align:right}
.cartsummary .total{font-weight:var(--weight-strong);border-top:1px solid var(--line);padding-top:var(--space-2)}
@media(min-width:1024px){
.cartcols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-5);align-items:start}
.cartsummary{position:sticky;top:var(--space-4);margin-top:0}
.cart-shops-top{display:none}
.cart-shops-side{display:block}
.cartsummary .btn{width:100%}
}

/* ---- orders: a centred list; the order page in two columns from 1024 px (the phone order is kept with the o1..o13 classes) */
.ordercards{max-width:960px;margin-left:auto;margin-right:auto}
.tabs{max-width:960px;margin-left:auto;margin-right:auto}
.ordercols{display:flex;flex-direction:column}
.ordermain,.orderside{display:contents}
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}.o8{order:8}.o9{order:9}.o10{order:10}.o11{order:11}.o12{order:12}.o13{order:13}
@media(min-width:1024px){
.ordercols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-5);align-items:start}
.ordermain,.orderside{display:flex;flex-direction:column;min-width:0}
}

.optpicker{display:flex;flex-direction:column;gap:var(--space-3)}
.optset{border:0;margin:0;padding:0;min-width:0}
.optset legend{padding:0;margin:0 0 var(--space-1);font-weight:var(--weight-strong)}
.optset .selname{font-weight:var(--weight-normal,400);color:var(--muted)}
.optchoices{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.optchoice{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.optchoice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.optchoice:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:2px}
.optchoice.tbtn{min-width:52px;min-height:44px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.optchoice.tbtn:has(input:checked){background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.optchoice.tbtn.oos{background:var(--line);color:var(--muted);text-decoration:line-through;cursor:not-allowed}
.optchoice.swatch{min-width:44px;min-height:44px}
.optchoice.swatch .dot,.cdot{display:block;border-radius:50%;background:var(--sw,#999);border:1px solid var(--line-strong)}
.optchoice.swatch .dot{position:relative;width:42px;height:42px;box-sizing:border-box}
.optchoice.swatch:has(input:checked) .dot{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)}
.optchoice.swatch:has(input:checked) .dot::after{content:"";position:absolute;left:14px;top:8px;width:9px;height:17px;border:solid var(--tick,#fff);border-width:0 3px 3px 0;transform:rotate(45deg)}
.optchoice.swatch.sw-white,.optchoice.swatch.sw-yellow{--tick:#222}
.optchoice.swatch.oos{cursor:not-allowed}
.optchoice.swatch.oos .dot{opacity:.35;overflow:hidden}
.optchoice.swatch.oos .dot::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:var(--text);transform:rotate(-45deg)}
.sw-black{--sw:#111}.sw-white{--sw:#fff}.sw-blue{--sw:#1f5fbf}.sw-red{--sw:#d0312d}.sw-green{--sw:#2e8b57}.sw-yellow{--sw:#f2c200}.sw-brown{--sw:#7a4b2a}.sw-grey{--sw:#8a8f98}.sw-pink{--sw:#ec7fb0}.sw-purple{--sw:#7a3fb0}.sw-other{--sw:#c9ccd2}
.optset.missing legend{color:var(--awn-orange)}
.optset.missing .optchoice.tbtn{border-color:var(--awn-orange);box-shadow:0 0 0 2px var(--awn-orange)}
.optset.missing .optchoice.swatch .dot{box-shadow:0 0 0 2px var(--awn-orange)}
.optmsg{margin:0;padding:var(--space-2) var(--space-3);border:1px solid var(--awn-orange);border-left-width:4px;border-radius:var(--radius-sm);color:var(--text);font-weight:var(--weight-strong)}
.optchoice.swatch .dot img{position:absolute;inset:-1px;width:44px;height:44px;border-radius:50%;object-fit:cover;max-width:none}
.optchoice.swatch.withphoto .dot{width:44px;height:44px;background:none}
.optchoice.swatch.withphoto:has(input:checked) .dot::after{display:none}
.lowpill{display:inline-block;margin:var(--space-2) 0 0;padding:2px var(--space-3);border-radius:var(--radius-pill);background:#c62828;color:#fff;font-size:var(--text-sm);font-weight:var(--weight-strong)}
.lowpill[hidden]{display:none}
.qtymsg{margin:0;font-size:var(--text-sm);color:var(--text);font-weight:var(--weight-strong)}
.cdots{display:inline-flex;align-items:center;gap:3px}
.cdot{width:10px;height:10px}
.cmore{font-size:var(--text-sm);color:var(--muted)}
.palette{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-3)}
.palette label{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer}
.palette .cdot{width:18px;height:18px}
.variant-label{font-size:var(--text-sm);color:var(--muted)}
.presets{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-3)}
.presets .btn{margin-top:0}
.optstep{display:flex;align-items:baseline;gap:var(--space-2);margin:var(--space-4) 0 var(--space-2);font-size:var(--text-lg)}
.optstep .stepno{color:var(--muted)}
.optcard{border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:var(--space-3);margin:0 0 var(--space-3);min-width:0}
.optwarn{margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);border:1px solid var(--awn-orange);border-left-width:4px;border-radius:var(--radius-sm);color:var(--text)}
.optwarn p{margin:0 0 var(--space-2);font-weight:var(--weight-strong)}
.optwarn .btn{margin-top:0}
.optcard legend{font-weight:var(--weight-strong);padding:0 var(--space-1)}
.tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);min-height:var(--tap)}
.tagbox:focus-within{outline:3px solid var(--primary);outline-offset:2px}
.tag{display:inline-flex;align-items:center;gap:var(--space-1);min-height:36px;padding:0 var(--space-1) 0 var(--space-3);border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font-weight:var(--weight-strong)}
.tag button{min-width:36px;min-height:36px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.taginput{flex:1 1 8rem;min-width:6rem;border:0;outline:0;background:none;color:var(--text);font:inherit;min-height:36px;padding:0 var(--space-2)}
.choicechips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0}
.choicechips:empty{display:none}
.chip{min-height:36px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);font-weight:var(--weight-strong)}
.vgrid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin:0 0 var(--space-3)}
.vrow{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:0;min-width:0}
.vrow legend{font-weight:var(--weight-strong);padding:0 var(--space-1)}