/* ================= Estate Ease — resale shop (demo + browse modes) =================
   Built only on the site's tokens from /style.css (colors, type scale, spacing,
   radii, buttons). Nothing here overrides the shared header/footer. */

/* ---------- demo banner + shop bar ---------- */
.demo-banner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .75rem;
  background:var(--clay);color:#fff;font-size:var(--text-xs);letter-spacing:.03em;padding:.55rem var(--gutter);text-align:center;line-height:1.45}
.demo-banner strong{font-weight:700;letter-spacing:.14em;text-transform:uppercase}
[data-theme="dark"] .demo-banner{background:#8A5230}
/* browse mode: "checkout coming soon" banner (replaces the demo banner) */
.soon-banner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .75rem;
  background:var(--accent);color:#fff;font-size:var(--text-xs);letter-spacing:.03em;padding:.55rem var(--gutter);text-align:center;line-height:1.45}
.soon-banner strong{font-weight:700;letter-spacing:.06em}
.soon-banner a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
[data-theme="dark"] .soon-banner{background:#2F4839}

.shopbar{background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.shopbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:.6rem}
.shopbar__home{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2}
.shopbar__home:hover{color:var(--accent)}
.shopbar__cart{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius-full);padding:.45rem .6rem .45rem 1rem;transition:border-color var(--transition-interactive)}
.shopbar__cart:hover{border-color:var(--accent)}
.shopbar__n{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .4rem;border-radius:var(--radius-full);
  background:var(--line-soft);color:var(--muted);font-size:.75rem;letter-spacing:0}
.shopbar__n.is-full{background:var(--accent);color:#fff}
[data-theme="dark"] .shopbar__n.is-full{color:#12140F}

/* ---------- badges ---------- */
.badge{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.35em .75em;border-radius:var(--radius-full);line-height:1.2}
.badge--sample{background:var(--clay);color:#fff}
.badge--sold{background:var(--text);color:var(--bg)}
.badge--pending{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.testpill{display:inline-block;vertical-align:middle;font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--clay);color:#fff;padding:.4em .8em;border-radius:var(--radius-full);margin-left:.4rem;position:relative;top:-.3em}

/* ---------- listing ---------- */
.shophero{padding-block:clamp(var(--space-12),7vw,var(--space-20)) clamp(var(--space-8),4vw,var(--space-12))}
.shophero .bcrumb{margin-bottom:var(--space-6)}
.shopgrid{padding-block:clamp(var(--space-8),4vw,var(--space-12)) clamp(var(--space-16),8vw,var(--space-24))}
.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--text-sm);padding:.5rem .95rem;border:1px solid var(--line);
  border-radius:var(--radius-full);color:var(--muted);background:var(--surface);transition:border-color var(--transition-interactive),color var(--transition-interactive)}
.chip span{font-size:.75rem;color:var(--faint)}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.is-on span{color:rgba(255,255,255,.8)}
[data-theme="dark"] .chip.is-on,[data-theme="dark"] .chip.is-on span{color:#12140F}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-full);padding:3px;background:var(--surface)}
.seg__b{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:.45rem .9rem;border-radius:var(--radius-full);color:var(--muted)}
.seg__b:hover{color:var(--text)}
.seg__b.is-on{background:var(--text);color:var(--bg)}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .3s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 48px -26px rgba(36,49,42,.3);border-color:var(--accent-soft)}
.pcard__img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard__badges{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
.pcard.is-sold .pcard__img img{filter:grayscale(.85);opacity:.7}
.pcard.is-pending .pcard__img img{opacity:.85}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:var(--space-5) var(--space-6) var(--space-6)}
.pcard__cat{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--accent);margin-bottom:var(--space-2)}
.pcard__t{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2;letter-spacing:-.005em;margin-bottom:var(--space-3)}
.pcard__t a:hover{color:var(--accent)}
.pcard__meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:var(--text-xs);color:var(--muted);flex:1}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line-soft)}
.pcard__price{font-family:var(--font-display);font-size:var(--text-xl);line-height:1}
.pcard__price small,.pdp__price small{font-family:var(--font-body);font-size:var(--text-xs);color:var(--muted)}
.pcard__price.is-sold,.pdp__price.is-sold{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.pcard__na{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--faint);padding:.6rem 1.15rem;border:1px dashed var(--line);border-radius:var(--radius-full)}
.shopempty{padding-block:var(--space-12);color:var(--muted)}
.shopempty a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.shopinfo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:clamp(var(--space-12),6vw,var(--space-20));
  padding:clamp(var(--space-6),3vw,var(--space-10));background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-lg)}
