/* SiteStock application styles. Tokens shared with the landing page. */
:root{
  --bg:#f5f2ec; --surface:#ffffff; --surface-2:#ece7de; --ink:#1e1d1b; --muted:#6b645b; --line:#dcd5ca;
  --accent:#e2621a; --accent-ink:#1e1d1b; --accent-soft:#fbe8dc;
  --grade-new:#2d8a57; --grade-site:#c2860f; --grade-recl:#5c6b78;
  --good:#2d8a57; --warn:#c2860f; --bad:#c23b2a;
  --display:"Archivo",system-ui,sans-serif; --body:"Public Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#17181a; --surface:#212326; --surface-2:#2a2d31; --ink:#f0ede7; --muted:#a39d94; --line:#34373c;
  --accent:#f07a35; --accent-ink:#1a1206; --accent-soft:#3a2516;
  --grade-new:#4cb27a; --grade-site:#e0a63a; --grade-recl:#8a9bab; --good:#4cb27a; --warn:#e0a63a; --bad:#e2604f;
  color-scheme:dark } }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;padding-bottom:76px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:26px;font-weight:800}h3{font-size:16px;font-weight:700}h4{font-size:14px;font-weight:700;margin-top:8px}
p{margin:0}a{color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.gap{gap:10px}.grow{flex:1}.wrap-row{flex-wrap:wrap;justify-content:flex-start}
.stack{display:flex;flex-direction:column;gap:12px}
.narrow{max-width:640px;margin:0 auto}
.note{font-size:12.5px;color:var(--muted)}.bad{color:var(--bad)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:16px;color:var(--muted);max-width:38em}
/* header */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .wrap{height:56px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);text-decoration:none}
.brand .mark{width:26px;height:26px;border-radius:6px;background:var(--accent);position:relative}
.brand .mark::before,.brand .mark::after{content:"";position:absolute;left:5px;right:5px;height:4px;background:var(--accent-ink);border-radius:1px}
.brand .mark::before{top:7px}.brand .mark::after{top:15px}
nav.desk{display:flex;gap:6px}
nav.desk a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:8px}
nav.desk a.on,nav.desk a:hover{color:var(--ink);background:var(--surface-2)}
.subnav{display:flex;gap:4px;flex-wrap:wrap}.subnav a{font-size:13px;font-weight:600;text-decoration:none;padding:6px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
main{padding-block:18px}
/* tab bar (phone) */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:none;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--surface);padding:6px 6px calc(10px + env(safe-area-inset-bottom));z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab.active{color:var(--accent)}.tab.sell{color:var(--accent-ink)}.tab.sell .pill{background:var(--accent);border-radius:12px;padding:3px 10px;display:flex}
@media (max-width:760px){.tabbar{display:grid}nav.desk{display:none}body{padding-bottom:84px}}
@media (min-width:761px){body{padding-bottom:24px}}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);padding-block:20px;border-top:1px solid var(--line);margin-top:30px}
/* buttons, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;font-family:var(--display);font-weight:600;font-size:14.5px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.block{width:100%}.btn.ghost{background:transparent}.btn.small{padding:7px 11px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:default}
input[type=text],input[type=tel],input[type=search],input[type=email],input[type=number],input:not([type]),select,textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-width:0;max-width:100%;width:100%}
.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{font-weight:400;color:var(--ink);font-size:15px}
.inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.inline select{width:auto}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.alert{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);font-size:14px;margin-bottom:12px}
.alert.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.alert ul{margin:6px 0 0 18px;padding:0}
.toast{position:fixed;left:16px;right:16px;bottom:92px;max-width:520px;margin:0 auto;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:30;opacity:0;transition:.25s}
.toast.show{opacity:1}
@media (min-width:761px){.toast{bottom:24px}}
/* browse */
.hero-strip{padding:8px 0 14px}.hero-strip h1{font-size:clamp(28px,4vw,40px);margin-top:6px}
.filters{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.search input{border:0;background:transparent;padding:4px 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.chip{flex:0 0 auto;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink);text-decoration:none}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
@media (max-width:560px){.cards{grid-template-columns:1fr 1fr;gap:10px}.card .title{font-size:13px}.card .price{font-size:15px}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.card .imgwrap{position:relative}
.img{aspect-ratio:4/3;max-width:100%;background-size:cover;background-position:center}
.card .body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:4px}
.card .title{font-weight:600;font-size:14px;line-height:1.3}
.card .price{font-family:var(--display);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.card .sub{font-size:12.5px;color:var(--muted)}
.gchip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:999px;color:#fff;font-family:var(--display);white-space:nowrap}
.gchip.new{background:var(--grade-new)}.gchip.site{background:var(--grade-site)}.gchip.recl{background:var(--grade-recl)}
.imgwrap .gchip{position:absolute;left:8px;top:8px}
.verified{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:3px 6px;border-radius:6px;font-weight:700}
.empty{padding:36px 12px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:14px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.step{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.step .n{font-family:var(--display);font-weight:700;color:var(--accent);font-size:13px}.step h3{margin-top:6px}.step p{color:var(--muted);font-size:14px;margin-top:4px}
@media (max-width:760px){.how{grid-template-columns:1fr}}
/* material swatches for demo listings */
.mat-bricks_pavers{background:repeating-linear-gradient(0deg,transparent 0 22px,#d9cfc4 22px 25px),repeating-linear-gradient(90deg,transparent 0 44px,#d9cfc4 44px 47px),linear-gradient(#a84a2c,#9b4229)}
.mat-timber{background:repeating-linear-gradient(0deg,#c99a5b 0 14px,#b8884b 14px 17px,#d4a86a 17px 30px,#a97d43 30px 32px)}
.mat-tiles{background:repeating-linear-gradient(90deg,transparent 0 46px,#d6d2cc 46px 48px),repeating-linear-gradient(0deg,transparent 0 46px,#d6d2cc 46px 48px),linear-gradient(135deg,#f1efea,#dcd8d1)}
.mat-roofing{background:repeating-linear-gradient(90deg,#3a3d42 0 8px,#5b5f66 8px 14px,#2f3236 14px 22px)}
.mat-cement_plaster{background:linear-gradient(180deg,#e7e2d8 0 30%,#5a3b9b 30% 45%,#e7e2d8 45% 100%)}
.mat-fittings{background:radial-gradient(circle at 50% 45%,#f4f4f2 0 22%,#cfd3d6 23% 26%,#eceeee 27% 100%)}
.mat-doors_windows{background:linear-gradient(90deg,#7a5230 0 10%,#9a6a3f 10% 90%,#7a5230 90% 100%)}
.mat-structural{background:repeating-linear-gradient(45deg,#7d8188 0 12px,#5f636a 12px 24px)}
.mat-other{background:linear-gradient(135deg,var(--surface-2),var(--line))}
/* listing */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.back{font-weight:600;color:var(--muted);text-decoration:none;font-size:14px}
.hero-img{aspect-ratio:16/10;max-width:100%;border-radius:14px;background-size:cover;background-position:center}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.thumb{width:72px;height:54px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--surface-2)}
.thumb.lg{width:100%;max-width:360px;height:220px;margin-top:8px}
.thumb-sq{width:54px;height:54px;border-radius:10px;flex:0 0 auto;background-size:cover;background-position:center}
.ltitle{font-size:22px;font-weight:700;margin-top:12px}
.lprice{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap}
.lprice b{font-family:var(--display);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.lprice s{color:var(--muted);font-size:14px}
.lmeta{font-size:13px;color:var(--muted);margin-top:2px}.desc{margin-top:10px;white-space:pre-line}
.badge{font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-family:var(--display);white-space:nowrap}
.badge.muted{background:var(--surface-2);color:var(--muted)}
.seller{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;flex:0 0 auto}
.seller .who{flex:1;min-width:0}.seller .who b{display:block;font-size:14px}.seller .who span{font-size:12px;color:var(--muted)}
.section{margin-top:18px}.section h3{margin-bottom:8px}
.attrs{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.attrs div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--line);font-size:13.5px}
.attrs div:first-child{border-top:0}.attrs span{color:var(--muted)}.attrs b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.escrow{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--accent-soft);font-size:13px;margin-top:14px}
.escrow svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.buybox{position:sticky;top:72px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.buybox h3{margin-bottom:8px}
.calc{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:4px 12px;margin-top:8px}
.calc .row{padding:7px 0;font-size:14px;align-items:flex-start}.calc .row + .row{border-top:1px solid var(--line)}.calc .row b{font-variant-numeric:tabular-nums;text-align:right}
.calc .total{font-family:var(--display);font-size:17px;font-weight:700}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.flag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;font-weight:600;background:var(--bg);cursor:pointer}
.flag:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.flag input{margin:0}
/* orders */
.ordercard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.ordercard.link{display:block;text-decoration:none;color:inherit}
.ordercard .head{display:flex;gap:10px;align-items:center}.ordercard .head > div{flex:1;min-width:0}
.ordercard .head b{display:block;font-size:14px}.ordercard .head span{font-size:12.5px;color:var(--muted)}
.status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;font-family:var(--display);white-space:nowrap}
.status.held{background:var(--accent-soft);color:var(--accent)}.status.done{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.status.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}.status.off{background:var(--surface-2);color:var(--muted)}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:24px 1fr;gap:10px;padding-bottom:16px;position:relative}
.tl::before{content:"";position:absolute;left:11px;top:22px;bottom:0;width:2px;background:var(--line)}.tl:last-child::before{display:none}
.tl .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:12px;font-weight:700}
.tl.done .dot{background:var(--good);border-color:var(--good);color:#fff}
.tl b{display:block;font-size:14px}.tl span{font-size:12.5px;color:var(--muted)}
.actionbox{margin-top:18px;padding:14px;border-radius:14px;background:var(--surface);border:2px solid var(--accent);display:flex;flex-direction:column;gap:10px}
details summary{cursor:pointer;list-style:none}details summary::-webkit-details-marker{display:none}
/* sell wizard */
.wizard .progress{display:flex;gap:4px;margin-bottom:14px}.wizard .progress i{flex:1;height:4px;border-radius:2px;background:var(--line)}.wizard .progress i.on{background:var(--accent)}
.wizard h3{font-size:18px;margin-bottom:4px}.wizard .help{font-size:13px;color:var(--muted);margin-bottom:12px}
.opt{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:4px;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}.opt:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.opt b{font-size:14px}.opt span{font-size:12px;color:var(--muted)}.opt .gchip{align-self:flex-start}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo{aspect-ratio:1;max-width:100%;border-radius:10px;border:1px dashed var(--line);display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center;padding:6px;background:var(--surface);position:relative;overflow:hidden;cursor:pointer;background-size:cover;background-position:center}
.photo input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo.filled{border-style:solid;color:transparent}
.guide{padding:12px;border-radius:12px;background:var(--surface-2);font-size:13.5px}
.wizard .nav{display:flex;gap:8px;margin-top:14px}
/* account, admin */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}.stats.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.stats.four{grid-template-columns:1fr 1fr}}
.stat{padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat span{font-size:12px;color:var(--muted)}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.rowitem{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:14px;margin:0}.rowitem:first-child{border-top:0}
.table{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}th{border-top:0;color:var(--muted);font-weight:600;white-space:nowrap}