/* Floor It module library — shared tokens (port of SaySo tokens-368.css, furniture palette).
   Every module reads ONLY these vars. .mod is dark, .mod.lt is light. The engine injects
   --acc/--acc2/--acctx/--onacc (the store colour) and --cf/--cfw (the chosen font) on :root;
   unset, the brass and the system sans stand in. Style base: REFERENCE.html (ink, bone,
   one brass line, hairlines, flat pills, lamp-light photo grounds). */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,"Segoe UI",Roboto,Arial,sans-serif);-webkit-font-smoothing:antialiased;background:#0a0a0b}
body.lt{background:#fff}

/* ---- dark (the default) ---- */
.mod{
  --bg:#0a0a0b;--bg2:#141416;--bg3:#1c1c20;
  --ink:#ece8e1;--mut:rgba(236,232,225,.62);--mut2:rgba(236,232,225,.55);
  --line:rgba(236,232,225,.14);--line2:rgba(236,232,225,.07);
  --acc:#c9a56b;--acc2:#8f7447;--acctx:#c9a56b;--onacc:#0a0a0b;
  --sale:#e0573b;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --disp:var(--cf,-apple-system),-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --dw:var(--cfw,600);
  --body:var(--sans);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --radius:12px;--gutter:clamp(16px,4vw,56px);--max:1480px;
  --ease:cubic-bezier(.2,.7,.2,1);
  background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--body);letter-spacing:-.005em;
  position:relative;overflow:hidden;color-scheme:dark}
/* ---- light ---- */
.mod.lt{
  --bg:#ffffff;--bg2:#f5f4f1;--bg3:#ebe9e4;
  --ink:#0b0b0c;--mut:#5f5f66;--mut2:#6f6f78;
  --line:rgba(0,0,0,.12);--line2:rgba(0,0,0,.06);
  --acctx:#7d6540;--onacc:#0a0a0b;--sale:#c9452b;
  color-scheme:light}

/* ---- base type ---- */
.mod h1,.mod h2,.mod h3,.mod h4{font-weight:var(--dw);letter-spacing:-.025em;text-wrap:balance}
.mod p{margin:0}
.mod ul,.mod ol{list-style:none}
.mod img,.mod svg{max-width:100%;display:block}
.mod em{font-style:normal;color:var(--mut2)}
.mod .num{font-variant-numeric:tabular-nums}
.mod :focus-visible{outline:1px solid var(--acctx,var(--acc));outline-offset:3px}
:where(.mod a){color:inherit;text-decoration:none}
.mod button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.mod *{min-width:0}

/* ---- shared atoms ---- */
.mod .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);width:100%}
.mod .kick{display:block;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mod .kick.acc{color:var(--acctx,var(--acc))}
.mod .kick.line{display:flex;align-items:center;gap:12px}
.mod .kick.line::before{content:"";width:28px;height:1px;background:var(--acctx,var(--acc));flex:none}
.mod .disp{font-family:var(--disp);font-weight:var(--dw);letter-spacing:-.035em;line-height:1;font-size:clamp(40px,6.4vw,92px)}
.mod .disp em{color:var(--mut2);font-style:normal}
.mod .disp.sec{font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.025em}
.mod .sub{color:var(--mut);font-size:16px;line-height:1.55;max-width:46ch}
.mod .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;min-height:44px;padding:0 22px;border-radius:999px;
  background:var(--ink);color:var(--bg);font:500 14px/1 var(--body);letter-spacing:0;white-space:nowrap;text-decoration:none;border:1px solid var(--ink);cursor:pointer;
  transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s}