.shopinfo h3{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-4)}
.shopinfo li{font-size:var(--text-sm);color:var(--muted);padding-block:var(--space-2);border-top:1px solid var(--line)}
.shopinfo li strong{color:var(--text);font-weight:500}
.shopinfo__note{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--faint)}
@media (max-width:760px){.shopinfo{grid-template-columns:1fr}}

/* ---------- detail ---------- */
.pdp{padding-block:clamp(var(--space-10),5vw,var(--space-16)) clamp(var(--space-16),8vw,var(--space-24))}
.pdp__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start}
@media (max-width:900px){.pdp__grid{grid-template-columns:1fr}}
.pdp__main{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
/* contain, not cover: portrait photos show in full on the item page (lots must show every piece); the grid still crops */
.pdp__main img{width:100%;aspect-ratio:4/3;object-fit:contain}
.pdp__thumbs{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}
.pdp__grid>*{min-width:0}
@media (max-width:520px){.pdp__thumbs{gap:var(--space-2)}.pdp__thumbs .pdp__thumb{width:60px}}
.pdp__thumb{width:96px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;opacity:.75;transition:opacity .2s,border-color .2s}
.pdp__thumb.is-on,.pdp__thumb:hover{border-color:var(--accent);opacity:1}
.pdp__info{position:sticky;top:96px}
@media (max-width:900px){.pdp__info{position:static}}
.pdp__h{font-size:clamp(2rem,1.4rem + 2vw,3rem)}
.pdp__price{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;margin-bottom:var(--space-6)}
.pdp__buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8)}
.pdp__cartlink{font-size:var(--text-sm);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.qty{display:flex;align-items:center;gap:.5rem;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qty select{border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);padding:.7rem 1rem;font-size:var(--text-sm)}
.pdp__gone{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8);
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--text);border-radius:var(--radius-sm)}
.pdp__gone span{font-size:var(--text-sm);color:var(--muted)}
.pdp__gone a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{background:var(--line);border-color:var(--line);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}
.pdp__desc{margin-bottom:var(--space-8)}
.pdp__facts{border-top:1px solid var(--line)}
.pdp__facts>div{display:grid;grid-template-columns:9rem 1fr;gap:var(--space-4);padding-block:var(--space-4);border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.pdp__facts dt{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-top:.15em}
.pdp__facts dd{color:var(--muted)}
.pdp__facts strong{color:var(--text);font-weight:500}
.pdp__facts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--surface-2);padding:.15em .45em;border-radius:4px;border:1px solid var(--line-soft);color:var(--text)}
@media (max-width:520px){.pdp__facts>div{grid-template-columns:1fr;gap:var(--space-1)}}
.pdp__note{margin-top:var(--space-6);font-size:var(--text-sm);color:var(--muted)}
/* browse mode: buy by phone */
.pdp__call{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8);
  background:var(--accent-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm)}