.mod .btn:hover{transform:translateY(-1px)}
.mod .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.mod .btn.ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.mod .btn.acc{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
.mod .btn.sm{height:38px;padding:0 16px;font-size:13px}
.mod .btn svg{width:14px;height:14px;flex:none}
.mod .link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font:500 14px/1 var(--body);white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.mod .link:hover{border-color:var(--ink)}
.mod .link svg{width:14px;height:14px;flex:none}
.mod .pill{display:inline-flex;align-items:center;gap:8px;height:36px;min-height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);font:400 13px/1 var(--body);color:var(--mut);white-space:nowrap;cursor:pointer;background:transparent;transition:all .2s}
.mod .pill:hover{color:var(--ink);border-color:var(--mut)}
.mod .pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mod .tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);color:var(--mut)}
.mod .tag.sale{background:var(--sale);border-color:var(--sale);color:#0a0a0b}
.mod.lt .tag.sale{color:#fff}
.mod .tag.new{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.mod .card{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
.mod .hr{height:1px;background:var(--line2)}
.mod .mono{font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mod input:not([type=checkbox]):not([type=radio]),.mod select,.mod textarea{appearance:none;-webkit-appearance:none;width:100%;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:400 15px/1.3 var(--body);outline:0}
.mod textarea{border-radius:var(--radius);padding:14px 18px;min-height:120px;resize:vertical}
.mod input::placeholder,.mod textarea::placeholder{color:var(--mut2)}
.mod input:focus,.mod select:focus,.mod textarea:focus{border-color:var(--ink)}
.mod .field{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 18px;min-height:54px}
.mod .field input{border:0;padding:0;min-height:44px;flex:1}
.mod .field .btn{flex:none}
@media (max-width:600px){.mod .field.stack{flex-direction:column;align-items:stretch;border-radius:28px;padding:6px}.mod .field.stack input{padding:0 14px}.mod .field.stack .btn{width:100%}}
.mod .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 10%,transparent) 0%,color-mix(in srgb,var(--bg) 5%,transparent) 40%,color-mix(in srgb,var(--bg) 90%,transparent) 100%)}
.mod .veil.side{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 45%,color-mix(in srgb,var(--bg) 10%,transparent) 100%)}
.mod .veil.flat{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.mod .sw{display:inline-flex;gap:6px}
.mod .sw i{width:14px;height:14px;border-radius:999px;border:1px solid var(--line);display:block}

/* ---- the photo slot: a lamp-light ground until the owner drops a photo in
   (the engine writes style="background-image:url(…)" on the slot) ---- */
.mod .ph{position:relative;overflow:hidden;background-size:cover;background-position:center;
  background-image:radial-gradient(120% 90% at 78% 12%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 55%),
    radial-gradient(70% 60% at 20% 95%,color-mix(in srgb,var(--ink) 7%,transparent),transparent 60%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
.mod.lt .ph{background-image:radial-gradient(120% 90% at 78% 12%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 55%),
    radial-gradient(70% 60% at 20% 95%,color-mix(in srgb,var(--ink) 5%,transparent),transparent 60%),
    linear-gradient(180deg,var(--bg3) 0%,var(--bg2) 100%)}
.mod .ph::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.mod .ph[style*="url("]::before,.mod .ph.filled::before{display:none}
.mod .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mod a.ph{background:none}
.mod a.ph::before{content:none}

/* ---- icons (sa-ico.js) ---- */
.saico{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-.12em;line-height:0}
.saico svg{width:100%;height:100%;display:block}
.saico[data-ico]::before,.saico[data-ico]::after{content:none!important}
html.saedit .saico{cursor:pointer;border-radius:4px;outline:1px dashed transparent;outline-offset:2px}
html.saedit .saico:hover{outline-color:var(--acc,#c9a56b)}
.saico-pick{position:fixed;inset:0;z-index:2147483000;background:rgba(8,10,14,.62);display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.saico-card{background:var(--bg2,#fff);color:var(--ink,#0b0b0c);border-radius:14px;width:min(560px,100%);max-height:80vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.saico-hd{padding:1.05rem 1.25rem;border-bottom:1px solid var(--line,rgba(0,0,0,.12));font:600 .95rem var(--body,system-ui)}
.saico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;padding:1rem 1.25rem}
.saico-b{aspect-ratio:1;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:10px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:inherit;font:500 9.5px var(--body,system-ui);padding:6px}
.saico-b svg{width:22px;height:22px}
.saico-b:hover{border-color:var(--acc,#c9a56b)}
.saico-b.on{border-color:var(--acc,#c9a56b);background:color-mix(in srgb,var(--acc,#c9a56b) 9%,transparent)}
.saico-ft{padding:.85rem 1.25rem;text-align:right;border-top:1px solid var(--line,rgba(0,0,0,.12))}
.saico-ft button{font:600 .8rem var(--body,system-ui);padding:.6em 1.1em;border-radius:999px;border:1px solid var(--line,rgba(0,0,0,.16));background:transparent;color:inherit;cursor:pointer}

/* ---- motion: a module's own transitions stop under reduced motion ---- */
@media (prefers-reduced-motion:reduce){.mod *,.mod *::before,.mod *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---- phone ---- */
@media (max-width:840px){.mod .btn,.mod button:not(.pill){min-height:44px}}
@media (max-width:600px){.mod .disp{font-size:clamp(40px,12vw,64px)}.mod .btn{padding:0 18px}}