.pdp__call-h{font-size:var(--text-base);color:var(--text);font-weight:500;line-height:1.45}
.pdp__call-h a{color:var(--accent);white-space:nowrap}
.pdp__call-h code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface);padding:.1em .4em;border-radius:4px;border:1px solid var(--line-soft);white-space:nowrap}
.pdp__call-btns{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.pdp__call-note{font-size:var(--text-sm);color:var(--muted)}
.pdp__call-offers{font-size:var(--text-sm);font-weight:600;color:var(--accent);margin-top:calc(-1 * var(--space-2))}
.pdp__call-text{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.pdp__call-text:hover{background:var(--accent);color:#fff}
[data-theme="dark"] .pdp__call-text:hover{color:#12140F}
@media (max-width:520px){.shopbar__lbl{display:none}}
.shophero__call a,.shopbar__call{white-space:nowrap}
.shophero__call a{color:var(--accent);font-weight:500}
.shopbar__call{padding:.45rem 1rem}
@media (max-width:520px){.pdp__call-btns .btn{flex:1 1 100%;justify-content:center;text-align:center}}
.pdp__note a{color:var(--accent);font-weight:500}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--deep);color:var(--on-dark);
  font-size:var(--text-sm);padding:.8rem 1.2rem;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);transition:opacity .25s,transform .25s;max-width:calc(100% - 2rem)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast a{color:#C8DCC9;text-decoration:underline;text-underline-offset:3px;margin-left:.35rem}

/* ---------- cart + checkout shared ---------- */
.shoppage{padding-block:clamp(var(--space-10),5vw,var(--space-16)) clamp(var(--space-16),8vw,var(--space-24))}
.shoppage .post__h{margin-bottom:var(--space-8)}
.cartwrap,.cowrap{display:grid;grid-template-columns:1fr 380px;gap:clamp(var(--space-6),4vw,var(--space-12));align-items:start}
@media (max-width:900px){.cartwrap,.cowrap{grid-template-columns:1fr}}
.notice{font-size:var(--text-sm);color:var(--muted);background:var(--surface-2);border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.notice--warn{border-left-color:var(--clay);color:var(--text)}
.notice a{color:var(--accent);text-decoration:underline}
.errbox{background:var(--surface);border:1px solid var(--clay);border-left:3px solid var(--clay);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);font-size:var(--text-sm)}
.errbox ul{list-style:disc;padding-left:1.2em;margin-top:var(--space-2);color:var(--text)}
.cartempty{padding:var(--space-10) 0;color:var(--muted)}
.cartempty p{margin-bottom:var(--space-5);font-size:var(--text-lg)}

.clines{border-top:1px solid var(--line)}
.cline{display:grid;grid-template-columns:120px 1fr auto;gap:var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--line);align-items:start}
.cline__img img{border-radius:var(--radius-sm);border:1px solid var(--line-soft)}
.cline__t{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.2}
.cline__t:hover{color:var(--accent)}
.cline__m{font-size:var(--text-xs);color:var(--faint);margin-top:var(--space-1)}
.cline__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-4)}
.cline__max{font-size:var(--text-xs);color:var(--muted)}
.cline__rm{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--clay);text-decoration:underline;text-underline-offset:3px}
.cline__p{font-family:var(--font-display);font-size:var(--text-lg);text-align:right;white-space:nowrap}
.cline__p small{display:block;font-family:var(--font-body);font-size:var(--text-xs);color:var(--muted)}
@media (max-width:560px){.cline{grid-template-columns:88px 1fr}.cline__p{grid-column:2;text-align:left}}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface)}
.stepper button{width:2.2rem;height:2.2rem;font-size:1.1rem;color:var(--text);border-radius:var(--radius-full)}
.stepper button:hover:not([disabled]){color:var(--accent)}
.stepper button[disabled]{color:var(--line);cursor:not-allowed}
.stepper output{min-width:1.6rem;text-align:center;font-weight:500;font-size:var(--text-sm)}

.summary{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6)}
@media (max-width:900px){.summary{position:static}}
.summary__h{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-4)}
.summary dl>div{display:flex;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-3);border-bottom:1px solid var(--line-soft);font-size:var(--text-sm)}
.summary dt{color:var(--muted)}
.summary dd{text-align:right}
.summary__total{border-bottom:0!important;padding-top:var(--space-4)!important}
.summary__total dt{color:var(--text);font-weight:500}
.summary__total dd{font-family:var(--font-display);font-size:var(--text-xl);line-height:1}
.summary .btn--full{margin-top:var(--space-5)}
.summary__note{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--faint);text-align:center}
.summary__back{display:block;margin-top:var(--space-4);text-align:center;font-size:var(--text-sm);color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.summary__err{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--clay)}
.slines{margin-bottom:var(--space-3)}
.slines li{display:grid;grid-template-columns:64px 1fr auto;gap:var(--space-3);align-items:center;padding-block:var(--space-3);border-bottom:1px solid var(--line-soft)}
.slines img{border-radius:4px}
.slines strong{display:block;font-weight:500;font-size:var(--text-sm);line-height:1.35}
.slines small{display:block;font-size:.75rem;color:var(--faint)}
.slines b{font-weight:500;font-size:var(--text-sm)}

.modeline{font-size:var(--text-sm);color:var(--muted);margin:-1rem 0 var(--space-8);max-width:70ch}
.modeline strong{color:var(--text);font-weight:500}
.cofields{display:flex;flex-direction:column;gap:var(--space-6)}
.cobox{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);background:var(--surface);min-width:0}
.cobox legend{font-family:var(--font-display);font-size:var(--text-lg);padding:0 var(--space-2);margin-left:calc(var(--space-2) * -1)}
.fchoice{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-3) 0 var(--space-4)}
@media (max-width:620px){.fchoice{grid-template-columns:1fr}}
.fopt{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;transition:border-color .2s,background .2s}
.fopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.fopt input{accent-color:var(--accent);margin-top:.3rem}
.fopt strong{display:block;font-weight:500;font-size:var(--text-sm)}
.fopt small{display:block;font-size:var(--text-xs);color:var(--muted);margin-top:.2rem;line-height:1.5}
.fopt.is-limited small{color:var(--clay)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-3)}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.ff{display:flex;flex-direction:column;gap:.4rem;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ff--wide{grid-column:1 / -1}
.ff input,.ff textarea{font-family:var(--font-body);font-size:var(--text-sm);letter-spacing:0;text-transform:none;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:.75rem .9rem;width:100%}
.ff input:focus,.ff textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ff textarea{resize:vertical}
.cohint{font-size:var(--text-sm);color:var(--muted)}
.shipopt{margin:0 0 var(--space-4)}
.shipopt__h{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:var(--space-2)}
.shipopt .fchoice{margin:var(--space-2) 0 var(--space-3)}
.fopt strong b{font-weight:500;color:var(--accent);white-space:nowrap}
.shipopt__note{font-size:var(--text-xs);line-height:1.5}
.shipopt__note a,.agree a,.summary__final a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.agree{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);color:var(--muted)}
.agree input{accent-color:var(--accent);margin-top:.3rem;width:1.05rem;height:1.05rem;flex:none}
.agree em{color:var(--faint)}
[hidden]{display:none!important}

/* ---------- confirmation ---------- */
.wrap--confirm{max-width:980px}
.confirm .post__x{margin-bottom:var(--space-8)}
.confirm__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-6);margin-bottom:var(--space-8)}
@media (max-width:820px){.confirm__grid{grid-template-columns:1fr}}
.confirm__ref{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--space-3)}
.confirm__ref strong{color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
.confirm__tot>div{display:flex;justify-content:space-between;padding-block:var(--space-2);font-size:var(--text-sm);border-bottom:1px solid var(--line-soft)}
.confirm__tot dt{color:var(--muted)}
.confirm__tot .summary__total dd{font-family:var(--font-display);font-size:var(--text-xl)}
.confirm .cobox p{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--space-3)}
.confirm .cobox p strong{color:var(--text);font-weight:500}